Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Fun with The DHTMLX Touch: Building a Simple-Yet-Filter-Capable List

DZone's Guide to

Fun with The DHTMLX Touch: Building a Simple-Yet-Filter-Capable List

· Mobile Zone
Free Resource

Get gorgeous, multi-touch charts for your iOS application with just a few lines of code.

In this tutorial I will describe how to build a list view with real-time filtering using DHTMLX Touch, a JavaScript HTML5 mobile framework. List view is a popular UI element and you must often do this task when you develop mobile web interfaces. I’ll also explain how to bind the list data to the server-side database.

The DHTMLX Touch is compatible with the main Webkit-based browsers so the list view will work on different mobile platforms (iOs, Android, BlackBerry). Let’s get started.

First, download the latest package of the DHTMLX Touch library. The licensing allows you to use the library free of charge in both commercial and open source apps (so don’t worry about pricing).

The nuts-and-bolts of the DHTMLX Touch library:

  • required code files: touch.js, touch.css
  • contents: various UI master components (list, grid, form etc.) and controls (button, checkbox, select etc.) + special helper libraries
  • the common object constructor for components (controls) is dhx.ui({})
  • the type of component (control) is set by the property view

 

To start, create 2 elements on a page: 1) a toolbar with a filtering input and 2) a list. Add this code in the HTML file:

dhx.ui({
   	rows:[
                	{view:"toolbar", elements:[
                    	{
                       		id: "filter",
                       		view: "text",
                       		label: <div class='dhx_el_icon_search' ></div>",
                       		labelWidth: 30
                    	}
                	]},
                	{
                     	view:"list",
                     	id:"mylist",
                     	url:"data/users.php",// the path to the server script. See details below
                     	template:"#name#",
                     	select:true
                	}
             ]
});

Now we have a list view with the filter input on top, like this:

Simple List with DHTMLX Touch 

Then, extend the toolbar with the dhx.KeyEvents library that is required to handle key events which get invoked while typing text in the input (key-related events).

dhx.extend($$('filter'),dhx.KeyEvents); //adds the support  for key events 

Create a function filterText () that adds a standard filtering logic. Doing that takes a value entered in the input field, filters the list, and shows filtered results.

We need to associate the function filterText () with the onTimedKeyPress event handler. We choose this event (not onKeyPress) because it allows us to process key presses with a delay that decreases a number of requests to the server and provides smoother filtering.

function filterText() {
   	 var text = $$("filter").getValue();
        	$$("mylist").filter("#name#",text); //filters the list by the "name" property
 }
	 
$$('filter').attachEvent("onTimedKeyPress", filterText); //sets a function that is called on a key press with a delay

Now, if you type in the input field, the list items will be filtered and the list will display only items that contain entered characters. 

List with Filtering  

Data in the list is loaded from the database on the server, and it can't be managed without server-side integration. There is a special helper for the DHTMLX Touch library - dhtmlxConnector, and it is available for Java, .Net, and PHP. It implements client-server data communications, making the server-side integration well-organized and developer-friendly.

In our case, we use dhtmlxConnector for PHP, which can be downloaded here. Create a PHP file with the following code:

<!--?php
require_once("../codebase/connector/data_connector.php");// the required code file
require_once("../codebase/connector/db_sqlite.php");

if (!$db = sqlite_open('db', 0777, $sqliteerror)) {
    die($sqliteerror);
}
$data = new JSONDataConnector($db,"SQLite"); // the connector object
$data--->render_table("tblusers", "id", "name"); // data configuration
?>

It's a standard dhtmlxConnector usage. First, we need to include the required code files. Then, open an SQLite database, create a connector object, and configure data to retrieve.

The client and server sides will be united with the help of the url parameter of the list. Once you set the parameter to the URL of the PHP file, the list will be populated with data from the database.

That's it. We now have the list with a filtering capability that loads data from the server side and can be integrated in your mobile web site or app. Download the attached demo package to see how everything works and adapt it for your own purposes.

.Net developers: use Highcharts, the industry's leading interactive charting library, without writing a single line of JavaScript.

Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}