Aulas
Disciplinas

Cursos / Informática para Internet / Desenvolvimento Web II / Aula

arrow_back Aula 02 - Conhecendo as Tags do JSF

Vamos agora à criação de duas páginas JSF: form.xhtml e sucesso.xhtml, apresentadas respectivamente nas Listagens 24 e 25. Lembre-se que elas precisam estar dentro da pasta WebContent. Na página “form”, teremos o formulário que utilizando as tags do JSF obterão os seguintes dados do usuário: nome (campo obrigatório), endereço (campo obrigatório), data de nascimento e sexo. Na página “sucesso”, iremos apenas apresentar os dados capturados.

​x
1
<html xmlns="http://www.w3.org/1999/xhtml"
2
xmlns:h="http://java.sun.com/jsf/html"
3
xmlns:f="http://java.sun.com/jsf/core">
4
5
<h:head>
6
    <title>Formulário</title>
7
</h:head>
8
​
9
<h:body>
10
<h:messages/>
11
<h:form>
12
​
13
<table>
14
    <tr>
15
        <td>Nome:</td>
16
        <td><h:inputText value="#{cadastroMBean.pessoa.nome}" size="50" required="true" requiredMessage="Nome: Campo obrigatório." /> </td>
17
    </tr>
18
    <tr>
19
        <td>Endereço:</td>
20
        <td><h:inputTextarea value="#{cadastroMBean.pessoa.endereco}" cols="50" rows="4" required="true" requiredMessage="Endereço: Campo obrigatório." /> </td>
21
    </tr>
22
    <tr>
23
        <td>Data de nascimento: </td>
24
        <td>
25
            <h:inputText value="#{cadastroMBean.pessoa.dataNascimento}" size="5" maxlength="10">
26
            <f:convertDateTime pattern="dd/MM/yyyy" />
27
            </h:inputText>
28
        </td>
29
    </tr>
30
    <tr>
31
        <td> Sexo: </td>
32
        <td>
33
            <h:selectOneRadio value="#{cadastroMBean.pessoa.sexo}">
34
            <f:selectItem itemValue="M" itemLabel="Masculino" />
35
            <f:selectItem itemValue="F" itemLabel="Feminino" />
36
            </h:selectOneRadio>
37
        </td>
38
    </tr>
39
    <tr>
40
        <td colspan="2" align="center">
41
            <h:commandButton value="Cadastrar" action="#{cadastroMBean.cadastrar}" />
42
        </td>
43
    </tr>
44
</table>
45
​
46
</h:form>
47
</h:body>
48
</html>
Listagem 24 - Código da página form.xhtml.

 

36
1
<html xmlns="http://www.w3.org/1999/xhtml"
2
xmlns:h="http://java.sun.com/jsf/html"
3
xmlns:f="http://java.sun.com/jsf/core">
4
​
5
<h:head>
6
    <title>Sucesso </title>
7
</h:head>
8
​
9
<h:body>
10
​
11
<table>
12
    <tr>
13
        <td>Nome: </td>
14
        <td><h:outputText value="#{cadastroMBean.pessoa.nome}" /> </td>
15
    </tr>
16
    <tr>
17
        <td> Endereço: </td>
18
        <td> <h:outputText value="#{cadastroMBean.pessoa.endereco}" /> </td>
19
    </tr>
20
    <tr>
21
        <td>Data de nascimento: </td>
22
        <td>
23
            <h:outputText value="#{cadastroMBean.pessoa.dataNascimento}">
24
            <f:convertDateTime pattern="dd/MM/yyyy" />
25
            </h:outputText>
26
        </td>
27
    </tr>
28
    <tr>
29
        <td>Sexo: </td>
30
        <td>
31
            <h:outputText value="#{cadastroMBean.pessoa.sexo}" />
32
        </td>
33
    </tr>
34
</table>
35
</h:body>
36
</html>
Listagem 25 - Código da página sucesso.xhtml.

Após a codificação das classes e páginas JSF, apresentadas nas Listagens 22, 23, 24 e 25, vamos iniciar o servidor de aplicação Apache Tomcat e acessar nossa aplicação pela URL: http://localhost:8080/AulaTagsJSF/form.jsf . Ao acessar, a página apresentada na Figura 2 é exibida, e ao preenchermos e clicarmos no botão de cadastrar obtemos a página apresentada na Figura 3.

Figura 02 - Janela para criação do projeto AulaTagsJSF.
Janela para criação do projeto AulaTagsJSF.
Fonte: Autoria Própria

 

Figura 03 - Página de sucesso.
Página de sucesso.
Fonte: Autoria Própria
[A] Anterior
6/8
Próxima [D]

Sumário

Versão 5.3 - Todos os Direitos reservados