Sencha Touch
Encyclopedia
Sencha Touch is a user interface
(UI) JavaScript library
, or framework, specifically built for Mobile Web
. It can be used by Web developers to develop user interface for mobile web application
s that look and feel like native applications
on supported mobile devices. It is fully based on web standards such as HTML5, CSS3 and JavaScript
.
and Raphaël
were combined. The first release of Sencha Touch was version 0.90 beta 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 on November 2010. The latest stable version 1.1.0 adds support to devices running BlackBerry OS
version 6. Sencha Touch is mainly based on WebKit
, so it can support only WebKit-based browsers such as Google Chrome
and Safari
. Support for other browsers or Web browser engine
s is incomplete.
GUI-based controls or "components" for use within mobile web applications. These components are highly optimized for touch input. List of components:
All the components can be themed according to the target device. This is done using SASS, a stylesheet language built over CSS.
which are Web standards
but are supported only by Android, iOS
, and some touch enabled devices.
. Sencha Touch has a data package to support web standards for data interchange with servers such as Ajax
and JSONP
. It also supports YQL
. Using these technologies, data can be bound to visual components such as lists to reflect data from servers.
applications require connection to the network to serve data to users. However users would like to use applications even when it is not connected, and synchronize with servers when connected. The ability of a web application to work offline is a big feature of HTML5. HTML5 uses CACHE MANIFEST to list the resources to fetch while connected to server and maintain while to be used while offline. Sencha Touch leverages this feature and adds to it to make good offline apps. Using the Framework it is possible to dynamically change the list of resources such as scripts, stylesheets etc., that we want to cache based on the state of application and user demand. It is possible to store data offline by binding the data to components using JSONP
when its online so the data is present even when the device gets disconnected.
, compass
, and microphone
which Sencha Touch cannot currently access. As mobile browsers and devices have evolved to meet emerging standards, components such as the GPS, WebSockets
, and accelerometer
are now available to mobile web applications, with the GPS specifically supported with Sencha Touch. Sencha Touch can be used along with PhoneGap
to create applications native to a mobile device for access to currently native-only components and to app marketplaces. The capability of such applications is restricted by the capability of PhoneGap
. Alternatively, Sencha Touch can be used with other solutions such as Worklight, which are based on PhoneGap but allow full access to native APIs using Hybrid Coding.
User interface
The user interface, in the industrial design field of human–machine interaction, is the space where interaction between humans and machines occurs. The goal of interaction between a human and a machine at the user interface is effective operation and control of the machine, and feedback from the...
(UI) JavaScript library
JavaScript library
A JavaScript library is a library of pre-written JavaScript which allows for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies....
, or framework, specifically built for Mobile Web
Mobile Web
The Mobile Web refers to the use of Internet-connected applications, or browser-based access to the Internet from a mobile device, such as a smartphone or tablet computer, connected to a wireless network....
. It can be used by Web developers to develop user interface for mobile web application
Web application
A web application is an application that is accessed over a network such as the Internet or an intranet. The term may also mean a computer software application that is coded in a browser-supported language and reliant on a common web browser to render the application executable.Web applications are...
s that look and feel like native applications
Mobile application development
Mobile application development is the process by which application software is developed for small low-power handheld devices such as personal digital assistants, enterprise digital assistants or mobile phones...
on supported mobile devices. It is fully based on web standards such as HTML5, CSS3 and JavaScript
JavaScript
JavaScript is a prototype-based scripting language that is dynamic, weakly typed and has first-class functions. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles....
.
Version history and support
Sencha Touch is a product of Sencha which was formed after popular JavaScript library projects Ext JS, jQTouchJQTouch
jQTouch is an Open Source JQuery plugin with native animations, automatic navigation, and themes for mobile WebKit browsers like iPhone, G1 , and Palm Pre...
and Raphaël
Raphaël
-List of people with the given name Raphaël:*Raphaël Haroche*Raphaël Salem*Raphaël Ibañez*Raphaël Bohren*Raphaël Piolanti*Raphaël Wicky*Raphaël Poulain*Raphaël Nadé*Raphaël Géminiani*Raphaël Alibert*Raphaël Poirée*Raphaël Lévy*Raphaël Jacquelin...
were combined. The first release of Sencha Touch was version 0.90 beta on July 17 2010. This beta release supported devices running Android, and iOS
IOS
iOS is an operating system for iPad, iPhone, iPod Touch, and Apple TV.IOS may also refer to:-Companies and organisations:* Illinois Ornithological Society, American state-based bird club...
(on iPhone
IPhone
The iPhone is a line of Internet and multimedia-enabled smartphones marketed by Apple Inc. The first iPhone was unveiled by Steve Jobs, then CEO of Apple, on January 9, 2007, and released on June 29, 2007...
, iPod touch
IPod touch
The iPod Touch is a portable media player, personal digital assistant, handheld game console, and Wi-Fi mobile device designed and marketed by Apple Inc. The iPod Touch adds the multi-touch graphical user interface to the iPod line...
, iPad
IPad
The iPad is a line of tablet computers designed, developed and marketed by Apple Inc., primarily as a platform for audio-visual media including books, periodicals, movies, music, games, and web content. The iPad was introduced on January 27, 2010 by Apple's then-CEO Steve Jobs. Its size and...
). Subsequently the first stable version 1.0 was released on November 2010. The latest stable version 1.1.0 adds support to devices running BlackBerry OS
BlackBerry OS
BlackBerry OS is a proprietary mobile operating system, developed by Research In Motion for its BlackBerry line of smartphone handheld devices...
version 6. Sencha Touch is mainly based on WebKit
WebKit
WebKit is a layout engine designed to allow web browsers to render web pages. WebKit powers Google Chrome and Apple Safari and by October 2011 held over 33% of the browser market share between them. It is also used as the basis for the experimental browser included with the Amazon Kindle ebook...
, so it can support only WebKit-based browsers such as Google Chrome
Google Chrome
Google Chrome is a web browser developed by Google that uses the WebKit layout engine. It was first released as a beta version for Microsoft Windows on September 2, 2008, and the public stable release was on December 11, 2008. The name is derived from the graphical user interface frame, or...
and Safari
Safari (web browser)
Safari is a web browser developed by Apple Inc. and included with the Mac OS X and iOS operating systems. First released as a public beta on January 7, 2003 on the company's Mac OS X operating system, it became Apple's default browser beginning with Mac OS X v10.3 "Panther". Safari is also the...
. Support for other browsers or Web browser engine
Web browser engine
A web browser engine, , is a software component that takes marked up content and formatting information and displays the formatted content on the screen. It "paints" on the content area of a window, which is displayed on a monitor or a printer...
s is incomplete.
GUI controls
Sencha Touch includes a set of graphical user interfaceGraphical user interface
In computing, a graphical user interface is a type of user interface that allows users to interact with electronic devices with images rather than text commands. GUIs can be used in computers, hand-held devices such as MP3 players, portable media players or gaming devices, household appliances and...
GUI-based controls or "components" for use within mobile web applications. These components are highly optimized for touch input. List of components:
- Buttons with device specific themes and effects
- Form elements such as text fields for email, date picker, address, etc.; sliders; selectors; and comboboxes
- List component which has momentum scrolling along with index
- Minimal icon set
- Toolbars, menus
- Movable tabs
- Bottom toolbars
- Map component with support to multi-touch input such as pinch and zoom
All the components can be themed according to the target device. This is done using SASS, a stylesheet language built over CSS.
CSS transitions (animations)
Sencha Touch has certain in-built transition effects.- Slide over or under current element.
- Pop
- Flips
- Cube
Touch event management
It supports common touch gestures basically built from touch eventsDOM Events
DOM events allow event-driven programming languages like JavaScript, JScript, ECMAScript, VBScript and Java to register various event handlers/listeners on the element nodes inside a DOM tree, e.g. HTML, XHTML, XUL and SVG documents....
which are Web standards
Web standards
Web standards is a general term for the formal standards and other technical specifications that define and describe aspects of the World Wide Web. In recent years, the term has been more frequently associated with the trend of endorsing a set of standardized best practices for building web sites,...
but are supported only by Android, iOS
IOS
iOS is an operating system for iPad, iPhone, iPod Touch, and Apple TV.IOS may also refer to:-Companies and organisations:* Illinois Ornithological Society, American state-based bird club...
, and some touch enabled devices.
- Tap
- Double tap
- Swipe
- Scroll
- Pinch
Application data support
Sencha Touch being JavaScript Framework consists of both UI libraries and also Data libraries. With the use of Data libraries the mobile web application can get data from serverServer (computing)
In the context of client-server architecture, a server is a computer program running to serve the requests of other programs, the "clients". Thus, the "server" performs some computational task on behalf of "clients"...
. Sencha Touch has a data package to support web standards for data interchange with servers such as Ajax
Ajax (programming)
Ajax is a group of interrelated web development methods used on the client-side to create asynchronous web applications...
and JSONP
JSONP
JSONP or "JSON with padding" is a complement to the base JavaScript Object Notation JSON data format, a pattern of usage allowing a page to request data from a server in a different domain...
. It also supports YQL
Yahoo! query language
Yahoo! query language is an SQL-like query language created by Yahoo! as part of their Developer Network. YQL is designed to retrieve and manipulate data from APIs through a single Web interface, thus allowing mashups that enable developers to create their own applications.Initially launched in...
. Using these technologies, data can be bound to visual components such as lists to reflect data from servers.
Offline applications
Mobile WebMobile Web
The Mobile Web refers to the use of Internet-connected applications, or browser-based access to the Internet from a mobile device, such as a smartphone or tablet computer, connected to a wireless network....
applications require connection to the network to serve data to users. However users would like to use applications even when it is not connected, and synchronize with servers when connected. The ability of a web application to work offline is a big feature of HTML5. HTML5 uses CACHE MANIFEST to list the resources to fetch while connected to server and maintain while to be used while offline. Sencha Touch leverages this feature and adds to it to make good offline apps. Using the Framework it is possible to dynamically change the list of resources such as scripts, stylesheets etc., that we want to cache based on the state of application and user demand. It is possible to store data offline by binding the data to components using JSONP
JSONP
JSONP or "JSON with padding" is a complement to the base JavaScript Object Notation JSON data format, a pattern of usage allowing a page to request data from a server in a different domain...
when its online so the data is present even when the device gets disconnected.
Comparision to native apps
Native applications on mobile devices have access to all the device components such as the cameraCamera
A camera is a device that records and stores images. These images may be still photographs or moving images such as videos or movies. The term camera comes from the camera obscura , an early mechanism for projecting images...
, compass
Compass
A compass is a navigational instrument that shows directions in a frame of reference that is stationary relative to the surface of the earth. The frame of reference defines the four cardinal directions – north, south, east, and west. Intermediate directions are also defined...
, and microphone
Microphone
A microphone is an acoustic-to-electric transducer or sensor that converts sound into an electrical signal. In 1877, Emile Berliner invented the first microphone used as a telephone voice transmitter...
which Sencha Touch cannot currently access. As mobile browsers and devices have evolved to meet emerging standards, components such as the GPS, WebSockets
WebSockets
WebSocket is a technology providing for bi-directional, full-duplex communications channels, over a single Transmission Control Protocol socket. It is designed to be implemented in web browsers and web servers, but it can be used by any client or server application...
, and accelerometer
Accelerometer
An accelerometer is a device that measures proper acceleration, also called the four-acceleration. This is not necessarily the same as the coordinate acceleration , but is rather the type of acceleration associated with the phenomenon of weight experienced by a test mass that resides in the frame...
are now available to mobile web applications, with the GPS specifically supported with Sencha Touch. Sencha Touch can be used along with PhoneGap
PhoneGap
PhoneGap is an open-source mobile development framework developed by Nitobi Software. It enables software programmers to build applications for mobile devices using JavaScript, HTML5 and CSS3, instead of often less-known languages such as Objective-C...
to create applications native to a mobile device for access to currently native-only components and to app marketplaces. The capability of such applications is restricted by the capability of PhoneGap
PhoneGap
PhoneGap is an open-source mobile development framework developed by Nitobi Software. It enables software programmers to build applications for mobile devices using JavaScript, HTML5 and CSS3, instead of often less-known languages such as Objective-C...
. Alternatively, Sencha Touch can be used with other solutions such as Worklight, which are based on PhoneGap but allow full access to native APIs using Hybrid Coding.
See also
- HTML5 in mobile devicesHTML5 in mobile devicesHTML5 provides mobile device users richer web applications and improved usability. The new features of HTML5 standardize the use cases and technologies that are common in smartphone-optimized mobile web applications. In today’s Mobile Web of WML or XHTML-MP or HTML 4 documents, these features are...
- Multiple phone web-based application framework