 
|
This tutorial will assist you with the steps of the widget development process using a simple widget. Step 1: Preparation Step 2: Basic Widget Functionality Step 3: Advanced Applications |
Lesson 4.1: Creating a simple widget
Let's create a very simple widget to start. We will begin by defining the HTML and CSS to display an image and add functions to launch the Web browser when our image is clicked..
Download Sample1.mylow from here
widgetPackage.xml
In order to make our widget install correctly, we need to add the widgetPackage.xml file.
You may notice that this example is slightly different than the introduction in the previous lessons, the minWidth, minHeight, maxWidth, maxHeight have been omitted. When those tags do not exist, the tags defWidth and defHeight will be used to define a default fixed size for the widget.
<?xml version="1.0" encoding="utf-8"?> <widgetPackage xmlns="http://xmlns.sony.net/mylo/widget" version="1.0"> <info> <packageName>Sample Widget 1</packageName> <author>Sony Electronics Inc.</author> <abstract>This is Sample 1 from the tutorial</abstract> <version>1.0</version> <locale>US</locale> <engine>1.0</engine> <updateURL></updateURL> <siteURL>http://www.sony.com/mylo</siteURL> <defWidth>10</defWidth> <defHeight>8</defHeight> <createDate>2008-02-02</createDate> </info> </widgetPackage>
index.html
The Sample1 widget is composed entirely of the index.html file, which contains some JavaScript and an image. As you can see below, it is necessary to include the "Extension Library" at the top because we will be using it to launch the mylo® Web browser.
In order to use the Extension functions, you need to declare a "new Extension()" in your JavaScript. When the widget goes into Focus mode, the Web browser will open the specified URL if the enter key is pressed, and if the BACK button is pressed it will go back to Active mode. You will notice that in this example the onClick event that opens the Web browser when an image is tapped is written directly into the HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="copyright" content="Copyright 2008 Sony Electronics Inc.">
<title>Google Banner</title>
<!-- mylo screen library -->
<script type="text/javascript" src="/js/lib/WidgetLibrary.js"></script>
<script type="text/javascript" src="/js/lib/ExtensionLibrary.js"></script>
<!-- mylo screen library -->
<style type="text/css">
body{
top: 0px;
left: 0px;
margin: 0px;
padding: 0px;
}
#baseImg {
margin: 0px;
position: absolute;
top: 3px;
left: 0px;
}
</style>
<script language="javascript">
var extension = new Extension();
var jumpURL = 'http://www.google.com'
/**
* Key Handler
*/
var widgetKeyDown = function(evt, key) {
switch (key) {
case mylo.KeyCode.EXE:
extension.openWeb(jumpURL);
return false;
break;
case mylo.KeyCode.BACK:
return true;
break;
}
}
</script>
</head>
<body>
<div>
<img id="baseImg" src="images/google1.png" onclick="extension.openWeb(jumpURL);">
</div>
</body>
</html>
Lesson 4.2: Separating Resources
In Sample 1 the search URL was hard coded into the JavaScript, so let's abstract that information and move it into a saved widget setting.
In order to do that, we need to add the myloConfig.xml file which will contain the layout for all of our widget's preferences.
Download Sample2.mylow from here
myloConfig.xml
Although myloConfig.xml is used, the title and visibility properties of the item are not necessary because at first we won't be using the preferences UI.
<?xml version="1.0" encoding="utf-8"?> <!-- Copyright 2008 Sony Electronics Inc. --> <config xmlns="http://xmlns.sony.net/mylo/widget" version="1.0"> <item name="jumpURL" type="text"> <value>http://www.google.com/</value> </item> </config>
index.html
Please load the mylo® Preferences Library (as described in Lesson 3) in advance since it will be used to read myloConfig.xml. You will then need to declare a "new Preferences()" object in JavaScript to use the preferences library. We will then use the "getValueByName()" function in the Preferences Library to retrieve the URL data. After the widget is done reading preferences and the widget is ready, we call the "notifyReadyWidget()" function. In this sample, the widget will function correctly even though "notifyReadyWidget()" is not called. However, calling this function will be important in a subsequent lesson.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="copyright" content="Copyright 2008 Sony Electronics Inc.">
<title>Google Banner</title>
<!-- mylo screen library -->
<script type="text/javascript" src="/js/lib/WidgetLibrary.js"></script>
<script type="text/javascript" src="/js/lib/ExtensionLibrary.js"></script>
<script type="text/javascript" src="/js/lib/PreferencesLibrary.js"></script>
<!-- mylo screen library -->
<style type="text/css">
body{
top: 0px;
left: 0px;
margin: 0px;
padding: 0px;
}
#baseImg {
margin: 0px;
position: absolute;
top: 3px;
left: 0px;
}
</style>
<script language="javascript">
var extension = new Extension();
var jumpURL;
/**
* Initialize
*/
var init = function() {
prefObject = new Preferences(prefCallback);
}
/**
* Acquire preferences
*/
var prefCallback = function() {
jumpURL = prefObject.getValueByName('jumpURL');
notifyReadyWidget();
return prefObject;
};
/**
* Key handler
*/
var widgetKeyDown = function(evt, key) {
switch (key) {
case mylo.KeyCode.EXE:
extension.openWeb(jumpURL);
return false;
break;
case mylo.KeyCode.BACK:
return true;
break;
}
}
</script>
</head>
<body onload="init();">
<div>
<img id="baseImg" src="images/google1.png" onclick="extension.openWeb(jumpURL);">
</div>
</body>
</html>
Go back to the top of the page
Return to Tutorial