Template inheritance of wicket (i)

Wicket components and HTML files always appear in pairs, such as A.java and a.html.

If there are no paired occurrences, it could be an inline template, or from an inheritance.

Take the wicket built-in pagingnavigator component as an example to view the source package, with the corresponding pagingnavigator.html file present.

Now create a new Mypagingnavigator class that inherits from Pagingnavigator.

This is the content of 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=" The Last ">&gt;&gt;</a></wicket:panel>

If mypagingnavigator.html is not provided , then Mypagingnavigator will integrate the template from the pagingnavigator.html.

Now provide your own HTML template to make it into the PURECSS format:

<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 "> <l I><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>

It can be seen that such a way to achieve a certain effect, but the control means very limited, and eventually you have to read Pagingnavigator source code, to achieve their own purecss-based paginator.

Compared to the familiar JS control dom,wicket looks clumsy many. But component-based reuse makes all the hard work return to value.

Template inheritance of wicket (i)