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

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

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

 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

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

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

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);

33 var date = new Date();

34 var hour = date.getHours();

35 var min = date.getMinutes();

36 var indicator;

37 var displaytime;

52 // Create string that will be displayed

53 displaytime = hour + ':' + min + ' ' + indicator;

54

63 <div id="tabTwo" style="display:none">Inside Tab Two </div>

64 <div id="tabThree" style="display:none">This text will never be

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

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

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

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)

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

16 // Tab constructor, tab labeled "NASDAQ" will be the active tab

17 var tabs = new _IG_Tabs( MODULE_ID , "NASDAQ");

18

19 tabs.addDynamicTab("Dow", getDow); // Add tab

20 tabs.addDynamicTab("NASDAQ", getNasdaq); // Add tab

33 }

34

35 function marketQuery(response, tabID, marketStr)

49 // Look for the dow or nasdaq string (i.e "dowURL" or "nasdaqURL")

50 start = response.search(marketStr + "URL");

56 // Extract 80 characters starting from where we found the first string

57 // We do this to limit what we need to search

58 buffer = response.slice(start, start + 80);

73 // '-' found, extract the value and format string

74 _gel(tabID).innerHTML = marketStr.toUpperCase() + " is down " + buffer.substr(minus, buffer.indexOf("<", minus) - minus);

81 }

82 }

sẽ chuyển tên mà bạn muốn được hiển thị trên nhãn như tham số thứ nhất, cũng như hàm gọi lại mà sẽ được yêu cầu

_IG_Callback, bạn có thể chuyển các thông tin bổ sung cho cuộc gọi lại Tham số đầu tiên là hàm để gọi, tham số thứ hai là định danh duy nhất cho nhãn, và tham số thứ ba là một chuỗi mà đại diện cho giá trị thị trường nào mà bạn đang tìm kiếm Tôi sẽ nói nhiều hơn về tham số thứ ba này

Các kết quả tìm kiếm

Hàm marketQuery() là nơi khối hành động xảy ra Kiểm tra đầu tiên, dòng 43, quan sát xem liệu truy vấn này có trả về kết quả nào không Nếu có dữ liệu, bạn tiếp tục; nếu không thì thoát khỏi hàm này

Dòng 47 trình bày một ví dụ về kiểu dữ liệu bạn mong đợi từ trang Web Tôi chợt nghĩ ra chuỗi này khi quan sát tuỳ chọn View > Page Source từ trong trình duyệt Web của tôi (View > Page Source trong Mozilla Firefox hoặc View > Source trong Internet Explorer)

Bạn có thể tìm các báo giá thị trường mà bạn quan tâm bằng cách tìm “dowURL” hoặc “nasdaqURL” Bạn có thể thấy cách bạn xây dựng chuỗi tìm kiếm này trên dòng 50 Nếu chuỗi đòi hỏi được tìm thấy trong bộ kết quả, dòng 50 trích xuất một chuỗi 80 ký tự bổ sung và lưu lại trong biến có tên buffer

Trong chuỗi 80 ký tự này, bây giờ bạn tìm một ký hiệu "+" hoặc "-", nó là sự khởi đầu của dữ liệu bạn quan tâm đến Ví dụ, xem lại dòng 47, bạn sẽ thấy chuỗi

"+102.30", đại diện cho một sự tăng lên trong Dow của 102.30 Cũng như vậy, bạn cũng có thể gặp phải một chuỗi chẳng hạn như "-10.10", nó sẽ chỉ ra một sự suy giảm thị trường

Định dạng các kết quả

Mã trong các dòng 73-74 và 79-80 được sử dụng để định dạng kết quả đầu ra, dựa trên việc bạn có tìm thấy một số mà bắt đầu bằng một dấu "-" hoặc "+" hay

không Bạn chuyển sang chữ hoa chuỗi nhập vào (ví dụ, “dow” chuyển thành

“DOW”), bổ sung thông báo phù hợp (“là lên” hoặc “là xuống”), và giải nén số

mà bạn quan tâm đến

Bước cuối cùng là gán chuỗi được định dạng vào nhãn hiện tại, đến lượt nó làm cho giá trị thị trường được hiển thị Để có nhiều thông tin hơn về làm việc với nội dung ở xa, xem mục Tài nguyên cho một liên kết đến thông tin bổ sung

Kéo-và-thả

Ngoài các nhãn, một đặc tính mạnh nữa sẵn có khi tạo các công cụ là kéo-và-thả Với đặc tính kéo-và-thả, người dùng có thể di chuyển các phần tử HTML quanh một công cụ bằng cách sử dụng chuột.Hình 9 và Hình 10 trình bày các thí dụ từ Hướng dẫn của Nhà phát triển API Các công cụ Google về việc sử dụng kéo-và-thả Mặc dù rất khó trình bày bằng các ảnh chụp màn hình, ý tưởng đằng sau công

cụ này là bạn có thể kéo tên của màu sắc (bên trái) lên hình ảnh (bên phải) và hình ảnh sẽ đổi màu tương ứng

Hình 9 Hình ảnh gốc

Hình 10 Giảm bớt màu xanh lục trên ảnh

Nguồn (Source) Một đối tượng mà người dùng có thể nhấn chuột và kéo đi

Đích (Target) Một đối tượng mà có thể có các đối tượng khác được kéo lên

trên nó

Các hàm kéo-và-thả

Bạn có thể làm việc với kéo-và-thả bằng cách sử dụng 5 hàm chính Bảng 4 hiển thị các hàm kèm mô tả ngắn gọn Đó là các hàm gọi lại, từng hàm được gọi ra khi xuất hiện các hành động tương ứng