Nice to have Command Navigation Component

UI Components for JSF
pino
Posts: 10
Joined: 21 Jul 2012, 15:57

21 Jul 2012, 17:01

First, I would like to salute the Primefaces team for delivering the best opensource JSF components. Your efforts are really commendable.
On the other hand, I just note that there is one significant component that is missing from your arsenal, and that is a command navigation component. This component is just simple. It behaves like a button or link that lets you navigate to other pages and at the same time it looks like a tab. In Oracle ADF Faces it is called "commandNavigationItem".

Below are some sites that uses sort of tab as the navigation.
http://www.xero.com/
http://www.vendhq.com/

Wishing,
Rommel Pino
http://soadev.blogspot.com
Rommel Pino
http://soadev.blogspot.com

Primefaces 3.4.2
Mojarra 2.1.6
GlassFish OSE 3.1.2.2
Netbeans 7.2.1
Firefox 17.0


cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

21 Jul 2012, 17:31

Looks simple, I'm working on it now.

pino
Posts: 10
Joined: 21 Jul 2012, 15:57

21 Jul 2012, 18:05

Yes optimus.prime. But to emphasize, just like the other primefaces components, this should support skinning too. :)

Thanks,
pino
Rommel Pino
http://soadev.blogspot.com

Primefaces 3.4.2
Mojarra 2.1.6
GlassFish OSE 3.1.2.2
Netbeans 7.2.1
Firefox 17.0

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

21 Jul 2012, 18:13

Challenge Accepted :)

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

21 Jul 2012, 18:19

Done;

Image

Code: Select all

<p:tabMenu activeIndex="0">
    <p:menuitem value="Overview" url="/ui/tabMenu.jsf" icon="ui-icon-star"/>
    <p:menuitem value="Demos" url="/ui/tabMenuDemos.jsf" icon="ui-icon-search" />
    <p:menuitem value="Documentation" url="/ui/tabMenuDocumentation.jsf" icon="ui-icon-document"/>
    <p:menuitem value="Support" url="/ui/tabMenuSupport.jsf" icon="ui-icon-wrench"/>
    <p:menuitem value="Social" url="/ui/tabMenuSocial.jsf" icon="ui-icon-person" />
</p:tabMenu>
Demo will be available in a couple of hours online.

pino
Posts: 10
Joined: 21 Jul 2012, 15:57

21 Jul 2012, 18:25

WOW! I'm surprised on the speed of delivery:) Really amazing! Hope to be able to test it soon. :)

I see... same as I was expecting... the component is very similar to a menu but just needs to have a selected or activeIndex property.

Thank you Optimus!

pino
Rommel Pino
http://soadev.blogspot.com

Primefaces 3.4.2
Mojarra 2.1.6
GlassFish OSE 3.1.2.2
Netbeans 7.2.1
Firefox 17.0

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

21 Jul 2012, 18:51

Hi,

I didn't understand. Why not TabView? I use it in PF Extensions as navigation http://fractalsoft.net/primeext-showcas ... gement.jsf (each tab = separate JSF page). This is almost as in Trinidad's example http://example.irian.at/trinidad-demo/f ... nItem.jspx. And if you like the look & feel from your example http://www.vendhq.com/, you can use Menubar http://www.primefaces.org/showcase-labs/ui/menubar.jsf. By the way, I looked for a NavBar like in Twitter Bootstrap http://twitter.github.com/bootstrap/com ... tml#navbar, but in the fact it's a PrimeFaces Menubar with a little bit styling.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

21 Jul 2012, 18:58

Oh, I could remember. TabView in the PF Extensions was a not a PrimeFaces component. It was a built-in feature called "tabbed layout" (jQuery tabs). It was not possible in PrimeFaces to have page pro tab. This was the reason why I added this to pe:layout as a built-in feature. So, p:tabMenu seems to be an useful component now.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

pino
Posts: 10
Joined: 21 Jul 2012, 15:57

22 Jul 2012, 14:28

Hi,
optimus.prime wrote:Done;
Demo will be available in a couple of hours online.
I just wonder why this hasn't come to life yet. Any autobot malfunction? :?
Rommel Pino
http://soadev.blogspot.com

Primefaces 3.4.2
Mojarra 2.1.6
GlassFish OSE 3.1.2.2
Netbeans 7.2.1
Firefox 17.0

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 20 guests