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. プログラムの説明
- ページ内遷移は、Home みたいな、hrefの値に”#”で始まる、値を設定して実現します。
- Linkには、ExternalLink(final String id, final String href, final String label)コンストラクタを使用します。
変数hrefに、遷移先のidを設定。 - いろいろ余計な記述があって見にくいかもです。。
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. プログラムの説明
- ExternalLinkの生成に使用するデータクラスです。
- 全ページで使用するページトップリンクだけ、対象のインスタンスを返すメソッドを作成しています。
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. プログラムの説明
- HeaderPanelのbuilderクラスを使用して、HeaderPanel内のページ内遷移のエレメント要素のセットアップを行います。
まとめ
ExternalLinkのコンストラクタのhrefに”#”で始まる値を設定すれば、ページ内遷移を実現できます。 でも可能なので、Link、且つ、AttributeModifier.replace()を使用しても、 実装はできるかもしれませんが、そちらは試しておりません。。
コメント