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> 之中。解释完上面的运行关系及流程后，原本对其杂乱无章的印象突然为之改观，甚至会觉得得原來其語法是如此严谨而有结构性，一扫原本第一眼先入为主的偏見。
优质内容筛选与推荐>>1、在android studio删除Module
2、谁说程序员不懂浪漫，只要你了解一年中的所有情人节和它的意义，你也会让她感受到你的浪漫！
3、Vue项目环境搭建(node+webpack)
4、TensorFlow 学习
5、JavaScript之链式结构序列化