RF4 CR1 missing css for inner components?

[dwagmuse]

My prototype app has a couple of different situations where rich components are missing css skin styles. The example shown here is a version of the skin selection form that contains an example accordion and tab panel. The skin style is clearly being applied to the parent rich:panel, but not to the accordion or tab panel. Once I click on a new skin selection, then the inner elemenst get styled.

Am I missing something?

<ui:composition xmlns="http://www.w3.org/1999/xhtml"

    xmlns:ui="http://java.sun.com/jsf/facelets"

    xmlns:h="http://java.sun.com/jsf/html"

    xmlns:f="http://java.sun.com/jsf/core"

    xmlns:a4j="http://richfaces.org/a4j"

    xmlns:rich="http://richfaces.org/rich"

  template="/WEB-INF/includes/studio-layout.xhtml">

    <ui:define name="main">

        <h:form id="skinForm">

            <rich:panel >

                <f:facet name="header" position="center">

                    <h:outputText value="Presentation theme preferences" />

                </f:facet>

                <h:panelGrid border="0" columns="2">

                 <h:panelGroup>

                      <h:selectOneRadio value="#{skinBean.skin}"

                          border="0" layout="pageDirection" title="Changing skin" style="font-size: 8; font-family: comic"

                          onchange="submit()">

                           <f:selectItems value="#{skinBean.skins}" />

                      </h:selectOneRadio>

                      <h:commandButton value="Apply" />

                 </h:panelGroup>

                 <h:panelGroup>

                     <rich:accordion height="100" width="200">

                           <rich:accordionItem header="Item 1" style="font-family: monospace; font-size: 12;" >

                         Changing skin in runtime

                           </rich:accordionItem>

                        <rich:accordionItem header="Item 2" style="font-family: monospace; font-size: 12;">

                         This is a result of the modification "blueSky" skin

                        </rich:accordionItem>

                  </rich:accordion>

                    <rich:tabPanel switchType="client">

                            <rich:tab name="tab1" header="tab1" ></rich:tab>

                            <rich:tab name="tab2" header="tab2" ></rich:tab>

                            <rich:tab name="tab3" header="tab3" ></rich:tab>

                        </rich:tabPanel>

                 </h:panelGroup>

             </h:panelGrid>

            </rich:panel>

        </h:form>

    </ui:define>

</ui:composition>

[boy18nj]

I couldn't really figured out your problem from your description vs screenshot.

[dwagmuse]

Basically, why aren't the accordion and tabPanel components getting styled?

In the screenshot you can see that the parent rich:panel is skinned, the Apply button is skinned, but the tabPanel and accordion are not.

Not only are they not skinned, they have no styles applied (as verified by FireBug). 

The odd thing is that once I select one of the skin selections the form is re-rendered and THEN everything gets styled -- the accordion header get colored, borders are rendered, etc.

It looks like one or more style sheets (or fragments) are not being emitted on first render.

[ilya_shaikovsky]

please check the resources loading statuses using NET tab of the firebug for example.

if you will open that http://richfaces-showcase.appspot.com/richfaces/component-sample.jsf?demo=tabPanel&skin=blueSky and try to change the skins - them will be applied well. so probably some configuration problem.

[dwagmuse]

Firebug confirms that the tabPanel and accordion css files are not being loaded initially. After I click on one of the radio buttons the form renders again and the stylesheets show up, and from that point on all tabpanels in the application are styled correctly (all the tabpanels in this app are wrapped inside other layout components).

Oddly, that first click doesn't CHANGE the skin -- it just reloads the default skin. I have to click the radio button a second time for it to change. Maybe that's a separate issue.

I get same behavior with firefox, and chrome. Running the app under Tomcat6 with same libs as the demo app as far as I can tell.

I agree that the demo works fine (I have my own copy).

[ilya_shaikovsky]

please provide complete project sample which could be run locally.

[ravi.kuchika]

Hey David,

  R u getting any javascript error something like "Richfaces net found"? id so please put ur stuff inside the <h:body/> tag

Thanks

Ravi Kuchika

[dwagmuse]

Let me see is I can reproduce this problem in a smaller example. The full project is too big and too proprietary to share.

How should I post the project?

[dwagmuse]

No js errors, and content IS inside a <h:body>.

[dwagmuse]

I've constructed a small example project that demonstrates the problem. After MANY experiments I've noticed that the behavior depends on how the problem page is called. When the page is initially referenced as an action in a menuItem it fails to render completely. When it's called from an action in a commandButton it works fine, and once the stylesheets have been sent the tabpanels remain styled regardless of which way they're called.

I'm seeing no errors in Firebug or in the app console log.

I've got the example app in a war file (6.4MB), but don't know how to deliver it through this chat forum...

[ilya_shaikovsky]

Probably you trying to navigate using ajax? Then it should be adressed just to JSF 2 as we could do nothing with resources loading performed by JSF for such scenario. Try to set server mode to your menu.

[dwagmuse]

Yes. Changing the menu to server mode seems to have fixed the problem.

Not sure I understand why it should matter whether the page is referenced via ajax or server mode. In this case it probably doesn't matter since the menu does nothing but call up other pages, but it seems like a rather subtle bug.

Thanks!

[nbelaevski]

JSF doesn't add resource dependencies for components added by Ajax.