Web Technologies

SERVERLESS AND MOBILE BASED WEB DEVELOPMENT

Node Programming Fundamentals – Asynchronous Programming Techniques – Sequencing
Asynchronous Logic – Node JS – Global Objects – Event Listeners – J2ME Basics – MIDlet
–Mobile Web Application Frameworks – Simple Android Based Development – Cloud Based
Applications Deployment.
J2ME-Basics
• Java Platform, Micro Edition (Java ME) provides a robust, flexible environment for applications running on
mobile and embedded devices: mobile phones, set-top boxes, Blu-ray Disc players, digital media devices, M2M
modules, printers and more.
• Java ME technology was originally created in order to deal with the constraints associated with building
applications for small devices.
• For this purpose Oracle defined the basics for Java ME technology to fit such a limited environment and make
it possible to create Java applications running on small devices with limited memory, display and power
capacity.
• It is based on object-oriented Java.
• The Java ME has a robust user interface, great security, built-in network protocols, and support for applications
that can be downloaded dynamically.
• Applications which are developed on Java ME are portable and can run across various devices and can also
leverage the native capabilities of the device.
• Java ME Software Development Kit (SDK) provides the standalone runtime environment and various utilities
required for development Java ME applications.
• It combines the Connected Limited Device Configuration (CLDC) and the Connected Device Configuration (CDC)
into one single environment.
• Java ME embedded is a run time platform that leverages the Java ME technologies that are deployed to billions
of devices across the Internet of Things. It is designed by keeping in mind that the applications developed can
be portable to various devices while being resource-efficient and keeping the demands from the underlying
platform low.
J2ME-Basics
Java ME is organized as follows:
• The generic computing devices usually consist of hardware such as display, permanent storage, keyboard, etc.
but the small computing devices are not like this.
• Some of them don't have permanent storage, and some don't even have a permanent display.
• As Java ME target a variety of small computing devices, this problem is handled by it by using a two-fold
approach.
• Firstly, there is a Java Run-time Environment and other core classes that are defined to target specifically the
device on which it is operating. This is referred to as configurations.
• Secondly, a profile is defined as a set of similar small computing devices.
• A profile has several classes within it which are made to implement features found on a related group of small
computing devices.
Java ME architecture
• The Java ME architecture helps in scaling an application based on the constraints provided by the small
computing device.
• Java ME does not simply replace the operating system, rather it stacks up layers on the native operating system
and makes an environment for the application to run.
• These layers are collectively named as Connected Limited Device Configuration (CLDC).
J2ME-Basics
Java ME architecture
First layer  configuration layer that includes the Java Virtual Machine.
This layer interacts directly with the native operating system and builds the connection between the profile and
the JVM.
Second layer profile which contains the minimum set of APIs for the small computing device.
The profile contains a set of classes which are made to implement the features of a related group of small
computing devices.
Third layer Mobile Information Device Profile (MIDP).
The MIDP layer consists of APIs which are for user network connections, persistence storage, and the user
interface.
It also has access to Connected Language Device Configuration (CLDC) and Mobile Information Device Profile
(MIDP) libraries.

A small computing device has two components supplied by the Original Equipment Manufacturer (OEM). They
are, namely OEM apps and OEM classes.
The MIDP communicates with the OEM classes to gain access to features like sending and receiving messages
and accessing device-specific persistent data.
OEM applications are small programs such as address book etc.
J2ME-Basics
Java ME Configurations
Java ME configurations specify a JVM and certain core APIs which
are directed towards a certain set of devices.
There are two configurations available with Java ME, namely
Connected Device Configuration (CDC) and Connected Limited
Device Configuration.
The Java ME configurations and profiles are based on memory and
for small devices based on volatile and non-volatile memory.
The Connected, Limited Device Configuration is one such
specification which specifies the APIs for devices with less than 512
KB of RAM available for the Java system and an intermittent (limited)
network connection.
It specifies a stripped-down Java virtual machine, called the KVM, as
well as several APIs for fundamental application services.
Three packages are minimalist versions of the J2SE java.lang, java.io,
and java.util packages.
A fourth package, javax.microedition.io, implements the Generic
Connection Framework, a generalized API for making network
connections.
J2ME-MIDlets
MIDlets
An application written for MIDP is called a MIDlet.
MIDlet applications are subclasses of the javax.microedition.midlet.MIDlet class that is defined by MIDP.
MIDlet Suites
MIDlets are packaged and distributed as MIDlet suites. A MIDlet suite can contain one or more MIDlets.
The MIDlet suite consists of two files:
Java Application Descriptor (.jad) file
The Java Application Descriptor file lists the archive file name, the names and class names for each MIDlet in the
suite, and other information.
This file is used by the mobile device to ensure that device has the minimum requirements to run the
application.
Java Archive file (.jar) file.
The archive file contains the MIDlet classes and resource files.
MIDlets are applications created using the MIDP specification and are designed to be executed on devices with
limited resources.
Application Management System (AMS)- is responsible for managing MIDlets, this software resides on the
device and is responsible for executing, pausing or destroying our applications.
The AMS performs two major functions:
• Manages the lifecycle of the MIDlets
• It controls the different states for the MIDlets while they are being executed.
J2ME-MIDlets
The AMS handles the MIDlets phases:
Discovery: Is a stage before the actual installation of the MIDlet.
In this phase, we select through the AMS which application we want to download.
Installation: once the MIDlet is downloaded the AMS starts the installation and provides the user with information about the
progress of the MIDlet installation including any error message.
Execution: The AMS is in charge of managing the states of the MIDlet.
Update: The AMS is capable to detect and inform if there is an update available for an already installed MIDlet. Once it detects
an update, it should inform the user whether to update the application or not.
Deleted: The AMS is in charge of deleting the MIDlet from the device.
It will ask for confirmation from the user before deleting the MIDlet.
A MIDlet is a MID Profile and application must extend MIDlet for implement three main abstract methods and methods
functionality in it, Methods are :
startApp();
pauseApp();
destroyApp();
• When the application is loaded, it starts in a Paused state, when the application starts its execution it is transitioned to Active
state.
• When exiting the application, it will transition to a Destroyed state. In this state, all resources are de-allocated.
• A MIDlet application is represented by the instance of the javax.microedition.midlet.MIDlet class.
• MIDlet have very specific lifecycle which is reflect in the methods and behavior of the MIDlet class.
• The application must extend this class to allow the application management (a piece of device- specific software) to controls the
installation, execution, life cycle of MIDlet and to be able to retrieve properties from the application descriptor and notify and
request state changes.
• The class files will be packaged in a Java Archive (JAR), while an accompanying descriptor file (with a .jad extension) describes the
contents of the JAR.
J2ME-MIDlets
• When the MIDlet is about to be run, an instance of
javax.microedition.midlet.MIDlet class is create. The MIDlet's
class constructor is run, and the MIDlet is in the Paused state.
• Next, MIDlet move into Active state after application manager
calling startApp() method which implement with extend MIDlet
class.
• While the MIDlet is Active state, the application manager can
suspend its execution by calling pauseApp() method. This will
puts MIDlet back into Paused State.
• The MIDlet also place itself into Paused state by calling calling
notifyPaused() mehod.
• The application manager puts MIDlet form Paused state to
Active state by calling startApp() Method.
• One addition method resumeRequest() method calling by
application manger to put MIDlet into Active state from Paused
state.
• After application manager execute startApp() method, can
terminate the execution by calling destroyApp() method. At that
point the MIDlet is destroyed and patiently awaits garbage
collection.
• A MIDlet can destroy itself by calling notifyDestroyed() method.
J2ME-MIDlets
NetBean IDE also provide JME environment in it. Activate it form
Plugin window
J2ME-MIDlets
Give name of the project. Check the option create hello
Midlet
J2ME-MIDlets //HelloMIDlet.java
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
public class HelloMIDlet extends MIDlet implements
CommandListener {
private boolean midletPaused = false;
//<editor-fold defaultstate="collapsed" desc=" Generated Fields ">
private Command exitCommand;
private Form form;
private StringItem stringItem;
public HelloMIDlet() {
}
private void initialize() {
}
public void startMIDlet() {
// write pre-action user code here
switchDisplayable(null, getForm());
// write post-action user code here
}
public void resumeMIDlet() {
// write pre-action user code here
// write post-action user code here
}
J2ME-MIDlets public Command getExitCommand() {
public void switchDisplayable(Alert alert, if (exitCommand == null) {
Displayable nextDisplayable) { // write pre-init user code here
// write pre-switch user code here exitCommand = new Command("Exit", Command.EXIT, 0);
Display display = getDisplay(); // write post-init user code here
if (alert == null) { }
display.setCurrent(nextDisplayable); return exitCommand;
} else { }
display.setCurrent(alert, nextDisplayable); public Form getForm() {
} if (form == null) {
// write post-switch user code here // write pre-init user code here
} form = new Form("Welcome", new Item[] { getStringItem() });
public void commandAction(Command command, form.addCommand(getExitCommand());
Displayable displayable) { form.setCommandListener(this);
// write pre-action user code here // write post-init user code here
if (displayable == form) { }
if (command == exitCommand) { return form; }
// write pre-action user code here public StringItem getStringItem() {
exitMIDlet(); if (stringItem == null) {
// write post-action user code here // write pre-init user code here
} stringItem = new StringItem("Hello", "and Welcom to r4r");
} // write post-init user code here
// write post-action user code here }
} return stringItem;}
J2ME-MIDlets
public Display getDisplay() { The Display class represents a logical device
return Display.getDisplay(this); screen on which a MIDlet can display its
} user interface.
public void exitMIDlet() {
switchDisplayable(null, null); The Command class is a construct that
destroyApp(true); encapsulates the semantic information of
notifyDestroyed(); an action.
}
public void startApp() { A Form is a Screen that contains an
if (midletPaused) { arbitrary mixture of items: images, read-
resumeMIDlet(); only text fields, editable text fields, editable
} else { date fields, gauges, choice groups, and
initialize(); custom items.
startMIDlet(); In general, any subclass of the Item class
} may be contained within a form.
midletPaused = false;
} public class StringItem extends Item
public void pauseApp() { An item that can contain a string. A
midletPaused = true; StringItem is display-only; the user cannot
} edit the contents. Both the label and the
public void destroyApp(boolean unconditional) { textual content of a StringItem may be
} modified by the application.
}
J2ME-MIDlets
import javax.microedition.midlet.*; public HelloMIDlet() {
import javax.microedition.lcdui.*; display = Display.getDisplay(this);
public class HelloMIDlet extends MIDlet implements submit = new Command("submit",Command.OK,1);
CommandListener { form.addCommand(submit);
public Form form=new Form("Counselling"); form.setCommandListener(this);
public Form form1=new Form("Success"); name=new TextField("Name","",30,TextField.ANY);
// private Command exitCommand; // The exit command form.append(name);
private Display display; // The display for this MIDlet age=new TextField("Age","",20,TextField.NUMERIC);
private TextField name; form.append(age);
private StringItem res; t=new Ticker("!!!Please enter your valid details!!!");
private StringItem ageres; gender=new
private StringItem genres; ChoiceGroup("Gender",Choice.EXCLUSIVE);
private StringItem cutres; gender.append("MALE",null);
private StringItem selres; gender.append("FEMALE",null);
private TextField age; form.append(gender);
private ChoiceGroup gender; cutoff=new
private ChoiceGroup check; TextField("Cutoff","",10,TextField.NUMERIC);
//private ChoiceGroup sel; form.append(cutoff);
// private List sel; check=new ChoiceGroup("cerficates
public Command submit; attached",Choice.MULTIPLE);
private TextField cutoff; check.append("10th marksheet",null);
private Ticker t; check.append("12th marksheet",null);
J2ME-MIDlets
check.append("birth certificate",null); form1.append(res);
check.append("community certificate",null); form1.append(ageres);
form.append(check); form1.append(genres);
form.setTicker(t); form1.append(cutres);
//exitCommand = new Command("Exit", }
Command.EXIT, 0); public void startApp() {
} display.setCurrent(form);
private void disp() }
{ public void pauseApp() {
String nam=name.getString(); }
String ag=age.getString(); public void destroyApp(boolean unconditional) {
String cut=cutoff.getString(); }
//TextBox t=new TextBox("",nam,100,0); public void commandAction(Command c, Displayable s) {
res=new StringItem("Name : ",""); if (c == submit) {
res.setText(nam); String label = c.getLabel();
ageres=new StringItem("Age : ",""); if(label.equals("submit")) {
ageres.setText(ag); disp();
cutres=new StringItem("Cutoff : ",""); display.setCurrent(form1);
cutres.setText(cut); }
int g=gender.getSelectedIndex(); }
String gen=gender.getString(g); }
genres=new StringItem("Gender : ",""); }
genres.setText(gen);
J2ME-MIDlets
J2ME-MIDlets class MyCanvas extends Canvas implements
import javax.microedition.midlet.*; CommandListener {
import javax.microedition.lcdui.*; private Command exit = new Command("Exit",
public class HelloMIDlet extends MIDlet { Command.EXIT, 1);
private Display display; private HelloMIDlet shapes;
private MyCanvas canvas; public MyCanvas(HelloMIDlet shapes) {
public HelloMIDlet() { this.shapes = shapes;
display = Display.getDisplay(this); addCommand(exit);
canvas = new MyCanvas(this); setCommandListener(this); }
} protected void paint(Graphics graphics) {
protected void startApp() { graphics.setColor(135,206,235);
display.setCurrent(canvas); graphics.fillRect(0,0,getWidth(),getHeight());
} graphics.setColor(255,250,250);
protected void pauseApp() { graphics.fillRect(0,260,240,40);
} graphics.fillArc(45,110,40,40,0,360);
protected void destroyApp(boolean unconditional) { graphics.fillArc(36,150,55,40,0,360);
} graphics.fillArc(38,190,50,50,0,360);
public void exitMIDlet() { graphics.setColor(160,82,45);
destroyApp(true); graphics.drawLine(39,165,20,190);
notifyDestroyed(); graphics.drawLine(85,165,105,190);
} graphics.drawLine(48,225,25,270);
} graphics.drawLine(80,225,103,270);
graphics.fillRect(125,160,100,100);
J2ME-MIDlets
graphics.fillRect(125,60,100,100); graphics.fillArc(90,15,3,10,0,360);
graphics.setColor(0,0,0); graphics.fillArc(50,20,3,10,0,360);
graphics.fillRect(160,210,30,50); graphics.fillArc(110,25,3,10,0,360);
graphics.setColor(135,206,250); graphics.fillArc(55,50,3,10,0,360);
graphics.fillRect(145,75,20,20); graphics.fillArc(97,40,3,10,0,360);
graphics.fillRect(170,75,20,20); graphics.fillArc(99,20,3,10,0,360);
graphics.fillRect(195,75,20,20); graphics.fillArc(200,50,3,10,0,360);
graphics.fillRect(145,100,20,20); graphics.fillArc(180,75,3,10,0,360);
graphics.fillRect(170,100,20,20); graphics.fillArc(150,60,3,10,0,360);
graphics.fillRect(195,100,20,20); graphics.fillArc(160,25,3,10,0,360);
graphics.fillRect(145,125,20,20); graphics.fillArc(125,30,3,10,0,360);
graphics.fillRect(170,125,20,20); graphics.fillArc(3,90,3,10,0,360);
graphics.fillRect(195,125,20,20); graphics.fillArc(62,80,3,10,0,360);
graphics.setColor(255,250,250); graphics.fillArc(32,100,3,10,0,360);
graphics.fillArc(40,60,3,10,0,360);
graphics.fillArc(53,65,3,10,0,360);
graphics.fillArc(189,83,3,10,0,360);
graphics.fillArc(10,13,3,10,0,360);
graphics.fillArc(20,23,3,10,0,360);
}
J2ME-MIDlets
public void commandAction(Command command,
Displayable displayable) {
if (command == exit) {
shapes.exitMIDlet();
}
}
}
Mobile Web Application Frameworks
Mobile Web Application-
• Mobile Web applications refer to applications for mobile devices that require only a Web browser to be
installed on the device.
• They typically use HTML and Ajax (and, increasingly, HTML5 components), although they may make use of
augmented rich Internet application (RIA) technologies, such as Flash, JavaFX and Silverlight, but are not
written specifically for the device.
• Simple mobile Web applications limit the use of RIA technologies and are designed to present information in a
readable, action-oriented format. Mobile Web applications differ from mobile native applications, in that they
use Web technologies and are not limited to the underlying platform for deployment.
• The mobile web app route is faster and cheaper than the native mobile app route, especially when the
objective is to support a wide range of devices.
• Conversely, there may be capabilities native to the mobile device (such as the movement sensor and so on)
that are essential to your app, but which are only accessible via a native app (which would therefore make the
mobile web app choice a non-starter for you).
• Hybrid apps, like native apps, run on the device itself (as opposed to inside a browser), but are written with
web technologies (HTML5, CSS and JavaScript) and typically underpinned by a hybrid app framework.
• More specifically, hybrid apps run inside a native container, and leverage the device’s browser engine (but not
the browser) to render the HTML and process the JavaScript locally.
Mobile Web Application Frameworks
• A web-to-native abstraction layer enables access to device capabilities that are not accessible in mobile web
applications, such as the accelerometer, camera, and local storage.
• Another common understanding for mobile web app developer newbies is to assume that web-based code for
a desktop browser will work “as is” in a mobile browser. Not.
• There most definitely are differences and, if you’re not aware of them, they can definitely bite you.
• The HTML5 <video> tag’s autoplay functionality, for example, doesn’t work on mobile browsers. Similarly, the
CSS transition and opacity properties are not supported (or at least are not consistently supported) in most
mobile browsers nowadays.
• You will also have problems with some web API methods on a mobile platform, such as the SoundCloud music
streaming API that requires Adobe Flash which is not supported on most mobile devices.
• complicating factor in mobile web application development is that the lifespan of mobile devices tends to be
much shorter than that of desktop displays
• While working in a browser does somewhat alleviate this issue by shielding you from a number of device-
specific issues, you will still need to design a browser-based view that supports many different screen
resolutions (as well as adjusting appropriately for landscape and portrait orientations).
Mobile Web Application Frameworks
To optimize the performance of your mobile web applications and minimize latency we can consider the
following:
• Image Optimization: Image load time is well-known to be one of the biggest performance issues affecting
page load on mobile devices.
• Code compression: Compressing your JavaScript and CSS files, depending on the amount of code you have,
can potentially have a significant impact on performance.
• Database queries: Some mobile device browsers don’t accept as many cookies as desktop browsers do, which
can result in the need to execute even more queries than usual.
• Server-side caching is therefore especially crucial when supporting mobile web app clients.
• Content delivery networks (CDN): If you are planning to provide lots of videos, images, audio files, or other
types of media, use of a CDN is highly recommended
Advantages of using a CDN:
• Improved download performance: Leveraging a CDN’s resources enables you to distribute load, save
bandwidth, and boost performance.
• More concurrent downloads: Browsers typically limit the number of concurrent connections to a single
domain, after which additional downloads are blocked until one of the previous downloads has completed.
• Enhanced analytics: Many commercial CDNs provide usage reports that can supplement your own website
analytics and which may offer a better quantification of video views and downloads.
Mobile Web Application Frameworks
Mobile Web App Development Tools
• As mobile web app development tend to create many of the same common challenges
– such as cross-browser compatibility and inconsistent HTML and CSS in mobile browsers
– frameworks have been developed (based on HTML5 and CSS3) that are specifically designed to address these
issues and to work as flawlessly as possible on a wide array of smart phones and tablets.
• Most of these mobile web app frameworks are lightweight, which helps facilitate fast mobile web browsing
without compromising the look and feel of your site.
• jQuerydesktop version, jQuery Mobilefor mobile web app. It has a widget library that converts semantic
markup into a gesture-friendly format, making operations easy on touch-screens.
The latest version consists of a really lightweight code base that packs a punch with a lot of graphical elements
that really can improve your UI.
• Sencha TouchIt offers excellent performance overall and helps produce a mobile web user interface that
largely looks and feels like a native one. Its full-featured widget library is based on Sencha’s ExtJS JavaScript
library.
Mobile Web Application Frameworks
Responsive Frameworks and Mobile Web Applications
• An increasing number of responsive frameworks have begun cropping, two of the currently most popular
being Bootstrap and Foundation.
• Responsive frameworks simplify and streamline web-based responsive UI design and implementation,
encapsulating the most common layouts and UI paradigms into a reusable, performance-optimized
framework. Mostly based on CSS and JavaScript, many of these frameworks are open-source, free to
download, and easily customizable.
• Unless you have a highly peculiar set of requirements, it is likely that use of one of these frameworks will
reduce the level-of-effort to design and implement your mobile web application.
Quasar Framework-
License:MIT, Mobile targets:Android, Blueberry, iOS, Windows Phone, Web; Platforms:Windows, Linux, Mac,
Web; Supported languages:Javascript, Typescript
Onsen UI  provides very clear, well-written and detailed documentation. It uses popular technologies that are
likely already familiar to developers (such as jQuery and Angular). The framework is semantic and intuitive to
use, making it quite fast to learn.
License:Apache 20.0
Mobile targets:iOS, Android