• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

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

 
Village Idiot
Posts: 484
jQuery Oracle Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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:



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
 
Ranch Hand
Posts: 34
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I got this same problem some days ago. I had a main page with 3 subpanes inside.
I used something like this: I hope that this helps you.
 
Matt Kohanek
Village Idiot
Posts: 484
jQuery Oracle Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks very much, Ill try to implement it once I get off of work, and Ill post here how it goes.
 
Saloon Keeper
Posts: 27763
196
Android Eclipse IDE Tomcat Server Redhat Java Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Actually, one of your best bets for templating JSF with panes is to use Facelets.
 
Matt Kohanek
Village Idiot
Posts: 484
jQuery Oracle Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Village Idiot
Posts: 484
jQuery Oracle Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
edited out
 
Matt Kohanek
Village Idiot
Posts: 484
jQuery Oracle Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Heres the issue Im having with templateing

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



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



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:



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?
 
Don't get me started about those stupid light bulbs.
reply
    Bookmark Topic Watch Topic
  • New Topic