placeholder attribute in combobox,textbox,doublebox in zk - placeholder

Question

how to add contents in placeholder like static with dynamic contents.
e.g.:
<doublebox maxlength="10"
mandatory="#load(something.valueRequired)"
width="250px"
tooltiptext="Enter Number"
value="#bind(something.infoNumericValue)"
placeholder="#load(something.infoData);">
</doublebox>
So, please tell me how to add
enter with dynamic content(#load(something.infoData))
and it is shown like "enter your something" in placeholder.

Answer 1

You can use EL expressions for this:-
placeholder="Enter ${something.infoData}"
anything you write in EL expression needs to be loaded previously into zul.So make sure your something is already loaded

Answer 2

Found this gem buried in the ZK MVVM EL documentation.
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>
...
<doublebox placeholder="#load(c:cat('enter your ',something.infoData))"/>
First we load in the core ZK tag library, then we can use the cat function to concatenate your static text with your dynamically loaded text.

Answer 3

EL (${}) and MVVM (#) expressions cannot be mixed with text literals. So, the even following don't work:
<label value="Literal ${expression}"/>
<label value="Literal #load(data)"/>
As the whole thing is not an expression, ZK interprets none of it as an expression and it is just text. Note I'm using a label here to make the point, but this applies to anywhere you use these expressions, including in the placeholder.
My recommendation would be to move this back into your view model:
<doublebox placeholder="#load(vm.placeholder)"/>
...
public MyViewModel {
private Something something;
public String getPlaceholder() {
return "Enter a " + something.getInfoData();
}
}

Answer 4

Answer given By
khcyt's profile
<zk> <zscript>
class A
{
public A(String s, Long v, Boolean is_group) { s_= s; v_= v; is_group_= is_group; }
public String getLabel() { return s_; }
public void setLabel(String s) { s_=s; }
public Boolean isGroup() { return is_group_; }
public Long getValue() { return v_; }
public String getPlaceholder() { return "Please type some text"; }
String s_= null;
Long v_= null;
Boolean is_group_= null;
}
lm.add(new A("Today", 1L, Boolean.TRUE));
lm.add(new A("RE: Bandbox Autocomplete Problem", 2L, Boolean.FALSE));
lm.add(new A("", 3L, Boolean.FALSE));
lm.add(new A("RE: FileUpload", 4L, Boolean.FALSE));
lm.add(new A("", 5L, Boolean.FALSE));
lm.add(new A("Yesterday", 10L, Boolean.TRUE));
lm.add(new A("", 11L, Boolean.FALSE));
lm.add(new A("RE: SelectedItemConverter Question' ite", 12L, Boolean.FALSE));
lm.add(new A("Last week", 100L, Boolean.TRUE));
lm.add(new A("RE: Times_Series Chart help", 101L, Boolean.FALSE));
lm.add(new A("", 102L, Boolean.FALSE));
class VM
{
public ListModel getListModel() { return lm; }
}
]]></zscript>
<window id="win" title="Window ZK6 dynamic template" border="normal" width="600px"
apply="org.zkoss.bind.BindComposer" viewModel="#id('vm') #init('VM')" >
<listbox model="#bind(vm.listModel) #template(each.isGroup() ? 'group_model' : 'item_model')">
<listhead>
<listheader hflex="3" label="Column 1"/>
<listheader hflex="1" label="Column 2"/>
</listhead>
<template name="group_model">
<listgroup open="true" label="#load(each.label)"/>
</template>
<template name="item_model">
<listitem vflex="1">
<listcell>
<textbox hflex="1" placeholder="#init(each.placeholder)" value="#bind(each.label)"/>
</listcell>
<listcell>
<label value="#load(each.value)"/>
</listcell>
</listitem>
</template>
</listbox>
</window>
</zk>