I'm prototyping the use of Trinidad as a way to replicate pages within our
application which currently use recent best-practice conventions for XHTML
and css, including wrapper divs, css background images and absolute
positioning to give us maximum flexibility on moving divs representing
various control areas around the page, including the banner, header, top
nav, nav/menu bars, left nav, footer and content areas.
I'd like to use panelPage with facets for the corresponding control areas,
but the markup which the default panelPage renderer outputs is a hopeless
mess of HTML 4.0 tables that I'm having a lot of trouble stying to match our
current output.
Some output is terrible - the panelPage tag, for example, generates as
output a span tag instead of a div tag, with no skinnable class by default.
This the best place to implement the container or wrapper div technique for
a fixed width floating page, but I have to add a styleClass attribute and
then style the span with display:block, etc to make this work. I'd much
rather have a panelWrapper (or similar) tag with a corresponding
af|panelWrapper skinnable hook that I can use to keep the markup in the jspx
I write as clean as I think it could be with panelPage outputting better
XHTML. Also, while PanelPage uses facets to define each separate page area,
those facets do not appear as style classes anywhere in the generated
output, making it very difficult to target style rules to these areas - I
have to add a new styleClass to an additional panelGroupLayout just inside
the facet just to get to this via css rules, and still the resulting HTML is
overly complex and difficult to style.
What I'd like to do is write some additional panel subclasses, such as
panelWrapper, and replace panelPage with a new one that outputs <div
class="branding> around the contents of the <f:facet name="branding"> facet
within panelPage, outputs panelPage as a div, adds a "footer" facet, etc.
However, I'm new to this, and when I looked through the source code, I
couldn't even find the CorePanelPage.java file on my first attempt to see
what might be involved in doing this.
Can anyone here point me in the right direction with some hints on what I'd
need to do in order to make the changes listed above? I suspect I will need
to write some type of renderer, but I'm finding it hard to figure out how
all the parts are connected at this early stage.
Also, to throw out another idea, I'd really love it if the panelPage tag
could accept some type of template that it would use to layout the facets,
such as...
<panelPage>
<facet name="branding"/><!-- converted to div, allowing me to use arbitrary
background image for branding,and then overlay what I need to in this area
via absolute positioning-->
<facet name="navigationGlobal"/><!-- positionable via absolute positioning
to overlay the branding where needed-->
<table><!-- I'd use divs for these too - just showing another layout
technique -->
<tr>
<td><facet name="navigation1"/></td>
<td><facet name="search"/></td>
</tr><tr>
<td colspan="2"><facet name="navigation2"/></td>
</tr>
</table>
non-faceted content goes here, maybe with a <body> tag to indicate this?
<facet name="footer"/><!-- new facet, so we don't have to use p_OraFooter
class to get thos this-->
</panelPage>
...instead of the hard-coded layout that Oracle invented, allowing us to
keep the simplicity of the panelPage and facet-based markup in our jsf
pages, but still output the result in a format that works for our
applications. If no template attribute is specified on the panelPage, it can
continue to output the current layout for backward compatibility.
I thought I couldn't be the only one thinking along these lines, but I
haven't been able to find any other comments about this problem today
searching Google and other sources.
Any help appreciated. Thanks,
Mike
--
View this message in context:
http://www.nabble.com/How-can-I-change-the-rendered-output-of-panelPage--tf4965395.html#a14223854
Sent from the MyFaces - Users mailing list archive at Nabble.com.
