Embed Size (px)
Citation preview
INTRODUCTION TO ANDROID USING PHONEGAP
SANTHI J KRISHNANOR I SYS I N DIA CON SULTA NCY SERVI CES
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>
WWW.ORISYS.IN 5
Example:
<html><body>
<a href="http://www.gmail.com">Gmail</a>
</body></html>
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 :
<!-- some text -->
WWW.ORISYS.IN 6
Example:
<html><body>
<!--It will not be displayed-->
<h3>Plant Trees </h3>
</body></html>
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: <input type="text" id=“firstname ” name=“firstname :" /> <br />
Last name: <input type="text" id=“lastname ” name=“lastname :" />
</form>
WWW.ORISYS.IN 8
First name :
Last name :
Html Forms
Radio Buttons :
<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
WWW.ORISYS.IN 9
Checkboxes :
<form>
Bike: <input type="checkbox" name="vehicle"
value="Bike"/> <br />
Car: <input type="checkbox" name="vehicle"
value="Car"/><br />
</form>
What can we do with JavaScript?
WWW.ORISYS.IN 10
To create interactive user interface in a web page (e.g., menu, pop-up alert, windows, etc.)
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("<hr>");
document.write("Hello World Wide Web");
document.write("<hr>");
Use the src attribute to include JavaScript codes from an external file.
Functions (Return Values)
WWW.ORISYS.IN 13
// A function can return value of any type using the// keyword "return".
// The same function can possibly return values // of different types
function foo (p1) {if (typeof(p1) == "number")
return 0; // Return a numberelseif (typeof(p1) == "string")
return "zero"; // Return a string
// If no value being explicitly returned // "undefined" is returned.
}
foo(1); // returns 0foo("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"),….
WWW.ORISYS.IN 15
Tag Class
JavaScript : document.getElementsByClassName("className");
JQuery : $(".className")
Example : $(".comment"), $(".code"),……
To select all elements
JQuery : -$("*")
WWW.ORISYS.IN 16
Introduce a jQuery function by using the below syntax:
$(document).ready(function(){
$("p").click(function()
{
$(this).hide();
});
}); :Clicked paragraph will become hidden
Enable Jquery in your page
jQuery can be enabled in your page by including reference to jQuery library file
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
jQuery Selectors
WWW.ORISYS.IN 17
$("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.
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.
18WWW.ORISYS.IN
Android Versions
19WWW.ORISYS.IN
Android Architecture
The software stack is split into Four Layers:
The application layer
The application framework
The libraries and runtime
The kernel
20WWW.ORISYS.IN
21WWW.ORISYS.IN
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
22WWW.ORISYS.IN
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.
23WWW.ORISYS.IN
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
24WWW.ORISYS.IN
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
25WWW.ORISYS.IN
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 siteAdd the mobile SDKsSay it is mobile appBuild and deploy
In both the concrete OS SDK must be present
26WWW.ORISYS.IN
Contact
SANTHI J KRISHNAN
ANDROID DEVELOPER
E MAIL : [email protected]
TWITTER : @santhijkrishnan
ORISYSINDIA CONSULTANCY SERVICES
TBIC3, THEJASWINI BUILDING
TECHNOPARK,TRIVANDRUM
KERALA - 695 581, INDIA
TEL : +91 8086 800 203
E MAIL : [email protected]
WWW.ORISYS.IN
WWW.ORISYS.IN 28
THANK YOU
