Atlas快速体验三（笔记）

范例三　以 Atlas 声明式语法建立「自动输入 TextBox」

本范例是使用 Atlas UI及JavaScript 來示范「自动输入 TextBox」功能的建置，使用者只要输入开头几个英文字后就会显示「自动输入」清单供使用者选取（由 AutoCompleteService.asmx 网络服务提供），选取后再按下查询按鈕后会呼叫 HelloWorldServer.asmx，並將結果回傳到 <span> 标签中显示結果，以下是步驟說明：

Step 1：建立 Atlas UI Control 程式
下面是 Lab3.aspx 程序代码：

<%@ Page Language="C#" MasterPageFile="~/Default.master" Title="Atlas HOL 3" %>

<asp:Content ID="Content3" ContentPlaceHolderID="Main" Runat="Server">

<form action="">
    <div>
      Search for
      <input id="SearchKey" type="text" />
      <input id="SearchButton" type="button" value="Search"
        onclick="DoSearch()"/>
    </div>
</form>

<div id="completionList"></div>
<hr style="width: 300px"/>
<div>
    <span id="Results"></span>
</div>

<script type="text/JavaScript" src="HelloWorldService.asmx/js">
</script>

<script type="text/JavaScript">

function DoSearch()
{
    var SrchElem = document.getElementById("SearchKey");
    Samples.AspNet.HelloWorldService.HelloWorld(SrchElem.value,
      OnRequestComplete);
}

function OnRequestComplete(result)
{
    var RsltElem = document.getElementById("Results");
    RsltElem.innerHTML = result;
}

</script>

<script type="text/xml-script">
    <page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
      <references>
          <add src="ScriptLibrary/AtlasUI.js" />
          <add src="ScriptLibrary/AtlasControls.js" />
      </references>
      <components>
          <textBox id="SearchKey">
              <behaviors>
                  <autoComplete
                    completionList="completionList"
                    serviceURL="AutoCompleteService.asmx"
                    serviceMethod="GetWordList"
                    minimumPrefixLength="2"
                    completionSetCount="15"
                    completionInterval="500" />
              </behaviors>
          </textBox>
      </components>
    </page>
</script>

</asp:Content>

程序说明：
以下針对 <component> 中 <textBox> 的 <behaviors> 行为属性做一简要说明：

serviceURL="AutoCompleteService.asmx" 指示自动完成功能由哪个 Web Service 提供。
serviceMethod="GetWordList" 是指呼叫 AutoCompleteService.asmx 服务的 GetWordList() 方法。
minimumPrefixLength="2" 是最少要輸入 2 個开头字才会执行自动完成功能。
completionSetCount="15" 是指回传多少个結果。

completionInterval="500" 是指 500 毫秒，也就是每 0.5 秒就會检查 TextBox 输入字串是否合乎条件，以决定是否进行自动完成功能呼叫。

Atlas界面元素是被定义在<components>子元素里面的；Behaviors被当做UI元素的子元素。Behavior联系id是SearchKey的textbox，对于autoComplete行为，他的属性意思如下：
1，completionList属性指定一个显示自动完成数据的UI元素的id。
2，serviceURL说的就是web service。
3，serviceMethod就是我们在web service里面写的那个返回数据的方法
4，minimumPrefixLength指定当在文本框里面输入多少字符的时候才开始调用那个web service里面的方法显示数据
5，completionSetCount设置显示多少条数据
6，completionInterval设置显示自动完成数据的延迟豪秒数啊
有三个属性是必须的：completionList, serviceURL, 和 serviceMethod

Step 2：建立 AutoCompleteService.asmx 网络服务
這個网络服务是负责提供自动完成功能清单，以下是程序代码：

<%@ WebService Language="C#" Class="Samples.AspNet.AutoCompleteService" %>

using System;
using System.IO;
using System.Web;
using System.Collections;
using System.Collections.Generic;
using System.Threading;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Serialization;

namespace Samples.AspNet
{
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class AutoCompleteService : System.Web.Services.WebService
{
//定义一个private的string类型的数组
private static string[] autoCompleteWordList = null;

    //GetWordList的web方法
    [WebMethod]
    public String[] GetWordList(string prefixText, int count)
    {
      if (autoCompleteWordList == null)
      {
          ////初始化个List泛型对象
        List<String> words = new List<string>();
        ////初始化个文件另FileStream对象FileMode是Open,FileAccess是Read
        FileStream file = new
          FileStream(Server.MapPath("~/App_Data/words.txt"), FileMode.Open,
          FileAccess.Read);
        //初始化个StreamReader对象，用来读取文件流中的文本，
        //这里我们可以不写上面的代码而直接让StreamReader来读取文本文件
        StreamReader reader = new StreamReader(file);
        String word;
        //循环一行一行读取文本数据
        while ((word = reader.ReadLine()) != null)
        {
            //把每行数据添加到泛型对象中
          words.Add(word);
        }
        //关闭文件流
        file.Close();
        //把泛型对象转换成数组
        autoCompleteWordList = words.ToArray();
        //把得到的那个数组排序
        Array.Sort(autoCompleteWordList, new CaseInsensitiveComparer());
      }
      //从刚刚那个数组中查找传递来的前缀字符
      int index = Array.BinarySearch(autoCompleteWordList, prefixText, new CaseInsensitiveComparer());
      if (index < 0)
      {
        index = ~index;
        //index=~index;的意思是: 不太肯定
        //if index=0xffffffff //-1
        //set index = 0;
      }

      int matchingCount;
      for (matchingCount = 0;matchingCount < count && index + matchingCount < autoCompleteWordList.Length;matchingCount++)
      {
        if (!autoCompleteWordList[index +
          matchingCount].StartsWith(prefixText,
          StringComparison.CurrentCultureIgnoreCase))
        {
          break;
        }
      }

      String[] returnValue = new string[matchingCount];
      if (matchingCount > 0)
      {
        Array.Copy(autoCompleteWordList, index, returnValue, 0,
          matchingCount);
      }
      return returnValue;
    }

}
}

程序说明：
GetWordList方法有两个参数，第一个参数prefixText指用户最初输入在ui里的几个字符，这是将被自动完成的文本。count参数说明将有多少个选项将会显示在UI上。
以上 Web Service 程序若看不懂的話不必要緊，只需知道其作用是將 Words.txt 文档中查詢相符的信息以字串陣列回傳即可，因為 Web Service 並非是 Atlas Framework 技術展示的重點。但是你也可以自行改寫，例如用 ADO.NET 读取数据库並將查詢結果放入字串陣列之中，再回傳這個陣列即可。

圖 13　Web Service 回傳資料參考畫面

Words.txt 資料檔片段（在 App_Data 目錄下）：

…
CLR
CLS
CLS-compliant
code access security
code-behind class
code-behind file
code-behind page
COM callable wrapper (CCW)
COM interop
Common Information Model (CIM)
common language runtime
common language runtime host
Common Language Specification (CLS)
common object file format (COFF)
common type system (CTS)
comparison evaluator
composite control
configuration file
connection
connection point
…

Step3：建立 HelloWorldService.asmx 網路服務
這個網路服務是純粹回傳一個 Hello 之類的訊息，以下是程式碼：

<%@ WebService Language="C#" Class="Samples.AspNet.HelloWorldService" %>

using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;

namespace Samples.AspNet 
{

  [WebService(Namespace = "http://tempuri.org/")]
  [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
  public class HelloWorldService  : System.Web.Services.WebService 
  {

    [WebMethod]
    public string HelloWorld(String query)
    {
      string inputString = Server.HtmlEncode(query);
      if(!String.IsNullOrEmpty(inputString))
      {
        return String.Format("Hello, you queried for {0}. The current time " 
          + "is {1}", inputString, DateTime.Now);
      }
      else
      {
        return "The query string was null or empty";
      }
    } 
  }
}

圖 14　Atlas UI Control 自動完成畫面

圖 15　Atlas UI Control 查詢結果

圖 16　Lab3 運作關係圖

posted @ 2006-02-28 17:22 安安阅读(306) 评论(0) 收藏举报

刷新页面返回顶部