Provide Control UI"

From Documentation
(6 intermediate revisions by 3 users not shown)
Line 11: Line 11:
 
<source lang="xml">
 
<source lang="xml">
 
<pivottable id="pivot" />
 
<pivottable id="pivot" />
<checkbox label="Enable grand total for columns" onCheck='pivot.setGrandTotalForColumns(self.isChecked())' />
+
<checkbox label="Enable grand total for columns"  
<checkbox label="Enable grand total for rows" onCheck='pivot.setGrandTotalForRows(self.isChecked())' />
+
onCheck='pivot.setGrandTotalForColumns(self.isChecked())' />
 +
<checkbox label="Enable grand total for rows"  
 +
onCheck='pivot.setGrandTotalForRows(self.isChecked())' />
 
<radiogroup id="dataOrient">
 
<radiogroup id="dataOrient">
 
Data field orientation:
 
Data field orientation:
<radio id="colOrient" label="column" onCheck='pivot.setDataFieldOrient("column")' />
+
<radio id="colOrient" label="column"  
<radio id="rowOrient" label="row" onCheck='pivot.setDataFieldOrient("row")' />
+
onCheck='pivot.setDataFieldOrient("column")' />
 +
<radio id="rowOrient" label="row"  
 +
onCheck='pivot.setDataFieldOrient("row")' />
 
</radiogroup>
 
</radiogroup>
 
</source>
 
</source>
Line 22: Line 26:
  
 
&nbsp;
 
&nbsp;
 +
 
==Use PivotFieldControl to handle field setting==
 
==Use PivotFieldControl to handle field setting==
  
Line 29: Line 34:
 
<source lang="xml">
 
<source lang="xml">
 
<pivottable id="pivot" />
 
<pivottable id="pivot" />
<pivot-field-control id="pfc" height="300px" /><!-- Remember to specify height -->
+
<pivot-field-control id="pfc" height="300px" /
 +
><!-- Remember to specify height -->
 
</source>
 
</source>
  
Line 35: Line 41:
 
<source lang="java">
 
<source lang="java">
 
public class PivotController extends GenericForwardComposer {
 
public class PivotController extends GenericForwardComposer {
private Pivottable pivot;
+
    private Pivottable pivot;
private TabularPivotModel _model;
+
    private TabularPivotModel _model;
private PivotFieldControl pfc;
+
    private PivotFieldControl pfc;
+
   
public void doAfterCompose(Component comp) throws Exception {
+
    public void doAfterCompose(Component comp) throws Exception {
super.doAfterCompose(comp);
+
        super.doAfterCompose(comp);
+
       
_model = MyPivotModelFactory.getModel(); // construct your pivot model
+
        _model = MyPivotModelFactory.getModel(); // construct your pivot model
pivot.setModel(_model);
+
        pivot.setModel(_model);
pfc.setModel(_model);
+
        pfc.setModel(_model);
+
       
}
+
    }
 
}
 
}
 
</source>
 
</source>
Line 69: Line 75:
 
You can specify layout on PivotFieldControl:
 
You can specify layout on PivotFieldControl:
 
<source lang="xml">
 
<source lang="xml">
<pivot-field-control height="300px" width="300px" layout="square" /><!-- square is the default layout -->
+
<pivot-field-control height="300px" width="300px" layout="square" />
 +
<!-- square is the default layout -->
 
<pivot-field-control height="600px" width="150px" layout="vertical" />
 
<pivot-field-control height="600px" width="150px" layout="vertical" />
 
<pivot-field-control height="150px" height="600px" layout="horizontal" />
 
<pivot-field-control height="150px" height="600px" layout="horizontal" />
Line 90: Line 97:
 
<source lang="xml">
 
<source lang="xml">
 
<pivot-field-control id="pfc" height="300px">
 
<pivot-field-control id="pfc" height="300px">
<custom-attributes rowTitle="My Rows:" />
+
<custom-attributes rowListTitle="My Rows:" />
 
</pivot-field-control>
 
</pivot-field-control>
 
</source>
 
</source>
Line 96: Line 103:
 
Or, to set the label by label files, you need to add a prefix <tt>pivot.fieldControl.</tt> to the key:
 
Or, to set the label by label files, you need to add a prefix <tt>pivot.fieldControl.</tt> to the key:
  
i3-label.properties
+
zk-label.properties<reference>For more information, please  refer to [[ZK Developer's Reference/Internationalization/Labels|ZK Developer's Reference: Labels]].</reference>
 +
 
 
<source lang="perl">
 
<source lang="perl">
pivot.fieldControl.rowTitle=My Rows
+
pivot.fieldControl.rowListTitle=My Rows
 
</source>
 
</source>
  
Line 107: Line 115:
 
All the available keys are defined as the following:
 
All the available keys are defined as the following:
  
[[Image: ZKPivotEsn_pfc_control_05.png]]
+
[[Image:ZKPivotEsn_pfc_control_05.png]]
  
&nbsp;
+
<blockquote>
 +
----
 +
<references/>
 +
</blockquote>
  
 
==Version History==
 
==Version History==

Revision as of 09:35, 15 July 2014


You can change page, open/close node, or resize columns on the Pivottable component itself. However, for UI flexibility, the component itself does not provide control unit for other APIs, like to change pivot fields, toggle data field orientation, or sort the headers.

Simple controls

The following properties on Pivottable are very straightforward to wire up:

  • data field orientation
  • whether to show row/column grand totals

For example,

<pivottable id="pivot" />
<checkbox label="Enable grand total for columns" 
	onCheck='pivot.setGrandTotalForColumns(self.isChecked())' />
<checkbox label="Enable grand total for rows" 
	onCheck='pivot.setGrandTotalForRows(self.isChecked())' />
<radiogroup id="dataOrient">
	Data field orientation:
	<radio id="colOrient" label="column" 
		onCheck='pivot.setDataFieldOrient("column")' />
	<radio id="rowOrient" label="row" 
		onCheck='pivot.setDataFieldOrient("row")' />
</radiogroup>


 

Use PivotFieldControl to handle field setting

Compared to the others, field setting UI is much trickier to compose. Thus we have provided a macro component to simply the work.

ZUL:

<pivottable id="pivot" />
<pivot-field-control id="pfc" height="300px" /
><!-- Remember to specify height -->

Composer:

public class PivotController extends GenericForwardComposer {
    private Pivottable pivot;
    private TabularPivotModel _model;
    private PivotFieldControl pfc;
    
    public void doAfterCompose(Component comp) throws Exception {
        super.doAfterCompose(comp);
        
        _model = MyPivotModelFactory.getModel(); // construct your pivot model
        pivot.setModel(_model);
        pfc.setModel(_model);
        
    }
}

It will look like:

ZKPivotEsn pfc control 01.png

The fields in the four area are draggable. You can move them to other pools, so the model and pivot table will be updated accordingly.

Sort options are available on row and column fields.

ZKPivotEsn pfc control 02.png


 

Customize PivotFieldControl

Layout

You can specify layout on PivotFieldControl:

<pivot-field-control height="300px" width="300px" layout="square" />
<!-- square is the default layout -->
<pivot-field-control height="600px" width="150px" layout="vertical" />
<pivot-field-control height="150px" height="600px" layout="horizontal" />

vertical:

ZKPivotEsn pfc control 03 v.png

horizontal:

ZKPivotEsn pfc control 03 h.png

Labels

You can customize labels appeared in the macro, either by custom attributes or label files (which affect all the PivotFieldControl components in the application).

Setting by custom attributes, you shall do like the following:

ZUL

<pivot-field-control id="pfc" height="300px">
	<custom-attributes rowListTitle="My Rows:" />
</pivot-field-control>

Or, to set the label by label files, you need to add a prefix pivot.fieldControl. to the key:

zk-label.properties<reference>For more information, please refer to ZK Developer's Reference: Labels.</reference>

pivot.fieldControl.rowListTitle=My Rows

Then you shall see the label is changed:

ZKPivotEsn pfc control 04.png

All the available keys are defined as the following:

ZKPivotEsn pfc control 05.png


Version History

Last Update : 2014/07/15


Version Date Content
     



Last Update : 2014/07/15

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.