1. Embedding web browser in your app Copyright 2010 Samsung
Electronics, Co., Ltd. All rights reserved.
2. 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
3. Web control (Basic) 1. What is web control? 2. Using the web
control Copyright 2010 Samsung Electronics, Co., Ltd. All rights
reserved. 3
4. 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
5. Making a Google Search app Copyright 2010 Samsung
Electronics, Co., Ltd. All rights reserved. 5
6. 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
7. Before you use a web control(1/2) Copyright 2010 Samsung
Electronics, Co., Ltd. All rights reserved. 7
8. Before you use a web control(2/2) Copyright 2010 Samsung
Electronics, Co., Ltd. All rights reserved. 8
9. 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
10. 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(GetControl(L"IDF_FORM1"));
pForm->AddControl(*__pWebControl); return r; } Copyright 2010
Samsung Electronics, Co., Ltd. All rights reserved. 10
11. Step 3: Load a URL To search using Google:
http://www.google.com/m?q= EditField* pEdit =
static_cast(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
12. Web control: Event Handling Copyright 2010 Samsung
Electronics, Co., Ltd. All rights reserved. 12
13. Getting info from loaded page I want to save users choice
Copyright 2010 Samsung Electronics, Co., Ltd. All rights reserved.
13
14. 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
15. Event handler ILoadingListener interface OnLoadingStarted()
OnLoadingCanceled() OnLoadingCompleted() Copyright 2010 Samsung
Electronics, Co., Ltd. All rights reserved. 15
16. Event handler ILoadingListener interface OnLoadingStarted()
OnLoadingCanceled() OnLoadingCompleted() Copyright 2010 Samsung
Electronics, Co., Ltd. All rights reserved. 16
17. 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
18. 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
19. 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
20. 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
21. 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
22. Demo: Google Search Demo Sequence: Run Google Search
Application Search with Google Show users selected URL Copyright
2010 Samsung Electronics, Co., Ltd. All rights reserved. 22
23. 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
24. Controlling Google Maps + - WebControl Copyright 2010
Samsung Electronics, Co., Ltd. All rights reserved. 24
25. 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
26. 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
27. Making maps interactive Step 1: Make a global instance
Copyright 2010 Samsung Electronics, Co., Ltd. All rights reserved.
27
28. Making maps interactive Step 1: Make a global instance
Copyright 2010 Samsung Electronics, Co., Ltd. All rights reserved.
28
29. 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
31. 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
32. Google Map + Geolocation Copyright 2010 Samsung
Electronics, Co., Ltd. All rights reserved. 32
33. 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
34. Other ways to use web Copyright 2010 Samsung Electronics,
Co., Ltd. All rights reserved. 34
35. 2 ways to use a web browser WebControl AppControl (Browser)
Copyright 2010 Samsung Electronics, Co., Ltd. All rights reserved.
35
36. 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
37. 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
38. 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
39. 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
40. 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
41. 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
42. 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
43. 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
44. Demo: AppControl Demo Sequence: Run application Show
different aspects of Web control Copyright 2010 Samsung
Electronics, Co., Ltd. All rights reserved. 44
45. Summary Copyright 2010 Samsung Electronics, Co., Ltd. All
rights reserved. 45
46. 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
47. Find out more Tutorial: bada Tutorial.Web.pdf Samples:
WebViewer Copyright 2010 Samsung Electronics, Co., Ltd. All rights
reserved. 47
48. Dive into Copyright 2010 Samsung Electronics, Co., Ltd. All
rights reserved. 48
49. Appendix Copyright 2010 Samsung Electronics, Co., Ltd. All
rights reserved. 49
50. 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
51. More examples Copyright 2010 Samsung Electronics, Co., Ltd.
All rights reserved. 51
52. 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
53. Help: Setting proxy (Device) Settings > Connectivity
> Wi-Fi Click on AP name Copyright 2010 Samsung Electronics,
Co., Ltd. All rights reserved. 53