Needing to build jsf page with three content panes (forms?), looking for template

[Matt Kohanek]

The page I am building will have a pane on the left side that is a project explorer pane, one along the top that will have different tabs, and then the main screen within the rest of the page. Something like:

--------------------------
   l                      l
   -----------------------
   l                      l
   l                      l
   l                      l
--------------------------

Im obviously no ascii artist lol

What ever is clicked on from the left pane or the top tabs will determine what will show up in the main content pane. So I am wondering if there are any templates out there for something like this, or maybe a good tutorial. I can create this page Im sure, but where i have trouble is in the separation of the two panes from the main content pane. Im not sure how I can have only the main content page change in other words. Sure I could build multipel very similar pages, and when you click on something from the tabs pane it will take you to another page, with the only difference being what is in the main content pane. But I want it to stay on the same page, and only change thart one pane if that makes sense.
Maybe I am looking at this wrong, should I be researching something else here? From what i understand AJAX is meant just for such things.
Any tips will be appreciated.

ps - the left content pane will contain a tree for hierarchical data and the top will be tabs

[Victor Williams Stafusa da Silva]

I got this same problem some days ago. I had a main page with 3 subpanes inside.
I used something like this:

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j" %>

...

<f:subview id="my_simplest_pane">
  <c:import url="/blablabla.jsp" />
</f:subview>

...

<h:panelGroup id="my_not_so_simple_pane">
  <f:subview id="my_case1_pane" rendered="#{myManagedBean.bar == 1}">
    <c:import url="/case1.jsp" />
  </f:subview>
  <f:subview id="my_case2_pane" rendered="#{myManagedBean.bar == 2}">
    <c:import url="/case2.jsp" />
  </f:subview>
  <f:subview id="my_case3_pane" rendered="#{myManagedBean.bar == 3}">
    <c:import url="/case3.jsp" />
  </f:subview>
</h:panelGroup>

...

<h:panelGroup id="my_very_complex_pane">
  <a4j:include viewId="#{myManagedBean.foo}" />
</h:panelGroup>

I hope that this helps you.

[Matt Kohanek]

Thanks very much, Ill try to implement it once I get off of work, and Ill post here how it goes.

[Tim Holloway]

Actually, one of your best bets for templating JSF with panes is to use Facelets.

[Matt Kohanek]

My project does include Facelets support. Please elaborate, what exactly should I be looking into pertaining to facelets and content panes?
I was about to get on this thread and ask about how to size and position the panes. Im assuming it will be done with CSS, but Ive heard I shouldnt use absolute sizing like width=90px, etc.
But I dont know how else I would organize three panes like this. Is there a way to use percentages so it will look the same across differnt platforms?
Or is this not even going to apply using facelets? (Ive heard the term facelets many times from my contacts at the company Im doing this for but dont know exactly what they are. I hesitated to ask them because I didnt want to seem ignorant and now it is too late to bring it up again lol)

I have played around with web expressions to do this, and I know it is possible, but it once again uses absolute sizing. I dont want to use web expressions for any of this anyway, Id rather do the coding myself so I can learn what it all does, and then let myself rely on WYSIWYG creators

edit - wait so is facelets just the core and html libraries I import? In other words the h: and f: tags? I had always thought that was jsf lol. I have read the majority of a textbook regarding jsf, and it also made refernce to h and f tags throughout the book. That is why I assumed that was jsf. I think I need to get my concepts straight before I try to understand your advice in this thread

[Matt Kohanek]

edited out

[Matt Kohanek]

Heres the issue Im having with templateing

So I have a page using some insert statements as follows:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets">
<head>

</head>

<body>

<div id="header">
    <ui:insert name="header">
        <ui:include src="login/index.xhtml"/>
    </ui:insert>
</div>

<div id="left">
  <ui:insert name="navigation" >
    <ui:include src="login/newUserRegister.xhtml"/>
  </ui:insert>
</div>

</body>

</html>  

As you can see it takes two other pages Ive created, index.xhtml and newUserRegister.xhtml, and inserts them onto this one page. When I try to run this on my server, it tells me

  WARNING: /templates/login/index.xhtml not found at jndi:/localhost/NIRAP/templates/login/index.xhtml  

So I go to tomcat/wtpwebapps/NIRAP/templates, and create a /login folder, and then I copy and paste index.xhtml and newUserRegister.xhtml into this new folder. Then I restart tomcat, and try to run the page, and it displays just fine.

Why isnt tomcat creating this folder and putting these two .xhtml's into it automatically? For now it is feasible for me to do this, but as this site grows it is going to becoem a problem to have to do this every time.

Thanks



ps - Thanks Tim, with your advice I found out how to do this and it is just what I need. There is one remaining problem for me as well though. My page will have three content panes. Now I wil be able to populate each pane individually, but I still dont know how to go about doing the spacing, which is really the problem I originally posted this thread for. For instance, my first div labeled "header" (to be renamed later) will of course be the content pane that takes up the left side of the screen (the project explorer pane). It should take up about 1/5 of the left side of the screen. I just do not know how to make this happen. As of now, the header div will take up the top of the page, the next div will be below that, and the next below that, etc etc. I need to know how to get that first one to only take up 1/5 of the left side of the screen (but be resizeable of course). Then the next div will take up the remaining top of the screen and be tall enough to include two rows of tabs. Then that last div will take up the rest of the screen, the majority of the bottom right side.
ANy help with this would be great

FOr starters, would this be done on this main template page, or would it be done in each of the three individual pages that I insert? Im guessng in each of the three? However if it was doable in the one template page it would make this amazingly simpler for me

edit - to get the spacing I wanted I was thinking something like this would work:

<div id="left" style="width:20%;height:100%" >
    <ui:insert name="header">
        <ui:include src="login/index.xhtml"/>
    </ui:insert>
</div>

<div id="top" style="height:15%">
  <ui:insert name="navigation" >
    <ui:include src="login/newUserRegister.xhtml"/>
  </ui:insert>
</div>

<div id="main">
  <ui:insert name="navigation" >
    <ui:include src="login/main.xhtml"/>
  </ui:insert>
</div>

But that doesnt seem to work. When I try to add width and height rather than one or the other it seems to cancel out all the spacing for some reason. Any ideas?