 
|
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 9: Adding various functions
Let's add a few more functions and complete our simple widget.
Download SimpleWidget.mylow from here
myloConfig.xml
Add the checkbox for the setting of turning on/off the LED display.
<?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="searchURL" type="text" visible="off"> <value>http://www.google.com/</value> </item> <item title="Search Category" name="cat" type="select" comment="Select the search category"> <option value="search">Web</option> <option value="images">Images</option> <option value="books">Books</option> <option value="products">Products</option> <option value="maps">Maps</option> <option value="news">News</option> <value>Web</value> <default>Web</default> </item> <item title="Update Interval" name="frequency" type="select" comment="Set the banner image update interval"> <option value="60000">1 Minute</option> <option value="300000">5 Minutes</option> <option value="600000">10 Minutes</option> <option value="1800000">30 Minutes</option> <option value="3600000">1 Hour</option> <option value="0">Do not update automatically</option> <value>1 Minute</value> <default>1 Minute</default> </item> <item title="Flash LED" name="notify" type="checkbox" comment="When any change is made the LED will flash"> <value>on</value> <default>on</default> </item> </config>
index.html
Let's add the DIV for LED status display. Also, in order to add functions that will open the Web browser, we need to change the behavior so that the widget makes calls to functions instead of directly accessing the extension library.
<!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 id="baseAll"> <div id="baseTopLeft"></div> <div id="baseTopCenter"></div> <div id="baseTopRight"></div> <div id="baseMiddleLeft"></div> <div id="baseMiddleCenter"></div> <div id="baseMiddleRight"></div> <div id="baseBottomLeft"></div> <div id="baseBottomCenter"></div> <div id="baseBottomRight"></div> <div id="searchTitle"></div> <input type="text" id="textBox" size="5" maxlength="128"> <input type="image" id="searchButton" src='images/bt_search_disable.png'> <img id="baseImg" src="images/google1.png" onclick="openGoogle();"> <img id="infoLED" src="images/LED_set.png"> </div> </body> </html>
style.css
Here we'll set the display attributes for each DIV element with our stylesheet. We will then change these attributes from JavaScript to resize the widget.
/*
* Copyright 2008 Sony Electronics Inc.
*/
body{
top: 0px;
left: 0px;
margin: 0px;
padding: 0px;
}
#baseImg {
margin: 0px;
position: absolute;
top: 12px;
left: 12px;
}
#baseAll {
margin: 0px;
position: absolute;
top: 0px;
left: 0px;
visibility: visible;
}
#baseTopLeft {
background-repeat: no-repeat;
background-color: transparent;
background-image:url(images/base_top_left.png);
margin: 0px;
position: absolute;
top: 0px;
left: 0px;
height: 12px;
width: 12px;
}
#baseTopCenter {
background-repeat: repeat-x;
background-color: transparent;
background-image:url(images/base_top_center.png);
margin: 0px;
position: absolute;
top: 0px;
left: 12px;
height: 12px;
width: 0px;
}
#baseTopRight {
background-repeat: no-repeat;
background-color: transparent;
background-image:url(images/base_top_right.png);
margin: 0px;
position: absolute;
top: 0px;
left: 12px;
height: 12px;
width: 12px;
}
#baseMiddleLeft {
background-repeat: repeat-y;
background-color: transparent;
background-image:url(images/base_middle_left.png);
margin: 0px;
position: absolute;
top: 12px;
left: 0px;
height: 0px;
width: 12px;
}
#baseMiddleCenter {
background-repeat: repeat;
background-color: #FFFFFF;
margin: 0px;
position: absolute;
top: 12px;
left: 12px;
height: 0px;
width: 0px;
}
#baseMiddleRight {
background-repeat: repeat-y;
background-color: transparent;
background-image:url(images/base_middle_right.png);
margin: 0px;
position: absolute;
top: 12px;
left: 12px;
height: 0px;
width: 12px;
}
#baseBottomLeft {
background-repeat: no-repeat;
background-color: transparent;
background-image:url(images/base_bottom_left.png);
margin: 0px;
position: absolute;
top: 12px;
left: 0px;
height: 12px;
width: 12px;
}
#baseBottomCenter {
background-repeat: repeat-x;
background-color: transparent;
background-image:url(images/base_bottom_center.png);
margin: 0px;
position: absolute;
top: 12px;
left: 12px;
height: 12px;
width: 0px;
}
#baseBottomRight {
background-repeat: no-repeat;
background-color: transparent;
background-image:url(images/base_bottom_right.png);
margin: 0px;
position: absolute;
top: 12px;
left: 12px;
height: 12px;
width: 12px;
}
#searchTitle {
background-color: #FFFFFF;
font-size: 20px;
text-align: center;
color: black;
overflow: hidden;
margin: 0px;
position: absolute;
top: 12px;
left: 12px;
height: 36px;
}
#searchButton {
background-repeat: no-repeat;
background-color: transparent;
background-image:url(images/bt_search_disable.png);
margin: 0px;
position: absolute;
}
#textBox {
font-size: 20px;
color: #333333;
background-color: #ffffff;
border:none;
margin: 0px;
position: absolute;
left: 12px;
height: 32px;
}
#infoLED{
background-repeat: no-repeat;
background-color: transparent;
background-image:url(images/LED_preset.png);
margin: 0px;
position: absolute;
top: 7px;
}code.js
Let's add code to turn on the LED when the banner image is changed by the background timer, which will only function when the LED is turned on in preferences. In addition, it is important to set the widget so that the LED does not turn on when the banner image is updated when the "refresh" function is run from the OPTION menu. That is, the LED won't turn on when the background timer event is fired while the widget is in the foreground. The LED should be turned off when the widget gains focus. We will also add a network check to keep the Web browser from being opened when the mylo® device is not connected to the internet.
/*
* Copyright 2008 Sony Electronics Inc.
*/
var extension = new Extension();
var jumpURL;
var searchURL;
var catName;
var frequency = 0;
var currentImg = 0;
var searchCategory;
var foregroundTimer;
var backgroundTimer;
var baseAll;
var baseTopLeft;
var baseTopCenter;
var baseTopRight;
var baseMiddleLeft;
var baseMiddleCenter;
var baseMiddleRight;
var baseBottomLeft;
var baseBottomCenter;
var baseBottomRight;
var baseImg;
var searchTitle;
var textBox;
var searchButton;
var infoLED;
var ledStatus;
var numImage = 4;
/**
* Initialization
*/
var init = function() {
prefObject = new Preferences(prefCallback);
baseAll = document.getElementById('baseAll');
baseTopLeft = document.getElementById('baseTopLeft');
baseTopCenter = document.getElementById('baseTopCenter');
baseTopRight = document.getElementById('baseTopRight');
baseMiddleLeft = document.getElementById('baseMiddleLeft');
baseMiddleCenter = document.getElementById('baseMiddleCenter');
baseMiddleRight = document.getElementById('baseMiddleRight');
baseBottomLeft = document.getElementById('baseBottomLeft');
baseBottomCenter = document.getElementById('baseBottomCenter');
baseBottomRight = document.getElementById('baseBottomRight');
baseImg = document.getElementById('baseImg');
searchTitle = document.getElementById('searchTitle');
searchButton = document.getElementById('searchButton');
searchButton = document.getElementById('searchButton');
infoLED = document.getElementById('infoLED');
textBox = document.getElementById('textBox');
textBox.maxLength = 128;
setWindow();
baseAll.style.visibility = 'visible';
notifyReadyWidget();
}
/**
* Acquire preferences
*/
var prefCallback = function() {
var _i;
var _frequency;
var _cat;
var _prevTimer;
_prevTimer = frequency;
jumpURL = prefObject.getValueByName('jumpURL');
searchURL = prefObject.getValueByName('searchURL');
ledStatus = prefObject.getValueByName('notify');
catName = prefObject.getValueByName('cat');
searchTitle.innerHTML = catName;
_cat = prefObject.getItemByName('cat');
for (_i = 0; _i < _cat.options.length; _i++) {
if (catName == _cat.options[_i].text) {
searchCategory = _cat.options[_i].value;
}
}
_frequency = prefObject.getItemByName('frequency');
for (_i = 0; _i < _frequency.options.length; _i++) {
if (prefObject.getValueByName('frequency') == _frequency.options[_i].text) {
frequency = parseInt(_frequency.options[_i].value);
}
}
if (_prevTimer != frequency) {
unsetTimers();
if (frequency > 0) {
setTimers();
}
}
if (ledStatus == "on") {
infoLED.src = 'images/LED_set.png';
infoLED.style.backgroundImage = 'url("images/LED_set.png")';
} else {
infoLED.src = 'images/LED_preset.png';
infoLED.style.backgroundImage = 'url("images/LED_preset.png")';
}
textFieldClear();
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 preferences are saved, run the callback)
*/
var saveCallback = function() {};
/**
* Resize handler
*/
var widgetResize = function() {
setWindow();
}
/**
* Unset the timer
*/
var unsetTimers = function() {
if(foregroundTimer) {
clearInterval(foregroundTimer);
foregroundTimer = undefined;
}
if(backgroundTimer) {
clearBackgroundInterval(backgroundTimer);
backgroundTimer = undefined;
}
};
/**
* Set the timer
*/
var setTimers = function() {
unsetTimers();
foregroundTimer = setInterval(callbackForegroundTimer, frequency);
backgroundTimer = setBackgroundInterval(callbackBackgroundTimer, frequency);
};
/**
* Foreground timer arrangement/process
*/
var callbackForegroundTimer = function() {
redrawBanner();
};
/**
* Background timer arrangement/process)
*/
var callbackBackgroundTimer = function() {
if (mylo.System.getGroundStatus() == mylo.constant.BACK_GROUND) {
if (ledStatus == "on") {
infoLED.src = 'images/LED_newarrival.png';
infoLED.style.backgroundImage = 'url("images/LED_newarrival.png")';
extension.ledOn();
}
}
redrawBanner();
};
/**
* Window resize function
*/
var setWindow = function() {
baseTopCenter.style.width = (windowWidth - 24) + 'px';
baseMiddleCenter.style.width = (windowWidth - 24) + 'px';
baseBottomCenter.style.width = (windowWidth - 24) + 'px';
baseMiddleLeft.style.height = (windowHeight - 24) + 'px';
baseMiddleCenter.style.height = (windowHeight - 24) + 'px';
baseMiddleRight.style.height = (windowHeight - 24) + 'px';
baseTopRight.style.left = (windowWidth - 12) + 'px';
baseMiddleRight.style.left = (windowWidth - 12) + 'px';
baseBottomRight.style.left = (windowWidth - 12) + 'px';
baseBottomLeft.style.top = (windowHeight - 12) + 'px';
baseBottomCenter.style.top = (windowHeight - 12) + 'px';
baseBottomRight.style.top = (windowHeight - 12) + 'px';
baseImg.style.left = (windowWidth / 2 - 78) + 'px';
baseImg.style.top = (windowHeight / 2 - 45) + 'px';
searchTitle.style.width = (windowWidth - 24) + 'px';
searchButton.style.top = (windowHeight - 48) + 'px';
searchButton.style.left = (windowWidth - 86) + 'px';
textBox.style.top = (windowHeight - 48) + 'px';
textBox.style.width = (windowWidth - 100) + 'px';
infoLED.style.left = (windowWidth - 26) + 'px';
};
/**
* Banner redraw
*/
var redrawBanner = function() {
if (++currentImg >= numImage) {
currentImg = 0;
}
switch (currentImg) {
case 0:
baseImg.src = 'images/google1.png';
break;
case 1:
baseImg.src = 'images/google2.png';
break;
case 2:
baseImg.src = 'images/google3.png';
break;
case 3:
baseImg.src = 'images/google4.png';
break;
}
};
/**
* Key handler
*/
var widgetKeyDown = function(evt, key) {
switch (key) {
case mylo.KeyCode.EXE:
if (mylo.System.getNetworkStatus()) {
searchAndOpenWindow();
}
textFieldClear();
return false;
break;
case mylo.KeyCode.BACK:
textFieldClear();
return true;
break;
}
}
/**
* When in focus, run the callback
*/
var inFocus = function() {
if (ledStatus == "on" ) {
infoLED.src = 'images/LED_set.png';
infoLED.style.backgroundImage = 'url("images/LED_set.png")';
extension.ledOff();
}
if (mylo.System.getNetworkStatus()) {
readyInput();
}
}
/**
* Out of focus handler
*/
var outFocus = function() {
textFieldClear();
}
/**
* Clear out the textbox
*/
var textFieldClear = function() {
textBox.blur();
textBox.value = '';
searchButton.src = 'images/bt_search_disable.png';
searchButton.onclick = function(){return true};
searchButton.onmousedown = function(){};
searchButton.onmouseup = function(){};
searchButton.style.backgroundImage = 'url("images/bt_search_disable.png")';
}
/**
* Ready textbox entry
*/
var readyInput = function() {
searchButton.src = 'images/bt_search_normal.png';
searchButton.onclick = function(){
searchAndOpenWindow();
return false;
};
searchButton.onmousedown = function(){
this.src='images/bt_search_push.png';
searchButton.style.backgroundImage = 'url("images/bt_search_normal.png")';
};
searchButton.onmouseup = function(){
this.src='images/bt_search_normal.png';
};
textBox.focus();
}
/**
* Form submit process
* Search and display the new window
*/
var searchAndOpenWindow = function() {
var _text = textBox.value;
if (_text.length > 128) {
_text = _text.substring(0,128);
}
var _url = searchURL + searchCategory + '?q=' + _text;
if (_text.length > 0) {
extension.openWeb(_url);
}
}
/**
* The process that gets run when the the banner is clicked
*/
var openGoogle = function() {
if (mylo.System.getNetworkStatus()) {
extension.openWeb(searchURL);
}
}