You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by Mike Crawford <mi...@inertiabev.com> on 2007/12/08 02:16:00 UTC
How can I change the rendered output of panelPage?
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.
Re: How can I change the rendered output of panelPage?
Posted by Abhijit Ghosh <ab...@gmail.com>.
Mike,
On Dec 8, 2007 6:46 AM, Mike Crawford <mi...@inertiabev.com>
wrote:
>
> 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.
>
CorePanelPage is auto-generated during build time and is not
source-controlled as most of the behavior is in the associated
renderer.Therenderer you are looking for is
org.apache.myfaces.trinidadinternal.ui.laf.base.desktop.PageLayoutRenderer.java.Howeverthis
renderer is not faces major and the code might be a bit
obscure.For example the PageLayoutRenderer will delegate to several
renderers for example the "span" is rendered by the FlowLayoutRenderer.
If you are writing a new component you are better off subclassing
CoreRenderer or one of it's subclasses.
HTH,
Abhi
> 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.
>
>