 
|
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 7: Creating a widget that can be resized
By creating a minimum/maximum value for height and width in widgetPackage.xml, the user will be able to resize their widget.
Download Sample6.mylow from here
widgetPackage.xml
In Sample 6, we are going to create a widget that can be resized in both width and height.
<?xml version="1.0" encoding="utf-8"?> <!-- Copyright 2008 Sony Electronics Inc. --> <widgetPackage xmlns="http://xmlns.sony.net/mylo/widget" version="1.0"> <info> <packageName>Sample Widget 6</packageName> <author>Sony Electronics Inc.</author> <abstract>This is Sample 6 from the tutorial</abstract> <version>1.0</version> <locale>US</locale> <engine>1.0</engine> <updateURL></updateURL> <siteURL>http://www.sony.com/mylo</siteURL> <minWidth>15</minWidth> <minHeight>10</minHeight> <maxWidth>66</maxWidth> <maxHeight>36</maxHeight> <defWidth>15</defWidth> <defHeight>10</defHeight> <createDate>2008-02-02</createDate> </info> </widgetPackage>
index.html
In our index.html file we divided the base of the widget into 9 pieces and separated them as DIV tags.
<!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> <img id="baseImg" src="images/google1.png" onclick="extension.openWeb(jumpURL);"> </div> </body> </html>
style.css
Set the attribute for each DIV with stylesheet. Change the attribute of the stylesheet from the Javascript code 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: hidden;
}
#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;
}
code.js
In order to make the widget resizable we need to calculate the new size of the widget within the "widgetResize()" function, which is called when the user drags the resize icon of the widget in Widget Setting mode.
var extension = new Extension();
var jumpURL;
var frequency = 0;
var currentImg = 0;
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 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');
setWindow();
baseAll.style.visibility = 'visible';
notifyReadyWidget();
}
/**
* Acquire preferences
*/
var prefCallback = function() {
var _i;
var _frequency;
var _prevTimer;
_prevTimer = frequency;
jumpURL = prefObject.getValueByName('jumpURL');
_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();
}
}
notifyReadyWidget();
return prefObject;
};
/**
* When the preference starts, run the callback
*/
var getPreferenceObject = function() {
return prefObject;
}
/**
* Wwhen 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, run the callback
*/
var saveCallback = function() {};
/**
* Resize handler
*/
var widgetResize = function() {
setWindow();
}
/**
* Deactivate/cancel 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() {
redrawBanner();
};
/**
* Resize widget
*/
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';
};
/**
* Redraw banner
*/
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:
extension.openWeb(jumpURL);
return false;
break;
case mylo.KeyCode.BACK:
return true;
break;
}
}Go back to top of the page
Return to Tutorial