|
|
Line 1: |
Line 1: |
− | {{ZKDevelopersReferencePageHeader}}
| |
− | This section introduce the usage of ZK auto sizing APIs, all of these can apply to following components :
| |
− | {| class="wikitable"
| |
− | |-
| |
− | |
| |
− | *[[ZK Component Reference/Data/Listbox|Listbox]]
| |
− | **[[ZK Component Reference/Data/Listbox/Listhead|Listhead]]
| |
− | **[[ZK Component Reference/Data/Listbox/Listheader|Listheader]]
| |
− | ||
| |
− | *[[ZK Component Reference/Data/Grid|Grid]]
| |
− | **[[ZK Component Reference/Data/Grid/Columns|Columns]]
| |
− | **[[ZK Component Reference/Data/Grid/Column|Column]]
| |
− | ||
| |
− | *[[ZK Component Reference/Data/Tree|Tree]]
| |
− | **[[ZK Component Reference/Data/Tree/Treecols|Treecols]]
| |
− | **[[ZK Component Reference/Data/Tree/Treecol|Treecol]]
| |
− | |}
| |
− | =Use Cases=
| |
− | Here we take grid with column as an example, showing some use case about how to use the right way to display the data.
| |
− |
| |
− | ==Data Length : Short ==
| |
− | <syntax lang='xml' high='12,13,14,15,16'>
| |
− | <zk>
| |
− | <zscript><![CDATA[
| |
− | String[] msgs2 = {
| |
− | "Application Developer's Perspective",
| |
− | "Server+client Fusion architecture",
| |
− | "Component Developer's Perspective",
| |
− | "Execution Flow of Loading a Page",
| |
− | "Execution Flow of Serving an Ajax Request",
| |
− | "When to Send an Ajax Request"
| |
− | };
| |
− | ]]></zscript>
| |
− | <listbox width="800px">
| |
− | <listhead>
| |
− | <listheader label="Product" />
| |
− | <listheader label="Description" />
| |
− | <listheader label="Comment" />
| |
− | </listhead>
| |
− | <listitem>
| |
− | <listcell><label value="${msgs2[0]}"></label></listcell>
| |
− | <listcell><label value="${msgs2[1]}"></label></listcell>
| |
− | <listcell><label value="${msgs2[2]}"></label></listcell>
| |
− | </listitem>
| |
− | <listitem>
| |
− | <listcell><label value="${msgs2[3]}"></label></listcell>
| |
− | <listcell><label value="${msgs2[4]}"></label></listcell>
| |
− | <listcell><label value="${msgs2[5]}"></label></listcell>
| |
− | </listitem>
| |
− | </listbox>
| |
− | <zk>
| |
− | </syntax>
| |
− |
| |
− | *'''Default''' : Data component will show the data correctly, with no width specification. (the exactly width of columns are rendered by browser automatically)
| |
− |
| |
− | [[File:ZK5DevRef_GridColumn_Default.png]]
| |
− |
| |
− | ===Proportional Width===
| |
− |
| |
− | Sure you can use the '''hflex''' we have mentioned in [[ZK Developer's Reference/UI Patterns/Hflex and Vflex#Flexibility_and_Resizing|previous section]].
| |
− | <syntax lang='xml' start="13">
| |
− | <listhead>
| |
− | <listheader label="Product" hflex="1"/>
| |
− | <listheader label="Description" hflex="2"/>
| |
− | <listheader label="Comment" hflex="1" />
| |
− | </listhead>
| |
− | </syntax>
| |
− | [[File:ZK5DevRef_GridColumn_hflex.png]]
| |
− |
| |
− | ===Minimum Flexibility===
| |
− | In the cases of '''hflex=min''', if you your content fill the whole data component, you can use '''span=true'''
| |
− |
| |
− | <syntax lang='xml' start="2" high='5,8'>
| |
− | <zscript><![CDATA[
| |
− | String[] msgs2 = {
| |
− | "Application Developer's Perspective",
| |
− | "Very Short Text",
| |
− | "Server+client Fusion architecture",
| |
− | "Execution Flow of Serving an Ajax Request",
| |
− | "Very Short Text",
| |
− | "When to Send an Ajax Request (Addition Text )"
| |
− | };
| |
− | ]]></zscript>
| |
− | </syntax>
| |
− | *Origional
| |
− | <syntax lang='xml' start="13">
| |
− | <listhead>
| |
− | <listheader label="Product" hflex="min"/>
| |
− | <listheader label="Description" hflex="min"/>
| |
− | <listheader label="Comment" hflex="min" />
| |
− | </listhead>
| |
− | </syntax>
| |
− | [[File:ZK5DevRef_GridColumn_nospan.png]]
| |
− |
| |
− |
| |
− | *Set '''span=true''' - Proportional allocating the blank width
| |
− | <syntax lang='xml' start="12" high='12'>
| |
− | <listbox width="800px" span='true'>
| |
− | <listhead>
| |
− | <listheader label="Product" hflex="min"/>
| |
− | <listheader label="Description" hflex="min"/>
| |
− | <listheader label="Comment" hflex="min" />
| |
− | </listhead>
| |
− | </syntax>
| |
− | [[File:ZK5DevRef_GridColumn_span.png]]
| |
− |
| |
− | ==Data Length : Long ==
| |
− | <syntax lang='xml' start="2" high='5,8'>
| |
− | <zscript><![CDATA[
| |
− | String[] msgs2 = {
| |
− | "Application Developer's Perspective",
| |
− | "Very Long Long Long Long Long Long Long Long Long Long Text",
| |
− | "Server+client Fusion architecture",
| |
− | "Execution Flow of Serving an Ajax Request",
| |
− | "Very Long Long Long Long Long Long Long Long Long Long Text",
| |
− | "When to Send an Ajax Request"
| |
− | };
| |
− | ]]></zscript>
| |
− | </syntax>
| |
− | *'''Default''' : ZK data component will wrap the text to fit the width of column.
| |
− | [[File:ZK5DevRef_GridColumn_DefaultLong.png]]
| |
− |
| |
− | ===Specify Width===
| |
− | This is the simple way to make the text not be wrapped, but it's hard to give the proper width.
| |
− |
| |
− | <syntax lang='xml' start="13" high='14,15,16'>
| |
− | <listhead>
| |
− | <listheader label="Product" width="250px"/>
| |
− | <listheader label="Description" width="470px"/>
| |
− | <listheader label="Comment" width="280px" />
| |
− | </listhead>
| |
− | </syntax>
| |
− | [[File:ZK5DevRef_GridColumn_DefaultWidth.png]]
| |
− |
| |
− | ===Minimum Flexibility===
| |
− | *When the '''hflex=min''' were set, ZK will calculate the length of content and give width to the columns.
| |
− | *'''<span style="color:red">Beware</span>''' : Remember setting every column '''hflex''' or '''width''', or they would disappear because not enough space.
| |
− | <syntax lang='xml' start="13" high='14,15,16'>
| |
− | <listhead>
| |
− | <listheader label="Product" hflex="min" />
| |
− | <listheader label="Description" hflex="min" />
| |
− | <listheader label="Comment" hflex="min" />
| |
− | </listhead>
| |
− | </syntax>
| |
− | [[File:ZK5DevRef_GridColumn_LongHflex.png]]
| |
− |
| |
− | ===Mixed Flexibility and width===
| |
− | ====Width + Hflex proportion====
| |
− | <syntax lang='xml' start="13" high='14,15,16'>
| |
− | <listhead>
| |
− | <listheader label="Product" width="120px" />
| |
− | <listheader label="Description" hflex="2" />
| |
− | <listheader label="Comment" hflex="1" />
| |
− | </listhead>
| |
− | </syntax>
| |
− | [[File:ZK5DevRef_GridColumn_MixhflexnumWidth.png]]
| |
− |
| |
− | ====Width + Hflex min====
| |
− | <syntax lang='xml' start="13" high='14,15,16'>
| |
− | <listhead>
| |
− | <listheader label="Product" width="150px" />
| |
− | <listheader label="Description" hflex="min" />
| |
− | <listheader label="Comment" hflex="min" />
| |
− | </listhead>
| |
− | </syntax>
| |
− | [[File:ZK5DevRef_GridColumn_MixhflexMinWidth.png]]
| |
− |
| |
− | ====Width + Hflex min + Hflex proportion====
| |
− | <syntax lang='xml' start="13" high='14,15,16'>
| |
− | <listhead>
| |
− | <listheader label="Product" width="120px" />
| |
− | <listheader label="Description" hflex="min" />
| |
− | <listheader label="Comment" hflex="1" />
| |
− | </listhead>
| |
− | </syntax>
| |
− | [[File:ZK5DevRef_GridColumn_MixhflAllh.png]]
| |
− |
| |
| ==Data Length : Dynamic == | | ==Data Length : Dynamic == |
| If users can't control the data size, that means, you should take both [[#Data_Length_:_Short|short data]] and [[#Data Length : Long|long data]] situation into consideration. | | If users can't control the data size, that means, you should take both [[#Data_Length_:_Short|short data]] and [[#Data Length : Long|long data]] situation into consideration. |
| | | |
| Now we have several attributes, rules, and situations, please choose the right solution for your case. | | Now we have several attributes, rules, and situations, please choose the right solution for your case. |
| + | {| | cellspacing="1" cellpadding="5" border="1" |
| + | ! Specification |
| + | !! width="150px" | Span=true |
| + | !! width="150px" | Hflex proportion |
| + | !! width="150px" | Hflex=min |
| + | !! width="150px" | Specific Width |
| + | |- |
| + | | Fill whole Grid |
| + | | colspan="2"| One of below attribute was set |
| + | || X |
| + | || ! |
| + | |- |
| + | | No Scrollbar Grid |
| + | || |
| + | || V |
| + | || X |
| + | || ! |
| + | |- |
| + | | No Content Wrapping Column |
| + | || |
| + | || |
| + | || V |
| + | || ! |
| + | |- |
| + | | Fill whole Grid + No Scrollbar Grid |
| + | || |
| + | || V |
| + | || X |
| + | || ! |
| + | |- |
| + | | Fill whole Grid + No Content Wrapping |
| | | |
− | =API Cheat Sheet=
| + | || V |
− | | + | | colspan="3"| All Column Component Should have one of these attributes |
− | =Version History=
| |
− | {{LastUpdated}}
| |
− | {| border='1px' | width="100%"
| |
− | ! Version !! Date !! Content
| |
− | |-
| |
− | | 5.0.6
| |
− | | Feb, 2011
| |
− | | New specification of auto-sizing features | |
| |} | | |} |
| | | |
− | {{ZKDevelopersReferencePageFooter}}
| + | *'''(Blank)''' : Doesn't matter |
| + | * '''V''' : Must set |
| + | * '''X''' : Must not set |
| + | * '''!''' : Acceptable but something need notice. |