Tùy chỉnh một trang kết quả Google Maps với Google Mapplets

Tạo một giải pháp phía máy khách và máy chủ bằng cách sử dụng RSS, XSLT, PHP, KML và JavaScript

Google Mapplet là một ứng dụng chạy bên trong một trang kết quả của Google Maps (Các bản đồ của Google) và cho phép bạn thêm thông tin và hành vi tùy chỉnh của riêng mình cho trang web và bản đồ này. Trong hướng dẫn này, bạn sẽ viết một ứng dụng Google Mapplet (Mapplet của Google) có sử dụng nguồn cấp tin RSS Thời tiết của Yahoo (Yahoo Weather RSS) để hiển thị thời tiết địa phương trong Google Maps. Để trình diễn các kỹ thuật khác nhau trong khi sử dụng API của Google Mapplets, bạn sẽ thực hiện hai giải pháp. Giải pháp đầu tiên là ở phía máy khách và sử dụng RSS (định dạng dữ liệu dựa theo chuẩn XML được sử dụng để chia sẻ và phát tán nội dung Web) và JavaScript. Giải pháp thứ hai là ở phía máy chủ và sử dụng XSLT, PHP, KML và JavaScript.

Jake Miles, Tác giả tự do, 软通动力信息技术有限公司

Author photoJake Miles là người liên lạc kỹ thuật cao cấp tại Twistage, Inc, hiện đang làm việc với các ứng dụng Facebook, Myspace và OpenSocial, bằng cách sử dụng Java, PHP, Adobe Flex và JavaScript. Ông đã làm việc như một nhà phát triển chuyên nghiệp trong suốt 10 năm qua và đã từng là một học sinh khát khao hiểu biết và yêu thích máy móc kể từ khi 10 tuổi. Ông cũng giảng dạy trên cơ sở tình nguyện.



01 02 2012

Trước khi bạn bắt đầu

Hướng dẫn này dành cho các nhà phát triển ứng dụng Web quan tâm đến việc thêm thông tin và hành vi tùy chỉnh vào một trang kết quả Google Maps. Bạn cần hiểu rõ PHP, JavaScript và XSLT.

Về hướng dẫn này

Các từ viết tắt thông dụng

  • Ajax: JavaScript không đồng bộ + XML
  • API: Giao diện lập trình ứng dụng
  • DOM: Mô hình đối tượng tài liệu
  • HTML: Ngôn ngữ đánh dấu siêu văn bản
  • HTTP: Giao thức truyền siêu văn bản
  • KML: Ngôn ngữ đánh dấu lỗ khóa
  • PHP: Bộ tiền xử lý siêu văn bản PHP
  • RSS: Cung cấp thông tin cực kỳ đơn giản
  • URL: Mã định vị tài nguyên thống nhất
  • W3C: Hiệp hội mạng toàn cầu
  • XHTML: Ngôn ngữ đánh dấu siêu văn bản mở rộng được
  • XML: Ngôn ngữ đánh dấu mở rộng
  • XSL: Ngôn ngữ bản định kiểu mở rộng
  • XSLT: Các chuyển đổi Ngôn ngữ bản định kiểu mở rộng

Trong hướng dẫn này, bạn sẽ xây dựng một ứng dụng Google Mapplet có hiển thị thời tiết địa phương bằng cách sử dụng nguồn cấp tin Thời tiết của Yahoo. Bạn sẽ gọi một dịch vụ của trình mã hóa địa lý (geocoder) đảo ngược (xem phần Các điều kiện tiên quyết để có một liên kết) bằng cách sử dụng một yêu cầu Ajax trong API của Google Mapplets, để chuyển tọa độ hiện tại của Google Map thành một mã vùng bưu điện.

Bạn sẽ thực hiện hai giải pháp: Một giải pháp gọi dịch vụ thời tiết của Yahoo từ JavaScript và hiển thị thời tiết ở thanh bên và một giải pháp khác gọi máy chủ Web từ xa riêng của bạn với một lớp phủ KML để đặt trên bản đồ này. Máy chủ Web từ xa của bạn, chạy PHP 5.2, sẽ sử dụng mô đun XSL để áp dụng các bản định kiểu XSLT cho dữ liệu XML RSS được trả về từ Yahoo. Bạn sẽ thực hiện hai bản định kiểu: một bản định kiểu chuyển dữ liệu RSS của Yahoo thành một cấu trúc dữ liệu đơn giản hơn, để biểu thị việc tách tầng trình bày của bạn (KML) ra khỏi cấu trúc dữ liệu bên ngoài và bản định kiểu kia chuyển cấu trúc dữ liệu cục bộ đơn giản thành một lớp phủ KML. Cuối cùng, bạn sẽ áp dụng lớp phủ này cho Google Map.

Các điều kiện tiên quyết

Bạn sẽ cần những công cụ sau để làm theo hướng dẫn này:

  • Việc phát triển một ứng dụng Google Mapplet yêu cầu bạn giữ nó trên một máy chủ Web công cộng để Google có thể đọc Mapplet vào bộ nhớ nhanh (cache) của nó để biểu thị các trang kết quả của Google Maps. Vì vậy, bạn cần truy cập vào một máy chủ Web công cộng với hướng dẫn này. Phiên bản 2.2 của máy chủ Web của Apache là một máy chủ Web sẽ được dùng. Xem phần Tài nguyên để biết thông tin về thiết lập và cấu hình.
  • Phiên bản 5.2.6 của PHP.
  • Dịch vụ của trình mã hóa địa lý (geocoder) đảo ngược từ geonames.org.
  • Một trình duyệt Web cho phép chạy JavaScript.
  • Trình soạn thảo của ngôn ngữ lập trình ưa thích của bạn.

Soạn mapplet trong PHP

Trước tiên, bạn sẽ tạo ra chính ứng dụng Google Mapplet, soạn nó bằng PHP, rồi thêm nó vào tài khoản Google của bạn để bạn có thể phát triển nó và xem nó hoạt động trong trình duyệt của bạn. Một ứng dụng Google Mapplet là một đặc tả ứng dụng nhỏ (gadget) chuyên dùng của Google, vì vậy bước đầu tiên là tạo ứng dụng nhỏ đó của Google. Trong phần này, bạn sẽ tạo ứng dụng nhỏ này bằng cách sử dụng PHP, tách riêng XML của ứng dụng nhỏ này và phần CDATA của nó thành các tệp khác nhau và chia nhỏ phần CDATA thành một tệp HTML và một tệp JavaScript, giữ cho các ngôn ngữ này tách rời nhau để chỉnh sửa dễ dàng hơn.

Tạo tệp weather-mapplet.php trên một máy chủ công cộng

Để bắt đầu, hãy tạo tệp weather-mapplet.php trong Liệt kê 1.

Liệt kê 1. Tệp weather-mapplet.php
<? echo('<?xml version="1.0" encoding="UTF-8"?>'); ?>
<Module>
  <ModulePrefs title="Local Weather Mapplet" 
               description="Displays local weather on the map."
               author="Jake Miles"
               author_email="jake@jakemiles.com"
               height="150">
    <Require feature="sharedmap"/>
  </ModulePrefs>
  <Content type="html"><![CDATA[

   <? include ('weather-mapplet-content.php'); ?>

]]></Content>

</Module>

Liệt kê 1 tạo một đặc tả ứng dụng nhỏ mapplet (một Mô đun) và quy định tiêu đề, mô tả, tác giả, địa chỉ e-mail của tác giả và chiều cao của mapplet. Thẻ <Require feature="sharedmap"> là bắt buộc với một đặc tả mapplet. Nó đòi hỏi có sẵn một bản đồ chia sẻ (Google Map) trong trang này.

Cấu trúc lại HTML thành một tệp PHP khác

Phần tử tiếp theo trong Liệt kê 1 là Content (Nội dung), quy định nội dung của mapplet bên trong một phần tử CDATA. Thay vì cố gắng mã hóa mapplet bên trong một phần tử CDATA, thường rất rắc rối trong hầu hết các trình soạn thảo, bạn có thể cấu trúc lại nội dung HTML thành tệp weather-mapplet-content.php, như trong Liệt kê 2.

Liệt kê 2. Tệp weather-mapplet-content.php
Ladies and jellyspoons, your local weather...

<div>
  Units: 
  <input id="units-english" type="radio" name="weather-units" checked> English
  <input id="units-metric" type="radio" name="weather-units"> Metric
</div>

<div>
  Result behavior: <br/>
  <input id="results-simple" type="radio" name="result-type" checked> 
Client-side  <br/>
  <input id="results-server-xslt" type="radio" name="result-type"> 
Server-side XSLT
</div>

<div id="message">

</div>

<script>
   <? include ('weather-mapplet-content.js'); ?>
   runMapplet();
</script>

Liệt kê 2 quy định HTML sẽ được nạp ở bên trái của trang các kết quả của Google Maps (xem Hình 1). Nó bao gồm một cặp các nút tròn để bạn chọn đơn vị đo hệ Anh hay theo hệ mét trong thông tin thời tiết và bộ các nút tròn khác để bạn chọn một đường dẫn thực hiện, do trong hướng dẫn này bạn sẽ thực hiện hai giải pháp. Thẻ div cho các thông báo trong Liệt kê 2 sẽ có ích như là một khung hiển thị đầu ra khi bạn gỡ lỗi mã JavaScript và bạn sẽ sử dụng nó để hiển thị bản tin tóm tắt thời tiết trong nguồn cấp tin Thời tiết của Yahoo.

Hình 1. Mapplet thời tiết địa phương cuối cùng
Mapplet thời tiết địa phương cuối cùng

Thêm mã JavaScript

Bản thân mã JavaScript được cấu trúc lại thành một tệp weather-mapplet-content.js để làm cho việc chỉnh sửa dễ dàng hơn và để giữ cho các kiểu mã khác nhau tách biệt nhau. Tệp weather-mapplet-content.php bao gồm tệp JavaScript để nó trở thành nội dung nội dòng (inline) khi được biểu thị (để giữ các đặc tả Google Gadget (ứng dụng con của Google) đi cùng nhau trong một URL có thể gọi được), nhưng bạn vẫn có thể chỉnh sửa tệp riêng của nó.

Khi đã nạp, đoạn mã HTML này gọi một hàm Javascript runMapplet() (được định nghĩa sau, trong phần Phát triển Javascript) để khởi động chức năng mapplet. Hàm runMapplet() sẽ trú trong tệp weather-mapplet-content.js. Toàn bộ tệp JavaScript tương đối dài và bạn sẽ tìm thấy nó trong gói mã nguồn đi kèm với hướng dẫn này. Liệt kê 3 cho thấy chỗ bắt đầu của tệp JavaScript, được bao gồm ở đây để bạn có tất cả các đoạn trong chuỗi liên hệ bao hàm trong PHP vào đúng chỗ để bắt đầu (bạn sẽ khám phá tệp này sau, từng dòng một, trong hướng dẫn này).

Liệt kê 3. Tệp weather-mapplet-content.js
var map = new GMap2();
var mapCenter;

function runMapplet () {  .......

Bây giờ bạn đã sẵn sàng thêm URL của mapplet vào trang Google Maps của bạn và xem nó dưới dạng mới thành hình này trước khi bạn tiếp tục viết mã các chức năng. Điều này sẽ cho phép bạn xây dựng chức năng và vẫn tiếp tục gỡ lỗi nó trong trang này khi bạn tiến hành.

Phía trên cùng của tệp weather-mapplet-content.js khai báo hai biến công cộng (public), là map (bản đồ) và mapCenter (trung tâm bản đồ), đặt map bằng một cá thể mới là Gmap2. Gmap2 biểu diễn Google Map trên trang đó. mapCenter sẽ lưu trữ các tọa độ trung tâm của bản đồ để sử dụng sau này.


Thêm mapplet vào Google Maps

Tại thời điểm này, bạn có thể thêm mapplet của bạn vào trang Google Maps và xác nhận rằng nó chạy. Trước khi bạn làm điều đó, bạn cần phải cài đặt Google Mapplets Developer Mapplet (Mapplet của nhà phát triển Mapplets của Google). Việc này là cần thiết vì Google thường lưu trữ mã mapplet của bạn trong bộ nhớ sẵn (cache), có nghĩa là bất kỳ các thay đổi nào mà bạn thực hiện trong quá trình phát triển sẽ không xuất hiện trong mapplet nếu bạn chỉ nạp lại trang. Developer Mapplet (Mapplet của nhà phát triển) thêm một liên kết nạp lại tới mapplet của bạn, cho phép bạn xóa bộ nhớ sẵn của mapplet của bạn và nạp lại nó.

Cài đặt mapplet của nhà phát triển

Bước tiếp theo là thêm mapplet của bạn vào tài khoản Google của mình, sao cho bạn có thể nhìn thấy nó đang làm việc khi bạn phát triển nó. Để xác nhận rằng bạn muốn thêm nó (xem Hình 2), hãy chuyển đến:

http://maps.google.com/ig/add?synd=mpl&pid=mpl&moduleurl=
http://www.google.com/ig/modules/geodeveloper.xml

Lưu ý: Vì lý do định dạng, URL ở trên xuất hiện trên nhiều dòng. Khi bạn sao chép nó vào trình duyệt của mình, hãy làm cho nó thành chỉ một chuỗi ký tự.

Hình 2. Thêm Google Mapplet Developer Mapplet
Thêm Google Mapplet Developer Mapplet

Nhấn vào Add it to Maps (Thêm nó vào Maps) để thêm nó vào tài khoản của bạn.

Thêm Mapplet vào Google Maps

Tiếp theo, bạn muốn thêm mapplet của bạn vào tài khoản Google Maps của mình. Hãy chuyển đến thư mục Google Maps:

http://maps.google.com/ig/directory?synd=mpl&pid=mpl&features=
sharedmap,geofeed&backlink=http%3A%2F%2Fmaps.google.com%2Fmaps%2Fmm

Lưu ý: Vì lý do định dạng, URL ở trên xuất hiện trên nhiều dòng. Khi bạn sao chép nó vào trình duyệt của mình, hãy làm cho nó thành chỉ một chuỗi ký tự.

Nhấn vào Add by URL (xem Hình 3).

Hình 3. Liên kết Add By URL của Google Maps Directory
Liên kết Add By URL của Google Maps Directory

Khi bạn nhấn vào Add by URL, bạn sẽ thấy một dấu nhắc để nhập URL của mapplet mà bạn muốn thêm vào. Hãy chỉ rõ URL của tệp weather-mapplet.php trên máy chủ Web công cộng của bạn và nhấn Add (xem Hình 4).

Hình 4. Chỉ rõ URL của mapplet của bạn
Chỉ rõ URL của mapplet của bạn

Google sẽ cảnh báo bạn rằng bạn đang thêm một tính năng không do Google tạo ra vào trang Google Maps của bạn (xem Hình 5).

Hình 5. Cảnh báo của Google khi thêm một mapplet của bên thứ ba
Cảnh báo của Google khi thêm một mapplet của bên thứ ba

Nhấn OK để thêm mapplet của bạn, sau đó nhấn Back to Google Maps (Quay lại Google Maps) ở góc trên bên trái của trang để trở về trang Google Maps của bạn. Nếu bạn tìm kiếm một địa chỉ, rồi nhấn vào My Maps (Bản đồ của tôi) trong các kết quả tìm kiếm, bạn sẽ thấy cả mapplet của Mapplet Developer lẫn mapplet Thời tiết địa phương của bạn ở bên trái trong danh sách các bản đồ (xem Hình 6).

Hình 6. Developer Mapplet và mapplet của bạn đang chạy trong Google Maps
The Developer Mapplet và mapplet của bạn đang chạy trong Google Maps

Phát triển JavaScript

Phần chủ yếu của mapplet sẽ viết bằng JavaScript. Trong phần này, bạn sẽ chỉ mới bắt đầu JavaScript sao cho bạn có một chuỗi đầy đủ chuỗi liên hệ bao hàm của PHP — chuỗi các tệp được bao gồm để tạo nên kết quả của URL. Một tệp là đặc tả mapplet, một tệp bên trong là HTML của mapplet và một tệp bên trong là tệp JavaScript. Một khi cả ba đoạn mã này ở cùng một chỗ, bạn đã sẵn sàng để bắt đầu phát triển chức năng của ứng dụng.

Thêm hàm runMapplet()

Với mapplet cơ bản đang hiển thị trong trang các kết quả của Google Maps, bạn có thể tiếp tục phát triển JavaScript để làm cho nó thực hiện một điều gì đó có ích. Thêm hàm runMapplet() vào tệp weather-mapplet-content.js, như trong Liệt kê 4.

Liệt kê 4. Hàm runMapplet() (weather-mapplet-content.js)
function runMapplet () {
  GEvent.addListener(map, "moveend", function() {          
    map.getCenterAsync (onGetCenter);
  });
}

Đây là hàm được gọi trong thẻ <script> của nội dung HTML của mapplet, có nghĩa là nó sẽ được gọi khi nạp trang. Hàm runMapplet() thiết lập mapplet để đáp ứng với các sự kiện thay đổi vị trí trong bản đồ của trang.

Hàm runMapplet() không làm việc trực tiếp nhiều với bản đồ. Nó thêm một trình lắng nghe cho sự kiện bản đồ moveend cung cấp một đối tượng hàm sẽ được gọi bất cứ khi nào bản đồ kết thúc quá trình thay đổi vị trí của nó (ví dụ, khi người dùng kéo trượt bản đồ bằng chuột). Thao tác này thiết lập sự kiện sẽ điều khiển phần còn lại của hành vi mapplet. Nhiều hàm, mà bạn có thể gọi trong API của Google Maps, phải được thay thế bằng các cuộc gọi tới các bản sao không đồng bộ của chúng trong API của Mapplets.

Gọi hàm getCenter()

Hàm gọi lại tự nó nhận được các tọa độ trung tâm của bản đồ dưới dạng một đối tượng GLatLng đại diện cho một cặp vĩ độ/kinh độ. Hàm gọi lại trông khác với khi nó xuất hiện trong một thành phần API Google Maps trực tiếp. Một cuộc gọi đến hàm getCenterAsync() trong API của Mapplets thay thế cho cuộc gọi đến hàm getCenter() trong API của Google Maps. Cuộc gọi đến getCenterAsync() đòi hỏi hàm gọi lại onGetCenter. Hàm onGetCenter() được gọi với các tọa độ trung tâm của bản đồ, trái ngược với một cuộc gọi đến getCenter(), trả về trực tiếp các tọa độ.

Như vậy, hàm runMapplet() thiết lập một trình lắng nghe sự di chuyển của bản đồ và bất cứ khi nào bản đồ kết thúc di chuyển, trình lắng nghe sẽ hỏi bản đồ để lấy cặp vĩ độ/kinh độ trung tâm của nó, cung cấp onGetCenter làm hàm gọi lại. Vì thế hàm onGetCenter (xem Liệt kê 5) sẽ được gọi với trung tâm mới của bản đồ bất cứ khi nào vị trí trung tâm của bản đồ thay đổi.

Liệt kê 5. Hàm onGetCenter()
function onGetCenter (center) {
  mapCenter = center;
  var reverseGeocoderUrl = createReverseGeocoderUrl (center);
  document.getElementById("message").innerHTML = 'Looking up zipcode from ' + 
reverseGeocoderUrl;
  _IG_FetchXmlContent (reverseGeocoderUrl, onReverseGeocoderResult);
}

function createReverseGeocoderUrl(gLatLng) {
    return 'http://ws.geonames.org/findNearbyPostalCodes?lat=' + gLatLng.lat() + 
'&lng=' + gLatLng.lng();
}

Hàm onGetCenter() được gọi với đối tượng GLatLng trung tâm của bản đồ, biểu diễn các tọa độ vĩ độ/kinh độ của nó. Nó lưu trữ đối tượng GLatLng trong biến chung mapCenter, chủ yếu là để tránh lặp lại cuộc gọi không đồng bộ này nếu sau đó bạn cần trung tâm của bản đồ trong JavaScript. Nó cũng thiết lập nội dung văn bản của phần tử div thông báo trong mapplet là một thông báo trạng thái, biểu thị rằng bạn có thể truy cập các phần tử HTML của mapplet của bạn từ JavaScript của nó mà không cần bất kỳ thủ thuật nào, dù mapplet chạy bên trong trang Google Maps.

Chuyển trung tâm của bản đồ thành một mã vùng bưu điện

Mặc dù Google Map có thể cung cấp cho bạn các tọa độ trung tâm của nó, nguồn cấp tin RSS thời tiết của Yahoo đòi hỏi một mã vùng bưu điện và bản đồ của Google không cung cấp mã vùng bưu điện tương ứng với các tọa độ trung tâm. Vì vậy, để ánh xạ từ bản đồ này sang bản đồ khác, bạn sẽ sử dụng một dịch vụ của trình mã hóa địa lý (Geocoder) đảo ngược miễn phí (xem Các điều kiện tiên quyết để có một liên kết), nhận một vĩ độ và kinh độ và trả về XML mô tả một vài mã vùng bưu điện gần đó.

Sau khi thiết lập biến chung mapCenter, hàm onGetCenter() tạo ra URL của trình mã hóa địa lý đảo ngược với cuộc gọi đến hàm createReverseGeocoderUrl(), bằng cách sử dụng đối tượng GLatLng trung tâm của bản đồ.

Để gọi URL đó, hãy sử dụng hàm API của Google Maps là _IG_FetchXmlContent, tải các nội dung của một URL và phân tích cú pháp nó như là XML, để sinh ra một đối tượng DOM. Cuộc gọi này là không đồng bộ, vì thế bạn cung cấp một hàm gọi lại như với hàm getCenterAsync(). Trong trường hợp này hàm gọi lại là onReverseGeocoderResult, như trong Liệt kê 6.

Liệt kê 6. onReverseGeocoderResult
function onReverseGeocoderResult (data) {
    var zipcodes = data.getElementsByTagName("code");
    if (zipcodes.length == 0) {
      document.getElementById("message").innerHTML = 
'No zipcode information available for the current map location.';
    } else {
      var firstCode = zipcodes[0];
      var postalCodeDom = firstCode.getElementsByTagName('postalcode')[0];
      var zipcode = postalCodeDom.textContent;
      onZipcodeObtained (zipcode);
    }
}

Hàm onReverseGeocoderResult được gọi với một đối tượng DOM biểu diễn các kết quả XML của cuộc gọi đến dịch vụ mã hóa địa lý đảo ngược. Bạn có thể xem kết quả bằng cách gọi trình mã hóa địa lý đảo ngược trong trình duyệt của bạn. Ví dụ, cuộc gọi trình mã hóa địa lý đảo ngược,

http://ws.geonames.org/findNearbyPostalCodes?
lat=40.746135271984336&lng=-73.97892951965332

sẽ tạo ra XML trong Liệt kê 7 (được rút gọn ở đây).

Lưu ý: Vì lý do định dạng, URL ở trên xuất hiện trên nhiều dòng. Khi bạn sao chép nó vào trình duyệt của mình, hãy làm cho nó thành chỉ một chuỗi ký tự.

Liệt kê 7. Một ví dụ về XML được trả về từ dịch vụ Trình mã hóa địa lý đảo ngược Geonames.org
<geonames>
 <code>
   <postalcode>10016</postalcode>
   <name>NewYork</name>
   <countryCode>US</countryCode>
   <lat>40.746135271984336</lat>
   <lng>-73.97892951965332</lng>
   <adminCode1>NY</adminCode1>
   <adminName1>NewYork</adminName1>
   <adminCode2>061</adminCode2>
   <adminName2>NewYork</adminName2>
   <adminCode3/>
   <adminName3/>
   <distance>0.0</distance>
 </code>
 <code>
   <postalcode>10158</postalcode>
   <name>NewYork</name>
   <countryCode>US</countryCode>
   <lat>40.749435</lat>
   <lng>-73.9758</lng>

 ...

</geonames>

XML này chứa thông tin địa chỉ có cấu trúc về các mã vùng bưu điện gần cặp vĩ độ/kinh độ cụ thể.

Hàm onReverseGeocoderResult được cung cấp thông tin kết quả dưới dạng một phần tử DOM, do đó nó gọi hàm getTagsByElementName() của đối tượng này, tìm nạp tất cả các thẻ có tên là code (mã). Nếu dịch vụ này không trả về mã vùng bưu điện nào ứng với cặp tọa độ, hàm onReverseGeocoderResult() sẽ báo cáo điều đó trong div thông báo của mapplet. Mặt khác, trong trường hợp này bạn chỉ quan tâm đến một mã vùng bưu điện, không phải các mã vùng bưu điện gần đó, vì vậy hàm onReverseGeocoderResult() sử dụng phần tử <code> đầu tiên trong tài liệu XML để tra tìm phần tử postalcode (mã số bưu điện) và thu được giá trị textContent của nó để lấy ra chính mã vùng bưu điện dưới dạng một chuỗi ký tự. Sau đó nó gọi hàm onZipcodeObtained() (xem Liệt kê 8) với mã vùng bưu điện này.

Liệt kê 8. Hàm onZipcodeObtained()
function onZipcodeObtained(zipcode) {
  var unitsEnglishRadio = document.getElementById('units-english');
  var units = unitsEnglishRadio.checked ? 'f' : 'c';
  var serverXsltRadio = document.getElementById('results-server-xslt');
  if (serverXsltRadio.checked) {
    fetchServerXsltResults(zipcode, units);
  } else {
    fetchYahooRss (zipcode, units);
  }
}

Hàm onZipcodeObtained() được gọi với mã vùng bưu điện tương ứng với trung tâm của bản đồ. Sau đó hàm này kiểm tra xem nút tròn của đơn vị đo lường nào đã được chọn và kiểm tra xem tuyến chức năng nào được chọn: XSLT phía máy khách hay phía máy chủ. Nếu tuyến phía máy chủ được chọn, nó gọi hàm fetchServerXsltResults(); trái lại, nó gọi hàm fetchYahooRss(), chuyển các đối số là mã vùng bưu điện và các đơn vị đo (hoặc f cho thang nhiệt độ Fahrenheit hoặc c cho thang nhiệt độ bách phân). HàmfetchServerXsltResult() sẽ bắt đầu tuyến chức năng phía máy chủ, gọi kịch bản lệnh PHP cho một lớp phủ KML, trong khi hàm fetchYahooRss() sẽ gọi nguồn cấp tin RSS của Yahoo trực tiếp từ JavaScript và hiển thị bản tóm tắt của nó.


Tuyến chức năng phía máy khách

Trong ví dụ Mapplet Thời tiết địa phương, hai nút tròn xác định tuyến hành vi nào được thực hiện: một tuyến hoàn toàn xảy ra trên máy khách còn một tuyến khác xảy ra chủ yếu trên máy chủ. Trong phần này, bạn sẽ thực hiện tuyến chức năng phía máy khách, tìm nạp nguồn cấp tin RSS Thời tiết của Yahoo và hiển thị nó đầy đủ bên trong JavaScript.

Gọi dịch vụ Thời tiết RSS của Yahoo

Bước đầu tiên trong tuyến thực hiện phía máy khách sẽ gọi dịch vụ Thời tiết RSS của Yahoo thông qua cuộc gọi đến hàm fetchYahooRss(), có nội dung xuất hiện trong Liệt kê 9.

Liệt kê 9. Hàm fetchYahooRss()
function fetchYahooRss(zipcode, units) {
  var yahooWeatherRssUrl = createYahooRssUrl(zipcode, units);
  _IG_FetchXmlContent (yahooWeatherRssUrl, onYahooWeatherRssResult);
}

function createYahooRssUrl(zipcode, units) {
    return 'http://weather.yahooapis.com/forecastrss?p=' + zipcode + '&u=' 
+ units;
}

Hàm fetchYahooRss() gọi createYahooRssUrl, và chuyển đối số là mã vùng bưu điện và các dấu đơn vị đo lường, để tạo URL của nguồn cấp tin RSS Thời tiết của Yahoo! Sau đó nó sử dụng hàm Google Maps là _IG_FetchXmlContent để tìm nạp không đồng bộ các kết quả của URL đó, cung cấp hàm onYahooWeatherRssResult làm hàm gọi lại.

Để xem một kết quả mẫu của nguồn cấp tin RSS Thời tiết của Yahoo!, trong trình duyệt của bạn hãy chuyển đến http://weather.yahooapis.com/forecastrss?p=10016&u=f và xem mã nguồn của trang web đó sẽ chứa XML có cấu trúc giống như Liệt kê 10.

Liệt kê 10. Kết quả mẫu từ nguồn cấp tin RSS Thời tiết của Yahoo!
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<rss version="2.0" xmlns:yweather="http://xml.weather.yahoo.com/ns/rss/1.0"
 xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">
  <channel>
    <title>Yahoo! Weather - New York, NY</title>
<link>http://us.rd.yahoo.com/dailynews/rss/weather/New_York__
   NY/*http://weather.yahoo.com/forecast/10016_f.html</link>
<description>Yahoo! Weather for New York, NY</description>
<language>en-us</language>
<lastBuildDate>Sun, 05 Oct 2008 7:51 pm EDT</lastBuildDate>
<ttl>60</ttl>
<yweather:location city="New York" region="NY"   country="US"/>

<yweather:units temperature="F" distance="mi" pressure="in" speed="mph"/>
<yweather:wind chill="56"   direction="60"   speed="3" />
<yweather:atmosphere humidity="90"  visibility="6"  pressure="30.28"  
rising="1" />
<yweather:astronomy sunrise="6:57 am"   sunset="6:31 pm"/>
<image>
<title>Yahoo! Weather</title>
<width>142</width>
<height>18</height>
<link>http://weather.yahoo.com</link>
<url>http://l.yimg.com/us.yimg.com/i/us/nws/th/main_142b.gif</url>
</image>
<item>

<title>Conditions for New York, NY at 7:51 pm EDT</title>
<geo:lat>40.67</geo:lat>
<geo:long>-73.94</geo:long>
<link>http://us.rd.yahoo.com/dailynews/rss/weather/New_York__
NY/*http://weather.yahoo.com/forecast/10016_f.html</link>
<pubDate>Sun, 05 Oct 2008 7:51 pm EDT</pubDate>
<yweather:condition  text="Fair"  code="33"  temp="56"  
date="Sun, 05 Oct 2008 7:51 pm EDT" />
<description><![CDATA[
<img src="http://l.yimg.com/us.yimg.com/i/us/we/52/33.gif"/><br />
<b>Current Conditions:</b><br />
Fair, 56 F<BR />
<BR /><b>Forecast:</b><BR />
Sun - Partly Cloudy. High: 64 Low: 51<br />
Mon - Partly Cloudy. High: 57 Low: 43<br />
<br />
<a href="http://us.rd.yahoo.com/dailynews/rss/weather/New_York__
NY/*http://weather.yahoo.com/forecast/USNY0996_f.html">Full Forecast at Yahoo! 
Weather</a><BR/>
(provided by The Weather Channel)<br/>
]]></description>
<yweather:forecast day="Sun" date="5 Oct 2008" low="51" high="64" 
    text="Partly Cloudy" code="29" />
<yweather:forecast day="Mon" date="6 Oct 2008" low="43" high="57" 
   text="Partly Cloudy" code="30" />
<guid isPermaLink="false">10016_2008_10_05_19_51_EDT</guid>
</item>

</channel>
</rss><!-- api1.weather.ac4.yahoo.com compressed/chunked Sun Oct  
5 17:23:56 PDT 2008 -->

Liệt kê 10 chứa khá nhiều thông tin, theo định dạng RSS, có chứa một phần tử <channel> với một phần tử <item> bên dưới nó. Một số thông tin thời tiết địa phương ở mức <channel> và một số ở mức <item>. Cấu trúc của dữ liệu sẽ trở nên quan trọng hơn khi bạn chuyển đổi nó bằng cách sử dụng XSLT sau này, nhưng bây giờ các phần tử quan trọng là <title> của phần tử <channel> và <description> của phần tử <item>.

Sử dụng kết quả RSS của Yahoo

Khi URL tải xong, kết quả của RSS này được chuyển vào hàm gọi lại onYahooWeatherRssResult như một đối tượng DOM, như trong Liệt kê 11.

Liệt kê 11. Hàm onYahooWeatherRssResult()
function onYahooWeatherRssResult(xml) {
  var item = xml.getElementsByTagName('item')[0];
  var description = item.getElementsByTagName('description')[0];
  document.getElementById("message").innerHTML = description.textContent;
}

Hàm onYahooWeatherRssResult() tìm thấy phần tử <item> trong XML và tìm thấy phần tử <description> của nó. Phần tử <description> là một HTML tiện dụng biểu thị một số thông tin trong nguồn cấp tin thời tiết và do đó bao bọc nội dung của nó trong một phần tử CDATA, như trong Liệt kê 12.

Liệt kê 12. Phần tử <description> trong XML kết quả của nguồn cấp tin RSS Thời tiết của Yahoo!
<description><![CDATA[
<img src="http://l.yimg.com/us.yimg.com/i/us/we/52/33.gif"/><br />
<b>Current Conditions:</b><br />
Fair, 56 F<BR />
<BR /><b>Forecast:</b><BR />
Sun - Partly Cloudy. High: 64 Low: 51<br />
Mon - Partly Cloudy. High: 57 Low: 43<br />
<br />
<a href="http://us.rd.yahoo.com/dailynews/rss/weather/New_York__
   NY/*http://weather.yahoo.com/forecast/USNY0996_f.html">Full Forecast at 
   Yahoo! Weather</a><BR/>
(provided by The Weather Channel)<br/>
]]></description>

Hàm onYahooWeatherRssResult() đặt HTML bên trong của div thông báo vào các nội dung của phần tử <description> cung cấp một bản tóm tắt thời tiết nhanh chóng dưới các nút điều khiển trong mapplet của bạn. Nhấn nút Reload (Nạp lại) trên mapplet để tải lại mapplet trong bộ nhớ sẵn của Google. Sau đó kéo bản đồ đi một vài mm để tạo ra một sự kiện moveend (sẽ kích hoạt trình lắng nghe thiết lập mapplet bằng hàm runMapplet() và kích hoạt mapplet chạy lại toàn bộ chuỗi sự kiện). Bạn sẽ xem bản tóm tắt thời tiết từ nguồn cấp tin RSS được hiển thị bên trái của bản đồ, như trong Hình 7.

Hình 7. Hiển thị phần tử <description> của nguồn cấp tin RSS Thời tiết của Yahoo! trong mapplet
Hiển thị phần tử description của nguồn cấp tin RSS Thời tiết của Yahoo! trong mapplet

Thực hiện tuyến chức năng phía máy chủ

Bây giờ bạn đã khám phá một giải pháp hoàn toàn phía máy khách, trong đó bạn đã gọi nguồn cấp tin RSS của Yahoo, đã duyệt qua DOM của XML kết quả và đã hiển thị bản tóm tắt của RSS trong mapplet tất cả đều trong JavaScript, bây giờ là lúc khám phá một giải pháp phía máy chủ. Giải pháp này bao gồm JavaScript gọi một kịch bản lệnh PHP trên máy chủ Web của bạn, rồi kịch bản lệnh này đến lượt nó sẽ gọi chính dịch vụ Yahoo và sử dụng XSLT để chuyển RSS thành một lớp phủ KML mà mapplet sẽ hiển thị trên bản đồ.

Tạo kịch bản lệnh PHP phía máy chủ

Nhiệm vụ phía máy chủ bắt đầu với một kịch bản lệnh PHP có tên là weather.php, có trách nhiệm trả về một lớp phủ KML mô tả thời tiết hiện tại. Trước tiên hãy tạo weather.php, như trong Liệt kê 13 và đặt nó trên máy chủ Web có khả năng truy cập công cộng của bạn.

Bây giờ hãy chuyển sự chú ý của bạn vào tuyến chức năng phía máy chủ, được kích hoạt khi bạn chọn nút tròn Server-side XSLT (XSLT phía máy chủ) trong mapplet và thay đổi vị trí của bản đồ. Việc này gọi hàm fetchServerXsltResults(), như trong Liệt kê 13.

Liệt kê 13. Hàm fetchServerXsltResults()
function fetchServerXsltResults(zipcode, units) {

  var kmlUrl = "http://YOUR-SERVER/weather.php?v=" + Math.round(Math.random() 
* 10000000000);

  var kml = new GGeoXml(kmlUrl);
  map.addOverlay(kml);
}

Mục tiêu ở đây là tải một tệp KML từ máy chủ của bạn và phủ nó trên bản đồ. Vì vậy, đầu tiên hàm này tạo ra một URL để gọi máy chủ của bạn để lấy dữ liệu KML. Google lưu trữ các tệp KML trong bộ nhớ sẵn, do đó hãy đảm bảo rằng KML được tải từ máy chủ của bạn mỗi lần gọi, chứ không phải từ bộ nhớ sẵn của Google, hàm fetchServerXsltResults() nối thêm một số ngẫu nhiên giữa 0 và 10000000000 tới URL như là một tham số yêu cầu giả.

Sau đó, nó tạo ra một đối tượng GGeoXml với URL đó. GGeoXML thực hiện giao diện GOverlay, có nghĩa là bạn có thể chuyển nó vào hàm Gmap2.addOverlay(). Không giống như API của Google Maps, API của Mapplets chỉ cho phép sử dụng các lớp GOverlay tiêu chuẩn như là GGeoXml, chứ không phải công cụ GOverlay tuỳ chỉnh riêng của bạn. Để phủ dữ liệu KML trên bản đồ, GGeoXml tải một tệp XML và gọi addOverlay với nó.

Thực hiện chức năng phía máy chủ

Việc này đưa bạn tới phía máy chủ của phương trình, ở đây bạn sẽ sử dụng PHP và XSLT để chuyển đổi nguồn cấp tin RSS Thời tiết của Yahoo! thành một tệp KML để phủ trên Google Map. Tiếp tục tạo weather.php, như trong Liệt kê 14 và đặt nó lên máy chủ Web công cộng của bạn.

Liệt kê 14. Tệp weather.php
<?php

require_once('yahoo-weather-rss.php');
require_once('XsltChainController.php');

if (! isset($_REQUEST['zipcode'])) {
  die ("zipcode request parameter required");
}

if (! isset($_REQUEST['units'])) {
  die ("units request parameter required - either c or f");
}

$weatherRss = readYahooWeatherRss ($_REQUEST['zipcode'], $_REQUEST['units']);

$controller = new XsltChainController 
  (array ('yahoo-rss-to-simple-weather.xsl',
      'simple-weather-to-kml.xsl'),
   'CDATA_START', 'CDATA_END');

echo $controller->echoTransformedXml ($weatherRss, true, false);

?>

Tệp weather.php tạo ra một tệp KML mà mapplet có thể phủ trên Google Map. Đầu tiên, nó đảm bảo các tham số yêu cầu cần thiết có mặt; bạn cần một mã vùng bưu điện và một dấu hiệu đơn vị đo (hoặc c hay f) để gọi nguồn cấp tin RSS của Yahoo. Sau đó, nó gọi hàm readYahooWeatherRss(), chuyển giao các tham số đó và nhận lại XML của nguồn cấp tin RSS Thời tiết của Yahoo. Tiếp theo, nó tạo ra một cá thể của một lớp XsltChainController, chỉ rõ một mảng các tệp bản định kiểu XSLT để áp dụng theo trình tự cho tài liệu XML nguồn. Nó cũng cung cấp cho XsltChainController hai thẻ bài (token) là CDATA_START và CDATA_END. Các thẻ bài này cho phép các bản định kiểu tạo ra các phần CDATA, mà nếu không có chúng thì các bản định kiểu XSLT không thể tạo ra được (rõ hơn về điều này khi bạn tạo ra chính các bản định kiểu XSLT). Cuối cùng, tệp weather.php gọi hàm echoTransformedXml() của XsltChainController với nguồn cấp tin RSS và phản ánh XML kết quả cho đầu ra tiêu chuẩn.

Gọi nguồn cấp tin RSS Thời Tiết của Yahoo từ PHP

Bây giờ bạn có một kịch bản lệnh của trình điều khiển chính, hãy tạo tệp yahoo-weather-rss.php như trong Liệt kê 15.

Liệt kê 15. Tệp yahoo-weather-rss.php
<?php

require_once('readUrl.php');

define ('YAHOO_RSS_FEED', 'http://weather.yahooapis.com/forecastrss');

function readYahooWeatherRss ($zipcode, $units) {

  if ($zipcode == null) {
    throw new Exception ("No zipcode specified");
  }

  if ($units == null) {
    throw new Exception ("No units specified");
  }

  if (! (in_array($units, array('f', 'c')))) {
    throw new Exception ("Invalid units specified (can be 'c' or 'f'): $units");
  }

  return readUrl(YAHOO_RSS_FEED . "?p=$zipcode&u=$units"); 
}

?>

Tệp yahoo-weather-rss.php là khá cơ bản và cung cấp một hàm duy nhất là, readYahooWeatherRss(). Hàm readYahooWeatherRss() đảm bảo các đối số mã vùng bưu điện và các đơn vị đo là chính xác và sau đó trả về các kết quả đọc nguồn cấp tin RSS Thời tiết của Yahoo với các đối số đó. Để có được kết quả của nguồn cấp tin RSS của Yahoo, hãy gọi hàm readUrl() được chỉ rõ trong Liệt kê 16.

Liệt kê 16. Hàm readUrl.php
<?php

function readUrl($url) {
  if (ini_get('allow_url_fopen') == '1') {
    return readUrlWithFopen($url);
  } 
  else if (function_exists('curl_init')) {
    return readUrlWithCurl($url);
  } 
  else {
    throw new Exception ("readUrl: neither fopen url wrapppers nor 
CURL support are enabled.");
  }
}

?>

Tệp readUrl.php cung cấp một chức năng tổng quát chung để đọc các nội dung của một URL, bằng cách sử dụng hoặc fopen hoặc CURL, tùy thuộc vào cái nào có thể làm được trong cấu hình máy chủ hiện tại. Phương thức được ưa thích là sử dụng hàm fopen(). Nếu các trình bao bọc (wrapper) HTTP của fopen không được phép chạy trong bản cài đặt PHP này, điều này được phát hiện bằng cách kiểm tra giá trị cài đặt 'allow_url_fopen' trong tệp ini của PHP, tệp readUrl.php sẽ cố gắng đọc nội dung của URL bằng cách sử dụng CURL. Nếu CURL cũng không được phép chạy, tệp readUrl.php xác minh điều này bằng cách kiểm tra sự tồn tại của hàm 'curl_init’, nó sẽ đưa ra một ngoại lệ vì nó không thể tiếp tục được.

Liệt kê 17 cho thấy hàm readUrlWithFopen() mà hàm readUrl() gọi nếu các trình bao bọc HTTP của hàm fopen() được phép chạy, do đó có thể chuyển một URL cho hàm fopen() thay vì một đường dẫn tệp (filepath) cục bộ và hàm readUrlWithFopen () sẽ đọc URL đó như là một tệp.

Liệt kê 17. Hàm readUrlWithFopen()
function readUrlWithFopen($url) {

  $contents = file_get_contents($url);

  if (! $contents) {
    throw new Exception ("readUrl: Couldn't read url: $url");
  }
    
  return $contents;
}

Hàm readUrlWithFopen() đọc các nội dung của URL bằng cách sử dụng hàm file_get_contents(). Sau đó nó đảm bảo rằng hàm này thực sự đọc một cái gì đó từ URL và đưa ra một ngoại lệ nếu nó không đọc được. Nếu đã đọc được cái gì đó, thì nó trả về các nội dung của URL.

Tùy chọn khác là hàm readUrlWithCurl() trong Liệt kê 18.

Liệt kê 18. Hàm readUrlWithCurl()
function readUrlWithCurl($url) {

  $ch = curl_init();
  try {

   curl_setopt($ch, CURLOPT_URL, $url);

   curl_setopt($ch, CURLOPT_HEADER, 0);

   curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

    $content = curl_exec($ch);
    curl_close($ch); 
    return $content;

  } catch (Exception $e) {
    curl_close($ch); 
    throw new Exception ("Couldn't read url using CURL: $e");
  }
}

Hàm readUrlWithCurl() tạo ra một trình xử lý CURL với hàm curl_init(). Sau đó nó thiết lập URL để gọi, chỉ rõ không trả về các phần đầu HTTP, mà chỉ lấy nội dung của đáp ứng, rồi quy định trả về nội dung thay vì viết trực tiếp nó vào đầu ra chuẩn. Một khi các tùy chọn được thiết lập, nó gọi hàm curl_exec()curl_close() để đọc và sau đó đóng luồng này, trong khi đón bắt bất kỳ trường hợp ngoại lệ nào và đảm bảo đóng luồng CURL, tránh bỏ lại tài nguyên ở trạng thái mở.

Các cơ chế chuyển bản định kiểu XSLT khi sử dụng mô đun XSL trong PHP 5

Một khi kịch bản lệnh này lấy ra các nội dung của nguồn cấp tin RSS Thời tiết của Yahoo, nó có thể chuyển nội dung đó thành một cái gì đó sẵn sàng để sử dụng. Để làm điều này, kịch bản lệnh này đã tạo ra một cá thể của lớp XsltChainController, được giới thiệu trong Liệt kê 19.

Liệt kê 19. Lớp XsltChainController
class XsltChainController {

  private $stylesheets;
  private $cdataStart;
  private $cdataEnd;

  public function __construct ($stylesheets, $cdataStart=null, $cdataEnd=null) {

    $this->stylesheets = $stylesheets;
    $this->cdataStart = $cdataStart;
    $this->cdataEnd = $cdataEnd;

    if ($cdataStart != null && $cdataEnd == null ||
    $cdataEnd != null && $cdataStart == null) {
      throw new Exception ("XsltChainController: if providing cdataStart or cdataEnd, 
must provide both.  Only one provided.");
    }
  }

Lớp XsltChainController quản lý việc áp dụng một dãy bản định kiểu XSLT cho một tài liệu XML nguồn. Hàm tạo của nó nhận đầu vào là một mảng các đường dẫn tệp bản định kiểu và các đối số tùy chọn $cdataStart$cdataEnd. Các đối số này xác định các thẻ bài có thể xuất hiện trong các bản định kiểu để chỉ rõ các phần CDATA bắt đầu và kết thúc ở đâu trong XML kết quả. Điều này giải quyết vấn đề là không thể bao gồm một phần CDATA thực thụ (kiểu như <![CDATA[...stuff...]]) trong đầu ra của một bản định kiểu XSLT nếu bản định kiểu đó dùng để tạo ra phần thân của CDATA thông qua các phép chuyển đổi. Ngay khi bộ xử lý XSLT thấy phần CDATA, nó thoát khỏi các nội dung và vì thế bỏ qua các phần tử XSLT trong CDATA nhằm mục đích tạo ra nội dung chuyển đổi. Giải pháp cho vấn đề này là chèn thay thế một thẻ bài vào bản định kiểu XSLT ở nơi phần CDATA bắt đầu và một thẻ bài khác ở nơi nó kết thúc và bắt bộ xử lý kèm theo thay thế chúng bằng các thẻ bắt đầu và kết thúc CDATA thực sự sau khi kết thúc xử lý XSLT.

Hàm tạo này chỉ cấu hình bộ điều khiển. Tiếp theo, thêm một hàm echoTransformedXml() để thực hiện công việc, như trong Liệt kê 20.

Liệt kê 20. Hàm echoTransformedXml()
public function echoTransformedXml ($xml, $stripCdata=false) {

    if ($stripCdata) {
      $xml = $this->stripCdata($xml);
    }

    $transformedDom = $this->applyStylesheets ($xml);

    echo ($this->cdataStart 
      ? $this->replaceCdataMarkers ($transformedDom->saveXML())
      : $transformedDom->saveXML());
  }

protected function stripCdata($xml) {
    return str_ireplace (array('<![CDATA[', ']]>'), 
             array ('', ''), 
             $xml);
  }

  protected function replaceCdataMarkers ($xml) {
    return str_ireplace (array ($this->cdataStart, $this->cdataEnd),
             array ('<![CDATA[', ']]>'), 
             $xml);
  }

Hàm echoTransformedXml() nhận đầu vào là XML để chuyển đổi dưới dạng một chuỗi ký tự và một cờ quy định xem nó có loại bỏ bất kỳ các thẻ CDATA nào trong tài liệu nguồn hay không. Lý do đối với việc này là tài liệu nguồn có thể chứa một phần CDATA chứa XHTML mà bản định kiểu cần truy cập. Trong trường hợp của nguồn cấp tin RSS của Yahoo, phần tử <description> của phần tử <item> chính là một đoạn CDATA chứa một bản HTML tóm tắt thời tiết, trong đó có chứa biểu tượng hữu ích về các điều kiện thời tiết hiện tại. Bản định kiểu không thể sử dụng biểu tượng này nếu nó vẫn còn bị mắc kẹt bên trong một phần tử CDATA. Vì vậy, điều đầu tiên mà hàm này làm là loại bỏ bất kỳ các dấu <!CDATA[[ và ]] nào ra khỏi tài liệu nguồn trước khi nó áp dụng chuỗi các bản định kiểu bằng cách gọi hàm stripCdata(). Tương tự, nếu hàm tạo đã được cung cấp các thẻ bài $cdataStart$cdataEnd, thì hàm echoTransformedXml() sẽ thay thế chúng bằng các dấu bắt đầu và kết thúc CDATA thực thụ sau khi xử lý các bản định kiểu, cho phép các bản định kiểu tạo ra các phần CDATA riêng của mình. Ở giữa hai bước xử lý CDATA là cuộc gọi đến applyStylesheets, dùng để chuyển đổi XML như trong Liệt kê 21.

Liệt kê 21. XsltChainController.applyStylesheets()
protected function applyStylesheets ($xml) {
    $xmlDOM = DOMDocument::loadXML ($xml);
    foreach ($this->stylesheets as $stylesheet) {
      $xmlDOM = $this->applyStylesheet ($xmlDOM, $stylesheet);
    }
    return $xmlDOM;
  }

Đầu tiên, hàm applyStylesheets() tạo một đối tượng DOMDocument từ chuỗi XML. Sau đó, nó tạo vòng lặp qua hết mảng của các đường dẫn tệp của bản định kiểu được cung cấp, gọi hàm applyStylesheet() với từng bản định kiểu, chuyển cho nó hoặc XML nguồn hoặc kết quả của cuộc gọi hàm applyStylesheet() trước đó, cho đến khi tất cả các bản định kiểu đã được áp dụng theo thứ tự. Liệt kê 22 cho thấy hàm applyStylesheet(), áp dụng một bản định kiểu XSLT duy nhất cho đối tượng DOMDocument.

Liệt kê 22. Hàm XsltChainController.applyStylesheet()
protected function applyStylesheet ($xmlDOM, $xslFile) {

    $processor = new XSLTProcessor();    

    $xslDOM = DOMDocument::load ($xslFile);
    
    $processor->importStyleSheet($xslDOM);
    
    return $processor->transformToDoc($xmlDOM);
  }

Hàm applyStylesheet() nhận đầu vào là DOMDocument chứa XML để chuyển đổi và đường dẫn tệp của bản định kiểu XSLT để áp dụng cho nó. Nó sử dụng mô đun XSL trong PHP 5 để thực hiện phép chuyển đổi. Hàm applyStylesheet() tạo một XSLTProcessor, tạo một DOMDocument từ đường dẫn tệp của bản định kiểu XSLT, nhập khẩu DOMDocument của bản định kiểu vào XSLTProcessor, và gọi phương thức transformToDoc() của nó, chuyển đổi DOMDocument nguồn thành một đối tượng DOMDocument đã chuyển đổi, mà nó sẽ trả về.


Tạo các bản định kiểu XSLT

Bây giờ bạn có các cơ cấu sẵn sàng áp dụng các bản định kiểu XSLT cho các tài liệu XML và bạn có thể tạo ra chính các bản định kiểu đó để biến RSS của Yahoo thành KML cho Google Mapplet. Bạn sẽ áp dụng hai bản định kiểu theo trình tự cho RSS của Yahoo. Bản định kiểu đầu tiên chuyển đổi RSS của Yahoo thành một cấu trúc dữ liệu dễ quản lý hơn và bản định kiểu thứ hai chuyển đổi cấu trúc dữ liệu đơn giản hơn đó thành KML cuối cùng.

Sử dụng XSLT để đơn giản hóa cấu trúc dữ liệu

Như bạn đã thấy trong Liệt kê 10, nguồn cấp tin RSS của Yahoo có chứa nhiều thông tin và cấu trúc hơi phức tạp so với các mục đích của bạn. Ngoài ra, vì nó đến từ một tổ chức bên ngoài, nghĩa là có thể thay đổi cấu trúc dữ liệu bất cứ lúc nào, nên trước tiên việc chuyển nó thành một cấu trúc dữ liệu cục bộ đơn giản hơn sẽ bảo vệ bạn khỏi những thay đổi như vậy. Bạn có thể thiết kế KML cuối cùng mà không để ý đến bất kỳ cấu trúc dữ liệu nào của Yahoo, miễn là bạn có một bản định kiểu XSLT trung gian có thể chuyển từ định dạng của Yahoo sang định dạng cục bộ. Hãy bắt đầu tạo bản định kiểu trung gian này, đó là yahoo-rss-to-simple-weather.xsl, như trong Liệt kê 23.

Liệt kê 23. yahoo-rss-to-simple-weather.xsl
<xsl:stylesheet version="1.0"
        xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
        xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#"
        xmlns:yweather="http://weather.yahooapis.com/ns/rss/1.0">

</xsl:stylesheet>

Bản định kiểu trung gian này tạo ra bộ khung của bản định kiểu, quy định vùng tên XML cho chính XSLT đó với dòng xmlns:xsl, một vùng tên geo xuất hiện trong nguồn cấp tin RSS của Yahoo và một vùng tên yweather cũng xuất hiện trong nguồn cấp tin RSS. Nếu không định nghĩa các vùng tên ở đây, bản định kiểu sẽ không nhận ra các phần tử trong các vùng tên đó.

Tiếp theo, thêm một khuôn mẫu để khớp với phần tử <channel> của nguồn cấp tin RSS như trong Liệt kê 24.

Liệt kê 24. /rss/channel phù hợp của khuôn mẫu XSLT
<xsl:template match="/rss/channel">
    <weather>

      <data-source>
    <link><xsl:value-of select="link"/></link>
    <icon><xsl:value-of select="image/url"/></icon>
      </data-source>     

      <xsl:apply-templates select="item/title"/>

      <xsl:apply-templates mode="coordinates"
               select="item"/>

      <xsl:apply-templates mode="condition-icon"
               select="item/description/img"/>

      <xsl:apply-templates mode="units"
               select="*[local-name()='units']"/>

      <xsl:apply-templates mode="condition"
               select="item/*[local-name()='condition']"/>

      <xsl:apply-templates mode="wind" 
               select="*[local-name()='wind']"/>

      <xsl:apply-templates mode="atmosphere" 
               select="*[local-name()='atmosphere']"/>

      <xsl:apply-templates mode="astronomy" 
               select="*[local-name()='astronomy']"/>

    </weather>
  </xsl:template>

Khuôn mẫu này khớp với phần tử /rss/channel và tạo ra một phần tử <weather> mức cao nhất trong tài liệu kết quả. Nó tạo một phần tử <data-source> chỉ rõ nguồn thông tin. Phần tử <data-source> chứa một phần tử <link> chỉ rõ URL của nguồn, có giá trị lấy từ phần tử /rss/channel/link của tài liệu nguồn (một liên kết đến Yahoo Weather) và một phần tử <icon>, lấy giá trị của nó từ phần tử /rss/channel/image/url, chứa một biểu tượng cho Yahoo Weather. Sau đó, nó áp dụng các khuôn mẫu cho một số XPath trong tài liệu nguồn — đầu tiên là phần tử /rss/channel/item/title và sau đó cho một số các phần tử dữ liệu khác.

Điều khác biệt trong việc áp dụng các khuôn mẫu khác đó là ở chỗ tất cả chúng đều quy định một thuộc tính mode (chế độ). Phần tử <xsl:apply-templates> có một thuộc tính select chỉ rõ bằng biểu thức XPath tới các nút để chuyển cho khuôn mẫu như các đối số và một thuộc tính mode tùy chọn. Thuộc tính mode cho phép bạn thay đổi cách bạn nghĩ về các khuôn mẫu XSLT. Thay vì cung cấp một thuộc tính match cụ thể cho các khuôn mẫu để quy định chúng so khớp cái gì, các chế độ (modes) cho phép bạn xử lý chúng giống như các cuộc gọi hàm, bởi vì một thuộc tính mode sẽ so khớp việc áp dụng khuôn mẫu chặt chẽ hơn là khi áp dụng không có thuộc tính mode. Để giữ cho các đặc tả khuôn mẫu đơn giản hơn, ở đây mỗi cuộc gọi đến phần tử <xsl:apply-templates> đều chỉ rõ cả hai, các nút để chuyển cho khuôn mẫu và thuộc tính mode. Nếu sau này từng khuôn mẫu trong bản định kiểu được cung cấp thuộc tính mode riêng của mình, thì không cần phải chỉ rõ nó cần so khớp với cái gì — nó có thể so khớp với ký tự hoa thị (*). Ví dụ, Liệt kê 25 cho thấy khuôn mẫu cho chế độ các tọa độ (coordinates).

Liệt kê 25. Khuôn mẫu cho chế độ "coordinates"
<xsl:template mode="coordinates" match="*">
    <coordinates>
      <latitude><xsl:value-of select="geo:lat"/></latitude>
      <longitude><xsl:value-of select="geo:long"/></longitude>
    </coordinates>      
  </xsl:template>

Do khuôn mẫu này chỉ rõ một chế độ và so khớp với dấu hoa thị (*), có nghĩa là khớp với bất cứ nút nào, nếu bạn gọi phần tử <xsl:apply-templates> với chế độ của khuôn mẫu này. Điều đó biến khuôn mẫu này thành một cuộc gọi hàm truyền thống hơn và loại bỏ nhu cầu xác định lại biểu thức XPath mà khuôn mẫu áp dụng. Bây giờ trách nhiệm là của bên gọi khuôn mẫu, phải gọi nó với biểu thức XPath đúng (mà dù sao nó cũng phải làm). Kỹ thuật này làm đơn giản hoá đặc tả khuôn mẫu và biến các khuôn mẫu thành các hàm. Nó cũng cho phép bạn tạo hai khuôn mẫu được dùng để tác động tới cùng một kiểu nút, nhưng lại tạo ra các kết quả khác nhau. Ví dụ, khuôn mẫu coordinates (các tọa độ) ở đây được gọi với phần tử <item> và tạo ra một phần tử <coordinates> từ các phần tử <geo:lat> và <geo:long> của phần tử <item>. Bạn cũng có thể định nghĩa một khuôn mẫu khác được gọi với phần tử <item> nhưng trích xuất thông tin khác từ nó.

Xem lại Liệt kê 24 và tìm khuôn mẫu /rss/channel, bạn có thể thấy tại sao cần phải loại bỏ các thẻ đánh dấu phần tử CDATA ra khỏi tài liệu. Một trong các áp dụng khuôn mẫu là <xsl:apply-templates mode="condition-icon" select="item/description/img"/>. Nó gọi khuôn mẫu condition-icon (khuôn mẫu với chế độ đó) với thẻ <img> của phần tử <description> trên nguồn cấp tin RSS, mà ban đầu đã bị mắc kẹt bên trong một phần tử CDATA vì nó được dự định xuất ra đúng nguyên dạng. Bằng cách loại bỏ các dấu CDATA bây giờ khuôn mẫu này có thể đạt tới phần tử <img> giống như bất kỳ phần tử XML khác nào trong tài liệu nguồn.

Một mục khác đáng chú ý trong Liệt kê 24 là cuộc gọi khuôn mẫu <xsl:apply-templates mode="units" select="*[local-name()='units']"/>. Cuộc gọi này gọi khuôn mẫu có chế độ units, chuyển giao tất cả các nút có tên địa phương, nghĩa là tên không có tiền tố vùng tên của chúng, là units. Đây là một kỹ thuật để chọn các nút từ các vùng tên khác nhau. Trong nguôn cấp tin RSS của Yahoo, phần tử units (các đơn vị đo lường) thực tế là một phần tử <yweather:units>. Hàm XPath local-name() trả về tên của phần tử không có vùng tên, vì vậy bạn có thể xử lý nó đơn giản hơn. Kỹ thuật này được lặp lại cho các phần tử condition (điều kiện), atmosphere (áp suất) và astronomy (thiên văn học) trong vùng tên yweather.

Các khuôn mẫu cho tất cả chế độ các đơn vị đo lường, điều kiện, thiên văn học và áp suất đều giống nhau, tạo ra một phần tử trong tài liệu kết quả và sao chép hết các thuộc tính của phần tử nguồn cho nó, như trong khuôn mẫu cho chế độ các đơn vị đo lường (xem Liệt kê 26).

Liệt kê 26. Khuôn mẫu cho chế độ các đơn vị đo lường
<xsl:template mode="units" match="*">
    <units>
      <xsl:copy-of select="@*"/>
    </units>
  </xsl:template>

Khuôn mẫu này được gọi với phần tử <yweather:units> tạo ra một phần tử <units> trong tài liệu kết quả có chứa tất cả các thuộc tính của phần tử nguồn (xem mã nguồn kèm theo để biết các định nghĩa khuôn mẫu tương tự khác).

Chuyển cấu trúc dữ liệu đơn giản thành một lớp phủ KML

Bản định kiểu đầu tiên đã chuyển tài liệu RSS của Yahoo thành một cấu trúc dữ liệu dễ xử lý hơn mà bạn có quyền kiểm soát. Sau khi được chuyển sang định dạng đó, XML có thể được chuyển thành một tài liệu KML. Để làm điều này, hãy tạo một bản định kiểu có tên là simple-weather-to-kml.xsl, như trong Liệt kê 27.

Liệt kê 27. Bản định kiểu simple-weather-to-kml.xsl
<xsl:stylesheet version="1.0"
        xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <xsl:template match="/weather">
    <kml xmlns="http://earth.google.com/kml/2.2">
      <Document>
    <name><xsl:value-of  select="title"/></name>
    <description>Local Weather from Yahoo!</description>
    <Placemark>
      <name>Local Weather</name>
      <description>
        CDATA_START
        <xsl:apply-templates mode="placemark-description"
                 select="."/>
        CDATA_END
      </description>
      <xsl:apply-templates select="coordinates"/>
    </Placemark>
      </Document>
    </kml>
  </xsl:template>

</xsl:stylesheet>

Bản định kiểu này định nghĩa khuôn mẫu khớp với phần tử gốc <weather>, tạo ra một phần tử <kml> gốc để thay thế. KML là một nhánh ngôn ngữ XML đặc tả thông tin địa lý và cũng có thể đặc tả thông tin lớp phủ đồ họa, ví dụ như các điểm, các dòng và văn bản hoặc HTML để hiển thị trên bản đồ. Bạn sử dụng nó ở đây để tạo ra một lớp phủ thông tin thời tiết để hiển thị trong trang kết quả Google Maps. Một tài liệu KML chứa một phần tử <Document> (Tài liệu), trong đó có một phần tử <name>, <description> (Tài liệu) và trong trường hợp này, có một hoặc nhiều phần tử <Placemark> (dấu vị trí) , mỗi phần tử đó đều trở thành một điểm đánh dấu có thể nhấn chuột trên bản đồ. Tài liệu này cũng có thể chứa các đường để phủ trên bản đồ, để vẽ các đa giác tô kín hoặc không tô.

Ở đây bạn thấy các thẻ bài CDATA_START và CDATA_END mà bạn đã quy định trong cuộc gọi đến hàm tạo của lớp XsltChainController. Chúng biểu thị sự bắt đầu và kết thúc của một phần CDATA trong tài liệu kết quả, nhưng bản định kiểu này không thể bao gồm chính các dấu CDATA thực thụ hoặc bộ xử lý XSLT sẽ bỏ qua phần tử <xsl:apply-templates> bên trong phần CDATA. Phần CDATA chứa nội dung HTML sẽ hiển thị trong quả bóng nổi lên của Placemark, được tạo ra trong khuôn mẫu có chế độ placemark-description trong Liệt kê 28.

Liệt kê 28. Khuôn mẫu "placemark-description"
<xsl:template mode="placemark-description" match="*">
    <div>
      <div>
    <xsl:value-of select="condition/@text"/>, 
    <xsl:value-of select="condition/@temp"/> 
<xsl:value-of select="units/@temperature"/>
      </div>
      <div>
    Wind chill: <xsl:value-of select="wind/@chill"/> 
<xsl:value-of select="units/@temperature"/> <br/>
    Wind speed: 
    <xsl:value-of select="wind/@speed"/> 
    <xsl:value-of select="units/@speed"/>
      </div>
      <div>
    Humidity: <xsl:value-of select="atmosphere/@humidity"/>%
      </div>
      <div>
    Sunrise: <xsl:value-of select="astronomy/@sunrise"/> <br/>
    Sunset: <xsl:value-of select="astronomy/@sunset"/>
      </div>
    </div>
  </xsl:template>

Khuôn mẫu này tạo HTML để hiển thị trong quả bóng nổi lên của các điểm đánh dấu trên bản đồ, liệt kê các khía cạnh khác nhau của thời tiết địa phương. Lưu ý cách truy cập một thuộc tính, như trong <xsl:value-of select="condition/@text"/>, nó xuất ra giá trị của thuộc tính text của phần tử con <condition>. Khuôn mẫu này này cũng sử dụng phần tử <units>, bao gồm các đơn vị đo cùng với các giá trị của chúng.

Phần tử <weather> gốc trong Liệt kê 27 cũng áp dụng một khuôn mẫu cho phần tử <coordinates> trong tài liệu nguồn (<xsl:apply-templates select="coordinates"/>) để tạo ra các tọa độ của dấu vị trí, như trong Liệt kê 29.

Liệt kê 29. Khuôn mẫu so khớp với phần tử <coordinates>
<xsl:template match="coordinates">
    <Point>
      <coordinates>
    <xsl:value-of select="longitude"/>,<xsl:value-of select="latitude"/> 
      </coordinates>
    </Point>
  </xsl:template>

Khuôn mẫu này tạo ra một phần tử <Point> trong tài liệu kết quả và chỉ rõ cặp kinh độ và vĩ độ của dấu vị trí — vị trí của nó trên Google Map.

Để xem kết quả của việc áp dụng các bản định kiểu, trong trình duyệt của bạn hãy chuyển đến http://YOUR-SERVER/weather.php?zipcode=10010&units=f và xem mã nguồn của trang này, sẽ giống như Liệt kê 30.

Liệt kê 30. Lớp phủ KML cuối cùng
<?xml version="1.0"?>
<kml xmlns="http://earth.google.com/kml/2.2">
  <Document>
    <name>Conditions for Maspeth, NY at 12:18 am EDT</name>
    <description>Local Weather from Yahoo!</description>
    <Placemark>
      <name>Local Weather</name>
      <description><![CDATA[
            <div>Mostly Cloudy,  57F</div>
            <div>
      Wind chill: 57F<br/>
      Wind speed: 7mph
            </div>
            <div>
      Humidity: 88%
            </div>
            <div>
      Sunrise: 6:57 am<br/>
      Sunset: 6:30 pm
            </div>
        ]]></description>
           <Point>
             <coordinates>-73.91,40.72</coordinates>
           </Point>
     </Placemark>
  </Document>
</kml>

Lưu ý rằng các tọa độ ở đây có độ chính xác thấp hơn nhiều so với các tọa độ có trong Google Maps, có nghĩa là dấu vị trí thực tế có thể nằm ngoài cửa sổ có thể nhìn thấy trong bản đồ. Để khắc phục điều này, chỉ cần phóng to bản đồ lên một chút để đảm bảo có thể nhìn thấy được dấu vị trí.

KML hoạt động

Bây giờ toàn bộ chuỗi XSLT của bạn đã làm việc, bạn có thể thử nó trong Google Mapplet. Nhấn Reload để tải lại mapplet của bạn từ bộ nhớ sẵn của Google, chọn nút tròn Server-side XSLT và hoặc di chuyển hoặc phóng to bản đồ. Dấu vị trí sẽ xuất hiện trên bản đồ. Nhấn vào nó để lộ ra báo cáo thời tiết HTML được tạo với các bản dịch XSLT, như trong Hình 8.

Hình 8. Quả bóng dấu vị trí thời tiết địa phương đang hiển thị trong Google Maps
Quả bóng dấu vị trí thời tiết địa phương đang hiển thị trong Google Maps

Tổng hợp

Tóm tắt

Trong hướng dẫn này, bạn đã thấy cách tạo ra một Google Mapplet và cách sử dụng API của Google Mapplet để cố gắng lắng nghe các sự kiện bản đồ và tìm nạp nội dung XML từ xa. Bạn cũng đã sử dụng một dịch vụ của trình mã hóa địa lý đảo ngược để chuyển một cặp vĩ độ/kinh độ thành mã vùng bưu điện, khi sử dụng nguồn cấp tin RSS Thời tiết của Yahoo và đã sử dụng PHP để tách ra các phần khác nhau của một đặc tả thành phần của Google Mapplet với mô đun XSL trong PHP 5 và XSLT. Điều này đã cho phép bạn vừa tách riêng tầng trình bày của bạn khỏi nguồn dữ liệu (chuyển từ cấu trúc dữ liệu của Yahoo sang một cấu trúc dữ liệu cục bộ) và vừa chuyển thành KML dữ liệu thời tiết để phủ trên Google Maps.

Bây giờ bạn có thể tạo các ý tưởng Google Mapplet riêng của mình, hãy đọc thêm tài liệu API của Google Mapplet và có những phút vui vẻ khi bạn chơi và học.


Tải về

Mô tảTênKích thước
Tutorial source codemapplet-tutorial-source.tar80KB

Tài nguyên

Học tập

  • API của Google Mapplets: Truy cập vào trang chủ để biết thông tin về các ứng dụng nhỏ chạy trong Google Maps và thêm các tính năng mới hoặc phủ dữ liệu của bạn trên Google Maps.
  • API của Google Maps: Nhúng Google Maps trong các trang web riêng của bạn với JavaScript khi bạn tạo các ứng dụng bản đồ vững chãi để xử lý các bản đồ và thêm nội dung vào bản đồ thông qua một loạt các dịch vụ.
  • Hướng dẫn KML: KML là một định dạng tệp được dùng để hiển thị dữ liệu địa lý trong một trình duyệt Earth ví dụ như Google Earth, Google Maps và Google Maps cho điện thoại di động. Hãy bắt đầu từ một vị trí tuyệt vời với các hướng dẫn của Google.
  • Đăng ký API của Google Maps: Hãy đăng ký để nhận một khóa API của Google Maps.
  • Giới thiệu dịch vụ mã hoá địa lý của Google (Jason Gilmore, developer.com): Tìm hiểu về bổ sung mới nhất cho API của Google Maps, cho phép bạn tạo bản đồ các địa điểm mà không cần sử dụng các giải pháp của bên thứ ba để chuyển đổi các địa chỉ gửi thư thành các tọa độ tương ứng của chúng.
  • Tham khảo API của Google Maps: Tìm các mã lỗi của đáp ứng của dịch vụ Trình mã hóa địa lý.
  • Dùng các ứng dụng PHP trên Máy chủ HTTP của IBM (Graham Charters et al., developerWorks, 03.2005): Khám phá các khác biệt giữa máy chủ Web Apache mã nguồn mở và phiên bản của IBM và xem các trình diễn của phiên bản IBM đang chạy ứng dụng PHP nổi tiếng.
  • Cài đặt Apache 2 và PHP (Dan Anderson): Đọc một bài báo mô tả cách làm thế nào để Apache 2 và PHP 4.x (bạn cũng có thể sử dụng PHP 5.x) làm việc cùng nhau trên Linux™.
  • Kết nối các ứng dụng PHP với Apache Derby (Moira Casey, developerWorks, 09.2004): Trong bài này, hãy học cách cài đặt và cấu hình PHP trên Windows (một số bước có thể áp dụng cho Linux).
  • Học PHP, Phần 1 (Tyler Anderson and Nicholas Chase, developerWorks, 06.2005): Học các khái niệm cơ bản về PHP.
  • Học PHP, Phần 2 (Tyler Anderson and Nicholas Chase, developerWorks, 06.2005): Học cách tải lên các tệp đến các địa điểm có khả năng truy cập không dùng web, khi sử dụng DOM và SAX.
  • Học PHP, Phần 3 (Tyler Anderson and Nicholas Chase, developerWorks, 07.2005): Hoàn thành Phần 1 và 2 của biểu mẫu ứng dụng luồng công việc. Tìm hiểu về xác thực HTTP, các tệp luồng và cách tạo các đối tượng và các trường hợp ngoại lệ.
  • Hướng dẫn PHP: Tìm hiểu thêm về các đối tượng dữ liệu PHP và các khả năng của chúng.
  • Hướng dẫn PHP trực tuyến: Khám phá thông tin tham khảo về các API SOAP trong PHP 5.
  • Một giới thiệu (lại) về JavaScript (Simon Willison, ETech, 03.2006): Đào sâu thêm kiến thức của bạn về JavaScript, một ngôn ngữ đơn giản nhưng mạnh mẽ.
  • Hướng dẫn: Giới thiệu về JavaScriptGiới thiệu về JavaScript: Điểm qua các tiềm năng để có các trang Web tương tác nhiều hơn với các hướng dẫn này từ w3schools.com.
  • Chứng chỉ XML của IBM: Tìm hiểu cách bạn có thể trở thành một nhà phát triển có chứng chỉ IBM về XML và các công nghệ liên quan.
  • Thư viện kỹ thuật XML: Xem Vùng XML của developerWorks với một loạt các bài viết và lời khuyên kỹ thuật, các hướng dẫn, các tiêu chuẩn và các Sách Đỏ của IBM.
  • Các sự kiện kỹ thuật và webcast của developerWorks: Theo sát với công nghệ trong các phiên này.
  • Cửa hàng sách công nghệ: Duyệt các sách về các chủ đề kỹ thuật này và khác.
  • developerWorks podcast: Nghe các cuộc phỏng vấn thú vị và các thảo luận dành cho các nhà phát triển phần mềm.

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

  • Phần mềm dùng thử của IBM để đánh giá sản phẩm: Xây dựng dự án tiếp theo của bạn với phần mềm dùng thử có sẵn để tải về trực tiếp từ developerWorks, bao gồm các công cụ phát triển ứng dụng và các sản phẩm phần mềm trung gian từ DB2®, Lotus®, Rational®, Tivoli® và WebSphere®.

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ở
ArticleID=790468
ArticleTitle=Tùy chỉnh một trang kết quả Google Maps với Google Mapplets
publish-date=02012012