ExtJS
バグもあったし、DDDの思想もわかってきたし、S2JDBCもタイプセーフになったからきちんとしたアプリを再度つくります。ブログじゃ見にくいからcodeなにがし辺りにでも。
今回はデータの検索機能を実装します。 検索ウィンドウの作成 検索ウィンドウは以下に示したようなフォームになります。検索項目は更新系のフォームとほぼ同じです。仕様は Idは完全一致検索 氏名はLike検索 職種は完全一致検索 給料は>=、 部署は完全一致検…
仕事でSAStrutsとAjaxに関して調査する必要がありまして、その延長でこの記事を書き始めました。自分のメモとして始めたですが一応読み手がいるのを想定して書き始めました。そしたら本当に読んでいらっしゃる方がいてとても驚きました。トラックバックやブ…
今回は既存データの編集、削除機能を実装します。 編集・削除ウィンドウの作成 編集・削除ウィンドウは新規追加ウィンドウを再利用します。機能は一覧から一つのレコードを選択し値をフォームに読み込むようにします。まずは選択できる行を一つだけにします…
前回でデータ一覧を表示させる事が出来るようになりました。今回はデータの更新関係についてサンプルを作っていきます。 新規追加ウィンドウの作成 まずはモックアップから。ExtJSのダイナミックフォームを使用します。 フォームウィンドウのソース Ext.Quic…
前回は画面のモックアップを作成しました。今回は実際にデータベースから取得したデータを表示するよう実装していきます。 データベースのセットアップ まず最初はデータベースのセットアップを行います。データベースにはデフォルトでEMPテーブルとDEPTテー…
前回はセットアップを完了させました。今回からいよいよ実装に入っていきます。 画面ファイルの作成 まずはベースとなるindex.htmlを作成します。通常SAStrutsのビューはindex.jspのように.jspファイルを作成しますが今回はFull Ajaxなアプリケーションを目…
はじめに 2008年09月にGoogleからGoogle Chromeがリリースされました。より快適なAjaxアプリを実現していくのが目標のようです。Chromeを使用した方ならわかって頂けると思いますがAjax Webアプリケーションはまだまだ未成熟で可能性がある事を感じさせてく…
フロントエンド 昨日、掲載したソースに若干手を加える事でページャー機能が使えるようになります。さっそくソースを。 entity-paging-grid.html <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>ページャー グリッド</title> <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" /> </link></meta></head></html>
よく用いられるJavascriptライブラリ、ExtJSのリード開発者であるJack Slocum氏は、ExtJSの2.1以降を使用して開発されたオープンソースソフトウェアのために、コミュニティで２つの新しい除外規定を作ろうとしていることについて先日公表した。この動きは、…
すごく便利な Grid。これで大量なデータの扱いもやり易くなるぞーって思っていたのだが意外な落とし穴が。それは実用レベルで扱えるデーター件数。サンプルの例では1000件扱っているのだがこの位のサイズが実用的な限界みたい。10000件とかになると描画にす…
至る所でExtJS(エクストジェーエスって読むんだって。)の Grid サンプルは掲載されているからわざわざ書くまでも無いけど S2、JSONIC、ExtJS って組み合わせで書く事に意義があるので書いてみる。まずは「JSON-RPCでAjax」からセットアップ。 サーバーサイド…
この組み合わせだと今までの Web アプリとは比べ物にならない位、表現力が上がるのだが ExtJS を書いていくと何となーくごちゃごちゃしたソースコードになりがち。これはあれだ、 MVC モデルを強制してないからだね。もっと本格的な Web アプリを書く必要が…
■add.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Add</title> <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" /> <script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script> </link></meta></head></html>
まずはサーバーサイドから文字列を取得し表示する。■$PROJECT/hell/hello.html ( hello は convention.dicon で指定したパッケージに相対するよう任意に設定) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Hello</title> <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" /> </link></meta></head></html>
JSONIC いろいろ試してみました。すっごい便利。ガンガン Ajax するなら Teeda や SAStruts を使わずに Seasar2 と JSONIC だけで十分そう。そんな訳で Seasar2 、 JSONIC 、 ExtJS で Ajax アプリを作っていくチュートリアルを書いてみる。まずは準備編。 S…
ExtJS サンプルにあった ArrayGrid をウインドウ全画面表示にした。 <html> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>グリッド</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> </link></meta></head></html>
もっともよく使用されるレイアウト Ext.Viewport のサンプル。 <html> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>ボーダーレイアウト</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> </link></meta></head></html>
Ext 2 Overview (Japanese)Ext WikiExt JS例文辞典この三つを読めばある程度書けるようになるみたい。
