首页 > 代码库 > wicket的模板继承(一)

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="http://www.mamicode.com/#"><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="http://www.mamicode.com/#">&#171;</a></li>
    <span wicket:id="navigation" class="goto">
    <li><a wicket:id="pageLink" class="pure-button" href="http://www.mamicode.com/#"><span wicket:id="pageNumber">5</span></a></li>
    </span>
    <li><a wicket:id="next" class="pure-button next" href="http://www.mamicode.com/#">&#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的模板继承(一)