Embedding web browser

in your app

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved.

 Contents
Web control
– Basic
– Event Handling
– JavaScript Handling
Other ways to use web
– AppControl

*This material is based on bada SDK 1.0.0b3

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 2
Web control (Basic)
1. What is web control?
2. Using the web control

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 3

Web control
Embedded browser (engine) in your application
Webkit-based browser(Dolfin)
Application

Web control

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 4

Making a Google Search app

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 5

Using the web control
Create a web control
Add a web control to a container (ex. Form)
Load a URL

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 6

Before you use a web control(1/2)

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 7

Before you use a web control(2/2)

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 8

Step 1: Create a web control
result
Form1::OnInitializing(void)
{
result r = E_SUCCESS;

__pWebControl = new Web();

__pWebControl->Construct(Rectangle(0, 120, 480, 680));

return r;
}

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 9

Step 2: Add it to a container
result
Form1::OnInitializing(void)
{
result r = E_SUCCESS;

__pWebControl = new Web();

__pWebControl->Construct(Rectangle(0, 120, 480, 600));

Form* pForm = static_cast<Form*>(GetControl(L"IDF_FORM1"));

pForm->AddControl(*__pWebControl);

return r;
}

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 10

Step 3: Load a URL
To search using Google:
– http://www.google.com/m?q=<keywords>

EditField* pEdit =
static_cast<EditField*>(GetControl(L"IDC_EDITFIELD1"));

String query = pEdit->GetText();

String str(L"http://www.google.com/m?q=");
str.Append(query);

__pWebControl->LoadUrl(str);

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 11

Web control: Event Handling

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 12

Getting info from loaded page

I want to save
user’s choice

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 13

Set web control events handler
Loading listener (ILoadingListener interface)
– Get internal status of web control

UI listener Web control listener

AddXXXListener(const IXXXListener&) SetXXXListener(const IXXXListener*)
RemoveXXXListener(…) SetXXXListener(null)

__pWebControl = new Web();

__pWebControl->Construct(Rectangle(0, 120, 480, 680));
__pWebControl->SetLoadingListener( /* LoadingListener */);

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 14

Event handler
ILoadingListener interface
– OnLoadingStarted()
– OnLoadingCanceled()
– OnLoadingCompleted()
–…

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 15

Event handler
ILoadingListener interface
– OnLoadingStarted()
– OnLoadingCanceled()
– OnLoadingCompleted()
–…

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 16

Adding a URL to an option menu
void
Form1::OnLoadingCompleted(void)
{
String title = __pWebControl->GetTitle();
String url = __pWebControl->GetUrl();

// Add title & URL to option menu

}

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 17

Handle history (1/2)
PageNavigationList class

item: 1 item: 0

Most recent item has the larger number

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 18

Handle history (2/2)
Get a PageNavigationList from web control
PageNavigationList* pNav = __pWebControl->GetBackForwardListN();

Get the current index

int currentIndex = pNav->GetCurrentIndex();

Get a HistoryItem
const HistoryItem* pItem = pNav->GetItemAt(index);
String title = pItem->GetTitle();
String url = pItem->GetUrl();

Delete the PageNavigationList instance

delete pNav;

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 19

Tip: Intercepting web control(1/2)
Two chances intercepting the web control

First: Before processing a URL

– OnLoadingRequested()
bool
XXX::OnLoadingRequested(const String& url, WebNavigationType type)
{
// if you want handle your own work
return true;

// if you want browser do continue

return false;
}

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 20

Tip: Intercepting web control(2/2)
Second: When the first data chunk is received
– OnWebDataReceived()

Osp::Web::Controls::DecisionPolicy
XXX::OnWebDataReceived(const String& mime, HttpHeader &httpHeader)
{
// if you handle data by yourself
return WEB_DECISION_IGNORE;

// if you want browser handles data

return WEB_DECISION_CONTINUE;
}

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 21

Demo: Google Search
Demo Sequence:
– Run Google Search Application
– Search with Google
– Show user’s selected URL

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 22

Web control: Handling JavaScript
1. Using Google Maps
2. Making maps interactive with bada UI
3. Geolocation

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 23

Controlling Google Maps

+ -

WebControl

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 24

Using Google Maps in bada
Using Google Maps JavaScript API V3
– Embed Google Maps in your web pages
– You do not need to generate a Google map
key

– http://code.google.com/intl/en/apis/maps/docu
mentation/v3/

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 25

Google Map display
Main code
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(/* HTML Container */, myOptions);

Map methods
 map.setCenter(/* coordinate */)
 map.setZoom(/* zoom level */)
 map.getZoom()

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 26

Making maps interactive
Step 1: Make a global instance
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}

</script>

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 27

Making maps interactive
Step 1: Make a global instance
<script type="text/javascript">
var map;
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}

</script>

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 28

Making maps interactive
Step 2: Use the EvaluateJavascriptN() method
int
Form1::GetZoomLevel()
{

String* pStr;
pStr = __pWebControl->EvaluateJavascriptN(L"map.getZoom();");
if (null == pStr)
{
return -1;
}

int zoomLevel;
Integer::Parse(*pStr, zoomLevel);

delete pStr;
return zoomLevel;
}

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 29

cf. SetZoom
void
Form1::SetZoomLevel(int zoomLevel)
{
String str;
str.Format(50, L"map.setZoom(%d);", zoomLevel);
String* pStr = __pWebControl->EvaluateJavascriptN(str);
delete pStr;
}

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 30

Geolocation API
JavaScript API for getting current location

navigator.geolocation.getCurrentPosition
( /* success callback */, /* error callback */ );

function sucessCallback(position) {
initialLocation = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
map.setCenter(initialLocation);
}

function errorCallback() {
initialLocation = //default location;
map.setCenter(initialLocation);
}

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 31

Google Map + Geolocation

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 32

Demo: Geolocation
Demo Sequence:
– Run application
– Using Event Injector
– Display the current location
– Show interaction between bada UI and web
control

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 33

Other ways to use web

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 34

2 ways to use a web browser
WebControl
AppControl (Browser)

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 35

Differences
Web control
– Embed a web browser in your application

AppControl (Browser)
– Launch the web browser
– Your application and the browser work
simultaneously

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 36

AppControl
A mechanism to use specific operations
exported by other applications

APPCONTROL_CALENDAR APPCONTROL_MEDIA
Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 37
Using AppControl (Browser)
Build a URL string
Build URL strings as an ArrayList
Find the AppControl for the browser
Launch the AppControl
– Start(const IList*,
const IAppControlEventListener* )
Clean up

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 38

Step 1: Build a URL String
Add the prefix “url:”
String* pUrl = new String(L"url:http://yahoo.co.uk");

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 39

Step 2: Build an ArrayList
Use an ArrayList as a parameter for AppControl
String* pUrl = new String(L"url:http://yahoo.co.uk");

ArrayList* pDataList = new ArrayList();

pDataList->Construct();
pDataList->Add(*pUrl);

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 40

Step 3: Find AppControl
APPCONTROL_BROWSER
String* pUrl = new String(L"url:http://yahoo.co.uk");

ArrayList* pDataList = new ArrayList();

pDataList->Construct();
pDataList->Add(*pUrl);

AppControl* pAc =
AppManager::FindAppControlN(APPCONTROL_BROWSER,"");

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 41

Step 4: Launch the browser

String* pUrl = new String(L"url:http://yahoo.co.uk");

ArrayList* pDataList = new ArrayList();

pDataList->Construct();
pDataList->Add(*pUrl);

AppControl* pAc =
AppManager::FindAppControlN(APPCONTROL_BROWSER,"");
if (pAc)
{
pAc->Start(pDataList, null);
delete pAc;
}

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 42

Step 5: Clean up

String* pUrl = new String(L"url:http://yahoo.co.uk");

ArrayList* pDataList = new ArrayList();

pDataList->Construct();
pDataList->Add(*pUrl);

AppControl* pAc =
AppManager::FindAppControlN(APPCONTROL_BROWSER,"");
if (pAc)
{
pAc->Start(pDataList, null);
delete pAc;
}

pDataList->RemoveAll(true);
delete pDataList;

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 43

Demo: AppControl
Demo Sequence:
– Run application
– Show different aspects of Web control

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 44

Summary

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 45

What we have learned
bada provides Dolfin(webkit-based) browser
2 ways to use the browser
– Web control (browser is inside your app)
– AppControl (browser is outside your app)
Web control
– Basic functions (LoadUrl)
– Event handling
– JavaScript handling

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 46

Find out more
Tutorial:
– bada Tutorial.Web.pdf

Samples:
– WebViewer

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 47

Dive into
Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 48
Appendix

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 49

Supported “HTML5” in bada
Samsung bada includes the webkit-based Dolfin browser

HTML5
– Canvas: 2D vector drawing
– Audio / Video : Embedded player for audio and video

Rich Web Application

– Geolocation: Location information
– Web Storage: Local cache/database
– Web Workers: Threads

CSS3

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 50

More examples

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 51

Help: Setting proxy (Simulator)
In the simulator:

Push Home key

Settings > Connectivity >
Network > Connection > bada

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 52

Help: Setting proxy (Device)
Settings > Connectivity > Wi-Fi
Click on AP name

Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 53