Creating a custom reusable filtering interface with macro component: An Example"
m (→How it works) |
m (→How it works) |
||
| Line 21: | Line 21: | ||
= How it works = | = How it works = | ||
| − | User Interface | + | == User Interface == |
* insert FilterConfig macro component in the list header, and handle events to perform filtering | * insert FilterConfig macro component in the list header, and handle events to perform filtering | ||
<source lang="xml"> | <source lang="xml"> | ||
| Line 34: | Line 34: | ||
* provides a default template for filter config ui, replaceable by the developer | * provides a default template for filter config ui, replaceable by the developer | ||
| − | Application | + | == Application == |
* retrieves available filter models from a service | * retrieves available filter models from a service | ||
* renders filter component based on the filter models retrieved | * renders filter component based on the filter models retrieved | ||
| Line 41: | Line 41: | ||
* replace listmodel items to update the UI | * replace listmodel items to update the UI | ||
| − | Service (keep brief, provide memory implementation, it should be easy to create database queries based on filter configuration) | + | == Service == |
| + | |||
| + | (keep brief, provide memory implementation, it should be easy to create database queries based on filter configuration) | ||
* provides available filter options | * provides available filter options | ||
* filter data based on filter configuration | * filter data based on filter configuration | ||
Revision as of 09:48, 10 February 2015
This page is under construction, so we cannot guarantee the accuracy of the content!
Neil Lee, Engineer, Potix Corporation
February xx, 2015
ZK 7.0.4
Introduction
Filtering commonly augments data displaying functionality. Users can create multiple views of a single data set based on different filter criteria. As data sets become larger and larger, filtering also helps increase performance and improve usability by reducing the information shown. Take Excel for example. After filtering is enabled, each column header will include a button, when clicked, displays the filtering configuration dialog box for the respective column. Users can then edit the condition that the data in that column must satisfy in order to be included in the final display. In this smalltalk, I am going to create a user interface similar to Excel for collecting filtering criteria, and use that information in an application to perform the actual filtering operation.
Live Demo
As an example, law enforcement agencies can use filtering to find trends in criminal activities. For concreteness, criminal records were taken from Sacramento in 2006 [1], which consists of 7,584 offenses. It is also interesting to mark illegal occurrences on google maps.
In the demo, I use a listbox to display the criminal records in a table. Each column heading contains a button with a filter icon. That button, together with the popup dialog box, is built as a macro component.
How it works
User Interface
- insert FilterConfig macro component in the list header, and handle events to perform filtering
<listheader>
<filterConfig
model="..."
onFilterChanged="..."
onFilterCleared="...".../>
</listheader>
- provides a default template for filter config ui, replaceable by the developer
Application
- retrieves available filter models from a service
- renders filter component based on the filter models retrieved
- listens to onFilterChanged and onFilterCleared events
- calls service to filter data based on user choices
- replace listmodel items to update the UI
Service
(keep brief, provide memory implementation, it should be easy to create database queries based on filter configuration)
- provides available filter options
- filter data based on filter configuration
Summary
Download
References
- ↑ Data source: spatialkey sample
Comments
| Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License. |