1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
5 <title>Rico Grid Overview</title>
6 <link href="ricoDocs.css" rel="Stylesheet" type="text/css">
11 <p>Rico ライブラリは 2 つの異なったタイプのグリッドをサポートします。
12 <strong>LiveGrid</strong> と <strong>SimpleGrid</strong>.
13 LiveGrid のデータは、2次元の JavaScript 配列で、常にバッファリングされます。
14 ユーザがグリッドを通して垂直にスクロールするとき、データは配列からグリッドに動的にコピーされます。
15 一方、SimpleGrids はバッファリングを行いません。
16 -- グリッドのためのすべてのデータは JavaScript のデータ構造では無く、
17 <a href="http://en.wikipedia.org/wiki/Document_Object_Model">DOM</a> に存在しています。
19 <p>どちらのタイプのグリッドも、次のようないくつかの共通点を持っています。
21 <li>画面上部で切り離されてスクロールしない、固定された列見出し
24 <li>共通の css スタイリング - LiveGrids 用に開発されたスタイルは、SimpleGrids でも同様に機能します
25 <li>右から左に読む言語(rtl)との互換性 -
26 <a href="asp/rtl/ex1.asp" target="_top">ASP</a> と <a href="php/rtl/ex1.php" target="_top">PHP</a> の実例に含まれます</a>
27 <li>Rico のポップアップ(コンテキスト)メニューとの互換性
32 <p>Rico は、LiveGrid バッファをロードするために多くのサポートを提供します。
33 バッファは次の項目からロードする事が出来ます。
41 <h3>LiveGrid のデータベース接続</h3>
42 <p>SQL クエリの実行結果を LiveGrid にロードするタスクを簡素化するために、
43 Rico にはデータベースと LiveGrid を接続する "plug-ins" のセットが付属しています。
44 Rico プラグインは次のデータベースでテストされました。
46 <p><table border='1' cellspacing='0' cellpadding='4' class='compat' style='margin-bottom:0px'>
60 <td><img src='images/checkmark.gif'></td>
61 <td><img src='images/checkmark.gif'></td>
63 <td><img src='images/checkmark.gif'></td>
64 <td><img src='images/checkmark.gif'></td>
68 <td><img src='images/checkmark.gif'></td>
69 <td><img src='images/checkmark.gif'></td>
70 <td><img src='images/checkmark.gif'></td>
71 <td><img src='images/checkmark.gif'></td>
72 <td><img src='images/checkmark.gif'></td>
76 <td><img src='images/checkmark.gif'></td>
77 <td><img src='images/checkmark.gif'></td>
78 <td><img src='images/checkmark.gif'></td>
79 <td><img src='images/checkmark.gif'></td>
80 <td><img src='images/checkmark.gif'></td>
84 <p style='font-size:8pt; margin:0px;'>2007 年 11 月における Rico プラグイン/データベース の互換性
86 <br>* ASP プラグインは ADO を、.netプラグインは ADO.net を使用するので、
87 <br>ADO と互換性があるどんなデータソースにも接続することができるはずです。</p>
89 <p>LiveGrid は <a href="http://en.wikipedia.org/wiki/Ajax_%28programming%29">AJAX</a> テクノロジーを使うので、
90 一度にクライアントへ送る SQL クエリの実行結果は一部だけです。
92 JavaScript コードはクエリの結果のどの部分が必要とされているかについて決定し、
93 AJAX リクエストをプラグインに送り返します。
94 プラグインはそれらの結果をデータベースから検索して、それらをクライアントに返します。
95 なので、クエリが返す結果が 10 行か 100,000 行かに関係なく、
96 LiveGrid はインタラクティブなユーザインタフェースで迅速かつ容易に結果を表示する事ができます。
98 <p>最後に、もしユーザーがデータの変更を許されているならば、Rico プラグインは、それさえも簡単にします。
99 単に <strong>LiveGrid Forms</strong> を使っているグリッドを定義して下さい
100 -- レコードセレクションの追加、編集、そして削除は、グリッドのコンテキスト(ポップアップ)メニューから追加されます。
103 <li>追加や編集が選ばれるとき、ポップアップフォームはユーザに提示されます。
104 <li>ユーザーがフォームを "保存する" とき、データはオリジナルスクリプトへポストバックされ、
108 それが複雑に聞こえるならば、心配しないでください!
109 この仕事の全ては、プラグインによって取り扱われます。
110 それがユーザーとプログラマーの両方にとって、
111 どれくらい簡単かという実証については、 "ex2edit" の実例を見て下さい。
112 "ex4edit" は、一つのページ内で複数のグリッドを編集可能にする方法を示します。
114 <h3>LiveGrid の XML 実装</h3>
116 <p>LiveGrid にデータをロードするのがプラグインで簡単になっている間は、それらは必要ではありません。
117 データがこの形式に従う限り、どんなソースからも LiveGrid のバッファを XML データにロードする事が出来ます。
120 <ajax-response>
121 <response type='object' id='MyGridId_updater'>
122 <rows update_ui='true' offset='0'>
123 <tr><td>Data for row 1, cell 1</td><td>Data for row 1, cell 2</td></tr>
124 <tr><td>Data for row 2, cell 1</td><td>Data for row 2, cell 2</td></tr>
127 </ajax-response>
130 天気と写真の実例を見てください、それぞれ Yahoo 天気情報と Flickr からデータを検索して、上記のデータ構造に再フォーマットしています。
131 これらの実例は、現在、、ASP では無く PHP と .net のバージョンで利用できます。
133 <h3>HTML テーブルデータによる LiveGrid 実装</h3>
135 <p>LiveGrid は伝統的な HTML テーブルを持つウェブページの上で簡単に作る事も出来ます。
136 単に ID をテーブルに割り当てて、LiveGrid の初期化中に、そのIDを渡してください。
137 テーブルの thead セレクションと tbody のデータから見出しは取得する事が出来ます。
138 この場合 AJAX は実行されませんが、データは JavaScript 配列でまだバッファリングされます。
139 いくつかの実例は Rico ディストリビューションに含まれますので、
140 "LiveGrid-Static Buffer" と印されている物を探して下さい。
146 <p>SimpleGrid は Rico 2.0 にとって新しく、LiveGrids と同じ機能のいくらかを共有します
147 - リサイズ可能な列、固定された列と固定された見出し。
148 しかしながら、LiveGrid と異なり、データは静的であり DOM に存在します
149 - それゆえに、バッファリング、AJAX リフレッシュ、ソート、フィルタリングの機能がありません。
150 なぜ、SimpleGrid を使うのでしょうか?
152 <li>それぞれのセルが含むことが出来るものが、より柔軟であるので -
153 列内のセルがすべて同じタイプである必要はありません。
154 <li>状況によって、それは LiveGrid よりクライアント上で、より良く実行することができます。
155 特にグリッドに多くの列を表示している遅いクライアントで。
156 <li>最後に、SimpleGrid は入力要素である(チェックボックス、セレクトリスト、その他)を含むことができます。
157 LiveGrid も入力要素を含むことができますが、要素の値が LiveGrid のバッファに保存されるので、
158 サーバに値をサブミットするには扱いにくいです。
159 SimpleGrids は、この問題で苦しみません。
160 あなたが単に標準的な <form></form> タグでグリッド全体を囲めば、
161 グリッド中のどんな入力要素でもサーバーへサブミットされます。
164 <p>SimpleGrid の最も洗練された例は、ディストリビューションに含まれているスプレッドシートです。
165 式を入力する事ができ、入力値を変更すると、それは再計算されるでしょう -
167 実例のメニューの "HTML Examples" のセクションでスプレッドシートへのリンクを見つけることができます。
168 スプレッドシートで、 <img alt="help" src="images/sheet/help.gif"> ボタンをクリックして、それができるすべてを見て下さい。
170 <p>SimpleGrids は、次の 2 つの方法で作成する事が出来ます。
172 <li>SimpleGrid プラグインの中の 1 つを用いて。PHP、ASP と .net のためのプラグインが存在します。
173 <li>XSLTを用いて。Rico は、標準的なHTMLテーブルを SimpleGrid に変換する XSL ファイルを持っています。
176 <h3>プラグインを利用しての SimpleGrid の作成</h3>
178 <p>各プラグインは SimpleGrid のクラスを定義します。
179 クラスの中に、ヘッダ行とデータ行を始めるメソッドがあります。 -
180 HTML テーブル内のどこかに <tr> タブを置いて、それらのメソッドの内の一つを呼ぶだけです。
181 また、セルを作成するメソッドもあります。 -
182 HTML テーブル内のどこかに <th> タブか <td> タブを置いて、それを呼ぶだけです。
183 テーブルの内容を定義し終わったら、描画メソッドを呼ぶだけです。
184 (.net プラグイン以外では描画は自動的に行われます)
187 <h3>XSLT を利用しての SimpleGrid の作成</h3>
189 <p>ウェブページが XHTML 対応であるならば、SimpleGrid を生成するもう一つの方法があります。
190 ページ上のテーブルを SimpleGrids に変換するために、XSL スタイルシートである "ricoSimpleGrid.xsl" を使うだけです。
191 スタイルシートは "ricoSimpleGrid" のクラス名でテーブルを探して、それから変換を行います。
192 一時は、Rico はクライアント上でこの変換をサポートしていました。
193 しかしながら、Prototype ライブラリの変更のために、すでに出来なくなりました。
194 したがって、このアプローチで行う方を選ぶならば、 XSLT 変換はサーバーで実行されなければなりません。