しがないプログラマーの備忘録: JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションの開発(009)

【目的】
JSF2.1＋RichFaces4.2.2による実践的なWebアプリケーションを開発する。
※009では、ManagedBeanを、フォームの値を格納するFormBeanと処理を行うActionBeanに分けます。

【手順１】
１．「index.xhtml」を以下の様に修正。
※ログインID、パスワードのvalue属性のManagedBean名をloginFormBeanに変更。
※ログインボタンのaction属性のManagedBean名をloginActionBeanに変更。

<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="#{loginFormBean.loginId}" />
                <h:outputLabel value="パスワード" />
                <h:inputSecret id="password" tabindex="2"
                    value="#{loginFormBean.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」でファイルを保存。
３．「kakitori.login.LoginBean.java」を選択し、「Deleteキー」を押し、削除。
４．「Javaパッケージの作成方法」の手順で、「kakitori.login.managedbean」というパッケージを作成。
５．「Javaクラスファイルの作成方法」の手順で、「LoginFormBean.java」というクラスファイルを作成。
６．「LoginFromBean.java」を以下の様に入力。

package kakitori.login.managedbean;

import java.io.Serializable;

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

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

    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;
    }
}

７．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
８．「Javaクラスファイルの作成方法」の手順で、「LoginActionBean.java」というクラスファイルを作成。
９．「LoginActionBean.java」を以下の様に入力。

package kakitori.login.managedbean;

import java.io.Serializable;

import javax.el.ELContext;
import javax.el.ExpressionFactory;
import javax.el.ValueExpression;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.context.FacesContext;

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

    public void login() {
        FacesContext facesContext = FacesContext.getCurrentInstance();
        ELContext elContext = facesContext.getELContext();
        ExpressionFactory expressionFactory = facesContext.getApplication()
                .getExpressionFactory();
        ValueExpression valueExpression = expressionFactory
                .createValueExpression(elContext, "#{loginFormBean}",
                        LoginFormBean.class);
        LoginFormBean loginFormBean = (LoginFormBean) valueExpression
                .getValue(elContext);

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

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

http://localhost:8080/kakitori/faces/index.xhtml

１３．以下の様に表示されれば成功です。
※ログインID、パスワードを入力後、ログインボタンを押すと、Eclipseのコンソールに入力した値が出力されます。

【課題】
００１．ログイン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を参照する記述は、今後多数現われそうなので、共通化・簡易化が必要。

以上です。

しがないプログラマーの備忘録

ページ

最近の更新

2012年7月1日日曜日

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

0 件のコメント:

コメントを投稿

関連記事