基本介紹
簡介,引擎,作用,技術,概念,JS,釋義,詞典解釋,網路名詞,發展史,特徵,系統配置,套用,WRT,概覽,測試安全,Qt,移植Qt,Qt套用,顯示web,
簡介
Web Widget可以向一個基於HTML的Web頁面上添加一些動態內容。它可能是點擊計數器，實時股票信息以及航班信息等等。通常情況下，一個Widget的功能都是由第三方提供的代碼實現的，而Web開發者，只需要將這些代碼塊嵌入自己的頁面即可。其實，在全球資訊網發展的早期，Web開發者就已經嘗試在他們的頁面中嵌入一些第三方開發的代碼塊，不過這些代碼塊早期的功能通常都是一些諸如連結計數，或者廣告標識(en:Web banner）之類的。
Web Widget可以被視作是小型的可下載應用程式，不過這些應用程式都是運用一些Web技術來得以實現的，包括JavaScript,HTML以及CSS等。Web Widget通常都需要依賴一些公開的WebAPI。這些API可能是由瀏覽器公開，或者是由一些Widget引擎公開。
「Yahoo!Widget Engine」是一種基於JavaScript的應用程式平台，您必須先安裝Widget引擎後才能使用各式各樣的Widget工具。
Yahoo！Widget是由雅虎推出的免費並開放源碼的桌面應用程式平台。它由Widget引擎和Widget工具兩部分組成。能夠極大的便利您的網路操作和完善您的桌面套用。Widget引擎提供了一個Ajax應用程式平台，在Windows和Mac OS X的作業系統環境下都可以使用。安裝引擎後就能在此平台上運行各式各樣的Widget工具了。很類似於win7的桌面小工具。
引擎
主條目：Widget引擎
微件管理系統提供了一個基於Web頁面的用於對微件進行管理的方法，通常是一個Blog或者是一個社交網站的Home page。很多Blog系統直接以外掛程式的形式提供一個內嵌的微件管理工具。用戶可以藉此從不同的Widget開發商那裡獲得各種各樣的微件，並將它們運用於自己的頁面之上。
作用
Web Widget允許Web開發者在他們的頁面中集成任何第三方Web站點所提供的Widget代碼，以便於在自己的網站中聚合各種各樣的信息與資源。這樣一來，原先網頁瀏覽者可能必須要去好幾個不同站點才能獲取到的信息可以在一次頁面訪問中全部獲取到。
基於Web Widget的特性，一些人認為，通過這一途徑，站點的擁有者可以藉助Widget提升自己站點的用戶體驗，而行銷人員也可藉助Widget在用戶不需要跳轉當前頁面的情況下也可以推廣廠商自身的品牌與服務；但與此相反，另外一些人卻認為Web Widget所帶來的只是又一個商業上的泡沫而已，因為當用戶在一個集成了多種Web Widget的個性化站點或者社交網站中(如Facebook）尋找樂趣時，他們是不太可能記住Widget中推廣的品牌與產品的。
另外，由於任何Widget代碼都可以被嵌入到Web頁面中，因此一些帶有惡意代碼的Widget將可能給頁面瀏覽者帶來麻煩。比如Facebook上曾經有一個名為"Secret Crush"的Widget，它會誘導用戶去自動下載廣告軟體。
技術
概念
⒈什麼是widget技術
最直觀就是vista上的鐘可以隨便拖動。其實widget技術就是通過xml,html,css顯示UI,js作為腳本的一種套用描述技術。解析工具可以是瀏覽器也可以是其他套用。
⒉目前有的widget
微軟
vista上的widget.在手機上，微軟通過ie也實現了widget的.
Google
google的widget的是不通過瀏覽器，而是自己的載入套用
Opera
該widget是和瀏覽器綁定的。個人認為Opera的是做得最好的，但也最難。
Yahoo
很好玩的一個widget，可以去耍耍。
盛大
不是很了解，但希望中國公司能做好，能開源，能豐富。
JS
⒈jsbinding介紹
大家都知道js，當widget和js和在一起的時候，就需要js能控制本地的一些東西，比如說打開某個檔案，修改系統時間。這就需要對js功能進行擴展。其實普通的瀏覽器也有這個需求，通過增加外掛程式來支持更多的東西。
⒉API的統一
既然無論是瀏覽器還是widget都需要對js進行擴展，不同的公司將按自己的瀏覽器或widget推出一套API。有沒有人統一一下呀？聽說有個公共組織打算統一bangding的API，但還有待時間。
釋義
詞典解釋
名詞 n.
⒈（作附屬檔案用的）小機械
⒉（指工廠）未定名的主要新產品
⒊【美】【俚】裝飾物
⒋【電腦】專用界面工具集
網路名詞
⒈構件
GTK術語表[中國電子技術論壇] -- P...
135 widget 構件
⒉小部件
MS-DOS信息英漢對照 計算機英語強化|...
widget 小部件
⒊小器具
英語新辭彙與常用辭彙的翻譯（158） - ...
widget 小器具
Widget （建議中文譯名：微件）
發展史
⒈ Widget的這個創想來自一個叫做Rose的蘋果電腦工程師。98年的一天，Rose在自己的蘋果作業系統桌面玩一個可以更換皮膚的MP3播放器時忽發奇想：如果在我桌面上運行的所有工具都能夠更換皮膚或外觀，那將是一件很酷的事情，Rose的興奮之情溢於言表，它給這個酷酷的玩意兒起了個名字叫“Konfabulator”。
⒉ Konfabulator是運行在用戶電腦桌面上最炫的東西，就像一部老爺車一樣有無數能夠發揮功用並值得深入探討的零部件，帶有吸引人的神奇魅力。Rose從1999年到2001年之間，不斷向自己身邊的工程師宣傳自己對於Konfabulator的看法和它的奇幻魔力，卻沒有人對它感興趣。直到2002年的一天，Rose遇到了一個叫做Perry的工程師。兩人擁有對於Konfabulator這件事情同樣的構想，於是一拍即合。
⒊ 於是兩人開始共同為了這個炫酷的玩意兒在深夜努力工作，他們開闢了一個和Konfabulator相關的網站向大家傳播這個想法，並在論壇中徵詢網友的意見“到底什麼才是真正的Konfabulator？”大家的說法是千奇百怪的，有人說它是一個運行在用戶桌面的加熱器，有人說它是桌面寵物，有人說它是張牙舞爪的機器人。但是沒有人對於Konfabulator的描述是確切的。
⒋ 終於在2003年2月10日的深夜，Konfabulator1.0正式版在Rose和Perry的共同努力下正式發布了。它是運行在蘋果作業系統之上的小工具，其中的主運行檔案叫做Widget，在Rose頭腦中醞釀了5年的想法終於第一次問世了。並且向所有人宣布Konfabulator是運行在用戶桌面上最獨一無二的工具，你希望它是什麼樣子，它就能按照你的想法而改變。
⒌ Konfabulator意想不到的快速在全美瘋狂的蔓延著，Rose和Perry感到非常的吃驚，同時他們也認識到這將會成為Konfabulator發展歷史上非常關鍵的一個時期，於是兩個人都辭去了各自的工作，開始專注於Konfabulator這件事情。
⒍ 在2003年的7月Konfabulator1.5版本發布了，主運行檔案Widget的開發變得風靡一時，越來越多的人參與其中，也因為如此Konfabulator更名為Widget。Widget在蘋果作業系統中所表現出的熱潮，使得Rose和Perry認為它應該有更廣的套用領域。於是在接下的半年中Perry的一個朋友參與到開發Widget Windows平台版本的工作中來，但最開始的一些嘗試都是失敗的。
⒎ 不久之後Rose找到了一個自己的好朋友ED，ED是蘋果電腦公司工作超過十年有著深厚資歷的一名優秀的開發工程師。在和他溝通Windows平台下開發Widget的事情之後，ED認為Rose希望在Windows平台下運行Widget的想法有些不可理喻。Rose和Perry開始很失望，但令他們感到吃驚的是，兩天以後ED居然拿出了一個Windows平台下運行的Widget原型。
⒏ 2004年的11月Widget1.8版本正式對外發布了，由此開始Widget進入了一個新的時代，成為了跨平台的產品。使用Windows和Mac作業系統的用戶都可以使用和開發自己喜歡的Widget工具。當然這還僅僅只是一個開端。
⒐2005年07月25日，雅虎收購外掛程式引擎Konfabulator。Konfabulator是基於mac osx和windows作業系統的免費的套用平台。但是在被計算機服務公司雅虎收購後，它被重新命名了。名字Konfabulator 隨後恢復作為後台運行的服務引擎的名字。這個引擎使用java腳本運行環境和XML解析器來運行一些所謂外掛程式的小應用程式。因此是外掛程式引擎一類應用程式的一部分。
⒑2006年8月22日，雅虎中國發布了其最新產品Widget中文版。
11.2006年6月，Google桌面4.0正式發布，其中集成了很多Google小工具（Google Gadgets）。
⒓2005年下半年，Windows Vista上市，小工具第一次與消費者見面。一些評論家與Mac愛好者迅速地指出Windows邊欄在形式及功能上與蘋果公司的Dashboard以及Yahoo! Widget Engine（原為Konfabulator）相似。雖然現時有許多相似形式及功能的產品，邊欄在Windows Vista開發期間（當時代號為Longhorn）已經存在。首個包含該功能的版本號於2002年9月發布，在Konfabulator或Dashboard兩者發表之前。2009年，Windows 7發布，“Windows邊欄”消失。小工具擺脫了邊欄的束縛，在收縮模式下也可以在螢幕上自由移動。
⒔2006年10月，諾基亞發布“維信”英文版，被看作其開拓移動網際網路領域的第一步。2007年5月25日，“維信”在全球範圍內的註冊用戶達到100萬。當時英文版維信已集成諸如Wikipedia、Technorati、Digg和Flickr等網站；而維信中文版集成大眾點評網、豆瓣和一些中國本地部落格等很多中文網站的套用。2009年8月，維信在官網上發出了公告，決定停止維信服務。維信在中國開辦了2年後，終於也退出了人們的視線。
14.2009年4月30日，官方1.5版本（Cupcake 紙杯蛋糕）的Android發布。主螢幕增加音樂播放器和相框widgets。
⒖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的計算機系統。
套用
⑴電腦作業系統桌面 Widget：
Yahoo! Widget
Windows Vista側邊欄
Windows 7 的桌面小工具 也可以理解成為 Widget （小外掛程式）。
Mac OS X 的 Widget 集合，相當美觀、實用。
⑵智慧型手機作業系統桌面 Widget：
Iphone 的 iOS
Google 的 Android
⑶個性化首頁Widgets
Netvibes
iGoogle
⑷部落格Widgets
部落格側邊欄（blogspot）
抓蝦Widget
可掛在部落格中的拍照Widget
Mugsho 是一款輕量級可以放置在自己部落格中的拍照Widget，訪客可通過它留下自己的模樣。
Mugsho 是一款很有意思的小玩意兒，用戶可以將Mugsho提供的Widget放置在自己的部落格中，訪客便可以直接通過它拍下自己的模樣留給部落格站長。除了簡單的拍照功能以外，Mugsho Widget 本身還提供了部分圖像渲染功能，訪客可以在原照片的基礎上進行較為簡單濾鏡處理。
WRT
Web Runtime Widget
概覽
Widget是一種很小的應用程式，主要作為Web 2.0服務或網際網路內容的前端。Web設計人員與開發者可以使用Widget來創造最受歡迎的網際網路體驗，用戶只需在S60的桌面或套用選單中單擊即可訪問。WeatherBug Widget是許多Widget套用的一個例子，它可以使用戶隨時了解想知道的天氣情況。
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平台核心程式中獲益。
Qt
概覽
Nokia宣布放棄Web Runtime的繼續開發和升級，轉而代替的是Qt版本的WRT。其相應的Widget包以wgt為後綴名。Widget的開發和使用特點與原WRT沒有區別，未來QT WRT將會提供更多的Api訪問設備接口並支持HTML5的一些新特性。
移植Qt
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檔案了。
