RaudusのjqGrid

この記事の目的は、何らかの形で言及されている開発者の技術やツールの紹介ではなく、主な目標は、これらの技術やツールに興味を持ち始めたばかりの人々に小さな刺激を与え、それらが役立つかどうか、そしてカバーするかどうかを理解したいことです現在のすべてのニーズ。 しかし、これにもかかわらず、私はラウダスについていくつかの紹介的な言葉を言いたいです 。



Delphiで書かれたかなり成功し、すでに使用されているWindowsアプリケーションをWebアプリケーションに変換するためにコードを書き換えるタスクに遭遇したことはありますか？同時に、ソースコードの変更の最小数に制限されていますか？ はいの場合、この記事はあなたのためです。 この問題を解決する方法はいくつかありますが、そのうちの1つについて詳しく説明します。 彼の名前はラウダスです。



RaudusはDelphiのWebフレームワークおよびコンポーネントセットであり、 リッチインターネットアプリケーション（RIA）を作成できます。 同時に、開発プロセス自体は、通常のデスクトップアプリケーションの開発と大差ありません。 同時に提供される視覚コンポーネントのセットには、Delphiの標準コンポーネントのほとんどの類似物、いわゆるRaudus VCLが含まれています。 これらのビジュアルコンポーネントと、使い慣れた非ビジュアルコンポーネント（DBMSへの直接アクセスコンポーネントなど）を使用し、 HTTPサーバーとして実行されるコンソールアプリケーションをコンパイルします 。 実際、アプリケーションのすべてのロジックはこのサーバーの側に残り、視覚的な部分、つまりGUIはユーザーのブラウザーに転送されます。 ビジュアルクライアントとサーバーの通信ニーズは、 AJAXの機能によって完全にカバーされます 。 このソリューションの説明については、これ以上詳しく説明しません。 RaudusのWebサイトには小さなサンプルがあります。Raudusコンポーネントライブラリを自由にダウンロードしてインストールし、キットに付属のサンプルを実行してみることもできます。



それでも私の場合、コンポーネントの標準セットでは不十分でした。 たとえば、フィルター、ソート、colspan、ページングなど、TDBGridの完全に機能するアナログを使用したかったのです。 すぐに、 jqGridが最初に思い浮かびました。 しかし、どのようにして彼をラウダスに「潜入」させるのでしょうか。



幸いなことに 、Raudusの極端なバージョンには特別なクラスTRaExtendableControlGCDがあり 、これを継承して任意のjQuery UIコンポーネント、jQueryプラグイン、およびExtJS、QooxDooなどのコンポーネントをRaudusコンポーネントに変換できます。 この場合、新しく表示されたコンポーネントは、DesignTimeとRunTimeの両方で同じように見えます。



TRaExtendableControlGCDクラスには、 RaDrawExtend 、 RaUpgradeExtend 、およびRaRouteExtendの 3つの主要メソッドがあります。これらをオーバーライドすると、 たとえばjqGridなどのラッパーを本質的に記述し、Raudusがこのコンポーネントの操作方法を「理解」できるようにします。

RaDrawExtend-このメソッドをオーバーライドして、jqGridを初期化するJavaScriptコードを記述します。

RaRouteExtend-このメソッドをオーバーライドして、jqGridコンポーネントのクライアント部分で何らかのアクション中に実行する必要があるコードを記述します。 つまり これは、jqGridからのAJAX要求に対する反応の場所です。

RaUpgradeExtend-このメソッドをオーバーライドして、RaRouteExtendメソッドのコードの後に​​実行するJavaScriptコードを記述します。 つまり これは、コンポーネントのサーバー側がコンポーネントのクライアント側で動作する場所です。

これら3つの方法を一般的な用語で使用する方法とその結果については、Raudusディストリビューションで提供されている例で見ることができます。 特に、jqDatePickerとTinyMCEを埋め込む例が含まれています。



jqGridの場合に実装する必要がある非常に最初の明白なことは、jqGridにデータを入力し、ページングを編成することです。 この場合、これを行う方法は？



jqGridはいくつかのデータ型（データの受信方法）をサポートしていることが知られています：json（jsonstring）、xml（xmlstring）、local、javascript、およびfunction。 関数を使用すると、データのソースとしてjavascript関数を指定できます。この関数内では、アプリケーションのサーバー側からデータを照会し、addJSONDataメソッドを使用して、受信したデータをjqGridに入力できます。 このメソッドを使用します。



そのため、jqGrid初期化行で、データ型を指定し、データの最初と次の部分の要求が要求される関数を決定します。



getData関数内のme.routeメソッドは、AJAXを使用してコンポーネントのクライアント部分からサーバー部分にアクセスする方法です。 したがって、 postdataに含まれるパラメーターに基づいてサーバーパーツからデータセットを要求します。 すべてのリクエストパラメータはJSON文字列にパックされます。 postdataには、 jqGridのドキュメントで説明されているデータリクエストのサービスパラメータが含まれています。その中には、次のデータバッチがある現在のページ番号、データバッチ内のレコード数、ソート、フィルタなどがあります。 サーバー側では、RaRouteExtendメソッドがトリガーされ、送信された要求パラメーターを処理し、JSONストリングの形式でデータの必要な部分を形成し、この部分をRaUpgradeExtendメソッドで次のようにjqGridに送り返します。

  AJavascript := AJavascript + 'var me=this;' + 'if(me.e){' + 'var v=JSON.parse('''+FJSON+''');'+ '$(me.e)[0].addJSONData(v);' + '};';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで、FJSONはJSON文字列として表されるデータの塊です。



それで、最初の呼び出しで何が起こるか ：

1.ユーザーは最初にjqGridでフォームをアップロードします。 サーバーメソッドRaDrawExtendが実行され、jqGridが初期化されます。

2. jqGridはjavascript getData（）関数を実行して、データの最初のチャンクを取得します。

3.サーバーメソッドRaRouteExtendが実行されます。 データセットは、最初のデータページが要求されたことを示すデータ要求パラメーターに基づいて生成されます（ページ= 1）。 データセットはJSON文字列にシリアル化されます。

4.サーバーメソッドRaUpgradeExtendが実行され、jqGridにデータを追加するjavascriptコードが追加されます。

5. RaUpgradeExtendメソッドで記述されたJavaScriptコードが実行され、jqGridにデータが入力されます。



次のデータがあるページに移動するとどうなりますか ：

1.ユーザーは、jqGridにデータがある次のページに移動します。

2. jqGridは再びjavascript getData（）関数を実行して、次のデータバッチを取得します。

3.サーバーメソッドRaRouteExtendが実行されます。 データセットは、次のデータページが要求されていることを示すデータ要求パラメーターに基づいて生成されます（ページ= 2、ページ= 3など）。 データセットはJSON文字列にシリアル化されます。

4.サーバーメソッドRaUpgradeExtendが実行され、jqGridにデータを追加するjavascriptコードが追加されます。

5. RaUpgradeExtendメソッドで記述されたJavaScriptコードが実行され、jqGridにデータが入力されます。



実際、それがすべてです。 ご質問がある場合は、お問い合わせください。 おそらく、この記事では多くの改良点を追加する必要があります。

ありがとう、そして幸運を！