Tutorial Mentawai #6 – Validação

Olá pessoal! No post de hoje, veremos como funciona a validação no Mentawai.

O framework nos fornece uma ótima maneira de validar formulários. Nesta validação basta adicionar as regras do próprio Mentawai ou definir as suas próprias. O primeiro passo para a utilização é configurar o ValidationFilter no ApplicationManager. Muito simples:

@Override
public void loadFilters() {
     filter(new ValidationFilter());
}

Agora, na sua Action você deve fazê-la implementar a interface Validatable e criar a sua implementação do método prepareValidator(). É nesse método que definimos as restrições que deverão ser validadas. Segue um exemplo.

public class HelloAction extends BaseAction implements Validatable {

	@Override
	public void prepareValidator(Validator val, String method) {
		val.requiredFields("Campo obrigatório!", "nome", "cpf", "email");

		val.add("cpf", MethodRule.getInstance(this, "validaCpf"), "CPF Inválido!");
		val.add("email", EmailRule.getInstance(), "E-mail Inválido!");
	}

	boolean validaCpf(String cpf) {
		... implementação ...

		return true;
	}

	@Override
	public String execute() throws Exception {
		... implementação ...

		return SUCCESS;
	}
}

Neste exemplo utilizamos alguns exemplos de “rules” ou regras que o Mentawai oferece. Na documentação lá no site oficialvocê encontra os outros filtros que ele  oferece, ou mesmo como implementar sua própria regra de validação (ele possui, por exemplo, CPF, tempo, hora, CNPJ). Lá na JSP, basta adicionar as tags onde o erro deve ser exibido:

...
CPF: <mtw:input type="text" name="cpf" />
<mtw:outError field="cpf">
    <font color="red"><mtw:out /></font>
</mtw:outError>
...

E é isso. Só não se esqueça de configurar no ApplicationManager a consequência ERROR, que é retornada caso o formulário não passe pelas regras de validação.

action("/Hello", HelloAction.class).
    on(SUCCESS, fwd("/jsp/hello.jsp")).
    on(ERROR, fwd("/jsp/index.jsp"));

No exemplo no site oficial, é possível obter maiores detalhes sobre o processo. Não há muito o que ser dito, já que o exemplo é bastante completo! (:

Tutorial Android #3 – Aprimorando o Formulário

Olá pessoal! Hoje, dando continuidade aos nossos tutoriais sobre desenvolvimento para Android, vamos continuar com a nossa aplicação da Lista de Restaurantes. No post de hoje, vamos melhorar a aparência do nosso formulário, alterando seu layout para o estilo TableLayout.

Abra o arquivo main.xml dentro do diretório res/layout e edite-o, deixando-o dessa forma:

Podemos perceber que o código ficou bem mais “enxuto” nesta versão. O TableLayout é útil para formulários onde deseja-se tamanhos padronizados tanto de largura quanto de altura para os itens. Nos parâmetros deste layout, temos o novo elemento android:stretchColumns, dizendo que o tamanho das colunas deve-se adaptar ao conteúdo, ajustando suas dimensões. Como trata-se de uma tabela, obtemos a posição esteticamente alinhada dos itens.

O item filho do TableLayout são os itens TableRow, onde cada item inserido entre suas tags são inseridos como uma coluna. Consequentemente, cada TableRow (como o próprio nome nos diz), representa uma linha da tabela.

Por fim, inserimos o item Button separadamente, sem definirmos a linha (TableRow), para que ele ocupe toda a extensão horizontal. Assim, nosso formulário vai parecer com isso:

Continuando, vamos começar a fazer uma alteração para inserirmos  uma classificação por categoria nos nossos restaurantes. Vamos, então, adicionarmos alguns itens do tipo RadioButton (aqueles botões marcadores) em nosso formulário. Continuando as modificações no main.xml, adicione os itens RadioGroup e RadioButton, conforme o código:

Para o elemento RadioGroup, definimos o atributo identificador, no exemplo definido como tipos, que será o meio pelo qual iremos acessá-lo no código-fonte Java. Internamente a esse elemento, temos definido um TextView que exibirá o texto Tipo e os elementos do tipo RadioButton propriamente ditos. Em nosso exemplo, definimos os botões Rodízio (rodizio), Fast Food (fast_food) e A Domicílio (a_domicilio).

O próximo passo é obtermos tal opção no código-fonte Java. Primeiramente, precisamos modificar nossa classe Restaurante para abrigar o tipo. Vamos definir um atributo chamado tipo e seus métodos get e set. A classe Restaurante ficará assim:

Agora vamos alterar o código da nossa Activity, para obtermos a opção selecionada pelo usuário. Dentro do método onClick, vamos adicionar um trecho de código puxando os dados do RadioGroup e verificando seu status de acordo com a opção selecionada. O código fica assim:

Obtemos o elemento tipos da mesma forma que fizemos para nome e endereco, utilizando o método findViewById(). Logo após isso, fazemos um switch com o conteúdo do método getCheckedRadioButtonId(), de acordo com o id de cada um dos botões definidos por nós. Ao final, nosso formulário estará assim:

Pra quem não conseguiu acompanhar ou teve problemas, o projeto pode ser baixado aqui.

Bom pessoal, é isso! Espero que estejam gostando dos posts. Comentem, deixem sugestões e participem do blog, afinal, ele é feito pra vocês leitores!

Até a próxima! 🙂

Tutorial Android #2 – Obtendo Dados do Formulário

Olá leitores! No post anterior começamos o nosso projeto Android criando um formulário simples, modificando apenas o arquivo XML de layout. Hoje, vamos ver como obter o que foi digitado no formulário para manipularmos dentro de uma Activity. Se você não tem o projeto anterior, pode baixar aqui. Para abrir o projeto, descompacte-o dentro de seu workspace, e em seguida, no Eclipse, vá em File -> Import… e procure pela opção Existing Projects into Workspace, dentro da categoria General.

O primeiro passo é criar a classe de negócio (model) que armazenará os dados vindos do formulário. Crie uma classe chamada Restaurante e salve-a no pacote net.rafaeltoledo.restaurante.model. A classe terá os campos nome e endereco, ambos to tipo String. Lembrando que sempre encapsulamos os campos das classes de negócio. A classe Restaurante ficará assim:

Aqui vão algumas dicas para o Eclipse: para gerar os métodos get e set automaticamente, pressione Alt + Shift + S e selecione a opção Generate Getters and Setters…. E pra formatar seu código-fonte automaticamente, pressione Ctrl + Shift + F. E por último, pra corrigir os imports automaticamente, o atalho é Ctrl + Shift + O. 😉

A classe Restaurante simplesmente representa um restaurante com os dados que definimos no formulário (nome e endereço). O próximo passo, então, é obtermos os dados do formulário XML e os colocarmos em um objeto do tipo Restaurante. Abra a Activity ListaRestaurantes e edite-a.

Ela era assim

e vai ficar assim

O grande responsável pelo acesso aos componentes do formulário XML é a classe chamada R. Esta classe é gerada automaticamente, sendo atualizada de acordo com o conteúdo mapeado no arquivo XML. Até por esse motivo, ela fica localizada na pasta gen do projeto, separada do restante dos códigos-fonte.

No código-fonte, o que fazemos é obter o botão declarado no XML (linha 20) e em seguida atribuir um listener (ou “ouvinte”) para quando o botão for clicado. Assim, toda vez que alguém clicar no botão salvar, será chamado um determinado método.

Para esse propósito, declaramos uma classe interna como um membro privado da Activity, chamando-a se onSave. Implementar esta classe, por sua vez, requere implementar também o método abstrato onClick() que será chamado toda vez que o botão for clicado.

Neste caso, obtemos os dois campos (nome e endereco) do XML, jogando-os em duas instâncias da classe EditText. Em seguida, obtemos seus conteúdos e os atribuímos no objeto do tipo Restaurante chamado r. Este objeto foi declarado como um membro privado da Activity, sendo previamente instanciado em sua própria inicialização.

Apesar de ainda não ser possível ter uma visualização disso funcionando, experimente executar e verificar se não ocorre nenhum erro ao pressionar o botão Salvar no formulário.

Caso não tenha conseguido acompanhar ou algum outro problema, você pode baixar o projeto aqui.

Por hoje é isso. No próximo da série, vamos melhorar a estética do nosso formulário, para ficar mais “apresentável”. Até lá! 🙂

Tutorial Android #1 – Criando um Formulário Simples

Olá pessoal! Hoje vamos começar uma nova série de posts, onde vamos abordar a criação de aplicativos móveis para aplicativos Android. Ao contrário das outras séries, nesta vamos fazer algo diferente. Teremos um projeto que será incrementado a cada post, adicionando novos conceitos e técnicas.

Como criar um dispositivo virtual e como criar um novo projeto, nós já vimos em posts anteriores. Então, crie um novo projeto chamado ListaDeRestaurantes.  O nome do aplicativo será Lista de Restaurantes e o nome da activity será ListaRestaurantes. O pacote pode ser o que você achar melhor.

Para os tutoriais, utilizarei a versão 2.2 do Android, que roda na grande maioria dos celulares hoje em dia. Mas fique à vontade para utilizar a versão que desejar (não deverá haver diferenças muito grandes).

Ao concluir a criação do projeto, teremos nossa árvore montada, tendo como principais arquivos ListaRestaurantes.java (a nossa Activity) e main.xml (o nosso arquivo de layout).

O primeiro passo é ajustarmos o layout da aplicação, criando um formulário simples. Abra o arquivo main.xml e alterne para o editor. Agora digite o seguinte código:

Vamos analisar, então, a estrutura do arquivo XML. Se você já mexeu com Swing no Java, vai reconhecer a forma de estruturar o formulário. O arquivo XML é organizado em tags ou elementos distribuídos de forma hierárquica, iniciando com um descritor de arquivo. No caso deste XML, indicamos sua versão e a codificação utilizada (UTF-8).

Em seguida, temos o início da definição de layout, com a adoção do LinearLayout. Este layout caracteriza-se por ter os elementos inseridos um após o outro (neste caso, verticalmente, já que passamos o parâmetro vertical no atributo android:orientation). Ao chegar-se ao fim da “linha” (tela), ele inicia uma nova linha, ou caso seja possível, ajusta os elementos para que caibam em uma mesma linha. Além disso, temos os parâmetros android:layout_width e android:layout_height, que foram configurados com o valor fill_parent. Este parâmetro (utilizado em vários outros pontos do código), significa que o tamanho deste elemento vai se ajustar ao tamanho do elemento imediatamente acima dele no nível hierárquico. Neste caso, como LinearLayout é o elemento raiz, ele se ajustará a tela, que é o elemento acima dele.

Internamente a esse layout, temos 3 elementos: 2 outros LinearLayout e um Button. Cada um desses LinearLayout possui um TextView (uma espécie de label) e um EditText (um campo de entrada de texto). Estes layouts tiveram o atributo android:layout_height atribuído com wrap_content. Este valor indica que o tamanho deste elemento deve se ajustar ao conteúdo atribuído a ele. Façam os testes de modificar estes parâmetros para ver o resultado.

O elemento TextView tem o atributo android:text, que indica o texto exibido pelo label. Além disso, são configurados seus atributos de largura e altura. Já no caso do EditText, temos o atributo android:id, que nos diz qual será o identificador do elemento para que possamos manipulá-lo da aplicação (dentro do arquivo Java). No caso do primeiro campo, @+id/nome indica que o elemento será referenciado na aplicação pelo nome nome. No segundo EditText, definimos seu nome para end.

Por fim, o Button tem tanto o elemento android:text (indicando o que aparecerá no botão) quanto o elemento android:id (no exemplo, definido como salvar).

Nesta primeira versão do nosso projeto, como não há nenhuma lógica, não será necessário modificar o arquivo ListaRestaurantes.java.

Vamos executar o nosso aplicativo para ver como ficou. Clique com o botão direito sobre o projeto e selecione Run As -> Android Application. Após alguns segundos o emulador será aberto, o sistema carregado e a aplicação instalada (não se preocupe se demorar, é normal). A aplicação ficará assim (variando um pouco dependendo do tamanho de tela definido):

Você pode testar o preenchimento dos dados e… só. Pelo menos por enquanto 😀

Se perdeu alguma parte, você pode baixar o projeto do Eclipse aqui.

Bom, por hoje é isso. Aguardem os próximos posts! Valeu! 😀