JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションを開発する。
※008では、ManagedBeanを作成し、値をManagedBeanに格納します。
【手順１】
１．「index.xhtml」を以下の様に修正。
※h:formタグを追加、追加に伴い、bodyのonLoadのJavaScriptを変更。
※ログインID、パスワードのvalue属性にManagedBeanの各値を設定。
※ログインボタンにaction属性にManagedBeanの関数を設定。
<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="2" border="1" footerClass="footer">
<h:outputLabel value="ログインID" />
<h:inputText id="loginId" tabindex="1" style="ime-mode: disabled;"
value="#{loginBean.loginId}" />
<h:outputLabel value="パスワード" />
<h:inputSecret id="password" tabindex="2"
value="#{loginBean.password}" />
<f:facet name="footer">
<h:commandButton value="ログイン" tabindex="3"
action="#{loginBean.login}" />
</f:facet>
</h:panelGrid>
</div>
</h:form>
</h:body>
</html>
２．「Javaパッケージの作成方法」の手順で、「kakitori.login」というパッケージを作成。
３．「Javaクラスファイルの作成方法」の手順で、「LoginBean.java」というクラスファイルを作成。
４．「LoginBean.java」を以下の様に入力。
package kakitori.login;
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class LoginBean implements Serializable {
private static final long serialVersionUID = -2100392842724541760L;
public String loginId;
public String password;
public String getLoginId() {
return loginId;
}
public void setLoginId(String loginId) {
this.loginId = loginId;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public void login() {
System.out.println("loginId=" + this.loginId);
System.out.println("password=" + this.password);
}
}
５．「サーバーをデバッグモードで起動する方法」の手順で、サーバーを再起動します。
６．ブラウザで以下のURLにアクセスします。
http://localhost:8080/kakitori/faces/index.xhtml
７．以下の様に表示されれば成功です。
※ログインID、パスワードを入力後、ログインボタンを押すと、Eclipseのコンソールに入力した値が出力されます。
-01.png)
-02.png)
【課題】
００１．ログインIDのテキストフィールドにフォーカスが入ったときにIMEの入力がなぜか「かなモード」になるのでIMEの制御が必要。⇒OK
００２．画面表示時にログインIDのテキストフィールドにフォーカスの移動が必要。⇒OK
００３．「Tab」キーを押下時に「ログインID」⇒「パスワード」⇒「ログインボタン」⇒最初に戻るの制御が必要。⇒OK
００４．h:panelGridでのカラムの連結方法が不明なので、facetのfooterでカラムを連結させたが、正式なカラムの連結方法があれば変更する。
００５．ログインボタンの横位置を制御し、セル中央に移動させる。⇒OK
００６．ログイン情報のh:panelGrid自体を、画面中央に移動させる。⇒OK
００７．IDの命名方法の検討が必要。
００８．「Tab」キーの押下時にTabIndexが最後の場合、最初のTabIndexに移動する制御が必要。
００９．ManagedBeanに画面の項目値と処理の両方が記述されるので、クラスの見通しが悪くなりそうなので分離が必要。
０１０．XHTML名、XHTMLの配置ディレクトリ名、Javaのパッケージ名の対応付け規則が必要。
以上です。
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。