SlideShare una empresa de Scribd logo
1 de 53
Descargar para leer sin conexión
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

Más contenido relacionado

Destacado (18)

Leadership life
Leadership life Leadership life
Leadership life
 
Leadership
Leadership Leadership
Leadership
 
Ancient university
Ancient universityAncient university
Ancient university
 
M2 k4.2 e1 bantuan pernafasan
M2 k4.2 e1 bantuan pernafasanM2 k4.2 e1 bantuan pernafasan
M2 k4.2 e1 bantuan pernafasan
 
INTEF
INTEFINTEF
INTEF
 
Chap011 imc
Chap011 imcChap011 imc
Chap011 imc
 
Color Illustrations
Color IllustrationsColor Illustrations
Color Illustrations
 
Intel Q2 Earnings Report
Intel Q2 Earnings ReportIntel Q2 Earnings Report
Intel Q2 Earnings Report
 
Architect Cheatsheet
Architect CheatsheetArchitect Cheatsheet
Architect Cheatsheet
 
Camera check
Camera checkCamera check
Camera check
 
How digital can deliver your business goals
How digital can deliver your business goalsHow digital can deliver your business goals
How digital can deliver your business goals
 
Bedrijfspresentatie
BedrijfspresentatieBedrijfspresentatie
Bedrijfspresentatie
 
Amazon.com
Amazon.comAmazon.com
Amazon.com
 
Manager Info Kit
Manager Info KitManager Info Kit
Manager Info Kit
 
EXTERNAL_SVYASA CSpR_Business Proposal (1)
EXTERNAL_SVYASA CSpR_Business Proposal (1)EXTERNAL_SVYASA CSpR_Business Proposal (1)
EXTERNAL_SVYASA CSpR_Business Proposal (1)
 
Introduction of Deferred Prosecution Agreements in the UK in 2014
Introduction of Deferred Prosecution Agreements in the UK in 2014Introduction of Deferred Prosecution Agreements in the UK in 2014
Introduction of Deferred Prosecution Agreements in the UK in 2014
 
Portfolio de interiores e decoração
Portfolio de interiores e decoração Portfolio de interiores e decoração
Portfolio de interiores e decoração
 
Hail Damage (Oct.5th,2010)
Hail Damage (Oct.5th,2010)Hail Damage (Oct.5th,2010)
Hail Damage (Oct.5th,2010)
 

Similar a embedding web browser in your app

managing your content
managing your contentmanaging your content
managing your contentSamsung
 
Making Your Apps More Sociable
Making Your Apps More SociableMaking Your Apps More Sociable
Making Your Apps More SociableSamsung
 
jRecruiter - The AJUG Job Posting Service
jRecruiter - The AJUG Job Posting ServicejRecruiter - The AJUG Job Posting Service
jRecruiter - The AJUG Job Posting ServiceGunnar Hillert
 
Oracle Application Framework Cases
Oracle Application Framework Cases Oracle Application Framework Cases
Oracle Application Framework Cases Feras Ahmad
 
Android101 : Introduksjon til Android
Android101 : Introduksjon til AndroidAndroid101 : Introduksjon til Android
Android101 : Introduksjon til AndroidTruls Jørgensen
 
Cramsdale dev tools_using-gwt-and-google-plugin-for-eclipse-to-build-greate-m...
Cramsdale dev tools_using-gwt-and-google-plugin-for-eclipse-to-build-greate-m...Cramsdale dev tools_using-gwt-and-google-plugin-for-eclipse-to-build-greate-m...
Cramsdale dev tools_using-gwt-and-google-plugin-for-eclipse-to-build-greate-m...Airat Sadreev
 
Android Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NC
Android Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NCAndroid Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NC
Android Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NCJim Tochterman
 
Mobile App Development: Primi passi con NativeScript e Angular 2
Mobile App Development: Primi passi con NativeScript e Angular 2Mobile App Development: Primi passi con NativeScript e Angular 2
Mobile App Development: Primi passi con NativeScript e Angular 2Filippo Matteo Riggio
 
夜宴42期《Gadgets》
夜宴42期《Gadgets》夜宴42期《Gadgets》
夜宴42期《Gadgets》Koubei Banquet
 
Web Machine Learning (ML) API POC march update
Web Machine Learning (ML) API POC march updateWeb Machine Learning (ML) API POC march update
Web Machine Learning (ML) API POC march updatehuningxin
 
using Mithril.js + postgREST to build and consume API's
using Mithril.js + postgREST to build and consume API'susing Mithril.js + postgREST to build and consume API's
using Mithril.js + postgREST to build and consume API'sAntônio Roberto Silva
 
Microservices for the Masses with Spring Boot, JHipster, and OAuth - Jforum S...
Microservices for the Masses with Spring Boot, JHipster, and OAuth - Jforum S...Microservices for the Masses with Spring Boot, JHipster, and OAuth - Jforum S...
Microservices for the Masses with Spring Boot, JHipster, and OAuth - Jforum S...Matt Raible
 
What's new in android jakarta gdg (2015-08-26)
What's new in android   jakarta gdg (2015-08-26)What's new in android   jakarta gdg (2015-08-26)
What's new in android jakarta gdg (2015-08-26)Google
 
Windows phone 7 series
Windows phone 7 seriesWindows phone 7 series
Windows phone 7 seriesopenbala
 
AngularJS for Web and Mobile
 AngularJS for Web and Mobile AngularJS for Web and Mobile
AngularJS for Web and MobileRocket Software
 
Ignacy Kowalczyk
Ignacy KowalczykIgnacy Kowalczyk
Ignacy KowalczykCodeFest
 

Similar a embedding web browser in your app (20)

managing your content
managing your contentmanaging your content
managing your content
 
Making Your Apps More Sociable
Making Your Apps More SociableMaking Your Apps More Sociable
Making Your Apps More Sociable
 
jRecruiter - The AJUG Job Posting Service
jRecruiter - The AJUG Job Posting ServicejRecruiter - The AJUG Job Posting Service
jRecruiter - The AJUG Job Posting Service
 
Oracle Application Framework Cases
Oracle Application Framework Cases Oracle Application Framework Cases
Oracle Application Framework Cases
 
Android101 : Introduksjon til Android
Android101 : Introduksjon til AndroidAndroid101 : Introduksjon til Android
Android101 : Introduksjon til Android
 
Cramsdale dev tools_using-gwt-and-google-plugin-for-eclipse-to-build-greate-m...
Cramsdale dev tools_using-gwt-and-google-plugin-for-eclipse-to-build-greate-m...Cramsdale dev tools_using-gwt-and-google-plugin-for-eclipse-to-build-greate-m...
Cramsdale dev tools_using-gwt-and-google-plugin-for-eclipse-to-build-greate-m...
 
Power ai image-pipeline
Power ai image-pipelinePower ai image-pipeline
Power ai image-pipeline
 
Android Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NC
Android Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NCAndroid Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NC
Android Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NC
 
Mobile App Development: Primi passi con NativeScript e Angular 2
Mobile App Development: Primi passi con NativeScript e Angular 2Mobile App Development: Primi passi con NativeScript e Angular 2
Mobile App Development: Primi passi con NativeScript e Angular 2
 
Banquet 42
Banquet 42Banquet 42
Banquet 42
 
夜宴42期《Gadgets》
夜宴42期《Gadgets》夜宴42期《Gadgets》
夜宴42期《Gadgets》
 
Web Machine Learning (ML) API POC march update
Web Machine Learning (ML) API POC march updateWeb Machine Learning (ML) API POC march update
Web Machine Learning (ML) API POC march update
 
using Mithril.js + postgREST to build and consume API's
using Mithril.js + postgREST to build and consume API'susing Mithril.js + postgREST to build and consume API's
using Mithril.js + postgREST to build and consume API's
 
Sst hackathon express
Sst hackathon expressSst hackathon express
Sst hackathon express
 
Microservices for the Masses with Spring Boot, JHipster, and OAuth - Jforum S...
Microservices for the Masses with Spring Boot, JHipster, and OAuth - Jforum S...Microservices for the Masses with Spring Boot, JHipster, and OAuth - Jforum S...
Microservices for the Masses with Spring Boot, JHipster, and OAuth - Jforum S...
 
What's new in android jakarta gdg (2015-08-26)
What's new in android   jakarta gdg (2015-08-26)What's new in android   jakarta gdg (2015-08-26)
What's new in android jakarta gdg (2015-08-26)
 
Windows phone 7 series
Windows phone 7 seriesWindows phone 7 series
Windows phone 7 series
 
AngularJS for Web and Mobile
 AngularJS for Web and Mobile AngularJS for Web and Mobile
AngularJS for Web and Mobile
 
Google tv
Google tv Google tv
Google tv
 
Ignacy Kowalczyk
Ignacy KowalczykIgnacy Kowalczyk
Ignacy Kowalczyk
 

Último

P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfP4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfYu Kanazawa / Osaka University
 
3.21.24 The Origins of Black Power.pptx
3.21.24  The Origins of Black Power.pptx3.21.24  The Origins of Black Power.pptx
3.21.24 The Origins of Black Power.pptxmary850239
 
Education and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxEducation and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxraviapr7
 
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxPractical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxKatherine Villaluna
 
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxAUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxiammrhaywood
 
Prescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxPrescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxraviapr7
 
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...Nguyen Thanh Tu Collection
 
CAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxCAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxSaurabhParmar42
 
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxPISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxEduSkills OECD
 
M-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxM-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxDr. Santhosh Kumar. N
 
Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...raviapr7
 
Practical Research 1 Lesson 9 Scope and delimitation.pptx
Practical Research 1 Lesson 9 Scope and delimitation.pptxPractical Research 1 Lesson 9 Scope and delimitation.pptx
Practical Research 1 Lesson 9 Scope and delimitation.pptxKatherine Villaluna
 
How to Make a Field read-only in Odoo 17
How to Make a Field read-only in Odoo 17How to Make a Field read-only in Odoo 17
How to Make a Field read-only in Odoo 17Celine George
 
How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17Celine George
 
Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.raviapr7
 
How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17Celine George
 
Philosophy of Education and Educational Philosophy
Philosophy of Education  and Educational PhilosophyPhilosophy of Education  and Educational Philosophy
Philosophy of Education and Educational PhilosophyShuvankar Madhu
 
Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxDr. Asif Anas
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17Celine George
 

Último (20)

P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfP4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
 
3.21.24 The Origins of Black Power.pptx
3.21.24  The Origins of Black Power.pptx3.21.24  The Origins of Black Power.pptx
3.21.24 The Origins of Black Power.pptx
 
Education and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxEducation and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptx
 
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxPractical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
 
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxAUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
 
Prescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxPrescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptx
 
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
 
CAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxCAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptx
 
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxPISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
 
M-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxM-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptx
 
Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...
 
Practical Research 1 Lesson 9 Scope and delimitation.pptx
Practical Research 1 Lesson 9 Scope and delimitation.pptxPractical Research 1 Lesson 9 Scope and delimitation.pptx
Practical Research 1 Lesson 9 Scope and delimitation.pptx
 
How to Make a Field read-only in Odoo 17
How to Make a Field read-only in Odoo 17How to Make a Field read-only in Odoo 17
How to Make a Field read-only in Odoo 17
 
How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17
 
Finals of Kant get Marx 2.0 : a general politics quiz
Finals of Kant get Marx 2.0 : a general politics quizFinals of Kant get Marx 2.0 : a general politics quiz
Finals of Kant get Marx 2.0 : a general politics quiz
 
Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.
 
How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17
 
Philosophy of Education and Educational Philosophy
Philosophy of Education  and Educational PhilosophyPhilosophy of Education  and Educational Philosophy
Philosophy of Education and Educational Philosophy
 
Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptx
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17
 

embedding web browser in your app

  • 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