zoukankan      html  css  js  c++  java
  • 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>: 当键盘按下时执行的代码。

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

  • 相关阅读:
    一个简单的knockout.js 和easyui的绑定
    knockoutjs + easyui.treegrid 可编辑的自定义绑定插件
    Knockout自定义绑定my97datepicker
    去除小数后多余的0
    Windows Azure Web Site (15) 取消Azure Web Site默认的IIS ARR
    Azure ARM (1) UI初探
    Azure Redis Cache (3) 创建和使用P级别的Redis Cache
    Windows Azure HandBook (7) 基于Azure Web App的企业官网改造
    Windows Azure Storage (23) 计算Azure VHD实际使用容量
    Windows Azure Virtual Network (11) 创建VNet-to-VNet的连接
  • 原文地址:https://www.cnblogs.com/AngelLee2009/p/1594159.html
Copyright © 2011-2022 走看看