web widget(微件)

    本文章来源于：http://baike.baidu.com/view/704016.htm

 

简介： 

       Web Widget,中文译名被称作是微件,是一小块可以在任意一个基于HTML的Web页面上执行的代码，它的表现形式可能是视频，地图，新闻，小游戏等等。

它的根本思想来源于代码复用，通常情况下，Widget的代码形式包含了DHTML,JavaScript以及Adobe Flash。

 

    　　Web Widget可以向一个基于HTML的Web页面上添加一些动态内容。它可能是点击计数器，实时股票信息以及航班信息等等。通常情况下，一个Widget的功能都是由第三方提供的代码实现的，而Web开发者，只需要将这些代码块嵌入自己的页面即可。其实，在万维网发展的早期，Web开发者就已经尝试在他们的页面中嵌入一些第三方开发的代码块，不过这些代码块早期的功能通常都是一些诸如链接计数，或者广告标识(en:Web banner)之类的。

　　 Web Widget可以被视作是小型的可下载应用程序，不过这些应用程序都是运用一些Web技术来得以实现的，包括JavaScript,HTML以及CSS等。Web Widget通常都需要依赖一些公开的Web API。这些API可能是由浏览器公开，或者是由一些Widget引擎公开。

 

 

作用以及评价

 

       Web Widget允许Web开发者在他们的页面中集成任何第三方Web站点所提供的Widget代码，以便于在自己的网站中聚合各种各样的信息与资源。这样一

来，原先网页浏览者可能必须要去好几个不同站点才能获取到的信息可以在一次页面访问中全部获取到。

 

　　基于Web Widget的特性，一些人认为，通过这一途径，站点的拥有者可以借助Widget提升自己站点的用户体验，而营销人员也可借助Widget在用户不需要

跳转当前页面的情况下也可以推广厂商自身的品牌与服务；但与此相反，另外一些人却认为Web Widget所带来的只是又一个商业上的泡沫而已，因为当用户在一

个集成了多种Web Widget的个性化站点或者社交网站中(如Facebook)寻找乐趣时，他们是不太可能记住Widget中推广的品牌与产品的。

 

　　另外，由于任何Widget代码都可以被嵌入到Web页面中，因此一些带有恶意代码的Widget将可能给页面浏览者带来麻烦。比如Facebook上曾经有一个名

为"Secret Crush"的Widget，它会诱导用户去自动下载广告软件。

 

 

Widget引擎　　

 

　　微件管理系统提供了一个基于Web页面的用于对微件进行管理的方法，通常是一个Blog或者是一个社交网站的Home page。很多Blog系统直接以插件的形式

提供一个内嵌的微件管理工具。用户可以借此从不同的Widget开发商那里获得各种各样的微件，并将它们运用于自己的页面之上。

 

Widget技术

 Widget技术_概念（1）

　　1.什么是widget技术

　　最直观就是vista上的钟可以随便拖动。其实widget技术就是通过xml,html,css显示UI,js作为脚本的一种应用描述技术。解析工具可以是浏览器也可以是其他应用。

　　2.目前有的widget

　　微软

　　vista上的widget.在手机上，微软通过ie也实现了widget的.

　　Google

　　google的gadget的是不通过浏览器，而是自己的加载应用

　　Opera

　　该widget是和浏览器绑定的。个人认为Opera的是做得最好的，但也最难。

　　Yahoo

　　很好玩的一个widget,可以去耍耍。

　　盛大

　　不是很了解，但希望中国公司能做好，能开源，能丰富。

Widget技术_JS banding（2）

　　1.jsbinding介绍

　　大家都知道js,当widget和js和在一起的时候，就需要js能控制本地的一些东西，比如说打开某个文件，修改系统时间。这就需要对js功能进行扩展。其实普通

的浏览器也有这个需求，通过增加插件来支持更多的东西。

　　2.API的统一

　　既然无论是浏览器还是widget都需要对js进行扩展，不同的公司将按自己的浏览器或widget推出一套API。有没有人统一一下呀？听说有个公共组织打算统一

bangding的API，但还有待时间。

 

 

起源与发展　

　

      1. Widget的这个创想来自一个叫做Rose的苹果电脑工程师。98年的一天，Rose在自己的苹果操作系统桌面玩一个可以更换皮肤的MP3播放器时忽发奇想：

如果在我桌面上运行的所有工具都能够更换皮肤或外观，那将是一件很酷的事情，Rose的兴奋之情溢于言表，它给这个酷酷的玩意儿起了个名字

“Konfabulator”。

 

　 2. Konfabulator是运行在用户电脑桌面上最炫的东西，就像一部老爷车一样有无数能够发挥功用并值得深入探讨的零部件，带有吸引人的神奇魅力。Rose从

1999年到2001年之间，不断向自己身边的工程师宣传自己对于Konfabulator的看法和它的奇幻魔力，却没有人对它感兴趣。直到2002年的一天，Rose遇到了一

个叫做Perry的工程师。两人拥有对于Konfabulator这件事情同样的构想，于是一拍即合。

 

　　3. 于是两人开始共同为了这个炫酷的玩意儿在深夜努力工作，他们开辟了一个和Konfabulator相关的网站向大家传播这个想法，并在论坛中征询网友的意见

“到底什么才是真正的Konfabulator？”大家的说法是千奇百怪的，有人说它是一个运行在用户桌面的加热器，有人说它是桌面宠物，有人说它是张牙舞爪的机

器人。但是没有人对于Konfabulator的描述是确切的。

 

　　4. 终于在2003年2月10日的深夜，Konfabulator1.0正式版在Rose和Perry的共同努力下正式发布了。它是运行在苹果操作系统之上的小工具，其中的主运行

文件叫做Widget，在Rose头脑中酝酿了5年的想法终于第一次问世了。并且向所有人宣布Konfabulator是运行在用户桌面上最独一无二的工具，你希望它是什么

样子，它就能按照你的想法而改变。

 

　　5. Konfabulator意想不到的快速在全美疯狂的蔓延着，Rose和Perry感到非常的吃惊，同时他们也认识到这将会成为Konfabulator发展历史上非常关键的一

个时期，于是两个人都辞去了各自的工作，开始专注于Konfabulator这件事情。

 

　　6. 在2003年的7月Konfabulator1.5版本发布了，主运行文件Widget的开发变得风靡一时，越来越多的人参与其中，也因为如此Konfabulator更名为

Widget。Widget在苹果操作系统中所表现出的热潮，使得Rose和Perry认为它应该有更广的应用领域。于是在接下的半年中Perry的一个朋友参与到开发Widget

 Windows平台版本的工作中来，但最开始的一些尝试都是失败的。

 

　　7. 不久之后Rose找到了一个自己的好朋友ED，ED是苹果电脑公司工作超过十年有着深厚资历的一名优秀的开发工程师。在和他沟通Windows平台下开发

Widget的事情之后，ED认为Rose希望在Windows平台下运行Widget的想法有些不可理喻。Rose和Perry开始很失望，但令他们感到吃惊的是，两天以后ED居然

拿出了一个Windows平台下运行的Widget原型。

 

　　8. 2004年的11月Widget1.8版本正式对外发布了，由此开始Widget进入了一个新的时代，成为了跨平台的产品。使用Windows和Mac操作系统的用户都可

以使用和开发自己喜欢的Widget工具。当然这还仅仅只是一个开端。

 

　　9.2005年07月25日，雅虎收购插件引擎Konfabulator。 Konfabulator是基于mac osx和windows操作系统的免费的应用平台。但是在被计算机服务公司雅

虎收购后，它被重新命名了。名字Konfabulator 随后恢复作为后台运行的服务引擎的名字。这个引擎使用java脚本运行环境和XML解析器来运行一些所谓插件的

小应用程序。因此是插件引擎一类应用程序的一部分。

 

　　10.2006年8月22日，雅虎中国发布了其最新产品Widget中文版。　

 

      11.2006年6月，Google桌面4.0正式发布，其中集成了很多Google小工具(GoogleGadgets)。

 

　  12.2005年下半年，Windows Vista上市，小工具第一次与消费者见面。一些评论家与Mac爱好者迅速地指出Windows边栏在形式及功能上与苹果公司的

Dashboard以及Yahoo! Widget Engine（原为Konfabulator）相似。虽然现时有许多相似形式及功能的产品，边栏在Windows Vista开发期间（当时代号为

Longhorn）已经存在。首个包含该功能的版本号于2002年9月发布，在Konfabulator或Dashboard两者发表之前。2009年，Windows 7发布，“Windows边

栏”消失。小工具摆脱了边栏的束缚，在收缩模式下也可以在屏幕上自由移动。

 

　　13.2006年10月，诺基亚发布“维信”英文版，被看作其开拓移动互联网领域的第一步。2007年5月25日，“维信”在全球范围内的注册用户达到100万。

当时英文版维信已集成诸如Wikipedia、Technorati、Digg和Flickr等网站；而维信中文版集成大众点评网、豆瓣和一些中国本地博客等很多中文网站的应用。

2009年8月，维信在官网上发出了公告，决定停止维信服务。维信在中国开办了2年后，终于也退出了人们的视线。　14.2009年4月30日，官方1.5版本

（Cupcake 纸杯蛋糕）的Android发布。主屏幕增加音乐播放器和相框widgets。

 

　　15.2010年10月，微软公司正式发布Windows Phone智能手机操作系统的第一个版本Windows Phone 7，加入了特有的动态磁贴（Live Tiles），尽管与

Widget有着看似相似的信息传递功能，却有着不同的设计原理和理念。

 

 

特征　　

 

       widget具有哪些特征呢？ 《网络整合营销兵器谱》一书中提出了以下几点

　　1．身材微：它们一般都很小，在终端上嵌入非常方便，运行快速。

　　2．形式多：Widget可以以多种形式呈现出来，幻灯秀、视频、地图、新闻、小游戏……

　　3．功能巨：别看它们小，却服务周到，它可以为你报告新闻、帮你买东西、列出你最喜欢的乐队，还有你最近看的视频。另外，它还是一个殷勤的管家，你

不必亲自去Flickr或者天气预报网站，Widget会将信息主动带给你。

　　4．姿容丽：它们可以称得上玉面飞龙、以色服人。只要你愿意，你可以把它变成任何你想要得样子。它的出现，无异于一枚“桌面炸弹”，狭窄而单调的IE

窗口将被更为广阔和绚丽的桌面空间所取代。

　　5．个性化：Widget更像一个属于我们每个人的魔方，任由用户聚合。你可以根据自己喜好，将多个Widget，随心所欲的去精心组装你的网络世界。通过

Widget，用户可以把一切在“网”中的内容打乱重来，并按照用户希望看到的样子重新排列组合一个属于自己的互联网。比如说一个由微件搭建个人空间，可以

包括来自新浪的体育新闻，来自论坛的一个板块，来自权威财经网站的一则随时更新的股票信息——这些以往需要用户同时分别进入几个网站才能看到的信息，

现在由一个个微件将其转变为用户个人空间的一部分，从而可以直接在同一个页面中并存。传统互联网访问方式处于分裂状态的后Web2.0时期，多样性、炫酷且

更具个性化的Widget流行，或许能引领一个新的潮流。

 

　　6．易制作：制作 Widget 部件并不复杂，只需要熟悉三方面的知识：图像处理、HTML/XML、java，就可以按照开发站点里的教程做出漂亮的部件来。

Widget能够流行的一个要点在于开放制作，UGC应用带来爆炸式地增长。参考资料来源（《网络整合营销兵器谱》辽宁出版集团 刘东明 ）

 

 

系统配置　　

 

        Yahoo!Widget工具在Windows和MacOS X上都可执行。 Windows：等级需为Windows 2000 Service Pack 3 或以上版本或Windows XP SP1或以上版本。 Macintosh：等级则需为Mac OS X 10.3 或以上版本。 内存需求为512MB以上，使用宽带网络不小于512k的计算机系统。

 

 

各种应用　　

   （1）电脑操作系统桌面 Widget：

　　Yahoo! Widget

　　Windows Vista侧边栏

　　Windows 7 的桌面小工具 也可以理解成为 Widget (小插件)。

　　Mac OS X 的 Widget 集合，相当美观、实用。

　　（2）智能手机操作系统桌面 Widget：

　　Iphone 的 iOS

　　Google 的 Android

　　（3）个性化首页Widgets

　　Netvibes

　　iGoogle

　　（4）博客Widgets

　　博客侧边栏（blogspot）

　　抓虾Widget

　　可挂在博客中的拍照Widget

　　Mugsho 是一款轻量级可以放置在自己博客中的拍照Widget，访客可通过它留下自己的模样。

　　 Mugsho 是一款很有意思的小玩意儿，用户可以将Mugsho提供的Widget放置在自己的博客中，访客便可以直接通过它拍下自己的模样留给博客站长。除了

简单的拍照功能以外，Mugsho Widget 本身还提供了部分图像渲染功能，访客可以在原照片的基础上进行较为简单滤镜处理。

 

 

概览

 

　　Widget是一种很小的应用程序，主要作为Web 2.0服务或互联网内容的前端。Web设计人员与开发者可以使用Widget来创造最受欢迎的互联网体验，用户只

需在S60的桌面或应用菜单中单击即可访问。WeatherBug Widget是许多Widget应用的一个例子，它可以使用户随时了解想知道的天气情况。

　　仅需几天甚至几个小时，您便可以给移动用户创建一个访问您Web服务的界面，就像手机的快速拨号那样易于使用。Widget提供了与您的客户建立一对一关

系的机会。通过标准的浏览器，用户可以轻松地在这些服务内容中跳转。通过Widget，服务内容产生了焦点，而且具备内置的信任级别。

　　WRT令每个人都可以使用Web的开发和设计技巧为移动用户创建令人激动的互联网体验，而这一切只需数日甚至几个小时。无论是要为您的Web服务提供单

击访问的界面，还是想整合（mashups）各种各样的资源信息产生增值，WRT都令其成为可能。

　　从技术角度来看，WRT在流行的S60 Web浏览器中增加了一个Web程序的运行环境，使得S60设备可以运行Widget。正如桌面Widget，WRT Widget是轻量

级的移动应用，使用诸如HTML，CSS，JavaScript?和Ajax等标准的Web技术来开发。事实上，您几乎不花什么功夫就可以将桌面Widget迁移到WRT中来，您可

以使用现有的编写工具来创建和打包您的应用。

　　在最新的S60第五版中整合了S60平台服务，可用标准的HTML和JavaScript技术创建更具个性和环境感知性的Widget。通过获取存储在本地设备上的信息，

如日历和通讯录程序，Widget可以整合互联网和本地资源，提供一个全新的、个人化的服务体验。例如，通过访问设备上的全球定位系统（GPS）功能，Widget

可以给用户提供更具相关性和环境感知性的信息。作为Web开发者，您可以轻易地使用JavaScript扩展来访问这些新特性。

 

测试与安全

　　从Web设计和开发的观点，最初的问题将是如何测试和验证Web程序的功能。诺基亚论坛让WRT可通过远程设备访问（RDA）程序来使用。最新S60平台的

SDK中也包含了最新版的WRT技术。

　　WRT Widget可像其他S60应用一样安装、使用和运行。用户可以将自己最喜欢的Widget添加到S60的桌面，或者从应用菜单中启动。由于WRT的重点在于提

供互联网访问服务，所以Widget不需要签名。

　　作为领先的移动设备厂商，诺基亚认真对待移动安全问题。与那些浏览器执行的JavaScript技术相比，Widget不会产生更多的安全风险。JavaScript技术提供

了供第三方代码运行的严格控制的环境，通常称为沙盒（Sandbox）安全模型。在S60第五版中，Widget可从访问通讯录、日历和GPS这样的S60平台核心程序

中获益。

 

 

目前支持机型

　　由于WRT技术较新，仅仅支持Symbian S60 第三版部分机型及S60第五版的所有机型，详情如下：

　　Nokia 5320 XpressMusic

　　Nokia 6220 Classic

　　Nokia 6210 Navigator

　　Nokia N78

　　Nokia N79

　　Nokia N81

　　Nokia N82

　　Nokia N85

　　Nokia N96

　　Nokia N95 8GB (via Software update)

　　Nokia N95 (via Software update)

　　Nokia N95 (North America) »

　　E90 Communicator (via Software update)

　　Nokia C5

　　Nokia C7

　　Nokia E51

　　Nokia E66

　　Nokia E71

　　Nokia E63

　　Nokia 5230

　　Nokia 5800

　　Nokia n97

　　Nokia 5630 XpressMusic

　　Nokia 5730 XpressMusic

　　Nokia 5530 XpressMusic

　　Moto MileStone（里程碑）

　　Samsung SGH-G810

　　Samsung SGH-i450

　　Samsung SGH-i550

　　Samsung SGH-i560

　　LG-KT610

　　lg kp500

 

Qt Web Runtime Widget

概览

　　Nokia宣布放弃Web Runtime的继续开发和升级，转而代替的是Qt版本的WRT。其相应的Widget包以wgt为后缀名。Widget的开发和使用特点与原WRT没有

区别，未来QT WRT将会提供更多的Api访问设备接口并支持HTML5的一些新特性。

 

WRT widget移植到Qt

创建一个基于QWebView控件的Qt应用

　　启动 Qt Creator IDE.依此选择File > New File or Project... > Projects >Qt C++ Project> Mobile Qt Application.点击 Choose。填入项目名称和

路径。点击 Next。接下来，根据需要选择你的应用所支持的平台。点击Next。然后，选择屏幕旋转的方式。 这里需要注意的一点是，如果你的应用需要网络连

接，请选上下面的Enable network access选项。点击Next。根据需要，选择版本控制。点击 Finish。

　　首先我们将webkit模块的加载到我们的项目中：

　　QT += webkit现在就可以编辑代码了！

　　首先，要在项目中添加一个类WRTWidgetWindow。依此选择File > New File or Project... > Files and Classes >C++> C++ Class. 在类名中填入

WRTWidgetWindow， 并在基类下拉选项中选择QMainWindow。这样文件 wrtwidgetwindow.h和wrtwidgetwindow.cpp会自动添加到项目中。

　　接下来编辑文件 wrtwidgetwindow.h :

　　#ifndef WRTWIDGETWINDOW_H

　　#define WRTWIDGETWINDOW_H

　　#include <QtCore/QPointer>

　　#include <QtGui/QMainWindow>

　　class QWebView;

　　class WRTWidgetWindow :public QMainWindow

　　{

　　Q_OBJECT

　　public:

　　WRTWidgetWindow(QWidget *parent = 0);

　　~WRTWidgetWindow();

　　private:

　　void setupUI();

　　QWebView* createWebView();

　　private:

　　QPointer<QWebView> webView;

　　};

　　#endif // WRTWIDGETWINDOW_H上面的类WRTWidgetWindow继承自QMainWindow，代表了应用的主窗口。 WRTWidgetWindow包含了QWebView

控件。QWebView用来在Qt应用中显示web内容（HTML, CSS, JavaScript）。

　　接下来，编辑(wrtwidgetwindow.cpp)：

　　#include "wrtwidgetwindow.h"

　　#include <QtGui/QFrame>

　　#include <QtGui/QVBoxLayout>

　　#include <QtWebKit/QWebView>

　　WRTWidgetWindow::WRTWidgetWindow(QWidget *parent)

　　: QMainWindow(parent)

　　{

　　setupUI();

　　}

　　WRTWidgetWindow::~WRTWidgetWindow()

　　{

　　webView->deleteLater();

　　}

　　void WRTWidgetWindow::setupUI()

　　{

　　QFrame* cw =new QFrame(this);

　　setCentralWidget(cw);

　　QVBoxLayout* layout =new QVBoxLayout(cw);

　　cw->setLayout(layout);

　　webView = createWebView();

　　layout->addWidget(webView);

　　}

　　QWebView* WRTWidgetWindow::createWebView()

　　{

　　QWebView* view =new QWebView(this);

　　return view;

　　}最后，双击打开文件 main.cpp ， 并做一些修改：

　　#include <QtGui/QApplication>

　　#include "wrtwidgetwindow.h"

　　int main(int argc, char*argv[])

　　{

　　QApplication app(argc, argv);

　　WRTWidgetWindow window;

　　window.show();

　　return app.exec();

　　}现在，可以编译运行这个应用了。当然现在的QWebView中的内容还是空的。

 

显示web内容

　　现在，向这个Qt应用中加入WRT widget 内容。 将HTML, CSS, JavaScript和其他资源文件拷贝到你的Qt项目文件中。尽量保留原来的WRT widget的目录结

构，这样可以避免找不到引用文件。 常见的WRT widget的目录一般是这样的：

　　html/ (HTML files)

　　style/ (CSS files)

　　js/ (JavaScript files)

　　gfx/ (graphics)为了便于在Qt应用中使用web内容，需要在项目中添加一个资源文件。选择File >New File or Project... > Qt > Qt Resource file，点

击Choose...， 然后填入资源文件的名字和路径。点击Next，确保这个文件加入到当前的项目中。最后点击Finish。一个.pro 文件会自动加到你的项目中。然后

将以下web内容相关的文件加入到资源文件中：

　　在这个例子中我只用到了两个文件：

　　<RCC>

　　<qresourceprefix="/">

　　<file>res/sample.html</file>

　　<file>res/js/sample.js</file>

　　</qresource>

　　</RCC>现在，web文件仅仅是加入到Qt项目中，但是他们还没有被现实出来。为了在HTML文件中能够访问这些资源文件，需要在原来引用的地方加

上"qrc:/"前缀。

　　在 wrtwidgetwindow.cpp 文件中加入如下加载HTML文件的代码：

　　QWebView* WRTWidgetWindow::createWebView()

　　{

　　QWebView* view =new QWebView(this);

　　view->load(QUrl("qrc:/res/sample.html"));

　　return view;

　　}代码已经全部修改完毕。重新编译你的Qt应用(Build >Rebuild Project)。 最后运行这个Qt应用(Build > Run 或者 Ctrl+R)。 现在，就可以在QWebKit

中看到这个HTML文件了。