Material Didático

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

Aula 03 - Validação de Campos no JSF

Criando uma Terceira Aplicação Web pt.2

Por fim, vamos às views. Teremos duas páginas JSF (xhtml) nessa nossa aplicação. A primeira, denominada form.xhtml e apresentada na Listagem 16, é o formulário para obtenção dos dados do cliente. A segunda, denominada sucesso.xhtml e apresentada na Listagem 17, é a página de sucesso que apresenta os dados capturados pelo formulário. Veja na Listagem 16 a presença da Tag validator para ligarmos a validação do campo de CPF ao nosso validador de CPF.

<h:head>
		<title>Cadastro de Cliente</title>
	</h:head>

<h:body>
		<h:messages/>
		<h:form>
			<table> 
				<tr>
					<td> Nome:* </td>
					<td> <h:inputText value="#{clienteMBean.cliente.nome}" size="50" 
					required="true" requiredMessage="Nome: Campo obrigatório." /> </td>
				</tr>
				<tr>
					<td> CPF:* </td>
					<td>
						<h:inputText value="#{clienteMBean.cliente.cpf}" size="12" maxlength="11" required="true" 
							requiredMessage="CPF: Campo obrigatório.">
							<f:validator validatorId="validadorCPF" />
						</h:inputText> 
					</td>
				</tr>
				<tr>
					<td> Data de nascimento:* </td>
					<td>
						<h:inputText value="#{clienteMBean.cliente.dataNascimento}" size="5" 
							maxlength="10" required="true" requiredMessage="Data de nascimento: Campo obrigatório.">
							<f:convertDateTime pattern="dd/MM/yyyy" /> 
						</h:inputText>
					</td>
				</tr>
				<tr>
					<td> Endereço:* </td>
					<td> <h:inputTextarea value="#{clienteMBean.cliente.endereco}" cols="50" rows="4"
						required="true" requiredMessage="Endereço: Campo obrigatório." /> </td>
				</tr>
				<tr>
					<td> Sexo:* </td>
					<td> 
						<h:selectOneRadio value="#{clienteMBean.cliente.sexo}" 
							required="true" requiredMessage="Sexo: Campo obrigatório.">
							<f:selectItem itemValue="M" itemLabel="Masculino" />
							<f:selectItem itemValue="F" itemLabel="Feminino" /> 
						</h:selectOneRadio>
					</td>
				</tr>
				<tr>
					<td> Telefone: </td>
					<td> <h:inputText value="#{clienteMBean.cliente.telefone}" /> </td>
				</tr>
				<tr>
					<td> Celular: </td>
					<td> <h:inputText value="#{clienteMBean.cliente.celular}" /> </td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<h:commandButton value="Cadastrar" action="#{clienteMBean.cadastrar}" />
					</td>
				</tr> 
			</table>

* : Campos obrigatórios.

</h:form>
	</h:body>
</html>

Listagem 16 - Código do formulário (form.xhtml).

<html xmlns="http://www.w3.org/1999/xhtml" 
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Cliente cadastrado com sucesso!</title>
    </h:head>

<h:body>
        <table> 
            <tr>
                <td>Nome: </td>
                <td><h:outputText value="#{clienteMBean.cliente.nome}" /> </td>
            </tr>
            <tr>
                <td>CPF: </td>
                <td><h:outputText value="#{clienteMBean.cliente.cpf}" /> </td>
            </tr>
            <tr>
                <td>Endereço: </td>
                <td><h:outputText value="#{clienteMBean.cliente.endereco}" /> </td>
            </tr>
            <tr>
                <td> Data de nascimento: </td>
                <td>
                    <h:outputText value="#{clienteMBean.cliente.dataNascimento}">
                        <f:convertDateTime pattern="dd/MM/yyyy" />
                    </h:outputText>
                </td>
            </tr>
            <tr>
                <td> Sexo: </td>
                <td>
                    <h:outputText value="#{clienteMBean.cliente.sexo}" />
                </td>
            </tr>
            <tr>
                <td> Telefone/Celular: </td>
                <td>
	                <h:outputText value="#{clienteMBean.cliente.telefone}" />
	                <h:outputText value="#{clienteMBean.cliente.celular}" />
                </td>
            </tr>
        </table>
    </h:body>
</html>

Listagem 17 - Código da página de sucesso (sucesso.xhtml).

Após a codificação das classes e páginas JSF apresentadas nas listagens 13,14,15,16 e 17, vamos iniciar o servidor de aplicação Apache Tomcat e acessar nossa aplicação pela URL: http://localhost:8080/AulaValidacoesJSF/form.jsf. Realize alguns testes para verificar o funcionamento da validação. Ao acessar, a página apresentada na Figura 1 é exibida, e ao preenchermos e clicarmos no botão de cadastrar obtemos a página apresentada na Figura 2.

Página do formulário para cadastro de cliente.

Página de cliente cadastrado com sucesso.

E com isso chegamos ao fim da nossa aula. Observe que já conhecemos sobre o framework JSF, suas principais Tags e como realizar validações nas nossas aplicações. Agora você já pode começar a desenvolver aplicações web que podem conter formulários e validações. Na próxima aula, desenvolveremos uma aplicação mais completa para aumentarmos nosso conhecimento sobre esse framerwork. Estamos progredindo cada vez mais, vamos em frente!

Termo de uso

arrow_back Aula 03 - Validação de Campos no JSF

Criando uma Terceira Aplicação Web pt.2

Aula 03 - Validação de Campos no JSF