DataTable
前々回までのサンプルコードを使って、GAE/Jの認証をカスタマイズする（最終回）。GAE/Jは（今のところ？）認証時に設定できるロール（役割）が 一般ユーザー Admin（管理）ユーザー のいずれかとなっている。コンシューマー向けのサイトを少人数で開発・運…
先のログで、「GAE/Jでセッション・タイムアウトを定義（web.xml）しただけでは、再認証をさせることができない」と書いた。ここのところはちょっと混乱があって、再認証機構はセッション・タイムアウトとは基本的に関係ない。フォーム認証のケース（GAE/Jの…
カスタムログインを作ろうの第３回。目標は、 GAE/Jの認証を使って、ログインする。 ログインしたユーザー（Email）が、アプリケーションで許可した者（アプリケーションでリストを用意）でなければ、認証失敗。 である。 前回は、カスタムログインに使うユ…
前回のログでは、Google App Engine/Java(GAE/J)に配備したCSVファイルから、 Emailアドレス 日本語名 住所 役割（ロール） の情報を取得して、YUI2.7.0のDataTableで表示してみた。今回は、GAE/Jのデータソース（Data Source）のエンティティーとしてこれら…
Google App Engine/Java（GAE/J）の認証が一息ついたところで、以下の仕様で、カスタムログインを作り始めてみようかと思う。 userデータ Email,日本語名（任意）,住所（任意）,role をData Storeに持たせる。 GAE/Jでの認証後に、Data Storeに存在チェック…
これまでの一連のログで一通りの道具立てが揃ったので、YUI2.7.0のDataTable（EditableTable;編集可能な表）を使って、以下のフラットファイル（CSV形式）のデータを更新・削除するプログラムを書いてみた。 01,北海道,テスト 02,青森,- 03,秋田,- 04,岩手,-…
前回のログでは、YUI2.7.0のEditable Table（編集可能な表）について、更新・削除時に（DataTableオブジェクト内に）一時保管されるデータを、配列に蓄積するスクリプトを書いた。今回は、それを発展させて、その内容をサーバーに送るコードを書いてみる。こ…
ここまで、YUI2.7.0にあるEditable Table（編集可能な表）について、セルの更新と妥当性検証（Validation）、行の削除を行ってきた。 変更されたデータは、Page Scope（Javascriptオブジェクト）に保存されていて、実際の利用局面では、サーバーに送って永続…
YUI2.7.0のEditable Table（編集可能な表）について、バリデーションのコードを書いてきた。 バリデーションは、データの登録・更新に伴う処理。 今回は、 のような表を用意して、都道府県名の脇のマークをクリックしたら、行が削除される仕組みを作ってみる…
先のログで、DataTableのセルエディタ（Cell Editor）についてバリデータを自作してみた。ここで一点気になるのが、表の同一行内の値との「相関チェック」をどうするか？ということ。先のログのバリデーションでは、「そのセルの値」のみがチェックの対象。…
今回は、DataTableの「セルエディタ（Cell Editor）に設定するバリデータ（validator）」を自作してみる。YAHOO.widget.DataTable.validateNumberのソースを見ると、以下のように書けばいいことがわかる。 引数として入力値をとる関数 引数を検証し、OKならo…
簡単な入力フォームのバリデーション（入力検証、入力制限）について書いてきたが、編集可能なテーブルについても同様な処理をしたい。YUIのDataTableはよく出来ているので、バリデーションからサブミットまでのプロセスの雛形を作っておいても損はなさそう…
YUIのExample「DataTable Control: Complex Example of Multiple Features」へのリンク このExampleは、これまでのExampleでやってきた、いくつかの要素を組み合わせた例。 state列でのソーティングは、「DataTable Control: Client-side Sorting」でやった…
YUIのExample「Paginator: Configuring the Paginator」へのリンク YUI.widget.Paginatorについては、親切というかなんというか、「バラバラに解体しちゃう」ようなExampleがあってありがたい。このExampleの画面は下。 このExampleの説明にはこう書いてある…
YUIの「DataTable Control: Highlighting Cells, Rows, or Columns」へのリンク このExampleでは、セル、行、列をハイライトする方法が示されている。 画面は以下のように、3つのテーブルがならんでいて、それぞれ、 CellにMouseOverするとハイライトされる …
YUIのExample「DataTable Control: Showing, Hiding, and Reordering Columns」へのリンク 先の「DataTable Control: Showing, Hiding, and Reordering Columns（その１）」では、列のDrag and Dropだけに着目したが、ここでは、YUIのExampleそのものについ…
YUIのExample「DataTable Control: Showing, Hiding, and Reordering Columns」へのリンク このExampleは、いくつかの要素が絡み合っている。 YUIのExampleは、大きく 列をDrag and Dropで移動する。 ダイアログボックスを表示して、列の表示・非表示を選択…
YUIのExample「DataTable Control: Context Menu Integration」へのリンク これもAjaxらしい、触って楽しいExampleとなっている。 テーブルのある行にカーソルを合わせて、右クリックすると、OSライクなメニュー（コンテキスト・メニュー；Context Menu）が…
YUIの「DataTable Control: Inline Cell Editing」へのリンク このExampleは、触っていて面白い。 「テーブルのセルをブラウザー上で編集しましょう」という例なのだが、こういうのを触っていると、Ajaxだなぁ、という気になる。編集方法もいろいろ。 以下は…
YUIのExample「DataTable Control: Cell Selection」へのリンク このExampleでは、3種類のセルの選び方について、その作成方法が説明されている。（下図） Cell−Blockでの選択；先頭となるセルと、終端となるセルを指定して、それらが生成するブロック内のセ…
YUIの「DataTable Control: Row Selection」へのリンク このExampleでは、テーブルの行を選択するサンプルが２つ示されている。 上から 標準形式(Standard-type)といわれるもの。クリックして選択後に、Ctrl+クリックでマルチな選択ができる。 シングル形式(…
YUIのExample「DataTable Control: XY-scrolling, Y-scrolling, and X-scrolling」へのリンク このExampleでは、下の図のような縦、横、もしくはその両方の幅が固定された、スクロールするテーブルの作成方法が説明されている。 YUIのExampleでは、XY軸の両…
YUIの「DataTable Control: Server-side Pagination and Sorting for Dynamic Data」へのリンク この例の画面は以下。 見た目は先の「DataTable Control: Client-side Pagination」と変わらないのだが、タイトルがServer-side Paginationと、Client-side Pag…
YUIのExample「DataTable Control: Client-side Sorting」へのリンク このExampleには、Client-side Sorting（クライアント=scriptでのソート）という紛らわしい名前がついているが、「ソーティングをカスタマイズする」方法を説明するものである。サンプル…
YUIのExample「DataTable Control: Client-side Pagination」へのリンク Paginationという聞きなれない言葉は、下図のような表現によって（テーブルの）ページへの遷移を効率化することをさす。 タイトルにClient-sideとあるのは、クライアント（＝Script）…
YUIのExample「DataTable Control: Adding and Deleting Rows」へのリンク このExampleでは、ボタンのクリックでテーブルの行を増減させる方法が示されている。 初期画面は以下。 YUIのExampleでは、テーブルの行が０の時（テーブルが空の時）、「No records…
YUIのExample「DataTable Control: Local XML Data」へのリンク このExampleでも、また、以下のようなテーブルを作成する。 以前のExample「DataTable Control: XML Data Over XHR With POST」では、DataSourceで定義するソースとして、YAHOO! Local Search…
YUIのExample「DataTable Control: Textual Data Over XHR」へのリンク このExampleでは、下の図のようなテーブルを作成する。 この図を見る限りにおいて、「DataTable Control: Textual Data Over XHR（その１）」と違いがないが、HTTPサーバー下におくText…
YUIのExample「DataTable Control: Textual Data Over XHR」へのリンク JSON、XMLに続き、このExampleでは、TextデータをConnection Managerを経由で取得して、以下のようなテーブルを作成する。 YUIのExampleでは、2つの表が1つのExampleで示されているが、…
YUIのExample「DataTable Control: XML Data Over XHR With POST」へのリンク このExampleは、先の「DataTable Control: JSON Data Over XHR」のXML版である。 違いは YAHOO! Local Searchから取得するデータの形式がXML形式であること HTTPのメソッドとして…
