Kỹ thuật lập trình Gadget - Ebook
Gửi bởi: Phạm Thọ Thái Dương 30 tháng 12 2019 lúc 10:47:24 | Được cập nhật: 4 giờ trước (15:02:03) Kiểu file: DOC | Lượt xem: 409 | Lượt Download: 0 | File size: 0.368128 Mb
Nội dung tài liệu
Tải xuống
Link tài liệu:
Các tài liệu liên quan
Có thể bạn quan tâm
Thông tin tài liệu
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 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:
- 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 ).
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.
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\\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á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
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 đặtgadget 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_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
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. }
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
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
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 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
Nhắp đúp chuột vào file gadget.html , ta thấy các đoạn mã có sẵn như sau
Untitled Page
Untitled Page
4.
5.
6.
7.
Hello World!
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ừ 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.
2.
3.