embedding web browser in your app

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

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

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

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

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

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

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

30. 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

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

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

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

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

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

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

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

embedding web browser in your app

Education

const string

intercepting web control

web control

rights reserved

setting proxy

handle history

web browser

delete pstr