Projetos Java com Maven

Zend Framework 2 - Parte 1

Minicurso sobre Jogos MultiPlayer com WebSocket, Java e HTML5

Primeiro dia da apresentação (05/12/12)

Hello World Cliente remoto com EJB 3.1 e JBoss AS 7.1

EJB ou Enterprise JavaBeans é um dos principais componentes da plataforma J2EE (Java 2 Enterprise Edition). É um componente do tipo servidor que executa no container do servidor de aplicação. Os principais objectivos da tecnologia EJB são fornecer um rápido e simplificado desenvolvimento de aplicações Java baseado em componentes distribuídos, transacionais, seguros e portáveis [1].

Um dos principais componentes do EJB é o Session Bean, atuando na camada de negócio, é o elemento responsável pela distribuição da aplicação. Invocando seus métodos, outras aplicações, estando na mesma máquina ou não, podem  executar tarefas de negócios dentro do servidor de aplicações [2].

JBoss Application Server (ou JBoss AS) é um servidor de aplicações J2EE open-source, ele foi desenvolvido pela JBoss, atualmente uma divisão da Red Hat. Encontra-se na versão 7.1.1 e implementa a especificação java EJB 3.1 ( JSR 318)

Através da implementação de um Hello World vamos demonstrar como pode ser feita a comunicação client/server usando acesso remonto com EJB.

1 - Pré-requisitos

• JBoss AS 7 (Download);
• JDK (Download) (Quando for criar os projetos escolha sempre JDK e não JRE)
• Eclipse, versão indigo ou superior (Eclipse Juno);
• Plugin Jboss Tools (Instala através do Eclipse MarketPlace);

2 - Definindo JBoss 7.1  Runtime  Server 
Crie um novo server conforme tela abaixo, nossa aplicação servidora será implantada nele. Para isto navegue "File" > "New" > "Other" > "Server".

3 - Criando a aplicação servidora
Crie um novo projeto do tipo "EJB Project";

Na tela que se seguir desmarque a opção EJB Cliente e marque a opção gerar ejb-jar.xml , veja como fica;

4 - Adicionando um componente EJB
No menu do eclipse escolha "New" > "Session Bean". Marque as opções Local e Remote, veja como fica;

5 - Programação do componente
Crie o método sayHello na interface remota do componente e faça a sua implementação, veja como fica o código fonte;

HelloworldRemote.java

package tads.ifrn.edgar.ejbteste;
import javax.ejb.Remote;

@Remote
public interface HelloworldRemote {
 public String sayHello();
}

Helloworld.java

package tads.ifrn.edgar.ejbteste;
import javax.ejb.LocalBean;
import javax.ejb.Stateless;
@Stateless
@LocalBean
public class Helloworld implements HelloworldRemote, HelloworldLocal {
    public Helloworld() {

    }
 @Override
 public String sayHello() {
  return "Alo Mundo!";
 }
}

6 - Execute o Helloworld como Server

7 - Aplicação Cliente
Em um ambiente real o cliente, provavelmente, será uma aplicação web, contudo, para fins de demonstração faremos uma aplicação java normal.
No menu escolha "File" > "New" > "Project" > "Java Project", 

Para esta aplicação estar preparada para se comunicar com o servidor faremos as seguintes configurações;

7.1 - Adicionar uma referência ao projeto do servidor
Nas propriedades do projeto, selecione  " Java Build Path ", na Aba " Projects ", clique no botão " Add ", e marque o projeto servidor, veja como fica;

7.2 - Adicionar a biblioteca cliente do JBoss
É necessário incorporar ao projeto o cliente do JBoss ( jboss-client.jar ), que se encontra na pasta de instalação em ..\bin\client\

Nas propriedades do projeto, selecione  "Java Build Path", na Aba "Libraries", clique no botão "Add External JARs", abra o arquivo jboss-client.jar;

7.3 - Criar uma pasta para recursos e adicione ao classpath do projeto

Na raiz do seu projeto, ou outro local que prefira, crie uma pasta chamada  resources (Pode ser outro nome), adicione esta pasta ao classpath, da seguinte forma;
Nas  propriedades  do projeto, selecione  "Java Build Path", na Aba "Source", clique no botão "Add Folder" e selecione a pasta resources criada anteriormente;

7.4 - Na pasta criada anteriormente, adicionar o arquivo de configuração de conexão
É necessário criar o arquivo  jboss-ejb-client.properties, que deve  conter informações para permitir chamada a EJBs remotos, no mínimo as seguintes linhas;

remote.connectionprovider.create.options.org.xnio.Options.SSL_ENABLED=false
remote.connections=default
remote.connection.default.host=localhost
remote.connection.default.port = 4447
remote.connection.default.connect.options.org.xnio.Options.SASL_POLICY_NOANONYMOUS=false


7.5 - Código fonte do cliente

HelloWordClient.java

import java.util.Properties;
import javax.naming.Context;
import javax.naming.InitialContext;
import javax.naming.NamingException;
import tads.ifrn.edgar.ejbteste.HelloworldRemote;

public class HelloWorldClient {
 public static void main(String[] args) {
  final HelloworldRemote remoto = carregarStatlessBean();
  System.out.println("Mostrando remoto: " + remoto.sayHello());
 }
 public static HelloworldRemote carregarStatlessBean() {
  final Properties propriedades = new Properties();
  propriedades.put(Context.URL_PKG_PREFIXES,"org.jboss.ejb.client.naming");
  Context context;
  try {
   context = new InitialContext(propriedades);
   // O padrão para o comando lookup é ejb:nome do EAR/nome do projeto servidor/nome classe do modulo!nome completo da classe remota
   // Dentro da janela de console do servidor esta informação pode ser percebida, veja o que vem logo após java:jboss/exported
   return (HelloworldRemote) context.lookup("ejb:HelloWorldEAR/HelloWorld/Helloworld!tads.ifrn.edgar.ejbteste.HelloworldRemote");
  } catch (NamingException e1) {
   e1.printStackTrace();
  }
  return null;
 }
}

Referências:

[1] http://pt.wikipedia.org/wiki/Enterprise_JavaBeans

[2] http://java.sun.com/j2ee/tutorial/1_3-fcs/doc/EJBConcepts3.html
[3] https://docs.jboss.org/author/display/AS71/EJB+invocations+from+a+remote+client+using+JNDI

Adicionar Syntax Highlighter para Blogs

Syntax Highlighter (ou  Realce de sintaxe) é uma funcionalidade disponível em alguns editores de texto que apresenta texto — em especial código fonte — numa formatação específica para cada categoria de termos. A mudança da formatação envolve alterações da fonte tipográfica, e principalmente, da coloração do texto. Essa funcionalidade facilita a escrita em linguagens estruturadas como linguagens de programação ou linguagens de marcação, já que as estruturas e os erros de sintaxe são facilmente distinguidos. [1]

Esta funcionalidade, já presente em várias IDEs, é muito desejável em Blogs de desenvolvedores, já que é comum a publicação de trechos de código-fonte para compor o artigo.

Infelizmente, ao menos até a data de publicação deste artigo, este recurso não esta presente no editor de postagem do Blogger, fato que me motivou a procurar uma solução prática.

A solução a ser apresentada se baseou em um post no  bloggermint [2], que usa a biblioteca de javascript e css do  SyntaxHighlighter, uma aplicação html/css/javascript bastante popular, para incorporar esta funcionalidade a sites.

Em resumo, devemos baixar o  SyntaxHighlighter, colocar os arquivos JS e CSS em uma área pública na net, fazer referência a eles no head do Blogger e seguir uma convenção bem simples ao postar um  código-fonte, vejamos;

1 - Faça download do  SyntaxHighlighter.

2 - Coloque, ao menos os seguintes arquivos, em uma área pública na net, no meu caso coloquei em uma pasta do meu site no google. (Estes arquivos estão na pasta onde foi descompactado o arquivo baixado).

• ..\styles\shCore.css
• ..\styles\shThemeDefault.css
• ..\styles\shCoreDefault.css
• ..\scripts\shCore.js
• ..\scripts\shBrushJava.js
• ..\scripts\shBrushCss.js
• ..\scripts\shBrushJScript.js
• ..\scripts\shBrushXml.js
• Adicione arquivos conforme o tipo de código deseja formatar

3 - Modifique o cabeçario do seu Blog, para isto selecione "Visão geral" > "Modelo" > "Editar HTML" > "Prosseguir", dentro da tag <head>, insira o código abaixo, alterando as URLs dos arquivos;

4 - Siga a seguinte convenção ao postar um código fonte no artigo;

<pre class="brush: java">

import java.util.Properties;

public class Testar {

  public static void main(String[] args) {

     System.out.println("Teste!");

  }

}

</pre>

O código html acima vai gerar a seguinte formatação;

import java.util.Properties;

public class Testar {
  public static void main(String[] args) {
     System.out.println("Teste!");
  }
}

Observe que o atributo class da tag <pre> é que vai definir como o código será formatado, no exemplo acima foi utilizado o padrão java, podem ser utilizados outros, como js, css, xml e etc.

Referências:
[1] http://pt.wikipedia.org/wiki/Realce_de_sintaxe
[2] http://www.bloggermint.com/2010/02/how-to-add-syntax-highlighter-for-bloggerblogspot/

AJAX - Na prática e em Detalhes

Um dos classicos problemas de construir uma interface para uma aplicação Web é que uma vez que a pagina foi enviada para o cliente a conexão é encerrada imediatamente.

A qualquer tempo quando é necessária uma interação do usuário com a interface a requisição é enviada para o servidor que reconstroi a interface (Pagina) e envia de volta para o cliente, e dependendo da velocidade da conexão, a reconstrução de toda a pagina pode demorar bastante tornando a Aplicação Web pouco produtiva. Neste artigo abordarei uma solução que vem sendo adotada para a resolução deste problema, o uso do AJAX, que nada mais é do que a utilização conjunta de tecnologias já amplamente utilizadas: Javascript; DOM; XML, e principalmente a utilização do objeto XMLHttpRequest(), em fase de estudo e documentação pelo W3C e implementado pela maioria dos navegadores modernos.

Começaremos abordando um exemplo de aplicação bastante comum, em que se deseja fazer uma pesquisa em uma agenda.

Considere a existencia das seguintes tabelas:

Casdastro de Orgãos
Id	Orgao	Endereco
1	INSS	Rua Castelo Branco, Centro, n. 554, Rio de Janeiro/RJ
2	IBAMA	Rua das Flores n. 300, Centro
3	...	...

Casdastro de Departamentos
Id	id_orgao	nome	fone
1	1	Departamento de Fiscalização	0xx212344577
2	1	Departamento Administrativo	0xx21234578
3	...	...	...

Em uma Aplicação tradicional você selecionaria em uma combo o orgão desejado e entao uma nova pagina será carregada e uma outra combo é preenchida com todos os depatamentos do orgão, nota-se desta forma um inconveninte, uma vez que somente um elemento da pagina será alterado, com AJAX somente a combo com os departamentos seria alterada sem a necessidade de toda a página ser carregada novamente.

Embora o AJAX possa ser implementado em outra linguagem, utilizaremos nessa abordagem o PHP, por ser a mais popular dentre as linguagens de script Server-Side. Na implementação do nosso pequeno exemplo teremos uma pagina principal chamada "agenda.php" e uma pagina que retornara os dados chamada de "pesq_depto.php" , as quais devem conter os seguintes codigos, que estão comentados para facilitar o entendimento:

Codigo fonte do script agenda.php <html> <head><TITLE>Exemplo de Agenda com Ajax</TITLE></head> <style>        td {border: 1px solid rgb(192, 192, 192);            background-color: rgb(255, 255, 204);} </style> <SCRIPT language="JavaScript1.2" type="text/javascript"> var requisicao; // Função para pegar os dados no servidor // sem ter que carregar toda a pagina novamente function LerDocXML(url) {     // Caso o browser seja baseado no Mozilla         if (window.XMLHttpRequest) {         requisicao = new XMLHttpRequest();         requisicao.onreadystatechange = ProcessaResposta;         requisicao.open("GET", url, true);         requisicao.send(null);     // Caso o browser seja o Internet Explorer           } else if (window.ActiveXObject) {         req = new ActiveXObject("Microsoft.XMLHTTP");         if (requisicao) {             requisicao.onreadystatechange = ProcessaResposta;             requisicao.open("GET", url, true);             requisicao.send();         }     } } // Função para processar os dados retornados // do servidor, ela é chamada automáticamente // assim que o servidor responder à função // LerDocXML function ProcessaResposta() {     if (requisicao.readyState == 4) {       if (requisicao.status == 200) {             orgao  = requisicao.responseXML.documentElement;             departamentos = orgao.getElementsByTagName('departamento');             if (departamentos[0].firstChild.data!=0) {                 // Preenchimento da combobox de seleção de departamentos                 // Com dados retornados                 selec_depto = document.getElementById("depto");                 selec_depto.options.length=0;                 for(x=0; x<departamentos.length;x++) {                     var o=new Option();                     o.text=departamentos[x].getAttribute("nome");                     o.value=departamentos[x].firstChild.data;                     selec_depto.options[selec_depto.options.length]=o;                 }                 // Preenchimento dos INPUT endereco e fone                 input_endereco = document.getElementById("endereco");                 input_endereco.value = orgao.getAttribute("endereco");                 input_fone = document.getElementById("fone");                 input_fone.value = departamentos[0].getAttribute("fone");             }       } else {             alert("Ocorreu algum erro: " + requisicao.statusText);        }    } } // Função executada toda vez que houver alteração // no campo de seleção de orgãos function mudar_orgao(evnt, campo) {     codigo = campo.value;     url  = 'pesq_depto.php?orgao=' + codigo;     //Chamada à função que solicitara dados no servidor     //neste caso solicita a relação de departamentos     //cujo o codigo de orgao seja o definido na variavel     //codigo    LerDocXML(url);     } function muda_depto() {    //A ser implementada conforme necessidade } </script> <? // Parametros de conexao com a base de dados no servidor MySQL $db_host="localhost";  // Servidor onde esta hospedada a base de dados $db_user="nome_do_usuario";      // Usuario $db_pass="senha";     // Senha $db_name="agenda";       // Nome da Base de Dados // Comando para conectar com o MySQL $conexao=mysql_connect($db_host, $db_user, $db_pass); if(!$conexao) die("Erro ao conectar com o MySQL"); // Selecionando a base de dados $base=mysql_select_db($db_name, $conexao); if(!$base) die("Erro ao selecionar a base"); // Formulario de pesquisa ?> <FORM  ACTION="<? echo $HTTP_SERVER_VARS["PHP_SELF"]?>" METHOD="GET"> <table width="100%" >     <col width="50%">     <col width="50%">     <TR >         <TD>             Selecione o Orgão         </TD>         <TD>             Selecione o Departamento         </TD>     </TR>     <TR>         <TD>             <SELECT tabindex="0"   id="orgao" name="orgao" ONCHANGE="return mudar_orgao(event, this)">             <?                 // Preenchimento deste SELECT com registro da tabela orgaos                 $pesquisa = "select * from orgaos";                 $tabela=mysql_query($pesquisa);             while($registro=mysql_fetch_array($tabela)) {                     $codigo = $registro['id'];                     $orgao = $registro['orgao'];                     echo "<OPTION value=$codigo> $orgao";             };             ?>             </SELECT>         </TD>         <TD>             <SELECT  id="depto" name="depto" ONCHANGE="muda_depto(this)">             </SELECT>         </TD>     </TR>     <TR >         <TD colspan="2">             Endereço: <INPUT size="80" type="text" name="endereco" id="endereco">         </TD>     </TR>     <TR>         <TD colspan="2">             Fone: <INPUT size="80" type="text" name="fone" id="fone">         </TD>     </TR> </table> </form> </html>

Codigo fonte do script pesq_depto.php <? header('Content-Type: text/xml'); $db_host="localhost"; // local onde esta a base de dados $db_user="nome_usuario";     // nome do usuario na base $db_pass="senha";    // senha $db_name="agenda";    // nome da base de dados $con_link=mysql_connect($db_host, $db_user, $db_pass); $base=mysql_select_db($db_name, $con_link); echo '<?xml version="1.0" encoding="ISO-8859-1" standalone="yes" ?>'; if(isset($_GET['orgao'])) {     $orgao = $_GET['orgao'];         $pesquisa = "select endereco from orgaos where id = $orgao";     $tabela = mysql_query($pesquisa);     $registro=mysql_fetch_array($tabela);     $endereco = $registro["endereco"];     echo "<orgao endereco='$endereco'>";     echo "<departamentos>";     $pesquisa = "select * from departamentos where id_orgao = $orgao";     $tabela = mysql_query($pesquisa);     while($registro=mysql_fetch_array($tabela)) {          $codigo = $registro['id'];          $nome = $registro['nome'];          $fone = $registro['fone'];          echo "<departamento nome='$nome' fone='$fone'>$codigo</departamento>";     }     echo '</departamentos>'; } else {     echo "<orgao>0"; } echo '</orgao>'; ?>

Como vocês podem ter observado no código assima o sistema todo é baseado em três funções em JavaScript LerDocXML(url), ProcessaResposta() e mudar_orgao(evnt, campo). Quando o usario seleciona um orgão o evento ONCHANGE da tag "select" chama a função mudar_orgao, que por sua vez forma uma url com o codigo do orgao selecionado (url = 'pesq_depto.php?orgao=' + codigo;) e chama a função LerDocXML passando como parametro a url, esta função por sua vez cria um objeto "requisicao" a partir da classe XMLHttpRequest, que entao define a função (requisicao.onreadystatechange = ProcessaResposta;) que tratara a resposta da pagina "pesq_depto.php" aberta pelo metodo open(). Quando o servidor retornar os dados a função ProcessaResposta é chamada e então preenche os demais campos do formulario dinamicamente.

O objetivo deste Post era mostrar na prática e em detalhes como é uma implementação de AJAX e espero ter conseguido.