K thut lp trnh gadget cho Window Vista

Tn bi vit: K thut lp trnh gadget cho Window Vista Tc gi: Phm Hi - caulacbovb.com Cp bi vit: Cha nh gi Tm tt: Hng dn lp trnh gadget cho Window Vista I.Dn nhp Windows Vista cng vi v ho nhong ca n lm say m rt nhiu ngi v mt trong cc c trng n tng nht chnh l Windows sidebar vi cc tin ch nh nh :lch ,ng h ,CPU ( gi l gadget )... chim mt phn trn desktop, bn c th d dng ty chnh nhng cng c ny ph hp cng nh hin th trn cng, dng ca s ln v cng c th t c ch no trn mn hnh bng cc iu chnh trong Windows Sidebar properties..iu tuyt vi hn na l lp trnh cc gadget ny cc k d dng ,trong gii hn bi vit ny ti s hng dn cc bn lm hai gadget tin ch y sc mnh ch trong vng 15 pht vi cha n 20 dng code bng javascript , bn ng lo mnh khng tho java v ti cng s demo bng c ngn ng kch bn thng dng nht trn window hin nay :- VbScript - .Nhng ngi c kinh nghim khng nhiu v VB cng s nm bt d dng thi ! Bn s hc c nhng g t bi vit ny: - Bn cht ca vista gadget hay k thut lp trnh vi html dng JavaScript v VbScript - K thut vit v ci t gadget bng Visual studio 2008 Visual studio 2005 step by step trong vng 15 pht - K thut vit,debug html nhanh chng vi Microsoft FrontPage 2003 II.Gii thiu Vista Gadget Gadget l mt tin ch nh gn trn thanh sidebar ,thng c kch thc 139 pixel , cung cp nhiu thng tin hu ch nh : CPU,ngy thng ,nht k,thi tit bn c th tm thy rt nhiu gadget tuyt vi na ti a ch ny http://vista.gallery.microsoft.com/vista/SideBar.aspx? mkt=en-us vi mt th vin s gn 2K gadget. Thc cht gadget khng phi l mt dng file thc thi kiu mi trn Vista m n gin ch l mt hay nhiu trang HTML c host bi tin ch Window sidebar do vy k thut lp trnh ch n gin l x l HTML vi cc on script , ng nhin nu mun lm cc gadget cao cp th bn cn tm hiu thm v gadget api ca vista .Vi cc gadget cao cp bn c th code bng Visual Studio 2K5 hay 2K8 dng WPF rt d dng ( xin lu l gadget ch c trn Vista mc nh c Net 3.0 ).

II Gadget c th lm c nhng g? Nu da trn tiu ch l cc cng ngh cu thnh ln gadget th c tt c 3 loi gadget ; -Mini web application: ng dng web nh s dng HTML,CSS v cc script ( Vbscript,Java,J..etc) - Data application : ng dng c truy xut d liu s dng HTML ,DHTML, DOM Ajax.Gadget loi ny c th kt ni n cc dch v web truy xut d liu v hin th ra cho ngi dung cui nh : khai thc dch v rss, ch s chng khon,thng tin thi tit cc min..etc -Mini utilities :C tc dng nh mt tin ch dng :ActiveX object, gadget API v DHTMLv d nh cc gadget o CPU,hin th ng h s..hay thm ch l cc tin ch truy xut ti nguyn h thng v rt nhiu cng vic khc.

IV.D liu m gadget s dng Gadget c th truy xut d liu t rt nhiu ngun : - RSS/XML - Cc trang web - Cc dch v web - Ti nguyn h thng : file,folder V ng nhin truy xut c vo cc h qun tr d liu nh ActiveX object

V.Cu trc mt gadget Ngoi cc gadget chun , cc gadget m chng ta thm vo s nm ti th mc sau : C:\user\<user_name>\app data\local\microsoft\windows side bar\gadgets C:\ --> l a ci vista <user_name> --> l tn ngi dng hin thi v d , v d haipt. Tt c cc file cu thnh ln Gadget thng c t trong th mc ny,

Cc file chnh ca mt gadget gm c - gadget.xml : y l file rt quan trng , n lu tr cc thng s cu hnh ca 1 gadget nh l tn tc gi,phin bn sn phm.. di dng thc XML.Bn khng cn bit nhiu v format ny vn c th sa i d dng ,trong c hai dng c bit quan trng <hosts> <host name="sidebar"> <base type="HTML" apiVersion="1.0.0" src="gadget.html" /> <permissions>full</permissions> <platform minPlatformVersion="1.0" /> <defaultImage src="" /> </host> </hosts> </gadget> Dng bi u tin cho bit file html c a ln sidebar l file gadget.html cng th mc, dng bi th 2 xc nh quyn han cho ,nu chng ta khng t gadget ny l ton quyn truy xut h thng l full th cc chc nng truy xut h thng ca gadget c th s khng dung c do b li cm truy nhp. -File [Gadget_Name].html : y l file c xc nh thng qua tag : src trong file XML chnh,

v d ny n c tn gadget.html, file html ny s c a ln sidebar khi gadget c ci t -Cc file .CSS : vit tt ca ch cascades style sheet, cc file ny lu cu hnh ca file html tng ng ,rt quen thuc vi dn lm web, v d di l ni dng 1 file CSS

body

1. {

2. width :129;

3. height:70;

4. font-family:Calibri;

5. font-size:11px;

6. margin: 0;

7. padding: 0;

8. text-align:center;

9. }

Kch c mc nh ca 1 gadget thng l 129 pixel , d ta c th chnh to hn thnh 250 nhng theo ti bn ln ch chun v thit k 1 gadget theo kch thc ny . V.Lp trnh vi Gadget bng Visual Studio 2005 -2008 1.Ci t addin & gagget template project cho Visual Studio 2005 -2008 Ngoi cch t dng ly cc file cn thit lm mt gadget, chng ta cn c th xy dng mt gadget template v intstall nhanh chng bng Visual studio 2005 2008 .D hiu thi, chng ta cn mt cng c mnh son ,thit k html, vit script c h tr gi nh codev nhiu th khc na.D notepade l cng c son tho cng kh mnh y nhng hy qun n i . Cc bc tin hnh nh sau .. Ci t Visual studio 2008 hoc 2008, y ti chn bn 2008, Ci t phn addin : RunVistaGadgetAddInSetup, bn c th download phn mm min ph ny ti a ch : http://www.codeproject.com/KB/gadgets/RunVistaGadget.aspx Sau khi ci t th chng trnh ny s tch hp vo visual studio, h tr chng ta to template gadget v cung cp lun tin ch Run vista gadget trn menu tool.Nu cha thy th c th n cha c load,bn cn vo menu Tools\Addin-Manager li n ra

2. Gadget u tin Light google Dn IT th 100% u dung google vy ti sao khng n ln sidebar cho tin nh ?? Gadget ca chng ta s c giao din nh mt google thu nh,khi cn tm kim ch vic g t kha ln gadget ri enter l xong ! lp trnh c mt gadget tin dng nh vy ta ch mt c 5 dng ,di y l chi tit cc bc. code

2.1 To gadget template project - Trong ca s Visual studio 2008 , chn menu File-->New-->Web site Nu chng ta ci t VistaGadgetAddIn thnh cng th hp thoi New Website s hin ra nh hnh di.Template HelloWorldVistaGadget c dng sn vi cc file cn thit nh CSS, setting..bn nhp tip vo template ny v nhn OK .VS2k8 s hin th tip hp thoi yu cu upgrade ln Net 3.5,bn c th b qua hoc chp nhn nu vit gadget bng siverlight hoc WPF .

Cui cng ca s solution explorer hin ra nh hnh di.

Trong cc file, folder trn ,ngoi cc file chnh gadget.xml: lu thng tin cu hnh gadget, gadget.html :chnh l trang web s c a ln sidebar ,v file css th cn li c th xa c,file gadget.js l file script c to sn cha code javascript, tuy nhin nu bn dng vbscript th c th thay bng file gadget.vbs ri thay i dng sau trong file gadget.html

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

Nhp p chut vo file gadget.html , ta thy cc on m c sn nh sau

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

<head> <title>Untitled Page</title> <link href="css/gadget.css" type="text/css" rel="Stylesheet"/> <script src="scripts/gadget.js" type="text/javascript"></script> </head> <body onload="document.body.focus();"> <div> Hello World! </div> </body> </html>

OK ! by gi bn hy chy th gadget helloworl ny xem sao, ta chn menu tool\runVistagaget Khi hp thoi sercurity warning hin ra,nhn tip install ci t gadget.

Kt qu cui cng hin th trn sidebar c th lm bn hi tht vng

ng nhin ri v n ch c mt lnh l hin th chui hello world thi m, lm c mt gaget hu dng ta cn ng tay chn mt cht , bn c th dng mt cng c no chuyn dng thit k 1 trang web c 1 textbox v 1 image ca ch GOOGLE nh Microsoft Fronpage 2003 chng hn hoc c th tn dng lun chc nng design webpage ca VS2k8. Sau 3 pht loay hoay, trang web light google ca ti nh sau : Ti chn ch split xem c code ln design, trng cng khng t lm nh

Hnh nh GOOGLE l ti capture li t http://www.google.com ri resize cho nh li, v

chng ta ch nn gii hn trong 1 khung 129 x 60 pixel thi , bn c th xa ht ni dung file gadget.html trn ri paste on m sau vo 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="text/css" rel="Stylesheet"/>

5.

<script src="scripts/gadget.js" type="text/javascript"></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: 0px" /></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 nhng dng m HTML kh n gin, n to ra 1 trang html gm 1 image : ch Google ( c load t ng dn images/logo_plain.png tnh t th mc hin thi) v 1 textbox ngi dung g t kha tm kim, nu bn cha rnh th cng khng vn g v bn ch cn vc Front page trong b office 2k3 tm 10-15 pht l hiu thi , ch 2 dng quan trng

1. <script src="scripts/gadget.js" type="text/javascript"></script>

Dng trnkhai bo file script s dng l file gadget.js ,nm trong th mc script th mc hin hnh v l java script

1. <input name="txtKeyWord" id="txtKeyWord" type ="text" value="SEX" maxlength

="25" onkeyup="onKeyUpEventhandler(event);"

Dng ny to mt textbox v dung function onKeyUpEventhandler handle s kin nh phm ca textbox ny Function s l s kin ny ti t trong file gadget.js ch vn vn c vi dng lnh khai
thc 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. }

Vy l xong. Chng ta va to xong 1 gadget light google nh gn trong , bn th g t khong 7 pht, by gi th chy v xem kt qu nh kha tm kim vo xem..rt tuyt y !

y l on m Vbscript tng ng dnh cho cc fan VB, bn xa dng

1. <script src="scripts/gadget.js" type="text/javascript"></script>

Trong file html, v paste on m sau vo thay th

1. <script type="text/vbscript"> 2. function onKeyUpEventhandler()

3. dim strKeyWordToSearch 4. if ( window.event.keyCode = 13 ) then ' Enter key ?? 5. strKeyWordToSearch= document.getElementById("txtKeyWord").value 6. if strKeyWordToSearch<>"" then 7. window.open("http://www.google.com.vn/search?hl=vi&q=" & strKeyWordToSearch & "&meta=" ) 8. end if 9. end if 10. end function 11. </script>

File gadget.js l tha v ti nhng lun script vo thng file html 3. Active Run gadget Ln ny, ti s demo k thut lp trnh vi cc active object tng cng sc mnh cho cc gadget, chng ta s thit k 1 gadget thay cho chc nng start\run ca window. 3.1 Nh project trc, chng ta to mt web site vi project template l : HelloWord vista gadget 3.2.Bn c th son sa li thng tin gadget cho ph hp v thit k mt trang html nh gn dung fronpage hoc 1 html editor nh VS2k5 VS2k8 IDE, v chng ta ch cn 1
textbox user nhp lnh v d :MSCONFIG v 1 inage hay label th hin ch RUN, nu li th bn paste lun on code sau vo file html

1.

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

2.

<head>

3.

<title>Untitled Page</title>

4.

<link href="css/gadget.css" type="text/css" rel="Stylesheet"/>

5.

<script language="vbscript" >

6.

sub onKeyupEventhandler()

7.

dim strCommand

8.

on error Resume Next

9. if window.event.keyCode=13 then

10.

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

11.

Dim objShell

12.

Set objShell = CreateObject("WScript.Shell")

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 ="text" maxlength ="25"

onkeyup="onKeyupEventhandler()"

27.

style="width: 119px" />

28. </body>

29. </html>

Cc dng m u ht sc quen thuc,v n ko khc g nhiu mi light google gadget Tm im ca on m l cc dng

1. 33

Dim objShell

2. 34

Set objShell = CreateObject("WScript.Shell")

3. 35

objShell.Run( strCommand)

4. 36

To mt ActiveX object v thc thi method run ca object ny, WScript.Shell l mt i tng v cng mnh m trong window cho php bn thao tc c vi cc ti nguyn h thng nh file ,disk, can thip registry, c cpu usage..etc, bit thm chi tit v WScript.Shell v cc activeX objext khc xin tham kho ti liu SDK hoc gin l google ,Ngoi ra chng ta cn c th to i tng ActiveX object khc nh ADODB.Connection kt ni ti CSDL, hay Excel workbook x l cc bng tnh.., etc.. Cui cng ng qun chy th, ri g v textbox : msconfig woa ! it works.., chu kh chm cht li giao din cht na th 2 gadget bn va to s khng thua g cc gadget trn gallery ca bc bill u y nh. VI. Kt lun Gadget l style lp trnh tuy khng mi nhng rt th v theo ng phong cch ca vista , bi vit trn ch demo gadget mc c bn, bn nn tm hiu thm cc ti liu phn ph lc c th vn dng c ht sc mnh ca gadget .V d: - Lp trnh 1 gadget c truyn online bng cch khai thc trang web lu tr truyn tranh trc tuyn comic.vuilen.com - Lm mt t in trc tuyn vi hn 30 ngn ng ( nu code ci ny mt khong 30 dng - To mt gadget bo th mi ca google s dng gmail api - V.v .v.v. VII. Ph lc 1.Cc video hng dn lp trnh gadget ca anh Trnh Minh Cng v source code bn c th download t hai a ch sau : + Link Video AVI trn mediafire.com : 800M rt r v sc nt dnh cho cc bn c ng truyn tt http://www.mediafire.com/?sharekey=85ecef7d74484245ab1eab3e9fa335caa4f5a10d 73ed7778 + linh video FLV : khong 160M ,cht lng tm n v source code http://cid-3925eb2256203dc7.skydrive.live.com/browse.aspx/Public/MHC/GadgetPrograming Ti demo cho cc bn gadget loi 1 v 3,v trong video tut trn, A Cng- Chuyn gia cng ngh ca Microsoft trnh din k thut s dng gadget truy xut 1 JSON Webservice vit bng WCF ( gadget loi 2) , cng vi rt nhiu kin thc khc 2.Cc ti liu khc + DHTML & JavaScript cn bn: JavaScript and DHTML Cookbook.chm + vbscript:VBScript UNLEASHED.rar + S dng Frongage:Frontpage.pdf

+Lp trnh vista gadget: Sams.Creating.Vista.Gadgets.May.2008.chm + Source code ca hai Gadget Light Google v Active run Tt c u c trong a ch ny : tm 18M http://www.mediafire.com/file/xjbjwleptzm/Gadgets.zip Tng hp Tech24.vn -