Yahoo! widget 教程001-简介

Yahoo! Widget Engine! 是雅虎推出的桌面辅助软件，同过它我们可以自定义各种各样的桌面应用程序。下面是使用Yahoo! Widget Engine! 制作的软件截图：

编写widget需要使用JavaScript 和XML 两种语言，对于这两种语言的说明不在此介绍了。

工作原理：Engine是Widget的核心，就像java的虚拟机一样，如果想运行一个Widget，系统必须先启动Widget Engine来解释代码。

Engine通过XML定义的属性来显示Widget的外观和配置属性，在XML中可以定义界面使用的图片，这样就可以通过图形修改软件来自己定义个性化的界面了。制作Widget一定有一些功能，这些功能由JavaScript来实现。

结构：通常在windows平台下的Widget一般是一个.zip压缩文件，通过将后缀名改为.widget就成了可以运行的Widget了。我们可以将下载的.widget文件改名为.zip再解压缩就会看到其中的文件了，Contents文件夹包含了全部的Widget代码和使用的资源（如图片）。

准备工作：在开始之前先要准备一些东西。

Yahoo Widgets SDK：用来开发Widget的必备工具。下载地址:http://widgets.yahoo.com/workshop/

Yahoo! Widget Engine!：是运行Widget的发动机。下载地址:http://widgets.yahoo.com/

widget Converter：用来将作好的widget打包成.widget文件，或者将widget还原成源文件。建议使用2.0的版本，1.0的版本是不垮平台的。2.0跨平台，本身也是一个widget。

文本编辑器：可以用记事本，但是最好用支持缩紧和对齐的第三方软件推荐EditPlus或UltraEdit-32;

图像编辑器: Photoshop, painter ,paint shop 只要会用就可以了。

文档（十分重要）：下载地址：http://cn.widget.yahoo.com/workshop.htm。包括开发指南（Widget_Creation_Tutorial.pdf）,Widget开发说明书，idgetEngineReference_3.1.1.pdf）,JavaScript 参考书。（中文的哦），我第一次下的是英文的，看的想吐，现在有中文的了，郁闷阿。

建议大家下载Yahoo Widgets SDK其中包括了必须的文档和工具。

文件类型

在Contents目录下一般会有以下几种文件：

.kon文件：当widget运行的时候Engine首先读取.kon文件，并根据其中的XML定义来初始化界面例如：图片的位置大小透明度等。其中也可以包含由JavaScript代码编写的Widget功能代码。但是如果widget比较复杂的时候一般将JavaScript代码写在.js文件中,但是并不是必须的全部代码都可以写在.kon文件中。

.js文件: 只包含使widget运行的必须的JavaScript代码，不包含XML代码。有时会有两个或更多的.js文件，但是这种情况只在非常复杂的widget中才能见到。

.Info .plist文件：是Mac OS X 上使用的XML文件,对于windows用户可以忽略。

.scpt文件：同样只在苹果机上运行，这里不进行讲解。

.kon文件内的XML标签讲解：

文件的第一行是对XML文件的版本和编码格式进行定义，Engine通过第一行来识别XML。windows下一般使用UTF-8就没问题了。

例如：

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

<widget>标签必须包含的标签是widget开始的标志。

<version>: 定义widget的版本

<minimumVersion>: 定义可运行此widget的最低Engine的版本

<debug>设置调试信息的on或off。

<window>: 必须包含的标签，定义

<name>: 定义window的名称，可以在JavaScript中使用此名称。

<title>: 定义window的标题。

<height>: 定义高度

<width>: 定义宽度

<visible>: window是否显示，一个boolean值可以是0或1，true或false。

<image>: 定义图像

<name>: 与window的属性相同

<hOffset>: 距离window的左上角水平方向的偏移量。

<vOffset>: 垂直方向的偏移量

<hRegistrationPoint>: Defines the X-pixel coordinate from which to base things like offset and rotation. This is set to 0 by default (The left side of the image).

<vRegistrationPoint>: Defines the Y-pixel coordinate from which to base things like offset and rotation. This is set to 0 by default (The top edge of the image).

<rotation>: 定义图形的旋转角度。

<opacity>: 从0到255的值，设置图像的透明度。

<onMouseDown>: 当鼠标按下的时候执行的代码。

<onMouseUp>: 当鼠标抬起时执行的代码。

<text>: 定义文本

<name>: 同window的name

<data>: 显示的内容

<hOffset>: 水平坐标

<vOffset>: 垂直坐标

<alignment>: 可以是"left", "center", "right" 值，定义如何对齐。

<color>: 字体颜色例如 ：#000000 为黑色。

<font>: 字体

<size>: 字体的大小

<opacity>: 透明度

<onMouseDown>:同windows

<onMouseUp>: 同windows

<textarea>: Allows use of text input in a Widget.

<name>: 同window的name

<hOffset>: 水平坐标

<vOffset>: 垂直坐标

<lines>: 显示多少行

<columns>: 超过多少行开始滚动。

<color>: 字体颜色

<font>: 字体

<bgColor>: 输入框的背景色。

<bgopacity>: 背景的透明度。

<onKeyPress>: 当键盘按下时执行的代码。

还有很多标签这里只列出常用到的，其他的请大家自己摸索吧。