[JAVA] Probieren Sie verschiedene Radios von h: selectOneRadio mit Tasten aus

--Umgebung - CentOS Linux release 7.8.2003 (Core) - Payara Server 5.194 - Eclipse IDE for Enterprise Java Developers.Version: 2020-03 (4.15.0) - JSF 2.3.9

Versuchen Sie, Optionen festzulegen

Anzahl der Auswahlmöglichkeiten Etikett SelectItem
Einer f:selectItem verwende nicht
Einer f:selectItem verwenden
Mehrere f:selectItems verwenden

スクリーンショット 2020-07-28 22.18.03.png

Stichprobe


<!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:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core">
<head>
  <title>Versuchen Sie, selectOne Radio auf verschiedene Arten zu verwenden</title>
</head>
<body>
  <h4>Auswahl treffen</h4>
  <h:selectOneRadio value="0">
    <f:selectItem itemValue="0" itemLabel="Direkt geschriebene Optionen" />
    <f:selectItem value="#{sampleBean.radioSelectItem}" />
    <f:selectItems value="#{sampleBean.radioItems}" itemValue="0" />
  </h:selectOneRadio>
</body>
</html>

SampleBean.java


package brans;

import java.util.ArrayList;
import java.util.List;

import javax.annotation.PostConstruct;
import javax.enterprise.context.RequestScoped;
import javax.faces.model.SelectItem;
import javax.inject.Named;

import lombok.Data;

@Named
@RequestScoped
@Data
public class SampleBean {
    /**Single Choice. */
    private SelectItem radioSelectItem = new SelectItem(1, "Mit selectItem und SelectItem getroffene Entscheidungen");
    /**Mehrere Auswahlmöglichkeiten*/
    private List<SelectItem> radioItems = new ArrayList<SelectItem>();

    /**Bean-Initialisierungsprozess. */
    @PostConstruct
    public void init() {
        setRadioItems();
    }

    /**Stellen Sie mehrere Auswahlmöglichkeiten ein. */
    private void setRadioItems() {
        radioItems.add(new SelectItem(2, "Mit selectItems und SelectItem getroffene Entscheidungen-Der erste"));
        radioItems.add(new SelectItem(3, "Mit selectItems und SelectItem getroffene Entscheidungen-Zweite"));
    }
}

Versuche zu platzieren

layout Ausrichten
lineDirection Seite an Seite(Standard)
pageDirection Vertikal
  1. Fügen Sie das Optionsfeld und andere Elemente in h: panelGroup ein
  2. Stellen Sie Flexbox (display: flex;) in CSS für die beiliegende ein
  3. Standardmäßig sind die untergeordneten Elemente in der Flexbox von links nebeneinander angeordnet (flex-direction: row;).
  4. Aktivieren Sie nicht das Kontrollkästchen "Layout" (standardmäßig nebeneinander). スクリーンショット 2020-07-28 22.43.16.png

Stichprobe


<!--Ausgelassen, weil es das gleiche ist wie das erste-->
  <h4>Versuchen Sie, vertikal anzuordnen</h4>
  <h:selectOneRadio value="0" layout="pageDirection">
<!--Ausgelassen, weil es das gleiche ist wie das erste-->
  <h4>Versuchen Sie, es zusammen mit dem Kontrollkästchen in einer Zeile anzuzeigen</h4>
  <h:panelGroup style="display: flex;">
    <h:selectBooleanCheckbox id="check" />
    <h:outputLabel for="check" value="Kontrollkästchen"/>
    (
    <h:selectOneRadio value="0">
      <f:selectItem itemValue="0" itemLabel="Option 1" />
      <f:selectItem itemValue="1" itemLabel="Option 2" />
    </h:selectOneRadio>
    )
  </h:panelGroup>
</body>
</html>

Referenz

Recommended Posts

Probieren Sie verschiedene Radios von h: selectOneRadio mit Tasten aus