Struts 2 - As tags de formulário
A lista de formtags é um subconjunto de tags de interface do usuário do Struts. Essas tags ajudam na renderização da interface com o usuário necessária para os aplicativos da web Struts e podem ser categorizadas em três categorias. Este capítulo o levará através de todos os três tipos de tags de IU -
Tags de IU simples
Já usamos essas tags em nossos exemplos, vamos escová-las neste capítulo. Vamos dar uma olhada em uma página de visualização simplesemail.jsp com várias tags de IU simples -
<%@ page language = "java" contentType = "text/html; charset = ISO-8859-1"
pageEncoding = "ISO-8859-1"%>
<%@ taglib prefix = "s" uri = "/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<s:head/>
<title>Hello World</title>
</head>
<body>
<s:div>Email Form</s:div>
<s:text name = "Please fill in the form below:" />
<s:form action = "hello" method = "post" enctype = "multipart/form-data">
<s:hidden name = "secret" value = "abracadabra"/>
<s:textfield key = "email.from" name = "from" />
<s:password key = "email.password" name = "password" />
<s:textfield key = "email.to" name = "to" />
<s:textfield key = "email.subject" name = "subject" />
<s:textarea key = "email.body" name = "email.body" />
<s:label for = "attachment" value = "Attachment"/>
<s:file name = "attachment" accept = "text/html,text/plain" />
<s:token />
<s:submit key = "submit" />
</s:form>
</body>
</html>Se você conhece HTML, todas as tags usadas são tags HTML muito comuns com um prefixo adicional s:junto com cada tag e atributos diferentes. Quando executamos o programa acima, obtemos a seguinte interface de usuário, desde que você tenha configurado o mapeamento adequado para todas as chaves usadas.
Conforme mostrado, o s: head gera os elementos javascript e folha de estilo necessários para o aplicativo Struts2.
Em seguida, temos os elementos s: div e s: text. O s: div é usado para renderizar um elemento HTML Div. Isso é útil para pessoas que não gostam de misturar tags HTML e Struts. Para essas pessoas, eles têm a opção de usar s: div para renderizar um div.
O s: text conforme mostrado é usado para renderizar um texto na tela.
Em seguida, temos a tag famiilar s: form. A tag s: form tem um atributo de ação que determina para onde enviar o formulário. Como temos um elemento de upload de arquivo no formulário, temos que definir o enctype como multipart. Caso contrário, podemos deixar em branco.
No final da tag do formulário, temos a tag s: submit. Isso é usado para enviar o formulário. Quando o formulário é enviado, todos os valores do formulário são submetidos à ação especificada na tag s: form.
Dentro do s: form, temos um atributo oculto chamado secret. Isso renderiza um elemento oculto no HTML. No nosso caso, o elemento "secreto" tem o valor "abracadabra". Este elemento não é visível para o usuário final e é usado para transportar o estado de uma visualização para outra.
Em seguida, temos as tags s: label, s: textfield, s: password es: textarea. Eles são usados para renderizar o rótulo, campo de entrada, senha e área de texto, respectivamente. Vimos isso em ação no exemplo "Struts - Enviando e-mail".
O importante a notar aqui é o uso do atributo "chave". O atributo "chave" é usado para buscar o rótulo para esses controles do arquivo de propriedades. Já cobrimos esse recurso no capítulo Localização do Struts2, internacionalização.
Então, temos a tag s: file que renderiza um componente de upload de arquivo de entrada. Este componente permite ao usuário fazer upload de arquivos. Neste exemplo, usamos o parâmetro "aceitar" da tag s: file para especificar quais tipos de arquivo podem ser carregados.
Finalmente, temos a tag s: token. A marca de token gera um token único que é usado para descobrir se um formulário foi submetido duas vezes
Quando o formulário é renderizado, uma variável oculta é colocada como o valor do token. Digamos, por exemplo, que o token é "ABC". Quando este formulário é enviado, o Struts Fitler verifica o token em relação ao token armazenado na sessão. Se corresponder, remove o token da sessão. Agora, se o formulário for reenviado acidentalmente (atualizando ou clicando no botão Voltar do navegador), o formulário será reenviado com "ABC" como token. Nesse caso, o filtro verifica o token em relação ao token armazenado na sessão novamente. Mas, como o token "ABC" foi removido da sessão, ele não corresponderá e o filtro do Struts rejeitará a solicitação.
Tags da IU do grupo
As tags da IU do grupo são usadas para criar o botão de rádio e a caixa de seleção. Vamos dar uma olhada em uma página de visualização simplesHelloWorld.jsp com tags de caixa de seleção e botão de opção -
<%@ page contentType = "text/html; charset = UTF-8"%>
<%@ taglib prefix = "s" uri = "/struts-tags"%>
<html>
<head>
<title>Hello World</title>
<s:head />
</head>
<body>
<s:form action = "hello.action">
<s:radio label = "Gender" name = "gender" list="{'male','female'}" />
<s:checkboxlist label = "Hobbies" name = "hobbies"
list = "{'sports','tv','shopping'}" />
</s:form>
</body>
</html>Quando executamos o programa acima, nossa saída será semelhante à seguinte -
Vejamos o exemplo agora. No primeiro exemplo, estamos criando um botão de opção simples com o rótulo "Gênero". O atributo name é obrigatório para a tag do botão de rádio, então especificamos um nome que é "gênero". Em seguida, fornecemos uma lista de gênero. A lista é preenchida com os valores "masculino" e "feminino". Portanto, na saída temos um botão de rádio com dois valores nele.
No segundo exemplo, estamos criando uma lista de caixas de seleção. Isso é para reunir os hobbies do usuário. O usuário pode ter mais de um hobby e, portanto, estamos usando a caixa de seleção em vez do botão de rádio. A caixa de seleção é preenchida com a lista "esportes", "TV" e "Compras". Isso apresenta os hobbies como uma lista de caixas de seleção.
Selecionar Tags da IU
Vamos explorar as diferentes variações do Select Tag oferecido pelo Struts. Vamos dar uma olhada em uma página de visualização simplesHelloWorld.jsp com tags selecionadas -
<%@ page contentType = "text/html; charset = UTF-8"%>
<%@ taglib prefix = "s" uri = "/struts-tags"%>
<html>
<head>
<title>Hello World</title>
<s:head />
</head>
<body>
<s:form action = "login.action">
<s:select name = "username" label = "Username"
list = "{'Mike','John','Smith'}" />
<s:select label = "Company Office" name = "mySelection"
value = "%{'America'}" list="%{#{'America':'America'}}">
<s:optgroup label = "Asia"
list = "%{#{'India':'India','China':'China'}}" />
<s:optgroup label = "Europe"
list="%{#{'UK':'UK','Sweden':'Sweden','Italy':'Italy'}}" />
</s:select>
<s:combobox label = "My Sign" name = "mySign"
list = "#{'aries':'aries','capricorn':'capricorn'}" headerkey = "-1"
headervalue = "--- Please Select ---" emptyOption = "true" value = "capricorn" />
<s:doubleselect label = "Occupation" name = "occupation"
list = "{'Technical','Other'}" doublename = "occupations2"
doubleList="top == 'Technical' ?
{'I.T', 'Hardware'} : {'Accounting', 'H.R'}" />
</s:form>
</body>
</html>Quando executamos o programa acima, nossa saída será semelhante à seguinte -
Vamos agora examinar os casos individuais, um por um.
Primeiro, a marca de seleção renderiza a caixa de seleção HTML. No primeiro exemplo, estamos criando uma caixa de seleção simples com o nome "nome de usuário" e o rótulo "nome de usuário". A caixa de seleção será preenchida com uma lista que contém os nomes Mike, John e Smith.
No segundo exemplo, nossa empresa tem sede na América. Também possui escritórios globais na Ásia e na Europa. Queremos exibir os escritórios em uma caixa de seleção, mas queremos agrupar os escritórios globais pelo nome do continente. É aqui que o optgroup é útil. Usamos a tag s: optgroup para criar um novo grupo. Damos ao grupo um rótulo e uma lista separada.
No terceiro exemplo, o combobox é usado. Uma caixa de combinação é uma combinação de um campo de entrada e uma caixa de seleção. O usuário pode selecionar um valor da caixa de seleção e, nesse caso, o campo de entrada é preenchido automaticamente com o valor que o usuário selecionou. Se o usuário inserir um valor diretamente, nenhum valor da caixa de seleção será selecionado.
Em nosso exemplo, temos a caixa de combinação listando os signos solares. A caixa de seleção lista apenas quatro entradas que permitem ao usuário digitar seu signo solar, se não estiver na lista. Também adicionamos uma entrada de cabeçalho à caixa de seleção. A entrada do cabeçalho é aquela exibida na parte superior da caixa de seleção. No nosso caso, queremos exibir "Selecione". Se o usuário não selecionar nada, assumimos -1 como o valor. Em alguns casos, não queremos que o usuário selecione um valor vazio. Nessas condições, seria necessário definir a propriedade "emptyOption" como false. Finalmente, em nosso exemplo, fornecemos "capricórnio" como o valor padrão para a caixa de combinação.
No quarto exemplo, temos uma seleção dupla. Uma seleção dupla é usada quando você deseja exibir duas caixas de seleção. O valor selecionado na primeira caixa de seleção determina o que aparece na segunda caixa de seleção. Em nosso exemplo, a primeira caixa de seleção exibe "Técnico" e "Outro". Se o usuário selecionar Técnico, exibiremos TI e Hardware na segunda caixa de seleção. Caso contrário, exibiremos Contabilidade e RH. Isso é possível usando os atributos "list" e "doubleList" conforme mostrado no exemplo.
No exemplo acima, fizemos uma comparação para ver se a caixa de seleção superior é igual a Técnico. Em caso afirmativo, exibimos TI e Hardware.
Também precisamos dar um nome para a caixa superior ("nome = 'Ocupações') e a caixa inferior (nome duplo = 'ocupações2')