JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションを開発する。
※003では、ログイン画面の表示時のフォーカス処理を追加します。
【手順１】
１．「index.xhtml」を以下の様に修正。
※ログインIDのテキストフィールドにid="loginId"を追加。
※bodyのonload属性にログインIDのフォーカスJavaScriptを追加。
<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>
</h:head>
<h:body onload="loginId.focus()">
<h:panelGrid columns="2" border="1">
<h:outputLabel value="ログインID" />
<h:inputText id="loginId" />
<h:outputLabel value="パスワード" />
<h:inputSecret />
<f:facet name="footer">
<h:commandButton value="ログイン" />
</f:facet>
</h:panelGrid>
</h:body>
</html>
２．「サーバーをデバッグモードで起動する方法」の手順で、サーバーを再起動します。
３．ブラウザで以下のURLにアクセスします。
http://localhost:8080/kakitori/faces/index.xhtml
４．以下の様に表示されれば成功です。
※フォーカスがログインIDのテキストボックスに移動しています。
-01.png)
【課題】
００１．ログインIDのテキストフィールドにフォーカスが入ったときにIMEの入力がなぜか「かなモード」になるのでIMEの制御が必要。
００２．画面表示時にログインIDのテキストフィールドにフォーカスの移動が必要。⇒OK
００３．「Tab」キーを押下時に「ログインID」⇒「パスワード」⇒「ログインボタン」⇒最初に戻るの制御が必要。
００４．h:panelGridでのカラムの連結方法が不明なので、facetのfooterでカラムを連結させたが、正式なカラムの連結方法があれば変更する。
００５．ログインボタンの横位置を制御し、セル中央に移動させる。
００６．ログイン情報のh:panelGrid自体を、画面中央に移動させる。
００７．IDの命名方法の検討が必要。
以上です。
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。