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.

Similar Messages

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

Purpose of defining "components" and their use

On double clicking the Web Dynpro Component, we see many objects defined under "Used Components and Implemented Interfaces".
What is the purpose behind these components and how do we use them in our application?

Hi Abhishek,
You can use this technique to add the the elements of the separately defined interface controller to the component controller of the implemented component. For large programming projects, this results in a higher reusability of the interface structures. Go through the [link|http://help.sap.com/SAPHELP_NW04S/helpdata/EN/b9/1c2d4108f08739e10000000a1550b0/content.htm] below to underdstand how you can implement a Web Dynpro Interface definition in your component. You can go through these tutorials for understanding how you can define a component usage in your WebDynpro component:
[Component re-use of SALV_WD_TABLE for displaying output in ALV format|https://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/docs/library/uuid/3439404a-0801-0010-dda5-8c14514d690d]
[Component re-use of WDR_SELECT_OPTIONS for displaying select-options in WebDynpro ABAP|https://www.sdn.sap.com/irj/sdn/go/portal/prtroot/docs/library/uuid/c09fec07-0dab-2a10-dbbe-c9a26bdff03e]
Regards,
Uday

Enumerating structure components and their types

Hello,
I'm interested in retrieving component names as well as their types:
TYPES: BEGIN OF my_structure,
           field1 LIKE accit-pargb,
           field2 LIKE accit-paobjnr,
         END OF my_structure.
What I want to achieve is more less below:
NAME      TYPE                     NAME      TYPE
field1    accit-pargb      OR      field1    pargb
field2    accit-paobjnr            field2    paobjnr
What's the most important is to be able to retrieve types in form ACCIT-PARGB/ACCIT-PAOBJNR OR PARGB/PAOBJNR.
Any clues ?
Using Runtime Type Services I am able to enumerate components, but not able to get the types in the same form as in declaration of structure.
So far I did like this:
Used
cl_abap_structdescr=>describe_by_name('my_structure')
to get components of structure.
Then used
LOOP AT components ...
         cl_abap_typedescr=>describe_by_name('my_structure-<component_name>').
         access   r_typedescr->absolute_name.
     ENDLOOP.
It works for some fields, but not for all of them. For PARGB I am able to get the exact result (absolute_name='\TYPE=PARGB') but for PAOBJNR i get '\TYPE=RKEOBJNR' which is not the expected result(prolly compiler assigned some other base type to it).
Thanks in advance.

Hello Mahendran,
i would recommend this page to you. You can find info and tutorials there.
http://wiki.scn.sap.com/wiki/pages/viewpage.action?pageId=4421
Regards,
Tobias

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.

Representing SOA/Composite service and operations

Which diagram/diagrams do you recommend for depicting a SOA/Composite Service and their operations?
Example:
We have a process function "Mutual Acceptance" that requires customer data,
which is in another software module for handling customer master data.
The service is called "Manage Customer" and the operation "Query Customer".
I am thankful for any input, best regards Fredrik.

Hi Fredrik,
Just some quick notes regarding this complex theme.
To describe the relationships of a business service to other architecture elements create a Business Service Allocation model for each Business Service. Therefore use the diagram type IS Context Model to depict:
* software services implementing the business service
* business data owned by the service
* capabilities
* organizational units
Furthermore Access diagrams can be used to depict a software service with its operations, data input and output, capabilities and roles (as far as notifications or workflows included). An Access diagram gets autoomatically generated while the import of a WSDL. Enrich the diagramm type according to your requirements (for operations you can use the symbol IT Procedure). At the end of the day the model shall serve a descrption for the implementation. Hope this is what you were looking for.
Best regards,
Danilo

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

Help on structures and their components

Folks
I am trying to know if there is any single point stop for help on all SAP related structures, classes and their respective components and methods in SDN or any other place.
In specific I am looking for calls made by Function modules to Class Interface - /SAPAPO/CL_PRJ_MAINT_SINGLE so that I can debug the same
Any ideas on how to check the calss made to a particular Class Interface for keeping a break point ?
Thanks
Edited by: COOL GUY on Sep 25, 2008 8:56 PM

go to se24 , key in class :/SAPAPO/CL_PRJ_MAINT_SINGLE
than in menu you can see where used list icon -> click on it -> select object in which you want to see where this class is used .
and enter.
will list all object in which this class is used.

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.

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?

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.

Flash Components and XML Binding

I just ran through the XML binding Bike Trails tutorial about
a hundred times. I can get that to work just fine. But when I try
to work with my XML file, it keeps falling apart. I just don't get
it! I've been working on it for 2 days and it's still not working
right.
For one, the bindings are not showing up right. I have 2
combo boxes and then a final one I'd like to use to list the
stores. Here's a link to basically what I'm trying to do:
http://www.thinkseed.com/test/stores.html
My bindings keep falling apart. I get null values all the
time for the second drop box that's supposed to house the States
(the one on the site is a fluke...I accidentally had the
<store> node on a separate line instead of nested in the
<state> node. No idea why that one sort of worked.)
Here's an example of the XML code:

The flashComponents are standard AS2 components, and you can look up their APIs in the Flash documentation. Here is the button docs:
http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=00001977.html#3654189
Looking at that, there is a getStyle() method, and I just tested it out:
put sprite(1).getStyle("borderStyle")
-- "inset"
put sprite(1).getStyle("fontFamily")
-- "_sans"
put sprite(1).getStyle("color")
-- 734012.0000
I'm not real sure what that means (probably the hex color converted to a float), but you can change the color like this:
sprite(1).setStyle("color","red")
And here is a page that lists all the styles that are defined:
http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=00001973.html#3136306

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

Set location of components and reduce the size

I want to resize JavaFX component and shrink the components which are next to it. Here is the result which I get:
When I click on the angle of this component I can resize it down and right.
http://i.stack.imgur.com/jqoNW.png
The components which are next to it are pushed down and right. Part of them are behind the visible part of the screen.
http://i.stack.imgur.com/rsi0L.png
All components are placed in BorderPane,VBox,HBoxand againBorderPane. I don't want to allow components to move. I want to shrink them and use Scrollpane` when their size is reduced. Can you give me some hits how to solve these two problems?
Ref javafx 2 - Set location of components and reduce the size - Stack Overflow

I did something similar the other day. Based on the resizing of the scene I adjusted the position.
widthProperty().addListener(new ChangeListener<Number>() {
    @Override public void changed(ObservableValue<? extends Number> observableValue, Number oldSceneWidth, Number newSceneWidth) {
        widthChange((Double)oldSceneWidth, (Double)newSceneWidth);
heightProperty().addListener(new ChangeListener<Number>() {
    @Override public void changed(ObservableValue<? extends Number> observableValue, Number oldSceneHeight, Number newSceneHeight) {
        heightChange((Double)oldSceneHeight, (Double)newSceneHeight);
You should be able to do something similar, when you add a change listener to your component and handle the resizing of the other components.
What I don't understand is why you would need a scrollbar, when the components shrink down. I would think it would be the other way round.

Flash Components and find font (getStyle)

Is there any way to find out what Font Family is being used by Flash Components (i.e. the "button", etc)?
Searching the web I see some examples of how to use the "setStyle", but I don't see any any any info about using "getStyle". Maybe that's not even a command that exists. And nothing about the font is show in the ".showProps()" either.
Thanks

The flashComponents are standard AS2 components, and you can look up their APIs in the Flash documentation. Here is the button docs:
http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=00001977.html#3654189
Looking at that, there is a getStyle() method, and I just tested it out:
put sprite(1).getStyle("borderStyle")
-- "inset"
put sprite(1).getStyle("fontFamily")
-- "_sans"
put sprite(1).getStyle("color")
-- 734012.0000
I'm not real sure what that means (probably the hex color converted to a float), but you can change the color like this:
sprite(1).setStyle("color","red")
And here is a page that lists all the styles that are defined:
http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=00001973.html#3136306

JSF 2.0: Composite Components and their ID

Similar Messages

Maybe you are looking for