Introduction to Android using PhoneGap

INTRODUCTION TO ANDROID USING PHONEGAP
SANTHI J KRISHNAN
ORI SYSINDIA CONSULTANCY SERVICES

Outline
HTML
JavaScript
JQuery
Android
PhoneGap
Workshop – Application Development
WWW.ORISYS.IN 2

Introduction to HTML
HTML – Hyper Text Markup Language
HTML documents describe web pages (Static Web Page)
HTML tags are keywords surrounded by angle brackets like <html>
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tag (opening tags), the second tag is the end tag(closing tags)
WWW.ORISYS.IN 3

WWW.ORISYS.IN 4
Sample Code
<html>
<head>
</head>
<body>
<h1>First Planet</h1>
<h6>First Planet</h6>
</body>
</html>
First Planet
First Planet
O/P :
 <html> .... </html> describes the web page
 <body> ..... </body> is the visible page content
 <head> ..... </head> can include scripts, instruct the browser
where to find style sheets, provide meta information, and more.

Link Tag
Html Links :
 Html links are defined with the <a> tag
Syntax :
 <a href="http://www.gmil.com">Gmail</a>
Example:
<html>
<body>
<a href="http://www.gmail.com">Gmail</a>
</body>
</html>
WWW.ORISYS.IN 5

Html Comments
Comments can be inserted in the HTML code to make it more readable and
understandable. Comments are ignored by the browser and are not displayed.
Syntax :

Example:
<html><body>

<h3>Plant Trees </h3>
</body></html>
WWW.ORISYS.IN 6

Html Forms
HTML Forms are used to select different kinds of user input.
A form is an area that can contain form elements.
Form elements are elements that allow the user to enter information like,
Text fields
Text area fields
Drop-down menus
Radio buttons
Checkboxes
WWW.ORISYS.IN 7

Html Forms
Text Fields:
Text fields are used when you want the user to type letters, numbers, etc. in a
form.
Example :
<form>
First name :
Last name :
First name: <input type="text" id=“firstname ” name=“firstname :" /> <br />
Last name: <input type="text" id=“lastname ” name=“lastname :" />
</form>
WWW.ORISYS.IN 8

Html Forms
Radio Buttons :
<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
Checkboxes :
<form>
Bike: <input type="checkbox" name="vehicle"
value="Bike"/> <br />
Car: <input type="checkbox" name="vehicle"
value="Car"/><br />
</form>
WWW.ORISYS.IN 9

What can we do with JavaScript?
To create interactive user interface in a web page (e.g., menu, pop-up
alert, windows, etc.)
WWW.ORISYS.IN 10
Manipulating web content dynamically
Change the content and style of an element
Replace images on a page without page reload
Hide/Show contents
Generate HTML contents on the fly
Form validation
AJAX (e.g. Google complete)

Sample Script
WWW.ORISYS.IN 11
<html>
<head>
<title>First JavaScript Page</title>
<script type="text/javascript">
document.write("<hr>");
document.write("Hello World Wide Web");
document.write("</hr>");
</script>
</head>
<body>
<h1>First JavaScript Page</h1>
</body>
</html>

Embedding JavaScript
WWW.ORISYS.IN 12
<html>
<head>
<title>First JavaScript Program</title>
<script type="text/javascript"
src="your_source_file.js"></script>
</head>
<body>
</body>
</html>
Inside your_source_file.js
document.write("Hello World Wide Web");
Use the src attribute to include JavaScript codes from an external file.

Functions (Return Values)
// A function can return value of any type using the
// keyword "return".
// The same function can possibly return values
// of different types
WWW.ORISYS.IN 13
function foo (p1) {
if (typeof(p1) == "number")
return 0; // Return a number
else
if (typeof(p1) == "string")
return "zero"; // Return a string
// If no value being explicitly returned
// "undefined" is returned.
}
foo(1); // returns 0
foo("abc"); // returns "zero"
foo(); // returns undefined

jQuery – a JavaScript library
It is a JavaScript library
It has a large number of functions
Elements can be selected using element name, class name and ID
It can be executed even before the page is completely loaded
Faster and smoother animations
WWW.ORISYS.IN 14

Basic selectors
Tag Name
JavaScript : document.getElementsByTagName("tagName");
JQuery : $("tagName")
Example : $("div"), $("p"), $("div"),.....
Tag ID
JavaScript : document.getElementById("id");
JQuery : $("#id")
Example : $("#name"), $("#address"),….
Tag Class
JavaScript : document.getElementsByClassName("className");
JQuery : $(".className")
Example : $(".comment"), $(".code"),……
To select all elements
JQuery : -$("*")
WWW.ORISYS.IN 15

Enable Jquery in your page
 jQuery can be enabled in your page by including reference to jQuery library file
Introduce a jQuery function by using the below syntax:
$(document).ready(function(){
WWW.ORISYS.IN 16
$("p").click(function()
{
$(this).hide();
});
}); :Clicked paragraph will become hidden
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

jQuery Selectors
$("p").hide()
Demonstrates the jQuery hide() method, hiding all <p> elements.
$("#test").hide()
Demonstrates the jQuery hide() method, hiding the element with id="test".
$(".test").hide()
Demonstrates the jQuery hide() method, hiding all elements with class="test".
$(this).hide()
Demonstrates the jQuery hide() method, hiding the current HTML element.
WWW.ORISYS.IN 17

What is Android ?
 An open source software stack for mobile devices that includes an operating system,
middleware and key applications.
 Based on the Linux kernel
 Android has its own virtual machine (Dalvik Virtual Machine) which is used for executing
the android application.
 Google acquired CA based start-up Android, Inc. - initial developers of the Android mobile
device platform, incorporated in 2005.
WWW.ORISYS.IN 18

Android Versions
WWW.ORISYS.IN 19

Android Architecture
The software stack is split into Four Layers:
 The application layer
 The application framework
 The libraries and runtime
 The kernel
WWW.ORISYS.IN 20

About Phonegap
 PhoneGap is an open-source mobile development framework
 Developed by Nitobi Software
 Bought by Adobe
 Enables building of mobile applications using JavaScript, HTML and CSS depending upon the
platform of the device
WWW.ORISYS.IN 22

PhoneGap Applications
 The software underlying PhoneGap is Apache Cordova
 Much of the functions of HTML5 are supported
 The PhoneGap applications support Android, iPhone, Windows Phone, BlackBerry, Bada,
Symbian, webOS, Tizen hence it is known to be hybrid
 A disadvantage is that hybrid applications do not have full access to the device APIs
Camera, compass, accelerometer, etc.
WWW.ORISYS.IN 23

How does it work ?
 Build your app once with web-standards
 Based on HTML5,CSS,JS,Jquery etc.
 Wrap it up with PhoneGap
 Using the free open source framework or PhoneGap build,
you can access the native APIs
 Deploy to multiple platforms
 Standards-based web technologies to bridge web applications and mobile
devices
WWW.ORISYS.IN 24

Means of PhoneGap Development
 PhoneGap is just a library that you must include in your app
 Couple of JavaScript and xml files
 What is PhoneGap doing?
 PhoneGap generates an out-of-the-browser window that executes the HTML and
JavaScript
 Due to a couple of xml and jar/dll files it enables the usage of native APIs
WWW.ORISYS.IN 25

Where can we Develop ?
 Native IDE for the corresponding OS
 Eclipse, Xcode, Visual Studio, etc.
 Abode launched a new version of Dreamweaver that integrates with
PhoneGap
Build the web site
Add the mobile SDKs
Say it is mobile app
Build and deploy
 In both the concrete OS SDK must be present
WWW.ORISYS.IN 26

• feedback @ santhi.j.krishnan@orisys.in
• download slides here : bit.ly/1xmX7bM
WWW.ORISYS.IN 27

Contact
SANTHI J KRISHNAN
ANDROID DEVELOPER
E MAIL : santhi.j.krishnan@orisys.in
TWITTER : @santhijkrishnan
ORISYSINDIA CONSULTANCY SERVICES
TBIC3, THEJASWINI BUILDING
TECHNOPARK,TRIVANDRUM
KERALA - 695 581, INDIA
TEL : +91 8086 800 203
E MAIL : contact@orisys.in
WWW.ORISYS.IN
WWW.ORISYS.IN 28

Introduction to Android using PhoneGap

Recommended

Recommended

More Related Content

What's hot

What's hot (12)

Viewers also liked

Viewers also liked (19)

Similar to Introduction to Android using PhoneGap

Similar to Introduction to Android using PhoneGap (20)

Introduction to Android using PhoneGap