Kỹ thuật lập trình Gadget trên Windows Vista ppt

Kỹ thuật lập trình Gadget trên Windows Vista
Tác giả :
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 ,trong 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 Gadget
Gadget là một tiện ích nhỏ gắn trê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
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 trê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
trì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 .
III Gadget có thể làm được những gì?

Nếu dựa trê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: ứng
dụng web nhỏ sử dụng HTML,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 như : khai thác
dịch vụ rss, chỉ số chứng khoán,thông
tin 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.
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 trang 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…
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 dung 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á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ản phẩ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" />
<defaultImage 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 gadget này là toàn quyền truy xuất hệ thống 
,nếu chúng ta không đặt 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_Name].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ưu 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
{
width :129;
height:70;
font-family:Calibri;

font-size:11px;
margin: 0;
padding: 0;
text-align:center;
}
Kích cỡ mặc định của 1 gadget thường là 129 pixel , 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
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 .Dễ hiểu thôi, chúng ta
cần một công cụ mạnh để 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
1 – Cài đặt Visual studio 2008 hoặc 2008, ở đây tôi chọn bản 2008,
2 – Cài đặt phần addin : RunVistaGadgetAddInSetup, bạn có thể tìm thấy ở địa chỉ sau
/>Sau khi cài đặt thì
chương trì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 Tools\Addin-Manager để lôi
nó ra
1.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 code
,dưới đây là chi tiết các bước.

1.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 VistaGadgetAddIn 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 .
Cuối cùng cửa số solution explorer hiện ra như hình dưới.
Trong các file, folder trên ,ngoài các file chính gadget.xml:
lưu thông tin 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"></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=" /><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 ! 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.
Kết quả cuối cùng hiển thị trê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ừ 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ế
<html xmlns=" /><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 style="height: 19px" dir="rtl">
<img alt="" src="images/logo_plain.png"
style="height: 35px; width: 97px; margin-right: 0px" /></div>
<input name="txtKeyWord" id="txtKeyWord" type ="text" value="SEX" maxlength
="25" onkeyup="onKeyUpEventhandler()"
style="width: 119px" />

</body>
</html>
Đây chỉ là những dòng mã HTML khá đơn giản, nó tạo ra 1 trang html 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 vọc Front page trong bộ office 2k3 tầm 10-15 phút là hiểu thôi , chú ý 2 dòng quan trọng
<script src="scripts/gadget.js" type="text/javascript"></script>
Dòng này khai 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
<input name="txtKeyWord" id="txtKeyWord" type ="text" value="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
function onKeyUpEventhandler(){
if ( window.event.keyCode == 13 ){ // Enter key ??
var strKeyWordToSearch = document.getElementById("txtKeyWord").value
;
if (strKeyWordToSearch.length ==0) return ;
var strUrl =" />hl=vi&q=" +strKeyWordToSearch + "&meta=" ;
window.open(strUrl) ;
}

}
Vậy là xong. Chúng ta vừa tạo xong 1 gadget light google nhỏ gọn trong
khoảng 7 phút, bây giờ thử chạy và xem kết quả nhé  , bạn thử gõ từ
khóa tìm kiếm vào xem rất tuyệt đấy !
Đây là đoạn mã Vbscript tương đương, bạn xóa dòng
<script src="scripts/gadget.js" type="text/javascript"></script>

Trong file html, và paste đoạn mã sau vào thay thế
<script type="text/vbscript">
function onKeyUpEventhandler()
dim strKeyWordToSearch
if ( window.event.keyCode = 13 ) then ' Enter key ??
strKeyWordToSearch=
document.getElementById("txtKeyWord").value
if strKeyWordToSearch<>"" then
window.open(" />hl=vi&q=" & strKeyWordToSearch & "&meta=" )
end if
end if
end function
</script>
File gadget.js là thừa vì tôi đã nhúng luôn script vào thằng file html.
2 – Active Run gadget
Ở chuyên mục này tôi sẽ giới thiệu với bạn 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.
1.1 Như project trước, chúng ta tạo một web site với project template là : HelloWord vista
gadget
1.2 .Bạn có thể soản sửa lại thông tin gadget cho phù hợp
1.3 Thiết kế một trang html nhỏ gọn dung fronpage hoạc 1 html editor như VS2k5 –VS2k8
IDE, vì chúng 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
2 <html xmlns=" />3 <head>
4 <title>Untitled Page</title>
5 <link href="css/gadget.css" type="text/css" rel="Stylesheet"/>
6 <script language="vbscript" >
7 sub onKeyupEventhandler()
8 dim strCommand

9 on error Resume Next
10 if window.event.keyCode=13 then
11 strCommand= document.getElementById("txtCMD").value
12 Dim objShell
13 Set objShell = CreateObject("WScript.Shell")
14 objShell.Run( strCommand)
15 set objShell= nothing
16 document.getElementById("txtCMD").value =""
17 end if
18 exit sub
19 end sub
20 </script>
21
22 </head>
23 <body onload="document.body.focus()">
24 <div style="height: 19px" dir="rtl">
25 <p align="center" style="height: 20px">
26 <b><font size="4">RUN</font></b></p>
27 </div>
28 <input name="txtCMD" id="txtCMD" type ="text" maxlength ="25"
onkeyup="onKeyupEventhandler()"
29 style="width: 119px" />
30
31 </body>
32 </html>
Các dòng mã đều hết sức quen thuộc,vì nó ko khác gì nhiều mới light google gadget
Tâm điểm của đoạn mã là các dòng
33 Dim objShell
34 Set objShell = CreateObject("WScript.Shell")
35 objShell.Run( strCommand)

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,Ngoài ra ví dụ chúng ta 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
VI. 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
- 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
1. Các video hướng dẫn lập trình gadget của anh Trịnh minh cường và source code bạn có
thể download từ hai địa chỉ sau :
+ Link Video AVI + Source code 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
/>sharekey=85ecef7d74484245ab1eab3e9fa335caa4f5a10d73ed7778
+ linh video FLV : khoảng 160M ,chất lượng tạm ổn và source code
/>2. Các tài liệu khác
+ DHTML & JavaScript : Chưa upload lên được
+ VBScript : : Chưa upload lên được
+Lập trình vista gadget: : Chưa upload lên được
+ Microsoft Front page : : Chưa upload lên được
4. Source code
-