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.

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.

John Muchow, Tác giả

John Muchow tâm huyết với việc phát triển phần mềm từ năm 1988, làm việc với nhiều vai, từ nhà phát triển đến trưởng kiến trúc sư phần mềm rồi đến Tổng Giám sát Công nghệ (CTO). Từ năm 2000, ông tập trung vào công nghệ di động, và trong thời gian này đã có cơ hội làm việc sát cánh với nhiều doanh nghiệp nổi tiếng gồm Nokia, Sony Ericsson, Symbian, Sprint/Nextel, Sun Microsystems, giữa những doanh nghiệp khác. Ông cũng là tác giả của cuốn sách của nhà phát triển không dây Công nghệ J2ME Cốt lõi bán chạy nhất mà vẫn đang được xuất bản bằng một số tiếng. Ông viết về công nghệ di động, từ quan điểm của nhà phát triển, trên blog 360Mobile.us của ông.



18 12 2009

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ụ
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
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(http://www.google.com/ig/tablib.css);
    </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
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(http://www.google.com/ig/tablib.css);
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
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
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àmMô 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àmMô 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ụ 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 7Hình 8).

Hình 7. Nhãn Dow
Nhãn Dow
Hình 8. Nhãn NASDAQ
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   <![CDATA[
8     <style type="text/css">
9        @import url(http://www.google.com/ig/tablib.css);
10     </style>
11 
12     <script type="text/javascript">
13 
14     function doTabs()
15     {
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
21     }
22     
23     function getDow(tabID)
24     {
25       // Pass in the string "dow"
26       _IG_FetchContent('http://money.cnn.com/data/us_markets/', 
                          _IG_Callback(marketQuery, tabID, "dow"));
27     }
28     
29     function getNasdaq(tabID)
30     {
31       // Pass in the string "nasdaq"
32       _IG_FetchContent('http://money.cnn.com/data/us_markets/', 
                          _IG_Callback(marketQuery, tabID, "nasdaq"));
33     }
34     
35     function marketQuery(response, tabID, marketStr)
36     {
37       var start;
38       var buffer;
39       var plus;
40       var minus;
41       
42       // If no data was found, we're done
43       if (response == null)
44         return;
45             
46       // Partial string we retrieve and search from the website...
47       // "...(dowURL,'');">Dow</a></td><td class=change><
                       span class=textpositive>+102.30</span>..."
48 
49       // Look for the dow or nasdaq string (i.e. "dowURL" or "nasdaqURL")
50       start = response.search(marketStr + "URL");
51 
52       // If not found, we're done
53       if (start == -1)
54         return;
55       
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);
59       
60       // Search 'buffer' for '+', indicating a positive market change
61       plus = buffer.search("\\+");
62       
63       // If '+' is not found...
64       if (plus == -1)
65       {              
66         // Search 'buffer' for '-'
67         minus = buffer.search("\\-");
68         
69         // If not found, we're done
70         if (minus == -1)
71           return;
72 
73         // '-' found, extract the value and format string
74         _gel(tabID).innerHTML = marketStr.toUpperCase() + " is down " + 
                      buffer.substr(minus, buffer.indexOf("<", minus) - minus); 
75         
76       }
77       else
78       {
79         // '+' found, extract the value and format string
80         _gel(tabID).innerHTML = marketStr.toUpperCase() + " is up " + 
                      buffer.substr(plus, buffer.indexOf("<", plus) - plus); 
81       }
82     }
83 
84     // On load, initialize/display tabs
85     _IG_RegisterOnloadHandler(doTabs);
86 
87     </script>
88   ]]>
89   </Content>
90 </Module>

Tạo các nhãn

Hàm doTabs() là nơi nó bắt đầu. Trong hàm này, bạn gọi ra hàm dựng nhãn và thêm hai nhãn động. Lời gọi hàm addDynamicTab() là phương tiện bổ sung cho việc tạo các nhãn (ngoài cái mà được giới thiệu trước đó). Sử dụng hàm này, bạn 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.

Các hàm gọi lại

Các dòng 23 đến 33 là các hàm gọi lại cho các nhãn. Mỗi khi người dùng chọn ra một nhãn, cuộc gọi lại tương ứng được gọi.

Đối với mỗi hàm này, bạn chuyển qua như là tham số đầu tiên URL mà bạn muốn truy cập. Tham số thứ hai cũng là một hàm gọi lại. Khi sử dụng hàm _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 9Hì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
Kéo và thả
Hình 10. Giảm bớt màu xanh lục trên ảnh
Giảm bớt màu xanh lục trên ảnh

Thuật ngữ

Trước khi đi sâu hơn, bạn cần phải tìm hiểu các thuật ngữ được các công cụ sử dụng khi làm việc với thư viện kéo-và-thả (xem Bảng 3).

Bảng 3. Thuật ngữ
Thuật ngữMô tả
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ó.
Thay thế (Surrogate)Một đối tượng dùng để đi theo chuột một cách trực quan khi một đối tượng được kéo.

Một vài chú thích: một đối tượng có thể là cả nguồn và đích. Lý do ban đầu để sử dụng một thay thế là để cung cấp một phản hồi trực quan đến người dùng để họ biết rằng họ đã nhấn chuột lên một đối tượng và rằng đối tượng đó đang được di chuyển để đi theo chuột.

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

Bảng 4. Các hàm kéo-và-thả
HàmMô tả
onDragClick = function(source) {}Người dùng nhấn chuột nhưng không di chuột.
onDragEnd = function(source, target) {}Người dùng nhả nút chuột (dừng kéo chuột).
onDragStart = function(newSource) {}Người dùng nhấn lên chuột và bắt đầu kéo một đối tượng.
onDragTargetHit = function(newTarget, lastTarget) {}Người dùng đã kéo một đối tượng lên trên một đối tượng.
onDragTargetLost = function(lastTarget) {}Người dùng không còn ở trên một đích.

Mã hóa kéo-và-thả

Mục này dạo qua một thí dụ mã kéo-và-thả bao hàm trong Hướng dẫn của Nhà phát triển API Các công cụ Google. Để tham khảo, tôi đã kèm theo các ảnh chụp màn hình từ mục trước, cho biết cách công cụ này làm việc. Về bản chất, bạn có thể kéo một lựa chọn màu lên trên hình ảnh, và hình ảnh sẽ được cập nhật để phản ánh của bạn lựa chọn màu sắc (xem Hình 11Hình 12).

Hình 11. Ảnh nguyên bản
Kéo-và-thả
Hình 12. Giảm bớt màu xanh lục trên ảnh
Giảm bớt màu xanh lục trên ảnh

Mã kéo-và-thả

Liệt kê 5 hiển thị mã cho công cụ cơ sở kéo-và-thả này.

Liệt kê 5. Mã kéo-và-thả
1 <?xml version="1.0" encoding="UTF-8" ?> 
2 <Module>
3   <ModulePrefs title="Special Effects" scrolling="true" height="320">
4     <Require feature="drag" /> 
5   </ModulePrefs>
6   <Content type="html">
7   <![CDATA[ 
8     <table border=0>
9       <tr>
10         <td>
11           <p id="id1" style="font-weight:bold;">original</p>
12           <p id="id2" style="color:brown; font-weight:bold;">sepia</p>
13           <p id="id3" style="color:red; font-weight:bold;">red</p>
14           <p id="id4" style="color:green; font-weight:bold;">green</p>
15         </td>
16         <td id="id5" style="padding-left:60;">
17           <img src="http://doc.examples.googlepages.com/Rowan-small.gif" alt="Rowan"/>
18         </td>
19       </tr>
20     </table>
21 
22     <script type="text/javascript">
23     // Preload the images
24     var images = new Object();
25     images["id1"] = new Image();
26     images["id1"].src = "http://doc.examples.googlepages.com/Rowan-small.gif";
27     images["id2"] = new Image();
28     images["id2"].src = "http://doc.examples.googlepages.com/Rowan-small-sepia.gif";
29     images["id3"] = new Image();
30     images["id3"].src = "http://doc.examples.googlepages.com/Rowan-small-red.gif";
31     images["id4"] = new Image();
32     images["id4"].src = "http://doc.examples.googlepages.com/Rowan-small-green.gif";
33 
34     // drag constructor
35     var drag_obj = new _IG_Drag();
36 
37     // Add sources and target. In this example, there is one target: the photo.
38     drag_obj.addSource("original", _gel("id1"), 
                          "<p style=color:orange;>Restore original...</p>");
39     drag_obj.addSource("sepia", _gel("id2"), 
                          "<p style=color:orange;>Change to sepia...</p>");
40     drag_obj.addSource("red", _gel("id3"), 
                          "<p style=color:orange;>Change to red...</p>");
41     drag_obj.addSource("green", _gel("id4"), 
                          "<p style=color:orange;>Change to green...</p>");
42     drag_obj.addTarget("image", _gel("id5"));
43 
44     // When user drags source onto target and releases it,
45     // display appropriate photo.
46     drag_obj.onDragEnd = function(source, target) {
47       if (target == null) return;
48       target.innerHTML = "<img src='" + images[source.id].src + "'/>";
49     }
50     </script>
51   ]]> 
52   </Content>
53 </Module>

Gồm có

Cũng như khi làm việc với các nhãn, bạn cần phải có thư viện thích hợp để cho phép sử dụng kéo-và-thả trong các công cụ của bạn. Dòng 4 hiển thị cú pháp để gộp vào thư viện kéo-và-thả.

Bảng HTML

Mục đích của bảng được xác định giữa các dòng 8 và 20 là tăng gấp đôi. Trước tiên, bảng này trình bày sự bố trí của công cụ. Tức nó trình bày các nhãn văn bản và các thuộc tính liên kết của chúng (độ đậm và màu của phông chữ) cũng như nguồn và bố trí sắp đặt của hình ảnh.

Mục đích thứ hai của bảng là tạo các bộ định danh cho mỗi đối tượng nguồn. Chú ý bộ định danh (thí dụ, id="id1") được gán cho mỗi nhãn văn bản. Bạn sẽ chuyển đến các giá trị này qua công cụ.

Mảng hình ảnh

Nhiệm vụ tiếp theo của bạn là xây dựng một mảng mà sẽ chứa 4 màu của các ảnh (màu gốc, nâu đỏ, đỏ, và xanh lục). Các dòng 24-32 hiển thị mã để định nghĩa mảng hình ảnh.

Các bộ định danh mà bạn đã kê khai trong bảng (thí dụ, id="id1") được sử dụng như là các giá trị chỉ mục trong mảng. Với cách tiếp cận này, bạn đang “ánh xạ” một nhãn văn bản (chẳng hạn như "red") lên một hình ảnh (ví dụ ảnh Rowan-small-red.gif).

Các đối tượng nguồn

Bạn tạo một cá thể đối tượng kéo mới trong dòng 35 và đi theo nó bằng cách thêm 4 đối tượng nguồn (nhãn văn bản) và đối tượng đích (ảnh bên phải).

Hàm kéo-và-thả

Với các đối tượng nguồn và đích được định nghĩa, bạn sẵn sàng đi tiếp. Dòng 46 định nghĩa một hàm gọi lại mà được gọi ra khi người dùng bỏ bớt một đối tượng nguồn lên trên đối tượng đích. Dòng 48 cập nhật HTML (hiểm thị) với hình ảnh thích hợp, dựa trên đối tượng nguồn mà đã được bỏ bớt.

Như vậy đó. Bây giờ bạn hãy chú ý là, công cụ này sẽ không làm thay đổi thế giới. Tuy nhiên nó đưa ra một lượng khá lớn các chức năng chỉ trong hơn 50 dòng mã. Nó cũng cung cấp một nền mà bạn có thể sử dụng để tạo các công cụ phức tạp hơn với các chức năng kéo-và-thả bổ sung.

Có nhiều chức năng kéo-và-thả hơn để khám phá. Tuy nhiên, do hướng dẫn này bị giới hạn về không gian, chính bạn sẽ khám phá ra các đặc tính cao cấp hơn. Xem mục Tài nguyên để nhận một liên kết đến Hướng dẫn của Nhà phát triển API Các công cụ Google và tài liệu tham khảo liên quan đến kéo-và-thả.


MiniMessages (Các thông báo nhỏ)

MiniMessages đưa ra một mảng rộng các tuỳ chọn để giao tiếp với người dùng công cụ của bạn. Chẳng hạn bạn có thể sử dụng các thông báo để hiển thị thông tin trạng thái (chẳng hạn “xin vui lòng đợi…”), các thông báo lỗi (thí dụ: “Bạn phải chọn một tuỳ chọn…”), hoặc một nhắc nhở cho một hành động (thí dụ: “Nhấn vào đây để giành…”).

Các kiểu thông báo

Ba kiểu thông báo là: có thể hủy bỏ, tĩnh, và định thời. Bảng 5 mô tả các kiểu này.

Bảng 5. Các kiểu MiniMessage (Thông báo nhỏ)
Kiểu thông báoMô tả
Có thể hủy bỏ (Dismissible)Một thông báo mà người dùng có thể hủy bỏ hoặc đóng lại.
Tĩnh (Static)Một thông báo mà chỉ có thể được hủy bỏ theo chương trình.
Định thời (Timer)Một thông báo mà bị hủy bỏ sau một số giây quy định.

Mặc dù chỉ có ba kiểu thông báo nhưng chúng cho phép linh hoạt nhiều khi làm việc với các thông báo, như bạn sẽ thấy. Bạn có thể sử dụng thư viện MiniMessage để gộp vào hầu như bất kỳ kiểu thông báo nào và các chức năng trong công cụ của bạn.

Gồm có

Cũng như với cả nhãn và chức năng kéo-và-thả, bạn cần gộp vào một tham chiếu đến thư viện thích hợp để sử dụng các thông báo. Liệt kê 6 hiển thị kê khai thư viện được yêu cầu, <Require feature="minimessage"/>.

Liệt kê 6. Thư viện MiniMessage
<?xml version="1.0" encoding="UTF-8" ?> 
 <Module>
   <ModulePrefs title="Message Example">
     <Require feature="minimessage" /> 
   </ModulePrefs>
...

Các hàm MiniMessage

Năm hàm thông báo sẵn có để tạo và hủy bỏ các thông báo. Bảng 6 hiển thị các hàm này, cùng với một mô tả ngắn.

Bảng 6. Các hàm MiniMessage
HàmMô tả
_IG_MiniMessage(moduleId, opt_container)Hàm dựng.
createDismissibleMessage(msg, opt_callback)Tạo một thông báo mà người dùng có thể hủy bỏ.
createStaticMessage(msg)Tạo một thông báo mà chỉ có thể bị hủy bỏ theo chương trình.
createTimerMessage(msg, seconds, opt_callback)Tạo một thông báo mà bị hủy bỏ sau một số giây quy định.
dismissMessage(msg)Dùng để hủy bỏ một thông báo tĩnh.

Mã MiniMessages

Cách tốt nhất để làm quen với sự linh hoạt và các tuỳ chọn khi làm việc với các thông báo là quan sát một vài thí dụ. Liệt kê 7 tạo năm kiểu thông báo khác nhau. Theo sau liệt kê mã là các ảnh chụp màn hình tương ứng, đến lượt chúng lại theo sau bởi các mô tả của mã từng dòng một.

Liệt kê 7. Các thí dụ về MiniMessage
1 <?xml version="1.0" encoding="UTF-8" ?> 
2 <Module>
3   <ModulePrefs title="Message examples" height="100">
4     <Require feature="minimessage" /> 
5   </ModulePrefs>
6   <Content type="html">
7   <![CDATA[ 
8  
9     <script type="text/javascript">
10       
11     // Constructor
12     var msg = new _IG_MiniMessage(__MODULE_ID__);
13 
14     // User dismissible message
15     msg.createDismissibleMessage("You can dismiss this by clicking the X");
16 
17     // User dismissible message, with custom colors
18     var msg1 = msg.createDismissibleMessage("Custom message colors.");
19     msg1.style.backgroundColor = "white";
20     msg1.style.color = "blue";
21 
22     // Message that creates a callback when dismissed
23     msg.createDismissibleMessage("Generates a callback...try it.", msgAck);
24 
25     // A timed message, shown for 20 seconds
26     msg.createTimerMessage("Timed message...", 20);
27 
28     // Static message that is programmatically dismissed
29     var msg2 = msg.createStaticMessage("Message dismissed programmatically.");
30 
31     // Call back function
32     function msgAck()
33     {
34       alert("Message acknowledged. This message and the 
                static message will now be dismissed!");
35       msg.dismissMessage(msg2);
36     }
37     
38     </script>
39   ]]> 
40   </Content>
41 </Module>

Ảnh chụp màn hình

Hình 13 hiển thị tất cả các thông báo trên công cụ. Chú ý có một thông báo định thời với dòng chữ “Thông báo được định thời…”.

Hình 13. Toàn bộ các thông báo
Toàn bộ các thông báo

Hình 14 hiển thị không có gì khác ngoài thông báo được định thời không còn thấy trên công cụ. Hãy nhớ rằng không có sự công nhận của người dùng được yêu cầu trong trường hợp này. Các thông báo được định thời rất tiện cho những việc như là các, các nhắc nhở vắn tắt tạm thời (chẳng hạn như “Đừng quên các báo cáo TPS!”).

Hình 14. Hủy bỏ thông báo bộ định thời
Hủy bỏ thông báo bộ định thời

Để trình diễn cả lời gọi lại và hủy bỏ một thông báo theo chương trình, bạn nhấn lên “X” để hủy bỏ thông báo có tiêu đề “Tạo cuộc gọi lại… hãy thử nó.” Khi bạn hủy bỏ thông báo, cuộc gọi lại được tạo, và cảnh báo như trong Hình 15 được hiển thị. Trong lần gọi lại, bạn cũng có thể không xét về chương trình đối với thông báo cuối cùng (tĩnh) trên màn hình hiển thị. Đối với kết quả cuối cùng, hãy quan sát Hình 16. Bạn sẽ thấy mã để hoàn thành toàn bộ bước này trong mục tiếp theo.

Hình 15. Cảnh báo cuộc gọi lại
Cảnh báo cuộc gọi lại

Khi nhấn vào OK trong thông báo cảnh báo, hai thông báo trên đáy của công cụ được hủy bỏ. Hình 16 hiển thị hai thông báo có thể được hủy bỏ bởi người dùng được giữ lại.

Hình 16. Thông báo tĩnh được loại bỏ
Thông báo tĩnh được loại bỏ

Khởi tạo

Bây giờ hãy bớt chút thời gian để xem xét lại mã, bắt đầu từ dòng 12. Cũng như khi làm việc với các thư viện nhãn và kéo-và-thả, bước đầu tiên của bạn là tạo một đối tượng mới. Với biến msg bây giờ quy chiếu một đối tượng MiniMessage, bạn có thể tiến hành tạo các kiểu thông báo khác nhau.

Tạo các thông báo

Bạn bắt đầu bằng cách tạo một thông báo có thể được hủy bỏ bởi người dùng trên dòng 15. Tham số duy nhất là dòng văn bản sẽ được hiển thị. Bạn làm theo thông báo này với thông báo khác có thể được hủy bỏ bởi người dùng. Tuy nhiên lúc này bạn tuỳ chỉnh các màu sắc nền trước và nền sau văn bản (xem các dòng 18-20).

Dòng 23 giới thiệu một thông báo có thể bị hủy bởi người dùng với lời gọi lại. Khi người dùng chọn hủy bỏ thông báo, hàm gọi lại msgAck() được gọi ra -- nhiều hơn nữa trên hàm này trong một phút. Dòng 26 là một thông báo bộ định thời; tham số thứ hai quy định rằng văn bản sẽ được hiển thị trong 20 giây.

Thông báo cuối cùng trên dòng 29 là một thông báo tĩnh, mà theo định nghĩa, là một thông báo mà chỉ có thể bị hủy theo chương trình. Tiếp tục để xem cách thông báo này được xử lý như thế nào.

Gọi lại

Hai thứ được bỏ lại để nhằm đến. Đầu tiên là hàm gọi lại được quy chiếu đến dòng 23. Thứ hai, bạn cần phải bổ sung mã để hủy bỏ theo chương trình thông báo tĩnh được kê khai trên dòng 29. Hàm msgAck() xử lý cả hai trường hợp cho bạn. msgAck() được gọi ra khi người dùng hủy bỏ thông báo được định nghĩa trên dòng 23. Trong cùng một hàm này, bạn hủy bỏ thông báo tĩnh qua một cuộc gọi đến msg.dismissMessage(msg2). Lúc này chỉ có hai thông báo duy trì được trên màn hình hiển thị, như Hình 16.

Nếu bạn muốn tìm hiểu nhiều hơn về cách làm việc với các thông báo, gồm các mã mẫu của các tuỳ chọn thông báo bổ sung, xem Hướng dẫn của Nhà phát triển API Các công cụ Google. Xin tham khảo mục Tài nguyên để nhận một liên kết đến tài liệu tham khảo về MiniMessage.


Các mách nước và mẹo

Mục mày đưa ra một vài mách nước và mẹo đã-thử-và-chứng-minh để tạo điều kiện cho quy trình phát triển khi tạo các công cụ của chính mình.

Gỡ lỗi với cảnh báo

Khi bạn đang dở dang với việc viết ra một công cụ, sẽ có lúc bạn cần một vài ý tưởng để theo dõi các lỗi. Một cách tiếp cận để dò theo dòng chương trình là chèn một vài lời gọi đến vào hàm JavaScript alert(). Tôi sử dụng cách tiếp cận này thường xuyên khi phát triển các công cụ trong hướng dẫn. Liệt kê 8 hiển thị một phần khối của mã mà sẽ cung cấp cho bạn ý tưởng về cách xác minh xem mã bên trong một phương thức đang làm việc hay không. Bổ sung đầu ra của một biến vào thông báo alert() cũng là một cách tiện lợi để kiểm tra logic của bạn.

Liệt kê 8. Gỡ lỗi với kiểu alert()
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  ...
  
  <script type="text/javascript">
  function doTabs()
  {
    var buffer = "0";
    
    alert("Inside doTabs()");
    
    ... do stuff here
    
    alert("Leaving doTabs() - Value of buffer is: " + buffer);
  }
  
  ...
</Module>

Gỡ lỗi với div

Hướng dẫn của Nhà phát triển API Các công cụ Google có một mục tuyệt hảo về cách viết các thông báo lỗi thành một mục div trong công cụ. Đây là một cách tiếp cận độc đáo để gỡ lỗi, vì các thông báo sẽ xuất hiện bên trong công cụ (chứ không phải một cửa sổ thả xuống, như trong mục trước).

Liệt kê 9 hiển thị một phiên bản có một chút sửa đổi ở thí dụ trong Hướng dẫn của Nhà phát triển API Các công cụ Google. Hãy chú ý đến dòng 12, nó định nghĩa mục div gỡ lỗi; các dòng 17 và 18 kê khai các biến gỡ lỗi; và các dòng 33-40, nơi bạn có thể tìm thấy hàm thông báo gỡ lỗi.

Liệt kê 9. Gỡ lỗi với div
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   <![CDATA[
8     <style type="text/css">
9        @import url(http://www.google.com/ig/tablib.css);
10     </style>
11 
12     <div id="debug_div" style="font-size:9pt; color: red;"></div>
13     
14     <script type="text/javascript">
15 
16     // Enable debugging?
17     var debugOn = 1;
18     var debugStr = "";
19 
20     function doTabs()
21     {
22       var buffer = "0";
23       
24       // Debug output
25       debugMsg("Inside doTabs()<br>");
26     
27       ...
28       
29       debugMsg("Leaving doTabs() - Value of buffer is: " + buffer + "<br>");
30     }
31     
32     // Display debug messages
33     function debugMsg(msg) 
34     {      
35       if (debugOn == 1) 
36       { 
37         debugStr += msg;
38         _gel("debug_div").innerHTML = debugStr;
39       }
40     }
41  
42     ...
43     
44     </script>
45   ]]>
46   </Content>
47 </Module>

Một điều cần chỉ ra trong mã này: Bên trong hàm debugMsg() bạn gắn thêm thông báo sắp đến vào biến debugStr. Việc này là cần thiết để hiển thị các kết quả của nhiều cuộc gọi đến hàm gỡ lỗi. Nếu không thực hiện việc này thì chỉ thông báo cuối cùng mới được hiển thị. Hình 17 hiển thị cách các thông báo khác nhau thể hiện trong công cụ thị trường mà bạn đã viết ra trước đây.

Hình 17. Gỡ lỗi với div
Gỡ lỗi với div

Gỡ lỗi với Firefox

Nếu bạn đang sử dụng Firefox làm trình duyệt Web của bạn và bạn đang làm việc với một công cụ mà chứa JavaScript, bạn có thể trông thấy kết quả đầu ra của các thông báo lỗi từ bên trong trình duyệt. Trong phiên bản 2.x, nhấn chuột vào trình đơn Tools và chọn Error Console.

Mã mẫu

Một trong những vẻ đẹp của các công cụ là ở chỗ bạn có thể quan sát công việc của các thứ khác. Cách tốt nhất để tìm hiểu là xem xét lại các việc đã thực hiện và cách chúng xử lý nó.

Để quan sát bộ mã của các công cụ khác, hãy truy cập thư mục nội dung Google (xem Tài nguyên) và nhấn vào văn bản liên kết trên ảnh công cụ (xem Hình 18).

Hình 18. Thư mục nội dung
Thư mục nội dung

Khi trang thông tin được hiển thị (xem Hình 19), làm theo liên kết có gắn nhãn View source (Xem nguồn) để tải về tệp XML công cụ.

Hình 19. Xem nguồn
Xem nguồn

Một caveat: Không phải tất cả các mã công cụ đều trông thấy được như XML. Nếu bạn gọi lại từ Phần 1 của hướng dẫn này, các công cụ có thể được viết bằng các ngôn ngữ kịch bản lệnh khác nhau. Liệt kê 10 hiển thị một ví dụ về một công cụ giả định viết bằng Python và được tham chiếu qua một URL.

Liệt kê 10. URL Công cụ
<Module>
  <ModulePrefs ... /> 
  <Content type="url" href="http://www.somewebsite.com/scripts/gadget.py" /> 
</Module>

Scratchpad (Tờ ghi chú)

Một thảo luận về các công cụ viết và gỡ lỗi sẽ là không đủ nếu không tham chiếu đến công cụ Scratchpad (xem mục Tài nguyên). Ngoài việc thử nghiệm bộ mã của chính mình, công cụ này là tuyệt vời để xem mã nguồn của các công cụ được viết bởi các nhà phát triển khác. Hình 20 hiển thị trình soạn thảo Scratchpad.

Hình 20. Trình soạn thảo Scratchpad
Trình soạn thảo Scratchpad

Hình 21 hiển thị việc xem trước mã trong công cụ Scratchpad.

Hình 21. Xem trước Scratchpad
Xem trước Scratchpad

Bạn cũng có thể nạp các công cụ từ một URL vào Scratchpad bằng cách sử dụng trường văn bản hiển thị trên đáy của Scratchpad. Một đề xuất cuối cùng: thử một số liên kết liệt kê bên dưới trường văn bản, vì đây là một cách tuyệt vời để xem nguồn (và đầu ra) của các công cụ thú vị khác.


Tóm lược

Tóm tắt

Hướng dẫn hai phần về cách tạo Các công cụ Google này đã đề cập đến mọi việc bạn cần biết để bắt đầu làm việc, phát triển, và gỡ lỗi các công cụ. Như đã được đề cập đến trong phần giới thiệu của hướng dẫn đầu, những thứ mà bạn có thể thực hiện với một công cụ chỉ duy nhất bị hạn chế bởi trí tưởng tượng của bạn (và dĩ nhiên là thời gian của bạn để viết mã).

Tôi khuyên bạn nên bắt đầu với một trong những công cụ làm việc được đề cập đến trong một trong hai hướng dẫn này và chỉ cần thay đổi chút ít để xem cách chúng làm việc như thế nào. Khi bạn đạt được nhiều kinh nghiệm hơn, hãy nghiên cứu kỹ bộ mã của các công cụ được viết bởi các đặc tính khác cao cấp hơn.

Nếu bạn viết một công cụ mà bạn nghĩ rằng nó đặc biệt tuyệt vời, hãy gửi cho tôi một thư điện tử và kể cho tôi biết về nó. Là một công cụ kỳ dị (về cả Các công cụ Google và chất liệu điện tử nói chung), tôi rất vui lòng được nghe từ bạn.

Tài nguyên

Học tập

Lấy sản phẩm và công nghệ

Thảo luận

Bình luận

developerWorks: Đăng nhập

Các trường được đánh dấu hoa thị là bắt buộc (*).


Bạn cần một ID của IBM?
Bạn quên định danh?


Bạn quên mật khẩu?
Đổi mật khẩu

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Ở lần bạn đăng nhập đầu tiên vào trang developerWorks, một hồ sơ cá nhân của bạn được tạo ra. Thông tin trong bản hồ sơ này (tên bạn, nước/vùng lãnh thổ, và tên cơ quan) sẽ được trưng ra cho mọi người và sẽ đi cùng các nội dung mà bạn đăng, trừ khi bạn chọn việc ẩn tên cơ quan của bạn. Bạn có thể cập nhật tài khoản trên trang IBM bất cứ khi nào.

Thông tin gửi đi được đảm bảo an toàn.

Chọn tên hiển thị của bạn



Lần đầu tiên bạn đăng nhập vào trang developerWorks, một bản trích ngang được tạo ra cho bạn, bạn cần phải chọn một tên để hiển thị. Tên hiển thị của bạn sẽ đi kèm theo các nội dung mà bạn đăng tải trên developerWorks.

Tên hiển thị cần có từ 3 đến 30 ký tự. Tên xuất hiện của bạn phải là duy nhất trên trang Cộng đồng developerWorks và vì lí do an ninh nó không phải là địa chỉ email của bạn.

Các trường được đánh dấu hoa thị là bắt buộc (*).

(Tên hiển thị cần có từ 3 đến 30 ký tự)

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Thông tin gửi đi được đảm bảo an toàn.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=70
Zone=Nguồn mở, Công nghệ Java
ArticleID=457923
ArticleTitle=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
publish-date=12182009