Olá desenvolvedores, neste tutorial aprenderemos conceitos e a implementar o SelectOneRadio que é um componente do JSF – JavaServer Faces que renderiza um conjunto de elementos de entrada HTML do tipo “rádio”. Este tipo de componente, “rádio”, é muito comum em formulários que contém a opção de selecionar o sexo da pessoa, como por exemplo, se o cadastrado é do sexo “Feminino” ou “Masculino”.

Não se preocupe se as informações que constam no sistema que está sendo implementado parecem sem sentido para você. O meu objetivo é que você aprenda como trabalhar os componentes do JSF. 

Mas no caso dessa aplicação iremos determinar o nível de senioridade do usuário em programação. As opções compreendem se ele é de nível Junior, Pleno, Sênior ou Especialista.

DECLARANDO OS ATREIBUTOS

Assim, na Entidade Pessoa declare o atributo nivelProgramador, fazendo uma referência ao tipo de componente. Chame para o atributo os métodos Getters and Setters.

private String nivelProgramador;

IMPLEMENTANDO O SELECTONERADIO

Implementaremos o SelectOneRadio na primeirapagina.xhtml onde implementamos o formulário de cadastro de usuário. Insira um componente h:outputLabel que como já mencionado é fundamental para os requisitos de usabilidade do sistema.

< h:outputLabel value=“Programador” />

Logo abaixo da informação do campo, é que iremos inserir o par de tags do componente h:selectOneRadio. Para que a informação possa ser gravada no banco de dados é preciso relacioná-la ao objeto e ao atributo por meio do value.

<h:selectOneRadio value=”#{pessoaBean.pessoa.nivelProgramador}” >

Entre as tags, os itens que compreenderão as possibilidades de escolha do usuário. Neste caso, a sua senioridade, isto é, o nível de conhecimento/experiência em programação do usuário a ser cadastrado. A opção f:selectItem traz o itemValue que é a informação que vai para a base de dados e a itemLabel traz a informação que aparecerá na tela.

EM POUCAS PALAVRAS

Neste tutorial você aprendeu a implementar mais um componente, o h: selectOneRadio, por default as opções de seleção são exibidas na horizontal (lineDirection). No entanto, o componente tem a opção layout=”pageDirection”, que faz com elas sejam exibidas verticalmente.