JSF2.1+RichFaces4.2.2による実践的なWebアプリケーションを開発する。
※013では、ログインID、パスワードの入力必須メッセージの見栄えをエラーと分かり易く変更する。
【手順1】
1.「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>
2.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
3.「サーバーをデバッグモードで起動する方法」の手順で、サーバーを再起動します。
4.ブラウザで以下のURLにアクセスします。
http://localhost:8080/kakitori/faces/index.xhtml
5.以下の様に表示されれば成功です。
※ログインID、パスワードを入力せずにログインボタンを押すと、エラーが分かり易く表示されます。
【課題】
001.ログインIDのテキストフィールドにフォーカスが入ったときにIMEの入力がなぜか「かなモード」になるのでIMEの制御が必要。⇒OK
002.画面表示時にログインIDのテキストフィールドにフォーカスの移動が必要。⇒OK
003.「Tab」キーを押下時に「ログインID」⇒「パスワード」⇒「ログインボタン」⇒最初に戻るの制御が必要。⇒OK
004.h:panelGridでのカラムの連結方法が不明なので、facetのfooterでカラムを連結させたが、正式なカラムの連結方法があれば変更する。
005.ログインボタンの横位置を制御し、セル中央に移動させる。⇒OK
006.ログイン情報のh:panelGrid自体を、画面中央に移動させる。⇒OK
007.IDの命名方法の検討が必要。
008.「Tab」キーの押下時にTabIndexが最後の場合、最初のTabIndexに移動する制御が必要。
009.ManagedBeanに画面の項目値と処理の両方が記述されるので、クラスの見通しが悪くなりそうなので分離が必要。⇒OK
010.XHTML名、XHTMLの配置ディレクトリ名、Javaのパッケージ名の対応付け規則が必要。
011.他のManagedBeanを参照する記述は、今後多数現われそうなので、共通化・簡易化が必要。⇒OK
012.ログインID、パスワードの入力必須チェックが必要。⇒OK
013.エラーメッセージの内容を分かり易く変更する。⇒OK
014.エラーメッセージの見栄えをエラーと分かり易く変更する。⇒OK
015.エラーメッセージの外部ファイル化。
016.スタイルシートを外部ファイル化。
以上です。
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。