[Java] Try various radio buttons of h:selectOneRadio with buttons

1 minute read

-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 setting options

  • There is SelectItem as a convenient class to store the choices.

|Number of choices |Tags |SelectItem| |:-:|:-:|:-:| |1 |f:selectItem|Not used | |One |f:selectItem|Use | |Multiple |f:selectItems|Use | ![Screenshot 2020-07-28 22.18.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/f85fe5dd-de46-345c-b31e-(dc95090d5f3f.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>Experience using selectOneRadio</title>
</head>
<body>
  <h4>Set options</h4>
  <h:selectOneRadio value="0">
    <f:selectItem itemValue="0" itemLabel="Choose directly" />
    <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 option. */
    private SelectItem radioSelectItem = new SelectItem(1, "selectItem and selectItem made");
    /** Multiple choice */
    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, "Choose one with selectItems and SelectItem-first"));
        radioItems.add(new SelectItem(3, "Choose between selectItems and SelectItem-the second"));
    }
}

Try to place

  • Use the layout attribute for the selection sequence. I wasted my effort with CSS and failed.
layout  
lineDirection Side-by-side (default)
pageDirection Vertical arrangement
  • When you want to arrange radio buttons and other elements (such as check boxes) side by side
    1. Surround radio buttons and other elements with h:panelGroup
    2. Set Flexbox(display: flex;) in the enclosed one with CSS
    3. By default, child elements in Flexbox are arranged horizontally from the left (flex-direction: row;).
    4. Check box layout is not specified (default is horizontal) ![Screenshot 2020-07-28 22.43.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/9feae112-3206-fdee-939a-(547e0dd8051e.png)

sample


<!-- Same as the first, so omitted -->
  <h4>Try arranging vertically</h4>
  <h:selectOneRadio value="0" layout="pageDirection">
<!-- Same as the first, so omitted -->
  <h4>Display with a check box in one line</h4>
  <h:panelGroup style="display: flex;">
    <h:selectBooleanCheckbox id="check" />
    <h:outputLabel for="check" value="check box"/>
    (
    <h:selectOneRadio value="0">
      <f:selectItem itemValue="0" itemLabel="Choice 1" />
      <f:selectItem itemValue="1" itemLabel="Choice 2" />
    </h:selectOneRadio>
    )
  </h:panelGroup>
</body>
</html>

Reference

Tags: ,

Updated: