Yahoo! widget 教程002-第一个widget

前提：如果尚未看过之前的教程.

Yahoo! Widget Engine已经安装并已经在运行，Yahoo! Widgets SDK已经安装。

第一步：建立一个文件夹，命名为：MyWidget。在MyWidget内建立一个文本文件，命名为：MyWidget.kon。

第二步：添加如下代码并保存。如图：

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

<widget>

<debug>on</debug>

<window>

<name>main_window</name>

<title>My First Widget</title>

<height>30</height>

<width>300</width>

<visible>true</visible>

<text>

<name>myText</name>

<color>#FF0000</color>

<size>18</size>

<alignment>left</alignment>

<vOffset>25</vOffset>

<hOffset>2</hOffset>

</text>

</window>

<timer>

<name>timer</name>

<interval>1</interval>

<ticking>true</ticking>

<onTimerFired>

var cpuLoad = system.cpu.activity;

myText.data = cpuLoad + "% CPU load";

myText.opacity = cpuLoad * 2.55;

</onTimerFired>

</timer>

</widget>

第三步：双击MyWidget.kon文件即可运行。出现如图所示的效果。

第四步：选择“使用widget”。如图所示：

通过以上的几步简单的操作我们的第一个widget已经可以运行了。可以看到显示cpu利用率的红色文字。代码讲解：标签的说明已经在教程的第一部分给出，请参阅上一节教程。

下面给出主要代码的讲解：

var cpuLoad = system.cpu.activity; //声明一个变量cpuLoad，注意名称区分大小写。将system对象内的cpu对象的activity属性赋值给cpuLoad。system对象是内置对象可以直接调用。对于system的详细介绍放到以后的教程里。

myText.data = cpuLoad + "% CPU load"; //将cpu的使用率赋值给myText.data，注意myText对象是在绿色代码区域定义的。

myText.opacity = cpuLoad * 2.55; //使文字的透明度与cpu的使用率相同。opacity的值在0至255之间，cpuLoad的值在0至100之间，按百分比计算，将cpuLoad的值乘以2.55得到透明度的值。