Component dynamically by page interaction

asked 2014-05-11 20:11:02 +0800

nmpallas
115 ● 4
http://nmpallas.wordpress...

updated 2014-05-11 20:12:10 +0800

Hi guys, simple case: A drop down menu with select it initialises an instance of a class.OnSelect then in the interface a number box is created.Now what I want is to create as many textboxes as the number entered there.I can do that with JS by adding an image and then onclick to add a textbox using the client side component but I want this JS created components to have databinding to my Controller bean(javaee7 project). Now I want if the user clicks like 5 times on the + image to bind all this textboxes to an array of values. I tried the use the dynamic tab creation example on the zk sandbox paradigm but there is no indication if the tab box dynamically created is undergoing to some data binding. I was reading that databinding this way doesn't work for ZK, which I hope isn't true.The page is the following:

<window self="@{define(mainContent)}" mode="modal" xmlns:w="client" xmlns:n="native"
        title="Create/Edit Tag definition" apply=""
        visible="@load(bean.mode eq 2 or bean.mode eq 3?true:false)">
        <div class="form form-horizontal">
            <div class="control-group">
                <label sclass="control-label" value="Tag type:" />
                <div class="controls">
                    <listbox mold="select" rows="1" model="@load(bean.tagComponentTypes)" onSelect="@command('assignType')" selectedItem="@bind(bean.selectedType)">
                        <listitem selected="true" value="0" label="[select]" />
                        <template name="model" var="tagType">
                            <listitem value="${tagType}" label="${tagType.descr}" />
                        </template>
                    </listbox>
                </div>
            </div>
            <div class="control-group" visible="@load(bean.typeSet)">
                <label sclass="control-label" value="Number of values:" />
                <div class="controls">
                    <doublespinner value="@bind(bean.entity.numOfValues)" step="1" onChange="@command('createInput')"/>
                </div>
            </div>
            <div class="control-group" visible="@load(bean.entity ne null and bean.entity.numOfValues ne null)">
                <label sclass="control-label"
                    value="Tag description:" />
                <div class="controls">
                    <textbox constraint="no empty" value="@bind(bean.entity.description)" />
                    (*)
                </div>
            </div>
            <div id="firstTagValue" sclass="control-group" visible="@load(bean.entity ne null and bean.entity.numOfValues ne null)">
                <attribute name="onDivAdd">
                    Div div = new Div();
                    div.setSclass("control-group");
                    Label label = new Label("");
                    label.setSclass("control-label");
                    div.appendChild(label);
                    Div controlDiv = new Div();
                    controlDiv.setSclass("controls");
                    Textbox newValue = new Textbox();
                    controlDiv.appendChild(newValue);
                    div.appendChild(controlDiv);
                    div.setParent(firstTagValue);
                </attribute>
                <label value="Tag value:" sclass="control-label" />
                <div class="controls">
                    <textbox constraint="no empty" />
                    <image
                        src="${sessionScope['context']}/css/images/24x24/Add.png"
                        tooltip="true" tooltiptext="Add new value">
                        <attribute name="onClick">
                            Events.postEvent(firstTagValue, new Event("onDivAdd"));
                        </attribute>
                    </image>
                </div>
            </div>
            <div class="" visible="@load(bean.entity ne null and bean.entity.numOfValues ne null)">
                <div class="control-group">
                    <div class="controls">
                        <button mold="trendy" label="cancel"
                            onClick="@command('changeView',mode=1)" />
                        <button mold="trendy" label="save" />
                    </div>
                </div>
            </div>
        </div>
    </window>

Please if you could provide any issue because with JSF to create such stuff dynamic and bind in backing bean attributes is easy. But there is no clear indication the developers guide on how to handle such stuff. This is a major issue for the team since we would like to finalise some interface functionality and present the proof of concept ASAP. Thanks for helping

regards \n\m