Difference between revisions of "Template:ItemRenderer"

From Documentation
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
  
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. Remember to escape HTML characters on your own.
+
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. (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.
+
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);
    }
}