0

Simple question that I couldn't figure out how to do so far in the best way. I'm starting a new project so I'm still somewhat flexible.

JSF 2.0, Facelets are welcome (Although I'm just starting to learn what facelets are), whatever core technology you recommend, I will consider. It should also work on IE6 (But if there is a really adequate solution that doesn't work on IE6, let me know)

How Do I create a Tab-Like behaviour in a webapp? (The best example would be Gmail, I guess, where the sidebar changes the contents without refreshing the page).

No need to go into details, I'm just looking for the technology behind it and a finger pointing in the right direction.

Thank you!

Ben
  • 10,020
  • 21
  • 94
  • 157

3 Answers3

2

If you want to "do it yourself," you would use the f:ajax tag. This takes three parameters:

  • event: what triggers the ajax update. In your case, it would be when you click on something, such as an anchor with the tab name.
  • listener: executes an action on a managed bean when the event occurs. Your action would figure out which tab is currently being displayed based on what the user clicked on. Your UI would use that information to determine what to render.
  • render: an id for a component that will be redisplayed. This should be the tab control itself, which could be a panelGroup or panelGrid on the page. This determines which part of the page will be redrawn. You would have the UI logic for all of your tabs here, but configure them to render only if they are the current selection.

The Richfaces, Primefaces, and Icefaces component libraries all have solutions you could use as well.

Lawrence McAlpin
  • 2,745
  • 20
  • 24
0

How about Primefaces Tabview component. Primefaces is a component library based on JSF 2.0. (Never tried it on IE6. I'd suggest to try the given examples in IE6)

Matt Handy
  • 29,855
  • 2
  • 89
  • 112
  • Thanks. I'm looking for 'core' technology. Meaning, I would like to avoid working with a specific component that does this. – Ben May 02 '11 at 12:15
  • What are 'core' technologies? Components from primefaces (or richfaces, icefaces) are build upon jsf, javascript and backing beans. – Matt Handy May 02 '11 at 17:09
0

Know That I Am more knowlegdable I use the jQuery BBQ plugin with AJAX.

Use this links to see the full solution:

Updating the url bar from the webapp to represent the current state

IE6/7 Back/Forward button don't change window.location.hash

Community
  • 1
  • 1
Ben
  • 10,020
  • 21
  • 94
  • 157