| Sencha Touch | |
|---|---|
 A Sencha Touch app with an iOS6 theme | |
| Developer | Sencha |
| Final release | 2.4.2 / June 15, 2015; 10 years ago (2015-06-15) |
| Written in | JavaScript |
| Operating system | Android,iOS,BlackBerry,Kindle,Windows Phone,Tizen |
| Available in | English |
| Type | JavaScript library |
| License | GPLv3 orCommercial |
| Website | www |
Sencha Touch is auser interface (UI)JavaScript library, orweb framework, specifically built for theMobile Web. It can be used byWeb developers to develop user interfaces for mobileweb applications that look and feel likenative applications on supported mobile devices. It is based onweb standards such asHTML5,CSS3 andJavaScript. The goal of Sencha Touch is to facilitate quick and easy development of HTML5 based mobile apps which run onAndroid,iOS,Windows,Tizen andBlackBerry devices, simultaneously allowing a native look and feel to the apps.
Sencha Touch is a product of Sencha, which was formed after popular JavaScript library projectsExt JS,jQTouch andRaphaël were combined. The first release of Sencha Touch, version 0.90 beta, was made available on July 17, 2010. This beta release supported devices running Android, and iOS (oniPhone,iPod Touch,iPad).
Subsequently, the first stable version, 1.0, was released in November 2010. Version 1.1.0 added support for devices runningBlackBerry OS 6.0.
The latest release, Sencha Touch 2.4.2, was released in June 2015[1] and is designed to run on the following browsers and platforms:
There are no announced plans to supportFirefox Mobile.
Sencha Touch follows theMVC pattern which separates the application data, the control code and view. This separation allows large scale applications to be flexible and easy to maintain.
Sencha Touch has an inbuiltDOM manipulation interface which negates the dependency on otherUI frameworks like jQuery. It includes a set ofgraphical user interface GUI-basedcontrols (or components) for use within mobile web applications. These components are optimized for touch input. The components are:[2]
All the components can be themed according to the target device. This is done usingSass, a stylesheet language built over CSS. Some of the native-lookalike themes are Cupertino Classic (for iOS6.x and below), Cupertino (for iOS 7) and Mountain View (for Android).[3]
Sencha Touch has eight in-built transition effects including slide over or under the current element, pop, flip, and cube. It supports common touch gestures built fromtouch events, which areWeb standards but supported only byAndroid,iOS, and some touch enabled devices. These are tap, double tap, swipe, scroll, and pinch.
Since Sencha touch is HTML5 based, the layouts it offers are extremely adaptive in nature.
Sencha Touch also supports charting components including pie charts, bar graphs, line series, etc. with explanatory legends. These components support interactivity like pinch and zoom. Just like the Grid components inExtJS, Sencha Touch offers TouchGrid functionality.[4]
Profiling in Sencha Touch allows you to create different profiles catering to different screen sizes. When the application is loaded, the framework determines the type of device, and its corresponding profile determines which components and functionality need to be swapped out, and the specific views and controllers that need to be invoked, saving the developer the task of creating a different application for each type of device.[5]
Sencha Touch applications have a basic file and directory structure as follows:[2][6]
| Directory/File | Description |
|---|---|
| app | The main directory that holds the app's models, views, controllers, stores and profiles |
| app.js | File that holds the application's overall settings. References to all models, views, controllers, stores and profiles can be found here. Once these references are loaded, the main app launch function is called. This function loads the first view and hence can be considered as the first point of the application |
| index.html | MainHTML file for the app. It may span many pages/screens for the mobile app |
| resources | Directory that holds all the images, CSS and any other external file that the app needs |
| app.json | App's configuration file |
| packager.json | File used to create native packages |
| ext-touch.js | This is Sencha's JavaScript library (ext-touchdebug.js recommended during development phase) |
| ext-touch.css | This is Sencha's CSS library |
Sencha Touch providesIDE plugins for ease of development. Benefits of these plugins includecode generation andauto-completion,code refactoring and ease of navigation to framework codebase and custom classes. Sencha Touch has plugins for popular IDEs likeJetBrains,Visual Studio andEclipse.
There is a visual app builder, Sencha Architect, for building cross platform HTML5 apps. It provides addiction features like theming andcommand line integration.[7]
Sencha Touch makes it convenient to use a map in your application using the Ext.Map component.[8] The inclusion of "Google Maps API" JavaScript file is essential for theGoogleMapsAPI to work.[9]
<!DOCTYPE HTML><html><head><title>Touch Test</title><!-- Sencha Touch CSS --><linkrel="stylesheet"type="text/css"href="sencha-touch/resources/css/sencha-touch-debug.css"/><!-- Google Maps API --><scripttype="text/javascript"src="//maps.google.com/maps/api/js?sensor=true"></script><!-- Sencha Touch JavaScript code --><scripttype="text/javascript"src="sencha-touch/sencha-touch-debug.js"></script><!-- Application script --><scripttype="text/javascript">Ext.setup({onReady:function(){// create the root panelnewExt.Panel({fullscreen:true,items:[{xtype:"map"}]});}});</script></head><body></body></html>
Ext.setup() is the starting point to initialise the application, setting up the viewport and the event system.[10]
Sencha Touch supports PhoneGap[11] andApache Cordova APIs forAccelerometer, Camera, Compass,Geolocation, Capture,[12] InAppBrowser, Media, Notification,Splash Screen,Storage (SQLite), etc. which were previously accessible only to native applications. Sencha Touch leverages JavaScript to create most of the UI components and change CSS ofDOM elements on the fly. WithJavaScript Engines being more efficient and faster than before, web apps run almost as smooth as native apps.
