測試 YUI (II)

有了這個概念之後，我們一步一步解釋 YUI Button Control 的用法：

• 首先，我們還是需要選擇適當的外部 Javascript 檔，經由 YUI Dependency Configurator 的幫助，我們選擇"Connection Manager"以及 "Button Control"，由此得到的設定資訊如下：

  <!-- Combo-handled YUI CSS files: --> 
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.7.0/build/button/assets/skins/sam/button.css"> 
  <!-- Combo-handled YUI JS files: --> 
  <script type="text/javascript" src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.js&2.7.0/build/element/element-min.js&2.7.0/build/button/button-min.js&2.7.0/build/connection/connection-min.js"></script> 
  

• 再來，網頁的 HTML 元件內容如下：

  <form name="myform" class="yui-skin-sam">
  姓名：<input type="text" id="name"></input>
  <input type="button" id="yuibut" value="確定"></input>
  </form>
  

  跟第一個範例比較，這一次有三個主要差異：第一、如果希望使用 YUI 的 介面（或稱為 skin 效果），我們必須在 <form> 加上 class="yui-skin-sam"；第二、由於 YUI 使用 DOM 的概念來 確認取代的對象，因此 button 的設定必須加上 id="yuibut"，其中 yuibut 只是一個唯一的代碼，你可以選擇其他的名稱；第三、前一個範例中， 我們在 button 的設定中，有 onClick="callRemote();"，但是因為之前的 概念說明，在這裡我們不需要做任何設定。

• 網頁的 HTML 元件定義完成後，我們需要加入 YUI Button Control 的 程式碼。在 YUI 中，Button 物件由 YAHOO.widget.Button() 代表；由於 Button 物件即將取代 id 為 yuibut 的按鈕，因此我們利用如下的程式碼來 產生一個 Button 物件，而這個 Button 物件的變數名稱為 oButton。

  var oButton = new YAHOO.widget.Button("yuibut");
  

  除了產生 Button 物件，我們還需要明確的定義這個 Button 物件在什麼時候 取代 HTML 的按鈕。依據 Yahoo! 的說明，他們建議當 HTML 的按鈕已經完成 載入的時候，就可以取代它；而 YUI 會在載入完成的時候，呼叫 YAHOO.util.Event.onContentReady() 方法。因此，我們需要在網頁中加入

  YAHOO.util.Event.onContentReady("yuibut", onButtonReady);
  

  onContentReady() 的第一個參數表示當 yuibut 完成載入的時候，會呼叫一個 名為 onButtonReady 的方法（這個方法名稱可以自訂）。而這個方法的內容 就是產生一個 Button 物件來取代 yuibut。把這個步驟所說的整理起來，我們 的程式碼如下：

    function onButtonReady() {
      var oButton = new YAHOO.widget.Button("yuibut");
    }
    YAHOO.util.Event.onContentReady("yuibut", onButtonReady);
  

  再把這一段程式碼所做的事情整理一次：當 yuibut 被完全載入之後， onButtonReady 即刻被呼叫；呼叫之後，程式碼立刻產生一個 Button 物件， 並用以取代 yuibut。

• 如果你一步一步跟著做，你會發現網頁已經可以正常顯示了，但是 按下"確定"按鈕，卻什麼事情也沒發生。就像之前所說的，我們還需要 為 oButton 設定事件處理的機制。跟 Java 的處理機制類似，我們需要 將 oButton 跟事件處理機制註冊說：我對 "click" 的事件有興趣，如果 使用者在 oButton 上按一下，請執行某個事件處理方法（假設是 callRemote）。 oButton 跟事件處理機制註冊的動作很簡單，YUI 採用 on 的方法來完成，程式碼 如下所示：

  oButton.on("click", callRemote);
  

  至於 callRemote 的內容就跟第一個範例完全相同。

• 完整的程式碼如下：

  <!-- Combo-handled YUI CSS files: --> 
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.7.0/build/button/assets/skins/sam/button.css"> 
  <!-- Combo-handled YUI JS files: --> 
  <script type="text/javascript" src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.js&2.7.0/build/element/element-min.js&2.7.0/build/button/button-min.js&2.7.0/build/connection/connection-min.js"></script> 
  
  <script type="text/javascript">
  
    function onButtonReady() {
      var oButton = new YAHOO.widget.Button("yuibut");
      oButton.on("click", callRemote);
    }
    YAHOO.util.Event.onContentReady("yuibut", onButtonReady);
  
  
    var transaction;
    var sUrl;
    var callback = {
      success: function(o) {
        alert(o.responseText);
      },
      failure: function(o) {
        alert("錯誤：無法取得回應");
      }
    };
  
    function callRemote() {
      sUrl = "/jlu/servlet/HelloWorld?name=" +
             encodeURIComponent(document.getElementById('name').value);
      transaction = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback, null);
    }
  </script>
  </head>