- Pick a View Control, Any View Control
- The View Control: Up Close and Personal
- Data Table
- Repeat Control
- Some Fun with the Pager
- Conclusion
This chapter is from the book
This chapter is from the book
This chapter is from the book
Some Fun with the Pager
After all the hard work done in this chapter, you might as well finish on a light note. The common view pager that you have worked with in various examples is actually a highly configurable control, even though it has only been used in its default state thus far. The next exercise shows how to transform the look and feel of your pager.
You should start by revisiting the dataTable.xsp XPage and making a new copy of this, called dataTableExt.xsp. In the new XPage, activate the Source pane and find the facets tag for the Data Table—careful not to accidentally pick the facets tag for one of the columns! Copy and paste the existing <xp:pager> tag that's already defined in the Data Table facets and then set xp:key="header" and panelPosition="right" on one of them. After completing this task, the Data Table should have two pagers: one on the right hand side of the header and one on the left hand side of the footer. Select the header pager in the Outline view and activate the WYSIWYG editor and Pager property panel.
The first thing you can do is apply different pager styles to the header pager (for example, Sample 1 through Sample 7), and preview or reload the XPage to see what features are exposed in the different canned styles. What's more interesting, however, is to play around with a custom layout. For this example, select the footer pager in the Outline view and change the Pager style combo box style to Custom. This causes a new list of controls to be displayed in the Property panel—select the ones shown in Figure 9.31.
)
Figure 9.31 Working with a custom pager in Designer
In the Outline view, select each of the newly created three child controls in turn and assign images to them. The Previous control should be assigned "/Lo.gif", the Group control (Page Selector) should be assigned "/oooooo.gif", and the Next control should be assigned "/tus.gif". These image resources have been already added to Chapter9.nsf for your convenience. In fact, a dataTableExt.xsp XPage is also included if you do not feel like building this example—it's been a long chapter! The updated markup for the Data Table facets tag should now look like Listing 9.12.
Listing 9.12. Custom Pager Definitions
<xp:this.facets>
<xp:pager id="pager2" for="dataTable1" xp:key="header"
panelPosition="right" partialRefresh="true">
</xp:pager>
<xp:pager xp:key="footer" id="pager1" for="dataTable1"
partialRefresh="true" disableTheme="true">
<xp:pagerControl id="pagerControl1" type="Previous"
image="/Lo.gif">
</xp:pagerControl>
<xp:pagerControl id="pagerControl3" type="Group"
image="/oooooo.gif">
</xp:pagerControl>
<xp:pagerControl id="pagerControl2" type="Next"
image="/tus.gif">
</xp:pagerControl>
</xp:pager>
</xp:this.facets>
With this markup in place, preview the page. In Figure 9.32, observe that navigating on the footer pager updates the header pager state—as you would expect! So, even though the header and footer pagers no longer bear any visual resemblance to each other, their behaviors are identical.
)
Figure 9.32 Custom Loooooootus Pager