cdk:body doesn't work

[1scrapper1]

Hello.

I've tried to create a component similar to Tabs/Tab example

made by Brian Leathem. But it doesn't render children.

After that I've tried to make exactly the same component.

It also doesn't place renderChildren() call into renderer during generation

and doesn't render children at all.

I've tried to use 4.0.0.Final version and 4.1.0.CR2 - no changes

I have also tried to put cdk:call tag to template - and generated renderer doesn't have specified method call.

I've been trying other different thigs to make it work for few days - still nothing.

Original Richfaces components work correctly in demo project made to test Tabs component so I suppose it's not project setup problem.

Any suggestions?

UPD: understood what's with cdk:call. In 3.3.3 it was <f:call name="method"/> and now it's <cdk:call expression="method(facesContext,component)"/>.  Missed this change.

I suppose migration guide for custom components made using CDK would be nice to have.

[bleathem]

Can you post the source code of the cdk template you are having trouble with?

[1scrapper1]

Oh. I see that Tabs component from yours example actually renders children (it renders both of them together disregarding which tab is selected but it's not an issue for me).

As for my component, here are the templates.

panelBar.template.xml

<?xml version="1.0" encoding="UTF-8"?>
<cdk:root xmlns="http://jboss.org/schema/richfaces/cdk/xhtml-el" xmlns:cdk="http://jboss.org/schema/richfaces/cdk/core"
    xmlns:cc="http://jboss.org/schema/richfaces/cdk/jsf/composite" xmlns:c="http://jboss.org/schema/richfaces/cdk/jstl/core"
    xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:vcp=" http://jsf.exadel.com/vcp">
    <cc:interface>
        <cdk:class>com.e.f.c.gui.components.renderkit.PanelBarRenderer</cdk:class>
        <cdk:superclass>com.e.f.c.components.renderkit.PanelBarBaseRenderer</cdk:superclass>
        <cdk:component-family>com.e.f.c.gui.components</cdk:component-family>
        <cdk:component>com.e.f.c.gui.components.AbstractPanelBar</cdk:component>
        <cdk:renderer-type>com.e.f.c.gui.components.PanelBarRenderer</cdk:renderer-type>
        <cdk:resource-dependency name="panelbar.js"/>
        <cdk:resource-dependency name="panelbar.xcss"/>

    </cc:interface>
    <cc:implementation>
            <div id="#{clientId}" class="fs-panelbar #{component.attributes['styleClass']}" cdk:passThroughWithExclusions=" "
                style="#{this:height(facesContext, component)} #{this:width(facesContext, component)} #{component.attributes['style']}">
                <cdk:body/>

                <input autocomplete="off" type="hidden" name="#{clientId}" id="#{clientId}_panelBarInput" value="#{this:expanded(facesContext, component)}" />                
                <cdk:call expression="encodeScript(facesContext,component)" />
            </div>
    </cc:implementation>
</cdk:root>

panelBarItem.template.xml

<?xml version="1.0" encoding="UTF-8"?>
<cdk:root xmlns="http://jboss.org/schema/richfaces/cdk/xhtml-el" xmlns:cdk="http://jboss.org/schema/richfaces/cdk/core"
    xmlns:cc="http://jboss.org/schema/richfaces/cdk/jsf/composite" xmlns:c="http://jboss.org/schema/richfaces/cdk/jstl/core"
    xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:vcp=" http://jsf.exadel.com/vcp">
    <cc:interface>
        <cdk:class>com.e.f.c.gui.components.renderkit.PanelBarItemRenderer</cdk:class>
        <cdk:superclass>com.e.f.c.gui.components.renderkit.PanelBarItemBaseRenderer</cdk:superclass>
        <cdk:component-family>com.e.f.c.gui.components</cdk:component-family>
        <cdk:component>com.e.f.c.gui.components.AbstractPanelBarItem</cdk:component>
        <cdk:renderer-type>com.e.f.c..gui.components.renderkit.PanelBarItemRenderer</cdk:renderer-type>
    </cc:interface>
    <cc:implementation>

    <cdk:object name="accordion" value="#{getAccordion(facesContext, component)}" type="javax.faces.component.UIComponent" />
    <div id="#{clientId}" class="fs-panelbar fs-panelbar-interior  expanded #{accordion.attributes['styleClass']}" style="#{accordion.attributes['style']}">
    <div class="fs-panelbar-header  itemlist-item-header #{accordion.attributes['headerClass']} #{component.attributes['headerClass']}"
        style="position:relative; #{accordion.attributes['headerStyle']};#{component.attributes['headerStyle']}">
        <div class="fsgui-panelbar-label">        
                <cdk:call expression="calcLabel(facesContext, component)"/> 
        </div>
        <div class="fs-panelbar-controls">
        </div>
        <div class="clearFloat"></div>
        <cdk:body/>        
    </div>
<cdk:object name="accordion" value="#{getAccordion(facesContext, component)}" type="javax.faces.component.UIComponent" />
    <div id="#{clientId}ContentExterior" class="fs-panelbar-content-exterior">
    <div id="#{clientId}Content" class="fs-panelbar-content #{accordion.attributes['contentClass']} #{component.attributes['contentClass']}"
        style="#{accordion.attributes['contentStyle']};#{component.attributes['contentStyle']}">

    </div>
    </div>
    </div>

    </cc:implementation>
</cdk:root>

index.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich"
    xmlns:b="http://bleathem.ca/jquery"
    xmlns:fs="http://components.gui.c.f.e.com">

    <body>
        <ui:composition template="/templates/template.xhtml">
            <h:outputStylesheet>
                .rf-ac {
                width: 300px;
                }

                .rf-ac-itm-c {
                height: 1100px;
                }
            </h:outputStylesheet>

            <ui:define name="title">RichFaces Sample</ui:define>

            <ui:define name="content">
                <div class="grid_12">
                    <h:form>
                        <h1>Example - fs:panelBar form + div</h1>
                        <!-- Accordion -->
                        <fs:panelBar width="500">
                            <fs:panelBarItem label="3">
                                C
                            </fs:panelBarItem>
                            <fs:panelBarItem label="4">
                                D
                            </fs:panelBarItem>
                            <fs:panelBarItem label="5">
                                E
                            </fs:panelBarItem>
                        </fs:panelBar>
                    </h:form>
                </div>
                <div>
                    <h1>Example - fs:panelBar div</h1>
                    <!-- Accordion -->
                    <fs:panelBar width="500">
                        <fs:panelBarItem label="3">
                            C
                        </fs:panelBarItem>
                        <fs:panelBarItem label="4">
                            D
                        </fs:panelBarItem>
                        <fs:panelBarItem label="5">
                            E
                        </fs:panelBarItem>
                    </fs:panelBar>
                </div>

                <h1>Example - fs:panelBar nothing</h1>
                <!-- Accordion -->
                <fs:panelBar width="500">
                    <fs:panelBarItem label="3">
                        C
                    </fs:panelBarItem>
                    <fs:panelBarItem label="4">
                        D
                    </fs:panelBarItem>
                    <fs:panelBarItem label="5">
                        E
                    </fs:panelBarItem>
                </fs:panelBar>
            </ui:define>
            </ui:composition>
    </body>
</html>

and it renders to

<div class="grid_12"> 
<form id="j_idt15" name="j_idt15" method="post" action="/fs-demo/faces/index.xhtml;jsessionid=EA6B91B6DFD6F5D06890F97CB1A8E75F" enctype="application/x-www-form-urlencoded"> 
<input type="hidden" name="j_idt15" value="j_idt15" /> 
 
                        <h1>Example - fs:panelBar form + div</h1> 
 <!-- Accordion --><div class="fs-panelbar " id="j_idt15:j_idt17" style="height: 100%; width: 500px; "><input autocomplete="off" id="j_idt15:j_idt17_panelBarInput" name="j_idt15:j_idt17" type="hidden" value="j_idt15:j_idt18" /><script type="text/javascript">new FS.PanelBar("j_idt15:j_idt17",{"mousemove":null,"items":[{"onleave":"","id":"j_idt15:j_idt18","onenter":""} ,{"onleave":"","id":"j_idt15:j_idt20","onenter":""} ,{"onleave":"","id":"j_idt15:j_idt22","onenter":""} ] ,"ajax":false,"mouseout":"","onclick":"","collapseOnLoad":false,"mouseover":"","onitemchange":"","isKeepHeight":true,"onitemchanged":""} );</script></div><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="673366124214026203:-2759261716227629988" autocomplete="off" /> 
</form> 
                </div> 
                <div> 
                    <h1>Example - fs:panelBar div</h1> 
 <!-- Accordion --><div class="fs-panelbar " id="j_idt25" style="height: 100%; width: 500px; "><input autocomplete="off" id="j_idt25_panelBarInput" name="j_idt25" type="hidden" value="j_idt26" /><script type="text/javascript">new FS.PanelBar("j_idt25",{"mousemove":null,"items":[{"onleave":"","onenter":"","id":"j_idt26"} ,{"onleave":"","onenter":"","id":"j_idt28"} ,{"onleave":"","onenter":"","id":"j_idt30"} ] ,"ajax":false,"mouseout":"","onclick":"","collapseOnLoad":false,"mouseover":"","onitemchange":"","isKeepHeight":true,"onitemchanged":""} );</script></div> 
                </div> 
 
                <h1>Example - fs:panelBar nothing</h1> 
 <!-- Accordion --><div class="fs-panelbar " id="j_idt33" style="height: 100%; width: 500px; "><input autocomplete="off" id="j_idt33_panelBarInput" name="j_idt33" type="hidden" value="j_idt34" /><script type="text/javascript">new FS.PanelBar("j_idt33",{"mousemove":null,"items":[{"onleave":"","id":"j_idt34","onenter":""} ,{"onleave":"","id":"j_idt36","onenter":""} ,{"onleave":"","id":"j_idt38","onenter":""} ] ,"ajax":false,"mouseout":"","onclick":"","collapseOnLoad":false,"mouseover":"","onitemchange":"","isKeepHeight":true,"onitemchanged":""} );</script></div>

And nothing about panelBarItem in a resulting markup

Added XML syntax highlighting to the code snippets | Message was edited by: Brian Leathem

[bleathem]

At first glance, your code seems ok.  Have you tried rendering a panelBarItem directly, to check wherether you have the panelBarItem component correctly wired up with the associated renderer?

[1scrapper1]

It produces NPE since i reference panelBar in

<cdk:object name="accordion" value="#{getAccordion(facesContext, component)}" type="javax.faces.component.UIComponent" />

and then try to access its attributes. But yes, it calls doEncodeBegin() from renderer.

But maybe you pushed me in a right direction.

In 3.3.3 version of panelBar I did the same thing using (acessing panelBar as attribute of component)

<c:object var="panel" value="#{component.panel}" type="javax.faces.component.UIComponent" />

and CDK generated following code

public void doEncodeBegin(ResponseWriter writer, FacesContext context, com.e.f.c.gui.components.component.UIPanelBarItem component, ComponentVariables variables ) throws IOException {

        java.lang.String clientId = component.getClientId(context);

javax.faces.component.UIComponent panel  = component.getPanel() ;

but in 4.0 version

doEncodeBegin method had following signature

@Override

public void encodeBegin(FacesContext facesContext, UIComponent component)

        throws IOException

obviously I couldn't access getPanel() method from UIComponent so I had to write method in base renderer which gets a component, casts it to UIPanelBarItem and retrieves parent UIPanelBar.

Oh, nope, sorry. it's the same.

I've also tried to debug panelBarItem renderer. When it's outside panelBar - debugger gets into panelBarItem renderer. If panelBarItem is inside paneBar - then no.