11

Spring 2015

Soo Dong Kim, Ph.D.Professor, Department of Computer Science

Software Engineering Laboratory

Soongsil UniversityOffice 02-820-0909 Mobile 010-7392-2220sdkim777@gmail.com http://soft.ssu.ac.kr

Tizen Hybrid Application(Tizen Ver. 2.3)

22

Unit 4-1. Introduction of Tizen Hybrid App

3© 2015 Soo Dong KimSW Design Principles

Overview of Hybrid App An application that runs on the device like native apps and is

written with web technologies (HTML5, CSS and JavaScript)

Pros

Easy to support multiple mobile devices and platforms Reusable UI Codes

Web UI and Native Services Data processing in background

Broader access to device hardware with native services

Rapid development using open-source native/web libraries

Cons

Additional effort for communicating between native and web

4© 2015 Soo Dong KimSW Design Principles

Bridging Methods bet. Native and Web Message Port

Platform Built-in

WebSocket

A protocol providing full-duplex communications channels over a single TCP connection

W3C Standard

JavaScriptBridge Plugin

Included in Tizen::Web::Controls namespace

Not supported from Tizen Ver. 2.3

Bridge Server

Having a server for bridging native and web

5© 2015 Soo Dong KimSW Design Principles

Communication thr. Message Port To utilize local message port and remote message port

The message data type for the communication is map data, which consists of a string key and value pair.

Pros

Tizen Built-in Method

Cons

Unidirectional

Native App Web App

«library»

message_portRemote Port

Local Port

Local Port

Remote Port

Message (Map Form)

Message (Map Form)

6© 2015 Soo Dong KimSW Design Principles

Communication thr. Web Socket To utilize WebSocket Client and Server

No constraint on data format

Pros

W3C Standard

Bidirectional

Cons

Relatively Expensive

Native App Web AppData

WebSocketServer

Data

WebSocketClient

7© 2015 Soo Dong KimSW Design Principles

Communication thr. Bridge Server To utilize remote bridge server

No constraint on data format

Flexible in selecting communication methods between Native App and Bridge Server

between Web App and Bridge Server

Pros

Additional Data Processing in Bridge Server

Cons

Expensive

Native App Web App

Datafrom Native

Bridge Server

Datafrom Native

Datafrom Web

Datafrom Web

88

Unit 4-2. Tizen Hybrid App Tutorial

(Tizen Ver. 2.3)

9© 2015 Soo Dong KimSW Design Principles

Simple Hybrid App To show how to communicate between Web Application and

Native Application

To use Message Port

Consists of two applications

Tizen web application To send user’s name to the service application

Tizen native service application To generate a hello message

Hello Messagesent from native app

10© 2015 Soo Dong KimSW Design Principles

Step 1. Creating Applications (1) To create a Native Service Application

New Project > Tizen > Tizen Native Project

Template > Service Application

11© 2015 Soo Dong KimSW Design Principles

Step 1. Creating Applications (2) To create a Web Application

New Project > Tizen > Tizen Web Project

Template > jQuery Mobile > Single Page Application

12© 2015 Soo Dong KimSW Design Principles

Step 2. Setting Privileges (1) To add one privilege

http://tizen.org/privilege/packagemanager.info To retrieve detailed package information

Package > tizen-manifest.xml > Privileges > Add

13© 2015 Soo Dong KimSW Design Principles

Step 2. Setting Privileges (2) To add two privileges

http://tizen.org/privilege/application.info To retrieve information of other applications

http://tizen.org/privilege/application.launch To launch other applications

Package > config.xml > Privileges > Add

14© 2015 Soo Dong KimSW Design Principles

Step 3. Packaging (1) To import the Native Application to the Web Application

Project > Properties > Project References

15© 2015 Soo Dong KimSW Design Principles

Step 3. Packaging (2) To build the Web Application

To check Native Application ID Used when the Web Application launches the Native Application

.wgt file > tizen-manifest.xml

16© 2015 Soo Dong KimSW Design Principles

Step 4. Implementing Native Service (1) To implement service apps with C-based Native API

void send_message(const char * remote_app_id, const char *name){bundle *b = bundle_create();char hello_message[20] = "Hello ";strcat(hello_message, name);bundle_add_str(b, "helloMessage", hello_message);

//To send a message through a specific message portmessage_port_send_message(remote_app_id, "SEND_HELLO_MESSAGE", b);bundle_free(b);

}

void message_port_cb(int local_port_id, const char *remote_app_id,const char *remote_port, bool trusted_remote_port, bundle *message) {char *name = NULL;bundle_get_str(message, "name", &name);

//To print received messagedlog_print(DLOG_INFO, "RECEIVE_NAME_CALLBACK", "Message from %s, name: %s ",remote_app_id, name);

//To send a message through a specific message portsend_message(remote_app_id, name);

}

To send a message ‘b’ with given app id and message port name

Invoked when other applications send messages

17© 2015 Soo Dong KimSW Design Principles

Step 4. Implementing Native Service (2) To implement service apps with C-based Native API (cont’d)

bool service_app_create(void *data) {// Todo: add your code here.

dlog_print(DLOG_INFO, "NativeService", "Created.");

//To open an interface invoked by other appsint local_port_id = message_port_register_local_port("RECEIVE_NAME",message_port_cb, NULL);if (local_port_id < 0) {

dlog_print(DLOG_ERROR, "NativeService", "Port register error : %d",local_port_id);

} else {dlog_print(DLOG_INFO, "NativeService", "port_id : %d", local_port_id);

}return true;

}

To register a callback function invoked when other applications send

messages

18© 2015 Soo Dong KimSW Design Principles

Step 5. Implementing Web Application To implement Web Application with Web API

// To launch native service apptizen.application.launch(nativeServiceAppId, function() {

console.log('success');}, function(err) {

console.log(err.message);});

// To open message portlocalMessagePort = tizen.messageport.requestLocalMessagePort("RECEIVE_HELLO_MESSAGE");

localMessagePort.addMessagePortListener(function(data, replyPort) {$("#hello_display_area").text(data[0].value);

});

$("#send_btn").click(function() {

// To open an message port to invoke message portvar remoteMessagePort =

tizen.messageport.requestRemoteMessagePort(nativeServiceAppId,"RECEIVE_NAME");

var name = $("#name").val();

// To send a messageremoteMessagePort.sendMessage([ { key : 'name', value : name} ], null)

});

To launch an service app with given application id

To create an instance for sending messages to the service app

To send a message

To create an instance for receiving messages from other apps

Invoked when other apps send messages to the web app

19© 2015 Soo Dong KimSW Design Principles

Step 6. Re-Packaging and Running To re-build the implemented web and native applications

Project > Build Package

To run the Web Application

Project > Run as > Tizen Web Application

20© 2015 Soo Dong KimSW Design Principles

Message Port Communication Trace

Web App Native App

Remote Port

Local Port

Local Port

Remote Port

SEND_NAME

SEND_HELLO_MESSAGE

1) To send a message to the native app

2) Invoked a callback method, ‘message_port_cb’

3) To send a message to the web app4) Invoked a callback method which displays the received message

_remoteMessagePort.sendMessage([ {key : 'name',value : name

} ], null)});

int local_port_id = message_port_register_local_port("SEND_NAME",message_port_cb, NULL);

message_port_send_message(remote_app_id, "SEND_HELLO_MESSAGE", b);

_localMessagePort.addMessagePortListener(function(data, replyPort) {_hello_display_area.text(data[0].value);

});

21© 2015 Soo Dong KimSW Design Principles

Thank You !