User:Pchheda/sandbox
![]() A Sencha Touch app with an iOS6 theme | |
Developer(s) | Sencha |
---|---|
Stable release | 2.4.2
/ June 15, 2015 |
Written in | GPLv3 or commercial |
Website | www |
Sencha Touch is a
Version history and support
Sencha Touch is a product of Sencha, which was formed after popular JavaScript library projects
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 FireBrowser
- 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 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
- Buttons with device specific themes and effects
- Form elements such as text fields for email
- Date picker and address
- Sliders, selectors, and combo-boxes
- A list component with momentum-scrolling and an index bar
- A minimal icon set
- Toolbars and menus
- Movable tabs, bottom toolbars
- A map component with support for multi-touch gestures such as pinch and zoom
- Carousels
All the components can be themed according to the target device. This is done using
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
, 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 allows you to add charting components like 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.
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.[3]
Basic Application Directory Structure
Sencha Touch applications have a basic file and directory structure as follows:[2][2]
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
There is even a visual app builder, Sencha Architect, for building cross platform HTML5 apps. It provides addiction features like theming and command line integration.
Sample Usage
Sencha Touch makes it convenient to use a map in your application using the Ext.Map component. The inclusion of "Google Maps API" Javascript file is essential for the
<!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 -->
<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.
Comparison to native applications
Sencha Touch supports PhoneGap and
See also
- HTML5 in mobile devices
- Multiple phone web-based application framework
- Comparison of Javascript Frameworks
- jQuery Mobile
- Tizen
- Android
- iOS
References
Bibliography
- Jesus Garcia and Anthony De Moss, Mitchell Simoens, Sencha Touch in Action, ISBN 978-1-61729-037-4
- Ajit Kumar, Sencha Touch Cookbook, ISBN 978-1-84951-544-3.
- Hiren J. Dave, Instant Sencha Touch, ISBN 978-1-78216-598-3 Parameter error in {{ISBN}}: checksum.
- Ajit Kumar, Sencha Touch Cookbook - Second Edition, ISBN 978-1-78216-918-5.
- Lee Boonstra, Hands-On Sencha Touch 2: A Real-World App Approach 1st Edition, ISBN 978-1-44936-652-0.
- Ajit Kumar, Sencha MVC Architecture, ISBN 978-1-84951-888-8.
- Matthew David, HTML5 Mobile Websites, Turbocharging HTML5 with jQuery, Sencha Touch, and Other Frameworks, ISBN 978-0-24081-814-6.
- https://developer.salesforce.com/page/Developing_Mobile_Applications_With_Force.com_And_Sencha_Touch
External links
Category:Ajax (programming)
Category:JavaScript libraries
Category:HTML5
Category:JavaScript web frameworks