Navigation tabs approach
|
View:
New views
3 Messages
—
Rating Filter:
Alert me
|
 |
Navigation tabs approach
by Naresh Bhatia
::
Rate this Message:
Hi,
I was looking for an approach for managing navigation tabs common to bunch of pages. I have come up with a way to do it using <ui:include>. 1) Does the approach show below look reasonable? I am using a parameter called "page" to highlight the tab for the current page. 2) Can you suggest any improvements? 3) How can I hide certain tabs based on a parameter? Since I am using the <li> tag to create a tab and not a JSF UIComponent, I cannot use render="false" to control its rendering. Here's my include file called navigation-tabs.xhtml: <ui:composition ... > <div id="tabs"> <ul> <li> <h:outputLink value="accounts.seam" styleClass="#{page=='accounts'?'current':''}"> Accounts </h:outputLink> </li> <li> <h:outputLink value="orders.seam" styleClass="#{page=='orders'?'current':''}"> Orders </h:outputLink> </li> </ul> </div> </ui:composition> Here's how include the tabs on a page: <ui:composition ... template="/templates/template-default.xhtml"> <ui:define name="navigationTabs"> <ui:include src="/templates/navigation-tabs.xhtml"> <ui:param name="page" value="accounts"/> </ui:include> </ui:define> <ui:define name="content"> ... </ui:define> </ui:composition> Thanks. Naresh --------------------------------------------------------------------- To unsubscribe, e-mail: users-unsubscribe@... For additional commands, e-mail: users-help@... |
|
|
|
|
|
RE: Navigation tabs approach
by Naresh Bhatia
::
Rate this Message:
Thanks Raymond. Highlighting the tab using viewId works! Here's my updated code:
<ui:composition ... > <div id="tabs"> <ul> <li> <h:outputLink value="accounts.seam" styleClass="#{view.viewId=='/accounts.xhtml'?'current':''}"> Accounts </h:outputLink> </li> <li> <h:outputLink value="orders.seam" styleClass="#{view.viewId=='/orders.xhtml'?'current':''}"> Orders </h:outputLink> </li> </ul> </div> </ui:composition> Naresh -----Original Message----- From: Raymond K. DeCampo [mailto:rkdecampo@...] Sent: Wednesday, January 21, 2009 4:31 PM To: users@... Subject: RE: Navigation tabs approach This seems like a fine approach. As far as hiding tags based on a parameter, you could try the Tomahawk <t:htmlTag> which can wrap any HTML tag into a component-like syntax. Also, I'm wondering if you could access the view id in order to highlight the current page instead of relying on a parameter. -----Original Message----- From: Naresh Bhatia [mailto:NBhatia@...] Sent: Friday, January 16, 2009 18:45 To: users@... Subject: Navigation tabs approach Hi, I was looking for an approach for managing navigation tabs common to bunch of pages. I have come up with a way to do it using <ui:include>. 1) Does the approach show below look reasonable? I am using a parameter called "page" to highlight the tab for the current page. 2) Can you suggest any improvements? 3) How can I hide certain tabs based on a parameter? Since I am using the <li> tag to create a tab and not a JSF UIComponent, I cannot use render="false" to control its rendering. Here's my include file called navigation-tabs.xhtml: <ui:composition ... > <div id="tabs"> <ul> <li> <h:outputLink value="accounts.seam" styleClass="#{page=='accounts'?'current':''}"> Accounts </h:outputLink> </li> <li> <h:outputLink value="orders.seam" styleClass="#{page=='orders'?'current':''}"> Orders </h:outputLink> </li> </ul> </div> </ui:composition> Here's how include the tabs on a page: <ui:composition ... template="/templates/template-default.xhtml"> <ui:define name="navigationTabs"> <ui:include src="/templates/navigation-tabs.xhtml"> <ui:param name="page" value="accounts"/> </ui:include> </ui:define> <ui:define name="content"> ... </ui:define> </ui:composition> Thanks. Naresh --------------------------------------------------------------------- To unsubscribe, e-mail: users-unsubscribe@... For additional commands, e-mail: users-help@... --------------------------------------------------------------------- To unsubscribe, e-mail: users-unsubscribe@... For additional commands, e-mail: users-help@... --------------------------------------------------------------------- To unsubscribe, e-mail: users-unsubscribe@... For additional commands, e-mail: users-help@... |
| Free embeddable forum powered by Nabble | Forum Help |
