最近の更新

2012年7月2日月曜日

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

【目的】
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 件のコメント:

コメントを投稿

注: コメントを投稿できるのは、このブログのメンバーだけです。

関連記事