Ajax

jQuery Mobile の NestedList で JSON データを動的にリスト表示

以前、jQTouch 等で作成したもの(iUI版 id:fits:20100715, jQTouch版 id:fits:20100731, SenchaTouch版 id:fits:20101005)と同様のサンプルを jQuery Mobile で作成してみました。(サーバー側の処理も同じものを使用) jQuery Mobile 1.0 a1 ただし、今回…

Sencha Touch の NestedList で JSON データを動的にリスト表示

以前、iUI や jQTouch で作成したもの(iUI版は id:fits:20100715, jQTouch版は id:fits:20100731)と同様のサンプルを Sencha Touch で作成してみました。(サーバー側の処理も同じものを使用) Sencha Touch 1.0 Ext.NestedList を使って実装してみました…

jQTouchを使ったiPhone用Webサイト作成 - JSONデータを動的にリスト表示

前回id:fits:20100715、iUI を使って作成したiPhone用のWebページと同等のものをjQTouchで作成してみました。(サーバー側の処理は同じものを使用) jQTouch 1.0 beta2 基本的な処理内容に前回のiUI版との違いはなく、動的に生成するHTMLの内容だけが異なる…

iUIを使ったiPhone用Webサイト作成 - JSONデータを動的にリスト表示

id:fits:20100713 で作成した Sinatra のサーバーロジックをそのまま使って、iPhone用のWebページを作成してみました。(ただし、iPhone 上で動作確認してません) 今回使った環境は以下の通り。 iUI 0.31 jQuery 1.4.2 iUI は今のところ、JSON データを取得…

JSONデータとして取得したDBの検索結果をExtJSで表示するWebシステムのサンプル - Sinatra, Grails, CakePHP

DB の検索結果を JSON で返して、JavaScript(ExtJS)で表示するような Web システムのサンプルを Sinatra, Grails, CakePHP の 3種類のフレームワークで作成してみました。処理の概要は以下の通りで、MySQL の information_schema データベース TABLES テー…

SproutCore で JAX-RS(Jersey) と連携させる方法

SproutCore の ToDo チュートリアルを元に、JAX-RS(Jersey 使用)と連携させてみた。 ちなみに SproutCore は JavaScript 用のフレームワーク。Ruby 上で実行やビルド(HTML や JavaScript を生成)を実施し、Rails と同様の感覚で JavaScript の Web アプ…

ExtJS の DataGrid でページング処理を実装

Ext JS の DataGrid は多機能で便利なのだが、表示するデータ数が増えるとパフォーマンスに影響がでる。クライアント PC の性能やブラウザに依存するだろうが、数百件程度のデータでも結構厳しい印象がある。そこで、ページ処理を実装して一度に表示するデー…

ExtJS の DataGrid で独自のソート処理を適用

Ext.data.SimpleStore の fields の定義で sortType に function を設定することで、独自のソート処理を適用することができる。function は、引数を 1つだけとり、戻り値にソートで比較するための数値を返すようにする。なお、通常のソート処理は type で指…

ExtJS の DataGrid で状態を保存

Ext JS にはコンポーネントの状態を保存する機能が用意されており、以下のように DataGrid でも事前に Ext.state.Manager に Ext.state.CookieProvider をセットしておけば、Cookie に DataGrid の状態が保存され、ページ更新時などに自動的に保存された状態…

YUI の DataTable で行選択のイベント処理を実装

Ext JS の DataGrid と同等の YUI Library 2.4.1 の DataTable を使って行選択時のイベント処理を実装してみた。結果的に、機能や API の使い勝手に大差は無いものの、現時点では Ext JS の DataGrid の方が洗練されており完成度が高い印象を受けた。YUI の …

ExtJS の DataGrid にスタイルシートを適用

Ext JS の DataGrid のセルや行の文字色や背景色を変更するには、以下のような class のスタイルを変更する。 セルのスタイル指定 -> x-grid3-cell-inner 行のスタイル指定 -> x-grid3-row 選択行のスタイル指定 -> x-grid3-row-selected ストライプ行のスタ…

ExtJS の DataGrid で行選択時のイベント処理やフィルタリング処理を実装してみる

Ext JS の DataGrid を使って以下の機能を実装してみた。 行選択のイベント処理 表示データにフィルターを適用 サンプルコード <html> <head> <link rel="stylesheet" type="text/css" href="ext-2.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-2.0/adapter/ext/ext-base.js"></script> </link></head></html>

Grails で Ajax

Grails 1.0-RC3 で Ajax を使ったサンプルを作ってみた。とりあえず、Grails で Ajax を使うには以下のようにすれば良いみたい。 gsp ファイル g:javascript を タグ内に追加 remoteXXX や formRemote タグを使用 コントローラークラス render メソッドを使…

ExtJS を試してみる

Ajax デザインパターンで取り上げられていた Data Grid パターンを実装しているものを探していて、Ext JS が良さそうだったので試してみる事に。(他にも Dojo、Rico、YUI、qooxdoo、dhtmlxGrid、ActiveWidgets Grid 等がある)まずは、Ext JS のサイトから …