Strutsタグをネストして、ラジオボタンセットを作成します.

12888 ワード

JavaScript apache bean jsp struts

2005年12月5日
この記事では、Strutsタグ<logic:iterate/>と<html:radio/>を入れ子にして単一ボタングループを作成することを紹介します.そして、このマークを特定のフォームbeanで指し、単一ボタン値を保存するString[]配列を反復して、同じname属性を各value属性に割り当てる.
ダウンロードを参照して、完全なソースコードの例を取得してください.Strutsフレームをダウンロードする場合は参考資料を参照してください.
5歩のこつ
簡単にするために、前回動的チェックボックスで使用したのと同じ動作例で単一選択ボタンを実証します.私の簡単なユーザーインターフェースは、シングルボタン要素を使用してヒマラヤピーク高さのString[]配列を表示し、第二のselectedMountain String配列は選択された単一選択ボタンを表しています.ボタンを作成した後、JavaScript関数を呼び出して単一ボタンを予選します.
ヒマラヤの例によれば、Strutsで動的に選択されたラジオボタンを作成するコツは、5つの部分を含みます.

は、mountainsおよびselectedMountainのデータを格納する偽のデータクラスである.

のフォームbeanは、単一選択ボタンのString[]配列と、特に選択されたボタンのStringを含む.

フォーム付きJSPは、必要な状態にあるラジオボタンを表示します.

JSPは、フォームで選択された要素を表示します.

クラスのActionは、フォームページから表示ページに移行します.

単一選択ボタンのコツと前回学習した動的チェックボックスのコツの違いは、Strutsが自動的にselected値を作成するツールを提供していないことであり、これは通常動的ラジオボタンを作成するために必要なものである.Struts JSPマークに内蔵された機能でcheckboxとselectの入力タイプを予め選択しておくのは簡単ですが、radio buttonの入力タイプは異なるソリューションを要求します.幸いにも、フォームbeanからの情報とJavaScriptコードを使って、この要求を実現できます.第3ステップに示されています.
第1ステップ.データ層の作成
私は偽のデータクラスを作りました.業務層からのデータをアプリケーションのレイヤーに表示します.ビュー層は私が考えるべきことです.FakeDataという名前のクラスは、リスト1に示されるように、2つの静的方法を含む.
リスト1.FakeData.java


/**
 * class FakeData -- represents the business logic
 */

public class FakeData {

    /**
     * data for mountains
     */
    public static final String[] MOUNTAINS = 
      {"Everest", "K2", "Kangchenjunga",
      "Lhotse", "Makalu", "Cho Oyu"};

    /**
     * data for selected mountain
     */
    public static final String SELECTED_MOUNTAIN = "Kangchenjunga";

}

偽のデータ層を作成するのは有用なユーザーインターフェース開発の実践であり、最終的なアプリケーションで使用する持続的なストレージ層は、フロントエンドの開発者にとっては、通常は見えないからである.したがって、バックグラウンドチームが仕事を完成するのを待つ必要はありません.最後に送信されるAPIと機能をシミュレートするために、偽のデータ層を簡単に開発することができます.偽データ層を使用して、ユーザーインターフェースの開発を行い、他のチームへの依存を低減することができる.偽のデータ層があると、プロジェクトの他の部分のAPI接続も定義され、すべての部分を統合する際に問題が少ないことを確保できる.
ステップ2.フォームバーを作成する
最終的にアプリケーションを塗りつぶす値は、リスト1に示すフレームよりもはるかに複雑なフレームから来るかもしれない.より綺麗な例については、リスト2のフォームbeanは重い仕事をする必要がないので、getterとsetterの方法を持つ簡単なJavaだけです.™ オブジェクト実際の値はコンストラクタを呼び出すときに挿入されます.
リスト2.Radio Test Form.java


package com.strutsrecipes;

import org.apache.struts.action.ActionForm;


/**
 * Radio Button Test Form to show an array of radio buttons and
 */
public class RadioTestForm extends ActionForm {
// ------------------------------ FIELDS ------------------------------

    /**
     * The selected Mountain
     */
    private String selectedMountain;


    /**
     * The list of mountains for the radio button
     */
    private String[] mountains;

// --------------------------- CONSTRUCTORS ---------------------------

    /**
     * Constructor -- using FakeData...
     */
    public RadioTestForm() {
        this.selectedMountain = FakeData.SELECTED_MOUNTAIN;
        this.mountains = FakeData.MOUNTAINS;
    }

// --------------------- GETTER / SETTER METHODS ---------------------

    /**
     * Getter for the mountains
     *
     * @return the mountains array
     */
    public String[] getMountains() {
        return this.mountains;
    }

    /**
     * Setter for the mountains
     *
     * @param m the Mountains array
     */
    public void setMountains(String[] m) {
        this.mountains = m;
    }

    /**
     * Getter for selectedMountain
     *
     * @return the selected mountain
     */
    public String getSelectedMountain() {
        return this.selectedMountain;
    }

    /**
     * Setter for selectedMountain
     *
     * @param sm the selectedMountain
     */
    public void setSelectedMountain(String sm) {
        this.selectedMountain = sm;
    }
}

明確にするために、フォームbeanのJavaコードをすべて含みます.Kangchenjungaは、同時にselectedMountainおよびmountainsフィールドにリストされ、構造関数に実装され、FakeDataクラスで充填されることに留意されたい.今は十分な情報を持っています.KangchenjungaをJSPに渡すことができます.preselectedの初期値として.
ステップ3.ラジオボタンJSPの作成
リスト3はフォームページのJSPコードを含み、フォームページには単一選択ボタンと予選値が含まれている.Javaファイルと論理、HTML、beanタグとフォームの底のJavaScript関数との関係に注意してください.私はmountainsセットを反復して、ラジオボタンを作成します.この作業が完了したら、JavaScriptを追加してselectedMountainの値を充填し、単一選択ボタン配列と比較して正しいボタンを選択します.
リスト3.ラジオボタンと予選値を含むJSP


<%@ taglib uri="/tags/struts-bean" prefix="bean" %>
<%@ taglib uri="/tags/struts-html" prefix="html" %>
<%@ taglib uri="/tags/struts-logic" prefix="logic" %>
<html:html locale="true">
    <head>
        <title><bean:message key="testForm.title"/></title>
        <html:base/>
    </head>

    <body>
    <h3><bean:message key="testForm.heading"/></h3>
    <html:form action="/FormAction" name="testForm"
            type="com.strutsrecipes.RadioTestForm">

        <h4><bean:message key="testForm.instruction"/></h4>

        <!-- gets the selected radio button -->
        <bean:define id="selectedRadio" property="selectedMountain" name="testForm"/>

        <!-- creates the radio button list -->
        <logic:iterate id="mountain" property="mountains" name="testForm">
            <%-- you need this hack to get the value of the mountains to the page --%>
            <bean:define id="mountainValue">
                           <bean:write name="mountain"/>
            </bean:define>
            <html:radio property="selectedMountain" 
                       value="<%=mountainValue%>" 
                       styleId="<%=mountainValue%>"/>
            <bean:write name="mountain"/><br/>
        </logic:iterate><br/>

        <html:submit/>      <html:reset/>
        <script type="text/javascript">
            <!--
          //Either of the following works.  
         //Uncomment the one you wish to try and comment the other out.
        //var selectedRadio = 
          document.getElementById("<bean:write //name="selectedRadio"/>");
	      var selectedRadio = 
          document.forms["testForm"].elements["<bean:write name="selectedRadio"/>"];
	           selectedRadio.checked=true; -->
        </script>
    </html:form>
    </body>
</html:html>

第4ステップ.表示ページの作成
ページは基本的にチェックボックスのコツで使うページと同じです.違いは反復が必要ないだけです.一つの値だけが選択されているからです.必要なのはリスト4に示されているように、beanの中で選択されたmountainだけを一覧表示します.
リスト4.ページを表示するJSP


<%@taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html"%>
<%@taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean"%>
<%@taglib uri="http://jakarta.apache.org/struts/tags-logic" prefix="logic"%>

<%-- html code, etc... --%>
<bean:write name="mountain"/><br/>
<hr size=5 color="black"/>
<%-- some more html code, etc... --%>

第5歩.アクション部門の作成
前の文章で述べたように、Action類はこのコツの他のコンポーネントに比べて、多くの仕事をしていません.ここで行うべきことは、String配列およびselectedMountainの値を得るだけであり、表示ページにそれらを使用することができるようにすることである.
明細書5.アクション類


ipackage com.strutsrecipes;

import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;


/**
 * The Action for the Radio Button test
 */
public final class RadioTestAction extends Action {
// -------------------------- OTHER METHODS --------------------------

    /**
     * The Action for the Radio Button test
     */
    public ActionForward execute(ActionMapping mapping, 
      ActionForm form, HttpServletRequest request, HttpServletResponse response
                                )
        throws ServletException, Exception {
        // Extract attributes needed
        String selectedMountains = ((RadioTestForm) form).getSelectedMountain();
        System.out.println("htmlString RETURNED*********
" + selectedMountains);

        //Save your htmlString in the session
        HttpSession session = request.getSession();
        session.setAttribute(Constants.MOUNTAINS, selectedMountains);
        return (mapping.findForward("success"));
    }
}

こつの裏
コツの裏に本当に役に立つのはJavaScriptです.まず、リスト5でJSPフォーム内のselectedMountainフィールドにJSPスクリプト変数を定義しました.


<bean:define id="selectedRadio" property="selectedMountains" name="testForm"/>

フォームの下にJavaScript関数を作成しました.次の2つの行が含まれています.



var selRadio = document.getElementById("<bean:write name="selectedRadio"/>");
selRadio.checked=true;

クライアントスクリプトの内部で、selRadio JavaScript変数を作成し、ドキュメント内のすべての要素を検索し、id(またはプリコンパイルコード中のstyleId)がselectedRadio変数に一致する要素を検索しました.<html:radio/>にマークされたstyleId属性をその名前/値に合わせて設定することによって、この点を達成しました.JavaScript関数が迅速にページ上のID間を反復する時、単一の単一選択ボタンをselectedに設定するだけです.
代替方法
以下のようなJavaScript方法でも同様の効果が得られます.

		
var selectedRadio =
document.forms["testForm"].elements["<bean:writename="selectedRadio"/>"];
selectedRadio.checked=true;

このスクリプトはname属性ではなくフォーム要素のid属性だけを区別します.どちらの実装も仕事ができますので、具体的にどれを選ぶかは個人の必要と好みによって決まります.JSPフォームページの実際の出力はリスト6のように見える.
明細書6.JSPフォームページの出力


<input type="radio" name="selectedMountain" value="Everest" id="Everest"/>
Everest<br/>

<input type="radio" name="selectedMountain" value="K2" id="K2"/>
K2<br/>

<input type="radio" name="selectedMountain" 
  value="Kangchenjunga" checked="checked" id="Kangchenjunga"/>
Kangchenjunga<br/>

<input type="radio" name="selectedMountain" value="Lhotse" id="Lhotse"/>
Lhotse<br/>

<input type="radio" name="selectedMountain" value="Makalu" id="Makalu"/>
Makalu<br/>

<input type="radio" name="selectedMountain" value="Cho Oyu" id="Cho Oyu"/>
Cho Oyu<br/>

プロジェクトの失敗点についてwindow.openの使用