java

Usando o tempo livre.

Validações – Client Side

leave a comment »

Objetivo

Apresentar o conceito de validação, sem apontar a melhor, mas sim mostrar as formas que podemos utilizar para implementação em aplicações web. Apontando aspectos positivos e negativos de todos os conceitos abordados.

Introdução

Neste primeiro artigo, de dois, vamos estudar o conceito de validação lado cliente (Client-Side), e como podemos implementar, para isto, os exemplos que serão mencionados utilizará o Struts2, JavaScript e Frameworks JavaScript. este exemplo pode ser executado em um simples formulário HTML, contudo, como a intenção é a utilização de validações em aplicações web, foi optado por essa estrutura

Para configurar o projeto ou baixar o exemplo pronto, veja o artigo Preparando projeto para executar as validações.

O que são?

Como a própria definição de validar, sugere:

Tornar ou declarar válido = legitimar

Em nosso contexto, meio pelo o qual vamos tentar garantir que determinadas informações em um formulário, sejam preenchidas e/ou siga uma regra ou formato, conforme a nossa aplicação as esperam.

Porque validar?

Para garantirmos que uma informação que o seja crucial, seja para indentificação de um usuário, seja para realizar uma consulta, sejam preenchidas de acordo com o esperado (ie: CPF, RG), que podem ser usados em uma consulta por um cliente, um funcionário e etc.

Como validar?

Vamos ao que interessa, implementaremos uma validação em Javascript de um formulário web com um grupo de informações obrigatórias.

Primeiro crie um formulário em src/main/webapp/jsp, com o nome clientSide.jsp

<!DOCTYPE html PUBLIC
 "-//W3C//DTD XHTML 1.1 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%@taglib prefix="s" uri="/struts-tags" %>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <title>Valida&ccedil;&atilde;o - Client-Side</title>
 <s:head />
</head>
<body>
 <s:form action="clientSide">
 <s:textfield key="lb.nm" name="nome" id="nm"/>
 <s:textfield key="lb.cpf" name="cpf" id="cpf"/>
 <s:textfield key="lb.email" name="email" id="email"/>
 <s:textfield key="lb.endereco" name="endereco" id="end"/>
 <s:submit value="Validar" id="btnS" method="salvar"/>
 </s:form>
</body>

</html>

Listagem 1 – formulário html simples.

Adicione na tag script a seguinte function:


function validaCampos(){
var nm = document.getElementById('nm'), cpf = document.getElementById('cpf')
, email= document.getElementById('email'), end = document.getElementById('end');

if(nm.value == ""){
alert('');
nm.focus();
return false;
}
if(cpf.value == ""){
alert('');
cpf.focus();
return false;
}
if(email.value == ""){
alert('');
email.focus();
return false;
}
if(end.value == ""){
alert('');
end.focus();
return false;
}
 }

Listagem 2 – Function Js que irá validar o formulário antes do submit.

Adicione na tag form do formulário o atributo onsubmit, como mostrado a seguir:

 <s:form action="clientSide" onsubmit="return validaCampos();">

Agora, vamos criar a action que receberá a requisição, src/main/java, no pacote postvalidations criar  arquivo com o nome “ClientSideAction.java”, com o código a seguir:

@Conversion()
public class ClientSideAction extends ActionSupport {

 private static final long serialVersionUID = 1L;

 private String nome;
 private String cpf;
 private String endereco;
 private String email;

 public String execute() throws Exception {
  return INPUT;
 }
 public String salvar() throws Exception {
  return SUCCESS;
 }

 public String getNome() {
  return nome;
 }

 public void setNome(String nome) {
  this.nome = nome;
 }

 public String getCpf() {
  return cpf;
 }

 public void setCpf(String cpf) {
  this.cpf = cpf;
 }

 public String getEndereco() {
  return endereco;
 }

 public void setEndereco(String endereco) {
  this.endereco = endereco;
 }

 public String getEmail() {
  return email;
 }

 public void setEmail(String email) {
  this.email = email;
 }

}

Listagem 3 – Action que receberá a requisição.

Adicione no arquivo struts.xml localizado em src/main/resources, a seguinte action:


<action name="clientSide" class="postvalidations.ClientSideAction">
 <result name="input">/jsp/clientSide.jsp</result>
 <result>/jsp/clientSide-scs.jsp</result>
</action>

Listagem 4 – Struts.xml – Deve ser adicionado para ocorrer a requisição ao action.

Observação: se  houver deletado os arquivos actions gerados pelo archetype do maven, para não haver problemas as linhas que irão instanciar as actions não exitentes devem ser removidas.

Agora em propriedades do projeto, adicionte o runtime do seu servidor, meu caso tomcat, assim será possivel executar usando o run on server -> seu server, no eclipse.

Para realizar os testes vá em:  http://localhost:8080/post-validations/clientSide.action

Concluindo

está primeira parte do artigo abordou a validação utilizando técnicas javascripts, trabalhando diretamente com o “document object”, no próximo, trabalharemos com a validação utilizando uma biblioteca JavaScript para validações.

Quaisquer dúvidas em relação a este primeiro artigo, dicas, sugestões, serão bem vindas!

Obrigado, até o próximo…

Anúncios

Written by Valdilanio Cruz

janeiro 11, 2011 at 12:24 am

Preparando projeto para executar as validações

leave a comment »

Pré-requisitos
Para executar os exemplos descritos no artigo, será necessário um ambiente de desenvolvimento java configurado, com a ferramenta de build maven, conforme abaixo:

-Jdk 1.5 ou superior
-Eclipse
-Tomcat
-Maven

Criar projeto post-validations, usando o maven, rode o comando dentro de seu workspace utilizando o console(win) ou no terminal (linux):

mvn archetype:generate -B \
-DgroupId=postvalidations \
-DartifactId=post-validations \
-DarchetypeGroupId=org.apache.struts \
-DarchetypeArtifactId=struts2-archetype-starter \
-DarchetypeVersion=2.2.1

Se a estrutura foi criada corretamente aparecerá a mensagem:

BUILD SUCCESS

Definir configuração para o eclipse:

mvn eclipse:eclipse -Dwtpversion=1.5

Se tudo estiver ok até aqui, deverá aparecer:

BUILD SUCCESS

Importar projeto para o eclipse, utilizando a opção:

Existing Project into Workspace

Selecione o projeto em questão. (post-validations)

Pronto, projeto pronto para colocar a mão na massa.

Se preferir pode fazer o download do projeto no GitHub

Written by Valdilanio Cruz

janeiro 4, 2011 at 11:25 pm

Publicado em Ambiente

Tagged with , ,

Encontro Ágil

leave a comment »

Written by Valdilanio Cruz

novembro 3, 2010 at 1:17 pm

Publicado em Sem-categoria

Instalar nvidia no ubuntu 8.04 Hardy Heron

with 5 comments

Bom estou escrevendo esse tutorial, pois estou inspirado, acabei de instalar o ubuntu 8.04, e estou sastisfeito com o que vi, com exceções de algumas traduções toscas, mas nada que tire o mérito do sistema.

chega de enrolação…

Uma técnica simples para a instalação do driver da nvidia, no meu caso de uma FX5200.

para isso, vamos utilizar apenas duas linhas de códigos. Utilizando o EnvyNG, um programa que baixa e instala automaticamente o driver para sua placa.

veja site oficial: http://albertomilone.com/index.html

vá em Aplicações –> Acessorio –> Consola (terminal), e digite:

sudo apt-get install envyng-gtk

tecle Enter e digite sua senha, logo após aceite a instalação.

após instalado, vá em Aplicações –> Ferramentas do Sistema –> EnvyNG, e selecione a opção nvidia como mostra a imagem:

Tela do envyNG

Click em aplicar, ele irá baixar e instalar o driver da nvidia, em seguida pedirá para reiniciar faça-o e pronto driver está instalado, aplica-se também aos drivers da ATI.

em seguida vamos ajustar as configurações de video, vá em Aplicações –> Acessorio –> Consola (terminal), e digite:

sudo nvidia-settings

digite sua senha, e irá aparecer a seguinte tela, ajustes as configurações conforme sua preferência, no meu caso ficou assim:

Configurações da nvidia

click em apply, e verifique se sastisfaz sua necessidade, caso fique a seu gosto click em “Save to X Configuration File”. em seguida click em sair.

Espero que este tutorial seja util a todos, qualquer coisa comente, obrigado.

Written by Valdilanio Cruz

abril 29, 2008 at 2:34 am

Objetivo

leave a comment »

Bem vindos ao blog em breve postarei algumas dicas de java, e linux entre outras ferramentas, a idéia é criar um espaço para troca de idéias e conhecimentos, espero que voltem em breve para ver as novidades, estão sendo preparada para o usuário poder tirar um bom proveito do blog.

att,

Valdi.

Written by Valdilanio Cruz

janeiro 10, 2008 at 1:15 am

Publicado em Sem-categoria

Tagged with , ,