Skip to content

10. Örnek 08 - Listelerle ilişkili etiketler

Aşağıdaki örnek, listeleri görüntüleyen etiketleri ele almaktadır. Bunlarla bir önceki örnekte de karşılaşmıştık: açılır liste, onay kutuları ve radyo düğmeleri. Test formu şu şekilde olacaktır:

10.1. NetBeans projesi

NetBeans projesi şu şekildedir:

  • [1] dosyasında eylem, [2] dosyasında ise ilgili görünüm yer almaktadır.

[example/example.xml] dosyası uygulamayı yapılandırır:


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
        "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
        "http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>
  <package name="example" namespace="/example" extends="struts-default">
    <action name="Form" class="example.Form">
      <result name="success">/example/Form.JSP</result>
    </action>
  </package>
</struts>

8-9. satırlar, URL'e yapılan bir çağrının [/example/Form.action]'i çağırdığını ve bunun da [/example/Form.JSP] görünümünü oluşturduğunu göstermektedir. Dolayısıyla, [Form] eylemi, [Form.JSP] görünümünün şablonunu oluşturacaktır.

10.2. Uluslararasılaştırılmış mesaj dosyası

Uluslararasılaştırılmış mesajların bulunduğu [messages.properties] dosyası şöyledir:


Form.francais=Fran\u00E7ais
Form.anglais=Anglais
Form.titre=Struts 2 - les tags \u00E0 valeurs multiples
Form.message=Struts 2 - les tags \u00E0 valeurs multiples
Form.langues=langues
Form.select1=1-select1 (multiple=false, size=1)
Form.select2=2-select2 (multiple=true, size=3)
Form.select3=3-select3 (multiple=true, size=3)
Form.select4=4-select4 (multiple=true, size=3)
Form.select5=5-select5 (multiple=true, size=3)
Form.checkboxlist1=6-checkboxlist1
Form.checkboxlist2=7-checkboxlist2
Form.checkboxlist3=8-checkboxlist3
Form.radio1=9-radio1
Form.radio2=10-radio2
Form.radio3=11-radio3
Form.submitText=Valider
Confirmation.message=Confirmation des valeurs saisies
Confirmation.champ=champ
Confirmation.valeur=valeur
Confirmation.select1=1-select1 (multiple=false, size=1)
Confirmation.select2=2-select2 (multiple=false, size=3)
Confirmation.select3=3-select3 (multiple=true, size=3)
Confirmation.select4=4-select4 (multiple=true, size=3)
Confirmation.select5=5-select5 (multiple=true, size=3)
Confirmation.checkboxlist1=6-checkboxlist1
Confirmation.checkboxlist2=7-checkboxlist2
Confirmation.checkboxlist3=8-checkboxlist3
Confirmation.radio1=9-radio1
Confirmation.radio2=10-radio2
Confirmation.radio3=11-radio3

[Form.JSP] görünümü bu mesajları kullanır.

10.3. [Form.JSP] görünümü

[Form.JSP] görünümü şöyledir:


<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
  <head>
    <title><s:text name="Form.titre"/></title>
    <s:head/>
  </head>

  <body background="<s:url value="/ressources/standard.jpg"/>">
    <h2><s:text name="Form.message"/></h2>
    <h3><s:text name="Form.langues"/></h3>
    <ul>
      <li>
        <s:url id="URL" action="Form">
          <s:param name="request_locale">en</s:param>
        </s:url>
        <s:a href="%{URL}"><s:text name="Form.anglais"/></s:a>
        </li>
        <li>
        <s:url id="URL" action="Form">
          <s:param name="request_locale">fr</s:param>
        </s:url>
        <s:a href="%{URL}"><s:text name="Form.francais"/></s:a>
        </li>
      </ul>
    <s:form name="formulaire">
      <s:select name="select1" list="{'vert','jaune','rouge'}" size="1" key="Form.select1"/>
      <s:select name="select2" list="{'vert','jaune','rouge'}" size="3" key="Form.select2" multiple="true"/>
      <s:select name="select3" list="#{'01':'vert(01)','02':'jaune(02)','03':'rouge(03)','04':'blanc(04)','05':'noir(05)'}" size="3" key="Form.select3" multiple="true"/>
      <s:select name="select4" list="dico" size="3" key="Form.select4" multiple="true"/>
      <s:select name="select5" list="couleurs" listKey="id" listValue="nom" size="3" key="Form.select5" multiple="true" />
      <s:checkboxlist name="checkboxlist1" list="#{'01':'vert(01)','02':'jaune(02)','03':'rouge(03)','04':'blanc(04)','05':'noir(05)'}" key="Form.checkboxlist1"/>
      <s:checkboxlist name="checkboxlist2" list="dico" key="Form.checkboxlist2"/>
      <s:checkboxlist name="checkboxlist3" list="couleurs" listKey="id" listValue="nom" key="Form.checkboxlist3" />
      <s:radio name="radio1" list="#{'01':'vert(01)','02':'jaune(02)','03':'rouge(03)','04':'blanc(04)','05':'noir(05)'}" key="Form.radio1"/>
      <s:radio name="radio2" list="dico" key="Form.radio2"/>
      <s:radio name="radio3" list="couleurs" listKey="id" listValue="nom" key="Form.radio3" />
      <s:submit key="Form.submitText" name="submitText"/>
    </s:form>
    <hr/>
    <h2><s:text name="Confirmation.message"/></h2>
    <table border="1">
      <tr>
        <th><s:text name="Confirmation.champ"/></th>
        <th><s:text name="Confirmation.valeur"/></th>
      </tr>
      <tr>
        <td><s:text name="Form.select1"/></td>
        <td><s:property value="select1"/>
      </tr>
      <tr>
        <td><s:text name="Form.select2"/></td>
        <td><s:property value="select2SelectedValues"/>
      </tr>
      <tr>
        <td><s:text name="Form.select3"/></td>
        <td><s:property value="select3SelectedValues"/>
      </tr>
      <tr>
        <td><s:text name="Form.select4"/></td>
        <td><s:property value="select4SelectedValues"/>
      </tr>
      <tr>
        <td><s:text name="Form.select5"/></td>
        <td><s:property value="select5SelectedValues"/>
      </tr>
      <tr>
        <td><s:text name="Form.checkboxlist1"/></td>
        <td><s:property value="checkboxlist1SelectedValues"/>
      </tr>
      <tr>
        <td><s:text name="Form.checkboxlist2"/></td>
        <td><s:property value="checkboxlist2SelectedValues"/>
      </tr>
      <tr>
        <td><s:text name="Form.checkboxlist3"/></td>
        <td><s:property value="checkboxlist3SelectedValues"/>
      </tr>
      <tr>
        <td><s:text name="Form.radio1"/></td>
        <td><s:property value="radio1"/>
      </tr>
      <tr>
        <td><s:text name="Form.radio2"/></td>
        <td><s:property value="radio2"/>
      </tr>
      <tr>
        <td><s:text name="Form.radio3"/></td>
        <td><s:property value="radio3"/>
      </tr>
    </table>
  </body>
</html>

Formdaki çeşitli giriş etiketlerini inceleyelim:

  • 27. satır: <s:select> etiketi: 

      <s:select name="select1" list="{'vert','jaune','rouge'}" size="1" key="Form.select1"/>

Bu etiket şu HTML kodunu oluşturacaktır:

1
2
3
4
5
<select name="select1" size="1" id="Form_select1">
    <option value="vert">vert</option>
    <option value="jaune" selected="selected">jaune</option>
    <option value="rouge">rouge</option>
</select>

list özniteliğinin değeri, seçeneklerin değerlerini ve etiketlerini oluşturmak için kullanılan bir karakter dizisi tablosudur. İlgili şablon, aşağıdaki [Form] eyleminin select1 alanıdır:


  private String select1 = "jaune";

Bu alan, select1 adlı etikete okuma ve yazma işlemleri için eşleştirilmiştir. Yazma işleminde, seçilen seçeneğin değeri select1 alanına aktarılır. Okuma işleminde ise select1 alanının değeri, seçilen seçeneği belirlemek için kullanılır. Burada, select1 alanının jaune değeri, sarı değerine sahip select1 etiketindeki seçeneği seçmek için kullanılır. Bu nedenle, 3. satırda seçenek seçilmiştir.

  • 28. satır 

<s:select name="select2" list="{'vert','jaune','rouge'}" size="3" key="Form.select2" multiple="true"/>
  1. satırdaki etiketle temel bir fark yoktur; tek fark, burada seçimin çoklu olmasıdır. Dolayısıyla gönderilen değer, seçilen seçeneklerin değerlerinden oluşan bir dizidir. Formla ilişkili eylemin select2 alanı şöyledir:

  private String[] select2 = new String[]{"vert", "rouge"};

Bu gerçekten bir dizidir. Başlangıç değeri, değerleri dizide bulunan seçenekleri seçmek için kullanılır.

  • 29. satır 

      <s:select name="select3" list="#{'01':'vert(01)','02':'jaune(02)','03':'rouge(03)','04':'blanc(04)','05':'noir(05)'}" size="3" key="Form.select3" multiple="true"/>

Burada, list özniteliğinin değeri, anahtarları seçeneklerin değerleri olarak, ilişkili değerleri ise seçeneklerin etiketleri olarak kullanılan bir sözlüktür. Oluşturulan HTML kodu şöyledir:

1
2
3
4
5
6
7
<select name="select3" size="3" id="Form_select3" multiple="multiple">
    <option value="01" selected="selected">vert(01)</option>
    <option value="02">jaune(02)</option>
    <option value="03" selected="selected">rouge(03)</option>
    <option value="04">blanc(04)</option>
    <option value="05">noir(05)</option>
</select>

Eylemdeki ilgili alan şöyledir:


  private String[] select3 = new String[]{"01", "03"};

İlişkili etiket çoklu seçim olduğundan yine bir değerler dizisi ile karşı karşıyayız. Dizinin başlangıç değerleri, 2. ve 4. satırlardaki seçeneklerin başlangıçta neden seçili olduğunu açıklıyor.

  • 30. satır 

      <s:select name="select4" list="dico" size="3" key="Form.select4" multiple="true"/>

Burada, listedeki seçenekler görünüm şablonu tarafından sağlanacaktır; bu şablon, burada [Form] eyleminin bir parçasıdır:


private HashMap<String, String> dico = new HashMap<String, String>();

dico sözlüğündeki anahtarlar, seçeneklerin değerleri olacaktır. dico sözlüğündeki değerler ise seçeneklerin etiketleri olacaktır. Eylemin select4 alanı şu şekildedir:


  private String[] select4 = new String[]{"1", "3"};

Bu, select4 etiketiyle gönderilen değerleri alacak bir değer tablosudur.

  • 31. satır 

<s:select name="select5" list="couleurs" listKey="id" listValue="nom" size="3" key="Form.select5" multiple="true" />

Seçenek listesi, list özniteliği ile tanımlanan couleurs alanı tarafından oluşturulur. [Form] eyleminin couleurs alanı şu şekilde tanımlanmıştır:


private Couleur[] couleurs;

[Couleur] sınıfı şu şekilde tanımlanmıştır:


package example;

public class Couleur {

  // alanlar
  private String id;
  private String nom;

  // oluşturucu
  public Couleur(){
  }

  // getter ve setter'lar
...  
}

Bu etiket, id ve nom adlı iki alana sahiptir. select5 etiketinde şu değerler yer almaktadır: listKey="id", listValue="nom".. Bu, id alanı bir seçeneğin değeri olarak, nom alanı ise açıklama olarak kullanılacaktır. Unutulmamalıdır ki, kaydedilenler seçeneklerin değerleridir. Bu değerler, aşağıdaki select5 alanına kaydedilecektir:


  private String[] select5 = new String[]{"1", "3"};
  • 32. satır 

<s:checkboxlist name="checkboxlist1" list="#{'01':'vert(01)','02':'jaune(02)','03':'rouge(03)','04':'blanc(04)','05':'noir(05)'}" key="Form.checkboxlist1"/>

Bu etiket, aşağıdaki HTML kodunu oluşturacaktır:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<input type="checkbox" name="checkboxlist1" value="01" id="checkboxlist1-1" checked="checked"/>
<label for="checkboxlist1-1" class="checkboxLabel">vert(01)</label>
<input type="checkbox" name="checkboxlist1" value="02" id="checkboxlist1-2"/>
<label for="checkboxlist1-2" class="checkboxLabel">jaune(02)</label>
<input type="checkbox" name="checkboxlist1" value="03" id="checkboxlist1-3" checked="checked"/>
<label for="checkboxlist1-3" class="checkboxLabel">rouge(03)</label>
<input type="checkbox" name="checkboxlist1" value="04" id="checkboxlist1-4"/>
<label for="checkboxlist1-4" class="checkboxLabel">blanc(04)</label>
<input type="checkbox" name="checkboxlist1" value="05" id="checkboxlist1-5"/>
<label for="checkboxlist1-5" class="checkboxLabel">noir(05)</label>

Tüm onay kutularının adı checkboxlist1'tir. Her biri işaretlenebileceğinden, birden fazla checkboxlist1 parametresi gönderilebilir. Bu nedenle, şablondaki checkboxlist1 alanının dizi türü olması gerekir. 22. satırdaki list özniteliği, anahtarları onay kutularının value özniteliklerini, değerleri ise bu onay kutularının etiketlerini oluşturan bir sözlüktür. [Form] eyleminin checkboxlist1 alanı şu şekildedir:


private String[] checkboxlist1 = new String[]{"01", "03"};
  • 33. satır 

      <s:checkboxlist name="checkboxlist2" list="dico" key="Form.checkboxlist2"/>

Bu etiket, daha önce incelenen select4 etiketi gibi çalışır. İşlemdeki ilgili alan şöyledir:


  private String[] checkboxlist2 = new String[]{"1", "3"};
  • satır 34 

      <s:checkboxlist name="checkboxlist3" list="couleurs" listKey="id" listValue="nom" key="Form.checkboxlist3" />

Bu etiket, daha önce incelenen select5 etiketi gibi çalışır. Eylemdeki ilgili checkboxlist3 alanı şöyledir:


  private String[] checkboxlist3 = new String[]{"1", "3"};
  • satır 35 

      <s:radio name="radio1" list="#{'01':'vert(01)','02':'jaune(02)','03':'rouge(03)','04':'blanc(04)','05':'noir(05)'}" key="Form.radio1"/>

Bu etiket, prensip olarak daha önce incelenen select3 etiketiyle aynı şekilde çalışır. Oluşturulan HTML kodu şöyledir:

1
2
3
4
5
<input type="radio" name="radio1" id="Form_radio101" checked="checked" value="01"/><label for="Form_radio101">vert(01)</label>
<input type="radio" name="radio1" id="Form_radio102" value="02"/><label for="Form_radio102">jaune(02)</label>
<input type="radio" name="radio1" id="Form_radio103" value="03"/><label for="Form_radio103">rouge(03)</label>
<input type="radio" name="radio1" id="Form_radio104" value="04"/><label for="Form_radio104">blanc(04)</label>
<input type="radio" name="radio1" id="Form_radio105" value="05"/><label for="Form_radio105">noir(05)</label>

Tüm etiketlerin adı radio1'tir. Yalnızca bir radyo düğmesi işaretlenebilir. Dolayısıyla, yalnızca işaretlenen radyo düğmesinin değeri gönderilir. list sözlüğündeki anahtarlar, radyo düğmelerinin value özniteliklerini oluşturmak için kullanılırken, sözlükteki değerler ise bu düğmelerle ilişkili etiketleri oluşturmak için kullanılır. Eylemde ilişkili radio1 alanı şöyledir:


  private String radio1="01";
  • 36. satır 

      <s:radio name="radio2" list="dico" key="Form.radio2"/>

Bu etiket, prensip olarak select4 etiketiyle aynı şekilde çalışır. Eylemde ilişkili radio2 alanı şöyledir:


  private String radio2="1";
  • satır 37 

      <s:radio name="radio3" list="couleurs" listKey="id" listValue="nom" key="Form.radio3" />

Bu etiket, prensip olarak select5 etiketiyle aynı şekilde çalışır. Eylemde ilişkili radio3 alanı şöyledir:


  private String radio3="1";

Formun saisie bölümü bu kadar. Ayrıca, önceki örnekteki forma benzer bir confirmation bölümü de vardır: bu bölüm, gönderilen değerleri onaylar. Yalnızca aşağıdaki satırları açıklayacağız:


      <tr>
        <td><s:text name="Form.select2"/></td>
        <td><s:property value="select2SelectedValues"/>
</tr>

Bu satır görsel olarak aşağıdakine karşılık gelir:

  

Soldaki hücredeki metin, [messages.properties] dosyasından alınmıştır:


Form.select2=2-select2 (multiple=true, size=3)

Sağdaki hücredeki metin, [Form] eyleminin getSelect2SelectedValues yöntemi tarafından oluşturulmuştur:


// açılır listelerden seçilen değerler
  public String getSelect2SelectedValues() {
    return getArrayValue(select2);
  }

  // yardımcı yöntemler
  public String getArrayValue(String[] values) {
    String result = "";
    for (String value : values) {
      result += " " + value;
    }
    return result;
  }

getSelect2SelectedValues yöntemi, select2 tablosundaki değerleri bir karakter dizisi biçiminde döndürür.

10.4. [Form] eylemi

[Form.JSP] görünümünü yorumlarken, ilgili [Form] eyleminin alanlarını sunmuştuk. [Form] eyleminin kodu şöyledir:


package example;

import com.opensymphony.xwork2.ActionSupport;
import java.util.HashMap;

public class Form extends ActionSupport {

  // form alanları
  private String select1 = "jaune";
  private String[] select2 = new String[]{"vert", "rouge"};
  private String[] select3 = new String[]{"01", "03"};
  private String[] select4 = new String[]{"1", "3"};
  private String[] select5 = new String[]{"1", "3"};
  private HashMap<String, String> dico = new HashMap<String, String>();
  private Couleur[] couleurs;
  private String[] checkboxlist1 = new String[]{"01", "03"};
  private String[] checkboxlist2 = new String[]{"1", "3"};
  private String[] checkboxlist3 = new String[]{"1", "3"};
  private String radio1="01";
  private String radio2="1";
  private String radio3="1";

  private String submitText;

  // parametresiz oluşturucu
  public Form() {
    // renk sözlüğünü başlatma
    dico.put("1", "vert(1)");
    dico.put("2", "jaune(2)");
    dico.put("3", "bleu(3)");
    dico.put("4", "rouge(4)");
    dico.put("5", "blanc(5)");

    // Renk nesneleri dizisini başlat
    couleurs = new Couleur[dico.size()];
    int i = 0;
    for (String key : dico.keySet()) {
      couleurs[i] = new Couleur();
      couleurs[i].setId(key);
      couleurs[i].setNom(dico.get(key));
      i++;
    }
  }

  // açılır listelerden seçilen değerler
  public String getSelect2SelectedValues() {
    return getArrayValue(select2);
  }

  public String getSelect3SelectedValues() {
    return getArrayValue(select3);
  }

  public String getSelect4SelectedValues() {
    return getArrayValue(select4);
  }

  public String getSelect5SelectedValues() {
    return getArrayValue(select5);
  }

  public String getCheckboxlist1SelectedValues() {
    return getArrayValue(checkboxlist1);
  }

  public String getCheckboxlist2SelectedValues() {
    return getArrayValue(checkboxlist2);
  }
  public String getCheckboxlist3SelectedValues() {
    return getArrayValue(checkboxlist3);
  }

  // yardımcı yöntemler
  public String getArrayValue(String[] values) {
    String result = "";
    for (String value : values) {
      result += " " + value;
    }
    return result;
  }

  // alıcı ve ayarlayıcılar
   ...
}

Bu eylemde execute adlı bir yöntem bulunmamaktadır. Bu nedenle, üst sınıf olan ActionSupport'in execute yöntemi yürütülür. Bu yöntem hiçbir işlem yapmaz ve yalnızca SUCCESS gezinme anahtarını döndürür.

10.5. Testler

Okuyucunun [exemple-08] uygulamasını test etmesi önerilir.

https://stahe.github.io
Serge Tahé tarafından yazılan bu kurs-eğitim kılavuzu, aşağıdaki lisans koşullarına göre kamuoyuna sunulmaktadır: Creative Commons Atıf – Ticari Olmayan Kullanım – Aynı Lisansla Paylaşım 3.0 Değiştirilmemiş.