Home » Blogs » Anonymous's blog

Công Nghệ Thư Viện YUI Dùng Để Phát Triển Ứng Dụng Web

Submitted by Anonymous (not verified) on Thu, 06/25/2009 - 13:10

Giới Thiệu YUI - Công nghệ Thư Viện YUI (YUI library), do Yahoo khởi sướng từ năm 2005, là một web framework giúp phát triển ứng dụng Web khá hay và nhanh chóng. Công nghệ YUI, được xây dựng trên nền tảng JavaScripts, giúp thiết kế các trang web tĩnh và động. Điểm cốt yếu của công nghệ này giúp các trang web chạy tương thích trên bất kỳ trình duyệt nào, và chỉ dành cho những ai thích lập trình với JavaScripts. 

Cài Đặt YUI

Để dùng công nghệ YUI, bạn cần phải cài thư viện YUI. Thư viện này chỉ có một tập tin đã bị nén mà bạn có thể tải xuống từ http://developer.yahoo.com/yui. Vào thời điểm viết bài này, thì phiên bản mới nhất là yui_2.7.0b.zip. Sau đó bạn bung tập tin nén này vào một mục thư bất kỳ trên máy bạn.  Người viết giả sử bạn bung tập tin nén này vào thư mục có tên là: c:\ timhieuyui. Sau khi bung xong, bạn sẽ thấy thư mục yui. Trong thư mục này có nhiều thư mục khác như: as-docs, assets, build, docs, examples, releasenotes, và tests. 

 
Thí Dụ
 
Sau đây là phần trình bày một ví dụ ngắn về hiển thị Calendar (cuốn lịch) trên trang web.  Kết quả của nó là khi bạn mở trang tập tin html, bạn sẽ thấy hình một icon - Hình 1. Sau đó bạn bấm vào nút icon, thì cuốn lich Calendar sẽ hiển thị như 2 hình dưới đây:

Hình 1 - Người dùng bấm vào nút icon nhỏ bên tay phải của ô vuông.
 
 
Hình 2 - Cuốn lịch Calendar được hiển thị
 
Đầu tiên ta tạo ra một tập tin có tên lich.html và để cho đơn giản ta để tập tin này nằm ở ngoài thư mục yui/.   Sau đó bạn copy đoạn mã dưói đây vào tập tin lich.html.
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
 <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Thí Dụ Cách Hiển Thị Lịch Dùng Thư Viện YUI</title>
    <script type="text/javascript" src="yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script type="text/javascript" src="yui/build/calendar/calendar-min.js"></script>
    <script type="text/javascript" src="yui/build/calendar/calendar.js"></script>   
    <link rel="stylesheet" type="text/css" href="yui/build/calendar/assets/skins/sam/calendar.css">
 
 </head>
 <body class="yui-skin-sam">
    <div>
      <label>Please enter your date of birth:</label>
      <input type="text" name="dobfield" id="dobfield">
      <img id="calico" src="cal.png" alt="Open the Calendar control">
    </div>
 
   <div id="mycal"></div>
    <script type="text/javascript">
      //create the namespace object for this example
      YAHOO.namespace("yuibook.calendar");
     
      //define the lauchCal function which creates the calendar
      YAHOO.yuibook.calendar.launchCal = function() {
     
       var myCal = new YAHOO.widget.Calendar("mycal");
       
        //configure the calendar to begin on Monday
        myCal.cfg.setProperty("start_weekday", "1");
 
        //draw the calendar on screen
        myCal.render();
       
        //hide it again straight away
        myCal.hide();
       
        //define the showCal function which shows the calendar
        var showCal = function() {
 
          //show the calendar
          myCal.show();
        }//end of showCal
 
        //attach listener for click event on calendar icon
        YAHOO.util.Event.addListener("calico", "click", showCal);
 
      }//end of launchCal
     
      //create calendar on page load
      YAHOO.util.Event.onDOMReady(YAHOO.yuibook.calendar.launchCal);
    </script>
 
 </body>
</html>
 
Giải Thích Các Đoạn Mã
 
  • Bạn đọc thấy 4 hàng được đánh dấu mầu vàng, cho biết mỗi tập tin html luôn tham chiếu đến thư mục YUI. Chú ý tập tin lich.html này phải đặt nằm ngoài thư mục yui. Nếu tập tin lich.html mà nằm ở thư mục khác thì bạn cần phải thay đổi đường dẫn (yui/build/...).

 

  •   Các hàng mầu xanh nhạt là để tạo ra các trường trống. Không dùng trong bài này. Và sẽ thảo luận trong bài kế tiếp về cách hiển thị ngày/tháng/năm sau khi người dùng gõ trên cuốn lịch. Bạn cần phải có một tập tin dạng hình ảnh cal.png trên máy của bạn. (Bạn có thể lấy bất kỳ hình nhỏ nào cũng được).

 

  • Các hàng còn lại là dùng để hiển thị Calendar.  Cú pháp <div id="mycal"></div> là chỗ dùng để Calendar được hiển thị và được đặt tên là "mycal".  Cú pháp YAHOO.namespace("yuibook.calendar"); với mục đích để tạo ra một namespace dùng để chứa đối tượng Calendar.  Cú pháp var myCal = new YAHOO.widget.Calendar("mycal"); tạo một biến số có tên myCal để gán đối tượng "mycal" vào biến số này.  Cú pháp myCal.cfg.setProperty("start_weekday", "1"); dùng để gán thuộc tính cho ngày trong tuần. Cú pháp myCal.render(); dùng để hiển thị Calendar trên trang lich.html. Nếu không có cú pháp này, thì lịch Calendar sẽ không hiển thị.  Cú pháp myCal.hide(); dùng không hiển thị Calendar khi tập tin mới mở (vì khi người dùng vào trang web, thì đầu tiên là Calendar không hiển thị (theo giả thiết). Sau đó nếu người dùng bấm vào icon, thì lịch calendar mới hiển thị).  Phương thức có tên showCal dùng để kích hoạt thuộc tính của biến số myCal qua phương thức show().  Cú pháp YAHOO.util.Event.addListener("calico", "click", showCal); dùng để bẫy mỗi khi người dùng kích hoạt hay bấm vào icon, thì Calendar bị kích hoạt và được hiển thị.  Cú pháp này bắt buộc phải có vì nếu không có nó, người dùng có bấm nút icon hoài thì Calendar cũng không hiển thị.  Cú pháp sau cùng YAHOO.util.Event.onDOMReady(YAHOO.yuibook.calendar.launchCal); dùng để hình thành đối tượng Calendar và đẩy nó lên trang html.
  •  

Phần giải thích chỉ là tương đối. Nó hơi khó cho bạn đọc nào chưa biết YUI nhưng làm thêm một số ví dụ khác bạn sẽ thấy việc viết chương trình trở nên dễ vì lúc đó bạn chỉ cần copy/paste là xong. Và đây chỉ là tầng làm trang Web mà chưa có tương tác đến kho dữ liệu (database). Bạn nên tìm đọc thêm một số ví dụ từ YUI cho các phần Treeview, tab, manager connection (tương tác với database), ... từ trang web http://developer.yahoo.com/yui.

Chạy Thử

Sau khi bạn copy/paste đoạn mã ở trên vào tập tin lich.html trên máy bạn, bạn thử chạy nó bằng cách nhấp đôi hoặc mở tập tin lich.html bằng trình duyệt Intenet Explorer hoặc Firefox hoặc trình tương thích khác. Kết quả sẽ được hiển thị như chỉ trong hình 1 và hình 2 mà người viết đã nói ở trên.

Kết Luận

Mặc dù YUI mới ra đời nhưng tính năng của nó có nhiều điểm ưu việt: YUI là một framework dựa trên nền tảng JavaScripts, do đó, nó rất tương thích cho mọi Trình Duyệt và rất dễ bảo quản nhất là phương diện gỡ rối (debug).  YUI giúp tạo ra bất kỳ các trang web và hoà hợp với mọi ngôn ngữ như Java, PHP, Dot.net, vân vân. Người lập trình viên có thể dùng bất kỳ văn bản (editor) hay công cụ tích hợp ide nào để viết ứng dụng Web bằng YUI cũng được. Thường thì người ta hay dùng Eclipse, một công cụ tích hợp chuộng nhất hiện nay vì nó thuộc mã nguồn mở và có rất nhiều plugs-in ban phát miễn phí.

Phương Tân Biên

(Ngày 25 tháng 6 năm 2009)