JSF - h: seleziona OneRadio

Il tag h: selectOneRadio rende un insieme di elementi di input HTML di tipo "radio". Formattalo con tabelle HTML e tag di etichette.

Tag JSF

<h:selectOneRadio value = "#{userData.data}"> 
   <f:selectItem itemValue = "1" itemLabel = "Item 1" /> 
   <f:selectItem itemValue = "2" itemLabel = "Item 2" />
</h:selectOneRadio>

Output renderizzato

<table>
   <tr>
      <td>
         <input type = "radio" checked = "checked" name = "j_idt6:j_idt8" 
            id = "j_idt6:j_idt8:0" value = "1" />
         <label for = "j_idt6:j_idt8:0"> Item 1</label>
      </td>
      
      <td>
         <input type = "radio" name = "j_idt6:j_idt8" 
            id = "j_idt6:j_idt8:1" value = "2" />
         <label for = "j_idt6:j_idt8:1"> Item 2</label>
      </td>
   </tr>
</table>

Attributi dei tag

S.No	Attributo e descrizione
1	id Identificatore di un componente
2	binding Riferimento al componente che può essere utilizzato in un backing bean
3	rendered Un booleano; false sopprime il rendering
4	styleClass Nome della classe CSS (Cascading stylesheet)
5	value Il valore di un componente, in genere un'associazione di valori
6	valueChangeListener Un metodo che si lega a un metodo che risponde alle modifiche del valore
7	converter Nome della classe del convertitore
8	validator Nome della classe di un validatore creato e collegato a un componente
9	required Un booleano; se vero, richiede l'inserimento di un valore nel campo associato
10	accesskey Una chiave, tipicamente combinata con una metakey definita dal sistema, che mette a fuoco un elemento
11	accept Elenco separato da virgole di tipi di contenuto per un modulo
12	accept-charset Elenco separato da virgole o spazi di codifiche di caratteri per un modulo. Ilaccept-charset l'attributo è specificato con l'attributo HTML JSF denominato acceptcharset.
13	alt Testo alternativo per elementi non testuali come immagini o applet
14	charset Codifica dei caratteri per una risorsa collegata
15	coords Coordinate per un elemento la cui forma è un rettangolo, un cerchio o un poligono
16	dir Direzione per il testo. I valori validi sonoltr (da sinistra a destra) e rtl (da destra a sinistra)
17	disabled Stato disabilitato di un elemento o pulsante di input
18	hreflang Lingua di base di una risorsa specificata con href attributo; hreflang può essere utilizzato solo con href.
19	lang Lingua di base degli attributi e del testo di un elemento
20	maxlength Numero massimo di caratteri per i campi di testo
21	readonly Stato di sola lettura di un campo di input; il testo può essere selezionato in un campo di sola lettura ma non modificato
22	rel Relazione tra il documento corrente e un collegamento specificato con il href attributo
23	rev Collegamento inverso dall'ancoraggio specificato con hrefal documento corrente. Il valore dell'attributo è un elenco di tipi di collegamento separato da spazi
24	rows Numero di righe visibili in un'area di testo. h:dataTable ha un rows attributo, ma non è un attributo pass-through HTML.
25	shape Forma di una regione. Valori validi:default, rect, circle, poly. (l'impostazione predefinita indica l'intera regione)
26	style Informazioni sullo stile in linea
27	tabindex Valore numerico che specifica un indice di tabulazione
28	target Il nome di un frame in cui viene aperto un documento
29	title Un titolo, utilizzato per l'accessibilità, che descrive un elemento. I browser visivi in genere creano suggerimenti per il valore del titolo
30	type Tipo di collegamento; per esempio,stylesheet
31	width Larghezza di un elemento
32	onblur L'elemento perde la concentrazione
33	onchange Il valore dell'elemento cambia
34	onclick Si fa clic sul pulsante del mouse sull'elemento
35	ondblclick Si fa doppio clic sul pulsante del mouse sull'elemento
36	onfocus L'elemento riceve il fuoco
37	onkeydown Viene premuto il tasto
38	onkeypress Il tasto viene premuto e successivamente rilasciato
39	onkeyup La chiave viene rilasciata
40	onmousedown Il pulsante del mouse viene premuto sull'elemento
41	onmousemove Il mouse si sposta sull'elemento
42	onmouseout Il mouse lascia l'area dell'elemento
43	onmouseover Il mouse si sposta su un elemento
44	onmouseup Il pulsante del mouse viene rilasciato
45	onreset Il modulo viene ripristinato
46	onselect Il testo viene selezionato in un campo di immissione
47	disabledClass Classe CSS per elementi disabilitati
48	enabledClass Classe CSS per elementi abilitati
49	layout Specifica della disposizione degli elementi: lineDirection (orizzontale) o pageDirection (verticale)
50	border Bordo dell'elemento

Applicazione di esempio

Creiamo un'applicazione JSF di prova per testare il tag precedente.

Passo	Descrizione
1	Creare un progetto con un nome helloworld sotto un pacchetto com.tutorialspoint.test come spiegato nel capitolo JSF - Prima applicazione .
2	Modifica home.xhtml come spiegato di seguito. Mantieni invariato il resto dei file.
3	Crea result.xhtml nella directory webapps come spiegato di seguito.
4	Creare UserData.java come bean gestito nel pacchetto com.tutorialspoint.test come spiegato di seguito.
5	Compilare ed eseguire l'applicazione per assicurarsi che la logica aziendale funzioni secondo i requisiti.
6	Infine, crea l'applicazione sotto forma di file war e distribuiscila in Apache Tomcat Webserver.
7	Avvia la tua applicazione web utilizzando l'URL appropriato come spiegato di seguito nell'ultimo passaggio.

UserData.java

package com.tutorialspoint.test;

import java.io.Serializable;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name = "userData", eager = true)
@SessionScoped
public class UserData implements Serializable {
   private static final long serialVersionUID = 1L;
   public String data = "1";

   public String getData() {
      return data;
   }

   public void setData(String data) {
      this.data = data;
   }
}

home.xhtml

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml"
   xmlns:f = "http://java.sun.com/jsf/core"    
   xmlns:h = "http://java.sun.com/jsf/html">
   
   <head>
      <title>JSF Tutorial!</title>
   </head>
   
   <h:body>
      <h2>h:selectManyCheckbox example</h2>
      <hr />
      
      <h:form>
         <h3>Radio Button</h3> 
         <h:selectOneRadio value = "#{userData.data}">
            <f:selectItem itemValue = "1" itemLabel = "Item 1" />
            <f:selectItem itemValue = "2" itemLabel = "Item 2" />
            <f:selectItem itemValue = "3" itemLabel = "Item 3" />
            <f:selectItem itemValue = "4" itemLabel = "Item 4" />
            <f:selectItem itemValue = "5" itemLabel = "Item 5" />
         </h:selectOneRadio>	   		
         <h:commandButton value = "Submit" action = "result" />
      </h:form> 		
   
   </h:body>
</html>

risultato.xhtml

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml"
   xmlns:f = "http://java.sun.com/jsf/core"    
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:ui = "http://java.sun.com/jsf/facelets">
   
   <head>
      <title>JSF Tutorial!</title>
   </head>
   
   <h:body>
      <h2>Result</h2>
      <hr />
      #{userData.data}
   </h:body>
</html>

Una volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione come abbiamo fatto nel capitolo JSF - Prima applicazione. Se tutto va bene con la tua applicazione, questo produrrà il seguente risultato.

Selezionare un'opzione e premere Submitpulsante. Abbiamo selezionato l'elemento 3. Vedrai i risultati selezionati.

↰ Previous page