Component dynamically by page interaction

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

nmpallas gravatar image nmpallas
115 4

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}" />
            <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 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 id="firstTagValue" sclass="control-group" visible="@load(bean.entity ne null and bean.entity.numOfValues ne null)">
                <attribute name="onDivAdd">
                    Div div = new Div();
                    Label label = new Label("");
                    Div controlDiv = new Div();
                    Textbox newValue = new Textbox();
                <label value="Tag value:" sclass="control-label" />
                <div class="controls">
                    <textbox constraint="no empty" />
                        tooltip="true" tooltiptext="Add new value">
                        <attribute name="onClick">
                            Events.postEvent(firstTagValue, new Event("onDivAdd"));
            <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" />

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

delete flag offensive retag edit


I am open to suggestions??...

nmpallas ( 2014-05-12 21:17:57 +0800 )edit

3 Answers

Sort by ยป oldest newest most voted

answered 2014-05-14 15:20:41 +0800

nmpallas gravatar image nmpallas
115 4

Hi thanks, I already tried that. The problem is that I want the user to be able to define the elements there dynamically with an add button. The problem is the databinding of the value entered afterwards to what is send to the server. I did what you suggest. But if the user later on add a value by clicking the + icon how you do data binding dynamically of the UI component using the zk javascript engine? That's the question that needs to be answered. For example I know that if in php you declare the name lalakis[] to all the values of stuff input type="text" it can store all the elements in an array in your php code. I was hoping to have something similar as functionality.

link publish delete flag offensive edit

answered 2014-05-13 07:31:52 +0800

sjoshi gravatar image sjoshi flag of India
3493 1 8

I think you can use onChange() event of Number Box in OnChange event call a Method in Your Java class initialize the List with Number entered into the Number-box and rendered List i ZUL.With the help of NotifyChange.

link publish delete flag offensive edit

answered 2014-05-17 07:52:59 +0800

nmpallas gravatar image nmpallas
115 4

Since no answer was given I enabled the binding to the backing bean. I can't add on demand but ask the user to predefine the number of textboxes and then the trick with NotifyChange was already in place takes over re structuring the page. The fact that I am passing page rendering stuff on the server side I don't like but c'est la vie!

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

1 follower



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

Seen: 46 times

Last updated: May 17 '14

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More