Sencha Touch

Source: Wikipedia, the free encyclopedia.
Sencha Touch
Developer(s)Sencha
Final release
2.4.2 / June 15, 2015; 9 years ago (2015-06-15)
Written in
GPLv3 or Commercial
Websitewww.sencha.com/products/touch

Sencha Touch is a

CSS3 and JavaScript. The goal of Sencha Touch is to facilitate quick and easy development of HTML5 based mobile apps which run on Android, iOS, Windows, Tizen and BlackBerry
devices, simultaneously allowing a native look and feel to the apps.

Version history and support

Sencha Touch is a product of Sencha, which was formed after popular JavaScript library projects

jQTouch and Raphaë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 (on iPhone, iPod Touch, iPad
).

Subsequently, the first stable version, 1.0, was released in November 2010. Version 1.1.0 added support for devices running BlackBerry 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:

  • Android browser,
    Google Chrome for Android
  • BlackBerry 10
  • Bada Mobile Browser
  • Kindle Fire
    Browser
  • Tizen
  • Windows Phone 8 and Windows 8 IE10
  • Mobile Safari

There are no announced plans to support Firefox Mobile.

Features

MVC Architecture

Sencha Touch follows the MVC pattern which separates the application data, the control code and view. This separation allows large scale applications to be flexible and easy to maintain.

Widget components and customisable themes

Sencha Touch has an inbuilt

controls (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 using

Sass, 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]

Transitions, animations and adaptive UI

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 from

touch events, which are Web standards but supported only by Android, 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.

Charting

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 in ExtJS, Sencha Touch offers TouchGrid functionality.[4]

Profiles

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]

Basic application directory structure

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 Main HTML 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

Developer tools and plugins

Sencha Touch provides

Visual Studio and Eclipse
.

There is a visual app builder, Sencha Architect, for building cross platform HTML5 apps. It provides addiction features like theming and command line integration.[7]

Sample usage

Sencha Touch makes it convenient to use a map in your application using the Ext.Map component.

API to work.[9]

<!DOCTYPE HTML>
<html>
<head>
<title>Touch Test</title>

<!-- Sencha Touch CSS -->
<link rel="stylesheet" type="text/css"
         href="sencha-touch/resources/css/sencha-touch-debug.css" />

<!-- Google Maps API -->
<script type="text/javascript"
              src="//maps.google.com/maps/api/js?sensor=true"></script>

<!-- Sencha Touch JavaScript code -->
<script type="text/javascript" src="sencha-touch/sencha-touch-debug.js"></script>

<!-- Application script -->
<script type="text/javascript">
  Ext.setup( {
    onReady: function() {
      // create the root panel
      new Ext.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]

Comparison to native applications

Sencha Touch supports PhoneGap

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 of DOM elements on the fly. With JavaScript Engines
being more efficient and faster than before, web apps run almost as smooth as native apps.

See also

References

  1. ^ "Announcing Sencha Touch 2.4.2 with Improved BlackBerry 10.3 Experience". sencha.com. 15 June 2015.
  2. ^
    ISBN 978-1-4302-2869-1
    .
  3. ^ "Sencha Touch 2 Release Notes". cdn.sencha.com.
  4. ^ "Announcing Sencha Touch 2.3 – Touch Grid, Cordova Support, and New Themes". sencha.com. 1 October 2013.
  5. ISBN 978-1-84951-890-1
    .
  6. ^ "Touch Guides - Getting Started with Sencha Touch". docs.sencha.com.
  7. ^ "Sencha Architect". sencha.com. 25 March 2015.
  8. ^ "Touch - Sencha Docs". docs.sencha.com.
  9. ^ "IBM Developer Works- Build mobile web applications with Sencha Touch". IBM.
  10. ^ "Touch Guides - Events". docs.sencha.com.
  11. ^ "Leveraging PhoneGap within Sencha Touch". phonegap.com.
  12. ^ "Touch Guides - Using Native APIs". docs.sencha.com.

Bibliography

Retrieved from "https://en.wikipedia.org/w/index.php?title=Sencha_Touch&oldid=1265937793"