Kỹ thuật lập trình gadget cho Window VistaTên bài viết: K ỹ thuật lập trình gadget cho Window Vista

Tác giả: Phạm Hải - caulacbovb.com

Cấp độ bài viết: Chưa đánh giá

Tóm tắt: Hướng dẫn ìập trình gadget cho Window Vista

I.Dẩn nhậpWindows Vista cùng với vẻ hào nhoáng của nó đã làm say mê rấ t nhiều người và một trong các đặc trưng ấn tượng nhất chính là Windows sidebar với các tiện ích nhỏ như :lịch ,đồng hổ ,CPU ( gọi là gadget )... chiếm một phần trên desktop, bạn có thể dễ dàng tùy chỉnh những công cụ này để phù hợp cũng như hiển thị ở trên cùng, ở dạng cửa sô lớn và cũng có thể đặt cứ chỗ nào trên màn hình bằng các điều chỉnh trong Windows Sidebar properties..Điều tuyệt vời hơn nữa là lập trình các gadget này cực kỳ dễ dàng , tron g giới hạn bài viết này tôi sẽ hướng dẫn các bạn làm hai gadget tiện ích đầy sức mạnh chỉ trong vòng 15 phút với chưa đến 20 dòng code bằng javascript, bạn đừng lo mình không thạo java vĩ tôi cũng sẽ demo bằng cả ngôn ngữ kịch bản thông dựng nhất trên window hiện nay VbScript - .Những người có kinh nghiệm không nhiều về VB cũng sẽ nắm bắt dễ dàng thôi !

Bạn sẽ học được những gì từ bài viết này:- Bản chất của vista gadget hay kỹ thuật lập trình với html dùng JavaScript và VbScript- Kỹ thuật viết và cài đặt gadget bằng Visual studio 2008 -Visual studio 2005 step by step trong vòng 15 phút- Kỹ thuật viết,debug html nhanh chóng với Microsoft Frontpage 2003

II.Giới thiệu Vista GadgetGadget là một tiện ích nhỏ gắn ưên thanh sidebar,thường có kích thước 139 pixel, cung cấp nhiều thông tin hữu ích như : CPU,ngày tháng ,nhật ký,thời tiế t... bạn có thể tìm thấy rất nhiều gadget tuyệt vời nữa tại địa chỉ này http://vista.gallerv.microsoft.com/vista/SideBar.aspx? mkt=en-us với một thư viên đổ sộ gần 2K gadget. Thực chất gadget không phải là một dạng file thực thi kiểu mới ttên Vista mà đơn giản chỉ là một hay nhiều trang HTML được host bới tiện ích Window sidebar do vậy kỹ thuật lập ữình chỉ đơn giản là xử lý HTML với các đoạn script, đương nhiên nếu muốn làm các gadget cao cấp thì bạn cắn tím hiểu thêm về gadget api của vista .vớ i các gadget cao cấp bạn có thể code bằng Visual Studio 2K5 hay 2K8 dùng WPF rấ t dễ dàng ( xin lưu ý là gadget chỉ có ưên Vista mặc định đã có Net 3.0 ).

l õ 7:41 PM

II Gadget có thể làm được những gì?Nêu dựa ữên tiêu chí là các công nghệ để cấu thành lên gadget thì có tấ t cả 3 loại gadget;

-Mini web application: Lftig dụng web nhỏ sử dựng IITML,CSS và các script ( Vbscript, Java, J.. etc)- Data application : ứng dụng có truy xuất dữ liệu sử dụng HTML ,DHTML, DOM Ajax.Gadget loại này có thể kết nối đến các dịch vụ web đ ể truy xuất dữ liệu và hiển thị ra cho người dung cuối n h ư : khai thác dịch vụ rss, chỉ sô chứng khoán,thông tín thời tiết các miền..etc-Mini utilities :CÓ tác dụng như một tiện ích dùng :ActiveX object, gadget API và DHTML.. .ví dụ như các gadget đo CPU,hiển thị đổng hổ số..hay thậm chí là các tiện ích truy xuất tài nguyên hệ thống và rấ t nhiều công việc khác.

\\ r*gHggn

o I***HTMLCSS JavnSoifi

Un no apptcro

O'JM ữăúyiA Y

0 1 T& . -Data «pp co lon

4 ^ 8 ~ .........ÍỀíẳUtẾăm___________________

HTMLDOMA.A«XWTMl

6 m ç * î AfAc&vfXDmTML

IV.Dữ liệu mà gadget sử dụngGadget có thể truy xuất dữ liệu từ rấ t nhiều nguồn :

- RSS/XML- Các ữang web- Các dịch vụ web- Tài nguyên hệ thống : file,folderVà đương nhiên truy xuất được vào các hệ quản trị dữ liệu nhờ ActiveX object...

3-ĩ« -fr>ag«|

V(wrPaçj*

*W*. s«

« c ?H * » « n d F o M »

□RSS ' XML F w d

# +StứẼbÊt Gmằyì

Ạ

1*1*EM*PMt AppKabcm

Um <s

v.cấu trúc một gadget

Ngoài các gadget chuẩn , các gadget mà chúng ta thêm vào sẽ nằm tại thư mục sau :

C:\user\<user_name>\app data\local\microsoft\windows side bar\gadgets C:\ —> là Ổ đĩa cài vista<user_name> —> là tên người dùng hiện thời ví dụ , ví dụ haipt.Tất cả các file cấu thành lên Gadget thường được đặt trong thư mục này,

C Ç • « Atrtdovit Sid«b4f » ► YourG*d<j*t+í*rrt*.ụ.»d9«« 1

1 Ht EM Via» Tool« H^pI « . . , , . -

.............. ^

Name Date modified Type s«e

Ị* Documente

Ẹ! PkU *»

M vw M©## »*

i , cn u imgBi scnptoe yođgt*.Nml ¿' ọadọrt.iml

ll/ift/2006 i:ề0 PM 11.16.20W 6:40 PM 11/16/2006 6:40 »M 11/16/20» 6;40 m 11/16/2008 W 0 fM

WefoWer F*e Folder We FolderHTML Oocumet* I K XML Do<um«nt 1 K

Các file chính của một gadget gồm có

- gadget.xml : Đây là file rấ t quan trọng , nó lưu trữ các thông sô cấu hình của 1 gadget như là tên tác giả,phiên bản sảnphẩm .. dưới dạng thức XML.Bạn không cắn biết nhiều v ế format này vẫn có thể sửa đổi dế dàng ,trong đó có hai dòng đặc biệt quan trọng

<hosts><host name="sidebar"><base type="HTML" apiVersion="1.0.0" src="gadget.html" /><permissions>full</permissions><platform minPlatformVersion="1.0" /><defaulümage src="" /></host></hosts></gadget>

Dòng bôi đỏ đắu tiên cho biết file html được đưa lên sidebar là file gadget.html ở cùng thư mục, dòng bôi đỏ thứ 2 xác định quyền han cho ,nếu chúng ta không đặtiỉgadget này là toàn quyền truy xuất hệ thống là full thì các chức năng truy xuất hệ thống của gadget có thể sẽ không dung được do bị lỗi cấm truy nhập.

-File [Gadget_Namel.html : đây là file được xác định thông qua tag : src trong file XML chính,

ở ví dụ này nó có tên gadget.html, file html này sẽ được đưa lên sidebar khi gadget được cài đặt

-Các file .CSS : viết tắ t của chữ cascades style sheet, các file này lưa cấu hình của file html tương ứng ,rất quen thuộc với dân làm web, ví dụ dưới là nội dụng 1 file css

body

1.

2. width :129;

3. height:70;

4. font-family: Calibri;

5. font-size:llpx;

6. margin: 0;

7. padding: 0;

8. text-align:center;

9.

Kích cỡ mặc định của 1 gadget thường là 129 p ixel, dù ta có thể chỉnh to hơn thành 250 nhưng theo tôi bạn lên để chê đó chuẩn và thiết kê 1 gadget theo kích thước này .

V.Lập trình với Gadget bằng Visual Studio 2005 -2008

l.Cài đặt addin & gagget template project cho Visual Studio 2005 -2008Ngoài cách tự dựng lấy các file cắn thiết để làm một gadget, chúng ta còn có thể xây dựng

một gadget template và intstall nhanh chóng bằng Visual studio 2005 - 2008 .De hiểu thôi, chúng ta cắn một cõng cụ mạnh dể soạn ,thiết kế html, viết script có hỗ trợ gợi nhớ code... và nhiều thứ khác nữa.Dù notepade là công cụ soạn thảo cũng khá mạnh đấy nhưng hãy quên nó đ i .

Các bước tiến hành như sau ..- Cài đặt Visual studio 2008 hoặc 2008, ở đây tôi chọn bản 2008,- Cài đặt phần addin : RunVistaGadgetAddlnSetup, bạn có thể download phân mềm miễn phí này tạ i địa chỉ :http://www.codeproiect.com/KB/gadgets/RunVistaGadget.aspxSau khi cài đặt thì chương ữình này sẽ tích hợp vào visual studio, hỗ trỢ chúng ta tạo template gadget và cung cấp luôn tiện ích “Run vista gadget” trên menu tool.Nêu chưa thấy thì có thể nó chưa được load,bạn cần vào menu ToolsVAddin-Manager đ ể lôi nó ra

2. Gadget đầu tiên - Light googleDân IT thì 100% đều dung google vậy tại sao không đ ể nó lên sidebar cho tiện nhỉ ?? Gadget của chúng ta sẽ có giao diện như một google thu nhỏ,khi cẩn tìm kiếm chỉ việc gõ từ khóa lên gadget rồi enter là xong ! đ ể lập trình được một gadget tiện dụng như vậy ta chỉ m ất có 5 dòng ,dưới đây là chi tiết các bước.-ỡcode

2.1 Tạo gadget template project- Trong cửa sô Visual studio 2008 , chọn menu File—>New—>Web site...Nêu chúng ta cài đặt VistaGadgetAddln thành công thì hộp thoại New Website sẽ hiện ra như hình dưới.Template HelloWorldVistaGadget đã được dựng sẵn với các file cắn thiết như css, setting..... bạn nhắp tiếp vào template này và nhấn OK,VS2k8 sẽ hiển thị tiếp hộp thoại yêu cầu upgrade lên Net 3.5,bạn có thể bỏ qua hoặc chấp nhận nếu viết gadget bằng siverlight hoặc WPF .

V a a

[ ~ Tenvtoces í íiO T M m t i ỉ - ~ H

iV « k S u A * s * n n # < b U n k < «1 l i t p t r » t b S t t

u n S4r ¿ 4 A SM *T <>>«•< * ( * * * •

U , Tm tvU m

J | H tlo'*C *ơề aUOềÓỊtt

K

J J î t ê n h O W K ĩ t~ i * đ t o

A M ai* ẤSP met 'A ab PU iM H 35;

.o c a lien I l f ịy ĩtem • L L * n . w ^ c u n n l ..IU * f e d « ¿X« M M c t u » » . .

y1' « ir C m m

Cuối cùng cửa sô solution explorer hiện ra như hình dưới.

Solution Explorer - Ê:\...\HelloWorldVÌ5taGadgẽt2Y

à ỌQHã]ị ^ 3 #

E:\_.\HelloWorldVistaGadget2\^ Solution 'HelloWorldVistaGadget2' (1 project)

É- ____________J css

A-l gadget.css r~a images ujÿ scripts

à |j gadget.js [•) gadget.html i l gadget.xml

_ỉ» web.config

à -

s

Trong các file, folder trên ,ngoài các file chính gadget.xml: lưu thông tín cấu hình gadget, gadget.html :chính là trang web sẽ được đưa lên sidebar ,và file css thì còn lại có thể xóa đưỢc,file gadget.js là file script được tạo sẵn để chứa code javascript, tuy nhiên nếu bạn dùng vbscript thì có thể thay bằng file gadget.vbs rồi thay đổi dòng sau trong file gadget.html

<script src="scripts/gadget,js" type="text/javascript"x/script>

Nhắp đúp chuột vào file gadget.html, ta thấy các đoạn mã có sẵn như sau <html xmlns="h t t p : //WWW.w3.org/1999/xhtm l">

D <head>D <title>Untitled Page</title>ũ <link href="css/gadget.css" t5^pe="texơcss" rel="Stylesheet"/>ũ <script src="scripts/gadget.js" type="texưjavascript"x/script>ũ </head>ũ <body onload="document.body.focus();"> ũ <div> ũ Hello World!0 </div>D </body> ũ </html>

OK ! bây giờ bạn hãy chạy thử gadget helloworl này xem sao, ta chọn menu tool\runVistagaget

Khi hộp thoại sercurity warning hiện ra.nhấn tiếp install để cài đặt gadget.

Windows Sidebar - Security Warning

The publisher could not be verified. Are you sure you want to install this gadget?

£>Name: YourGadgetName.gadget

Publisher: Unknown Publisher

Install Don t Install

This tile does not have a valid digital signature that verifies its publisher. You should only run software from publishers you trust How can 1 decide what software to run?

Kết quả cuối cùng hiển thị ữên sidebar có thể làm bạn hơi thất vọng

Đương nhiên rồi vì nó chỉ có một lệnh là hiển thị chuỗi hello world thôi mà, đ ể làm được một gaget hữu dụng ta cẩn động tay chân một chút, bạn có thể dùng một công cụ nào đó chuyên dụng để thiết kê 1 trang web có 1 textbox và 1 image của chữ GOOGLE như Microsoft Fronpage 2003 chẳng hạn hoặc có thể tận dụng luôn chức năng design webpage của VS2k8.

Sau 3 phút loay hoay, trang web light google của tôi như sau :Tôi chọn chế độ split để xem cả code lần design, trông cũng không tệ lắm nhỉ

Hình ảnh GOOGLE là tôi capture lạ i từ http://www.google.com rồi resize cho nhỏ lại, vì chúng ta chỉ nên giới hạn trong 1 khung 129 X 60 pixel thôi ạ, bạn có thể xóa hết nôi dung file gadget.html ở trên rồi paste đoạn mã sau vào thay thê

1. <html xmlns="http://www.w3.org/1999/xhtml">

2. <head>

3. <title>Untitled Page</title>

4. <link href="css/gadget.css" type="texưcss" rel="Stylesheet"/>

5. <script src="scripts/gadget.js" type="texưjavascript''x/script>

6. </head>

7. <body onload="document.body.focus();'’>

8. <div style="height: 19px dir="rtl">

9. <img alt="" src=”images/logo_plain.png"

10. style="height: 35px; width: 97px; margin-right: Opx" /></div>

11. <input name="txtKeyWord" id="txtKeyWord" type - ’text" value-"SEX" maxlength

="25" onkeyup="onKeyUpEventhandler()"

12. style-'width: 119px" />

13. </body>

14. </html>

Đây chỉ là những dòng mã HTML khá đơn giản, nó tạo ra 1 ưang httnl gồm 1 image : chữ Google ( được load từ đường dẫn images/logo_plain.png tính từ thư mục hiện thời) và 1 textbox để người dung gõ từ khóa tìm kiếm, nếu bạn chưa rành thì cũng không vấn đề gì vĩ bạn chỉ cần vpc Front page trong bộ office 2k3 tầm 10-15 phút là hiểu thôi, chú ý 2 dòng quan trọng

1. <script src="scripts/gadget.js" type="texưjavascript"x/script>

Dòng trênkhai báo file script sử dụng là file gadget.js ,nằm trong thư mực script ở thư mục hiện hành và là java script

1. <input name="txtKeyWord" id="txtKeyWord" type ="text" v a lu e - 'SEX" maxlength ="25" onkeyup="onKeyUpEventhandler(event);"

Dòng này tạo một textbox và dung function onKeyUpEventhandler để handle sự kiện nhả phím của textbox này

Function sử lý sự kiện này tôi đặt trong file gadget.js chỉ vỏn vẹn có vài dòng lệnh khai thác google

1. function onKeyUpEventhandler(){

2. if ( window.event.keyCode == 13 ){ //Enter key ??

3. var strKeyWordToSearch = document.getElementById( 'txtKeyWord'').value ;

4. if (strKeyWordToSearch.length ==0) return ;

5. var strUrl ="http://www.google.com.vn/search?hl=vi&q=" +strKeyWordToSearch+ "&meta=";

6. window.open(strUrl);

7. }

8. }

v ậ y là xong. Chúng ta vừa tạo xong 1 gadget light google nhỏ gọn trong , bạn thử gõ từi3khoảng 7 phút, bây giờ thử chạy và xem kết quả nhé khóa tìm kiếm vào xem..rất tuyệt đ ấ y !

Đây là đoạn mã Vbscript tương đương dành cho các fan VB, bạn xóa dòng

1. <script src="scripts/gadget.js" type="texưjavascript"x/script>

Trong file html, và paste đoạn mã sau vào thay thê

1. <script type="texưvbscript">2. function onKeyUpEventhandler()3. dim sttKeyWordToSearch4. if ( window.event.keyCode = 13 ) then Enter key ??5. strKeyWordToSearch= document.getElementById("txtKeyWord").value6. if sttKeyWordToSearcho"" then7. window.open("http://www.google.com.vn/search?hl=vi&q=" & strKeyWordToSearch

& "&meta=")

8. end if9. end if10. end function11. </script>

File gadgetjs là thừa vì tôi đã nhúng luôn script vào thẳng file html

3 - Active Run gadgetLần này, tôi sẽ demo kỹ thuật lập trình với các active object để tăng cường sức mạnh cho các gadget, chúng ta sẽ thiết kê 1 gadget thay cho chức năng start\run của window.

3.1 Như project trước, chúng ta tạo một web site vó i project template là : Hello Word vista gadget

3.2.Bạn có th ể soản sửa lạ i thông tin gadget cho phù hợp và thiết k ế m ột trang html nhỏ gọn dung fronpage hòạc 1 html editor như VS2k5 -VS2k8 IDE, vì chung ta chỉ cần 1textbox để user nhập lẹnh ví dụ :MSCONFIG và 1 inage hay label thể hiện chư RUN, nếu lười thì bạn paste luôn đoạn code sau vào file html

1. <html xm lns-’http://www.w3.org/1999/xhtmr>

2. <head>

3. <title>Untitled Page</title>

4. clink href="css/gadget.css" type="text/css" rel="Stylesheet"/>

5. <script language-'vbscript" >

6. sub onKeyupEventhandlerQ

7. dim strCommand

8. on eưor Resume Next

9. if window.event.keyCode=13 then

10. strCommand= document.getElementById( 'txtCMD ).value

11. Dim obj Shell

12. Set objShell = CreateObject( WScript.ShelT)

13. objShell.Run( strCommand)

14. set objShell= nothing

15. document.getElementById("txtCMD").value =""

16. end if

17. exit sub

18. end sub

19. </script>

20. </head>

21. <body onload="document.body.focus()">

22. <div style= "height: 19px' dir="rtl">

23. <p align="center" style="height: 20px">

24. <b><font size="4">RUN</font></b></p>

25. </div>

26. <input name-"txtCMD" id="txtCMD" type - 'tex t" maxlength ="25" onkeyup="onKeyupEventhandler()"

27. style="width: 119px" />

28. </body>

29. </html>

Cac dong ma deu het siic quen thupc,vi no ko khac gi nhieu m6i light google gadget

Tâm điểm của đoạn mã là các dòng

1 . 33 Dim obj Shell

2. 34 Set objShell = CreateObject("WScript.Sheir )

3. 35 objShell.Run( StrCommand)

4. 36

Tạo một ActiveX object và thực thi method run của object này, WScript.Shell là một đối tượng vô cùng mạnh m ẽ trong window cho phép bạn thao tác được với các tài nguyên hệ thống như file ,disk, can thiệp registry, đọc cpu usage..etc, đ ể biết thêm chi tiết v ề WScript.Shell và các ửactiveX objext khác xin tham khảo tài liệu SDK hoặc đơ giản là google ,Ngoài ra chúng ta còn có thể tạo đối tượng ActiveX object khác như ADODB.Connection để kết nối tới CSDL, hay Excel workbook để xử lý các bảng tính.., etc..

Cuối cùng đìftig quên chạy thử, rồi gõ vô textbox : msconfig... woa ! it works..... . chịu khóchăm chút lạ i giao diện chút nữa thì 2 gadget bạn vừa tạo sẽ không thua gì các gadget trên gallery của bác bill đâu đấy nhé.

VL K ết luậnGadget là style lập trình tuy không mới nhưng rấ t thú vị theo đúng phong cách của vista , bài viết trên chỉ demo gadget ở mức độ cơ bản, bạn nên tìm hiểu thêm các tài liệu ở phần phụ lục để có thể vận düng được hết sức mạnh của gadget .Ví dụ:

- Lập trình 1 gadget để đọc truyện online bằng cách khai thác trang web lưu trữ truyện tranh trực tuyến comic.vuilen.comtì- Làm một từ điển trực tuyến với hơn 30 ngôn ngữ ( nếu code cái này m ất khoảng 30 dòng- Tạo một gadget báo thư mới của google sử dụng gmail api- V.v .v.v.

VII. Phụ lụcl.Các video hướng dẫn lập trình gadget của anh Trịnh Minh cư ờ n g và source code bạn có thể download từ hai địa chỉ sau :+ Link Video AVI trên mediafire.com : 800M rất rõ và sắc nét dành cho các bạn có đường

truyền tốthttp://www.mediafire.com/?sharekev=85ecef7d74484245ableab3e9fa335caa4f5al0d 73ed7778 + linh video FLV : khoảng 160M ,chất lượng tạm ổn và source code http://cid-3925eb2256203dc7.skvdrive.live.com/browse.aspx/Public/MHC/GadgetPrograming Tôi đã demo cho các bạn gadget loại 1 và 3,và trong video tut trên, A cường- Chuyên gia công nghệ của Microsoft đã trình diễn kỹ thuật sử dựng gadget để truy xuất 1 JSON Webservice viết bằng WCF ( gadget loại 2 ), cùng với rấ t nhiều kiến thức khác ^

2.Các tài liệu khác+ DHTML & JavaScript căn bản: JavaScript and DHTML Cookbook.chm + vbscript:VBScript UNLEASHED.rar + s ử dụng Frongage:Frontpage.pdf+Lập trình vista gadget: Sams.Creating.Vìsta.Gadgets.May.2008.chm + Source code của hai Gadget Light Google và Active run Tất cả đều có trong địa chl này : tẩm 18M http://www.mediafire.com/file/xibiwleptzm/Gadgets.zip

- Tổng hợp Tech24.vn -