レッスン1. Ext.NETを理解する

Ext.NET 2.0ベータの簡単な紹介

読者の皆様、Ext.NETのような便利で便利なASP.NETフレームワークについてお話しましょう。 有名なJSフレームワーク-Sencha Ext JSに基づいています。 多くのASP.NET開発者の生活を大幅に促進し、Ext JSを習得し、それをASP.NETアプリケーションにねじ込む必要がなくなります。 Ext.NETは便利でシンプルなコントロールを提供しますが、それだけではありません。 他にも多くの便利なものがありますが、それについては後で詳しく説明します。



Ext.NET 2.0ベータの現在のバージョンは、Ext JS 4.1.0のほぼすべての機能を提供し、いくつかの非常に素晴らしいプラグインを含んでいます。 実際のプロジェクトでExt.NETを使用することを考えている場合は、Ext.NET 1.3のバージョンを使用することをお勧めします。Ext.NET1.3はより安定しており、ほとんど満足できるものではありません。 ここに書かれていることの多くはそれに適用されますが、それらの間に互換性はありません。 まだExt.NET 2.0ベータ版を使用することに決めた場合は、ベータ版をマークすると、ベータ版が数回変更される可能性があり、場所によっては不安定になることを忘れないでください。 しかし、それはまだExt.NET 2.0ベータのバージョンであり、これは未来であり、研究する必要があります。 その中で、開発者は多くの新しいものを追加しました。変更点の完全なリストはここで見ることができます 。

なぜこれが必要なのですか？

最初に、著者が提供する最も興味深い例を見てみましょう。これにより、Ext.NETの優れた点を理解できます。 examples.ext.netページにアクセスすると、 サンプルの大きなツリーが表示されます。

デスクトップ->はじめに->概要を選択します。 MS Windowsのようなデスクトップ全体が表示されます。 Windows、スタートボタン、グラフィックスなどを利用できます。 興味深い機会ではありませんか？







次に、CodeBehindのLayout-> BorderLayout-> Complexに注意してください。 このウィンドウに要素を表示することに関するすべての問題は、Ext.NETでカバーされています。 レイアウトやブラウザ間の互換性に関する問題についてはほとんど忘れることができますが、それらはすでにここで解決されています。







私はこれで例で終わると思う、なぜなら その後、あなたはそれを自分で理解します。 Chart、DataView、GridPanel、Layout、Miscellaneousの各セクションに特に注意してください。

jQuery UI、Telerik Controls、および同様の機能を提供する他の多くのコントロールセットがあるときにExt.NETが必要な理由を考えた場合。 Ext.NETには長所と短所があります。 長所を考慮してください：

1. Ext.NETを使用すると、既製のASP.NETおよびASP.NET MVCコントロールを取得できますが、これらのプラットフォームでの作業を習得する必要はありません。 それぞれが「それ自体」であり、豊富な機能を備えたコントロール。 合計約100個のコントロール！ そして、それらを拡張したり、プラグインを作成したり、独自のコントロールを作成したりできます。 一般に、全世界があります。
2. Ext.NETをレンダリングするプロセス全体がマークアップなどの問題を処理しますが、忘れてはなりません。 レイアウトやコンテナなどの概念を通じて、表示するものと場所を指定するだけです。
3. 拡張したり新しいトピックを作成したりできる既製のトピック。
4. DirectEventおよびDirectMethodを介してイベントに応答する簡単でシンプルな方法。
5. さまざまなデータ配列を表示する巨大な機能。
6. Raphaelに基づく既製のHTML5グラフィック。
7. Ext.NETコミュニティはかなり活気があり、かなり大きく、フォーラムでいつでも質問をして、静かに答えを待つことができます。

しかし、もちろんExt.NETには欠点があります。

1. これは主に企業や閉鎖的なプロジェクトに適用できます。小規模なインターネットプロジェクトの分野では、その力はすべて役に立たないと思います。 これには少なくとも3つの理由があります。
2. • インターネットではスクリプトとリソースの負荷が非常に大きく、ユーザーの画面に何かを表示するには約500 Kbをダウンロードする必要があります。 多くの場合、低速チャネルのユーザーは吐き出して先に進みますが、それらはますます少なくなっています。
   • クライアントマシンではかなりの負荷がかかります。 解決策として、通常はChromeまたはFireFoxをインストールしましたが、大量のメモリを「食べて」しまいました。
   • モバイルプロセッサの能力が不足しているなど、モバイルブラウザではうまく機能しません。 しかし、この問題を解決するために、Senchaには弟としてのExtJSに似た別のSencha Touchフレームワークがあります。 しかし、ASP.NETプラットフォームでSencha Touchを実装する計画は聞いていません。 ASP.NET MVCと共に使用する場合でも、これは非常に簡単です。
   
   
   
   
   
3. Ext.NETを完全に使用するには、かなり大きいが興味深い「しきい値」の知識を克服する必要があり、ほとんどの場合、Ext JSを学ぶ必要がありますが、これは非常に困難です。 防衛面では、Ext.NETのほとんどの機能はそれほど多くの知識を必要とせず、著者が提供する例を理解し、掘り下げるだけで十分だと言えます。

情報を見つける主な場所はwww.ext.netで 、ここでフォーラムと例を見つけることができます。 これらの場所以外では、 stackoverflow.comおよびロシア語を話すグループgroups.google.com/group/extnetで質問できます。 彼らはいつもあなたに答えると思います。

Hello Worldを書く！

さあ、始めましょう。

開始する前に、次のものが必要です。

1. どのエディションのVisual Studio 2010でも、ServicePack 1をインストールすることをお勧めします。
2. Visual Studio NuGetに最適なパッケージマネージャーをインストールします。 これを行う方法については、こちらをご覧ください。

開始するには、新しいASP.NETプロジェクトを作成し、Ext.NET NuGetパッケージを追加する必要があります。 これを行うには、パッケージマネージャーコンソールを開きます。 そしてそれに入る：

Install-Package Ext.NET -Pre
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

必要なすべてのライブラリと新しいExt.NET.Default.aspx Webページがプロジェクトに自動的に追加されます。 ページレイアウトにコントロールを追加するために、アプリケーションのWeb.configに数行を追加します。 これにより、すべてのページに書き込む必要がなくなります。

 <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

、ページにExt.NETコントロールを登録するために必要です。 Web.configを開いてセクションを見つけます

設定-> system.webに追加し、次の行を追加します。

 <pages> <controls> <add tagPrefix="ext" namespace="Ext.Net" assembly="Ext.Net"/> </controls> </pages>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Ext.NET.Default.aspxページをデフォルトページにします。







すべての準備が完了したので、F5を押してアプリケーションを起動できます。



著者からの慎重に準備された簡単な例が表示されます。これは、右のポップアップウィンドウに、彼に書いたものを表示します。 目の前に表示されるウィンドウは、画面の周りをドラッグして閉じたり（後で開くことはできません）、影やタイトルがあり、サイズを変更したり、テキストフィールドのサイズも変更されます。







プログラムのソースコードを見てみましょう。 4つのコントロールがあります。

1. これはResourceManagerです。その存在はExt.NETを使用するすべてのページで必須であり、その機能は非常に広範囲ですが、次のレッスンで説明します。
2. ウィンドウ-これはすでに見たウィンドウです。 彼は可能な設定を幅広く選択しており、そのうちのいくつかはこの例で使用されています。 また、このコントロールは、TextFieldの特定のケースでは、他のコントロールのコンテナです。 また、ウィンドウには多くのボタンが含まれている場合があります。
3. TextArea-ウィンドウ内に表示されるテキストフィールド。物理的には、これは多くのHTML テキストエリアフィールドに馴染みのある古いものです。 [送信]ボタンをクリックすると、その値がサーバーに送信され、そこで処理が行われます。
4. ボタンは、クリックされるとサーバーにアクセスし、特に「OnDirectClick」属性を介してクリックイベントハンドラーに割り当てられる「Button1_Click」メソッドにアクセスするボタンです（詳細については、個別のレッスンでDirectEventとDirectMethodを参照します）。 このメソッドは、次の行を使用してメッセージを右下隅に表示します：X.Msg.Notify（ "Message"、this.TextField1.Text）.Show（）;。 オブジェクトXは補助的なものであり、特定のアクションを簡素化します。 特定のケースでは、すぐに通知ウィンドウを取得して表示できます。

ほんの数回の動きで、ページのテーマを変更できます。 デフォルトでは、青（デフォルト）、灰色（グレー）、およびアクセシビリティ（アクセス）の3つのテーマが提供されます-視覚障害者向け。 それらは、 設定の Web.configで、 テーマ属性を使用してextnetセクションで変更します。 Slateのトピックを見てみましょう。







Web.configを介してExt.NET用に構成できるその他のパラメーターは、 App_ReadmeフォルダーにあるExt.NET.README.txtファイルにあります。







ResourceManagerを使用して、ページ自体でそれらのほとんどを構成できますが、このページにのみ適用されます。 たとえば、次のようにページ上のテーマを変更できます。

 <ext:ResourceManager runat="server" Theme="Access" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

必要になる可能性のある、または単に興味深いと思われる最も一般的に使用されるパラメーターを検討してください。

• scriptAdapter-「Ext」、「jQuery」、「Prototype」、「YUI」の意味があります。 クライアント上のExt.NETはExt JSを使用します。これは、デフォルトでいわゆるExt JS Coreに基づいています。 DOMモデル、アニメーションなど、Ext JSのjQueryの一種を操作するための基本的な機能を提供します。 しかし、Ext JSは他のフレームワークを使用でき、アダプターと呼びます。 jQuery、Prototype、YUIを使用できます。 なぜこれが必要なのですか？ それでは、プロジェクトで既にjQueryを使用しているとします。これはASP.NETでは珍しくなく、ExtJs Coreスクリプトをロードする代わりに、jQueryを指定してページのロードを保存します。
• disableViewState-「true」または「false」のいずれかを受け入れます。 ViewStateを無効にすることができます。 なぜ必要なのか、必要でないときは、これらの記事でhabrahabr.ru/blogs/net/119537とwww.aspnet.com.ua/Blog/blog-155.aspxを読むことができます。 次に、私の実践では、ViewStateの使用を常に避けようとしています。
• scriptMode-「リリース」、「デバッグ」の2つの意味があります。 デバッグ用の縮小または読み取り可能なスクリプトのロードを示すために使用されます。 FireBug for FireFoxを使用すると、サイズの違いを確認できます。 ところで、まだお持ちでない場合は、このプラグインを強くお勧めします。 これを使用すると、多数のエラーをキャッチできます。

さて、始まりは終わりです。今のところ、Ext.NET.Default.aspxで何が書かれているかを見ることができます。

作者は、examples.ext.netの例と、すべてのExt.NETコンポーネントのほぼ完全な例examples.ext.net/#/Getting_Started/Introduction/Component_Overviewを参照することもお勧めします。



次のレッスンでは、Outlookなどの一般的なアプリケーション用に空白を作成する方法を示します。 それに取り組む過程で、Ext.NET作業の微妙な違いのほとんどを理解します。



素敵な読書を！