• Vui lòng đọc nội qui diễn đàn để tránh bị xóa bài viết
  • Tìm kiếm trước khi đặt câu hỏi

Kỹ thuật lập trình gadget cho Window Vista

Các bài viết hướng dẫn và tham khảo chung, không thuộc ngôn ngữ nào

Điều hành viên: vietluyen

HaiPT
VIP
VIP
Bài viết: 252
Ngày tham gia: T.Tư 07/09/2005 4:02 pm
Đến từ: Hải Phòng
Has thanked: 1 time
Been thanked: 12 time
Liên hệ:

Kỹ thuật lập trình gadget cho Window Vista

Gửi bàigửi bởi HaiPT » T.Sáu 21/11/2008 7:17 pm

Tên bài viết: Kỹ thuật lập trình gadget cho Window Vista
Tác giả: http://WWW.CAULACBOVB.COM">Phạm Hải - http://WWW.CAULACBOVB.COM
Cấp độ bài viết: Chưa đánh giá
Tóm tắt: Hướng dẫn lậ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 ,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 :D :
- 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 http://vista.gallery.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 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 .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ó trên Vista mặc định đã có Net 3.0 ).
VistaGadget.JPG


II 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.
gadgetTech.JPG


Phạm Hải
Quản trị dự án ,Chuyên gia đào tạo
Đại học FPT

HaiPT
VIP
VIP
Bài viết: 252
Ngày tham gia: T.Tư 07/09/2005 4:02 pm
Đến từ: Hải Phòng
Has thanked: 1 time
Been thanked: 12 time
Liên hệ:

Re: Kỹ thuật lập trình gadget cho Window Vista

Gửi bàigửi bởi HaiPT » T.Sáu 21/11/2008 7:24 pm

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…
gadgetDB.JPG



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,
gadgetStruc.JPG


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

Mã: Chọn hết

  1. body
  2. {
  3.   width :129;
  4.   height:70;
  5.   font-family:Calibri;
  6.   font-size:11px;  
  7.   margin: 0;
  8.   padding: 0;
  9.   text-align:center;  
  10. }
  11.  

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 .
Phạm Hải
Quản trị dự án ,Chuyên gia đào tạo
Đại học FPT

HaiPT
VIP
VIP
Bài viết: 252
Ngày tham gia: T.Tư 07/09/2005 4:02 pm
Đến từ: Hải Phòng
Has thanked: 1 time
Been thanked: 12 time
Liên hệ:

Re: Kỹ thuật lập trình gadget cho Window Vista

Gửi bàigửi bởi HaiPT » T.Sáu 21/11/2008 7:35 pm

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

1.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 .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 ..
– Cài đặt Visual studio 2008 hoặc 2008, ở đây tôi chọn bản 2008,
– Cài đặt phần addin : RunVistaGadgetAddInSetup, bạn có thể download phần mềm miễn phí này tại địa chỉ :
http://www.codeproject.com/KB/gadgets/RunVistaGadget.aspx
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
gadgetAddin.JPG
Tập tin đính kèm
RunVistaGadgetAddInSetup.rar
File hỗ trợ gadget template trong VS2k8
(565.32 KiB) Đã tải 638 lần
Phạm Hải
Quản trị dự án ,Chuyên gia đào tạo
Đại học FPT

HaiPT
VIP
VIP
Bài viết: 252
Ngày tham gia: T.Tư 07/09/2005 4:02 pm
Đến từ: Hải Phòng
Has thanked: 1 time
Been thanked: 12 time
Liên hệ:

Re: Kỹ thuật lập trình gadget cho Window Vista

Gửi bàigửi bởi HaiPT » T.Sáu 21/11/2008 7:41 pm

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 code ,dưới đây là chi tiết các bước.
gadgetLightGoogle.JPG
gadgetLightGoogle.JPG (15.28 KiB) Đã xem 10578 lần


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 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 .
gadgetnewwebsite.JPG

Cuối cùng cửa số solution explorer hiện ra như hình dưới.
gaggetdir.JPG
gaggetdir.JPG (16.89 KiB) Đã xem 10557 lần


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

Mã: Chọn hết

  1. <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

Mã: Chọn hết

  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>
  9.     Hello World!
  10. </div>
  11.  
  12. </body>
  13. </html>
Phạm Hải
Quản trị dự án ,Chuyên gia đào tạo
Đại học FPT

HaiPT
VIP
VIP
Bài viết: 252
Ngày tham gia: T.Tư 07/09/2005 4:02 pm
Đến từ: Hải Phòng
Has thanked: 1 time
Been thanked: 12 time
Liên hệ:

Re: Kỹ thuật lập trình gadget cho Window Vista

Gửi bàigửi bởi HaiPT » T.Sáu 21/11/2008 7:50 pm

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.
gadgetsecurity.JPG

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 :(
hellowordgadget.JPG
hellowordgadget.JPG (12.12 KiB) Đã xem 10537 lần



Đươ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ỉ :">
VSIDE.JPG
Phạm Hải
Quản trị dự án ,Chuyên gia đào tạo
Đại học FPT

HaiPT
VIP
VIP
Bài viết: 252
Ngày tham gia: T.Tư 07/09/2005 4:02 pm
Đến từ: Hải Phòng
Has thanked: 1 time
Been thanked: 12 time
Liên hệ:

Re: Kỹ thuật lập trình gadget cho Window Vista

Gửi bàigửi bởi HaiPT » T.Sáu 21/11/2008 7:55 pm

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ế

Mã: Chọn hết

  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à 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

Mã: Chọn hết

  1. <script src="scripts/gadget.js" type="text/javascript"></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

Mã: Chọn hết

  1. <input  name="txtKeyWord" id="txtKeyWord" type ="text" value="SEX"  maxlength ="25" onkeyup="onKeyUpEventhandler(event);"
  2.  

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

Mã: Chọn hết

  1.  
  2. function onKeyUpEventhandler(){
  3.     if (  window.event.keyCode == 13 ){ // Enter key ??
  4.          var strKeyWordToSearch  = document.getElementById("txtKeyWord").value ;
  5.          if (strKeyWordToSearch.length ==0) return ;
  6.          var strUrl ="http://www.google.com.vn/search?hl=vi&q=" +strKeyWordToSearch + "&meta=" ;
  7.          window.open(strUrl) ;
  8.     }
  9.  
  10. }


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 !
gadgetGoogle.JPG
gadgetGoogle.JPG (18.72 KiB) Đã xem 10537 lần

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

Mã: Chọn hết

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

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

Mã: Chọn hết

  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.        
  11.         end function
  12.    </script>

File gadget.js là thừa vì tôi đã nhúng luôn script vào thẳng file html
Phạm Hải
Quản trị dự án ,Chuyên gia đào tạo
Đại học FPT

HaiPT
VIP
VIP
Bài viết: 252
Ngày tham gia: T.Tư 07/09/2005 4:02 pm
Đến từ: Hải Phòng
Has thanked: 1 time
Been thanked: 12 time
Liên hệ:

Re: Kỹ thuật lập trình gadget cho Window Vista

Gửi bàigửi bởi HaiPT » T.Sáu 21/11/2008 7:57 pm

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 Như project trước, chúng ta tạo một web site với project template là : HelloWord 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 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

Mã: Chọn hết

  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.        
  21.     </head>
  22.     <body onload="document.body.focus()">
  23.     <div style="height: 19px" dir="rtl">
  24.         <p align="center" style="height: 20px">
  25.             <b><font size="4">RUN</font></b></p>
  26.         </div>
  27.     <input  name="txtCMD" id="txtCMD" type ="text"   maxlength ="25" onkeyup="onKeyupEventhandler()"
  28.         style="width: 119px" />
  29.    
  30.     </body>
  31.     </html>
  32.  


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

Mã: Chọn hết

  1. 33                   Dim objShell
  2. 34            Set objShell = CreateObject("WScript.Shell")
  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 đừng 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é 
:">
Phạm Hải
Quản trị dự án ,Chuyên gia đào tạo
Đại học FPT

HaiPT
VIP
VIP
Bài viết: 252
Ngày tham gia: T.Tư 07/09/2005 4:02 pm
Đến từ: Hải Phòng
Has thanked: 1 time
Been thanked: 12 time
Liên hệ:

Re: Kỹ thuật lập trình gadget cho Window Vista

Gửi bàigửi bởi HaiPT » T.Sáu 21/11/2008 8:04 pm

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 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
Removed
+ linh video FLV : khoảng 160M ,chất lượng tạm ổn và source code
http://cid-3925eb2256203dc7.skydrive.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.Vista.Gadgets.May.2008.chm
+ Source code của hai Gadget Light Google và Active run
Tất cả đều có trong địa chỉ này : tầm 18M
http://www.mediafire.com/file/xjbjwleptzm/Gadgets.zip

HAPPY CODING
Sửa lần cuối bởi thuongall vào ngày T.Ba 03/11/2009 12:07 pm với 1 lần sửa.
Lý do: Xoá link MF do thiếu part1
Phạm Hải
Quản trị dự án ,Chuyên gia đào tạo
Đại học FPT

Hình đại diện của người dùng
ngochoan2006
Guru
Guru
Bài viết: 184
Ngày tham gia: T.Tư 25/10/2006 4:35 pm
Đến từ: Phúc Yên - Vĩnh Phúc !
Been thanked: 1 time

Re: Kỹ thuật lập trình gadget cho Window Vista

Gửi bàigửi bởi ngochoan2006 » T.Hai 24/11/2008 9:33 am

Thanks for your help!
Kiến thức là vô hạn!
Hiểu biết của tui thì có hạn !
Nên dừng có ngạc nhiên khi tôi không biết 1+2 =? !

nghiadiahoang
Bài viết: 4
Ngày tham gia: T.Sáu 14/11/2008 11:48 pm

Re: Kỹ thuật lập trình gadget cho Window Vista

Gửi bàigửi bởi nghiadiahoang » T.Bảy 15/08/2009 7:57 am

download có 7 file:
Gadget1.part2...Gadget1.part5
Gadget2.part2...Gadget2.part4
ko có Part1 tôi giải nén kiểu gì đây :(

nghiadiahoang
Bài viết: 4
Ngày tham gia: T.Sáu 14/11/2008 11:48 pm

Re: Kỹ thuật lập trình gadget cho Window Vista

Gửi bàigửi bởi nghiadiahoang » T.Tư 19/08/2009 5:12 am

vẫn không có ai trả lời mình sao (:|

HaiPT
VIP
VIP
Bài viết: 252
Ngày tham gia: T.Tư 07/09/2005 4:02 pm
Đến từ: Hải Phòng
Has thanked: 1 time
Been thanked: 12 time
Liên hệ:

Re: Kỹ thuật lập trình gadget cho Window Vista

Gửi bàigửi bởi HaiPT » T.Năm 20/08/2009 8:49 am

Bạn download từ link FLV vậy
http://cid-3925eb2256203dc7.skydrive.li ... Programing
Hai link mà đều không download được thì chịu ^_^
Phạm Hải
Quản trị dự án ,Chuyên gia đào tạo
Đại học FPT

nghiadiahoang
Bài viết: 4
Ngày tham gia: T.Sáu 14/11/2008 11:48 pm

Re: Kỹ thuật lập trình gadget cho Window Vista

Gửi bàigửi bởi nghiadiahoang » T.Bảy 22/08/2009 3:23 am

link FLV mờ lắm bạn à. Mấy cái link tớ đang nói là ở MF cơ mà

Hình đại diện của người dùng
andylam1992
Thành viên danh dự
Thành viên danh dự
Bài viết: 380
Ngày tham gia: T.Hai 06/04/2009 12:57 pm
Đến từ: TP.HCM Q5
Has thanked: 2 time
Been thanked: 4 time
Liên hệ:

Re: Kỹ thuật lập trình gadget cho Window Vista

Gửi bàigửi bởi andylam1992 » T.Bảy 22/08/2009 8:20 pm

Anh HaiPT Bận lắm, Ảnh không có nhiều thời gian online, phải kiếm sống, nuôi con nữa, Thông cảm đi!

不相信未作牺牲竟先可拥有
只相信是靠双手找到我欲求
Cần - Kiệm- Liêm(liêm kiết) - Nghĩa - Chí - Tín

d9dRyand9d
Bài viết: 3
Ngày tham gia: T.Sáu 30/10/2009 8:21 pm

Re: Kỹ thuật lập trình gadget cho Window Vista

Gửi bàigửi bởi d9dRyand9d » T.Hai 02/11/2009 8:16 pm

đề nghị mod xóa dùm cái link mf mình tốn time đi ra tiệm net từ sáng xớm để tải flim về xem nhưng lại thiếu part1, về nhà mới biết. Rất là mắc công.

Hình đại diện của người dùng
thuongall
Quản trị
Quản trị
Bài viết: 455
Ngày tham gia: T.Tư 26/01/2005 8:05 am
Đến từ: Quê hương Đồng Khởi
Been thanked: 9 time
Liên hệ:

Re: Kỹ thuật lập trình gadget cho Window Vista

Gửi bàigửi bởi thuongall » T.Ba 03/11/2009 12:10 pm

Đã xoá link. Cám ơn bạn đã thông báo và thành thật cáo lỗi với bạn về sự số này.

Hình đại diện của người dùng
truongphu
VIP
VIP
Bài viết: 4756
Ngày tham gia: CN 04/11/2007 10:57 am
Đến từ: Cam Đức, Khánh hòa
Has thanked: 14 time
Been thanked: 509 time

Re: Kỹ thuật lập trình gadget cho Window Vista

Gửi bàigửi bởi truongphu » T.Ba 03/11/2009 4:41 pm

Đầu đề có chữ Window Vista nên tôi ngại và bỏ qua (máy ở nhà chỉ là PIII/XP2)
Thực ra kỹ thuật Gadget có thể viết như html với ngôn ngữ thuần vbscript
và các HT'a (html application = các ứng dụng html nho nhỏ) đều có thể chuyển thành Gadget
và đương nhiên cần phải có Windows Sidebar của Vista

Mời các bạn tham khảo bài hướng dẫn tạo Gadget với VBScript
-------------------------

Creating Your First Gadget

Each year at least one movie gets nominated for half a dozen or more Academy Awards, including all of the big ones: Best Picture, Best Director, Best Actor, Best Actress. That’s great, except that every so often the principals involved find themselves sitting in the audience on Oscar night, pretending to smile and applauding politely as some other movie rakes in all the major awards. Best Picture or Best Director? Well, no. But we did win for Best Sound Recording and Best Costume Design.

How … nice ….

Script writers know this feeling all too well. Each time a new operating system is announced script writers sit there with their eyes closed and their fingers crossed, hoping that this time one of the major announcements will be targeted towards them. And each time a new operating system is announced script writers inevitably end up disappointed. Sure, there are always new Windows Management Instrumentation (WMI) classes and a handful of new COM objects to play with, and that’s great: the more new things the better. Unfortunately, getting a few new WMI classes is a bit like winning the award for Best Sound Recording: although you’re happy to have won anything, you still can’t help being a little disappointed over the really cool things that other people walked away with. Just once you’d like to be the big winner, just once you’d like the new cutting-edge innovation to be targeted towards you. Best Sound Recording is great, but just once you’d like to win Best Picture or Best Director.

You might not know this, but if you’re a script writer, you’ve been waiting all your life for Windows Vista.

A (Very) Brief Introduction to Microsoft Gadgets

You heard correctly. Windows Vista is filled with all sorts of new things, and one of the coolest and most-anticipated features – the Windows Sidebar – is aimed squarely at script writers. The Windows Sidebar is an area of the screen that has been reserved for “gadgets,” much in the same way that the Quick Launch bar is an area of the screen that has been reserved for shortcuts. Gadgets are mini-applications, little bits of code that can do just about anything the gadget creator wants them to do. For example, Windows Vista ships with several gadgets, including a rudimentary little calculator and a pair of gadgets for monitoring RSS feeds. A new community is also springing up around gadgets; for more information (and to download gadgets created by community members) see the Microsoft Gadgets Web site. You don’t have to spend much time browsing through the gadget gallery before you realize how cool (and how useful) gadgets are likely to be.

But let’s be honest: the world is filled with cool things that other people can create. What makes gadgets really interesting for us is that this new technology has been designed for people who write scripts. Don’t get us wrong: gadgets are cool, gadgets can have a very cutting-edge feel to them, and gadgets can carry out some very sophisticated tasks. And yet, underneath that hip-hop cover, gadgets turn out to be nothing more than miniature HTML pages: put together a simple HTML page, mix in a little VBScript code (including WMI code), toss in a dash of the Gadget object model (to be covered in Part II of this series) and you’ve got yourself a gadget. Gadgets are one of the hot new features of Windows Vista, and scripters are just the people to start creating these gadgets.

You know, that’s a good idea. Maybe it’s time for a less talk and a little more action; let’s see if we can help you create your first gadget.

Creating Your First Gadget

One of the criticisms leveled at Microsoft (and yes, believe it or not some people have criticized Microsoft in the past) is that many of our products were apparently designed to be used by robots or by aliens from the planet Omicron IV; at any rate, they were not designed to be used by human beings. Happily that’s not the case for Microsoft gadgets. (Although if you happen to be either a robot or an alien from the planet Omicron IV rest assured that you can easily create gadgets as well.) To create a gadget you need only two items:

· A “manifest” file named Gadget.xml. This manifest contains all the settings for your gadget, including the gadget name, author and copyright information, and information about the HTML page that makes up the actual gadget.

· An HTML file (for example, Test.htm). Although they might not look like it, gadgets are really nothing more than HTML files: you simply create an HTML file, add the appropriate tags and script code, and you’ve got yourself a gadget.

Note. Yes, we know: you have no idea what we mean by “the appropriate tags and script code.” Relax; that’s what the rest of this article is for.


Those are the only items required to create a gadget. Granted, as you create more sophisticated gadgets you will find yourself dealing with icon files, graphics files, settings files, and other elements. But we’ll cross those bridges as we come to them.

See how easy that is? What do you mean, “Sure, so far”? Point well taken: this would seem to be the time when you have to do some sort of horrendously-complicated compilation process, probably using some proprietary compiler that the Scripting Guys will sell you for just $39.95 plus shipping and handling. (Actually, now that you mention that we wish we would have thought of doing something like that.) But instead of using some proprietary compiler here’s how you gather up all your files and then “compile” them into a gadget:

· Place all the files in a gadgets folder.

That’s it: put all the files in a folder and you’ve got yourself a gadget. No compiling, no compilers, nothing more tedious or technical than simply copying files to a specified folder.

Incidentally, if you still want to send us $39.95 we’ll be happy to take it.

The Gadgets Folder

Of course, there is a slight catch here: you can’t just put your files in any old folder. Instead, you have to follow this procedure:

To begin with, bring up the Gadgets folder. A quick way to access your Gadgets folder is to type the following in the Run dialog box:

Mã: Chọn hết

  1. %userprofile%\appdata\local\microsoft\windows sidebar\gadgets



Note. What do you mean you can’t find the Run command on the Start menu? Oh, that’s right: for some reason this command is hidden by default. But that’s OK; to get the Run command back just right-click the Start button and then click Properties. In the Taskbar and Start Menu Properties dialog box, on the Start Menu tab, click Customize.
Still with us? Good. Once you’re in the Customize Start Menu dialog box scroll down and check the Run command check box. Click OK a couple times and the Run command will be back to its rightful place.
And, yes, usually the Scripting Guys do charge $39.95 for this kind of inside information. But we’ll let you have this one for free.


Inside the Gadgets folder create a new folder. Give this folder any name you want, provided that the name ends with a .gadget file extension (for example, Test.gadget). Obviously it will make your life easier if the name of the folder bears some resemblance to the gadget contained within. However, the operating system merely uses this folder to identify that the files inside make up a gadget; the gadget name is derived from information found in the manifest, not from the folder name (as the Scripting Guys discovered the hard way).

All you have to do now is place all your files (such as Gadget.xml and Test.htm) in the folder. Does that mean you now have a Microsoft Gadget? You bet it does. In fact, with Windows Sidebar up and running click the + button to bring up the set of gadgets found on your computer. Your gadget will show in the gadget picker dialog box.

Note. What’s that? You can’t find the Windows Sidebar, either? That’s OK; if you can’t find the Windows Sidebar just do this: click the Start menu and then click All Programs. Click Accessories, and you should see a link to the Sidebar.


Installing a Gadget
Assuming your gadget really does show up in the list of available gadgets, you can install the thing simply by dragging the icon onto the Windows Sidebar and then releasing the mouse button. (Or just right-click the gadget icon and then click Add.) The gadget will be displayed, and you’ll be ready to start using it. If you decide to remove the gadget from the Sidebar just hold the mouse over the thing and click the little X that appears in the upper right-hand corner. If you aren’t sure which little X we’re talking about, well, it’s this one:
untitled1.JPG
untitled1.JPG (4 KiB) Đã xem 7421 lần


The Manifest File

As we noted earlier, to create a gadget you need only two things: a manifest file and an HTML file. And we know what you’re thinking: sure, on Omicron IV you guys probably use manifest files all the time. (Some of us do, some of us don’t.) But what do system administrators know about manifest files?

Well, one thing you know (or at least now you know) is that “manifest file” is simply a high-falutin’ technical term; in essence we’re really just talking about something like an .INI file, a simple text file (in this case, one done in XML) that contains configuration information for the gadget. Admittedly, the idea of having to write things in XML might send a shiver or two up and down your spine. Listen, don’t worry about it; this is about as simple and barebones an XML file as you’ll ever have to deal with.

Here’s what we mean:

Mã: Chọn hết

  1. <?xml version="1.0" encoding="utf-8" ?>
  2.  
  3. <gadget>
  4.     <name>My First Gadget</name>
  5.     <author>The Microsoft Scripting Guys</author>
  6.     <copyright>2006 Microsoft Corporation</copyright>
  7.     <description>Sample gadget that returns the name of the installed operating system.</description>
  8.     <icons>
  9.         <icon>icon.png</icon>
  10.     </icons>
  11.     <version value="1.0.0.0" MinPlatformVersion="0.1"></version>
  12.     <sidebar>
  13.         <type>html</type>
  14.         <permissions>full</permissions>
  15.         <code>test.htm</code>
  16.         <website>www.microsoft.com/technet/scriptcenter</website>
  17.      </sidebar>
  18. </gadget>

Before you ask, yes, you can simply copy this file and use it pretty much as-is, just making changes (as needed) to a few of the tag values. (And don’t forget, you must name the file Gadget.xml.) The tags you might want to/need to modify are specified in the following table:
55.JPG


To help make this all a little plainer, here are the manifest file elements mapped to the items displayed in the gadget picker dialog box:
untitled2.JPG


Creating an Icon
o0o--truongphu--o0o

.........
Ghé thăm:
Chuyện Linh Tinh

Hình đại diện của người dùng
truongphu
VIP
VIP
Bài viết: 4756
Ngày tham gia: CN 04/11/2007 10:57 am
Đến từ: Cam Đức, Khánh hòa
Has thanked: 14 time
Been thanked: 509 time

Re: Kỹ thuật lập trình gadget cho Window Vista

Gửi bàigửi bởi truongphu » T.Ba 03/11/2009 4:49 pm

(Tiếp)

Creating an Icon

It’s up to you whether you want to supply a custom icon with your gadget; if you don’t supply an icon (or if you don’t specify an icon in the manifest file) the gadget picker will provide you with a default icon. (At no charge to you.)

If you do decide to supply a custom icon, keep in mind that “icon” is just a name given to a regular old image file; these are not true Windows icons, graphics that must be created using special software. Instead an icon is just a picture file, be it a .GIF, .JPG, or .PNG graphic. The sample gadgets that ship with Windows Vista all use .PNG graphics; that’s probably because .PNG graphics allow for transparent backgrounds, giving you the ability to make very cool-looking pictures. (Assuming you have the requisite artistic talent.) However, you don’t have to save your icons as .PNG files. Instead, load up Paint, create an icon, and save it as a .JPG file; your icon will show up just fine in the gadget picker.

Good question: what size should you make your icon? The optimal size is 64 pixels by 64 pixels. The gadget picker will resize your image to fit, but creating a 64x64 icon in the first place will help guard against any image distortion created if the gadget picker needs to shrink or stretch the image to fit the allotted space.

In case you’re wondering, here’s the icon we used for this article:

Note. You might have noticed that, the in the manifest file, the <ICON> tag is embedded within an <ICONS> tag:
<icons>
<icon>icon.png</icon>
</icons>
Does that mean you can add additional icons to the manifest file? Probably, although, to be honest, we aren’t sure what you would use those additional icons for. That’s something we’ll look into.


The HTML File
The HTML file that makes up the gadget itself is actually no different than any Web page that uses dynamic HTML; in fact, to create the HTML file you simply use any valid HTML tagging (including CSS styles) plus script code. We’ll show you a sample HTML page in just a moment. Before we do that, however, we need to take a brief side trip and talk about how you incorporate WMI code into a gadget.

Working with WMI
As a system administrator you’re used to writing scripts that make heavy use of WMI. That’s understandable; after all, WMI is the technology that helps you manage everything from printers to disk drives to mice and monitors. Best of all, WMI is easy to use. For example, suppose you’d like to know the name of the operating system installed on the local computer. No problem; here’s a WMI script that will return that information for you:

Mã: Chọn hết

  1. strComputer = "."
  2.  
  3. Set objWMIService = GetObject("winmgmts:\\" & strComputer & "\root\cimv2")
  4.  
  5. Set colItems = objWMIService.ExecQuery("Select * From Win32_OperatingSystem")
  6.  
  7. For Each objItem in colItems
  8.     Msgbox objItem.Caption
  9. Next

If you plan on creating gadgets for system administration we’ve got some bad news for you: the WMI scripts you’re used to writing won’t work in a gadget. (Wait, don’t do anything drastic: the news will get better in just a moment, promise.) That’s because, at heart, a gadget is nothing more than a Web page, and, for security reasons, Web pages aren’t able to make use of GetObject. If you place the preceding code in a gadget all you’ll end up with is this error message:
ActiveX component can’t create object: 'GetObject'


Uh-oh.

But don’t panic. You can still use WMI scripts within a gadget; you just can’t use GetObject and the winmgmts: moniker. Instead, you need to use CreateObject to create an instance of the WbemScripting.SWbemLocator object, then use the ConnectServer method to connect to the WMI service. In other words, you need to write a script that looks like this:

Mã: Chọn hết

  1. strComputer = "."
  2.  
  3. Set objLocator = CreateObject("WbemScripting.SWbemLocator")
  4. Set objWMIService = objLocator.ConnectServer(strComputer, "root\cimv2")
  5.  
  6. Set colItems = objWMIService.ExecQuery("Select * From Win32_OperatingSystem")
  7.  
  8. For Each objItem in colItems
  9.     Msgbox objItem.Caption
  10. Next

See? Like we said, no need to panic. (Although, in all fairness, it was probably our fault that you panicked in the first place.) The only difference between a script that uses the WMI moniker and a script that uses ConnectServer comes when you make a connection to the WMI service. You’re used to making that connection using a single line of code:

Mã: Chọn hết

  1. Set objWMIService = GetObject("winmgmts:\\" & strComputer & "\root\cimv2")

Now you have to use two lines of code to make the connection (yes, doubling your workload!): you create an instance of the WbemScripting.SWbemLocator object, then you use the ConnectServer method to bind to the WMI service. Notice that we pass ConnectServer two parameters, the name of the computer to connect to (represented by the variable strComputer) and the WMI namespace we want to connect to (in this case, root\cimv2):

Mã: Chọn hết

  1. Set objLocator = CreateObject("WbemScripting.SWbemLocator")
  2. Set objWMIService = objLocator.ConnectServer(strComputer, "root\cimv2")

Got all that? Good. Now let’s return to our regularly-scheduled article.

Creating an HTML File

As we’ve already noted, a gadget is just an HTML file. That means that any elements (including dynamic elements) you can use in an HTML page can also be used in a gadget. As you’ve probably already figured out, this includes VBScript code; although most of the early gadgets made available through the Microsoft Gadgets Web site use JScript or JavaScript, VBScript works just fine (as you’ll soon see).

We’ve already shown you a WMI script that returns the name of the operating system installed on the local computer; with that in mind, let’s see if we can turn that script into a gadget. We’ll start off very simple, creating a gadget that consists of a single button that, when clicked, displays the value of the operating system Caption property in a message box. Here’s the HTML code for our gadget:

Mã: Chọn hết

  1. <html>
  2.  
  3. <head>
  4.     <title>My First Gadget</title>
  5.  
  6.     <style>
  7.         body{width:120;height:160}
  8.     </style>
  9.  
  10. </head>
  11.  
  12. <script language="VBScript">
  13.  
  14.     Sub RunSub
  15.         strComputer = "."
  16.  
  17.         Set objLocator = CreateObject("WbemScripting.SwbemLocator")
  18.         Set objWMIService = objLocator.ConnectServer(strComputer, "root\cimv2")
  19.  
  20.         Set colItems = objWMIService.ExecQuery("Select * From Win32_OperatingSystem")
  21.  
  22.         For Each objItem in colItems
  23.             Msgbox objItem.Caption
  24.         Next
  25.     End Sub
  26.  
  27. </script>
  28.  
  29. <body>
  30.     <input type="button" value="Run" name="run_button" onClick="RunSub">
  31. </body>
  32.  
  33. </html>

As you can see, there’s nothing “gadgety” about the code; this is rudimentary HTML that doesn’t do much more than display a single button on a page. When that button is clicked, a subroutine named RunSub is executed; that subroutine then uses WMI to determine the name of the operating system installed on the computer.
Note. OK, maybe this is rudimentary HTML for some people, but what if you have no background with HTML coding? If that’s the case, then you might want to take a look at our two-part HTA Tutorial. That will help bring you up to speed on things such as <SCRIPT> tags and <INPUT> tags.

About the only thing we need to make special note of here is the <STYLE> tag. As we start creating more sophisticated gadgets we’ll discuss the <STYLE> tag in detail; for now, however, we’ll simply point out that we use this tag to configure the default height and width of our gadget:

Mã: Chọn hết

  1. <style>
  2.     body{width:120;height:160}
  3. </style>

This tag simply says that we want our gadget to be 120 pixels wide (the Windows Sidebar is approximately 130 pixels wide) by 160 pixels tall. For this particular gadget 160 pixels might be too tall; if that’s the case, then we can simply assign a different value to the height property:

Mã: Chọn hết

  1. <style>
  2.     body{width:120;height:40}
  3. </style>

When you install this gadget it will look like this in the Windows Sidebar:
untitled3.JPG

And here’s what happens when you click the button:
untitled4.JPG
untitled4.JPG (11.27 KiB) Đã xem 7421 lần

------------------------------------------------
Trên đây là đoạn trên của bài viết, hy vọng các bạn sẽ ứng dụng tốt.
Ngoài ra, với chuyên đề mà tôi đã viết: Chuyên Đề HTAs (HTML Applications)
viewtopic.php?f=22&t=9205&start=0
các bạn có thể dùng như là tư liệu cho các Gadget của mình
o0o--truongphu--o0o

.........
Ghé thăm:
Chuyện Linh Tinh

prophetsan
Bài viết: 1
Ngày tham gia: T.Năm 05/06/2014 6:39 pm

Re: Kỹ thuật lập trình gadget cho Window Vista

Gửi bàigửi bởi prophetsan » T.Năm 05/06/2014 7:03 pm

Sao mình cài đặt xong vào visual hôk thấy hellowordgadget ta ??
Có ai chỉ giúp vs :3


Quay về “Bài viết hướng dẫn”

Đang trực tuyến

Đang xem chuyên mục này: Không có thành viên nào trực tuyến.1 khách