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

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