Win a copy of Think Java: How to Think Like a Computer Scientist this week in the Java in General forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Trying to get layout worked out for three content panes (using facelets template)

 
Matt Kohanek
Village Idiot
Ranch Hand
Posts: 484
Java jQuery Oracle
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
edit - after doing more research into this problem I realized I was off on some things, so my reply below is how this question should look...
 
Matt Kohanek
Village Idiot
Ranch Hand
Posts: 484
Java jQuery Oracle
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I am trying to get a page that will have three content panes like so:



The left and top panes will never change, only the main content pane.

So Ive created a layout.xhtml page:



So there are my three panes. The first pane (project_explorer) will be a richfaces tree. The next (tabs) will be two rows of tabs. The last (content) will be the main content pane that changes often.

So I can easily create a page that calls the template and inserts content:



SO that will create the page, but the panes will be stacked one on top of the other. This isn't what I need as you can see from the ascii example from above. I need project_explorer to take up the entire left side of the screen (and be adjustable if possible), the tabs to take up the top, and the content pane to take up all the rest.

SO I need help going about doing this. Ive tried quite a few different things, like trying to use styles in each div tag from my layout.xhtml, but this doesnt seem to be the way to go. Im assuming the formatting will need to be done within the ui:define tags somewhere, but I do not know where. Will it be within the ui:defnie tag? Or the f:view tag? Or will I need to format each and every tag?

I know I could just use tables to deal with all of this, but man I dont want to do that...

Any help out there>? PLEASE
 
Matt Kohanek
Village Idiot
Ranch Hand
Posts: 484
Java jQuery Oracle
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Well.....I went ahead and used a table, and it did solve the layout problem. I guess I will just have to live with it for now, but if someone with some layout experience can help me here so I dont have to use a table it would be nice....

Here is what I did anyway:



It almost defeats the purpose of even using facelets templating (ui:include and define)
 
Tim Holloway
Saloon Keeper
Pie
Posts: 18152
52
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
You could give each of your div's absolute position co-ordinates, and additionally a width for the lefthand sidebar div.

But the "don't use tables" edict is a bit overblown. When a table is cleaner and easier, I go with the table. So do a lot of the JSF code generators.

By the way. There's also a pure JSF approach to this layout, but it's not as simple. Just embed a 2-row, 1-column panelGrid inside a 2-column 1-row panelGrid. Then use rowstyle and columnstyle definitions to size them as you need to.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic