PhoneGap & jQueryMobile

A brief introduction by Binibook

Binibook Intro

What is Binibook?

● Binibook brings the YouTube concept to text

○ Anyone can publish books, poems, short stories... easily!

○ Anyone can read the texts through the platform.

The Binibook Platform

The Website

○ To publish, discover, read and share.

binibook.com

The Binibook Platform

Coming...

The Mobile Applications

○ To discover, read and share everything.

Binibook: Price by Popularity

Binibook offers to writers 3 payment methods for their publications:

● Always free● Payment (from € 0.99 to € 6.99)● Price by popularity

Writers can choose it freely. The 95% of publications have "Price computed by

popularity".

PhoneGap & jQueryMobile

PhoneGap: Intro

PhoneGap: Featured Apps

What does PhoneGap?

● Mobile platform abstraction

● Code unification: HTML5, CSS & JS● Mapping of

native functionalities (camera, files, geolocation, etc.)

PhoneGap: Supported Features

PhoneGap: Example

Take a photo and retrieve the image:

PhoneGap: Based On...

All mobile platforms has a native webview control.

For example, in Android, you can load a web page into your app doing:

PhoneGap: Based On...

Keypoint: the webview javascript interface.

The webview control offers access to native functionalities using the javascript interface.

webview.addJavascriptInterface( MyJSInterface, "MyJSInterface" );

public class MyJSInterface {

private WebView mAppView;public MyJSInterface (WebView appView) { this.mAppView = appView; }

public void doEchoTest(String echo) { Toast toast = Toast.makeText(mAppView.getContext(), echo, Toast.LENGTH_SHORT); toast.show(); }}

Android.doEchoTest('Holaaa');

JAVA

JAVASCRIPT

PhoneGap: Ugly Things

● No server-side process (PHP, JSP...)

○ Internationalization is difficult○ Database access○ Gallery access

● Solved by:○ Ajax calls to webservices. ○ HTML5 features: WebSQL, LocalStorage,

SessionStorage...

jQueryMobile: Intro

jQueryMobile: Featured Apps

What does jQueryMobile?

● Make a website looks like mobile app.● Offers a set of methods to make powerful apps.

jQueryMobile: Key Features

● Built on jQuery core.

● Compatible with all major mobile, tablet,

e-reader & desktop platforms.

● HTML5 Markup-driven configuration.

● Touch and mouse event support.

● Powerful Ajax-powered navigation

system.

jQueryMobile: Ajax Navigation

See a demo here

jQueryMobile: The Theme Roller

jQueryMobile has 4 default themes. You can create your own themes using:

See how it works here:http://jquerymobile.com/themeroller/

jQueryMobile: The Methods

jQueryMobile has powerful methods:● $.mobile.changePage()● $.mobile.showPageLoadingMsg()● $.mobile.silentScroll()

And events● Tap, taphold, swipe● Orientationchange● Page (load, beforeload, etc.)

That's all!

Some geek resources: