LECTURE 16-17: MOBILE WEB

ubiquitousstrumpetMobile - Wireless

Dec 10, 2013 (3 years and 4 months ago)

64 views

CSCE
485
: MOBILE APPLICATIONS
DEVELOPMENT (USING ANDROID)


LECTURE
16
-
17
: MOBILE WEB

Mohamed
Shalan

CSCE
485

Topics

2


WebKit


PhoneGap


JQuery

Mobile

Webkit

3

Embedding the
WebKit

Browser


In Android
you can embed the built
-
in
web browser
as a widget in your own activities, for displaying
HTML or full
-
fledged browsing
.


The
Android browser is based on
WebKit
, the same
engine that
powers Apple’s
Safari
and Chrome web
browsers.


android.permission.INTERNET

permission must be
requested and granted


Embedding the
WebKit

Browser

1.

Add
WebView

widget to your layout

Embedding the
WebKit

Browser

2.
Java Code

Embedding the
WebKit

Browser


By
default, JavaScript is turned off
in
WebView

widgets. If you want to enable JavaScript,
call
browser.g
etSettings
().
setJavaScriptEnabled
(true);


on
the
WebView

instance.


You
could replace the
loadUrl
(
)
with the
following:

browser.loadData
(


"<
html><body>Hello, world!</body></html
>”,"
text/html", "UTF
-
8
");

WebView

Methods


WebView

offers ways to perform
browser
navigation,
including
the following
methods:


reload
():
Refreshes the currently viewed web page.


goBack
():
Goes back one step in the browser history
.


canGoBack
():
Determines if there is any history to go
back
to.


goForward
():
Goes forward one step in the browser
history.


canGoForward
():
Determines if there is any history to go
forward
to.


clearCache
():
Clears the browser resource
cache.


clearHistory
():
Clears the browsing history.

HTML

9


Created by Tim Berners
-
Lee at CERN


Open standard developed under supervision of the World Wide
Web Consortium (
www.w
3
.org
)


HTML is written in the form of HTML elements consisting of
tags
,
enclosed in angle brackets (like
<html>
)


The purpose of a web browser is to read HTML documents and
compose them into visible or audible web pages.


The browser does not display the HTML tags, but uses the tags to
interpret the content of the page.


HTML document can embed scripts in languages such as JavaScript
which affect the behavior of HTML
webpages
.


Web browsers can also refer to Cascading Style Sheets (CSS) to
define the appearance and layout of text and other material.



HTML

10

Unordered
list

Document
Head

Document
Body

CSS

11


Cascading Style Sheets (CSS) is used to describe
the look and formatting of a document written in a
markup language such as HTML.

CSS

12

Styling the

document body

Create a custom

style

tells the CSS to look for an

HTML tag with the id highlight

JavaScript

13


Javascript

was created by Netscape in
1985
(Mocha
then
LiveScript

and finally JavaScript in
1995
).


JavaScript is a scripting language that can be added to
an HTML page to make it more interactive and
convenient for the user.


you can write some JavaScript that will inspect the values
typed in a form to make sure they are valid; or


you can have JavaScript show or hide elements of a page
depending on where the user clicks.


JavaScript can even contact the web server to execute
database changes without refreshing the current web page
(AJAX).

JavaScript

14

JavaScript & Java

15


Using
WebKit

view allows us to build applications
using HTML & JavaScript (web application).


Problem: This approach is useful for simple
applications.


How about applications that requires the usage of
phone resources (such as GPS)?


We can extend the functionality by extending JS
capabilities using JAVA objects

Bridging JS & Java

16

Bridging JS & Java

17

Bridging JS & Java

18

Bridging JS & Java

19

Building Apps using Web Technologies

20


It is obvious that we can use: HTML, JS & CSS to create
an application that runs inside a browser


Google Mail is built this way


For Android, we can do the same


Create a dummy application that has a single activity with a
single
WebView


Write your application using HTML, JS & CSS


Advantage: Your web app can run on any platform that has
webkit

browser (for example:
iOS
)


Disadvantage: Your application will be limited in features.
Why? How solve that?


HTML
5
& Exposing Java Objects


HTML
5

21


The fifth revision of the

HTML

standard


As of today it is still under development!


But many of its features are implemented by
webkit

engine


Adding new Mobile Features



New elements
<video>,

<audio>

and

<canvas>



Offline Support:
AppCache

and Web SQL database


Geolocation

API

HTML
5

22


AppCache


Allows a developer to specify which files the browser should cache and make
available to offline users.


The Applications will load and work correctly, even if the user presses the
refresh button while they're offline.

<html manifest="http://www.example.com/example.mf">

...

</html>



HTML
5

23


Geolocation

API


Market Fragmentation



Even Google was not rich enough to support all of
the different mobile platforms from Apple

s
AppStore to those of the BlackBerry, Windows
Mobile, Android and the many variations of the
Nokia platform




-

Vic Gundotra, Google Engineering VP

24

Mobile Apps Options


Native


Web


Hybrid


25

Mobile Web Apps

Online Web App





26

Mobile Web Apps

Online Web App





Offline Web Enabled App




27

Mobile Web Apps

Online Web App





Offline Web Enabled App




Offline Web App



28

Mobile Web Apps

Online Web App





Offline Web Enabled App




Offline Web App




Hybrid Web App

29

Mobile App Battle!

30

Hybrid Mobile Web App

31


App


HTML
5
, JavaScript & CSS


UI & Application Framework


JQ Mobile, Sencha Touch, Enyo JS, ….


App packaging & Device Integration


PhoneGap, Titanium,….

Cross Platform Strategies

Common
Platform

e.g

WebKit

Mapping to
Native

PhoneGap

Titanium

Cross Platform

Source Code

32

PhoneGap

33

PhoneGap

34

PhoneGap


It's a tool for building mobile apps using web
-
tech
.


HTML for layout ( Better yet HTML
5
)


JavaScript for accessing device functionality


CSS for rich look and feel. ( Better yet CSS
3
)


PhoneGap

applications are web pages that access
device functionality.


Apps
can still provide a rich experience, especially
with CSS transitions and
animations.


CSS Transitions are hardware accelerated on the
iPhone!


There are games built with
PhoneGap

utilizing
HTML
5
Canvas element!


PhoneGap



Sample App

36

With
PhoneGap

you can

37

PhoneGap


Features


HTML
5
, CSS
and
JS


Native
APIs


Cross
platform


Installable
Apps


Open source


Use Famous JS Libs


JQTouch


JQuery


EnyoJS


Jo


….

PhoneGap

39


Core API’s


Geo: Make your application location aware.


Contacts


Accelerometer: Access on device motion sensors


Device: Gather device specific information.


Network: Quickly check the network state.


Camera


Events: Hook into native events through JavaScript.


Notification:
Visual and audible device
notifications.


File: Hook into native file system through JavaScript.


More at
docs.phonegap.com


To make things easier in development you can install MDS
AppLaud

Eclipse Plugin.

PhoneGap


Build your app once with web
-
standards


HTML for layout ( Better yet HTML
5
)


JavaScript for accessing device functionality


PhoneGap provides a bridging library to access
the device features


Many JS frameworks started to emerge for
mobile devices: JQM, Sench Touch, Jo, Enyo, ….


CSS for rich look and feel. ( Better yet CSS
3
)



40

PhoneGap


Build your app once with web
-
standards




Wrap it with PhoneGap


41

PhoneGap


Build your app once with web
-
standards




Wrap it with PhoneGap




Deploy to multiple platforms!


42

PhoneGap

43

PhoneGap

44


Recently
PhoneGap

came up with
build.phonegap.com

(Beta)


Write Once. Compile in the cloud. Run anywhere.


Take the pain out of compiling mobile apps for multiple
platforms


PhoneGap

Example: Camera

45

function
capturePhoto
() {


navigator.camera.getPicture
(
onPhotoDataSuccess
,
onFail
, { quality:
50
});

}

function
onPhotoDataSuccess
(
imageData
) {


var

smallImage

=
document.getElementById
('
smallImage
');


smallImage.style.display

= 'block';


smallImage.src = "
data:image
/jpeg;base
64
," +
imageData
;

}

function
onFail
(
mesage
) { alert('Failed because: ' + message); }


<body
onload
="
onLoad
()">

<button
onclick
="
capturePhoto
();">Capture Photo</button> <
br
>

<
img

style="display:none;width:
60
px;height:
60
px;" id="
smallImage
"
src
="" />

</body>

</html>

JQuery

Mobile

46


“A unified, HTML
5
-
based user interface system for all popular
mobile device platforms, built on the rock
-
solid
jQuery

and
jQuery

UI foundation. Its lightweight code is built with
progressive enhancement, and has a flexible, easily theme
-
able design”.

JQuery

Mobile

47


Always the creation of the same “nice” UI across all
supported platforms

Apps use
Jquery

Mobile

48

JQuery

Mobile Example

49


More
at
http://jquerymobile.com/demos/
1
.
1
.
0
/

<head>

<link
rel
="
stylesheet
"
href
="http://code.jquery.com/mobile/
1
.
0
a
1
/jquery.mobile
-
1
.
0
a
1
.min.css" />

<script
src
="http://code.jquery.com/jquery
-
1
.
4
.
3
.min.js"></script>

<script
src
="http://code.jquery.com/mobile/
1
.
0
a
1
/jquery.mobile
-
1
.
0
a
1
.min.js"></script>

</head>


Loading the library
and the style sheet

JQuery

Mobile Example:

Multiple Pages in one file

50

Internal Linking

Jquery

Mobile: Transitions & Events

51


Page Transitions:
slide,
slideup
,
slidedown
, pop,
fade, flip


<
li
><a
href
=“
2
.html"
data
-
transition="flip">Local Page</a></
li
>


Events


Touch events: tap,
taphold
, swipe,
swipeleft
,
swiperight


Orientation change event:
orientationchange


Page show/hide events:
pagebeforeshow
,
pagebeforehide
,
pageshow
,
pagehide


Page initialization events:
pagebeforecreate
,
pagecreate



Events

<html>

<head>

<title>
jQuery

Mobile Events</title>

.

.

<script type="text/
javascript
">


$( function() {


$('body').bind( '
taphold
', function( e ) {


alert( 'You tapped and held!' );


e.stopImmediatePropagation
();


return false;


} );




$('body').bind( 'swipe', function( e ) {


alert( 'You swiped!' );


e.stopImmediatePropagation
();


return false;


} );




} );


</script>




</head>

<body>

<div data
-
role="page" id="home">


<div data
-
role="header">


<h
1
>
jQuery

Mobile Events</h
1
>


</div>


<div data
-
role="content">


<p>Try:</p>


<
ul
>


<
li
>Tapping and holding</
li
>


<
li
>Swiping</
li
>


</
ul
>


</div>


</div>

</body>

</html>



52

JQuery

Mobile Tools

53

More resources can be fond
here
.

PhoneGap

& JQM Tutorials

54


More can be found
here