Flex 4 custom component with children inserted directly into view stack

I give up. Hopefully I am just missing something easy, but I feel like I am pulling teeth trying to get this to work. All I want is a custom 'wizard' component whose children are placed within a ViewStack and beneath the ViewStack there is a next and back button. Here are some code excerpts to illustrate my approach:
WizardGroup.as:
[SkinPart(required="true")]
public var nextBt:Button = new Button();
[SkinPart(required="true")]
public var backBt:Button = new Button();
[SkinPart(required="true")]
public var stack:ViewStackSpark = new ViewStackSpark();
WizardGroupSkin.mxml:
<s:VGroup width="100%" height="100%"
          paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10">
     <container:ViewStackSpark id="stack" width="100%" height="100%">
          <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0"/>
     </container:ViewStackSpark>
     <s:HGroup horizontalAlign="right" width="100%">
          <s:Button id="nextBt" label="Next" enabled="{hostComponent.permitNext}" enabled.last="false"/>
          <s:Button id="backBt" label="Back" enabled="{hostComponent.permitBack}" enabled.first="false"/>
     </s:HGroup>
</s:VGroup>
While this comes very close to working, the major problem is that the children of the WizardGroup component are not added as children of the viewstack. Instead, they are added as children of the contentGroup. So the viewstack will always only have one child: contentGroup.
I also tried the approach of binding the contents of the view stack to the children of contentGroup, but with Spark containers, there is no way to access an array of children or array of elements (ie, there is no contentGroup.getChildren() or contentGroup.getElements()). Finally, I tried making the id of the ViewStackSpark "contentGroup" but since the ViewStackSpark inherits from BorderContainer, Flex complains at runtime that it can't cast the BorderContainer to Group.
Help would be greatly appreciated.
Thanks everyone.
Josh

I finally figured it out. The trick is to set the default property of the WizardGroup to a public member array I am calling "content"
[DefaultProperty("content")]
public class WizardGroup extends TitleWindow
    [SkinPart(required="true")]
    public var nextBt:Button = new Button();
    [SkinPart(required="true")]
    public var backBt:Button = new Button();
    [Bindable]
    public var content:Array;
And then within the skin, bind the content of the viewstack to the hostComponent's content array:
        <s:VGroup width="100%" height="100%"
                  paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10">
            <container:ViewStackSpark id="stack" width="100%" height="100%" content="{hostComponent.content}"/>
            <s:HGroup horizontalAlign="right" width="100%">
                <s:Button id="nextBt" label="Next" enabled="{hostComponent.permitNext}" enabled.last="false"/>
                <s:Button id="backBt" label="Back" enabled="{hostComponent.permitBack}" enabled.first="false"/>
            </s:HGroup>
        </s:VGroup>

Similar Messages

Problem custom component with children in RestoreView phase

Hi there!
I've got a problem with a custom component that I am writing. It consists of several UISelectOne and UIInputText components. Depending on the value selected in the UISelectOne components, the UISelectOne and UIInputText components may change. Therefore I attached a ValueChangeListener to the UISelectOne components. So far, so good.
The problem is, when the event is triggered, I get an ArrayIndexOutOfBoundsException. It took me a while to track it down. The problem seems to be, that during the Restore View phase, the StateManager's restoreComponentTreeStructure method first creates the component again and later restores its tree structure.
During creation of the component, its constructor is called in which I add the children to the component. While restoring the tree structure, the StateManager again adds the children to the component. So the list of my component's children contains each child twice.
The exception is due to the fact that in the saved state array only the original component's states are saved (which is perfectly right). So while restoring state and iterating through the component's children, the exception is thrown for the first child which is twice in the list (which is also perfectly right).
I hope this description is not too confusing. My question is, if anyone can give me a hint what I am doing wrong here? How can I avoid the component being initialized again? Or where should I add the children to the component?
Thanks for any advices!

Hi again,
I've perpared a minimal example (which in fact is quite big, but considering it's a custom tag it's probably not possible to make it smaller):
The UITest class (as you can see I add the child component in the constructor):
package test;
import java.io.IOException;
import java.util.*;
import java.util.ArrayList;
import java.util.List;
import javax.faces.application.Application;
import javax.faces.component.*;
import javax.faces.context.FacesContext;
import javax.faces.context.ResponseWriter;
import javax.faces.event.ValueChangeEvent;
import javax.faces.model.SelectItem;
public class UITest extends UIInput {
public static final String COMPONENT_TYPE = "Test";
public static final String COMPONENT_FAMILY = "Test";
private UISelectOne selectOne;
private UISelectItems selectItems;
public UITest(){
    Application application = FacesContext.getCurrentInstance().getApplication();
    selectItems = (UISelectItems)application.createComponent(UISelectItems.COMPONENT_TYPE);
    List items = new ArrayList();
    items.add(new SelectItem("One", "one"));
    items.add(new SelectItem("Two", "two"));
    selectItems.setValue(items);
    selectOne = (UISelectOne)application.createComponent(UISelectOne.COMPONENT_TYPE);
    selectOne.getAttributes().put("onchange", "submit()");
    Class[] params = {ValueChangeEvent.class};
    selectOne.setValueChangeListener(application.createMethodBinding("#{TestBean.valueChange}", params));
    selectOne.getChildren().add(selectItems);
    this.getChildren().add(selectOne);
public void encodeChildren(FacesContext context) throws IOException {
    ResponseWriter writer = context.getResponseWriter();
    Iterator children = getChildren().iterator();
    while(children.hasNext()){
      UIComponent child = (UIComponent)children.next();
      if(child.isRendered()){
        child.encodeBegin(context);
        if(child.getRendersChildren()){
          child.encodeChildren(context);
        child.encodeEnd(context);
public boolean getRendersChildren(){
    return true;
}The component tag class:
package test;
import javax.faces.webapp.UIComponentTag;
public class TestTag extends UIComponentTag {
public String getComponentType() {    return "Test"; }
public String getRendererType() {    return null; }
}Tag registration:
<tag>
    <name>test</name>
    <tag-class>test.TestTag</tag-class>
</tag>The backing bean:
package test;
import javax.faces.event.ValueChangeEvent;
public class TestBean {
private String currentValue;
public void valueChange(ValueChangeEvent event) {
    System.err.println(event.getNewValue());
public String getCurrentValue() {
    return currentValue;
public void setCurrentValue(String currentValue) {
    this.currentValue = currentValue;
}And finally the definition in the faces-config:
   <component>
      <component-type>Test</component-type>
      <component-class>test.UITest</component-class>
   </component>
   <managed-bean>
    <managed-bean-name>TestBean</managed-bean-name>
    <managed-bean-class>test.TestBean</managed-bean-class>
    <managed-bean-scope>session</managed-bean-scope>
   </managed-bean>When included in the JSP and then clicked on the combobox, I get an ArrayIndexOutOfBoundsException.
Can anyone give me a hint what the problem might be?
Thanks in advance!

Show a custom component on button click in a view stack`

Hello folks
I have a view stack in which i have some custom components.
Now there is one custom component in which there is one button. On the button click, i want to show another custom component but i dont know how to do it. Should i write the inline mxml click event in custom component?? If yes then how??
Currently i am doing it as
click="{customcomponent}"

As you know, ViewStack has containers, lilke VBox for its views.
Assuming one of your views VBox has an id of myVBox, and that VBox has the Button that when clicked will display the component, just have the component in the view already, but you can make it invisible with visible=false and includeInLayout=false, and then upon button click set those two variables to true.
You will probably want a show handler for the view VBox to make those properties false each time that view is displayed.
Here is some simple sample code.
If this post answers your question or helps, please mark it as such.
---------- MySimpleComponent.mxml ----------
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%" horizontalAlign="center">
<mx:Label text="My Custom Component"/>
</mx:VBox>
---------- MainApp.mxml ----------
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:comp="*" horizontalAlign="center" verticalAlign="middle">
<mx:Script>
    <![CDATA[
    ]]>
</mx:Script>
<mx:LinkBar dataProvider="{vs}"/>
<mx:ViewStack id="vs" width="100%" height="100%">
    <mx:VBox label="view1" width="100%" height="100%"
      horizontalAlign="center">
      <mx:Label text="View One"/>
    </mx:VBox>
    <mx:VBox label="view2" width="100%" height="100%"
      show="myComp.visible=false;myComp.includeInLayout=true;"
      horizontalAlign="center">
      <mx:Label text="View Two"/>
      <mx:Button label="Make myComp Visible" click="myComp.visible=true;myComp.includeInLayout=true;"/>
      <comp:MySimpleComponent id="myComp" visible="false" includeInLayout="false"/>
    </mx:VBox>
</mx:ViewStack>
</mx:Application>

Custom component with additional tags

Hi. I need to write complicated custom JSF component.
I know how to write simple custom components, and receive String variables from tag attributes e.g.
https://github.com/devalentino/temp/blob/master/src/main/java/net/monopolyclub/components/component/UserData.java
But now I need to write custom component with additional tags (for example like dataTable and column tags).
How can I write such component? How can I receive collections in my component? How can I work with additional tags in my component.
for example I need something like:
<m:chat>
     <m:tab value="#{UserList}" />
     <m:message value="#{MesageMap}" />
</m:chat>
where UserList - Collection with current users and MessageMap is Map with User as key and message as value.

Iam using pt:ptdata.joincurrcommunitydata
here is some code
<pt:ptdata.joincurrcommunitydata pt:id="menutabsjoin" />
<pt:logic.foreach pt:var="temp2" pt:data="menutabsjoin">
<span class="CommunityPage">
<pt:core.html href="$temp2.url" pt:tag="a">
<pt:core.html pt:tag="img" src="$temp2.img" alt="$temp2.title" border="0" align="absmiddle" height="$temp2.imgheight"      width="$temp2.imgwidth" />
                    <pt:logic.value pt:value="$temp2.title" />
                         </pt:core.html>
                         </span>
                         </pt:logic.foreach>
But the URL that is generated is not having the CommunityID, hence it errors out saying object not found.
Any help would be appreciated?
Thanks
kartik

Have a problem in Numbers with entering data directly into a cell when a table reaches a certain size and special characters are used?

I am creating a list of words with special characters in some of them. I get to a point where I cannot enter data directly into the cell. I have to use the data entry bar at the top in the toolbar. Any solutions available?
This is the table I am creating...
From row 25 on, I am only able to enter data into the cell through the toolbar at the top and not directly into the cell itself. I believe that this problem originates from the special characters I have inserted in the previous records because if I do not use special characters, then the spreadsheet acts flawlessly. Have there been issues in Numbers with data entry, the size of a table, and using special characters?

I would try removing the rows with "special" characters one at a time to see which one is causing the problem

How to code spark custom component with variable number of (skin)parts?

Hello. I'm trying to code a complex Spark custom component that may have a variable number of parts. To help you understand the requirements, the component can be visualized as an HSlider with a unlimited number of thumbs (as opposed to one).
How do I, in general, represent these thumbs in the host component as well as the skin? If I had a fixed number of thumbs, say 5, I could easily represent them as 5 button SkinParts declaratively. However, it's not immediately clear to me how to deal with a variable number of them.
I've studied the HSlider implementation as well as other components and can't find an example that fits this pattern. The closest thing that I can think of is to represent the thumbs as a DataGroup and provide a custom item renderer to render them. Couple that with the general HSlider behaviors that I need to preserve, such as the fairly involved local/global coordinate translations, I don't know whether the approach will work.
Any better ideas? Thanks.

#2 sounds utterly strange to me. How would I utilize the phase id?The code below shows my idea whereas I never validate it in any real projects:
public class MyPhaseListener implements PhaseListener {
     private static final String IDKEY = "PHASEID";
     public static PhaseId getCurrentPhaseId() {
          return (PhaseId) FacesContext.getCurrentInstance().getExternalContext().getRequestMap().get(IDKEY);
     public void beforePhase(PhaseEvent event) {
event.getFacesContext().getExternalContext().getRequestMap().put(IDKEY,event.getPhaseId());
     public PhaseId getPhaseId() {
          return PhaseId.ANY_PHASE;
}You can write your constructor like as:
if (MyPhaseListener.getCurrentPhaseId().equals(PhaseId.RENDER_RESPONSE ) {
     /* create children because this is the first time to create the component */
}

Resizing custom component with fixed aspect ratio in designer

Hello,
   I have a custom component that can have a fixed aspect ratio depending on certain property settings and I would like to know if there is any way to make the component resize in the designer in the same manner that the XCelcius built-in spreadsheet table component does?
It is possible to workaround this somewhat by correcting the width or height of the component after resize, XCelsius sees the change and stores it correctly but sometimes the IDE "remembers" the old value. For example if the component changings its own height programmatically in response to a property and then, while keeping the current component selected, the user resizes the width XCelsius sometimes tries to put the old height back even through it has the correct height saved in the XLF and works fine when compiled.
Is there a way to properly notify XCelsius IDE of a programmatic width/height change in the component itself in response to a property change?
Thanks

The SDK does not support reszing a component using a fixed aspect ratio.
Do not set the width and height of your component directly. You can set the initial size when dropped onto the canvas using the measure function...
A better approach is to let the user size the component on the Xcelsius canvas.
And instead of rendering directly in your add-on, move that code into a child renderer. Then use your aspect ratio to calculate the max size the child renderer can be to fit in the component. Then center your child renderer in the component. That is what I did when I created AnyMap.
|--------------------------------|
| component on canvas            |
|--------------------------------|
| |--------------------------| |
| | centered child renderer | |
| |--------------------------| |
| |                          | |
| |                          | |
| |                          | |
| |--------------------------| |
|--------------------------------|
Regards
Matt

Custom component with javascript source

Hey guys,
this is a bit of a newbie question but..
I am creating a custom component.
instead of embedding javascript directly into the page i would like to seperate the javascript into a js file and just add a link into the script
e.g.
component might output include
<script language="JavaScript" src="script/someJsFile.js"></script>
I would like to keep my .js file jar'ed up in the lib directory
so
trying to work out what src attribute i need cant seem to get it to link
Cheers
Dave

Hi I have the same problem. I need to encode the javascript and image files that I have inside a jar.
if you know how can we do it..could you send me an email: [email protected].so if I find something I'll send to you the solution.
Thanks.
Omar_G

Custom component with drag&drop ?

Hello everyone, I'm new to CQ5.
I'm trying to develop a custom component that allows me to use drag & drop to drag an image from DAM to my component instead of having to insert the image in the component code. How can I do?
Thank you!

Content finder(cf) will list all the assets in dam. Look at OOB image component to get an idea where in you can drag & drop assets from image (cf) into component.
What different you are looking in custom component?
Thanks,
Sham

How to use a flex custom component in an AS3 Class?

Our software team has been developing flash applications using AS3 (via the FlashDevelop IDE and the free Flex SDK). Recently, some members of the team started exploring FlexBuilder and Flex (wow... why did we wait so long?). The problem is that some folks continue to develop using pure Action Script 3 (FlashDevelop) while others are creating custom components in FlexBuilder.
How do the AS3 developers use the Flex Custom components built in FlexBuilder in their AS3 Applications?

SwapnilVJ,
Your suggestions enabled me to make progress, but I'm still having a problem. Based on you suggestion, I learned how to make a swc using Flex Builder. I successfully added the swc to the lib resource in my AS3 project (FlashDevelop). I was able to instantiate one of my new components (code hinting even picked it up from the lib).
When I run my app, my component is not visible. I can trace properties of it and the values are correct. Any thought why I might not be seeing my custom component?
package trainer.games.board.MatchThree {
import flash.display.Sprite;
public class Test extends Sprite{
private var cp:MatchingGameControlPanel; // <<< this is my swc custom component created in Flex
public function Test() {
   cp = new MatchingGameControlPanel();
   cp.visible = true;
   addChild(cp);
   trace("width: ",cp.width); // <<< works and displays valid data for the component.

Writing a custom component with multiple fields.

Does anyone have some pointers on writing a custom component that properly handles multiple input fields?
An example usage might be as follows:
Assume the following java classes:
public interface Address {
//... getters/setters for Address.
public class Company{
Address getAddress(){...};
}The tag usage might be something like the following:
<custom:address value="#{myCompanyBean.address}" />
Extending UIComponentBase I can easily render the output and create all the needed input elements. I'm also able to properly retrieve the submitted values in the decode method. But I'm unsure how to handle the "UpdateModelValues" step. Do I simply over-ride processUpdates, or is there more housekeeping to be done?
Thanks.

I'm guessing that doing addChild inside createChildren causes an infinite loop.
Why aren't you just doing this with MXML? it would be a lot simpler.

URGENT: How to build composite custom component with a valuechangelistener?

Hi there!
I already posted regarding this issue before but unfortunately there wasn't any answer. But I don't think what I am trying to achieve is something unusual.
I am trying to build a composite custom component, that consists of some UISelectOne components and some UIInputText fields. Now I need to fill the combo boxes depending on the selected values of the other boxes. Therefore I added a value change listener. But when it fires I get an index out of bounds exception on the page.
The problem seems to be that the child components are being added twice to the component: Once in the constructor (which I am doing and which is called everytime the component is built) and once as part of the Restore View Phase (which JSF is doing).
So my question is: How and where do I correctly initialize my component's children?
A full code example can be found under http://forum.java.sun.com/thread.jspa?threadID=586301&tstart=150
Thanks a lot in advance!

#2 sounds utterly strange to me. How would I utilize the phase id?The code below shows my idea whereas I never validate it in any real projects:
public class MyPhaseListener implements PhaseListener {
     private static final String IDKEY = "PHASEID";
     public static PhaseId getCurrentPhaseId() {
          return (PhaseId) FacesContext.getCurrentInstance().getExternalContext().getRequestMap().get(IDKEY);
     public void beforePhase(PhaseEvent event) {
event.getFacesContext().getExternalContext().getRequestMap().put(IDKEY,event.getPhaseId());
     public PhaseId getPhaseId() {
          return PhaseId.ANY_PHASE;
}You can write your constructor like as:
if (MyPhaseListener.getCurrentPhaseId().equals(PhaseId.RENDER_RESPONSE ) {
     /* create children because this is the first time to create the component */
}

JSF-Custom Component with EventHandling

Dear All,
I wanted to write my own component with event handling.
This is my requirement:
In my JSP, I'll put my cusom component tag for displaying 10 records and with prev and next buttons. after clicking prev button, i should get previouse 10 records and if i click next button, i should get next 10 records.
so, my component should render
1. 10 records
2. Prev button
3. Next button.
After clicking prev button it should render previouse 10 records and also prev and next button.
I do not know whether it is possible with JSF or not and also i'm not finding any example which explaining above situation.
My jsp should contain only my custom tag like
<mine:listRecords/>
Tag Handler of listRecords tag should render 10 records and prev and also next button. After clicking prev, i should get 10 previouse records and and both the buttons and so on.
advanced thanks,
ram

It is certainly possible to write a component that embeds its own navigation and paging as you describe. On the other hand, you can also assemble this kind of functionality out of a combination of the existing simple components. The "repeater" example illustrates exactly the kind of application you are talking about (and the same techniques will work fine with the standard <h:dataTable> component as well).
Craig

11g Custom Component with SQL IN (val1, val2, ..., valN) query

Hello
I want to use a query with a varchar input parameter in a custom component. The query definition is like this:
<tr>
     <td>QWhereIsAdministrator</td>
     <td>SELECT DISTINCT * FROM FWMTSITE WHERE ADMINISTRATOR IN ( ? )</td>
     <td>UserRoleList varchar</td>
</tr>
I can't pass the correct param value to the query from IdocScript
I tried the following:
<$UserRoleList = "'valA1','valA2'"$>
<$executeService("SITES_WHERE_IS_ADMINISTRATOR")$>
<$UserRoleList = "\'valB1\',\'valB2\'"$>
<$executeService("SITES_WHERE_IS_ADMINISTRATOR")$>
<$UserRoleList = js("'valC1','valC2'")$>
<$executeService("SITES_WHERE_IS_ADMINISTRATOR")$>
<$UserRoleList = xml("'valD1','valD2'")$>
<$executeService("SITES_WHERE_IS_ADMINISTRATOR")$>
<$UserRoleList = url("'valE1','valE2'")$>
<$executeService("SITES_WHERE_IS_ADMINISTRATOR")$>
<$UserRoleList = urlEscape7Bit("'valF1','valF2'")$>
<$executeService("SITES_WHERE_IS_ADMINISTRATOR")$>
No results found, the syntax of the executed query isn't correct. These are the QUERY trace output:
SELECT DISTINCT * FROM FWMTSITE WHERE ADMINISTRATOR IN ( '''valA1'',''valA2''' )[Executed. Returned row(s): false]
SELECT DISTINCT * FROM FWMTSITE WHERE ADMINISTRATOR IN ( '''valB1'',''valB2''' )[Executed. Returned row(s): false]
SELECT DISTINCT * FROM FWMTSITE WHERE ADMINISTRATOR IN ( '\''valC1\'',\''valC2\''' )[Executed. Returned row(s): false]
SELECT DISTINCT * FROM FWMTSITE WHERE ADMINISTRATOR IN ( 'णvalD1ण,णvalD2ण' )[Executed. Returned row(s): false]
SELECT DISTINCT * FROM FWMTSITE WHERE ADMINISTRATOR IN ( '%27valE1%27%2c%27valE2%27' )[Executed. Returned row(s): false]
SELECT DISTINCT * FROM FWMTSITE WHERE ADMINISTRATOR IN ( '%27valF1%27,%27valF2%27' )[Executed. Returned row(s): false]
Thank you for your help.

Change parameter type from varchar to varchar.in in your query definition. Like this:
<tr>
<td>QWhereIsAdministrator</td>
<td>SELECT DISTINCT * FROM FWMTSITE WHERE ADMINISTRATOR IN ( ? )</td>
<td>UserRoleList varchar.in</td>
</tr>In your binder, put a comma separated list in param UserRoleList. In java you can use:
final List<String> someListOfStrings = ...; // your list of strings
final String yourUserRoleListParam = StringUtils.createStringSimple( someListOfStrings );
m_binder.putLocal( "UserRoleList", yourUserRoleListParam );In your case <$UserRoleList = "val1,val2,...,valN"$> should do the job.
regards,
Fabian
Edited by: fscherpe on Mar 24, 2011 7:45 AM (Added iDoc variable; saw you wanted to start query from template, not from Java)

Custom Component with xfaForm input

Hi. I'm trying to create a custom component that takes as one of its inputs either an xfaForm, a Document containing XML, or an xml variable. So my service method has a variable called data which is just an Object. When I pass in the xfaForm I get a class cast exception when casting the object to the XFARepositoryFormInstance class. I even print out the object and it shows me that its an XFARepositoryFormInstance. Do I have to do something special to work with an xfaForm inside the component? It seems like some sort of class loading issue or something.
I'm stuck. Anybody have thoughts?
Thanks,
Bryan

I'm unstuck :) The key to getting this to work is to import the packages you are going to use in your component.xml.
So, for me..I had to add the following:
        com.adobe.idp.workflow.dsc.type
        com.adobe.idp.taskmanager.form
        com.adobe.idp.taskmanager.form.impl
        com.adobe.idp.taskmanager.form.impl.xfa

Flex 4 custom component with children inserted directly into view stack

Similar Messages

Maybe you are looking for