Start Building Professional
Web Apps Today

DHTMLX Touch

Free JavaScript Mobile Framework for HTML5 Web Apps

DHTMLX Touch is a free open source JavaScript library for building HTML5-based mobile web apps. It's not just a set of UI widgets, but a complete framework that allows you to create eye-catching, robust web applications that run on iOS, Android, and other mobile platforms.

phone1 phone2 phone3 phone4

Syntax

DHTMLX Touch framework offers intuitive object inheritance. You can define an object with properties, some of which are objects or arrays of objects, and some are simple strings or numbers. This way you can pass data into components or nest components one into another.

dhx.ui ( {view:"toolbar", id:"mytoolbar", cols:[ {view:"label", label:"TOUCH UI", align:"center"}, {view:"button", width:100, label: 'Back', align:'right'} ]})

Extendable Functionality

DHTMLX Touch provides an elegant and simple solution to extend and customize the existing functionality of the library and to add new UI components. You can combine the existing component and functionality blocks with each other, or with custom code blocks, to create new components, or extend the existing ones.

Data Storage on the Client Side

Global data storage is an advanced and useful feature that allows keeping relations between data elements (e.g. list of employees and employee details form) on the client side.

This feature provides automatical update of data across UI elements without user intersection. For example, user changes an employee name in the details form and gets this name updated in the list of employees automatically.

Server-Side Support

Server side of DHTMLX Touch framework is based on dhtmlxConnectors (the same that used for DHTMLX Ajax library). You can also write your own server-side code. Communication between client and server is built on XML/JSON packages.

Development Tools

  • Visual Designer - an online tool that allows you to build mobile
    web apps through a user-friendly, drag-and-drop interface. Since v.1.2, you can save your design or share it by sending an URL. Watch the demo video or use it online.
  • Skin Builder - a simple online tool that provides an easy way
    to choose the skin for you app and customize the skin colors. A set of predefined skins is included. Use online.
  • Touch UI Inspector - a free extension for Google Chrome
    that provides a handy visual tool for monitoring the inner state of DHTMLX Touch JavaScript components on a web page. Visit on Chrome web store.

Download Buy Support

Components and Controls

DHTMLX Touch provides a set of top level UI components:

  • Calendar
  • Chart
  • Dataview
  • IFrame
  • Form
  • GoogleMap
  • Grid
  • Layout
  • Accordion
  • Carousel
  • Multiview
  • List / Unitlist
  • Grouplist
  • Pagelist
  • Popup
  • Scrollview
  • Template
  • Toolbar
  • Video
  • Window

It also includes multiple controls:

  • Button
  • Checkbox
  • Combo
  • Counter
  • Datepicker
  • Icon
  • Imagebutton
  • Label
  • Radio
  • Richselect
  • Segmented
  • Select
  • Tabbar
  • Text
  • Textarea
  • Toggle

By using these components in a default or extended view, you can build mobile web apps in a fast and efficient way.

Customizable Appearance

We offer simplified scheme of CSS editing to customize the appearance of the DHTMLX Touch components. You can completely change the interface built with the DHTMLX Touch framework by modifying CSS.

DHTMLX Touch Inside HTML Page

By default, top DHTMLX Touch component is added to document.body, but you also can put it within an HTML element as a container. It allows you to add elements to the page which was already created by using pure HTML.

HTML Inside DHTMLX Touch

If you're building your app with DHTMLX Touch, but still want to add HTML blocks in it, you can do it by using HTML element as a content of a template component:

<div id="flight_template"> <i>html here with #placeholders#</i> </div> <script> dhx.ui({ rows:[ {view:"template", template:"html->flight_template", url:"template_data.xml", datatype:"xml"}, {view:"template", src:"content.php"} ]}) </script>

Documentation and Samples

DHTMLX Touch comes with lots of technical samples with the source code to help you study how the UI elements work. The documentation can be found here: DHTMLX Touch Online Documentation

Compatibility

The DHTMLX Touch framework is compatible with the main web browsers for mobile platforms that support HTML5. Web applications built with DHTMLX Touch work on the iPad, iPhone, Android, and Blackberry devices.

Some of the demos can be opened on desktop PCs in WebKit browsers (Safari, Chrome, etc.) and Firefox 3.6+, Opera, IE8+, but there still can be some visual issues since DHTMLX Touch is optimized for mobile devices.

Terms of Usage

The DHTMLX Touch library is distributed for FREE under both GNU GPL and commercial Licenses. You can use it in your open source or commercial apps at no charge.

Support

The official technical support for DHTMLX Touch is provided on the paid basis. Learn about prices and how to buy the ticket support here. For the community support, use our free Forum.

Last update: v.1.2, September 13, 2012
Download Buy Support