jRIApp-オンラインビジネスアプリケーションを作成するための新しいHTML5フレームワーク

jRIAppは、Webアプリケーションの開発用に作成されたもう1つのHTML5フレームワークであり、その機能はデスクトップアプリケーションよりも劣っていません。



angularJSやemberJSなどの既存のフレームワークとの主な違いは、フレームワークに統合されたデータサービスの可用性と、このタイプのフレームワークで最も一般的なMVC設計ではなくMVVM設計アーキテクチャの使用です。

一般的には、データバインディングを実装し、HTML要素に宣言的にロジックをアタッチするためのインフラストラクチャを持ち、データ（DbContext、DbSet）を操作するためのクラスを持ち、サーバー側のデータサービスが実装されているHTML5フレームワークとして説明できます。



フレームワークのクライアント部分はjavascriptで記述され（ typescriptバージョンは現在開発中です ）、サーバー部分はC＃で記述されています。



このフレームワークは、MITライセンスの下でGitHubに公開されています 。 ASP.NET MVC4を使用して記述されたデモアプリケーションとその使用に関するドキュメントが含まれています。



jRIAppを使用して作成されたアプリケーションのスタイルは、WCF RIAサービスでMicrosoft Silverlightを使用してアプリケーションを作成することに非常に似ています。 データバインディングにも同様の構文があります-単方向、双方向、データコンバーターを使用できます。 アクションは、コマンドを介してボタンやハイパーリンクなどのコマンド要素にリンクできます。



たとえば、これはデモアプリケーションでページスイッチを作成する方法です。

<div style="margin-top:40px;text-align:left; border:none;width:100%;height:15%"> <!----> <div style="float:left;" data-bind="{this.dataSource,to=dbSet,source=VM.productVM}" data-view="name=pager,options={sliderSize:20,hideOnSinglePage=false}"> </div> <!--  -  -   --> <div style="float:left; padding-left:10px;padding-top:10px;"> <span>Total:</span> <span data-bind="{this.value,to=totalCount,source=VM.productVM.dbSet}"></span>,   <span>Selected:</span> <span data-bind="{this.value,to=selectedCount,source=VM.productVM}"></span> </div>     <!--    --> <button style="float:right;" data-bind="{this.command,to=addNewCommand,mode=OneWay,source=VM.productVM}"> + New Product </button> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

テンプレートにも同様のタイプの作成があります-foreachループに似たスクリプトの使用を除外します。これは、結果のHTMLドキュメントでマークアップの断片の出力を繰り返します。 テンプレートのこの機能は、要素ビューを使用してバインディングを作成するときにデータバインディングが実際にラップされるプロパティの各DOM要素に完全に置き換えられます。これにより、本質的にロジックをHTML要素にバインドできます。 したがって、jQueryプラグインはロジックをHTML要素にバインドしますが、フレームワークはこれを宣言スタイルで行います。



小さなテンプレートの例：

 <div id="stackPanelItemTemplate" data-role="template" class="stackPanelItem" > <fieldset> <legend><span data-bind="{this.value,to=radioValue}"></span></legend> Time: <span data-bind="{this.value,to=time,converter=dateTimeConverter,converterParam='HH:mm:ss'}"></span> </fieldset> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さらに、DataGrid、DataForm、StackPanel、ComboBoxなど、データを操作するためのコンポーネントと統合された既製のユーザー要素があります。データ検証は、クライアントとサーバーの両方で行われ、サーバー側で設定されたメタデータを使用します。



さらに、フレームワークを開始するために、このトピックにいくつかの基本事項を含めたいと思います。

フレームワークの基本クラス：

なぜ彼はそんなに注目に値するのですか？

まず、オブザーバー機能、つまり サブスクライバーが通知を受け取りたいイベントを添付できます。 また、オブジェクトが占有するリソースを解放するためにオブジェクトを破棄する基本機能（ 主に他のオブジェクトとイベントへのリンク ）を備えており、イベントの助けを借りて他のオブジェクトに破壊を通知することもできます。また、このオブジェクト（ 通常、クライアントはグローバルオブジェクトとアプリケーションオブジェクトのエラーイベントのみをサブスクライブします ）。



このクラスに固有のもう1つの重要な機能は、メソッドextendを持っていることです。これにより、派生クラスの機能を継承できます。



新しいオブジェクトクラスを作成する例：

 var NewObject = RIAPP.BaseObject.extend( { // _create:function (radioValue) { this._super(); this._radioValue = radioValue; }, //   _getEventNames:function () { var base_events = this._super(); return ['radio_value_changed'].concat(base_events); }, //     _onRadioValueChanged: function(){ this.raiseEvent('radio_value_changed',{value: this.radioValue}) } }, { //   radioValue:{ set:function (v) { if (this._radioValue !== v){ this._radioValue = v; this.raisePropertyChanged('radioValue'); this._onRadioValueChanged(); } }, get:function () { return this._radioValue; } } }, function (obj) { // ,        //app -     closure scope app.registerType('custom.NewObject', obj); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さらに、オブジェクトクラスは他のモジュールから取得できます。

  var Instance = app.getType('custom.NewObject').create('radioValue1');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべてのオブジェクトクラスはモジュール内で作成されるため、モジュールの従来の定義で行われているように、オブジェクトクラスもそれらからエクスポートできます。 各モジュール内で、 this変数はモジュール自体を参照し、任意のプロパティをそれに追加できます。



たとえば、モジュールの1つであるnewObjModでは、クラスをエクスポートします。

  var thisModule = this; thisModule.NewObject = NewObject;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして別のインポート：

  var NewObject = app.modules.newObjMod.NewObject;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

フレームワークでのクラスの定義の基礎を研究したら、データバインディングの定義に進むことができます。 オブジェクトBindingに 。

データバインディング：

原則として、オブジェクトBindingはコードで作成できますが、より便利なのは、データバインディングの宣言的な定義であり、主にアプリケーションで使用されます（ ドキュメントにはコードでバインディングを作成する例があります ）。



HTML要素へのデータバインディングの例、 select ：

 <select size="1" style="width:220px" data-bind="{this.dataSource,to=mailDocsVM.dbSet,mode=OneWay,source=VM.sendListVM} {this.selectedValue,to=selectedDocID,mode=TwoWay,source=VM.sendListVM} {this.toolTip,to=currentItem.DESCRIPTION,mode=OneWay,source=VM.sendListVM.mailDocsVM}" data-view="options:{valuePath=MailDocID,textPath=NAME}">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

属性data-bindは、データバインディング式を定義します。 各式は中括弧で囲まれ、レシーバーのプロパティへのパスとデータソースのプロパティへのパスを定義します。 式には、モードを指定できます-mode、つまり データが移動する方向：OneTime（ソースからレシーバーへ）、OneWay（ソースからレシーバー）、TwoWay（両方向）。 モード、OneWay-これはデフォルトのモードであり、省略できます。 プロパティパスとバインディングモードに加えて、 sourceも指定できます。 このバインディングプロパティはオプションです。指定しない場合、ソースプロパティのパスはデータコンテキストから計算されるためです。 指定すると、パス全体がアプリケーションインスタンスから計算されます。 通常、カスタムビューモデルはVMプロパティにアタッチします（ これはApplicationオブジェクトにアタッチされたネームスペースです）。 したがって、 source = VM.sendListVMは、[Application Object] .VM.sendListVMの略です。



カスタムビューモデルの初期化（作成）の例：

 //    startUp   Application RIAPP.global.UC.fn_Main = function (app) { //      app.global.defaults.imagesPath = '@Url.Content("~/Scripts/jriapp/img/")'; //  view model      VM   Application app.VM.errorVM = app.getType('custom.ErrorViewModel').create(); app.VM.sendListVM = app.getType('custom.SendListVM').create(); //        view model app.VM.sendListVM.load(); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

バインディング式でsourceを指定しなかった場合、 ソースのpathプロパティはこの式が指定された場所から決定されます。 単純にHTMLページの場合、パス全体もApplicationオブジェクトから計算されます。

ただし、式がテンプレート（ Data Template ）またはデータフォーム（ DataForm ）内で使用される場合、ソース（ 式で明示的に指定されていない限り ）は、テンプレートまたはフォームのデータコンテキスト （ data context ）から決定されます 。



また、データバインディングには、データコンバーターとコンバーターのパラメーターを含めることができます。これにより、ソースからレシーバーにデータを渡すときにデータを変更できます。 たとえば、数値と日付の書式設定に便利です。

バインディングライフサイクル：

単一ページアプリケーションを作成する場合、アプリケーションを継続して使用してもメモリリークが発生しないようにする必要があります。

したがって、フレームワークにはオブジェクトを作成するためのシステムがあり、不要なオブジェクトからメモリを消去します（ つまり、未使用のオブジェクトへのリンクが削除されます ）。



生命のルート（ つまり、リンクを保存するルートオブジェクト ）は、グローバルオブジェクトのインスタンスであり、jriapp.jsがロードされると、そのシングル（ シングルトン ）インスタンスが自動的に作成されます。 このオブジェクトは、ユーザーが作成したApplicationオブジェクトへのリンクをHTMLページに保存します（ 通常は1つのインスタンスですが、Webパーツで作成する場合は複数作成できます ）。 アプリケーションオブジェクトは、作成されたオブジェクトへのリンクなどを格納します。

（ destroyメソッドを呼び出すことにより）オブジェクトが破棄されると、そのオブジェクトへの参照が削除されます。 これを担当したのは、それを作成したオブジェクトです。



フレームワークはデータバインディングに基づいており、要素ビューは要素ビュー（ jQueryプラグインに似た、DOM要素に接続されたロジックを持つラッパー ）です。 アプリケーションのライフサイクル中に大量に作成および削除されます。

バインディングオブジェクトを作成するとき、フレームワークはまずHTML DOM要素に関連する要素タイプがあるかどうかを判断します。 たとえば、フレームワークには、DOM要素のフレームワークに組み込まれた要素ビュークラスを定義するモジュールがあります（ ユーザーはモジュールにカスタム要素ビューオブジェクトを追加できます ）。 それらのいくつかは、要素タグの名前によって要素に関連付けられています。 たとえば、入力要素の主要なタイプには、対応する要素ビュータイプがあります。 ただし、一部の要素ビューは独自の名前で登録されています（ つまり、特定のタグに関連付けられていません ）。 たとえば、名前tabsの下に登録されたTabsElView、名前busy_indicatorの下にあるBusyElView。 実際には、これは、バインディングが作成する要素ビューのタイプを選択（ 変更 ）するために、データビュー属性を使用できることを意味します。



次の例では、名前エキスパンダーの下に登録された要素ビューをバインディングで作成することを示しています。

 <span data-bind="{this.command,to=expanderCommand,mode=OneWay,source=VM.headerVM}" data-view="name=expander"></span>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、要素ビューの場合、オプションを渡して作成する必要がある場合があります（ 要素ビューは、コンストラクタでオプションを受け取ります ）。

 <input type="text" data-bind="{this.value,to=testProperty,mode=TwoWay,source=VM.testObject1}" data-view="options:{updateOnKeyUp=true}" /> // <div data-bind="{this.dataSource,to=dbSet,source=VM.productVM}" data-view="name=pager,options={sliderSize:20,hideOnSinglePage=false}"> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

モジュラー構造：

フレームワークにはモジュールの階層があります。

グローバルオブジェクトには、最上位のモジュール構造があります。 モジュールの1つはApplicationクラスを定義します。

同様に、Applicationオブジェクトには独自のモジュール（ ほとんどのフレームワークモジュール ）もあります。

アプリケーション（ Application ）のインスタンスを作成するとき、そのモジュールを初期化します。モジュールは、キー（ フレームワークで定義されている ）とユーザー（ ユーザーによって定義されている ）に分割されます。

カスタムモジュールは、フレームワークの機能の拡張を提供し、それらのビューモデルクラスの定義を作成する役割も果たします。ユーザーアプリケーションでは、MVVMは、バインディング（ DataBindings ）のデータソースを提供します。

要約：

これは、アプリケーションを作成するためのフレームワークで利用可能なすべてのほんの一部に過ぎないと思います。 ドキュメントは80ページになり、すべての機能を短い紹介トピックで説明することはできません。 より詳細な知識を得るには、フレームワークの使用の個々の部分をカバーするこのような小さなトピックをいくつか書く必要があります。 しかし、まず第一に、GitHubでプロジェクトを見て、youtubeでビデオデモアプリケーションを見てください。



また、このフレームワークはSilverLightで実行されているアプリケーションを翻訳するために私が作成したものであり、これらはデータアプリケーションであることに注意してください。 したがって、デモアプリケーションの設計はシンプルで、主にデータの操作方法を示しています。 ただし、適切なデザインが必要な場合、このフレームワークはスタイルとデザインの使用に関して何も制限しません。 デザインはデザイナーにのみ依存します。