JSF 2.0 Composite components

Hello
I've learning and testing JSF 2.0 for fun on the latest few days, and i'm try to check if something is possible to do with composite components.
Most o examples that I have seen do something like this:
<util:myform image="#{resource['images:back.jpg']}"
actionMethod="#{places.logout}"
style="border: thin solid lightBlue"/>
but i want to have something like:
<util:mycomp image="#{resource['images:back.jpg']}"
actionMethod="#{places.logout}"
style="border: thin solid lightBlue">
<p>insert some HTML and JSF tags here</p>
</util:mycomp>
where i want to grab inside my composite component the "<p>insert some HTML and JSF tags here</p>".
Is it possible? Is there any example of this feature?
Thanks

Hi,
Not sure I understand fully what you are looking to do but this my help you -
This is a Composite Component declared in the resources folder...
<!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:cc="http://java.sun.com/jsf/composite">
    <head>
        <title/>
    </head>
    <h:body>
        <cc:interface />
        <cc:implementation>
            <h:form>
                <div>
                    <h5><h:outputLabel value="Email:" /></h5>
                    <h:inputText label="Email" id="email" style="margin-bottom:4px; width: 172px;"
                       validator="#{securityBean.validateEmail}" value="#{securityBean.email}" />
                    <h5><h:outputLabel value="Password:" /></h5>
                    <h:inputSecret label="Password" id="password" value="#{securityBean.password}"
                         style="width: 172px;" validator="#{securityBean.validatePassword}"/>
                    <h:commandButton value="Register" type="reset" styleClass="logbt" />
                    <h:commandButton value="Login" action="#{securityBean.performLogin}" styleClass="logbt" />
                </div>
            </h:form>
        </cc:implementation>
    </h:body>
</html>And then you would be able to reuse it using something like
<!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:cc="http://java.sun.com/jsf/composite"
      xmlns:ro="http://java.sun.com/jsf/composite/components">
      <ro:loginPanel />                Hope this helps
Regards
Patrick

Similar Messages

JSF 2.0: Composite Components and their ID

I'm using Composite Components with JSF 2.0.
Template:
<composite:interface />
<composite:implementation>
    <h:inputText id="text" />
</composite:implementation>Template Client:
<h:form id="form">
    <components:myComponent />
</h:form>In the rendered result, the h:inputText's id will be "form:j_id1060595728_4b62ee3:text".
How can I override that default ID?
I tried to set an id attribute on composite:interface and composite:implementation, however, that doesn't have any effect.
Using ui:debug, I found that the component with ID "j_id1060595728_4b62ee3" is a UINamingContainer.
When using my own UINamingContainer implementation, i.e., ...
<composite:interface componentType="util.jsf.UINamingContainerWithID" />
@FacesComponent("util.jsf.UINamingContainerWithID")
public class UINamingContainerWithID extends UINamingContainer {
     private String id = "foo";
     @Override
     public String getId() {
          return id;
     @Override
     public void setId(String id) {
          // this.id = id;
     public void setFooID(String id) {
          this.id = id;
}... I can prevent the id from being set in setId(String), and h:inputText's id will be "form:foo:text".
(I have tried to debug but the source code is slightly out of sync.)
I also tried to add an attribute fooID to composite:interface and composite:implementation, with no effect.
How do you work with Composite Components and their IDs?
Thanks

All composite components are NamingContainers. This is necessary to prevent ID collisions.
In order to avoid a generated ID on a particulare composite component, specify an ID in the component
within the using page:
<h:form id="form">
    <components:myComponent id="c" />
</h:form>So the client ID of the text component would be: form:c:text.

Children problem with composite components

Hi,
I'm using Mojarra 2.0.2-FCS and playing with JSF 2.0 composite components.
I have a simple composite component named textRow which puts a label and input text. Here is the code:
<composite:interface>
    <composite:attribute name="label" required="true" />
    <composite:attribute name="value" />
</composite:interface>
<composite:implementation>
    <h:outputLabel value="#{cc.attrs.label}" />
    <h:inputText value="#{cc.attrs.value}" />
</composite:implementation>When I use this composite component inside a h:panelGrid with 2 columns (like code fragment below), first component goes to first column, second component goes to second column. But this is not what I want. I want to put all the labels to the first column and inputs to the second. How can I make this?
<h:panelGrid columns="2">
    <my:textRow label="firstName" />
    <my:textRow label="surName" />
</h:panelGrid>

Hi Anca
You can just type it in.

Composite components with logic in JSF 1.2

Hi there,
I wonder if anyone could direct me to a god, top-to-bottom, easy to follow tutorial on how to create custom composite components in JSF 1.2 with server-side logic. I've read on this forum (http://forums.sun.com/thread.jspa?forumID=427&threadID=5353923) that the version 1.1 was actually easier in this regard but unfortunately I'm bound to work with 1.2 and still need to solve the problem. Here's what I need:
I need a composition component composed of an h:inputText and rich:calendar as icon-only. I need to be able to add some custom JavaScript on top of the page (once and only once), be able to bind the component's value to a bean (that'd be at the value bound to the h:inputText being part of the composition) and set a couple of additional properties that either be propagated to the rich:calendar, h:inputText or just be used during the custom rendering process.
The reason for that is that the rich:calendar component does not allow arbitrary text to be stored in the backing bean which is a strong requirement for the application I'm writing. The user-entered text is then transfered over the wire and must stay exactly the same as it was entered. Another point to make is that the controls need to be in a particular envelope (a table with single row and two cells) for proper scaling in the parent table cell.
So far I've tried to do it using Facelets (which failed due to the fact that the final control needs to have id composed of parent's id and some text which is not usable from within the call to rich:clientId(...)), I've tried to add controls to a parent control (which failed because the value was not stored properly in the backing bean) and tried to extend the rich:calendar control to add the separate h:inputText to it (which sort of worked, but didn't store/restore the state to/from the backing bean. In the last two approaches I've been adding the components in encodeAll() if they were not already there in the getChildren() list.
I'm desperate!!!
Thanks for your help!

To be more specific (if anyone here knows ASP.NET): The UserControl has something called Page, that component has Header and Body, if I add something to the Header (like Link for one) then it'll appear in the head section of my page.
I need the component to add one JavaScript file that will contain my client-side logic (it's not trivial nor short so it needs to be externalized).
Apart from that it's not doable for me to do all the rendering for myself because the controls I'm using have to be from RichFaces (architect's decision - not mine). So all I can do is either manually glue things together in the xhtml template directly and add the necessary JS to the template (again: manually), or create a compound component that will be composed of the two components that already do what I need them to do and add the necessary additional JS file automatically when the component is added to the page.
However what I wanted to do is to create a component that will reuse the functionality of one of the RF components and add an input field in front of it that'll hold String and not Date (like the cumbersome RF component does).
Can you help?
Edited by: padcom on Jun 7, 2010 12:15 PM

Best practice for JSF 2.0 composite component?

Following the various tutorials and blog entries I have found, I have managed to implement a few composite components. I want to do a more complex one, but haven't found and example yet to follow and my own proficiency in programming model isn't sufficient for me to determine the best way to do it.
What I would want to implement is something like the following example.
.. xmlns:mc="http://java.syn.com/jsf/composite/myComponent" ..
<mc:addTwo value="#{SomeBean.someProperty}" />The included component has two fields, which when the user inputs those the someProperty is set to some calculation of those two (for example adding them together). What I think I need to do is implement a backing bean for the "addTwo" component and do the calculation there. Then when that is done the composite backing bean needs to access the using page's SomeBean.someProperty setter. How is this done?
My actual intent is to make a component that looks up an entity in a data base based on a number of user inputs, then set the "someProperty" property to that value. If I could do the above example then I think I can apply the same principle, which is to have the composite component's backing bean access the someProperty property in the using page's bean via a #{cc.attrs.xxx} type reference. Am I on the right track?

this certainly seems like the place for JSF 2.0 discussions, yes.
It seems so obvious, was this forum called something else when this was posted perhaps?

JSF 2.0 composite component children

Hi ,
question is regarding how to get a composite component's children components. Once I get the list of children components I can iterate through them but how do I get that list? :
Is there any way using EL to retrieve a children list so I can iterate through it with:
<ul>
<ui:repeat value="#{Magic El expression}" var="children" >
<li>
<p> #{children.id} *</p>
</li>
</ui:repeat>
</ul>
<div>
<cc:insertChildren />
</div>
What I'm trying to do here is create a Tab composite component. Tabs are children components is there anyway i can iterate and fetch their attributes?
I want to implement it with composite component. There is a not working solution to that question here :
http://stackoverflow.com/questions/4999720/jsf-composite-component-childrens

All composite components are NamingContainers. This is necessary to prevent ID collisions.
In order to avoid a generated ID on a particulare composite component, specify an ID in the component
within the using page:
<h:form id="form">
<components:myComponent id="c" />
</h:form>So the client ID of the text component would be: form:c:text.

How to carry across a Facet through nested composite components

Hello
I have two nested composite components, with an inner component that does interesting things, and an outer that groups some child components in a convenient package. I would like to use a Facet in the inner component, and it would be nice if you could declare it on the outer component and have it passed through. But I am unable to achieve this, and there is no documentation on how it should work.
I've made a test project where I try to use insertFacet in the outer component.
Main page 'index.xhtml':
<?xml version='1.0' encoding='UTF-8' ?>
<!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:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:test="http://java.sun.com/jsf/composite/facettest">
    <h:head>
        <title>NestedFacetTest</title>
    </h:head>
    <h:body>
        <div>PageTopElement</div>
        <test:outerCC>
            <f:facet name="testFacet">
                <div>FacetElement</div>
            </f:facet>
        </test:outerCC>
        <div>PageBottomElement</div>
        <br/>
        <div>PageTopElement2</div>
        <test:innerCC>
            <f:facet name="testFacet">
                <div>FacetElement2</div>
            </f:facet>
        </test:innerCC>
        <div>PageBottomElement2</div>
    </h:body>
</html>The outer composite component 'outerCC.xhtml' where I would like the Facet to be carried across:
<?xml version='1.0' encoding='UTF-8' ?>
<!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:composite="http://java.sun.com/jsf/composite"
      xmlns:test="http://java.sun.com/jsf/composite/facettest">
    
    <composite:interface>
        <composite:facet name="testFacet"/>
    </composite:interface>
    
    <composite:implementation>
        <div>OuterTopElement</div>
        <test:innerCC>
            <composite:insertFacet name="testFacet"/>
        </test:innerCC>
        <div>OuterBottomElement</div>
    </composite:implementation>
</html>The inner composite component 'innerCC.xhtml' where I would like to use the Facet:
<?xml version='1.0' encoding='UTF-8' ?>
<!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:composite="http://java.sun.com/jsf/composite">
    
    <composite:interface>
        <composite:facet name="testFacet"/>
    </composite:interface>
    
    <composite:implementation>
        <div>InnerTopElement</div>
        <composite:renderFacet name="testFacet"/>
        <div>InnerBottomElement</div>
    </composite:implementation>
</html>When I run the main page, I get the Facet text when I use innerCC directly, but not when I use outerCC. What do I do wrong, and how can I change the code so that the Facet is carried through to a nested composite component?
I run GlassFish 3 with Mojarra 2.0.2 (FCS b10).
Kind regards,
Thomas Jahnsen

I added an issue to Mojarra:
http://java.net/jira/browse/JAVASERVERFACES-2219
Feel free to vote for this that it will be implemented earlier.

Recursive nesting of Facelet Composite Components

I use JSF2.0 Facelets and Composite Components. I want to display a hierarchical questionary, where the questionary contains a Category List, and any Category can contains subCategories and Questions. In fact, Category inherits from abstract Question class, and we have also some other non-abstarct Question class, like IntQuestion, BooleQuestion, etc.
I defined a Composite Component for Category:
    
    <cc:interface>
        <cc:attribute name="category"/>
    </cc:interface>
    
    <cc:implementation>
        <h3><h:outputText value="#{category.label} " /></h3>
        <ui:repeat value="#{category.subCategories}" var="subcat">
            <h:panelGroup rendered="#{cc.attrs.category.type == 'Category'}">
                    <ez:category category="${subcat}" />
            </h:panelGroup>
            <h:panelGroup rendered="#{cc.attrs.category.type == 'IntQuestion'}">
                <h:outputText value="#{cc.attrs.category.label} " />
                <h:inputText value="#{myBean.answersByQuestion[cc.attrs.category].answer}" />
            </h:panelGroup>
            
        </ui:repeat>
    </cc:implementation>So my Questionary Page would be very short:
                <ui:repeat value="#{myBean.questionary.categories}" var="cat">
                    <ez:category category="${cat}" />
                </ui:repeat>But unfortunately nested composite components are put together before EL-expressions sre resolved, so we get an infinite loop (StackOverflow).
Do you have some idea to correct this composition?
Edited by: GezaCH on Jul 28, 2010 3:28 PM

I wrote something like that about a year ago, and it wasn't hard, and didn't take long time, so you should be able to write code for that in less than an hour if you know about reflection.
Kaj

JSF design view - visual components are shrinking

Hello,
I have some strange issue while using Design view for JSF and data binding.
Once I drop any data control elements into visual component (panel, etc) my visual components are shrinking to such size, that I cannot distinguish any elements within design view. I cannot use design view since then and have to place all elements base on structure panel.
How to reproduce:
1. Create new JSF page with wizard and accept defaults.
2. Drop one of the panels (panel box, panel group layout) into JSF layout
At this stage my visual elements occupy 100% of design view screen and represent anticipated outcome
3. Drag and drop one of the data control elements (data control panel) into created panels on JSF and create table or form
Immediately after it visual panel where data control was dropped shrinks to approximately 1/4 of the screen and I cannot see neither available space nor created table for my data components.
I figured out, that if I remove created by wizard default <af:messages> tag from the top of my JSF, then design view representation fixes. Not sure if I should remove <af:messages> from all my pages.
Above all looks to me as and bug.
Environment:
-Jdeveloper 11g
-Windows Vista 64b
-Not bundled JDK 6

Hi Shay,
Thank you for response.
1. I tried to play with screen size without result
2. I checked your video post, but this does not resolve my issue
3. This issue occures with all JSF pages and can be reproduced even when following official Oracle step by step tutorials.
4. I figured out, that removing <af:messages> tag resolves the issue ?! It seems this tag is added by default during drag and drop binding.
5. On this link http://drop.io/jdev_001 you can see how design view is changes with and without <af:messages> tag
6. Below is code example from one of the tutorials, that leads to shrinking as well:
7. Once app is deployed and running page get normal view in IE as expected, so it seems to me, it is issue with Jdev design view, probably influenced by my environment, if nobody reported it before.
Thank you for your help.
===========================================================================
<?xml version='1.0' encoding='windows-1252'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<jsp:directive.page contentType="text/html;charset=windows-1252"/>
<f:view>
<af:document id="d1">
<af:messages id="m1"/>
<af:form id="f1">
<af:panelStretchLayout id="psl1">
<f:facet name="center">

<af:decorativeBox theme="dark" id="db1">
<f:facet name="center">
<af:decorativeBox theme="medium" id="db2">
<f:facet name="center">
<af:panelFormLayout id="pfl1">
<af:inputText value="#{bindings.p_name.inputValue}" label="#{bindings.p_name.hints.label}"
required="#{bindings.p_name.hints.mandatory}" columns="#{bindings.p_name.hints.displayWidth}"
maximumLength="#{bindings.p_name.hints.precision}" shortDesc="#{bindings.p_name.hints.tooltip}" id="it1">
<f:validator binding="#{bindings.p_name.validator}"/>
</af:inputText>
<af:commandButton actionListener="#{bindings.getEmployeesFindByName.execute}" text="getEmployeesFindByName"
disabled="#{!bindings.getEmployeesFindByName.enabled}" id="cb1"/>
<af:panelFormLayout id="pfl2">
<af:inputText value="#{bindings.commissionPct.inputValue}" label="#{bindings.commissionPct.hints.label}"
required="#{bindings.commissionPct.hints.mandatory}" columns="#{bindings.commissionPct.hints.displayWidth}"
maximumLength="#{bindings.commissionPct.hints.precision}" shortDesc="#{bindings.commissionPct.hints.tooltip}"
id="it4">
<f:validator binding="#{bindings.commissionPct.validator}"/>
<af:convertNumber groupingUsed="false" pattern="#{bindings.commissionPct.format}"/>
</af:inputText>
<af:inputText value="#{bindings.email.inputValue}" label="#{bindings.email.hints.label}"
required="#{bindings.email.hints.mandatory}" columns="#{bindings.email.hints.displayWidth}"
maximumLength="#{bindings.email.hints.precision}" shortDesc="#{bindings.email.hints.tooltip}" id="it7">
<f:validator binding="#{bindings.email.validator}"/>
</af:inputText>
<af:inputText value="#{bindings.employeeId.inputValue}" label="#{bindings.employeeId.hints.label}"
required="#{bindings.employeeId.hints.mandatory}" columns="#{bindings.employeeId.hints.displayWidth}"
maximumLength="#{bindings.employeeId.hints.precision}" shortDesc="#{bindings.employeeId.hints.tooltip}"
id="it6">
<f:validator binding="#{bindings.employeeId.validator}"/>
<af:convertNumber groupingUsed="false" pattern="#{bindings.employeeId.format}"/>
</af:inputText>
<af:inputText value="#{bindings.firstName.inputValue}" label="#{bindings.firstName.hints.label}"
required="#{bindings.firstName.hints.mandatory}" columns="#{bindings.firstName.hints.displayWidth}"
maximumLength="#{bindings.firstName.hints.precision}" shortDesc="#{bindings.firstName.hints.tooltip}" id="it3">
<f:validator binding="#{bindings.firstName.validator}"/>
</af:inputText>
<af:inputDate value="#{bindings.hireDate.inputValue}" label="#{bindings.hireDate.hints.label}"
required="#{bindings.hireDate.hints.mandatory}" shortDesc="#{bindings.hireDate.hints.tooltip}" id="id1">
<f:validator binding="#{bindings.hireDate.validator}"/>
<af:convertDateTime pattern="#{bindings.hireDate.format}"/>
</af:inputDate>
<af:inputText value="#{bindings.jobId.inputValue}" label="#{bindings.jobId.hints.label}"
required="#{bindings.jobId.hints.mandatory}" columns="#{bindings.jobId.hints.displayWidth}"
maximumLength="#{bindings.jobId.hints.precision}" shortDesc="#{bindings.jobId.hints.tooltip}" id="it2">
<f:validator binding="#{bindings.jobId.validator}"/>
</af:inputText>
<af:inputText value="#{bindings.lastName.inputValue}" label="#{bindings.lastName.hints.label}"
required="#{bindings.lastName.hints.mandatory}" columns="#{bindings.lastName.hints.displayWidth}"
maximumLength="#{bindings.lastName.hints.precision}" shortDesc="#{bindings.lastName.hints.tooltip}" id="it8">
<f:validator binding="#{bindings.lastName.validator}"/>
</af:inputText>
<af:inputText value="#{bindings.phoneNumber.inputValue}" label="#{bindings.phoneNumber.hints.label}"
required="#{bindings.phoneNumber.hints.mandatory}" columns="#{bindings.phoneNumber.hints.displayWidth}"
maximumLength="#{bindings.phoneNumber.hints.precision}" shortDesc="#{bindings.phoneNumber.hints.tooltip}"
id="it9">
<f:validator binding="#{bindings.phoneNumber.validator}"/>
</af:inputText>
<af:inputText value="#{bindings.salary.inputValue}" label="#{bindings.salary.hints.label}"
required="#{bindings.salary.hints.mandatory}" columns="#{bindings.salary.hints.displayWidth}"
maximumLength="#{bindings.salary.hints.precision}" shortDesc="#{bindings.salary.hints.tooltip}" id="it5">
<f:validator binding="#{bindings.salary.validator}"/>
<af:convertNumber groupingUsed="false" pattern="#{bindings.salary.format}"/>
</af:inputText>
<f:facet name="footer">
<af:panelGroupLayout layout="vertical" id="pgl1">
<af:panelGroupLayout layout="horizontal" id="pgl2">
<af:commandButton actionListener="#{bindings.First.execute}" text="First" disabled="#{!bindings.First.enabled}"
partialSubmit="true" id="cb2"/>
<af:commandButton actionListener="#{bindings.Previous.execute}" text="Previous" disabled="#{!bindings.Previous.enabled}"
partialSubmit="true" id="cb3"/>
<af:commandButton actionListener="#{bindings.Next.execute}" text="Next" disabled="#{!bindings.Next.enabled}"
partialSubmit="true" id="cb4"/>
<af:commandButton actionListener="#{bindings.Last.execute}" text="Last" disabled="#{!bindings.Last.enabled}"
partialSubmit="true" id="cb6"/>
</af:panelGroupLayout>
<af:commandButton text="Save" id="cb5" actionListener="#{bindings.mergeDepartments.execute}"
disabled="#{!bindings.mergeDepartments.enabled}" action="browse"/>
</af:panelGroupLayout>
</f:facet>
</af:panelFormLayout>
</af:panelFormLayout>
</f:facet>
</af:decorativeBox>
</f:facet>
</af:decorativeBox>
</f:facet>
</af:panelStretchLayout>
</af:form>
</af:document>
</f:view>
</jsp:root>
Edited by: user555411 on May 2, 2010 2:08 PM

Building JSF 1.2 Custom Components with EL and standard components

Hi all,
I have built custom components in jsf 1.1 with great success but i am finding replicating the same functionality in jsf 1.2 very difficult. I have some conditions for my new custom component.
- Using jsf 1.2
- Must use unified EL, i am using a UIComponentELTag
- iam using jsf standard html components from javax.faces.component.html here in particular i wont HtmlCommandLink.
Essentially i am constructing a real time command menu. I have a backing bean from which i get command names and descriptions values. I wont to then in real time construct a table of links (using HtmlCommandLink) - all this work is to be processed by a custom component. Basically the commandLink issues a command in my backing bean, a parameter (param) is passed with the commandLink, this is later picked up in the backing bean method.
I can generate the table, and all the HtmlCommandLinks, i have simply looped throught and encoded each of them.
What i can do: i can see the table and the HtmlCommandLinks, but the links dont perform any action when i press them.
What i want help with:
I want to encode a HtmlCommandLink in my custom component with a param, traditionally i would set the action but this is now deprecated, and i need to use the setActionExpression method. I have tried to do this but the actions are note fired its simply doesnt function.
Note:
In jsf 1.1 I use to loop through all the HtmlCommandLink and peform their processDecodes method within my custom components very own processDecodes. The same in jsf 1.2 doesnt seem to yield any results.
Can someone give be an example or solution to this? I have read articles on the net and they seem to all discuss jsf 1.1 which i have done and it works, but i am using unifed EL and jsf 1.2 now.
Many Thanks,
Kev

Hi all,
I have built custom components in jsf 1.1 with great success but i am finding replicating the same functionality in jsf 1.2 very difficult. I have some conditions for my new custom component.
- Using jsf 1.2
- Must use unified EL, i am using a UIComponentELTag
- iam using jsf standard html components from javax.faces.component.html here in particular i wont HtmlCommandLink.
Essentially i am constructing a real time command menu. I have a backing bean from which i get command names and descriptions values. I wont to then in real time construct a table of links (using HtmlCommandLink) - all this work is to be processed by a custom component. Basically the commandLink issues a command in my backing bean, a parameter (param) is passed with the commandLink, this is later picked up in the backing bean method.
I can generate the table, and all the HtmlCommandLinks, i have simply looped throught and encoded each of them.
What i can do: i can see the table and the HtmlCommandLinks, but the links dont perform any action when i press them.
What i want help with:
I want to encode a HtmlCommandLink in my custom component with a param, traditionally i would set the action but this is now deprecated, and i need to use the setActionExpression method. I have tried to do this but the actions are note fired its simply doesnt function.
Note:
In jsf 1.1 I use to loop through all the HtmlCommandLink and peform their processDecodes method within my custom components very own processDecodes. The same in jsf 1.2 doesnt seem to yield any results.
Can someone give be an example or solution to this? I have read articles on the net and they seem to all discuss jsf 1.1 which i have done and it works, but i am using unifed EL and jsf 1.2 now.
Many Thanks,
Kev

On JSF Page load UI components loading sequence

Hi All,
I have some questions about the UI components loading sequence on the JSF page load.
When a JSF page loads it loads its UI components which have a sequence of getters and setters declared in the backing bean of that jspx page.
Qustion 1: How these getters and setters in backing bean work in loading the jspx page?
Question 2: How this backing bean is related to the Page Definition file for the page loading?
Question 3 (main query): What is the sequence of the getters and setters. Means, if i drop 3 UI components, 1 input text, then a command button and then an output text, then they are accordingly declared in backing bean. On page load first i/p texts getter gets called, then setter, then command button's and theno/p texts, in these sequence.
But can i manipulate their sequence of loading. If yes then how it can be possible?

Answer 1: Getters and Setters in bean normally will be bounded to ui component's properties in jspx page, when jspx page loads these getters get called through introspection and setters gets called when a request is submitted.
Answer 2: Backing bean and page definition are two different entities and they are no way related unless you have a data control for the backing bean and have bindings for those methods in page definition file
Answer 3: The sequence of getters and setters depends on the order of the components they bounded to in jspx page. components in jsf page gets loaded from top to bottom so the getter bound to the top component gets called first and the getter bound to bottom component gets called last.
The only way to change the sequence of getter methods getting called is to just change the order of the components they bound to in jspx page.
Usually, it is not suggested to put business logic inside getters and setters, where you have action and actionlisteners for the same. If you follow that, you don't need to worry of the sequence of getters and setters execution
Sireesha

JSF 2 composite comp. backing class: what can I use for the decode method?

Hello, everybody!
I want to convert a JSF 1.2 custom component to a JSF 2.0 composite component. This JSF 1.2 custom component uses a renderer where I take some actions in the decode method. So, I would like to know what I could use to replace the well known decode method when writing a backing class for a JSF 2.0 composite component.
Thank you.
Marcos
Edited by: Marcos_AntonioPS on May 21, 2010 11:59 AM

Let's try with org.havi.ui.HStaticText

Problem w.r.t. JSF 2.0 with faces-config.xml

Hi All,
I am trying to evaluate the features of JSF2.0.
For that, I have created a very simple application with "JSF 2.0.2".
There is a page that displays a composite component and some other form related components (inputtext, commandbutton).
When I deploy my application without any faces-config.xml file, everything renders perfectly fine.
When I deploy the app with faces-config.xml (even an empty one without any configuration), none of the components get rendered.
Only the html elements get displayed.
I need to define some navigation-rules in my config file. I am not sure how to go further from here.
The app server I am using for deploying my app is GlassFish(v3).
Any help or pointers towards solving my problem are highly appreciated.
You can find the xhtml file, etc of my project below.
Thank you,
With best regards,
Praveen
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
     <context-param>
          <param-name>javax.faces.DEFAULT_SUFFIX</param-name>
          <param-value>.xhtml</param-value>
     </context-param>
     <servlet>
          <servlet-name>Faces Servlet</servlet-name>
          <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
          <load-on-startup>1</load-on-startup>
     </servlet>
     <servlet-mapping>
          <servlet-name>Faces Servlet</servlet-name>
          <url-pattern>*.jsf</url-pattern>
     </servlet-mapping>
</web-app>
faces-config.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN" "http://java.sun.com/dtd/web-facesconfig_1_1.dtd">
<faces-config xmlns="http://java.sun.com/JSF/Configuration">
</faces-config>
resources->acicomp->namesection.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:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:composite="http://java.sun.com/jsf/composite">
<composite:interface>
</composite:interface>
<composite:implementation>
     <h:panelGroup>
     <h:panelGrid columns="2">
          <h:outputText value="Name: "/>
          <h:inputText value="myName"/>
          <h:outputText value="Company: "/>
          <h:inputText value="myComp"/>
     </h:panelGrid>
     </h:panelGroup>
</composite:implementation>
</html>
index.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:aci="http://java.sun.com/jsf/composite/acicomp">
<h:head>
     <title>JSF Test Program</title>
</h:head>
<h:body>
     <p>My Simple Test Program</p>
        <h:form id="testForm" >
            <p>TEST</p>
            <aci:namesection></aci:namesection>
            <h:inputText id="username" value="John" />
            <h:commandButton id="submit" action="response" value="Submit"/>
        </h:form>
</h:body>
</html>

I found the problem.
The dtd location of the faces-config.xml had to be changed. It was pointing to the schema of 1.1.
With the following faces-config.xml, my application worked perfectly fine.
<?xml version="1.0"?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
              xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
              xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
              version="2.0">
</faces-config>

Using a composite component from an xhtml that is included in another xhtml

JBoss 7.1.1
JSF 2.1
I have the following composite component:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:component xmlns="http://www.w3.org/1999/xhtml"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:composite="http://java.sun.com/jsf/composite"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:rich="http://richfaces.org/rich">
        <composite:interface>
            <composite:attribute name="for" required="true" />
        </composite:interface>
        <composite:implementation>
            <rich:panel styleClass="aas-msg-tt-p">
                <rich:message id="#{cc.attrs.for}-msg"
                    for="#{cc.attrs.for}" />
                <rich:tooltip id="#{cc.attrs.for}-msg-tt">
                    <rich:message for="#{cc.attrs.for}"
                        styleClass="aas-rf-det-tooltip" />
                </rich:tooltip>
            </rich:panel>
        </composite:implementation>
</ui:component>It is in WebContent/resources/aas-composite/messagetooltip.xhtml ( where WebContent is the root directory or root context directory of the deployed WAR )
h3. *1. Using the composite component and working as expected*
If I use the composite component directly as follows, it all works:
1) Create test.xhtml in WebContent
2) Content of test.xhtml as follows:
<!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:aas="http://java.sun.com/jsf/composite/aas-composite">
<h:head>
    <meta http-equiv="X-UA-Compatible" content="IE=8" />
</h:head>
<h:body>
    <h:outputStylesheet library="css" name="richfacesoverrides.css"/>
    <h:form id="testform">
       <table>
            <tr>
                <td><aas:messagetooltip for="id2"/></td>
                <td><h:outputLabel>Input 2: </h:outputLabel></td>
                <td><h:selectOneMenu id="id2"
                        required="true"
                        requiredMessage="Cause of Death is required"
                        value="${death.causeOfDeath}">
                       <f:selectItem itemValue="" itemLabel="-- Select One --" />
                       <f:selectItem itemValue="COD01" itemLabel="Cancer" />
                       <f:selectItem itemValue="COD02" itemLabel="Diabetes" />
                       <f:selectItem itemValue="COD11" itemLabel="Other" />
                    </h:selectOneMenu>
                </td>
            </tr>
       </table>
       <h:commandButton id="submit" value="Submit"/><br/>
</h:form>
</h:body>
</html>3) Deploy and test, all good
h3. *2. Using the composite component but NOT working as expected*
Now if I use the composite component as follows:
4) Create XHTML file called includeThisFromRoot.xhtml under WebContent directory
5) with content as follows:
<!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:aas="http://java.sun.com/jsf/composite/aas-composite">
    <ui:composition>
       <table>
            <tr>
                <td><aas:messagetooltip for="id2"/></td>
                <td><h:outputLabel>Input 2: </h:outputLabel></td>
                <td><h:selectOneMenu id="id2"
                        required="true"
                        requiredMessage="Cause of Death is required"
                        value="${death.causeOfDeath}">
                       <f:selectItem itemValue="" itemLabel="-- Select One --" />
                       <f:selectItem itemValue="COD01" itemLabel="Cancer" />
                       <f:selectItem itemValue="COD02" itemLabel="Diabetes" />
                       <f:selectItem itemValue="COD11" itemLabel="Other" />
                    </h:selectOneMenu>
                </td>
            </tr>
       </table>
       <h:commandButton id="submit" value="Submit"/><br/>
    </ui:composition>
</html>6) Make a copy test.xhtml, but call the new one testWithInclude.xhtml, with content as follows:
<!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:aas="http://java.sun.com/jsf/composite/aas-composite">
<h:head>
    <meta http-equiv="X-UA-Compatible" content="IE=8" />
</h:head>
<h:body>
    <h:outputStylesheet library="css" name="richfacesoverrides.css"/>
    <h:form id="testform">
        <ui:include src="includeThisFromRoot.xhtml" />
    </h:form>
</h:body>
</html>h3. Summary of change
You can see here that I simply moved all of the content between the form tags from the original XHTML to a separate XHTML, and included that separate XHTML using <ui:include>.
h3. Result
7) Deploy and access testWithInclude.jsf from browser, and I get:
15:17:55,310 ERROR [org.apache.catalina.core.ContainerBase.[jboss.web].[default-host].[/richfacestest].[Faces Servlet]] (http--0.0.0.0-8081-5) Servlet.service() for servlet Faces Servlet threw exception: javax.faces.view.facelets.TagException: /includeThisFromRoot.xhtml @13,52 <aas:messagetooltip> Tag Library supports namespace: http://java.sun.com/jsf/composite/aas-composite, but no tag was defined for name: messagetooltip
        at com.sun.faces.facelets.compiler.CompilationManager.pushTag(CompilationManager.java:304) [jsf-impl-2.1.7-jbossorg-2.jar:]
        at com.sun.faces.facelets.compiler.SAXCompiler$CompilationHandler.startElement(SAXCompiler.java:266) [jsf-impl-2.1.7-jbossorg-2.jar:]
        at org.apache.xerces.parsers.AbstractSAXParser.startElement(AbstractSAXParser.java:496)
        at org.apache.xerces.parsers.AbstractXMLDocumentParser.emptyElement(AbstractXMLDocumentParser.java:180)
        at org.apache.xerces.impl.dtd.XMLDTDValidator.emptyElement(XMLDTDValidator.java:810)
        at org.apache.xerces.impl.XMLNSDocumentScannerImpl.scanStartElement(XMLNSDocumentScannerImpl.java:275)
        at org.apache.xerces.impl.XMLDocumentFragmentScannerImpl$FragmentContentDispatcher.dispatch(XMLDocumentFragmentScannerImpl.java:1653)
        at org.apache.xerces.impl.XMLDocumentFragmentScannerImpl.scanDocument(XMLDocumentFragmentScannerImpl.java:324)
        at org.apache.xerces.parsers.XML11Configuration.parse(XML11Configuration.java:845)
        at org.apache.xerces.parsers.XML11Configuration.parse(XML11Configuration.java:768)
        at org.apache.xerces.parsers.XMLParser.parse(XMLParser.java:108)
        at org.apache.xerces.parsers.AbstractSAXParser.parse(AbstractSAXParser.java:1196)
        at org.apache.xerces.jaxp.SAXParserImpl$JAXPSAXParser.parse(SAXParserImpl.java:555)
        at org.apache.xerces.jaxp.SAXParserImpl.parse(SAXParserImpl.java:289)
        at javax.xml.parsers.SAXParser.parse(SAXParser.java:195) [rt.jar:1.7.0_09]
        at com.sun.faces.facelets.compiler.SAXCompiler.doCompile(SAXCompiler.java:434) [jsf-impl-2.1.7-jbossorg-2.jar:]
        at com.sun.faces.facelets.compiler.SAXCompiler.doCompile(SAXCompiler.java:410) [jsf-impl-2.1.7-jbossorg-2.jar:]
        at com.sun.faces.facelets.compiler.Compiler.compile(Compiler.java:124) [jsf-impl-2.1.7-jbossorg-2.jar:]
        at com.sun.faces.facelets.impl.DefaultFaceletFactory.createFacelet(DefaultFaceletFactory.java:305) [jsf-impl-2.1.7-jbossorg-2.jar:]
        at com.sun.faces.facelets.impl.DefaultFaceletFactory.access$100(DefaultFaceletFactory.java:93) [jsf-impl-2.1.7-jbossorg-2.jar:]
        at com.sun.faces.facelets.impl.DefaultFaceletFactory$1.newInstance(DefaultFaceletFactory.java:160) [jsf-impl-2.1.7-jbossorg-2.jar:]What gives ? Am I missing something simple ?

I think I may have found a workaround.
In the XHTML file that is included and using the composite component, add the namespace as part of the custom component, like so:
<aas:messagetooltip xmlns:aas="http://java.sun.com/jsf/composite/aas-composite" for="id2"/>So that it now becomes:
<!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:aas="http://java.sun.com/jsf/composite/aas-composite">
    <ui:composition>
       <table>
            <tr>
                <td><aas:messagetooltip xmlns:aas="http://java.sun.com/jsf/composite/aas-composite" for="id2"/></td>
                <td><h:outputLabel>Input 2: </h:outputLabel></td>
                <td><h:selectOneMenu id="id2"
                        required="true"
                        requiredMessage="Cause of Death is required"
                        value="${death.causeOfDeath}">
                       <f:selectItem itemValue="" itemLabel="-- Select One --" />
                       <f:selectItem itemValue="COD01" itemLabel="Cancer" />
                       <f:selectItem itemValue="COD02" itemLabel="Diabetes" />
                       <f:selectItem itemValue="COD11" itemLabel="Other" />
                    </h:selectOneMenu>
                </td>
            </tr>
       </table>
       <h:commandButton id="submit" value="Submit"/><br/>
    </ui:composition>
</html>I tried this after finding a similar bug about nested composite components, which I do not use, but thought I would give it a try:
http://stackoverflow.com/questions/10898906/myfoo-tag-library-supports-namespace-http-java-sun-com-jsf-composite-mycom
http://stackoverflow.com/questions/9735593/nested-composite-component-broken-in-jboss-7-1-1
Have to keep track of all these workarounds that I am doing.

How to bind a complex object to a composite component

I'm using JSF2 and having an issue binding an object (EL Expression) as a parameter to my composite component.
I have written a composite component (not very complex) that will display a drop-down list of countries and should bind the selection to a provided target bean.
<!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:composite="http://java.sun.com/jsf/composite"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">

<composite:interface>
<composite:attribute name="label" required="true" />
<composite:attribute name="requiredMessage" required="true"/>
<composite:attribute name="target" required="true" type="com.mycompany.entity.Country"/>
</composite:interface>

<composite:implementation>
<h:panelGrid columns="2">
<h:outputLabel for="country-list" value="#{cc.attrs.label}"/>
<h:panelGrid id="country" columns="1" styleClass="select-one-menu-panel" >
<h:selectOneMenu id="country-list"
enabledClass="select-one-menu-enabled" disabledClass="select-one-menu-disabled"
layout="pageDirection"
value="#{cc.attrs.target}"
required="true" requiredMessage="#{cc.attrs.requiredMessage}"
>
<f:selectItem itemLabel="#{msgs['label.pleaseSelect']}" itemValue="" />
<f:selectItems value="#{countryController.countries}" />
<a4j:ajax />
</h:selectOneMenu>
<a4j:outputPanel id="country-list-error-panel" ajaxRendered="true">
<h:message id="country-list-error" for="country-list" style="color:red"/>
</a4j:outputPanel>
</h:panelGrid>
</h:panelGrid>
</composite:implementation>
</html>
I want to be able to use the composite component in the following way:
<util:country-select
label="#{msgs['label.countryOfBirth']}"
requiredMessge="#{msgs['error.birthCountryRequired']}"
target="#{participant.countryOfBirth}"/>
When I load the page everything renders correctly, but when I select an item from the drop-down I get a validation error.
apply-form:j_idt77:country-list: Validation Error: Value is not valid
I know that it must be something with the way that I have the parameters defined but I simply can't find any information to help me figure this out.
Any light that you might be able to she on this would be greatly appreciated.
Thank you for the help...

Hi,
well, you can. What the ADF Data Control and thus the binding gives you is the JSF component binding and the business service access.
If you don't want to use ADF, then what you can do is
- Create an ADF BC root Application Module from a managed bean
e.g. see http://docs.oracle.com/cd/E21764_01/web.1111/b31974/bcservices.htm#CHDDDBFC
- Access the View Object for querying the data to display
- Expose the queried data so the component can handle it e.g. setter/getter for input components, ArrayList for tables (or you create the more complex component models like table and tree models)
Having outlined the above, here are some gotchas to watch out for
- Make sure creating the root application module is done such that you don't create/release it with each request. So you may consider a data serving managed bean in a scope like page flow or session
- Ensure you have helper methods that allow you to query and CRUD operate the View Object data
Frank

JSF 2.0 Composite components

Similar Messages

Maybe you are looking for