Atlasの初歩的な理解

60891 ワード
AS
一、Atlasとは何ですか.
マイクロソフトはAtlasの目標は、サーバがクライアントプログラムのスクリプトをASP.に統合することにあると主張している.NETは、包括的な開発プラットフォームを提供します.Atlasプラットフォームには、クライアントセクションとサーバセクションの2つのセクションがあります.クライアントの特徴は次のとおりです.
・オブジェクト適合向けJava言語API.有するNET開発経験のある開発者は,オブジェクト向けの設計に詳しい.
・自動ブラウザ対応.複数のブラウザを理論的に実行できる場合、専用のコードは必要ありません.
・クライアントプログラムAPIおよびコンポーネントは、ドラッグアンドドロップ動作などの豊富なユーザインタフェースの特徴を提供する.ユーザーは、これらのフィーチャーをHTMLコントローラに追加することができ、コードを必要としないだけでなく、コードを必要としません.
・クライアントプログラム開発の関数宣言モジュールとASP.NETサービスコントローラの関数宣言構文は似ています.
二、Atlas入門基礎
まず、ページ上のすべてのAtlasコンポーネントとローカルページの更新を処理し、関連するクライアントスクリプトを生成するために使用される、Atlasの最も主要なコントロールであるScriptManagerについて説明します.(具体的な文法はScriptManager Class参照)
<atlas:ScriptManager
    
      
    EnablePartialRendering="true|false"
    
      
    EnableScriptComponents="true|false"
    
      
    ID="string"
    
      
    OnPageError="      "
    
      
    runat="server"
    
      
>
    
      

          
      
    <ErrorTemplate>
    
      
        <!--     HTML   --> 
       
        <span id="errorMessageLabel" runat="server"></span>
    
      
        <input id="okButton" type="button" value="OK" runat="server" />
    
      
    </ErrorTemplate>
    
      
    <Scripts>
    
      
        <atlas:ScriptReference
    
      
            Browser="     ，Atlas                      "
    
      
            Path="      "
    
      
            ScriptName="Atlas           （Cuttom）"
    
      
        />
    
      
    </Scripts>
    
      
    <Services>
    
      
        <atlas:ServiceReference
    
      
            GenerateProxy="true|false"
    
      
            Path="    "
    
      
            Type="    "
    
      
        />


    </Services>
    
      
</atlas:ScriptManager>
ScriptMangerでは、ページエラーイベント、エラー表示テンプレート、スクリプトセット、およびサービスセットを定義できます.属性EnablePartialRendering属性によってローカル再描画モードを有効にするかどうかを決定し、EnableScriptComponents属性によってXMLスクリプトモードを有効にするかどうかを決定します.
次に、Atlasフレームワークには、クライアント・スクリプトを単純化するための豊富なコンポーネントが含まれています.
Atlasでは中間のXmlスクリプトを独自に定義し,これらのスクリプトから対応するJavascriptスクリプトへの変換やバックエンドで対応するイベント処理などを行う.Xmlスクリプトのセクションでコントロールのデータソースを設定し、HtmlコントロールまたはAspを設定します.NETサーバコントロールをAtlasコンポーネントにアップグレードします.
<input type="text" id="searchText" />
    
      
<input type="button" id="searchButton" />
    
      

    
      

          
      
<script type="text/xml-script">
    
      
  <page xmlns="http://schemas.microsoft.com/xml-script/2005">
    
      
    <references>
    
      
      <add src="ScriptLibrary/Atlas/AtlasUI.js" />
    
      
      <add src="ScriptLibrary/Atlas/AtlasControls.js" />
    
      
    </references>
    
      
    <components>
    
      
        <textbox id="searchText" />
    
      
        <button id="searchButton">
    
      
          <bindings>


          <!-- dataContext        ， dataPath          
       
                 ，  searchText     ，   Boolean      
       
               searchButton Enable   
       
           -->
    
      
            <binding property="enabled"
    
      
              dataContext="searchText" dataPath="text.length"
    
      
              transform="NumberToBoolean" />
    
      
          </bindings>
    
      
          <click>
    
      
            <!--             ，      searchMethod -->
    
      
            <invokeMethod target="searchMethod" method="invoke" />
    
      
          </click>
    
      
        </button>
    
      
        <serviceMethod id="searchMethod">
    
      
          <bindings>
    
      
            <!--              searchText    ，      。-->
    
      
            <binding property="parameters" propertyKey="query"
    
      
              dataContext="searchText" dataPath="text" />
    
      
          </bindings>
    
      
        </serviceMethod>
    
      
    </components>
    
      
  </page>
    
      
</script>
 
第三にjavascriptクライアントスクリプトの統合
Javascriptスクリプトに詳しい場合は、Xmlスクリプトではなくjavascriptスクリプトを直接使用してコールバック処理を行うこともできます.
三、Atlas入門演習
以下は簡単な例で、主にASPについて説明する.NETはどのようにAtlasフレームワークを通じてAjaxを実現するか.例は簡単なボタンイベントでテキストボックスの内容をに保存して直接表示する.
まず、WebServicesサービス、WebServicesを構築します.asmx.
using System;
    
      
using System.Web;
    
      
using System.Collections;
    
      
using System.Web.Services;
    
      
using System.Web.Services.Protocols;
    
      

    
      

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

    
      

          
      
        public WebService()
    
      
        {
    
      

    
      

          
      
            //         ，         
    
      
            //InitializeComponent(); 
    
      
        }
    
      

    
      

          
      
        [WebMethod]
    
      
        public string HelloWorld(String query)
    
      
        {
    
      
            string inputString = Server.HtmlEncode(query);
    
      
            if (!String.IsNullOrEmpty(inputString))
    
      
            {
    
      
                return String.Format("Hello,{1}", inputString);
    
      
            }
    
      
            else
    
      
            {
    
      
                return "The query string was null or empty";
    
      
            }
    
      
        }
    
      

    
      

          
      
    }
    
      
}
次に、WebFormページを作成します.aspx 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="AtlasDemo._Default" %>
    
      
<!DOCTYPE html PUBLIC "-//W
    
      
        3C 
      //DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    
      
<html xmlns="http://www.w3.org/1999/xhtml">
    
      
<head runat="server">
    
      
    <title>AtlasDemo</title>
    
      
</head>
    
      
<body>
    
      
    <form id="form1" runat="server">
    
      
       <atlas:ScriptManager ID="ScriptManager1" runat="server" >
    
      
                <Services>
    
      
               //  WebService   
       
                  <atlas:ServiceReference Path="~/WebService.asmx" />
    
      
                   </Services>
    
      
        </atlas:ScriptManager>
    
      
        <div>
    
      
            Search for
    
      
            <input id="SearchKey" type="text" />
    
      
            <input id="SearchButton" type="button" value="Search" />
    
      
        </div>
    
      
        <hr />
    
      
        <div>
    
      
             <span id="Results"></span>
    
      
        </div>
    
      
</form>
    
      
//  Xml   
       
<script type="text/xml-script">
    
      
        <page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
    
      
            <references>
    
      
             </references>
    
      
            <components>
    
      
                <textBox id="SearchKey" />
    
      
             //  WebService     ，    query         
       
             //id=SearchKey     Text    
       
                 <serviceMethod id="helloService"
    
      
                      url="WebService.asmx" methodName="HelloWorld">
    
      
                   <bindings>
    
      
                     <binding dataContext="SearchKey"
    
      
                          dataPath="text"
    
      
                          property="parameters"
    
      
                          propertyKey="query" />
    
      
                   </bindings>
    
      
                   <completed>
    
      
                     <invokeMethod target="resultsBinding"
    
      
                               method="evaluateIn" />
    
      
                   </completed>
    
      
                 </serviceMethod>
    
      
               //    Click    helloService    WebService  
       
               // WebMethod
    
      
                 <button id="SearchButton">
    
      
                   <click>
    
      
                     <invokeMethod target="helloService"  method="invoke" />
    
      
                   </click>
    
      
                 </button>
    
      
              //   HelloWord     id=results   Text    
       
                 <label id="results">
    
      
                   <bindings>
    
      
                     <binding id="resultsBinding"
    
      
                          dataContext="helloService"
    
      
                          dataPath="result"
    
      
                          property="text"
    
      
                          automatic="false" />
    
      
                   </bindings>
    
      
                 </label>
    
      
            </components>
    
      
        </page>
    
      
    </script>
    
      
</body>
    
      
</html>
第三にjavascriptスクリプトの実現方式である.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="AtlasDemo._Default" %>
    
      
<!DOCTYPE html PUBLIC "-//W
    
      
        3C 
      //DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    
      
<html xmlns="http://www.w3.org/1999/xhtml">
    
      
<head runat="server">
    
      
    <title>AtlasDemo</title>
    
      
</head>
    
      
<body>
    
      
<form id="form1" runat="server">
    
      
        <atlas:ScriptManager ID="ScriptManager1" runat="server" >
    
      
        <Services>
    
      
               <atlas:ServiceReference Path="~/WebService.asmx" />
    
      
           </Services>
    
      
        </atlas:ScriptManager>
    
      
        <div>
    
      
               Search for
    
      
               <input id="SearchKey" type="text" />
    
      
               <input id="SearchButton" type="button" value="Search"
    
      
                       onclick="DoSearch()" />
    
      
        </div>
    
      
        <hr />
    
      
        <div>
    
      
                <span id="Results"></span>
    
      
        </div>
    
      
</form>
    
      
<script type="text/javascript">
    
      
function DoSearch()
    
      
{
    
      
        var SrchElem = document.getElementById("SearchKey");
    
      
        //      WebService  HelloWorld
    
      
        AtlasDemo.WebService.HelloWorld(SrchElem.value, OnRequestComplete);
    
      
}
    
      
//          
       
function OnRequestComplete(result)
    
      
{
    
      
        var RsltElem = document.getElementById("Results"); 
    
      
        RsltElem.innerHTML = result;
    
      
} 
    
      
</script>


</body>
    
      
</html>
四、まとめ
本文の目的は主に初心者にAtlasに対して初歩的な理解を持たせたいと思って、深いいくつかの研究について、ネット上にも多くの例があって、http://Atlas.asp.net上の例の中でも比較的に詳しく話しました.また、使用中は特に注意してください.
l ScriptManagerのEnablePartialRenderingプロパティをtrueに設定する必要があります.そうしないと、以前と同じようにPostBack全体がAjaxのローカル更新の効果を得られなくなります.
l AtlasのUpdatePanelコンテナを使用する場合、その内部のコントロールは、局所的な更新効果を達成することができますが、サーバとクライアントを往復して発生するデータ流量は、通常のページ全体がPostBackを引き起こすのと同じで、UpdatePanelをコンテナとして採用するだけで、ページの点滅を一緒にすることなく、局所的なリフレッシュを達成することができます.
五、Atlas関連資料
ダウンロード先:
http://atlas.asp.net/default.aspx?tabid=47&subtabid=471
関連資料及びBlog:
http://forums.asp.net/default.aspx?GroupID=34 ASP.NET Atlas学習 Dflying Chen Atlasクイックハンド体験
CSSでのセレクタ(メモ)
サードパーティ製コンポーネントのスタイル変更の問題を優雅に解決