Xây dựng các công cụ Google, Phần 2: làm việc với giao diện người dùng potx
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (462.78 KB, 61 trang )
Xây dựng các công cụ Google, Phần 2: làm việc với giao diện người dùng
Tìm hiểu các kỹ thuật để tạo kinh nghiệm người dùng hấp dẫn.
John Muchow, Tác giả
Tóm tắt: Phần 2 của loạt bài Xây dựng các công cụ Google giới thiệu các đặc
điểm cao cấp của các công cụ, gồm việc tạo một giao diện người dùng được ghi
nhãn, kéo-và-thả, và MiniMessages (Các thông báo nhỏ), và để chính bạn tự bắt
đầu.
Mục lục
Trước khi bạn bắt đầu
Nội dịch
UI được ghi nhãn: Gồm có
UI được ghi nhãn: Mã hóa
UI được ghi nhãn: Thư viện
Nội dung động và ở xa
Kéo-và-thả
Mã hóa kéo-và-thả
MiniMessages (Các thông báo nhỏ)
Các mách nước và mẹo
Tóm lược
Trước khi bạn bắt đầu
Những thứ sau đây đưa ra một số thông tin nền tảng để giúp bạn hoàn thành tốt
hướng dẫn này.
Về loạt bài này
Loạt bài này cung cấp một nền tảng vững chắc để bạn bắt đầu viết ra các công cụ
Google của chính mình.
Về hướng dẫn này
Hướng dẫn này là bài thứ hai trong loạt bài hai phần về cách tạo các công cụ
Google. Phần 1 xây dựng nền móng cho các công cụ, cho bạn các bài học về các
kiểu dữ liệu và chi tiết cụ thể của tệp XML công cụ. Hướng dẫn này nhằm vào các
đặc tính công cụ tân tiến hơn, gồm việc tạo các giao diện được ghi nhãn, bổ sung
hỗ trợ kéo-và-thả, và hiển thị các thông báo.
Các mục tiêu
Trong hướng dẫn này, bạn sẽ được giới thiệu về việc lập trình các API cho các đặc
tính công cụ Google, và bạn sẽ có dịp xem mã dùng cho một vài công cụ hoàn
chỉnh.
Các điều kiện tiên quyết
Hướng dẫn này được viết cho các nhà phát triển là những người quen biết với
XML, thực hành các giao diện lập trình ứng dụng (API), và mã hóa trong
JavaScript. Để lĩnh hội được tốt nhất hướng dẫn này, bạn phải có một sự hiểu biết
chung về các khái niệm này.
Các yêu cầu về hệ thống
Để xây dựng và chạy các thí dụ trong hướng dẫn này, bạn không cần gì khác ngoài
bộ soạn thảo văn bản, kết nối Internet, và sự say mê về mã hoá và gỡ lỗi.
Nội dịch
Trước khi đi tiếp, tôi khuyên bạn nên bổ sung một công cụ riêng vào trang chủ
được cá nhân hoá của bạn. Công cụ này sẽ giúp bạn rất nhiều khi bạn viết, kiểm
thử, và gỡ lỗi các công cụ của chính bạn.
Giới thiệu công cụ của nhà phát triển
Google đã tạo một công cụ của nhà phát triển cho phép bạn xem tất cả các công
cụ hiện thời về trang chủ cá nhân hoá của bạn. Nó cũng cho phép bạn chuyển đổi
giữa việc ẩn hoặc không ẩn một công cụ. Mặc dù việc ẩn các định nghĩa công cụ
của bạn là tốt khi công cụ của bạn là đầy đủ về mặt chức năng và được gỡ lỗi,
trong giai đoạn phát triển bạn sẽ hầu như lúc nào cũng muốn công cụ được tải lên
gần đây của bạn được hiển thị. Công cụ của nhà phát triển không có gì ngoài một
công cụ khác nữa với một số đặc tính riêng thú vị chỉ đối với các nhà phát triển.
Bổ sung công cụ của nhà phát triển
Từ trang Web Google cá nhân hoá của bạn, nhấn vào liên kết Add stuff (Thêm Tư
liệu) trong góc trên bên phải. Chọn Add by URL (Thêm bởi URL) và gõ nhập
đường dẫn như trong Hình 1.
Hình 1. Bổ sung công cụ
Các ý thích thiết lập
Sau khi bổ sung công cụ của nhà phát triển, bạn sẽ nhìn thấy liệt kê của tất cả các
công cụ hiện tại trên trang chủ của bạn (xem Hình 2).
Hình 2. Các ý thích công cụ của nhà phát triển
Trong giai đoạn phát triển, khi bạn đang bận mã hóa, nạp, và kiểm thử (“tráng rửa
và lặp lại”), bạn sẽ phải bỏ chọn ý thích Cached (Ẩn) đối với công cụ của bạn.
Việc này sẽ buộc trang chủ phải hiển thị phiên bản đã được tải lên gần đây nhất
của công cụ của bạn.
Một ghi chú cuối cùng: Với công cụ của nhà phát triển về trang chủ của bạn, bây
giờ bạn có thể bổ sung các công cụ mà không cần di chuyển khỏi cùng trang này.
Nghĩa là bạn không còn phải nhấn vào liên kết Add stuff và chọn Add by URL.
Chỉ cần gõ nhập trong URL (khi bạn đã tải công cụ của bạn lên một máy chủ), và
chia tay nó.
UI được ghi nhãn: Gồm có
Có một vài nguyên tắc nền cần đề cập trước khi bạn có thể sử dụng các nhãn trong
công cụ của bạn. Mục này giới thiệu mã được yêu cầu, gồm một ví dụ ngắn gọn
cho mỗi nguyên tắc.
Thư viện nhãn tham chiếu
Trong mục ModulePrefs bạn phải gộp vào một tham chiếu đến thư viện nhãn qua
một cuộc gọi đến <Require feature="tabs"/> (xem Liệt kê 1).
Liệt kê 1. Kê khai các UI được ghi nhãn
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Using Tabs" height="200">
<Require feature="tabs" />
</ModulePrefs>
Nhập phiếu định kiểu
Ngoài việc nạp thư viện nhãn, bạn cũng phải nhập phiếu định kiểu cần thiết để làm
việc với các nhãn (xem Liệt kê 2).
Liệt kê 2. Nhập phiếu định kiểu các nhãn
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Using Tabs" height="200">
<Require feature="tabs" />
</ModulePrefs>
<Content type="html">
<![CDATA[
<style type="text/css">
@import url(
</style>
UI được ghi nhãn: Mã hóa
Các nội dung nhãn được hiển thị bên trong một mục div (xem thanh bên div để có
nhiều thông tin hơn). Bạn có thể tạo các mục div hoặc làm cho chúng tạo cho bạn.
Phương tiện dễ nhất để hiểu được việc này là qua một thí dụ mà nêu bật các nền
cơ sở về định nghĩa và hiển thị các nhãn.
Thí dụ về nhãn
Hình 3 hiển thị ra công cụ của bạn sẽ nhìn như thế nào khi bạn bổ sung nó vào
trang chủ cá nhân hoá của bạn.
Hình 3. Nhãn 1
Liệt kê 3 hiển thị tệp XML công cụ đầy đủ cho thí dụ về nhãn này.
Liệt kê 3. Tệp XML mẫu về nhãn
1 <?xml version="1.0" encoding="UTF-8" ?>
2 <Module>
3 <ModulePrefs title="Tab example" height="100">
4 <Require feature="tabs" />
5 </ModulePrefs>
6 <Content type="html">
7 <![CDATA[
8 <style type="text/css">
9 @import url(
10 </style>
11
12 <script type="text/javascript">
13 function doTabs()
14 {
15 var tabs = new _IG_Tabs(__MODULE_ID__);
16 var tabOne;
17
18 // Save tab id, add content inside the div
19 var tabOne = tabs.addTab("Tab 1");
20 _gel(tabOne).innerHTML = "Homebrew is your friend.";
21
22 // Create tab, add (static) content below inside the div declaration
23 tabs.addTab("Tab 2", "tabTwo");
24
25 // Create tab, as with tabTwo, add static content in the div defined below.
26 // We also add dynamic content by using a callback function
27 tabs.addTab("Time", "tabThree", dynamicContent);
28 }
29
30 // Callback function to add dynamic content, displaying the current time
31 function dynamicContent(id)
32 {
33 var date = new Date();
34 var hour = date.getHours();
35 var min = date.getMinutes();
36 var indicator;
37 var displaytime;
38
39 // Check for am or pm
40 if (hour > 12)
41 {
42 hour -= 12;
43 indicator = 'pm';
44 }
45 else
46 indicator = 'am';
47
48 // Add leading 0 to minutes, if necessary (e.g. 09 minutes)
49 if (min < 10)
50 min = '0' + min;
51
52 // Create string that will be displayed
53 displaytime = hour + ':' + min + ' ' + indicator;
54
55 _gel(id).innerHTML = displaytime;
56 }
57
58 // On load, initialize/display tabs
59 _IG_RegisterOnloadHandler(doTabs);
60
61 </script>
62
63 <div id="tabTwo" style="display:none">Inside Tab Two </div>
64 <div id="tabThree" style="display:none">This text will never be
seen </div>
65 ]]>
66 </Content>
67 </Module>
div
Thẻ div định nghĩa một phân đoạn (hoặc mục) trong một tài liệu HTML. div cho
phép bạn định nghĩa một vùng chứa khác cho nội dung HTML bổ sung. Bạn có thể
sử dụng thẻ div, cùng với các thuộc tính khác nhau chẳng hạn như phông chữ và
màu nền, để lôi cuốn sự chú ý đến một khu vực riêng trong một trang Web. Bạn có
thể tìm hiểu nhiều hơn bằng cách xem lại các đặc tả HTML 4 (xem Tài nguyên).
Mã cần có
Như bạn đã tìm hiểu trong mục trước, bạn phải gộp vào hai kê khai trong bất kỳ
tệp XML công cụ nào có sử dụng các nhãn. Trước tiên, bạn phải gộp cả thư viện
nhãn trong mục ModulePrefs (xem dòng 4 trong Liệt kê 3). Thứ hai, cần tham
khảo phiếu định kiểu các nhãn (xem các dòng từ 8 đến 10 của Liệt kê 3).
Có một bộ phận cuối cùng của nghiệp vụ để tham dự vào trước khi kê khai bất kỳ
nhãn nào. Dòng 15 hiển thị một cuộc gọi đến hàm dựng nhãn, nó tạo một cá thể
của một đối tượng tab (nhãn). Tên biến tabs (các nhãn) bây giờ là phương tiện của
bạn để bổ sung và nói cách khác là làm việc với nội dung nhãn.
Nhãn tĩnh #1
Liệt kê 3 hiển thị kê khai nhãn đầu tiên trên các dòng 19 và 20. tabOne là tên biến
gán cho nhãn, và chuỗi “Tab 1” được hiển thị trên nhãn đó (xem Hình 3).
Dòng 20 bổ sung nội dung tĩnh vào mục div cho nhãn này. Ngoài các dòng này
(giả thiết rằng bạn không muốn thay đổi các nội dung nhãn), không đòi hỏi mã nào
nữa.
Nhãn tĩnh #2
Dòng 23 hiển thị kê khai cho nhãn thứ hai. Tên biến tabTwo là phương tiện của
bạn để tham khảo nhãn này trong công cụ của bạn. Chuỗi “Tab 2” được hiển thị
trên nhãn (xem Hình 4).
Hình 4. Nhãn 2
Lúc này, bạn có một nhãn được kê khai, tuy nhiên bạn chưa có mục div tương ứng
mà hiển thị nội dung nhãn. Việc này nêu trên dòng 63, định nghĩa một mục div.
Chú ý tham chiếu đến nhãn của bạn bằng cách sử dụng tên biến tabTwo. Dòng 63
bổ sung nội dung tĩnh đến nhãn với chuỗi "Inside Tab Two " (Trong Nhãn 2 ),
nó được hiển thị khi người dùng chọn nhãn.
Nhãn động
Dòng 27 kê khai nhãn thứ ba. Tên biến để tham chiếu nó là tabThree. Tham số thứ
ba là một tham chiếu đến một hàm gọi lại, dynamicContent(), nó được gọi khi
nhãn được tạo hoặc người dùng chọn nhãn này. Chuỗi “Time” (Thời gian) được
hiển thị trên nhãn, như bạn trông thấy trong Hình 5.
Hình 5. Nhãn 3
Xem xét sâu hơn một chút, bên trong hàm dynamicContent() bạn sẽ thấy mã tương
tự với thí dụ cuối cùng bạn đã tạo trong Phần 1 của loạt bài hướng dẫn này, cụ thể
là, mã JavaScript để hiển thị thời gian hiện tại.
Dòng cuối cùng của mã mà chính bạn cần quan tâm là dòng 64. Cũng như với
nhãn trước, bạn cần phải liên kết nhãn này với một mục div. Chú ý chuỗi văn bản
“Văn bản này sẽ không bao giờ được nhìn thấy…” trong kê khai div. Để hiểu tại
sao bạn sẽ không bao giờ nhìn thấy thông báo này, bạn cần phải xem lại dòng 55
trong mã, nó là dòng cuối cùng của cuộc gọi lại cho nhãn thứ ba. Dòng này thiết
lập các nội dung của nhãn đến thời gian hiện tại. Mỗi khi người dùng chọn nhãn
này, chức năng gọi lại được gọi ra và thời gian hiện tại được hiển thị. Do đó, thông
báo được xác định trong mục div được ghi đè lên với thời gian hiện tại.
Trong mục "Nội dung động và ở xa", bạn sẽ trở lại làm việc với các nhãn và nội
dung động.
UI được ghi nhãn: Thư viện
Các thành phần giao diện người dùng dựa trên nhãn bây giờ là thường trên trang
Web. Bạn có thể bổ sung cùng một sự quan sát và đồng cảm với các công cụ bằng
cách sử dụng thư viện UI được ghi nhãn.
Các hàm nhãn
Thư viện nhãn gồm có 7 hàm để làm việc với các nhãn. Bảng 1 hiển thị các hàm
và gồm cả các mô tả ngắn của chúng.
Bảng 1. Các hàm thư viện nhãn
Hàm Mô tả
_IG_Tabs(module_id,
opt_selected_tab)
Hàm dựng
addDynamicTab(tabName,
callback)
Bổ sung một nhãn. Một hàm g
ọi
lại sẽ chèn nội dung của nhãn
này một cách linh hoạt.
addTab(tabName, opt_domId,
opt_callback)
Bổ sung một nhãn. Tuỳ thuộc
vào các tham số được sử dụng,
nhãn này có thể có nội dung
tĩnh hoặc động.
currentTab()
Trả về chỉ mục của nhãn hoạt
động.
moveTab(tabIndex1,
tabIndex2)
Cho phép bạn trao đổi vị trí của
2 nhãn.
setSelectedTab(tabIndex)
Thiết lập nhãn hoạt động theo
chương trình và gọi ra bất kỳ
cuộc gọi lại nào được liên kết.
Bạn đã trông thấy 2 trong số các hàm này đang làm việc. Dòng 15 trong Liệt kê 3
gọi ra hàm dựng thư viện nhãn _IG_Tabs(). Toàn bộ các dòng 19, 23, và 27 gọi ra
hàm addTab() để tạo các nhãn mới trong công cụ. Khi bạn tiếp tục hướng dẫn này,
bạn sẽ gọi các hàm bổ sung từ Bảng 1.
Để có thêm thông tin về các tham số riêng cho từng hàm, vui lòng xem mục Tài
nguyên để nhận liên kết đến Hướng dẫn của Nhà phát triển API Các công cụ
Google và tham khảo thư viện nhãn.
Nội dung động và ở xa
Trước đây bạn đã bổ sung nội dung động bằng cách sử dụng hàm addTab(). Mục
này giới thiệu một hàm phụ để làm việc với nội dung động, đồng thời cho bạn hiểu
biết nhiều hơn về các hàm làm việc với nội dung ở xa.
Các hàm nội dung trực tuyến
Có ba hàm để làm việc với nội dung ở xa. Bảng 2 hiển thị ba hàm này kèm theo
một mô tả ngắn gọn.
Bảng 2. Các hàm nội dung
Hàm Mô tả
_IG_FetchContent(url, func)
Nh
ận nội dung qua
một URL.
_IG_FetchXmlContent(url, func)
Nh
ận nội dung từ
một tài liệu XML.
_IG_FetchFeedAsJSON(url, func,
num_entries, get_summaries)
Nh
ận nội dung từ
RSS ho
ặc một Atom
feed.
Không gian được giới hạn cho trước trong hướng dẫn này, nhưng buồn là mỗi hàm
không thể đề cập chi tiết. Điều vui là bạn sẽ tìm hiểu cách xây dựng một công cụ
thú vị trong mục này bằng cách sử dụng _IG_FetchContent(url, func). Bạn sẽ
khám phá ra một hàm bổ sung để làm việc với nội dung động bên trong một nhãn.
Thí dụ về nội dung ở xa
Công cụ mà bạn sẽ viết ra trong mục này lấy ra nội dung từ trang Web
CNNMoney.com. Cụ thể bạn sẽ truy cập một trang Web liệt kê các thông tin về thị
trường Hoa Kỳ hằng ngày. Công cụ sẽ chứa 2 nhãn: một nhãn để hiển thị sự thay
đổi thị trường hiện tại của Dow Jones, và một nhãn để hiển thị sự thay đổi của
NASDAQ.
Bắt đầu bằng cách quan sát các ảnh chụp màn hình của công cụ mà bạn sẽ sắp xếp
với nhau trong mục này. Hình 6 hiển thị trang Web và dữ liệu liên quan đến thị
trường mà bạn dự định quan tâm đến nghĩa là các giá trị Dow Jones và
NASDAQ trong cột Change (Thay đổi).
Hình 6. Trang Web thị trường
Công cụ sẽ có tính năng không có gì ngoài 2 nhãn, mỗi nhãn dùng cho các thay
đổi của Dow và NASDAQ (xem Hình 7 và Hình 8).
Hình 7. Nhãn Dow
Hình 8. Nhãn NASDAQ
Mã nhãn tình trạng thị trường
Liệt kê 4 hiển thị mã cho công cụ này. Như trước đây, tôi sẽ xét từng khía cạnh
của công cụ theo liệt kê này, tiếp tục làm rõ cách công cụ truy cập, định dạng, và
hiển thị nội dung của nó.
Liệt kê 4. Nhãn thị trường
1 <?xml version="1.0" encoding="UTF-8" ?>
2 <Module>
3 <ModulePrefs title="Market status" height="100">
4 <Require feature="tabs" />
5 </ModulePrefs>
6 <Content type="html">
7 <
