Your SlideShare is downloading. ×
0
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
embedding web browser in your app
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

embedding web browser in your app

4,048

Published on

embedding web browser in your app

embedding web browser in your app

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
4,048
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
51
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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<Form*>(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=<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
  • 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 user’s 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 user’s 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 <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
  • 28. 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
  • 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
  • 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

×