 
|
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 5.1: Using Preferences
Since we used preferences in the previous lesson, let's use them to enable a user to enter their own URL.
Download Sample3.mylow from here
myloConfig.xml
This time we will be using the preferences UI. Please add the title and comment of the item. Setting the visibility property is not necessary because the default setting is "ON".
<?xml version="1.0" encoding="utf-8"?> <!-- Copyright 2008 Sony Electronics Inc. --> <config xmlns="http://xmlns.sony.net/mylo/widget" version="1.0"> <item title="URL" name="jumpURL" type="text" required="on" comment="Please enter your favorite URL"> <value>http://www.google.com</value> <default>http://www.google.com</default> </item> </config>
index.html
Since our index.html file has gradually gotten bigger, we will separate the CSS into a separate file named style.css. Because we will be using the preferences UI, we need to define "getPreferencesObject()" in our Javascript. Doing so changes the setting icon at the lower left corner of the widget in setting mode to "Enabled". If you look at the "changePreference()" function below you will notice the usage of the "saveFile()" function from the Extension library. The "changePreference()" object is called when preferences are changed, and this is what actually writes to the myloConfig.xml file. After reading all of the preferences and the widget becomes available, we call "notifyReadyWidget()". (Otherwise, the setting icon won't be "Enabled" when the widget is displayed in Widget Setting mode.)
<!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 -->
<link rel="stylesheet" href="style.css" type="text/css" />
<script language="javascript">
var extension = new Extension();
var jumpURL;
/**
* Initialization
*/
var init = function() {
prefObject = new Preferences(prefCallback);
}
/**
* Acquire preferences
*/
var prefCallback = function() {
jumpURL = prefObject.getValueByName('jumpURL');
notifyReadyWidget();
return prefObject;
};
/**
* Callback when the preference starts
*/
var getPreferenceObject = function() {
return prefObject;
}
/**
* Callback when the preference ends
*/
var changePreference = function(prefObject, updateFlag) {
if (updateFlag == true){
extension.saveFile(Extension.fileType.CONFIG, saveCallback, prefObject.save());
prefCallback();
}
return;
}
/**
* Callback when the preference is saved
*/
var saveCallback = function() {};
/**
* 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>
Lesson 5.2: Using Preferences
In this next lesson we will change the settings back so that the URL can't be changed, but make it possible to choose the images to display.
Download Sample4.mylow from here
myloConfig.xml
The title is not necessary because the URL can't be changed in the preferences UI, so let's turn off its visibility.
<?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" visible="off"> <value>http://www.google.com</value> </item> <item title="Banner Image" name="bannerImg" type="select" comment="Select a banner image"> <option>google1.png</option> <option>google2.png</option> <option>google3.png</option> <option>google4.png</option> <value>google1.png</value> <default>google1.png</default> </item> </config>
index.html
Since the size of the index.html increased again, let's separate the JavaScript into its own file called code.js. Now our index.html consists only of included library files and widget elements.
<!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 --> <script type="text/javascript" src="code.js"></script> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body onload="init();"> <div> <img id="baseImg" src="images/google1.png" onclick="extension.openWeb(jumpURL);"> </div> </body> </html>
code.js
Reading the selected image file from the user's preferences is as easy as acquiring the URL.
/*
* Copyright 2008 Sony Electronics Inc.
*/
var extension = new Extension();
var jumpURL;
var bannerImg;
/**
* Initialization
*/
var init = function() {
prefObject = new Preferences(prefCallback);
}
/**
* Acquire preferences
*/
var prefCallback = function() {
jumpURL = prefObject.getValueByName('jumpURL');
bannerImg = prefObject.getValueByName('bannerImg');
redrawBanner();
notifyReadyWidget();
return prefObject;
};
/**
* When the preference starts, run the callback.
*/
var getPreferenceObject = function() {
return prefObject;
}
/**
* When the preference ends, run the callback.
*/
var changePreference = function(prefObject, updateFlag) {
if (updateFlag == true){
extension.saveFile(Extension.fileType.CONFIG, saveCallback, prefObject.save());
prefCallback();
}
return;
}
/**
* When the preference is saved, callback
*/
var saveCallback = function() {};
/**
* Redraw Banner
*/
var redrawBanner = function() {
baseImg.src = 'images/' + bannerImg;
};
/**
* 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;
}
}