HOME > 開発者向けBLOG > Sencha Blog >  .NET のための Ext JS「Ext.NET」

Technology Note 開発者向けBLOG

Sencha Blog

.NET のための Ext JS「Ext.NET」

こんにちは、ゼノフィseoです。

この記事は、US Sencha社ブログExt JS for .NET using Ext.NET(2016年5月4日|Geoffrey McGill)を翻訳したものです

ゲスト投稿

Ext.NET はASP.NET MVC とWeb Forms のフレームワークであり、Sencha Ext JS JavaScriptフレームワークを組み込んだものです。Ext.NET 4.0 のリリースには多くの新機能や改良点、そして何よりもSencha Ext JS 6 へのアップグレードが含まれています。

Sencha社と我々のパートナーシップは8年以上前に始まり、それ以来ASP.NET 開発者にとってExt.NET はいつも、Ext JS ベースのリッチなJavaScriptアプリケーションを開発するための最も手軽な手段でした。

Ext.NET 4 に梱包された状態で、Sencha Ext JS 6 はデータグリッドやメニュー、ツリー、フォームエレメント、ボタン、パネル、ウィンドウ、その他強力なエクステンションなど100以上のユーザインターフェースコンポーネントのツールキットを備えており、それらは全て統合され、Ext.NET チームによって専門的にサポートされています。いまのところこれは、ASP.NET を企業水準で利用するにあたり業界で最も拡張性の高いツールキットです。

Ext.NET はASP.NET MVC およびWeb Forms の両方ともサポートしており、これにはASP.NET MVC Razor View Engine が導入されています。ASP.NET Web Forms 開発やMVC 開発において何が可能であるかを調べるためにExamples Explorersは最適で、ここには現在750以上のサンプルが掲載されています。

Ext.NET に関しては当初より、動くことを常に保証することを信条に開発してきました。.NETのスキルや既に購入している開発ツールを使用して、Ext.NET ベースのアプリケーションをすぐに作り始めることができます。

Ext.NET サポートチームは常にお問合せに対応できる体制をとっており、企業水準のサポートを御提供できることに誇りを持っています。これこそがExt.NET の強みであるとしばし評価されています。

サーバーサイドの柔軟性

ASP.NET の強みはこれまでサーバサイドにあり、特に多様なデータソースやバックエンドプロセスとの接続で有利でした。この能力をいかに、ユーザが夢中になるような使いやすいクライアントアプリケーションの開発に活かすかということが、ウェブアプリケーション開発者にとっては挑戦となっています。

Direct EventsやDirect Methodsを利用して非同期のAJAXベースの通信オプションを使うことで、ユーザとサーバの間の情報のやり取りのプロセスを単純にします。

以下のコードサンプルは、ボタンを定義し、クリック操作とサーバサイドのASP.NET MVC Controller アクションを紐付ける方法を説明しています。

// ASP.NET MVC Controller
public ActionResult GetTime()
{
    X.Msg.Notify("Server Time: ", DateTime.Now).Show();
 
    return this.Direct();
}
 
// ASP.NET MVC View
@Html.X().Button()
    .Text("Click Me")
    .DirectClickUrl(Url.Action("GetTime"))

モダンウェブベースのソフトウェアアプリケーションを作るための広範囲に亘った結合力の高いツールセットをExt.NETは備えており、このおかげで開発者はプロジェクトの要求事項の実装に集中することができます。

Strong Typing と IntelliSense

時間は貴重なリソースですから、最も問題のあるところに労力を集中させてください。Ext.NET とcompile-time checking を利用することで素早くエラーを検出できると同時に、問題点は切り離して即座に修正することができます。アプリケーションが大きければ大きいほど、strong typingやcompile-time checking、statement completion、inline documentation の恩恵を受けます。

ASP.NET MVC Razor View

ASP.NET MVC Razor View

ASP.NET MVC Web Forms Page

ASP.NET MVC Web Forms Page

Visual Studio やReSharper など既に愛用している強力な開発ツールを使用することで、Ext.NET の品質や適応性を活かすと同時にアプリケーション開発をスピードアップすることができます。

Example Explorers

Ext.NET Examples Explorers は750以上ものサンプルの巨大なリポジトリであり、フレームワークや梱包されているExt JS の機能をあらゆる角度でデモンストレーションしています。

ASP.NET MVC およびWeb Forms Examples Explorers はExt.NET 4 にアップグレードされており、TritonテーマおよびFontAweosomeフォントにより見た目が一新されています。

ASP.NET MVC and Web Forms Examples Explorers

Spreadsheetの新しい機能

強力な新Spreadsheet Selection ModelがExt.NET 4 には含まれており、GridPanelのデータをspreadsheetのような扱いで選択することができるようになりました。SpreadsheetSelectionModelをGridPanelの«SelectionModel» に追加するだけで、GridPanelをSpreadsheetに変換できます。

次のスニペットでは、Ext.NET マークアップシンタックスを使用してSpreadsheetSelectionModelを定義する方法を説明しています。

<ext:GridPanel runat=”server”>
    <SelectionModel>
        <ext:SpreadsheetSelectionModel runat=”server” />
    </SelectionModel>
</ext:GridPanel>

新しいSpreadsheetSelectionModelの機能の調査には、Examples Explorer に追加された6つのサンプルをレビューいただくことが最も良いです。それぞれのサンプルでは機能を絞り、見やすく簡単なものにしました。

また、Spreadsheet Selection Modelは Ext.NET を最も活用した良い例でもあります。基となるクライアントサイドのExt JS コンポーネントをプロダクティブなサーバーサイドの機能で拡張することで、Ext.NET は二つのレイヤー間の隔たりを埋めてます。

新しいTritonテーマ

New Triton Theme

Ext.NET 4 には新しいTritonテーマが梱包されています。Tritonは現代的なユーザインタフェースをデスクトップ向けのExt.NET アプリケーションにも、タブレット向けにも提供しています。

アプリケーションの見た目をいかに簡単にアップデートできるかをご覧いただくことで、Ext.NET による開発の速さや機能の強力さを確認いただけます。ResourceManager、もしくはプロジェクトのGlobal.asax.csファイルでグローバルセッティングにて、 Theme="Triton" を設定してください。

<ext:ResourceManager runat=”server” Theme=”Triton” />

まとめ

今回のExt.NET の簡単なご紹介に興味を持っていただいたり、皆様のお役に立てば幸いです。インストールやアップグレード、今回のリリースに関する詳細 (英語)はこちらに記載しています。Ext JS 6 はExt JS とSencha Touch フレームワークを統一していますが、Ext.NET 4 はモバイルAPIには対応していませんのでご注意ください。デスクトップ向け、およびモバイル向けの二つのフレームワークは特有で、この先に改めてExt.NET をリリースする必要があります。

フィードバックをお待ちしています。

PAGETOP