Webページの右上のナビゲーションで、ページ内遷移のhrefタグを、
動的に追加する実装をした際の備忘をメモしておきます。

プログラム

1. HeaderPanel.html

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org" lang="ja">  
    <body>
        <wicket:panel>
            <header>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse scrollspy smooth-scroll" id="navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li wicket:id="naviList">
                            <a wicket:id="navi" href="#banner">Home</a>
                        </li>
                    </ul>
                </div>
            </header>
            <!-- header end -->
        </wicket:panel>
    </body>
</html>

2. HeaderPanel.java

public class HeaderPanel extends Panel {

    /**
     * Counstructor
     *
     * @param id
     * @param naviList
     * @param doBackTop
     */
    public HeaderPanel(String id, List<HeaderPanelNaviItem> naviList) {
        super(id);
        if (naviList == null) {
            naviList = new ArrayList<>();
            naviList.add(HeaderPanelNaviItem.getPageTop());
        }
        addNaviList(naviList);
    }

    private void addNaviList(List<HeaderPanelNaviItem> naviList) {
        ListView<HeaderPanelNaviItem> listview = new ListView<HeaderPanelNaviItem>("naviList", naviList) {

            private static final long serialVersionUID = 9101744072914090143L;

            @Override
            protected void populateItem(ListItem<HeaderPanelNaviItem> item) {
                HeaderPanelNaviItem elem = item.getModelObject();
                if (elem.isActive()) {
                    item.add(AttributeModifier.replace("class", "active"));
                }
                // Child Element
                ExternalLink link = new ExternalLink("navi", elem.getHref(), elem.getTitle());
                item.add(link);
            }
        };
        add(listview);
    }

    public static Builder builder() {
        return new Builder();
    }

    public static class Builder {

        private List<HeaderPanelNaviItem> elements;
        private String id;

        public Builder addNaviElement(@NonNull HeaderPanelNaviItem elem) {
            if (elements == null) {
                elements = new ArrayList<>();
            }
            elements.add(elem);
            return this;
        }

        public Builder id(@NonNull String id) {
            this.id = id;
            return this;
        }

        public HeaderPanel build() {
            return new HeaderPanel(id, elements);
        }
    }

}

2.1. プログラムの説明

  1. ページ内遷移は、Home みたいな、hrefの値に“#”で始まる、値を設定して実現します。
  2. Linkには、ExternalLink(final String id, final String href, final String label)コンストラクタを使用します。
    変数hrefに、遷移先のidを設定。
  3. いろいろ余計な記述があって見にくいかもです。。

3. HeaderPanelNaviItem.java

@Builder
@Data
public class HeaderPanelNaviItem implements Serializable {

    private static final long serialVersionUID = 5551353331074083661L;

    @NonNull
    private String href;
    @NonNull
    private String title;
    private boolean isActive;

    public static HeaderPanelNaviItem getPageTop() {
        return builder()
                .href("#pageTop")
                .title("Page Top")
                .isActive(true)
                .build();
    }
}

3.1. プログラムの説明

  1. ExternalLinkの生成に使用するデータクラスです。
  2. 全ページで使用するページトップリンクだけ、対象のインスタンスを返すメソッドを作成しています。

4. BasePage.java

```java public class BasePage extends WebPage implements AppResource {

/**
 * Constructor
 */
public BasePage() {
    super();
}

@Override
protected void onInitialize() {
    super.onInitialize();
    // Add Panel
    HeaderPanel.Builder builder = HeaderPanel.builder()
            .id(id)
            .doBackTop(false);
    builder.addNaviElement(HeaderPanelNaviItem.getPageTop());
    builder.addNaviElement(HeaderPanelNaviItem.builder()
            .href("#festivals").title("Festivals").build());
    builder.addNaviElement(HeaderPanelNaviItem.builder()
            .href("#about").title("About").build());
    builder.addNaviElement(HeaderPanelNaviItem.builder()
            .href("#contact").title("Contact").build());
    HeaderPanel panel = builder.build();
    add(panel);
}

}

4.1. プログラムの説明

  1. HeaderPanelのbuilderクラスを使用して、HeaderPanel内のページ内遷移のエレメント要素のセットアップを行います。

まとめ

ExternalLinkのコンストラクタのhrefに“#”で始まる値を設定すれば、ページ内遷移を実現できます。 でも可能なので、Link、且つ、AttributeModifier.replace()を使用しても、 実装はできるかもしれませんが、そちらは試しておりません。。

コメント

カテゴリー

最近の投稿