embedding web browser in your app

4,349 views
4,199 views

Published on

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,349
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
51
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

embedding web browser in your app

  1. 1. Embedding web browser in your app Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved.
  2. 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. 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. 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. 5. Making a Google Search app Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 5
  6. 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. 7. Before you use a web control(1/2) Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 7
  8. 8. Before you use a web control(2/2) Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 8
  9. 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. 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. 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. 12. Web control: Event Handling Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 12
  13. 13. Getting info from loaded page I want to save user’s choice Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 13
  14. 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. 15. Event handler ILoadingListener interface – OnLoadingStarted() – OnLoadingCanceled() – OnLoadingCompleted() –… Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 15
  16. 16. Event handler ILoadingListener interface – OnLoadingStarted() – OnLoadingCanceled() – OnLoadingCompleted() –… Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 16
  17. 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. 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. 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. 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. 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. 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. 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. 24. Controlling Google Maps + - WebControl Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 24
  25. 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. 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. 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. 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. 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. 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. 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. 32. Google Map + Geolocation Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 32
  33. 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. 34. Other ways to use web Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 34
  35. 35. 2 ways to use a web browser WebControl AppControl (Browser) Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 35
  36. 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. 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. 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. 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. 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. 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. 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. 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. 44. Demo: AppControl Demo Sequence: – Run application – Show different aspects of Web control Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 44
  45. 45. Summary Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 45
  46. 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. 47. Find out more Tutorial: – bada Tutorial.Web.pdf Samples: – WebViewer Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 47
  48. 48. Dive into Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 48
  49. 49. Appendix Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 49
  50. 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. 51. More examples Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 51
  52. 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. 53. Help: Setting proxy (Device) Settings > Connectivity > Wi-Fi Click on AP name Copyright© 2010 Samsung Electronics, Co., Ltd. All rights reserved. 53

×