Filter"
m (→How it Works) |
m (→Center) |
||
Line 35: | Line 35: | ||
====Center==== | ====Center==== | ||
− | The center region is responsible for | + | The center region is responsible for showing the filtered result by constraint, by using Listbox component. |
* Default implementation: | * Default implementation: | ||
− | <source lang="xml"> | + | <source lang="xml" high="3"> |
<div id="center" vflex="true"> | <div id="center" vflex="true"> | ||
<custom-attributes org.zkoss.zul.listbox.rod="true"/> | <custom-attributes org.zkoss.zul.listbox.rod="true"/> | ||
− | <listbox | + | <listbox model="@bind(vm.filteredByConstraintModel)" |
+ | checkmark="true" id="listbox" vflex="true"> | ||
<template name="model"> | <template name="model"> | ||
<listitem> | <listitem> |
Revision as of 09:15, 30 October 2013
Sam Chuang, Engineer, Potix Corporation
October 30, 2013
ZK 6.5 and later
Introduction
ZK give developer the power of creating advanced component, extending the component set for your application. In this article, I will create a re-usable component: filterpopup. It's designed for working with collection component that needs filter functionality. For instance, the filterpopup component can be used with Grid, user can use it to filter out huge amount of data, search the required information quickly and intuitively.
File:ZK Filter Firstlook Default.jpg
Besides, it's also designed for highly customizable, able to integrate with different type of constrain, seamlessly works with different type of data type.
File:ZK Filter Firstlook Custom.jpg
How it Works
The Filterpopup component is composed from three regions.
Regions
Top
The top region is responsible for configuration settings. The default implementation includes:
- Textbox: used for input constraint to perform filtering command.
- Checkbox: to perform select all command.
Default implementation:
<div id="top" vflex="min">
<vlayout>
<textbox value="@bind(vm.constraint)" instant="true"
onChanging="@command('performFiltering', constraint=event.value)"></textbox>
<checkbox checked="@load(vm.selectAll)" label="(Select All)"
onCheck="@command('selectAll', checked=event.checked)"></checkbox>
</vlayout>
</div>
Center
The center region is responsible for showing the filtered result by constraint, by using Listbox component.
- Default implementation:
<div id="center" vflex="true">
<custom-attributes org.zkoss.zul.listbox.rod="true"/>
<listbox model="@bind(vm.filteredByConstraintModel)"
checkmark="true" id="listbox" vflex="true">
<template name="model">
<listitem>
<listcell label="@load(each)" />
</listitem>
</template>
</listbox>
</div>
Bottom
The bottom region is responsible for commands, such as OK button, Cancel button.
- Default implementation:
<div id="bottom" vflex="min">
<hbox pack="end" width="100%" spacing="5px">
<button onClick="@command('ok')" label="OK" mold="trendy" width="75px"></button>
<button onClick="@command('cancel')" label="Cancel" mold="trendy" width="75px"></button>
</hbox>
</div>
Filter by Constraint
The default constraint type is String, using Textbox component's onChanging event to perform filtering task.
Custom Constraint
Selection
Commands
- OK button
- Cancel button