wicket的模板继承（一）

标签：

wicket的组件和html文件总是成对出现，比如A.java和A.html。

如果没有成对出现，可能是inline模板，或者来自继承。

以wicket内置的PagingNavigator组件为例，查看源文件包，有对应的PagingNavigator.html文件存在。

现在新建一个MyPagingNavigator类，继承自PagingNavigator。

这是PagingVavigator.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>

如果没有提供MyPagingNavigator.html，那么MyPagingNavigator将从PagingNavigator.html集成模板。

现在提供自己的html模板，让它变成purecss格式：

<wicket:panel>
<a wicket:id="first" class="first" style="display:none;">&lt;&lt;</a>
<ul class="pure-paginator">
    <li><a wicket:id="prev" class="pure-button prev" href="#">&#171;</a></li>
    <span wicket:id="navigation" class="goto">
    <li><a wicket:id="pageLink" class="pure-button" href="#"><span wicket:id="pageNumber">5</span></a></li>
    </span>
    <li><a wicket:id="next" class="pure-button next" href="#">&#187;</a></li>
</ul>
<a wicket:id="last" class="last" style="display:none;">&gt;&gt;</a>
</wicket:panel>

可见这样的写法可以达成一定的效果，但是可控制手段非常受限，最终你必须通过阅读pagingNavigator的源代码，实现自己的基于purecss的paginator。

相对于熟悉js操控dom，wicket看起来笨拙许多。但是基于组件的重用，会让一切辛苦都回归价值。

wicket的模板继承（一）

标签：

原文地址：http://my.oschina.net/jianglibo/blog/361103