![]() The tabview would be responsible for the rendering of the tab header elements (and should provide a container element where the currently active tab page can render its children. If we would use our tabview component now, it would look something like this:Īs you can see, we already have 2 composite components: one for the tabview and one for the tabs. The component should of course be able to work with any number of tab pages and as tab-content in bigger applications tends to be quite big, the component should only render one tab page at a time, so that the browser only loads the necessary HTML.īecause of this the tabview needs to know which tab page is currently active. The tab content needs to be placed inside an independent tab-content element which is holding a tab-pane element for every tab. ![]() The markup of the tabview is based on twitter’s bootstrap tabview and consists of an unordered list element (ul) with nested li-Elements for the tab headers. What does our tabview component do and how is it structured? If you have any question or suggestion just leave a comment. Don’t forget to adjust the package name of the class and the component name inside the class. You have to copy the templates and classes to your project manually. You can download the complete source code in my tabview github repository. The component should work with every JSF 2.x version. You can use any CSS styling framework you like. The main advantages of it over the primefaces tabview are that you have learned something about jsf and that you can freely change the html markup as you need it. We will develop it based on twitter bootstrap markup and you can use it without any additional client javascript, you don’t even need the bootstrap.js as the switching of tabs is entirely done on the server side (we are talkng about JSF here!). It’s a standard widget found in every operating system and many widget frameworks. The tabview needs to render 1-n different tabs which the user can switch through freely with a click to the tab header. Our composite component which we will be developing here is a tabview component just like the one you see on this screenshot of primefaces showcase. As I learned a few things while implementing the components, I thought I could share it with others as good tutorials for composite components are quite rare. At my current company we are finally transitioning away from our well-aged Primefaces 3.0 jsf library and have implemented our own (composite) components for all use cases where we used primefaces thus far.
0 Comments
Leave a Reply. |