Atlas快速体验二（笔记）

范例二　以 Atlas 声明式语法建立网页頁应用程序

在 Lab1 是使用纯 HTML 语法及 JavaScript 来进行非同步处理，而 Lab2 范例是將 Lab1 改写成使用 Atlas 声明式语法，以 <component> element 声明，並且呼叫相同的 EmployeeService.asmx 网络服务来回传员工基本信息，以下是 Lab2.aspx 程序代码：

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

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

<form action="">
  <div>
    员工姓名：
    <input id="inputName" type="text" />
    <input id="btnQuery" type="button" value="查询" />
  </div>
</form>
<hr style="width: 300px"/>
<div>
  <span id="Results"></span>
</div>
<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="inputName" />
     
      <button targetElement="btnQuery">
        <click>
          <invokeMethod target="EmployeeService" method="invoke" />
        </click>
      </button>
     
      <serviceMethod id="EmployeeService" url="EmployeeService.asmx"  methodName="Employee">
        <bindings>
          <binding dataContext="inputName" dataPath="text" property="parameters" propertyKey="txtFirstName" />
        </bindings>
        <completed>
          <invokeMethod target="resultsBinding" method="evaluateIn" />
        </completed>
      </serviceMethod>
           
      <label targetElement="Results">
        <bindings>
          <binding id="resultsBinding" dataContext="EmployeeService" dataPath="response.object"
property="text" automatic="false" />
        </bindings>
      </label>       
    </components>
  </page>
</script>

</asp:Content>

程序说明：
第一次接触上面的语法可能有点难以接受，甚至看不懂中间的程序脉络在做什么东西，写是一些"乱七八糟"的语法，难道不能更简洁更容易理解吗？放心我已先替各位做功課了，并且理出的程序关系图及说明，以下是 Atlas 声明式语法基本形式：

<script type="text/xml-script">
  <page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
    <references>
....
    </references>

    <components>
....
    </components>
  </page>
</script>

上面是 Atlas Client 端的 UI Control 声明，<script type="text/xml-script"> element 是用来供系统识别 Atlas 声明式语法，里面是层次 XML 语法形式，而 <page> 是 XML 的根节点，里面主要包含二个 elements：

1. <references> element 是用来加入 Atlas Framework 的 Client Script Library 引用，里面包含了 Atlas Framework 运行所必须的 JavaScript。

圖 9　Atlas ScriptLibrary

圖 10　引用 Atlas Script Library

2. <components> element 则是层次 Atlas UI components 的声明，里面则包含了子节点声明，在解释其完整意义之前，请看下面笔者整理的系统运行图：

圖 11　Atlas UI Component 运行关系图

通过上面的关系图流程就可以大致了解其运行流程，首先由于在 HTML 中建立了 TextBox 输入与 Button 按鈕二个控件，故相对的在 Atlas UI Component 也必須声明其对应关系，接著输入姓名后按下查询按鈕，則其通过 <bindings> 來进行 Web Service 呼叫，Web Service 查詢数据库后會回傳結果給 <completed>，而后 <completed> 会在其对应的 <label> 进行数据绑定操作，最后将员工数据显示在 <span> 之中。解释完上面的运行关系及流程后，原本对其杂乱无章的印象突然为之改观，甚至会觉得得原來其語法是如此严谨而有结构性，一扫原本第一眼先入为主的偏見。