Dynamic creation of components

Question

Hi,
I am implementing simple property editor. For each property component can be either inputText, selectOneMenu or checkbox depending on the property type. I've tried to do that using rendered attribute.
      <h:panelGroup style="float:none;">
        <h:dataTable id="opParameters" value="#{jobBean.hermesOperationalParameters}" var="opParameter"
                     rowClasses="tblRow">
          <h:column>
            <h:outputLabel value="#{opParameter.displayName}"/>
          </h:column>
          <h:column>
            <h:selectOneMenu value="#{jobBean.solverTypeStr}"
                             rendered="#{opParameter.name == 'listValues'}">
              <a4j:support id="rerenderSolverParameters" event="onchange" reRender="solverParameters"/>
              <f:selectItems value="#{jobBean.solverTypes}"/>
            </h:selectOneMenu>
            <h:inputText value="#{jobBean.operationalParameters[opParameter.name]}"
                         rendered="#{opParameter.name != 'listValues'}"/>
          </h:column>
          <h:column>
            <ui:decorate template="/templates/tooltip.xhtml">
              <ui:define name="tooltip">
                <h:outputText value="#{opParameter.desc}" escape="false"/>
                <br/>
                <font size="-2"><i><h:outputText value="#{opParameter.name}"/></i></font>
              </ui:define>
            </ui:decorate>
          </h:column>
        </h:dataTable>But all components are still created in the component tree and interfering with each other because components are bound to the same values in the backing bean. The I've tried to use <c:choose> that didn't work for me as well. Finally I decided to bind panelGrid and create all components on the fly.
        <h:panelGrid columns="3" binding="#{jobBean.opParametersPanelGrid}"/>My concern is that too much presentation is being put into backing bean. I would like to keep it in the JSF code. Any suggestions? I use RichFaces, Facelets and JSF RI 1.2. Thanks
Tomas
Edited by: Cvirko on Mar 27, 2008 5:59 PM
Edited by: Cvirko on Mar 27, 2008 6:16 PM

Answer 1

Here is one possible way to create components, though there
might be more elegant solutions.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Script>
<![CDATA[
import mx.events.ListEvent;
import mx.controls.CheckBox;
import mx.controls.Button;
import mx.controls.List;
import mx.collections.ArrayCollection;
private var newList:List = new List();
private var newButton:Button = new Button();
private var newCheckBox:CheckBox = new CheckBox();
[Bindable] private var componentsAC:ArrayCollection = new
ArrayCollection([
{compType:newList, compName:'List'},
{compType:newButton, compName:'Button'},
{compType:newCheckBox, compName:'CheckBox'}]);
private function addComponent(evt:Event):void {
myVBox.addChild(new
evt.currentTarget.selectedItem.compType.constructor);
]]>
</mx:Script>
<mx:List x="10" y="10" height="222"
click="addComponent(event)" dataProvider="{componentsAC}"
labelField="compName"></mx:List>
<mx:VBox x="180" y="10" height="100%" id="myVBox">
</mx:VBox>
</mx:Application>
I hope this helps.
Vygo