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...
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)
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.
An IDE is no substitute for an Intelligent Developer.