Difference between revisions of "Template:ItemRenderer"
From Documentation
(4 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
− | Implementing your own (<javadoc type="interface">org.zkoss.zul.ItemRenderer</javadoc>) can customize how a component renders data in a browser. (For the concepts about component, model, and renderer, please refer to [[ZK_Developer's_Reference/MVC/Model/List_Model#Model-driven_Display|the Model-driven Display section]]). Notice that <code>ItemRenderer</code> should return an HTML snippet that is different from <javadoc type="interface">org.zkoss.zul.ListitemRenderer</javadoc> that creates components. | + | For those components that have no child components e.g. [[ZK%20Component%20Reference/Input/Chosenbox| Chosenbox]], [[ZK%20Component%20Reference/Essential%20Components/Selectbox| Selectbox]], [[ZK%20Component%20Reference/Input/Cascader| Cascader]], [[ZK%20Component%20Reference/Input/Searchbox| Searchbox]], their built-in renderers will directly wrap your data into an HTML snippet. Hence if your model data contains [https://www.w3.org/International/questions/qa-escapes#use those characters that need to be escaped] like <code><</code> <code>></code> <code>&</code>, you must escape them. You can call ZK's [https://www.zkoss.org/javadoc/latest/zk/org/zkoss/xml/XMLs.html#escapeXML-java.lang.String- XMLs.escapeXML()] or [https://www.zkoss.org/javadoc/latest/zk/org/zkoss/lang/Strings.html#escapeJavaScript-java.lang.String- Strings.escapeJavaScript()]. |
+ | |||
+ | Implementing your own (<javadoc type="interface">org.zkoss.zul.ItemRenderer</javadoc>) can customize how a component renders data in a browser without javascript. (For the concepts about component, model, and renderer, please refer to [[ZK_Developer's_Reference/MVC/Model/List_Model#Model-driven_Display|the Model-driven Display section]]). Notice that <code>ItemRenderer</code> should return an HTML snippet that is different from <javadoc type="interface">org.zkoss.zul.ListitemRenderer</javadoc> that creates components. | ||
'''Render an item with a tooltip''' | '''Render an item with a tooltip''' |
Latest revision as of 07:28, 8 May 2023
For those components that have no child components e.g. Chosenbox, Selectbox, Cascader, Searchbox, their built-in renderers will directly wrap your data into an HTML snippet. Hence if your model data contains those characters that need to be escaped like <
>
&
, you must escape them. You can call ZK's XMLs.escapeXML() or Strings.escapeJavaScript().
Implementing your own (ItemRenderer) can customize how a component renders data in a browser without javascript. (For the concepts about component, model, and renderer, please refer to the Model-driven Display section). Notice that ItemRenderer
should return an HTML snippet that is different from ListitemRenderer that creates components.
Render an item with a tooltip
public class TooltipRenderer implements ItemRenderer {
@Override
public String render(Component owner, Object data, int index) throws Exception {
return String.format("<span title=\"%s\" style=\"width: 100%%;display: inline-block;\">%s</span>", data, data);
}
}