最近の更新

読込中...
ラベル 実践的なWebアプリ開発 の投稿を表示しています。 すべての投稿を表示
ラベル 実践的なWebアプリ開発 の投稿を表示しています。 すべての投稿を表示

2012年7月22日日曜日

JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションの開発(031)

【目的】
JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションを開発する。
※031では、030で作成したテーブルにデータを入れます。



【手順１】
１．「PSqlEditの起動方法」の手順で、PSqlEditを起動。
２．「PSqlEditでPostgreSQLとの接続方法」の手順で、PostgreSQLに接続。
３．「PSqlGridの起動方法」の手順で、PSqlGridを起動。





【手順２】
１．「PSqlGridでデータの追加方法」の手順で、以下の様にデータを追加。




























【課題】
００１．ログインIDのテキストフィールドにフォーカスが入ったときにIMEの入力がなぜか「かなモード」になるのでIMEの制御が必要。⇒OK
００２．画面表示時にログインIDのテキストフィールドにフォーカスの移動が必要。⇒OK
００３．「Tab」キーを押下時に「ログインID」⇒「パスワード」⇒「ログインボタン」⇒最初に戻るの制御が必要。⇒OK
００４．h:panelGridでのカラムの連結方法が不明なので、facetのfooterでカラムを連結させたが、正式なカラムの連結方法があれば変更する。
００５．ログインボタンの横位置を制御し、セル中央に移動させる。⇒OK
００６．ログイン情報のh:panelGrid自体を、画面中央に移動させる。⇒OK
００７．IDの命名方法の検討が必要。
００８．「Tab」キーの押下時にTabIndexが最後の場合、最初のTabIndexに移動する制御が必要。
００９．ManagedBeanに画面の項目値と処理の両方が記述されるので、クラスの見通しが悪くなりそうなので分離が必要。⇒OK
０１０．XHTML名、XHTMLの配置ディレクトリ名、Javaのパッケージ名の対応付け規則が必要。
０１１．他のManagedBeanを参照する記述は、今後多数現われそうなので、共通化・簡易化が必要。⇒OK
０１２．ログインID、パスワードの入力必須チェックが必要。⇒OK
０１３．エラーメッセージの内容を分かり易く変更する。⇒OK
０１４．エラーメッセージの見栄えをエラーと分かり易く変更する。⇒OK
０１５．エラーメッセージの外部ファイル化。
０１６．スタイルシートを外部ファイル化。⇒OK
０１７．XHTMLの内容が一部が重複(CSSの呼び出し)してきているので共通化が必要。
０１８．画面遷移後のURLが遷移先のXHTMLで無いので、遷移後のXHTML名に出来るか調査。



以上です。

投稿者 0 コメント
ラベル:

2012年7月14日土曜日

JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションの開発(030)

【目的】
JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションを開発する。
※030では、「Userテーブル」のIDを修正し、再度「CreateTable文」をPostgreSQLで実行します。



【手順１】
１．「XEAD Modelerの起動方法」の手順で、XEAD Modelerを起動。
２．左ウィンドウで「Z システム制御」⇒「DB構成」⇒「User ユーザ」を選択。
３．「ID(一覧順)」を「MST_User」に変更。
４．「Ctrl+S」で保存。





【手順２】
１．「JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションの開発(028)」の手順で、「CreateTable文」を出力。
２．再度出力した「CreateTable文」は以下の様になります。




【手順３】
１．「JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションの開発(029)」の手順で、出力した「CreateTable文」を実行。
２．以下の様に成功し、テーブルが作成されていれば成功です。









































【課題】
００１．ログインIDのテキストフィールドにフォーカスが入ったときにIMEの入力がなぜか「かなモード」になるのでIMEの制御が必要。⇒OK
００２．画面表示時にログインIDのテキストフィールドにフォーカスの移動が必要。⇒OK
００３．「Tab」キーを押下時に「ログインID」⇒「パスワード」⇒「ログインボタン」⇒最初に戻るの制御が必要。⇒OK
００４．h:panelGridでのカラムの連結方法が不明なので、facetのfooterでカラムを連結させたが、正式なカラムの連結方法があれば変更する。
００５．ログインボタンの横位置を制御し、セル中央に移動させる。⇒OK
００６．ログイン情報のh:panelGrid自体を、画面中央に移動させる。⇒OK
００７．IDの命名方法の検討が必要。
００８．「Tab」キーの押下時にTabIndexが最後の場合、最初のTabIndexに移動する制御が必要。
００９．ManagedBeanに画面の項目値と処理の両方が記述されるので、クラスの見通しが悪くなりそうなので分離が必要。⇒OK
０１０．XHTML名、XHTMLの配置ディレクトリ名、Javaのパッケージ名の対応付け規則が必要。
０１１．他のManagedBeanを参照する記述は、今後多数現われそうなので、共通化・簡易化が必要。⇒OK
０１２．ログインID、パスワードの入力必須チェックが必要。⇒OK
０１３．エラーメッセージの内容を分かり易く変更する。⇒OK
０１４．エラーメッセージの見栄えをエラーと分かり易く変更する。⇒OK
０１５．エラーメッセージの外部ファイル化。
０１６．スタイルシートを外部ファイル化。⇒OK
０１７．XHTMLの内容が一部が重複(CSSの呼び出し)してきているので共通化が必要。
０１８．画面遷移後のURLが遷移先のXHTMLで無いので、遷移後のXHTML名に出来るか調査。



以上です。

投稿者 0 コメント
ラベル:

JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションの開発(029)

【目的】
JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションを開発する。
※029では、028で出力した「CreateTable文」をPostgreSQLで実行します。



【手順１】
１．PostgreSQLが起動していない場合は、「017」の手順で、PostgreSQLを起動。
２．「コマンドプロンプトの起動方法」の手順で、コマンドプロンプトを起動。
３．以下のコマンドを入力。
> c:\devel-pgsql\pgsql\bin\psql.exe -U kakitori-admin -f C:\devel-myproject\XEAD\CreateTables20120714151449.sql kakitori-db
※kakitori-adminはデータベースのユーザ
※kakitori-dbはSQLを実行したいデータベース
※C:\devel-myproject\XEAD\CreateTables20120714151449.sqlは実行したいSQL文

※以下の様にエラーが発生しました。









































【結論】
「User」というテーブルを定義しようと思いましたが、PostgreSQLでは「User」という文字列は予約語のようですので修正したいと思います。



【課題】
００１．ログインIDのテキストフィールドにフォーカスが入ったときにIMEの入力がなぜか「かなモード」になるのでIMEの制御が必要。⇒OK
００２．画面表示時にログインIDのテキストフィールドにフォーカスの移動が必要。⇒OK
００３．「Tab」キーを押下時に「ログインID」⇒「パスワード」⇒「ログインボタン」⇒最初に戻るの制御が必要。⇒OK
００４．h:panelGridでのカラムの連結方法が不明なので、facetのfooterでカラムを連結させたが、正式なカラムの連結方法があれば変更する。
００５．ログインボタンの横位置を制御し、セル中央に移動させる。⇒OK
００６．ログイン情報のh:panelGrid自体を、画面中央に移動させる。⇒OK
００７．IDの命名方法の検討が必要。
００８．「Tab」キーの押下時にTabIndexが最後の場合、最初のTabIndexに移動する制御が必要。
００９．ManagedBeanに画面の項目値と処理の両方が記述されるので、クラスの見通しが悪くなりそうなので分離が必要。⇒OK
０１０．XHTML名、XHTMLの配置ディレクトリ名、Javaのパッケージ名の対応付け規則が必要。
０１１．他のManagedBeanを参照する記述は、今後多数現われそうなので、共通化・簡易化が必要。⇒OK
０１２．ログインID、パスワードの入力必須チェックが必要。⇒OK
０１３．エラーメッセージの内容を分かり易く変更する。⇒OK
０１４．エラーメッセージの見栄えをエラーと分かり易く変更する。⇒OK
０１５．エラーメッセージの外部ファイル化。
０１６．スタイルシートを外部ファイル化。⇒OK
０１７．XHTMLの内容が一部が重複(CSSの呼び出し)してきているので共通化が必要。
０１８．画面遷移後のURLが遷移先のXHTMLで無いので、遷移後のXHTML名に出来るか調査。



以上です。

投稿者 0 コメント
ラベル:

JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションの開発(028)

【目的】
JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションを開発する。
※028では、XEAD Modelerで「Userテーブル」の「CreateTable文」を出力します。



【手順１】
１．「XEAD Modelerの起動方法」の手順で、XEAD Modelerを起動。
２．メニューから「ツール」⇒「CreateTable文出力」を選択。




【手順２】
１．「エイリアス指定フィールドについてCOMMENT出力」の選択をはずす。
２．「出力」ボタンをクリック。




【手順３】
１．「OK」ボタンをクリック。




【手順４】
１．「c:\devel-myproject\XEAD」に「CreateTable文」が出力されています。




【手順５】
１．中身は以下の様になります。


































【課題】
００１．ログインIDのテキストフィールドにフォーカスが入ったときにIMEの入力がなぜか「かなモード」になるのでIMEの制御が必要。⇒OK
００２．画面表示時にログインIDのテキストフィールドにフォーカスの移動が必要。⇒OK
００３．「Tab」キーを押下時に「ログインID」⇒「パスワード」⇒「ログインボタン」⇒最初に戻るの制御が必要。⇒OK
００４．h:panelGridでのカラムの連結方法が不明なので、facetのfooterでカラムを連結させたが、正式なカラムの連結方法があれば変更する。
００５．ログインボタンの横位置を制御し、セル中央に移動させる。⇒OK
００６．ログイン情報のh:panelGrid自体を、画面中央に移動させる。⇒OK
００７．IDの命名方法の検討が必要。
００８．「Tab」キーの押下時にTabIndexが最後の場合、最初のTabIndexに移動する制御が必要。
００９．ManagedBeanに画面の項目値と処理の両方が記述されるので、クラスの見通しが悪くなりそうなので分離が必要。⇒OK
０１０．XHTML名、XHTMLの配置ディレクトリ名、Javaのパッケージ名の対応付け規則が必要。
０１１．他のManagedBeanを参照する記述は、今後多数現われそうなので、共通化・簡易化が必要。⇒OK
０１２．ログインID、パスワードの入力必須チェックが必要。⇒OK
０１３．エラーメッセージの内容を分かり易く変更する。⇒OK
０１４．エラーメッセージの見栄えをエラーと分かり易く変更する。⇒OK
０１５．エラーメッセージの外部ファイル化。
０１６．スタイルシートを外部ファイル化。⇒OK
０１７．XHTMLの内容が一部が重複(CSSの呼び出し)してきているので共通化が必要。
０１８．画面遷移後のURLが遷移先のXHTMLで無いので、遷移後のXHTML名に出来るか調査。



以上です。

投稿者 0 コメント
ラベル:

JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションの開発(027)

【目的】
JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションを開発する。
※027では、XEAD Modelerで「Userテーブル」にプライマリーキーを設定します。




【手順１】
１．「XEAD Modelerの起動方法」の手順で、XEAD Modelerを起動。
２．左ウィンドウで「Z システム制御」⇒「DB構成」⇒「User ユーザ」⇒「KEY構成」⇒「[PK]*none」を選択。




【手順２】
１．左ウィンドウで「Z システム制御」⇒「DB構成」⇒「User ユーザ」⇒「フィールド構成」⇒「UserID ユーザID」を、ウィンドウ右上にドラックアンドドロップ。
２．「Ctrl+S」を押して保存。




【手順３】
１．以下の様に表示されれば成功です。




































【課題】
００１．ログインIDのテキストフィールドにフォーカスが入ったときにIMEの入力がなぜか「かなモード」になるのでIMEの制御が必要。⇒OK
００２．画面表示時にログインIDのテキストフィールドにフォーカスの移動が必要。⇒OK
００３．「Tab」キーを押下時に「ログインID」⇒「パスワード」⇒「ログインボタン」⇒最初に戻るの制御が必要。⇒OK
００４．h:panelGridでのカラムの連結方法が不明なので、facetのfooterでカラムを連結させたが、正式なカラムの連結方法があれば変更する。
００５．ログインボタンの横位置を制御し、セル中央に移動させる。⇒OK
００６．ログイン情報のh:panelGrid自体を、画面中央に移動させる。⇒OK
００７．IDの命名方法の検討が必要。
００８．「Tab」キーの押下時にTabIndexが最後の場合、最初のTabIndexに移動する制御が必要。
００９．ManagedBeanに画面の項目値と処理の両方が記述されるので、クラスの見通しが悪くなりそうなので分離が必要。⇒OK
０１０．XHTML名、XHTMLの配置ディレクトリ名、Javaのパッケージ名の対応付け規則が必要。
０１１．他のManagedBeanを参照する記述は、今後多数現われそうなので、共通化・簡易化が必要。⇒OK
０１２．ログインID、パスワードの入力必須チェックが必要。⇒OK
０１３．エラーメッセージの内容を分かり易く変更する。⇒OK
０１４．エラーメッセージの見栄えをエラーと分かり易く変更する。⇒OK
０１５．エラーメッセージの外部ファイル化。
０１６．スタイルシートを外部ファイル化。⇒OK
０１７．XHTMLの内容が一部が重複(CSSの呼び出し)してきているので共通化が必要。
０１８．画面遷移後のURLが遷移先のXHTMLで無いので、遷移後のXHTML名に出来るか調査。



以上です。

投稿者 0 コメント
ラベル:

JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションの開発(026)

【目的】
JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションを開発する。
※026では、XEAD Modelerで025で作成したデータタイプを「Userテーブルのフィールド」に指定します。



【手順１】
１．「XEAD Modelerの起動方法」の手順で、XEAD Modelerを起動。
２．左ウィンドウで「Z システム制御」⇒「DB構成」⇒「User ユーザ」⇒「フィールド構成」⇒「UserID ユーザID」を選択。
３．「タイプ」に「ID_User ユーザID(255)」を選択。




【手順２】
１．「Ctrl+S」を押して保存。




【手順３】
１．左ウィンドウで「Z システム制御」⇒「DB構成」⇒「User ユーザ」⇒「フィールド構成」⇒「Password パスワード」を選択。
２．「タイプ」に「TX_Password パスワード(255)」を選択。




【手順４】
１．「Ctrl+S」を押して保存。




【課題】
００１．ログインIDのテキストフィールドにフォーカスが入ったときにIMEの入力がなぜか「かなモード」になるのでIMEの制御が必要。⇒OK
００２．画面表示時にログインIDのテキストフィールドにフォーカスの移動が必要。⇒OK
００３．「Tab」キーを押下時に「ログインID」⇒「パスワード」⇒「ログインボタン」⇒最初に戻るの制御が必要。⇒OK
００４．h:panelGridでのカラムの連結方法が不明なので、facetのfooterでカラムを連結させたが、正式なカラムの連結方法があれば変更する。
００５．ログインボタンの横位置を制御し、セル中央に移動させる。⇒OK
００６．ログイン情報のh:panelGrid自体を、画面中央に移動させる。⇒OK
００７．IDの命名方法の検討が必要。
００８．「Tab」キーの押下時にTabIndexが最後の場合、最初のTabIndexに移動する制御が必要。
００９．ManagedBeanに画面の項目値と処理の両方が記述されるので、クラスの見通しが悪くなりそうなので分離が必要。⇒OK
０１０．XHTML名、XHTMLの配置ディレクトリ名、Javaのパッケージ名の対応付け規則が必要。
０１１．他のManagedBeanを参照する記述は、今後多数現われそうなので、共通化・簡易化が必要。⇒OK
０１２．ログインID、パスワードの入力必須チェックが必要。⇒OK
０１３．エラーメッセージの内容を分かり易く変更する。⇒OK
０１４．エラーメッセージの見栄えをエラーと分かり易く変更する。⇒OK
０１５．エラーメッセージの外部ファイル化。
０１６．スタイルシートを外部ファイル化。⇒OK
０１７．XHTMLの内容が一部が重複(CSSの呼び出し)してきているので共通化が必要。
０１８．画面遷移後のURLが遷移先のXHTMLで無いので、遷移後のXHTML名に出来るか調査。



以上です。

投稿者 0 コメント
ラベル:

JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションの開発(025)

【目的】
JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションを開発する。
※025では、XEAD Modelerで024で作成した「Userテーブルのフィールド」のデータタイプを作成します。



【手順１】
１．「XEAD Modelerの起動方法」の手順で、XEAD Modelerを起動。
２．左ウィンドウで「書き取りシステム」を選択し、右のウィンドウの「データタイプ一覧」のタブを選択。
３．「XEAD Modelerのデータタイプの削除方法」の手順で、不要なデータタイプを削除。




【手順２】
２．「XEAD Modelerのデータタイプの追加方法」の手順で、データタイプを追加。




【手順３】
１．「データタイプ名」に「ユーザID」と入力。
２．「ID(一覧順)」に「ID_User」と入力。
３．「SQL表現」に「VARCHAR(255）」と入力。
４．「桁数」に「255」と入力。
５．「Ctrl+S」を押して保存。




【手順４】
１．【手順２】を行い新規データタイプを追加。
２．「データタイプ名」に「パスワード」と入力。
３．「ID(一覧順)」に「TX_Password」と入力。
４．「SQL表現」に「VARCHAR(255）」と入力。
５．「桁数」に「255」と入力。
６．「Ctrl+S」を押して保存。































【課題】
００１．ログインIDのテキストフィールドにフォーカスが入ったときにIMEの入力がなぜか「かなモード」になるのでIMEの制御が必要。⇒OK
００２．画面表示時にログインIDのテキストフィールドにフォーカスの移動が必要。⇒OK
００３．「Tab」キーを押下時に「ログインID」⇒「パスワード」⇒「ログインボタン」⇒最初に戻るの制御が必要。⇒OK
００４．h:panelGridでのカラムの連結方法が不明なので、facetのfooterでカラムを連結させたが、正式なカラムの連結方法があれば変更する。
００５．ログインボタンの横位置を制御し、セル中央に移動させる。⇒OK
００６．ログイン情報のh:panelGrid自体を、画面中央に移動させる。⇒OK
００７．IDの命名方法の検討が必要。
００８．「Tab」キーの押下時にTabIndexが最後の場合、最初のTabIndexに移動する制御が必要。
００９．ManagedBeanに画面の項目値と処理の両方が記述されるので、クラスの見通しが悪くなりそうなので分離が必要。⇒OK
０１０．XHTML名、XHTMLの配置ディレクトリ名、Javaのパッケージ名の対応付け規則が必要。
０１１．他のManagedBeanを参照する記述は、今後多数現われそうなので、共通化・簡易化が必要。⇒OK
０１２．ログインID、パスワードの入力必須チェックが必要。⇒OK
０１３．エラーメッセージの内容を分かり易く変更する。⇒OK
０１４．エラーメッセージの見栄えをエラーと分かり易く変更する。⇒OK
０１５．エラーメッセージの外部ファイル化。
０１６．スタイルシートを外部ファイル化。⇒OK
０１７．XHTMLの内容が一部が重複(CSSの呼び出し)してきているので共通化が必要。
０１８．画面遷移後のURLが遷移先のXHTMLで無いので、遷移後のXHTML名に出来るか調査。



以上です。

投稿者 0 コメント
ラベル:

JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションの開発(024)

【目的】
JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションを開発する。
※024では、XEAD Modelerで023で作成した「Userテーブル」にフィールドを作成します。




【手順１】
１．「XEAD Modelerの起動方法」の手順で、XEAD Modelerを起動。
２．左ウィンドウで「Z システム制御」⇒「DB構成」⇒「User ユーザ」⇒「フィールド構成」を選択し、右クリックで「下位の要素を追加」を選択。




【手順２】
１．以下の様に「新規フィールド」が追加されます。




【手順３】
１．「フィールド名」に「ユーザID」と入力。
２．「ID(alias)」に「UserID」と入力。
３．「Ctrl+S」を押して保存。




【手順４】
１．【手順１】を行い新規フィールドを追加。
２．「フィールド名」に「パスワード」と入力。
３．「ID(alias)」に「Password」と入力。
４．「Ctrl+S」を押して保存。































【課題】
００１．ログインIDのテキストフィールドにフォーカスが入ったときにIMEの入力がなぜか「かなモード」になるのでIMEの制御が必要。⇒OK
００２．画面表示時にログインIDのテキストフィールドにフォーカスの移動が必要。⇒OK
００３．「Tab」キーを押下時に「ログインID」⇒「パスワード」⇒「ログインボタン」⇒最初に戻るの制御が必要。⇒OK
００４．h:panelGridでのカラムの連結方法が不明なので、facetのfooterでカラムを連結させたが、正式なカラムの連結方法があれば変更する。
００５．ログインボタンの横位置を制御し、セル中央に移動させる。⇒OK
００６．ログイン情報のh:panelGrid自体を、画面中央に移動させる。⇒OK
００７．IDの命名方法の検討が必要。
００８．「Tab」キーの押下時にTabIndexが最後の場合、最初のTabIndexに移動する制御が必要。
００９．ManagedBeanに画面の項目値と処理の両方が記述されるので、クラスの見通しが悪くなりそうなので分離が必要。⇒OK
０１０．XHTML名、XHTMLの配置ディレクトリ名、Javaのパッケージ名の対応付け規則が必要。
０１１．他のManagedBeanを参照する記述は、今後多数現われそうなので、共通化・簡易化が必要。⇒OK
０１２．ログインID、パスワードの入力必須チェックが必要。⇒OK
０１３．エラーメッセージの内容を分かり易く変更する。⇒OK
０１４．エラーメッセージの見栄えをエラーと分かり易く変更する。⇒OK
０１５．エラーメッセージの外部ファイル化。
０１６．スタイルシートを外部ファイル化。⇒OK
０１７．XHTMLの内容が一部が重複(CSSの呼び出し)してきているので共通化が必要。
０１８．画面遷移後のURLが遷移先のXHTMLで無いので、遷移後のXHTML名に出来るか調査。



以上です。

投稿者 0 コメント
ラベル:

JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションの開発(023)

【目的】
JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションを開発する。
※023では、XEAD Modelerでログインするユーザを定義するテーブルを作成します。



【手順１】
１．「XEAD Modelerの起動方法」の手順で、XEAD Modelerを起動。
２．左ウィンドウで「Z システム制御」⇒「DB構成」を選択し、右クリックで「下位の要素を追加」を選択。




【手順２】
１．以下の様に「新規テーブル」が追加されます。




【手順３】
１．「テーブル名」に「ユーザ」と入力。
２．「ID(一覧順)」に「User」と入力。
３．「タイプ」は「1 マスタ」を選択。
４．「Ctrl+S」を押して保存。































【課題】
００１．ログインIDのテキストフィールドにフォーカスが入ったときにIMEの入力がなぜか「かなモード」になるのでIMEの制御が必要。⇒OK
００２．画面表示時にログインIDのテキストフィールドにフォーカスの移動が必要。⇒OK
００３．「Tab」キーを押下時に「ログインID」⇒「パスワード」⇒「ログインボタン」⇒最初に戻るの制御が必要。⇒OK
００４．h:panelGridでのカラムの連結方法が不明なので、facetのfooterでカラムを連結させたが、正式なカラムの連結方法があれば変更する。
００５．ログインボタンの横位置を制御し、セル中央に移動させる。⇒OK
００６．ログイン情報のh:panelGrid自体を、画面中央に移動させる。⇒OK
００７．IDの命名方法の検討が必要。
００８．「Tab」キーの押下時にTabIndexが最後の場合、最初のTabIndexに移動する制御が必要。
００９．ManagedBeanに画面の項目値と処理の両方が記述されるので、クラスの見通しが悪くなりそうなので分離が必要。⇒OK
０１０．XHTML名、XHTMLの配置ディレクトリ名、Javaのパッケージ名の対応付け規則が必要。
０１１．他のManagedBeanを参照する記述は、今後多数現われそうなので、共通化・簡易化が必要。⇒OK
０１２．ログインID、パスワードの入力必須チェックが必要。⇒OK
０１３．エラーメッセージの内容を分かり易く変更する。⇒OK
０１４．エラーメッセージの見栄えをエラーと分かり易く変更する。⇒OK
０１５．エラーメッセージの外部ファイル化。
０１６．スタイルシートを外部ファイル化。⇒OK
０１７．XHTMLの内容が一部が重複(CSSの呼び出し)してきているので共通化が必要。
０１８．画面遷移後のURLが遷移先のXHTMLで無いので、遷移後のXHTML名に出来るか調査。



以上です。

投稿者 0 コメント
ラベル:

JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションの開発(022)

【目的】
JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションを開発する。
※022では、データベースのテーブル定義を作成するためXEAD Modelerでサブシステムを作成します。



【手順１】
１．「XEAD Modelerの起動方法」の手順で、XEAD Modelerを起動。
２．左ウィンドウで「アプリケーション」を選択し、右クリックで「下位の要素を追加」を選択。




【手順２】
１．以下の様に「新規サブシステム」が追加されます。




【手順３】
１．「サブシステム名」に「システム制御」と入力。
２．「ID(一覧順)」に「Z」と入力。
３．「Ctrl+S」を押して保存。































【課題】
００１．ログインIDのテキストフィールドにフォーカスが入ったときにIMEの入力がなぜか「かなモード」になるのでIMEの制御が必要。⇒OK
００２．画面表示時にログインIDのテキストフィールドにフォーカスの移動が必要。⇒OK
００３．「Tab」キーを押下時に「ログインID」⇒「パスワード」⇒「ログインボタン」⇒最初に戻るの制御が必要。⇒OK
００４．h:panelGridでのカラムの連結方法が不明なので、facetのfooterでカラムを連結させたが、正式なカラムの連結方法があれば変更する。
００５．ログインボタンの横位置を制御し、セル中央に移動させる。⇒OK
００６．ログイン情報のh:panelGrid自体を、画面中央に移動させる。⇒OK
００７．IDの命名方法の検討が必要。
００８．「Tab」キーの押下時にTabIndexが最後の場合、最初のTabIndexに移動する制御が必要。
００９．ManagedBeanに画面の項目値と処理の両方が記述されるので、クラスの見通しが悪くなりそうなので分離が必要。⇒OK
０１０．XHTML名、XHTMLの配置ディレクトリ名、Javaのパッケージ名の対応付け規則が必要。
０１１．他のManagedBeanを参照する記述は、今後多数現われそうなので、共通化・簡易化が必要。⇒OK
０１２．ログインID、パスワードの入力必須チェックが必要。⇒OK
０１３．エラーメッセージの内容を分かり易く変更する。⇒OK
０１４．エラーメッセージの見栄えをエラーと分かり易く変更する。⇒OK
０１５．エラーメッセージの外部ファイル化。
０１６．スタイルシートを外部ファイル化。⇒OK
０１７．XHTMLの内容が一部が重複(CSSの呼び出し)してきているので共通化が必要。
０１８．画面遷移後のURLが遷移先のXHTMLで無いので、遷移後のXHTML名に出来るか調査。



以上です。

投稿者 0 コメント
ラベル:

JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションの開発(021)

【目的】
JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションを開発する。
※021では、データベースのテーブル定義を作成するためXEAD Modelerでテーブルタイプを登録します。



【手順１】
１．「XEAD Modelerの起動方法」の手順で、XEAD Modelerを起動。
２．左ウィンドウで「書き取りシステム」を選択し、右のウィンドウの「テーブルタイプ一覧」のタブを選択。




【手順２】
１．「XEAD Modelerのテーブルタイプの削除方法」の手順で、不要なテーブルタイプを削除。
２．「XEAD Modelerのテーブルタイプの追加方法」の手順で、テーブルタイプを追加。
※テーブルタイプは「テーブルタイプについて考える(01)」で考えた6種類のテーブルタイプを追加します。
３．「Ctrl+S」で保存。
４．以下の様に登録すれば完了です。






































【課題】
００１．ログインIDのテキストフィールドにフォーカスが入ったときにIMEの入力がなぜか「かなモード」になるのでIMEの制御が必要。⇒OK
００２．画面表示時にログインIDのテキストフィールドにフォーカスの移動が必要。⇒OK
００３．「Tab」キーを押下時に「ログインID」⇒「パスワード」⇒「ログインボタン」⇒最初に戻るの制御が必要。⇒OK
００４．h:panelGridでのカラムの連結方法が不明なので、facetのfooterでカラムを連結させたが、正式なカラムの連結方法があれば変更する。
００５．ログインボタンの横位置を制御し、セル中央に移動させる。⇒OK
００６．ログイン情報のh:panelGrid自体を、画面中央に移動させる。⇒OK
００７．IDの命名方法の検討が必要。
００８．「Tab」キーの押下時にTabIndexが最後の場合、最初のTabIndexに移動する制御が必要。
００９．ManagedBeanに画面の項目値と処理の両方が記述されるので、クラスの見通しが悪くなりそうなので分離が必要。⇒OK
０１０．XHTML名、XHTMLの配置ディレクトリ名、Javaのパッケージ名の対応付け規則が必要。
０１１．他のManagedBeanを参照する記述は、今後多数現われそうなので、共通化・簡易化が必要。⇒OK
０１２．ログインID、パスワードの入力必須チェックが必要。⇒OK
０１３．エラーメッセージの内容を分かり易く変更する。⇒OK
０１４．エラーメッセージの見栄えをエラーと分かり易く変更する。⇒OK
０１５．エラーメッセージの外部ファイル化。
０１６．スタイルシートを外部ファイル化。⇒OK
０１７．XHTMLの内容が一部が重複(CSSの呼び出し)してきているので共通化が必要。
０１８．画面遷移後のURLが遷移先のXHTMLで無いので、遷移後のXHTML名に出来るか調査。



以上です。
投稿者 0 コメント
ラベル:

JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションの開発(020)

【目的】
JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションを開発する。
※020では、データベースのテーブル定義を作成するためXEAD Modelerでプロジェクトを作成します。




【手順１】
１．「XEAD Modelerのダウンロード方法」の手順で、XEAD Modelerをダウンロード。
２．「XEAD Modelerのインストール方法」の手順で、XEAD Modelerをインストール。
３．「XEAD Modelerの起動方法」の手順で、XEAD Modelerを起動。
４．「ファイルを新規作成して開く」を選択し、「C:\devel-myproject\XEAD」の「kakitori.xead」(任意)と指定。
５．以下の様に、XEAD Modelerが開きます。




【手順２】
１．「システム名」を「書き取りシステム」と入力。
２．「Ctrl+S」で保存。



























【課題】
００１．ログインIDのテキストフィールドにフォーカスが入ったときにIMEの入力がなぜか「かなモード」になるのでIMEの制御が必要。⇒OK
００２．画面表示時にログインIDのテキストフィールドにフォーカスの移動が必要。⇒OK
００３．「Tab」キーを押下時に「ログインID」⇒「パスワード」⇒「ログインボタン」⇒最初に戻るの制御が必要。⇒OK
００４．h:panelGridでのカラムの連結方法が不明なので、facetのfooterでカラムを連結させたが、正式なカラムの連結方法があれば変更する。
００５．ログインボタンの横位置を制御し、セル中央に移動させる。⇒OK
００６．ログイン情報のh:panelGrid自体を、画面中央に移動させる。⇒OK
００７．IDの命名方法の検討が必要。
００８．「Tab」キーの押下時にTabIndexが最後の場合、最初のTabIndexに移動する制御が必要。
００９．ManagedBeanに画面の項目値と処理の両方が記述されるので、クラスの見通しが悪くなりそうなので分離が必要。⇒OK
０１０．XHTML名、XHTMLの配置ディレクトリ名、Javaのパッケージ名の対応付け規則が必要。
０１１．他のManagedBeanを参照する記述は、今後多数現われそうなので、共通化・簡易化が必要。⇒OK
０１２．ログインID、パスワードの入力必須チェックが必要。⇒OK
０１３．エラーメッセージの内容を分かり易く変更する。⇒OK
０１４．エラーメッセージの見栄えをエラーと分かり易く変更する。⇒OK
０１５．エラーメッセージの外部ファイル化。
０１６．スタイルシートを外部ファイル化。⇒OK
０１７．XHTMLの内容が一部が重複(CSSの呼び出し)してきているので共通化が必要。
０１８．画面遷移後のURLが遷移先のXHTMLで無いので、遷移後のXHTML名に出来るか調査。



以上です。
投稿者 0 コメント
ラベル:

2012年7月12日木曜日

JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションの開発(019)

【目的】
JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションを開発する。
※019では、開発用のPostgreSQLに018で作成したユーザが所有するデータベースを作成します。




【手順１】
１．「コマンドプロンプトの起動方法」の手順で、コマンドプロンプトを起動。
２．以下のコマンドを入力。
> c:\devel-pgsql\pgsql\bin\createdb.exe -U kakitori-admin kakitori-db
※kakitori-adminは作成したユーザ名
※kakitori-dbは作成したいデータベース名




























【課題】
００１．ログインIDのテキストフィールドにフォーカスが入ったときにIMEの入力がなぜか「かなモード」になるのでIMEの制御が必要。⇒OK
００２．画面表示時にログインIDのテキストフィールドにフォーカスの移動が必要。⇒OK
００３．「Tab」キーを押下時に「ログインID」⇒「パスワード」⇒「ログインボタン」⇒最初に戻るの制御が必要。⇒OK
００４．h:panelGridでのカラムの連結方法が不明なので、facetのfooterでカラムを連結させたが、正式なカラムの連結方法があれば変更する。
００５．ログインボタンの横位置を制御し、セル中央に移動させる。⇒OK
００６．ログイン情報のh:panelGrid自体を、画面中央に移動させる。⇒OK
００７．IDの命名方法の検討が必要。
００８．「Tab」キーの押下時にTabIndexが最後の場合、最初のTabIndexに移動する制御が必要。
００９．ManagedBeanに画面の項目値と処理の両方が記述されるので、クラスの見通しが悪くなりそうなので分離が必要。⇒OK
０１０．XHTML名、XHTMLの配置ディレクトリ名、Javaのパッケージ名の対応付け規則が必要。
０１１．他のManagedBeanを参照する記述は、今後多数現われそうなので、共通化・簡易化が必要。⇒OK
０１２．ログインID、パスワードの入力必須チェックが必要。⇒OK
０１３．エラーメッセージの内容を分かり易く変更する。⇒OK
０１４．エラーメッセージの見栄えをエラーと分かり易く変更する。⇒OK
０１５．エラーメッセージの外部ファイル化。
０１６．スタイルシートを外部ファイル化。⇒OK
０１７．XHTMLの内容が一部が重複(CSSの呼び出し)してきているので共通化が必要。
０１８．画面遷移後のURLが遷移先のXHTMLで無いので、遷移後のXHTML名に出来るか調査。



以上です。

投稿者 0 コメント
ラベル:

JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションの開発(018)

【目的】
JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションを開発する。
※018では、開発用のPostgreSQLにユーザを作成します。




【手順１】
１．「コマンドプロンプトの起動方法」の手順で、コマンドプロンプトを起動。
２．以下のコマンドを入力。
> c:\devel-pgsql\pgsql\bin\createuser.exe kakitori-admin
※kakitori-adminの作成したいユーザ名



























【課題】
００１．ログインIDのテキストフィールドにフォーカスが入ったときにIMEの入力がなぜか「かなモード」になるのでIMEの制御が必要。⇒OK
００２．画面表示時にログインIDのテキストフィールドにフォーカスの移動が必要。⇒OK
００３．「Tab」キーを押下時に「ログインID」⇒「パスワード」⇒「ログインボタン」⇒最初に戻るの制御が必要。⇒OK
００４．h:panelGridでのカラムの連結方法が不明なので、facetのfooterでカラムを連結させたが、正式なカラムの連結方法があれば変更する。
００５．ログインボタンの横位置を制御し、セル中央に移動させる。⇒OK
００６．ログイン情報のh:panelGrid自体を、画面中央に移動させる。⇒OK
００７．IDの命名方法の検討が必要。
００８．「Tab」キーの押下時にTabIndexが最後の場合、最初のTabIndexに移動する制御が必要。
００９．ManagedBeanに画面の項目値と処理の両方が記述されるので、クラスの見通しが悪くなりそうなので分離が必要。⇒OK
０１０．XHTML名、XHTMLの配置ディレクトリ名、Javaのパッケージ名の対応付け規則が必要。
０１１．他のManagedBeanを参照する記述は、今後多数現われそうなので、共通化・簡易化が必要。⇒OK
０１２．ログインID、パスワードの入力必須チェックが必要。⇒OK
０１３．エラーメッセージの内容を分かり易く変更する。⇒OK
０１４．エラーメッセージの見栄えをエラーと分かり易く変更する。⇒OK
０１５．エラーメッセージの外部ファイル化。
０１６．スタイルシートを外部ファイル化。⇒OK
０１７．XHTMLの内容が一部が重複(CSSの呼び出し)してきているので共通化が必要。
０１８．画面遷移後のURLが遷移先のXHTMLで無いので、遷移後のXHTML名に出来るか調査。



以上です。

投稿者 0 コメント
ラベル:

JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションの開発(017)

【目的】
JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションを開発する。
※017では、開発用のPostgreSQLを起動します。



【手順１】
１．「コマンドプロンプトの起動方法」の手順で、コマンドプロンプトを起動。
２．以下のコマンドを入力。
> c:\devel-pgsql\pgsql\bin\pg_ctl.exe -D c:\devel-pgsql\data-kakitori -l logfile start
※c:\devel-pgsql\pgsqlはPostgreSQLのインストールディレクトリ
※c:\devel-pgsql\data-kakitoriはデータベースのデータディレクトリ
※起動後、ウィンドウを閉じるとPostgreSQLは停止するので注意してください。




【手順２】
１．「c:\devel-pgsql\data-kakitori」に「postmaster.pid」というファイルが作成されていれば成功です。







































【課題】
００１．ログインIDのテキストフィールドにフォーカスが入ったときにIMEの入力がなぜか「かなモード」になるのでIMEの制御が必要。⇒OK
００２．画面表示時にログインIDのテキストフィールドにフォーカスの移動が必要。⇒OK
００３．「Tab」キーを押下時に「ログインID」⇒「パスワード」⇒「ログインボタン」⇒最初に戻るの制御が必要。⇒OK
００４．h:panelGridでのカラムの連結方法が不明なので、facetのfooterでカラムを連結させたが、正式なカラムの連結方法があれば変更する。
００５．ログインボタンの横位置を制御し、セル中央に移動させる。⇒OK
００６．ログイン情報のh:panelGrid自体を、画面中央に移動させる。⇒OK
００７．IDの命名方法の検討が必要。
００８．「Tab」キーの押下時にTabIndexが最後の場合、最初のTabIndexに移動する制御が必要。
００９．ManagedBeanに画面の項目値と処理の両方が記述されるので、クラスの見通しが悪くなりそうなので分離が必要。⇒OK
０１０．XHTML名、XHTMLの配置ディレクトリ名、Javaのパッケージ名の対応付け規則が必要。
０１１．他のManagedBeanを参照する記述は、今後多数現われそうなので、共通化・簡易化が必要。⇒OK
０１２．ログインID、パスワードの入力必須チェックが必要。⇒OK
０１３．エラーメッセージの内容を分かり易く変更する。⇒OK
０１４．エラーメッセージの見栄えをエラーと分かり易く変更する。⇒OK
０１５．エラーメッセージの外部ファイル化。
０１６．スタイルシートを外部ファイル化。⇒OK
０１７．XHTMLの内容が一部が重複(CSSの呼び出し)してきているので共通化が必要。
０１８．画面遷移後のURLが遷移先のXHTMLで無いので、遷移後のXHTML名に出来るか調査。



以上です。

投稿者 0 コメント
ラベル:

JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションの開発(016)

【目的】
JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションを開発する。
※016では、開発用のPostgreSQLをローカルのWindowsに作成します。



【手順１】
１．「PostgreSQL9.1.4(解凍版)のダウンロード方法」の手順で、PostgreSQLをダウンロード。
２．「PostgreSQL9.1.4(解凍版)のインストール(解凍)方法」の手順で、PostgreSQLをインストール。
３．「コマンドプロンプトの起動方法」の手順で、コマンドプロンプトを起動。
４．以下のコマンドを入力。
>c:\devel-pgsql\pgsql\bin\initdb.exe -D c:\devel-pgsql\data-kakitori -E UTF8 --locale=C
※c:\devel-pgsql\pgsqlはPostgreSQLのインストールディレクトリ
※c:\devel-pgsql\data-kakitoriはデータベースのデータディレクトリ




【手順２】
１．「c:\devel-pgsql」に「data-kakitori」というディレクトリが作成されていれば成功です。







































【課題】
００１．ログインIDのテキストフィールドにフォーカスが入ったときにIMEの入力がなぜか「かなモード」になるのでIMEの制御が必要。⇒OK
００２．画面表示時にログインIDのテキストフィールドにフォーカスの移動が必要。⇒OK
００３．「Tab」キーを押下時に「ログインID」⇒「パスワード」⇒「ログインボタン」⇒最初に戻るの制御が必要。⇒OK
００４．h:panelGridでのカラムの連結方法が不明なので、facetのfooterでカラムを連結させたが、正式なカラムの連結方法があれば変更する。
００５．ログインボタンの横位置を制御し、セル中央に移動させる。⇒OK
００６．ログイン情報のh:panelGrid自体を、画面中央に移動させる。⇒OK
００７．IDの命名方法の検討が必要。
００８．「Tab」キーの押下時にTabIndexが最後の場合、最初のTabIndexに移動する制御が必要。
００９．ManagedBeanに画面の項目値と処理の両方が記述されるので、クラスの見通しが悪くなりそうなので分離が必要。⇒OK
０１０．XHTML名、XHTMLの配置ディレクトリ名、Javaのパッケージ名の対応付け規則が必要。
０１１．他のManagedBeanを参照する記述は、今後多数現われそうなので、共通化・簡易化が必要。⇒OK
０１２．ログインID、パスワードの入力必須チェックが必要。⇒OK
０１３．エラーメッセージの内容を分かり易く変更する。⇒OK
０１４．エラーメッセージの見栄えをエラーと分かり易く変更する。⇒OK
０１５．エラーメッセージの外部ファイル化。
０１６．スタイルシートを外部ファイル化。⇒OK
０１７．XHTMLの内容が一部が重複(CSSの呼び出し)してきているので共通化が必要。
０１８．画面遷移後のURLが遷移先のXHTMLで無いので、遷移後のXHTML名に出来るか調査。



以上です。

投稿者 0 コメント
ラベル:

2012年7月3日火曜日

JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションの開発(015)

【目的】
JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションを開発する。
※015では、ログイン後のメイン画面を作成します。



【手順１】
１．「任意のディレクトリの作成方法」の手順で、「WebContent」以下に「pages」ディレクトリを作成。
２．「任意のディレクトリの作成方法」の手順で、「WebContent/pages」以下に「main」ディレクトリを作成。
３．「任意のファイルの作成方法」の手順で、「WebContent/pages/main」ディレクトリに「main.xhtml」というファイルを作成。
４．「main.xhtml」を以下の様に作成。

<html xmlns="http://www.w3c.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">
<h:head>
    <h:outputStylesheet library="css" name="common.css" />
    <title>書き取りサービス【メイン画面】</title>
</h:head>
<h:body>
    <div align="center">
        <h:panelGrid columns="2" border="1">
            <h:outputText value="ようこそ" />
            <h:outputText value="#{loginFormBean.loginId}" />
        </h:panelGrid>
    </div>
</h:body>
</html>

５．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
６．「LoginActionBean.java」を以下の様に入力。
※loginの戻り値をString型にし、メイン画面のXHTMLの拡張子無しで指定。

package kakitori.login.managedbean;

import java.io.Serializable;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

import kakitori.common.ManagedBeanUtil;

@ManagedBean
@RequestScoped
public class LoginActionBean implements Serializable {
    private static final long serialVersionUID = -7982056395519095894L;

    public String login() {
        LoginFormBean loginFormBean = (LoginFormBean) ManagedBeanUtil
                .getManagedBean(LoginFormBean.class);

        System.out.println("loginId=" + loginFormBean.getLoginId());
        System.out.println("password=" + loginFormBean.getPassword());

        return "/pages/main/main";
    }
}


７．「サーバーをデバッグモードで起動する方法」の手順で、サーバーを再起動します。
８．ブラウザで以下のURLにアクセスします。
http://localhost:8080/kakitori/faces/index.xhtml

９．以下の様に表示されれば成功です。







































【課題】
００１．ログインIDのテキストフィールドにフォーカスが入ったときにIMEの入力がなぜか「かなモード」になるのでIMEの制御が必要。⇒OK
００２．画面表示時にログインIDのテキストフィールドにフォーカスの移動が必要。⇒OK
００３．「Tab」キーを押下時に「ログインID」⇒「パスワード」⇒「ログインボタン」⇒最初に戻るの制御が必要。⇒OK
００４．h:panelGridでのカラムの連結方法が不明なので、facetのfooterでカラムを連結させたが、正式なカラムの連結方法があれば変更する。
００５．ログインボタンの横位置を制御し、セル中央に移動させる。⇒OK
００６．ログイン情報のh:panelGrid自体を、画面中央に移動させる。⇒OK
００７．IDの命名方法の検討が必要。
００８．「Tab」キーの押下時にTabIndexが最後の場合、最初のTabIndexに移動する制御が必要。
００９．ManagedBeanに画面の項目値と処理の両方が記述されるので、クラスの見通しが悪くなりそうなので分離が必要。⇒OK
０１０．XHTML名、XHTMLの配置ディレクトリ名、Javaのパッケージ名の対応付け規則が必要。
０１１．他のManagedBeanを参照する記述は、今後多数現われそうなので、共通化・簡易化が必要。⇒OK
０１２．ログインID、パスワードの入力必須チェックが必要。⇒OK
０１３．エラーメッセージの内容を分かり易く変更する。⇒OK
０１４．エラーメッセージの見栄えをエラーと分かり易く変更する。⇒OK
０１５．エラーメッセージの外部ファイル化。
０１６．スタイルシートを外部ファイル化。⇒OK
０１７．XHTMLの内容が一部が重複(CSSの呼び出し)してきているので共通化が必要。
０１８．画面遷移後のURLが遷移先のXHTMLで無いので、遷移後のXHTML名に出来るか調査。



以上です。
投稿者 0 コメント
ラベル:

JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションの開発(014)

【目的】
JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションを開発する。
※014では、スタイルシートを外部ファイル化します。



【手順１】
１．「index.xhtml」を以下の様に修正。
※スタイルシートをh:outputStylesheetタグで「resource/css/common.css」ファイルに外部化。
※スタイルシートのfooterの名称をloginFooterに変更。

<html xmlns="http://www.w3c.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">
<h:head>
    <h:outputStylesheet library="css" name="common.css" />
    <title>書き取りサービス【ログイン画面】</title>
</h:head>
<h:body onload="document.getElementById('loginForm:loginId').focus()">
    <h:form id="loginForm">
        <div align="center">
            <h:panelGrid columns="3" border="1" footerClass="loginFooter">
                <h:outputLabel value="ログインID" />
                <h:inputText id="loginId" tabindex="1" style="ime-mode: disabled;"
                    value="#{loginFormBean.loginId}" required="true"
                    requiredMessage="ログインIDが入力されていません" />
                <h:message for="loginId" errorClass="error" />
                <h:outputLabel value="パスワード" />
                <h:inputSecret id="password" tabindex="2"
                    value="#{loginFormBean.password}" required="true"
                    requiredMessage="パスワードが入力されていません" />
                <h:message for="password" errorClass="error" />
                <f:facet name="footer">
                    <h:commandButton value="ログイン" tabindex="3"
                        action="#{loginActionBean.login}" />
                </f:facet>
            </h:panelGrid>
        </div>
    </h:form>
</h:body>
</html>

２．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
３．「任意のディレクトリの作成方法」の手順で、「WebContent」以下に「resources」ディレクトリを作成。
４．「任意のディレクトリの作成方法」の手順で、「WebContent/resources」以下に「css」ディレクトリを作成。
５．「任意のファイルの作成方法」の手順で、「WebContent/resources/css」ディレクトリに「common.css」というファイルを作成。
６．「common.css」を以下の様に入力。
.loginFooter {
    text-align: center;
}

.error {
    font-weight: bold;
    color: red;
}

７．「サーバーをデバッグモードで起動する方法」の手順で、サーバーを再起動します。
８．ブラウザで以下のURLにアクセスします。
http://localhost:8080/kakitori/faces/index.xhtml

９．以下の様に表示されれば成功です。
※前回と変更無く表示される。






































【課題】
００１．ログインIDのテキストフィールドにフォーカスが入ったときにIMEの入力がなぜか「かなモード」になるのでIMEの制御が必要。⇒OK
００２．画面表示時にログインIDのテキストフィールドにフォーカスの移動が必要。⇒OK
００３．「Tab」キーを押下時に「ログインID」⇒「パスワード」⇒「ログインボタン」⇒最初に戻るの制御が必要。⇒OK
００４．h:panelGridでのカラムの連結方法が不明なので、facetのfooterでカラムを連結させたが、正式なカラムの連結方法があれば変更する。
００５．ログインボタンの横位置を制御し、セル中央に移動させる。⇒OK
００６．ログイン情報のh:panelGrid自体を、画面中央に移動させる。⇒OK
００７．IDの命名方法の検討が必要。
００８．「Tab」キーの押下時にTabIndexが最後の場合、最初のTabIndexに移動する制御が必要。
００９．ManagedBeanに画面の項目値と処理の両方が記述されるので、クラスの見通しが悪くなりそうなので分離が必要。⇒OK
０１０．XHTML名、XHTMLの配置ディレクトリ名、Javaのパッケージ名の対応付け規則が必要。
０１１．他のManagedBeanを参照する記述は、今後多数現われそうなので、共通化・簡易化が必要。⇒OK
０１２．ログインID、パスワードの入力必須チェックが必要。⇒OK
０１３．エラーメッセージの内容を分かり易く変更する。⇒OK
０１４．エラーメッセージの見栄えをエラーと分かり易く変更する。⇒OK
０１５．エラーメッセージの外部ファイル化。
０１６．スタイルシートを外部ファイル化。⇒OK



以上です。
投稿者 0 コメント
ラベル:

2012年7月2日月曜日

JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションの開発(013)

【目的】
JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションを開発する。
※013では、ログインID、パスワードの入力必須メッセージの見栄えをエラーと分かり易く変更する。



【手順１】
１．「index.xhtml」を以下の様に修正。
※スタイルシートに.errorを作成し、messageタグの属性にerrorClass="error"として追加。


<html xmlns="http://www.w3c.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">
<h:head>
    <title>書き取りサービス【ログイン画面】</title>
    <style type="text/css">
<!--
.footer {
    text-align: center;
}

.error {
    font-weight: bold;
    color: red;
}
-->
</style>
</h:head>
<h:body onload="document.getElementById('loginForm:loginId').focus()">
    <h:form id="loginForm">
        <div align="center">
            <h:panelGrid columns="3" border="1" footerClass="footer">
                <h:outputLabel value="ログインID" />
                <h:inputText id="loginId" tabindex="1" style="ime-mode: disabled;"
                    value="#{loginFormBean.loginId}" required="true"
                    requiredMessage="ログインIDが入力されていません" />
                <h:message for="loginId" errorClass="error" />
                <h:outputLabel value="パスワード" />
                <h:inputSecret id="password" tabindex="2"
                    value="#{loginFormBean.password}" required="true"
                    requiredMessage="パスワードが入力されていません" />
                <h:message for="password" errorClass="error" />
                <f:facet name="footer">
                    <h:commandButton value="ログイン" tabindex="3"
                        action="#{loginActionBean.login}" />
                </f:facet>
            </h:panelGrid>
        </div>
    </h:form>
</h:body>
</html>

２．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
３．「サーバーをデバッグモードで起動する方法」の手順で、サーバーを再起動します。
４．ブラウザで以下のURLにアクセスします。
http://localhost:8080/kakitori/faces/index.xhtml

５．以下の様に表示されれば成功です。
※ログインID、パスワードを入力せずにログインボタンを押すと、エラーが分かり易く表示されます。






































【課題】
００１．ログインIDのテキストフィールドにフォーカスが入ったときにIMEの入力がなぜか「かなモード」になるのでIMEの制御が必要。⇒OK
００２．画面表示時にログインIDのテキストフィールドにフォーカスの移動が必要。⇒OK
００３．「Tab」キーを押下時に「ログインID」⇒「パスワード」⇒「ログインボタン」⇒最初に戻るの制御が必要。⇒OK
００４．h:panelGridでのカラムの連結方法が不明なので、facetのfooterでカラムを連結させたが、正式なカラムの連結方法があれば変更する。
００５．ログインボタンの横位置を制御し、セル中央に移動させる。⇒OK
００６．ログイン情報のh:panelGrid自体を、画面中央に移動させる。⇒OK
００７．IDの命名方法の検討が必要。
００８．「Tab」キーの押下時にTabIndexが最後の場合、最初のTabIndexに移動する制御が必要。
００９．ManagedBeanに画面の項目値と処理の両方が記述されるので、クラスの見通しが悪くなりそうなので分離が必要。⇒OK
０１０．XHTML名、XHTMLの配置ディレクトリ名、Javaのパッケージ名の対応付け規則が必要。
０１１．他のManagedBeanを参照する記述は、今後多数現われそうなので、共通化・簡易化が必要。⇒OK
０１２．ログインID、パスワードの入力必須チェックが必要。⇒OK
０１３．エラーメッセージの内容を分かり易く変更する。⇒OK
０１４．エラーメッセージの見栄えをエラーと分かり易く変更する。⇒OK
０１５．エラーメッセージの外部ファイル化。
０１６．スタイルシートを外部ファイル化。



以上です。

投稿者 0 コメント
ラベル:

JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションの開発(012)

【目的】
JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションを開発する。
※012では、ログインID、パスワードの入力必須メッセージの内容を分かり易く変更する。



【手順１】
１．「index.xhtml」を以下の様に修正。
※ログインIDとパスワードのフィールドにrequiredMessage属性を追加し、分かりやすいエラーを設定しています。

<html xmlns="http://www.w3c.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">
<h:head>
    <title>書き取りサービス【ログイン画面】</title>
    <style type="text/css">
<!--
.footer {
    text-align: center;
}
-->
</style>
</h:head>
<h:body onload="document.getElementById('loginForm:loginId').focus()">
    <h:form id="loginForm">
        <div align="center">
            <h:panelGrid columns="3" border="1" footerClass="footer">
                <h:outputLabel value="ログインID" />
                <h:inputText id="loginId" tabindex="1" style="ime-mode: disabled;"
                    value="#{loginFormBean.loginId}" required="true"
                    requiredMessage="ログインIDが入力されていません" />
                <h:message for="loginId" />
                <h:outputLabel value="パスワード" />
                <h:inputSecret id="password" tabindex="2"
                    value="#{loginFormBean.password}" required="true"
                    requiredMessage="パスワードが入力されていません" />
                <h:message for="password" />
                <f:facet name="footer">
                    <h:commandButton value="ログイン" tabindex="3"
                        action="#{loginActionBean.login}" />
                </f:facet>
            </h:panelGrid>
        </div>
    </h:form>
</h:body>
</html>

２．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
３．「サーバーをデバッグモードで起動する方法」の手順で、サーバーを再起動します。
４．ブラウザで以下のURLにアクセスします。
http://localhost:8080/kakitori/faces/index.xhtml

５．以下の様に表示されれば成功です。
※ログインID、パスワードを入力せずにログインボタンを押すと、エラーが分かり易く表示されます。






































【課題】
００１．ログインIDのテキストフィールドにフォーカスが入ったときにIMEの入力がなぜか「かなモード」になるのでIMEの制御が必要。⇒OK
００２．画面表示時にログインIDのテキストフィールドにフォーカスの移動が必要。⇒OK
００３．「Tab」キーを押下時に「ログインID」⇒「パスワード」⇒「ログインボタン」⇒最初に戻るの制御が必要。⇒OK
００４．h:panelGridでのカラムの連結方法が不明なので、facetのfooterでカラムを連結させたが、正式なカラムの連結方法があれば変更する。
００５．ログインボタンの横位置を制御し、セル中央に移動させる。⇒OK
００６．ログイン情報のh:panelGrid自体を、画面中央に移動させる。⇒OK
００７．IDの命名方法の検討が必要。
００８．「Tab」キーの押下時にTabIndexが最後の場合、最初のTabIndexに移動する制御が必要。
００９．ManagedBeanに画面の項目値と処理の両方が記述されるので、クラスの見通しが悪くなりそうなので分離が必要。⇒OK
０１０．XHTML名、XHTMLの配置ディレクトリ名、Javaのパッケージ名の対応付け規則が必要。
０１１．他のManagedBeanを参照する記述は、今後多数現われそうなので、共通化・簡易化が必要。⇒OK
０１２．ログインID、パスワードの入力必須チェックが必要。⇒OK
０１３．エラーメッセージの内容を分かり易く変更する。⇒OK
０１４．エラーメッセージの見栄えをエラーと分かり易く変更する。
０１５．エラーメッセージの外部ファイル化。



以上です。
投稿者 0 コメント
ラベル:
登録: コメント (Atom)

関連記事

loading..