Tizen Hybrid Application · Tizen Hybrid Application (Tizen Ver. 2.3) 2 Unit 4-1. Introduction of...
Transcript of Tizen Hybrid Application · Tizen Hybrid Application (Tizen Ver. 2.3) 2 Unit 4-1. Introduction of...
11
Spring 2015
Soo Dong Kim, Ph.D.Professor, Department of Computer Science
Software Engineering Laboratory
Soongsil UniversityOffice 02-820-0909 Mobile [email protected] 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 !