artigo webmobile 17 - Introdu��o ao MobileFaces

Esse artigo faz parte da revista WebMobile edi��o 17. Clique aqui para ler todos os artigos desta edi��o

="FONT-SIZE: 10pt; FONT-FAMILY: Verdana">

A internet est� se tornando uma importante e indispens�vel ferramenta para dispositivos m�veis. Ela pode ser usada das mais diversas formas, seja como entretenimento atrav�s de jogos ou downloads dispon�veis na web, como ambiente de compra e vendas on-line (hoje em dia t�o comum) ou como ambiente para presta��o de servi�os, como sites de bancos. Por�m, um problema constante para os desenvolvedores � �mover� uma aplica��o web para os dispositivos m�veis, pois a maioria dos celulares n�o reconhece HTML.

A Microsoft tem controles m�veis que podem fazer a transfer�ncia de p�ginas ASP.NET para dispositivos m�veis, no entanto, sistemas desenvolvidos em Java n�o tinham este controle. O Java EE � o padr�o dominante na constru��o de sistemas web, por dispor de v�rios frameworks com �timos componentes, tais como, o JavaServer Faces (JSF), o Tomahawk, o Ajax4JSF e outros, mas por n�o contar com tal controle, tornava a constru��o de sistemas web m�veis extremamente trabalhosos.

Pensando nisso, a Ericsson desenvolveu uma plataforma chamada MobileFaces, a qual ser� apresentada nesse artigo.

Conhecendo o MobileFaces

O MobileFaces � um framework de controle que pode fazer a convers�o de p�ginas da web para dispositivos m�veis e vice-versa. Ele � um projeto Open-Source, aceitando assim, modifica��es dos usu�rios em seus c�digos. Antes do MobileFaces, o programador que desejasse construir uma aplica��o web com Java, tanto para Web browsers, quanto para Mobile browsers era obrigado a replicar suas p�ginas web utilizando wml (linguagem interpretada por Mobile browsers). Com este framework isto se torna desnecess�rio, pois o MobileFaces faz a convers�o do c�digo de acordo com browser em que est� sendo interpretado, ou seja, se for um Web browser, seu c�digo torna-se um HTML, e se for um Mobile browser, seu c�digo torna-se um WML.

Este Framework � baseado na arquitetura do JavaServer Faces, como � mostrado na Figura 1, e � compat�vel com qualquer implementa��o do JSF. Para isso, cont�m adaptadores de m�dia, conversores de imagens, filtros, entre outros, sempre visando a melhor adapta��o das aplica��es web para dispositivos m�veis.

Figura 1 � Arquitetura do MobileFaces

O MobileFaces � composto de v�rios kits de desenvolvimento, entre eles:

�         Mobile JSF: Pacote desenvolvido para constru��o de aplica��es com JavaServer Faces (JSF);

�         MobileSecurity: Pacote desenvolvido para aplicar autoriza��es e autentica��es para aplica��es web m�vel, tais como, autenticar sua aplica��o de acordo com o protocolo SSL (Secure Sockets Layer), ler Nota 1;

�         MobileAjax: � um pacote que combina o uso do Ajax com o JSF, permitindo assim aplica��es m�veis com o uso de Ajax;

�         MobilePortlet: Mostra como usar uma aplica��o Portlet, empregando as solu��es m�veis do MobileFaces.

Nota 1. SSL � Secure Sockets Layer

O protocolo SSL � uma tecnologia de seguran�a comumente utilizada para codificar os dados trafegados entre o computador do usu�rio e o um website. Este protocolo, atrav�s de um processo de criptografia dos dados, previne que os dados trafegados possam ser capturados, ou mesmo alterados no seu curso entre o navegador (browser) do usu�rio e o site com o qual ele est� se relacionando. Isto garante a seguran�a entre a troca de informa��es sigilosas como os dados de cart�o de cr�dito.

Agora faremos uma breve apresenta��o do JavaServer Faces(JSF), para podermos falar do Mobile JSF.

O que � o JavaServer Faces (JSF)?

O JSF � um framework MVC que foi projetado para simplificar o desenvolvimento de aplica��es Web. Voc� deve estar se perguntando, �o que � MVC?�.

O MVC � um padr�o de arquitetura de aplica��es que visa separar a l�gica da aplica��o (Model), da interface do usu�rio (View) e do fluxo da aplica��o (Controller), permitindo assim, que a mesma l�gica de neg�cios possa ser acessada e visualizada por v�rias interfaces.

Diversos frameworks foram desenvolvidos com o intuito de ajudar o programador a implementar o padr�o MVC, entre eles est�o o Struts, Web-Work, Spring-MVC e o JSF.

Al�m de uma clara separa��o entre a visualiza��o e a regra de neg�cio, o JSF incorpora um modelo de interfaces gr�ficas baseado em eventos e recursos de navega��o e internacionaliza��o.

O JSF utiliza componentes GUI (Graphical User Interface) semelhantes aos do pacote Swing/AWT, como bot�es, formul�rios, caixas de texto, etc.

Para mais informa��es sobre o JSF, acesse http://java.sun.com/javaee/javaserverfaces.

E como o MobileFaces � associado ao JSF?

Da seguinte forma, voc� pode construir seu sistema Java EE normalmente, utilizando o JSF. Ap�s aplicar o MobileFaces, ele interpreta suas p�ginas de acordo com as necessidades do browser de cada dispositivo, �re-codificando� suas p�ginas, como � mostrado na Figura 2.

Figura 2 � Comportamento das aplica��es desenvolvidas com o MobileFaces

Arquivos de configura��o do sistema

Sistemas Java para web contam com um arquivo de configura��es padr�o, o web.xml. Todas as configura��es referentes ao sistema constam nesse arquivo, por exemplo, tempo de dura��o de uma sess�o, p�gina inicial da aplica��o, mapeamento de servlets e filters, etc. Na Listagem 1 � apresentado como deve ficar o arquivo web.xml com o trecho de configura��o do mapeamento do servlet JSF (linhas 3 a 11) e do tempo da se��o (linha 13).

1.      < ?xml version="1.0" encoding="UTF-8"?>

2.      < web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

3.      < servlet>

4.         < servlet-name>Faces Servlet

5.         < servlet-lass>javax.faces.webapp.FacesServlet

6.         < load-on-startup>1

7.

8.      < servlet-mapping>

9.         < servlet-name>Faces Servlet

10. < url-pattern>*.jsf

11.

12. < session-config>

13.    < session-timeout>30

14.

15.

Listagem 1. Arquivo web.xml da aplica��o

Aplica��es que utilizam o framework JSF contam tamb�m com outro arquivo de configura��es, o faces-config.xml (ver Listagem 2), que por sua vez, tem todos os mapeamentos de classes, a��es, p�ginas, etc. A declara��o de objetos � feita nesse arquivo, atrav�s dos managed-beans (MB), objetos que podem ter suas propriedades alteradas na aplica��o web.

Um managed-bean tamb�m � chamado de backing bean, pois cont�m os dados e os m�todos que ser�o executados quando algum dos componentes JSF tiver que executar uma a��o. Esses managed-beans recebem o nome do objeto atrav�s da tag (linha 7, Listagem 2), a classe referente a esse objeto pela tag (linha 8) e, por fim, recebe o escopo desse objeto atrav�s da tag (linha 9). Por exemplo, voc� tem uma classe chamada Livro.java, e voc� deseja trabalhar com um objeto dessa classe durante a aplica��o, seja salvando, alterando ou excluindo. Voc� declararia seu managed-bean com o nome desejado, por exemplo, LivroMB. Definiria a classe a que esse objeto faz refer�ncia, no exemplo, Livro.java e, terminando a declara��o do MB, voc� definiria seu escopo de visualiza��o, podendo ser session (se��o), onde o estado � mantido enquanto durar a sess�o, request (requisi��o), onde cada requisi��o � um novo estado ou application, onde o estado � mantido at� que a aplica��o morra.

� atrav�s do arquivo faces-config.xml que podemos mapear nossas a��es ou p�ginas. Para mapear a p�gina podemos fazer com que um m�todo retorne uma String e mapear a p�gina para quando receber essa String, abrir uma nova p�gina. Por exemplo, voc� tem uma p�gina de cadastros. O seu m�todo salvar dever� retornar a String �sucesso�, se a a��o for conclu�da com �xito e �falha�, caso contr�rio. A partir desse ponto, voc� pode configurar sua aplica��o para que abra a p�gina x, se receber uma String �sucesso� e a p�gina y, se receber a String �falha�. Atrav�s da tag (linha 12), definimos a regra de navega��o, j� atrav�s da tag (linha 13), definimos em qual p�gina estamos aplicando essa navega��o. Ap�s isso, temos que definir os casos de navega��o, ou seja, o que devemos fazer ap�s receber a String. Isto � poss�vel pela tag (linha 14). Logo ap�s, torna-se necess�rio informar a String que essa p�gina deve esperar, atrav�s da tag (linha 15) e, por �ltimo, informar qual p�gina dever� abrir, pela tag (linha 16).

No arquivo faces-config.xml, tamb�m configuramos os validadores do nosso sistema, atrav�s da tag (linha 20). Nela definimos pela tag (linha 21) o id do validador e pela tag (linha 22) a classe que implementa uma interface de valida��o.

1.      < ?xml version='1.0' encoding='UTF-8'?>

2.      < faces-config version="1.2" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd">

3.      < application>

4.           < view-handler>com.sun.facelets.FaceletViewHandler

5.

6.      < managed-bean>

7.           < managed-bean-name>usuarioMB

8.      < managed-bean-class>managedbeans.UsuarioMB

9.        < managed-bean-scope>Request

10.

11.

12. < navigation-rule>

13.    < from-view-id>/principal.xhtml

14.    < navigation-case>

15.       < from-outcome>ok

16.       < to-view-id>/detalhes.xhtml

17.

18.

19.

20. < validator>

21.    < validator-id>uploadValidator

22.    < validator-class>validators.UploadValidator

23.

24.

Listagem 2. Arquivo faces-config.xml

Componentes JSF

Como foi citado antes, o JSF utiliza componentes GUI (Graphical User Interface) semelhantes aos do pacote Swing/AWT. Esses componentes possuem algumas propriedades que facilitam o envio ou recebimento de dados da sua p�gina. A seguir apresentaremos os componentes JSF mais utilizados nas aplica��es:

�         Bot�o < h:commandButton>: esse componente � usado para submeter dados de um formul�rio;

�         Formul�rio < h:form>: � necess�rio em qualquer p�gina que necessite submeter dados;

�         Campo de texto < h:inputText>: respons�vel por receber entradas de texto na p�gina;

�         Sa�da de texto < h:outputText>: respons�vel por qualquer sa�da de texto impressa na view;

�         Tabela < h:dataTable>: respons�vel pela organiza��o de dados na view. Ela deve vir acompanhada sempre de uma ou mais colunas;

� ...

Quer ler esse conteúdo completo? Tenha acesso completo

Confira outros conte�dos:

Programador Mobile

Desenvolvimento de aplicativos para...

Conceitos b�sicos para programar para...

Por Leonardo Em 2008

Coment�rios nesta publica��o Escrever um coment�rio sobre conte�do

Oferta ativa

ATÉ
50 % OFF

Aprenda a programar de verdade
com o método que já formou +100 mil alunos.

Garantir desconto

Compartilhe esse conte�do com um amigo!
Fa�a login para ganhar recompensas.
Copie o link e envie para seus amigos
Ou

artigo webmobile 17 - Introdu��o ao MobileFaces

Nesse artigo iremos conhecer o MobileFaces, um framework de controle que pode fazer a convers�o de p�ginas da web para dispositivos m�veis e vice-versa.

Confira outros conte�dos: