Mobile applications chapter 5

Mobile Applications
Chapter 5
BY
MR. A. B. MOMIN
ASSISTANT PROFESSOR
DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING
ATS’S, SANJAY BHOKARE GROUP OF INSTITUTES, MIRAJ

UI Frameworks
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
• Sencha Touch
• jQuery Mobile
• Enyo
• Montage
• iUI
• jQTouch

Sencha Touch
• Sencha Touch is a JavaScript-based framework for mobile app development.
• It has a free commercial license and it is compatible with iOS, Android, BlackBerry 7/10, and
Windows Phone 8.
• Sencha provide sencha sdk platform for make app.
• It supports 50 components and built in MVC with javascript.
• A basic “Hello World” application in Sencha Touch will look like this:
Ext.application({
name: 'Sencha Touch Demo’,
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [
{
title: 'Hello World’,
iconCls: 'home’,
html: 'Welcome to Sencha Touch’
}]});}});

jQuery Mobile
• jQuery Mobile is a cross-platform UI framework optimized for touch smartphones.
• jQuery Mobile works over jQuery and it manages only the user interface of our web apps.
• jQuery Mobile is compatible with more than 10 different platforms, including all the modern smartphone
and tablet browsers.
• jQuery Mobile manages a series of rich controls, as well as page navigation and transitions using CSS3
animations.
• It is compatible with Apache Cordova/PhoneGap apps.
• Example:
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>Hello World</h1>
<a href="#">Action</a>
</div>
<div data-role="content">
<ul data-role="listview" data-filter="true">
<li>Option 1
<li>Option 2
<li>Option 3
<li>Option 4
</ul>
</div>
<div data-role="footer" data-position="fixed" data-theme="e">
<h4>O'Reilly Media</h4>
</div>
</div>

Enyo
• Enyo is a cross-device (desktop, tablet, and phone), cross-platform web app UI framework.
• The framework originated with the HP Palm team from webOS, but after the open sourcing of
that platform the Enyo effort was converted to a multiplatform solution, including support for
iOS, Android, Firefox, Chrome, Windows Phone, BlackBerry, and more.
• Enyo is modular and component-based and the basic core is only 25 KB zipped, making it a
mobile-optimized framework.
• It has a range of useful widgets, including image carousels and date pickers, and we can
encapsulate our own controls really easily.

Montage
• Montage is a complete web app development framework, including a client-side Java‐Script
library and a server-side Node.js library.
• One of the big advantages of Montage is the usage of a two-way data binding mechanism
using custom HTML5 data.
• It also includes components and templates, data persistence, and event management.
• Montage is an open source project created by Motorola Mobility, now owned by Google.
• One of the key targets of Montage is Apache Flex (formerly Adobe Flex) developers trying to
move into the HTML5 world.

iUI
• iUI was one of the first libraries developed for iPhone-style application development.
• iUI is a very simple-to-use, nonintrusive JavaScript library, including CSS and assets (generally
backgrounds) that emulate the native iPhone application controls, animations, and application
workflow.
• The main features are:
• No JavaScript coding required
• Extends the behavior of standard HTML markup
• Overrides links and forms with Ajax requests
• Updates the page with smooth iPhone transitions with no code
• Other advanced features that iUI supports include:
• Modal dialog pop-ups
• Form designs
• Emulation of native form controls
• Stripped tables
• Right (>) toolbar button

jQTouch
• jQTouch is a jQuery plug-in for iPhone web development that produces similar results to iUI,
but with more powerful graphics and animations.
• It does require some JavaScript code to initialize the page.
• The supported features include:
• Native WebKit animations using jQuery methods
• Callback events
• Flexible themes
• Swipe detection
• Extensions: floaty bar, geolocation, offline capability
• Visual controls
• Animations

J2ME Basics
• J2ME is the short form for Java 2 Micro Edition.
• J2ME is meant for tiny devices such as mobile phones, TV set top boxes, Vehicle telematics, pagers, PDAs
etc.
• Some of the main differences between computers and the J2ME devices are:
• Limited processing power
• Limited system memory
• Limited storage capacity
• Small display
• Less Battery power
• Limited connectivity to internet
• The J2ME applications can be used to do many useful things. A few of the capabilities of a J2ME program
are:
• Making UDP connections back to the server or communication between two devices.
• Making HTTP connections back to a HTTP server to make rich applications
• Making Socket connections
• Bar Code scanning
• Bluetooth programming
• and many other programs limited only by your imagination.

J2ME ToolKit
• Sun Java Wireless Toolkit
A free development environment directly from SUN is the Sun Java Wireless toolkit. It is a free
IDE which can be downloaded at http://java.sun.com/products/sjwtoolkit/index.html
• Netbeans mobility pack
If you are more comfortable with Netbeans development, this is another free toolkit which you
can use to develop J2ME applications. This is downloadable
from http://developers.sun.com/prodtech/javatools/mobility/downloads/index.jsp

HTML 5 Script Extension
• HTML5 includes new attributes to the script element that may improve performance on
compatible devices.
• The script elements used to block the parallel download of any other resource, and that harms
performance.

Code Execution
You can execute JavaScript code in four different ways:
• From a script tag
• From an event handler
• From a link, using the javascript: URL protocol
• From a bookmarklet, using the javascript: URL protocol

JS Debugging and Profiling
• Debugger the enables you to step through code, analyse stack frames and set breakpoints.
• profilers run code and give you a detailed breakdown of execution times, allowing you to
identify bottlenecks in your programs.
• Example: Firebug from Mozilla Firefox

Native Web API
There are other extensions available for native web applications on some
devices, and
many other JavaScript APIs are supported in installed applications.
These JavaScript APIs can include support for:
• Messaging
• Address book management
• Gallery
• Camera
• Calendar
• Device status information
• Native menus

Mobile Libraries
• Zepto.js:
Zepto.js is a minimized JavaScript library optimized for performance. Its goal is to provide a 5– 10 KB
modular library that downloads and executes fast, with a jQuery-like syntax. With its inclusion with the
HTML5 Mobile Boilerplate template, Zepto.js has become the most popular replacement for jQuery in
mobile web development.
• baseJS:
baseJS is a lightweight library (8 KB) compatible with Safari on iOS and other Web Kit based
browsers. It has only been fully tested on Safari, from iOS 1.0 to 3.0.
• jQMobi:
jQMobi is a query selector library optimized for mobile devices that takes 5 KB of JavaScript code
using a jQuery syntax. Based on Zepto and jQuery, this library focuses on ways to reduce the API to its
most useful features and offers a fast version of a similar API. It includes basic DOM and Ajax
management through the $ object and chained functions.
• QuoJS:
Quo is a micro JavaScript library (14 KB) optimized for mobile devices that includes DOM, event, and
Ajax functionality and a good quantity of touch gesture event handlers, such as pinch out, drag, rotate,
hold, swipe, and two-finger tap.

Mobile Libraries
• XUI:
XUI is a simple JavaScript framework for building mobile websites that takes up only 4.2 KB
compressed. It is available for free and has been fully tested on Web Kit-based browsers and Opera
Mobile.

Mobile applications chapter 5

More Related Content

What's hot (20)

Similar to Mobile applications chapter 5 (20)

Mobile applications chapter 5