[JAVA] Essayez différentes radios de h: sélectionnez OneRadio avec les boutons

--Environnement - 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

Essayez de définir des options

--Il existe SelectItem comme classe pratique pour stocker les choix.

Nombre de choix marque SelectItem
Un f:selectItem ne pas utiliser
Un f:selectItem utilisation
Plusieurs f:selectItems utilisation

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

échantillon


<!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>Essayez d'utiliser selectOne Radio de différentes manières</title>
</head>
<body>
  <h4>Définir des choix</h4>
  <h:selectOneRadio value="0">
    <f:selectItem itemValue="0" itemLabel="Options écrites directement" />
    <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 {
    /**Choix unique. */
    private SelectItem radioSelectItem = new SelectItem(1, "Choix effectués avec selectItem et SelectItem");
    /**Choix multiples*/
    private List<SelectItem> radioItems = new ArrayList<SelectItem>();

    /**Processus d'initialisation du bean. */
    @PostConstruct
    public void init() {
        setRadioItems();
    }

    /**Définir plusieurs choix. */
    private void setRadioItems() {
        radioItems.add(new SelectItem(2, "Choix effectués avec selectItems et SelectItem-Le premier"));
        radioItems.add(new SelectItem(3, "Choix effectués avec selectItems et SelectItem-Seconde"));
    }
}

Essayez de placer

--Utilisez l'attribut layout pour classer les choix. J'ai essayé de mon mieux avec CSS en vain et j'ai échoué.

layout S'aligner
lineDirection Cote à cote(Défaut)
pageDirection Verticalement

--Si vous souhaitez mettre côte à côte des boutons radio et d'autres éléments (cases à cocher, etc.)

  1. Placez le bouton radio et les autres éléments dans h: panelGroup
  2. Définissez Flexbox (display: flex;) dans CSS pour celui ci-joint
  3. Par défaut, les éléments enfants de la Flexbox sont disposés côte à côte à partir de la gauche (flex-direction: row;)
  4. Ne cochez pas la case «layout» (par défaut, côte à côte) スクリーンショット 2020-07-28 22.43.16.png

échantillon


<!--Omis car c'est le même que le premier-->
  <h4>Essayez de disposer verticalement</h4>
  <h:selectOneRadio value="0" layout="pageDirection">
<!--Omis car c'est le même que le premier-->
  <h4>Essayez de l'afficher sur une seule ligne avec la case à cocher</h4>
  <h:panelGroup style="display: flex;">
    <h:selectBooleanCheckbox id="check" />
    <h:outputLabel for="check" value="Case à cocher"/>
    (
    <h:selectOneRadio value="0">
      <f:selectItem itemValue="0" itemLabel="Option 1" />
      <f:selectItem itemValue="1" itemLabel="Option 2" />
    </h:selectOneRadio>
    )
  </h:panelGroup>
</body>
</html>

référence

Recommended Posts

Essayez différentes radios de h: sélectionnez OneRadio avec les boutons