bada Tutorial:

Web

bada 1.1.0
Copyright © Copyright
2010 Samsung Electronics
© 2010 Samsung Co., Ltd. All Co.,
Electronics rightsLtd.
reserved. 1
All rights reserved.
Contents
• Essential Classes
• Relationships between Classes
• Overview
• Web Control
– Example: Load a Web Page
– Example: Download Web Content
– Example: JavaScript Interaction
• FAQ
• Review
• Answers

Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 2

Essential Classes
Osp::Web

Feature Provided by
Contains HistoryItems to give you the complete browsing history. WebHistory

Stores the URL and title of a visited page. HistoryItem

Osp::Web::Controls

Feature Provided by

Provides browser functionality. Web

Configures the Web browser engine. WebSetting

Provides a list of pages the Web control has visited. PageNavigationList

Provides methods for loading events. ILoadingListener

Provides methods for downloading data. IWebDownloadListener

Handles HTTP authentication. AuthenticationChallenge

Retrieves HTML element information from a hit test event. HitElementResult

Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 3

Relationships between Classes

Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 4

Overview
• The Web namespace lets you track browsing history using the
Osp::Web::WebHistory class.
• The Osp::Web::Controls::Web class provides the Internet
browser control that can be placed in an application GUI to:
– Embed a turn-key Internet browser.
• Add a Web browser to your application just
as you do any other UI control.
– Easily download and handle content.
• Intercept and handle requests and responses.
– Run JavaScript inside the browser.
• Run JavaScript in a Web page
with the EvaluateJavascriptN() method.
• Web control is based on Webkit (http://webkit.org/).

Web class in an application

Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 5

Web Control (1/2)
With Web::Controls classes you can:
– Handle events.
– Authenticate with servers.
– Get the following information about elements that have been clicked:
<tag attribute=“value”>character data</tag>
• Tag name
• Attributes
• Character data
• Images
• URL
– Handle content by MIME type.
– Handle loading events.
– Download content directly to consume in your application.

Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 6

Web Control (2/2)
The Web::Controls namespace provides two listeners to handle
browser events.
1. ILoadingListener
– You can define custom actions by implementing this interface.
– The browser engine defaults to its own actions if none are defined.
2. IWebDownloadListener
– You can use the listener to handle downloads.
– You can receive data incrementally.
– You can decide in ILoadingListener which MIME types are routed
to this listener.
– This listener is useful when content is not supported by the framework
and needs to be handled by the application, for example, proprietary
file formats.

Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 7

Example: Load a Web Page
Load and display a Web page.
– Open \<BADA_SDK_HOME>\Examples Application
\Web\src Application Content

\DrawWebContent.cpp, LoadUrl() Web

App
Content

1. Construct a Web:
Web::Construct()
2. Attach to a parent control:
Control::AddControl()
3. Load URL:
Web::LoadUrl(url)
4. The Web page displays in the Web browser control.

Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 8

Example: Download Web Content (1/3)
• When a URL loads, the Web Browser Control
OnWebDataReceived() event fires, Load a URL
letting you decide how to handle
the data.
• WEB_DECISION_DOWNLOAD OnWebDataReceived()

passes control to the Return

OnWebChunkedDataReceived()
event handler so you can process
the download manually.
• OnWebDatadownloadComplete()
signals that the download is finished.
WEB_DECISION_DOWNLOAD to
manually handle download
OnWebChunkedDataReceived()
Save or handle data

OnWebDataDownloadComplete()

Download is finished

Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 9

Example: Download Web Content (2/3)
Download content from Web.
– Open \<BADA_SDK_HOME>\Examples\Web\src\
DownloadWebContent.cpp, DownloadData(),
OnWebChunkedDataReceived(),
OnWebDataDownloadCompleted()

1. Construct a Web:
Web::Construct()
2. Attach to a parent control:
Control::AddControl()
3. Set a loading listener:
Web::SetLoadingListener()
4. Set a download listener:
Web::SetDownloadListener()
5. Load a URL:
Web::LoadUrl()

Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 10

Example: Download Web Content (3/3)
6. When ILoadingListener::OnWebDataReceived() is called,
return WEB_DECISION_DOWNLOAD.
7. Data with the URL is routed to
IWebDownloadListener::OnWebChunkedDataReceived()
whenever data is received.
8. When the download is finished, IWebDownloadListener::
OnWebDataDownloadCompleted() is called.

Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 11

Example: JavaScript Interaction (1/2)
Control Google Map with JavaScript.
– Open \<BADA_SDK_HOME>\Examples\Web\
src\EvalJavaScript.cpp, SetZoomLevel()

1. Construct and prepare a Web control:

Web::Construct()
2. Load the URL with the HTML file:
Web::LoadUrl(L"\Res\Map.html");
3. Run JavaScript:
Web::EvaluateJavascriptN
(L"map.setZoom(10);");
4. Redraw the page at the specified zoom level.

Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 12

Example: JavaScript Interaction (2/2)
The following snippet shows a sample of the Map.html file and how to
process JavaScript:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
disableDefaultUI: true,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 13

FAQ
Why am I unable to load a page into a Web browser control?
– Most likely your network configuration is not set properly.
To check that the configuration is valid, see Proxy Address Setting in the
Communication tutorial.

Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 14

Review
1. What engine does the Web browser control use?
2. You need to download a file silently. What interface do you need to
implement?

Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 15

Answers
1. Webkit
2. Web::Controls::IWebDownloadListener

Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 16

Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 17