Yahoo! widget 教程003-图片展示widget

前面的教程都是比较简单的代码，这回将制作一个比较完整的widget--图片展示。

基本的功能就是将用户指定的文件夹下的图片随机的显示出来，功能比较简单，目的是为大家抛砖引玉。效果如下图：

源文件下载：http://javabug.blogbus.com/files/1160487648.rar

下面讲解制作过程：

第一步：建立一个目录 命名为：ImageShow 。在ImageShow目录下建立一个ImageShow.kon文件，并添加以下代码：

<?xml version="1.0" encoding="utf-8"?>

<widget>

<debug>on</debug>

<window>

<name>main_window</name>

<title>Image Show</title>

<width>200</width>

<height>200</height>

<alignment>left</alignment>

<hOffset>72</hOffset>

<vOffset>36</vOffset>

<!--level显示的层面-->

<!--可选的值: konspose, desktop, below,normal, topmost or floating.-->

<level>topmost</level>

<shadow>false</shadow>

<visible>true</visible>

<image>

<name>image</name>

<width>200</width>

<height>200</height>

<alignment>left</alignment>

<hOffset>0</hOffset>

<vOffset>0</vOffset>

<opacity>255</opacity>

<src>Resources/loading.png</src>

</image>

</window>

<timer name="timer" interval="1">

<ticking>true</ticking>

<onTimerFired>

changeImage();//改变显示的图片

</onTimerFired>

</timer>

<!--定义用户可以修改的属性-->

<preference>

<name>path</name>

<title>Select Image Directory</title>

<type>selector</type>

<style>open</style>

<kind>folders</kind>

<description>Select a path to show.</description>

</preference>

<preference>

<name>width</name>

<title>Enter the Width to Show the Image.</title>

<type>text</type>

<description>enter the width to show the image</description>

</preference>

<preference>

<name>interval</name>

<title>The interval to change a Image.(Sec)</title>

<type>text</type>

</preference>

<action trigger="onLoad">

<![CDATA[

include ("function.js");//将javascript文件包含进来

updateBehavior();//更新属性

detectImage();//检测图片

//]]>

</action>

<action trigger="onPreferencesChanged">

updateBehavior();

detectImage();

</action>

</widget>

第二步：在ImageShow目录下建立一个function.js文件。添加以下代码：

var imageArray;

var imagePath;

var mainWindow = main_window;

var width = preferences.width.value;

function updateBehavior()

{

imagePath = preferences.path.value;

width = preferences.width.value;

timer.interval = preferences.interval.value;

}

function detectImage(){

if(imagePath == null) return;

var imageList = new Array();

imageArray = new Array();

imageList = filesystem.getDirectoryContents(imagePath, false);

for( i=0,j=0; i<imageList.length; i++){

filePath = imagePath+"/"+imageList[i];

//print("filePath:"+filePath);

if(filesystem.isDirectory(filePath)){

//print("is Directory");

continue;

}

if(isImage(imageList[i])){

//print("is image");

imageArray[j] = filePath;

j++;

}

}

}

function isImage(fileName){

length = fileName.length;

extendName = fileName.substring(length-4,length);

if(extendName == ".jpg" || extendName == ".gif" || extendName == ".png" || extendName == ".bmp"){

return true;

}else{

return false;

}

}

function changeImage(){

if(imageArray == null){

return;

}

index = Math.round( Math.random() * (imageArray.length-1) );

showImage(imageArray[index]);

}

function showImage(imagePath){

image.src = imagePath;

imageW = width;

imageH = image.srcHeight * width / image.srcWidth;

//print("image Width:" + imageW);

//print("image height: "+imageH);

image.width = imageW;

image.height = imageH;

mainWindow.width = imageW;

mainWindow.height = imageH;

//print("window Width:" + mainWindow.width);

//print("window height: "+mainWindow.height);

//mainWindow.hOffset = 200;

//mainWindow.vOffset = 100;

}

第三步：在ImageShow目录下建立一个resources目录。制作一个Loding的图片，在widget刚刚开始运行时显示，将它命名为：loding.png。我使用的是如下的图片：

第四步：使用Widget_Converter进行打包。运行Widget_Converter如图：将ImageShow文件夹整个退拽到图中的橙色区域。如图：点击Convert按钮，成功后边可以看到转换好的ImageShow.widget文件了。现在双击ImageShow.widget文件看看效果吧。代码的讲解将在下一次的教程中给出 请期待。着急的朋友可以先下载代码来看看。