如何調整wicket的PagingNavigator的html輸出

這是默認模板：

<wicket:panel>
	<a wicket:id="first" class="first">&lt;&lt;</a>
	<a wicket:id="prev" class="prev">&lt;</a>
	<span wicket:id="navigation" class="goto">
		<a wicket:id="pageLink" href="#"><span wicket:id="pageNumber">5</span></a>
	</span>
	<a wicket:id="next" class="next">&gt;</a>
	<a wicket:id="last" class="last">&gt;&gt;</a>
</wicket:panel>

固然最外圍的tag由該組件的模板決定。好比外圍用div：

<div wicket:id="mypaginator"></div>

如今假設須要purecss樣式的pagingNavigator，它的html以下：

<ul class="pure-paginator">
    <li><a class="pure-button prev" href="#">&#171;</a></li>
    <li><a class="pure-button" href="#">1</a></li>
    <li><a class="pure-button pure-button-active" href="#">2</a></li>
    <li><a class="pure-button" href="#">3</a></li>
    <li><a class="pure-button" href="#">4</a></li>
    <li><a class="pure-button" href="#">5</a></li>
    <li><a class="pure-button next" href="#">&#187;</a></li>
</ul>

可見二者的差異仍是很多。讓咱們看看可能的方法：

一、新建一個類，繼承PagingNavigator。

    好比類名稱是PagingNavigator，而後創建對應的模板文件PagingNavigator.html，內容以下：

<ul class="pure-paginator">
    <li><a wicket:id="first" class="pure-button first" href="#">&#171;</a></li>
    <li><a wicket:id="prev" class="pure-button prev" href="#">&#171;</a></li>
    <li wicket:id="navigation"><a wicket:id="pageLink" class="pure-button" href="#"><wicket:container wicket:id="pageNumber"></wicket:container></a></li>
    <li><a wicket:id="next" class="pure-button next" href="#">&#187;</a></li>
    <li><a wicket:id="last" class="pure-button last" href="#">&#187;</a></li>
</ul>

這樣子畫出來的PagingNavigator的就是purecss樣式的。可是還須要完善，當前頁的樣式，沒有最後一頁的時候按鈕應該disabled。也就是說根據當前頁的狀況須要添加pure-button-disabled，或者pure-button-active樣式。

爲了達成這個功能，咱們須要更深的探究PagingNavigator類，看看哪裏能夠實現這個功能。

對照上面的模板，其中wicket:id="navigation"對應的是PagingNavigation組件，其中有一個方法是：

@Override
	protected void populateItem(final LoopItem loopItem)
	{
		// Get the index of page this link shall point to
		final long pageIndex = getStartIndex() + loopItem.getIndex();

		// Add a page link pointing to the page
		final AbstractLink link = newPagingNavigationLink("pageLink", pageable, pageIndex);
		link.add(new TitleAppender(pageIndex));
		loopItem.add(link);

		// Add a page number label to the list which is enclosed by the link
		String label = "";
		if (labelProvider != null)
		{
			label = labelProvider.getPageLabel(pageIndex);
		}
		else
		{
			label = String.valueOf(pageIndex + 1);
		}
		link.add(new Label("pageNumber", label));
	}

其中TitleAppender用來添加link的title屬性，這樣鼠標移到上面的時候就會提示，好比goto 2 page等等。接下來是label，就是pageNumber對應的組件。

能夠經過複寫這個方法，根據狀況對label進行修飾（AttributeModifier），最終達到須要的效果。