sexta-feira, 30 de março de 2007

Flex Java e MySql - Troca de Objetos com OpenAMF

EDITADO DIA 23/01/2008

Olá Pessoal, Este artigo faz uso do Framework OpenAMF que já foi desecontinuado.
Recomendo a leitura deste artigo -> http://blog.digows.com/?p=103
Que faz uso da solução OpenSource da Própria Adobe, o BlazeDS.

Porém, se você está aprendendo, ainda sim o tutorial abaixo é válido.

EDITADO DIA 13/10/2007

ATENCÃO!
O código fonte disponibilizado, foi melhorado e atualizado.

Para fazer o Download do mesmo clique aqui**:
Projeto JavaFlex com OpenAMF

Para utilização, apenas extraia o arquivo TutuJavaFlex.rar na pasta webapps do tomcat, ficando:
..\Tomcat\webapps\JavaFlex\*.*

Após isso, gere um banco de dados através do script dentro da Pasta JavaFlex: javaflexBD.sql
Feito isso, acesse: http://localhost:8080/JavaFlex/bin

Para edições , importe o projeto no Eclipse com o plugin do FlexBuilder instalado.

Lembrando que a apresentação abaixo apenas esclarece cada passo realizado.(...)


(...)

Mais então, um dos assuntos mais comentados pela net, é como deixar o Flex, como Camada de Apresentação para o Java,

realmente, se tem poquissimo material sobre este assunto, e o pouco que tem, meio complicado de entender,
eu mesmo já apanhei muito no começo, quem me deu uma mão na roda foi o "Mindu" do Grupo Google (FlexDev), hoje até já montei uma arquitetura usando Java, Flex, Hibernate, e OpenAMF trocando somente objetos!

Mas então, vamos lá?!


=====================================================

Requerimentos:
-- Ambiente configurado com Flex Builder, Java e TomCat ou similar;

--Conhecimentos Básicos de Java e Flex;

--MySQL® Connector/Java;
(Download: Link)

--OpenAMF RC12 - Java Flash Remoting;
(Download: Link)

1- Abra seu Eclipse, com Plugin do FlexBuilder, e crie um novo projeto Java com o nome de TutuJavaFlex (File=>New=>Project=>JavaProject).

O Projeto tem que ficar na pasta webapps do TomCat normalmente: "C:\tomcat\webapps\"
Ficando: "C:\tomcat\webapps\JavaFlex"


2- Vá até o a pasta "JavaFlex" pelo o explorer, e dentro dela, crie uma pasta chamada de
"WEB-INF" e dentro desta pasta, adicione os esses arquivos:





    • Bibliotecas do OpenAmf e o driver do MySql utilizadas na aplicação
- ant.jar
- astranslator-1.5.9.jar
- axis.jar
- commons-beanutils-1.7.0.jar
- commons-codec-1.3.jar
- commons-collections-3.1.jar
- commons-digester.jar
- commons-discovery.jar
- commons-httpclient-3.0.jar
- commons-lang-2.1.jar
- commons-logging-1.0.4.jar
- dom4j-1.6.jar
- log4j-1.2.9.jar
- mysql-connector-java-xxx-bin.jar
- openamf.jar
- wsdl4j.jar
  • O Arquivo de configuração openamf-config.xml não sofreu alteração, basta copiá-lo do arquivo openamf-xxx.zip e adicionar na pasta WEB-INF da sua aplicação.
  • Arquivo web.xml da aplicação com a configuração do OpenAmf se encontra no .rar baixado.

Estrutura (WEB-INF):

/WEB-INF
/lib/"OS JARS";
/WEB-INF/"
openamf-config.xml" e "web.xml";
/WEB-INF/classes/"Futuras Classes Javas";

Volte ao FlexBuilder e de um F5 para Atualizar o projeto, e depois de um botão direito sobre a pasta raiz do projeto(TutuJavaFlex), e vá até properties =>Java Builder Path =>Libraries => ADDJars , navegue até a pasta lib, e selecione todos os Jars disponiveis, OK;
Em Source, vá até "default output folder" e navegue até a pasta classes dentro de WEB-INF
("WEB-INF/classes") OK.


3- Vamos Criar uma Tabela 'pais' em um banco qualquer para o exemplo:


CREATE TABLE `pais` (
`id` int(10) unsigned NOT NULL auto_increment,
`pais` varchar(255) NOT NULL default '',
PRIMARY KEY (`id`)
) ENGINE=InnoDB;


4- Volte ao FlexBuilder, e crie uma pasta src no diretório raiz do projeto, e dentro dela, uma chamada java;

5- Dentro da pasta java, crie uma classe Java chamada Pais.java, dentro dela crie uma bean java normal:

package src.java;
public class Pais{
public int id;
public String pais;
public int getId(){
return id;
}
public void setId(int id){
this.id = id;
}
public String getPais(){
return pais;
}
public void setPais(String pais){
this.pais = pais;
}
}


6- Ainda Dentro da pasta Java, crie uma classe chamada PaisDAO.java que se encontra no projeto
baixado.



Esta é uma classe java normal, aonde tem os Sqls, e a conexão com o banco;

No método:

public Connection getConnection()throws Exception {
if(conn == null){
Class.forName("org.gjt.mm.mysql.Driver");
conn = DriverManager.getConnection("jdbc:mysql://localhost/test?user=root&password=");
conn.setAutoCommit(false);
}
return conn;
}


Altere, o "test" para o nome do Banco que Você irá usar, assim como "user" e "password".


7- Crie mais uma nova classe java, chamada PaisService.java, e adicione os códigos igual ao do rar baixado.

8- Agora, dentro da pasta src, crie uma pasta chamada flex, até agora, já criamos todos os arquivos java necessários para este exemplo;

9- Já que o java já esta criado, de um Botão direito sobre o projeto e vá em
Flex Project Nature -> Add Flex Project Nature


10- Agora vá até a pasta flex e crie uma classe ActionScript chamada RemotingConnection.as
iguamente ao que se encontrar no aquivo rar baixado.

Perceba a que exite essa linha:

public var sURL:String = "http://localhost:8080/JavaFlex/gateway";


Se Voce Não mudou o nome do diretório, deixe como está.

Esta é a classe principal, é ela que faz a conexão entre o Flex(Flash) e o Java, isto é, ela cria um

gateway (Ponto de Acesso) , entre os 2.





11- Belza!! agora vamos ao mais divertido, criar telas! +)
para isso, automaticamente deve ter criado um arquivo chamado: JavaFlex.mxml na raiz do projeto, e adicione códigos iguamente ao que se encontrar no aquivo rar baixado.

O código esta bem comentado, está bem fácil de entender! =)

Pronto!! Sua Aplicação Já está Feita!! +)

Vamos Executar?

Vá ao menu:

Project=>Clean

(Depois em desenvolvimento, gosto de deixar marcado a opção "Build Automatically")

Start o TomCat e

acesse: http://localhost:8080/JavaFlex/bin/JavaFlex.html

se vc fez tudo correto, funcionará!! +)

bom pessoal, para entender melhor como funciona a comunicação entre essas 2 poderosas linguagens, bacana seria ler a documentação do OpenAMF, Vale a pena!

Abraço Pessoal!!!! \o/

Download do Projeto Completo: Link
(Para utilizar, é só importar para o eclipse e dar um Clean)

terça-feira, 27 de março de 2007

Flex - Leitor de RSS

Fala ae pessoal de programa!!!!

=)

Quanto tempo sem um tutu descente não? sb como é né, essa vida de garoto dos programas é complicada!!

+)

Vcs Viram que coloquei coisa nova aqui no blog?!?!?

--Projetos em Produção!
--Cliques Rápidos
--Fale Comigo (Plugoo)
--Busca de Códigos (Bastante util)

só pra deixa mais organizado!! ;)

Mas Então... vamos ao que interessa:

Vamos fazer um leitor de RSS com Flex!!!

quem nunca brincou com javascript ou html cru para tentar fazer um leitor de rss
não sabe a dor de cabeça que é fazer isso, o flex vendo que
feeds e afins, é o "futuro", facilitou muito mais fácil a forma de fazer isso.

1. De inicio, vamos localizar um rss do seu gosto:

http://rss.uol.com.br/
http://www.terra.com.br/rss/
http://oglobo.globo.com/rss/
http://www.estadao.com.br/rss/
http://www.ig.com.br/rss/(Tem Diversos Temas Interessantes...)

Eu Estarei usando do Grupo Flex-Basil do Yahoo.

http://rss.groups.yahoo.com/group/flex-brasil/rss

2.Visualize seu RSS, mostrando a ávore XML para entender melhor.

Quem usa IE 7, tem que desabilitar o leitor de feeds!


3. Escolhido seu RSS, crie um projeto novo no Flex, com o Nome de:
FlexCSS

  • Perceba que ele já criou um FlexCSS.mxml, clique em Desing, e adicione uma DataGrid,
  • Selecione-a, e clique em source. Na Tag deve ter algo assim:



No meu caso, eu usarei o "titulo" e a "Descricao" do rss que respctivamente está nesse caminho:
Título: rss.channel.item.
title;
Descricão:
rss.channel.item.description;

com isso, criarei os campos que eu quero exibir na dataGrid e também, configurar um HTTPService
para navegar até este xml, e trazer as informações para mim.



e a DataGrid:





Para concluir precisamos configurar, para quando abrir a aplicação, já carregar o xml automaticamente,
para isso, deixe sua Tag
assim:


isto é, quando o form terminar de se criar, ele da um send no HTTPService, listaXML.

Pronto!!! Seu Leitor de RSS, Está Protinhu!! +)

Muiiiito Fácil não?!?!? E Ainda tem gnt querendo sofrer com html.... (Dá me forças...+)

Código Completo:





Download Source Project:
FlexRSS

Abraço Galerah!!! +)



segunda-feira, 26 de março de 2007

Adobe Photoshop Light será uma RIA

A Adobe planeia lançar dentro de seis meses uma versão Light do Adobe Photoshop feita em Flex 2 a funcionar no browser, e será em princípio um serviço ad-based (remuneração por publicidade).

Já Penso você poder editar online suas fotos? e o melhor!!! em RIA!!!

=)

Oq será desse Mundo.....

Ver

terça-feira, 20 de março de 2007

Instalando Configurando e Executando Aplicações com Apollo

opa! +) Hoje To inspirado...

Você Não Entendeu bulhufas nenhuma do que é esse Apollo?! quer saber oq ele faz?!!

+)

Seus Problemas acabaram!! ehheheh vo tenta mostra aqui um pouco do poder que esse apollo tem.

Primeiro vamos configurar sua maquina para rodar legal as aplicações!!

(Diga cedida pelo Carlos Eduardo (e-genial).


Botão direito em cima do Meu computador ->
Propriedades ->
Aba Avançado ->
Váriaveis de Ambiente ->


Em váriaveis do Usuário para X, edite a variável TEMP e TMP, e altere o valor da variável para C:\temp, dê um ok, ok e mais um ok, crie a pasta temp em c:\

Ficando c:\temp

BlzA?! Tudo configurado?!!? Essas configurações tem de serem feitas pq o apollo ainda esta em fase
de testes!! e ele não tá encontrando diretórios com acentos...

Feito isso Agora é só baixar a Maquina Virtual Apollo

Link: Windows


Ruby on BR
Feito Pelo Pai! Carlos Eduardo...

Adobe Examples:

Fresh

Maptacular

Scout

Lookup

Pixel Perfect

ScreenPlay


Um Video bao! de ver!!

e-Bay Apollo


Bom acho que com issu da pra ter uma ideia do que vem porae...

Blza??!

Abração!! Galerah!!! Te Amuh liz!! S2

\o/


Histórico das Linguagens de Programação

Fala ae turma dos programas!!

=)

Eu estava fazendo minhas pesquisas diarias pela net, e encontrei um pdf bem bacana!!

Mostra uma linha do tempo em paralelo com as linguagens de programação que já existiram.

Bem Bacana!! quem quizer conferir!!

pega o Link!! +)

Link

domingo, 11 de março de 2007

Configurando um Ambiente para Desenvolvimento com Flex e a Primeira Aplicação

Essa semana, eu e o kinja estavamos conversando sobre flex java e tals, e do nada ele teve uma ideia de um site! revolucionário claro! heheh então nós bolamos a idéia de fazer em flex com java

Mas então vamos la!!

Primeiro vamos configurar para Desenvolver usando Flex! +)

Requerimentos:
--Ambiente configurado para desenvolvimento em JAVA
--Eclipse 3.2.2 (Mirror: UFPR)
--Flex Builder 2.0 Trial (É necessário fazer um cadastro para baixar)


  1. Depois de Baixado os links primeiro instale o Eclipse, é muito facil, só avançar e avançar e bla bla! +), recomendo instalar no diretório c:/ Ficando C:/Eclipse/


  2. Agora é soh instalar o flex Builder também muito fácil:


a) Na Primeira Tela ele pedirá aonde vc quer extrair o arquivos, deixe o padrão.

b) Depois ele pedirá se vc quer instalar o Flex limpo somente ele e o Eclipse (Flex builder and Flex SDK), e instalar o Flex Builder como se fosse um Plugin adicional para um Eclipse Já instalado (Flex Builder Plugin And Flex SDK), Vamos utilizar a segunda Opção.

c) Depois é ir avançando até o momento onde ele pedira para localizar o Eclipse Instalado e Pronto!!
seu ambiente já está ok!! para desenvolvimento! +)


Se alguem Quise tenho esse aqui...

  • Plugin Flex Builder 2.0;
  • SDK Flex 2.0;
  • SDK Apollo;
  • Plugin PHP;
  • Plugin Search Koders;
  • TomCat Server 6.0 c/ Plugin;
  • Pluigin Xampp;
Isto é, bem completinho para desenvolvimento WEB!

Link Para Download:
Link



Vamos Primeira Aplicação?

1 - Abra seu Eclipse, e selecione a perspective FLEX;
(Window -> Open Perspective -> Other -> Flex Development)

2 - Vamos criar um Novo Projeto Flex;
(File -> New -> Flex Project)



3 - Nesta proxima Janela selecione o modo "Basic (e.g XML or PHP, JSP, .NET)" e avance;


4 - Coloque nome "OlaMundo" em Project Name e clique em FINISH;Percebe que ele já cria os diretórios necessários para o desenvolvimento e já abre um OlaMundo.mxml



Nesse mxml, vc tem o modo Source e o modo Desing, clique em Desing


a) Na aba Components, clique em Button e arraste para o Desing.

b) Clique em Source e na tag perceba ali que que vc pode mudar o label e tem o x e o y, estes regulam a localizaçao do componente.

c) Agora Complete como na imagem abaixo:



Depois de digitado vamos compilar esta aplicação:


Na View " Navigator " clique com o Botão direito do mouse em OlaMundo.mxml e vá até Run AS e clique em Flex Application, com isso ele compila gera um .swf, esse gerado na pasta bin ali em navigator.

Aplicação Rodando:
http://digows.orgfree.com/flexdemos/olamundo/

Source do Exemplo:
Link






Falando um Pouco sobre Flex e Laszlo

O que é o tal do Flex?

Adobe Macromedia Flex é uma tecnologia voltada para aplicações RIA.

No Flex é utilizada uma linguagem de marcação, o MXML que é baseada no XML, para definir a interface da aplicação, e o ActionScript para a parte lógica.

As aplicações Flex levam a extensão .mxml e podem ser criadas em qualquer editor de texto comum, como o Bloco de Notas.

Para visualizar uma aplicação MXML, o usuário faz a requisição pelo seu Browser:
www.site.com.br/arquivo.mxml, Quando o servidor recebe a requisição o Flex Server compila o arquivo MXML para um SWF, que será rodado no Flash Player;
Salva o arquivo SWF na máquina do cliente e abre o SWF a partir da máquina do cliente, este é um modo de compilação, mas existem outros modos.

Flex Server e Flex Builder de graça?


É muito bom para ser verdade, mas é! Se você não vende nada e não anuncia nada no seu site, é bem provável que esteja apto a usar o Flex em suas aplicações e websites. A adobe Macromedia tem uma licença especial do Flex chamada "Non-Commercial/Non-Institutional License", que em resumo é de graça (exceto pela taxa de envio do CD ~ U$ 9,00). Veja o que diz o site da Macromedia sobre quais situações se aplicam e são válidas para esta licença:


*Using Flex in a non-commercial and non-institutional manner. (Non-commercial use means that the software may not be used on any web site or application that sells, advertises, or otherwise promotes revenue-bearing products or services of any kind. Non-institutional use means that the software may not be used for any web site or application that facilitates the operation of any institution, including but not limited to corporations, partnerships, sole proprietorships, governments, or educational institutions.)*Educators or students looking to learn or teach Flex.*Bloggers who want to showcase Flex applications on their personal blog.

Isto é, o flex em si! eh todo free!! a única coisa que é paga, é o Poderoso Flex Builder 2!! Baseado na IDE Eclipse, mas vc pode fazer suas aplicacões em Flex usando uma outra ide, ou até mesmo um Bloco de notas, e usar o flex Compile para compilar!

Demos:
http://www.dclick.com.br/demos/flex/indicadores_performance/

http://www.dclick.com.br/demos/flex/motors/

http://www.dclick.com.br/demos/flex/relatorios_graficos1/

http://www.dclick.com.br/demos/flex/drill_graficos/

http://www.treinatom.com.br/tom/bin/index.html

Documentação:

http://livedocs.adobe.com/flex/2/langref/index.html

http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html

http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html


O que é o tal do Laszlo?

Achei um artigo bem bacana explicando oque é o Laszlo

Acessem ae: http://www.javafree.org/content/view.jf?idContent=120

Demos:
http://ivanirjoao.serveftp.com:8080/e-LIB/main.jsp (Ivanir Joao UDC - e-Lib)

http://labs.openlaszlo.org/lps-4.0b1/demos/lzpix/app-loader.html?lzr=swf7&lzt=html

http://www.laszlomail.com/

http://www.openlaszlo.org/lps/laszlo-explorer/coverpages/amazon_cover.html

Documentação:

http://www.openlaszlo.org/lps/docs/guide/index.html

http://www.openlaszlo.org/lps/laszlo-explorer/index.jsp?navset=nav10.xml&bookmark=Introduction

http://www.openlaszlo.org/documentation

http://www.openlaszlo.org/lps/docs/reference/index.html



Agora, aonde eles ficam no java?

Falando de camadas, tem esse breve artigo que explica um pouco sobre uma programaçao Orientado a camadas:

http://www.mundooo.com.br/php/modules.php?name=MOOArtigos&pa=showpage&pid=21


Com base nesse artigo, da pra se ter uma ideia do que é as Camadas, View (Apresentacao) a Business (Camada de Negócios) e a de Peristência (A que Comunica com um BD).

O Laszlo e o Flex ficam ali na camada de apresentaçao, é neles que encapsula toda lógica de apresentação, Intercepta a requisição do cliente e direciona aos objetos de negócio.

Bom galerinha, acredito que deu pra dar uma clareada!!

Abraço Galerah! \o/