Try various radios of h: selectOneRadio with buttons

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

Try to set options

--There is SelectItem as a convenient class to store choices.

Number of choices tag SelectItem
One f:selectItem do not use
One f:selectItem use
Multiple f:selectItems use

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

sample


<!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>Try using selectOne Radio in various ways</title>
</head>
<body>
  <h4>Set choices</h4>
  <h:selectOneRadio value="0">
    <f:selectItem itemValue="0" itemLabel="Directly written options" />
    <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, "Choices made with selectItem and SelectItem");
    /**Multiple choices*/
    private List<SelectItem> radioItems = new ArrayList<SelectItem>();

    /**Bean initialization process. */
    @PostConstruct
    public void init() {
        setRadioItems();
    }

    /**Set multiple choices. */
    private void setRadioItems() {
        radioItems.add(new SelectItem(2, "Choices made with selectItems and SelectItem-The first one"));
        radioItems.add(new SelectItem(3, "Choices made with selectItems and SelectItem-Second"));
    }
}

Try to place

--Use the layout attribute to arrange the choices. I tried my best with CSS in vain and failed.

layout Line up
lineDirection Side by side(Default)
pageDirection Vertically

--If you want to put radio buttons and other elements (checkboxes, etc.) side by side together

  1. Enclose radio buttons and other elements in h: panelGroup
  2. Set Flexbox (display: flex;) with CSS on the enclosed one
  3. By default, the child elements in Flexbox are arranged side by side from the left (flex-direction: row;)
  4. Do not specify the checkbox layout (by default, side by side) スクリーンショット 2020-07-28 22.43.16.png

sample


<!--Omitted because it is the same as the first-->
  <h4>Try arranging vertically</h4>
  <h:selectOneRadio value="0" layout="pageDirection">
<!--Omitted because it is the same as the first-->
  <h4>Try to display it in one line together with the check box</h4>
  <h:panelGroup style="display: flex;">
    <h:selectBooleanCheckbox id="check" />
    <h:outputLabel for="check" value="Checkbox"/>
    (
    <h:selectOneRadio value="0">
      <f:selectItem itemValue="0" itemLabel="Option 1" />
      <f:selectItem itemValue="1" itemLabel="Option 2" />
    </h:selectOneRadio>
    )
  </h:panelGroup>
</body>
</html>

reference

Recommended Posts

Try various radios of h: selectOneRadio with buttons