Kỹ thuật lập trình gadget cho Window Vista
Tê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ập
Windows 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 v iế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 Gadget
Gadget là một tiện ích nhỏ gắn ưên thanh sidebar,thường có kích thước 139 pix el, 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
\\
I***
o
HTML
C SS
Jav n S o ifi
Un no apptcro
HTML
0
1
T&. -
DOM
A.A«
XWTMl
Data «pp c o lo n
O'JMữăúyiA
Y
4^
6 m ç * î Af
Ac&vfX
8
~ ......... DmTML
ÍỀíẳUtẾăm___________________
IV.Dữ liệu mà gadget sử dụng
Gadget 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,folder
Và đương nhiên truy xuất được vào các h ệ quản trị dữ liệu nhờ ActiveX object...
3-ĩ« -fr>ag«|
□
RSS ' XML F w d
V(wrPaçj*
*
W*. s«
# +
StứẼbÊtGmằyì
Ạ
«c?
H *»«ndFoM »
1*1*
EM *PM t AppKabcm
Um
\app data\local\microsoft\windows side bar\gadgets
C:\ —> là Ổ đĩa cài vista
—> 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 Ç
•
1 Ht
I «
EM
«
Via»
Atrtdovit Sid«b4f »
Tool« H ^p
.. ,,
. ..............
^
Name
Ị* Documente
Ẹ! Pk U *»
M vw
M©## »*
► YourG*d
full
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 : v iế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 ix el, 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 -2008
Ngoà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, v iế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 m iễn phí
này tại địa chỉ :
http://www.codeproiect.com/KB/gadgets/RunVistaGadget.aspx
Sau 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 google
Dâ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
í íiO T M m t i ỉ
[ ~ T en v to ces
iV « k S u
A * s * n n #>«•<
* (* * * •
U , Tm tv U m
J | H tlo '* C * ơề aUOềÓỊtt
J J î t ê n h O W K ĩt~ i* đ to
K
A M ai* ẤSP met 'A ab P U iM H
.o c a lie n
I l f ịy ĩte m
35;
•
L L*n . w
^cunnl
..IU * f e d « ¿X « M M c
tu » » ..
y
1'
Cuối cùng cửa sô solution explorer hiện ra như hình dưới.
«
ir
Cmm
a
Solution Explorer - Ê:\...\HelloWorldVÌ5taGadgẽt2Y
à ỌQHã]ị ^
^
3
#
Solution 'HelloWorldVistaGadget2' (1 project)
E:\_.\HelloWorldVistaGadget2\
____________
Éà-
s
J
css
A-l gadget.css
r~a images
ujÿ scripts
à |j gadget.js
[•) gadget.html
i l gadget.xml
_ỉ» web.config
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
File gadgetjs là thừa vì tôi đã nhúng luôn script vào thẳng file html
3 - Active Run gadget
Lầ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 N hư 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à th iế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 1
textbox đ ể 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.
2.
3.
Untitled Page
4.
clink href="css/gadget.css" type="text/css" rel="Stylesheet"/>
5.
20.
21.
22.
26.
28.
29.
Cac dong ma deu h et 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ận
Gadget 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.com
tì- 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ục
l.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ốt
http://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 -