sábado, 28 de abril de 2007

Adobe Spry: Web 2.0 com Ajax!

Olá Galerinha!!

=)

Essa semana eu estava olhando o Labs da Adobe,

E me deparei com esse Poderoso Framework, o Adobe Spry!

O Spry assim como o GWT (Google Web Toolkit), YUI (Yahoo! UI Library), ou tantos outros,

São Frameworks OpenSources para desenvolvimento Web com Ajax seja ele no Visual (Drag and Drop, Efeitos)

Ou no negócio. Isto é, uma maneira de desenvolver Web 2.0! só que independente de plugin

Apenas utilizando JavaScript e Ajax, uma opção aqueles que infelizmente não gostam do "perfeitinho" plugin flash

Bom, O que eu admirei no Spry em relação aos outros frameworks!

  • O código final, é muito enxuto, são apenas alguns includes nos JavaScripts que são suas Libs.
  • Alguns não gostaram, mas você trabalha usando Tags Spry, tipo uma TagLib do JSP, o que Torna o código fácil de entender e muito mais acessível.
  • Ele vem junto com o Adobe Dreamweaver CS3, o novo editor Web da Adobe, que por sinal na aparência não mudou nada, mas para desenvolver ficou show! Dá para fazer Tabelas dinâmicas igual ao Delphi4PHP, apenas Clicando e arrastando! =)
  • Tem uma rica biblioteca que a mãe Adobe, chama de Widgets, que nada mais nada menos é uma coleção de componentes que tem a mesma aparência comportamento que um componente do Adobe Flex2, só que feito em JavaScript
  • Entre outros que aos poucos ainda estou percebendo! +)

Conclusão...

  • Adobe Spry é uma alternativa para quem não gosta do Plugin Flash, ou quer desenvolver RIA apenas com html.
  • Tem uma poderosa IDE o Adobe Dreamweaver CS3, para auxílio no desenvolvimento.

Alguns Links

Wiki Labs Adobe Spry
Link

Demos de Aplicações feitas com Spry
Link

Qualquer dia desses post um tutorial sobre Spry!

Blza Galerinha!?!?

Abraço, tudo de bom!

\o/

quinta-feira, 26 de abril de 2007

Flex: Adobe to Open Source Flex

É isso mesmo que você leu!!

A adobe resolveu abrir todo o código fonte do SDK Flex!!!

Hoje cedo, minha caixa de entrada de e-mails estava cheia só falando desta ótima notícia

+)

isso é muito bom!!! principalmente para aqules que amam Software Livre

E Principalmente para aqueles que querem convercer seus chefes, de que o Flex é Bao!


Segue o Link do Labs:

http://labs.adobe.com/wiki/index.php/Flex:Open_Source


Viva ao Software Livre!!


\o/


Abraço Pessoal........

sábado, 21 de abril de 2007

Delphi PHP - Populando uma DataGrid com Dados do MySQL

Olá Pessoal!!
Já Baixaram o Delphi for PHP!?!!
Quem ainda não, pow baixe logo, é show ! Como gosto de dizer, é muito poderoso!!



Quer Ver?!

Vamos lá então, primeiro pra quem não tem, faça o download aqui:
http://www.codegear.com/Downloads/tabid/101/Default.aspx

Tem que fazer um cadastro bem rápido e através deste registro, eles mandaram uma Key para o seu e-mail.

Após baixado, pra instala é muito fácil!! Só “next” “next” e etc... ehehe

talvez na hora da instalação ele mostre se você quer adicionar 2 dlls,aceite as 2, uma é do MySQL, outra do Interbase.

Após instalado, perceba que ele já instalou um servidor Apache, e um Debbuger.
Abra o Delphi4PHP e entre com sua Key que foi enviada ao seu mail.
Após isso, tem que aparecer esta tela:


Igual ao velho Delphi de Guerra vai dize?

Vamos Fazer uma Aplicação Conectando com Banco MySql, populando uma dataGrid Editável!?!? E o melhor!! Em menos de 15 minutos?
+)

Primeiro de Tudo, precisamos ter um banco no MySQL, para isso use esse script:


CREATE DATABASE `teste`
CHARACTER SET 'latin1'
COLLATE 'latin1_general_ci';
USE `teste`;
#
# Structure for the `paises` table :
#
CREATE TABLE `paises` (
`idPaises` tinyint(3) unsigned NOT NULL auto_increment,
`nomePais` varchar(45) collate latin1_general_ci default NULL,
`siglaPais` char(2) collate latin1_general_ci default NULL,
PRIMARY KEY (`idPaises`)
) ENGINE=MyISAM AUTO_INCREMENT=7 DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci;
#
# Data for the `paises` table (LIMIT 0,500)
#
INSERT INTO `paises` (`idPaises`, `nomePais`, `siglaPais`) VALUES
(1,'Brasil','BR'),
(2,'Paraguai','PY'),
(3,'Argentina','AR'),
(4,'Chile','CL'),
(5,'Afeganistão','AF'),
(6,'Estados Unidos','US');
COMMIT;



No Delphi4PHP, Clique em New, depois Marque PHP, e selecione Application, em seguida um OK.

Perceba que ele já gerou uma unit que na verdade é um Form também!

Ali no Tool Pallete, localize e arraste para o Form os componentes:
  • Database
  • DataSource
  • Table
  • DBGrid

    Assim que arrastar, tem que ficar algo assim:

Tendo arrastado, e partindo que você já tenha configurado seu banco vamos configurar os componentes:
Clique em Datebase1 e no object Inspector no lado esquerdo, configure sua conexão com o banco

  • Conected: true;
  • DatabaseName: teste;
  • DriverName: mysql;
  • Host: localhost;
  • UserName: NomeDoUserdoSeuBanco (no meu caso root);
  • UserPassword: SenhaDoSeuUsuario


O resto deixe como está.


Agora em Table1 , configure assim:

  • Active: true;
  • Database: Database1
  • TableName: Paises;

Em Datasource1, assim;

  • DataSet: Table1;


E Finalmente na DataGrid (DGGrid1), configure assim:

  • DataSource: Datasource1;


Prontinho!! Agora é só salvar e executar clicando na Flecha verde logo acima.

Tem que aparecer algo assim:



Muito fácil não?, fora que pela DataGrid você pode alterar os dados!!


Bom Pessoal , acho que deu pra ter uma idéia da guerra que está por vir...
É Adobe Flex de um lado, Laszlo de outro, Delphi 2007, JSF e assim vai!

Abraço Pessoal!!
E Obrigado a todos que estão acompanhando meu BloG!
\o/

segunda-feira, 16 de abril de 2007

Gerenciamento de Memória, Framework para Desenvolvimento RIA e O Jeito de Programar Web 2.0

Olá Pessoal!!

Quanto tempo não!??! sabe como é alguns pequenos sistemas pra termina, outros pra começar
bateria de provas na Faculdade, Problemas que me dão dor de cabeça!
e porai vai...

Mas então, vamos ao que interessa!

É impressionante como as aplicações em Flex está crescendo, e infelizmente, a galera pega o Flex Builder, vai arrastando os componentes fazendo algumas telas, e já acham que dominam o pai Flex,
e se acham pronto a desenvolverem sistemas! infelizmente é assim que acontece na maioria das vezes.
O próprio conceito,
Web2.0, nem ao menos sabem do que se trata o.O

Mas não estou aqui para julgar ou algo do tipo!! não é??

+)


Gerenciamento de Memória do Flash Player

Um dos principais problemas em desenvolver aplicações com Flex, é desenvolver telas, tendo um controle de armazenameto de memória,

"o problema sobre o não real descarregamento da memória está muito mais ligado à natureza do Flash e do Flex SDK"

Por: Fabio Terracini

  • A arquitetura do Display List não permite (na verdade dificulta muito) que um DisplayObject seja removido completamente da memória, e o SDK é tão interligado que é muito difícil remover todas as referências de alguma instância para esta estar completamente sujeita ao GC (Garbage Collection.
  • Assim, mesmo que vc faça button = null, parte dele continuará na memória. E isso piora ainda mais quando o objeto for para o displaylist. Um objeto "aparecer na tela" também consome memória.

Isto é, infelizmente o Flash Player, não tem um GC (Garbage Collection) muito aprimorado, ele vai carregando e carregando a memória, até travar o browser, ou gerar erros.

Não que eu esteja condenando o tão pequeno e simples Flash Player porém muito poderoso! e sim aqueles que desenvolvem suas aplicacões seja ela em puro Flash, ou Flex , de maneira desogarnizada.

Para isso..


Framework MVC - Cairngorm


No Mundo O.O existem os Framewoks MVC
Model View Controller ou Modelo-Visão-Controlador, estes responsáveis por organizar e separar o negócio da camada view, isto é, tem um cara ali por traz em seu desenvolvimento, organizando tudo!

Para trabalhar com o Flex, existe o Cairngorm, Poderoso Framework MVC para aplicações RIA, este provido de uma empresa alheia, hoje fundida a Adobe! +)

O Cairngorm utiliza os seguintes design patterns:

• View Helper
• Front Controller
• Command
• Sequence Command
• Business Delegate
• Service Locator
• Value Object
• View Locator
• Model Locator
• Responder


View Helper

O View Helper é um auxiliar para a view, ou seja, a nossa tela. Seu propósito é literalmente separar a lógica da tela com a tela em si, ou seja, funções que manipulam a tela dos elementos de interface da tela (grids, listas, e afins). Desse modo, mantém a tela responsável por formatar os dados, enquanto a responsabilidade de pegar, processar e preparar os dados é do View Helper.

Front Controller

A medida que os use cases de um determinado software aumentam, aumenta também a quantidade de serviços da aplicação, inclusive de serviços comuns, como autenticação e log. Desse modo, o Front Controller é um ponto de contato para cada request, separando a camade de negócios da camada de apresentação. O Front Controller fica “escutando” os eventos ocorridos e controlando o fluxo da aplicação.

Command

Quanto mais código é adicionado no Controller referente aos use cases, cresce a sua complexidade e dificulta sua manutenção. Desse modo, propõe-se reduzir a complexidade do Controller reduzindo sua lógica. Com o Command, o Front Controller fica livre para a sua principal tarefa, delegar para alguém fazer o trabalho. O Command, por fim, é implementado por use case, gerenciando a resposta de um método remoto. Como é por use case, dois Commands podem chamar o mesmo método remoto, mas em seu tratamento de resultado, podem realizar tarefas diferentes.

Business Delegate

O Business Delegate propõe não expor os detalhes de implementação de serviços de negócio. Dessa forma, ele visa ocultar a complexidade de comunicação remota, acessando a camada de negócio. As conexões cliente-servidor ficam centralizar e o mesmo método pode ser utilizado por diferentes Commands.

Service Locator

Criar conexões de diferentes serviços não é a preocupação do desenvolvedor em Flex, já que os dados que ele irá utilizar independem do tipo de serviço remoto. O Service Locator é uma abstração da implementação de serviços, escondendo de seu cliente (o Business Delegate) os detalhes de conexão.

Value Object

O Value Object (VO) resolve o problema de transferência de dados entre camadas da aplicação, já que o que importa não é como os objetos são representados (em ColdFusion, em Java, etc..), mas sim os dados desses objetos. O VO é um container para dados que representa uma entidade do sistema, possibilitando interoperabilidade entre as camadas.

View Locator

O View Locator é utilizado para localizar e retornar a instância de uma tela, de modo que seja possível, em qualquer lugar da aplicação, manipular uma tela através de seu repesctivo View Helper.

Model Locator

O Model Locator é a memória da aplicação, onde os objetos de dados (um objeto que popule um comboBox, ou um grid, as imagens utilizadas na aplicação, etc) utilizados na aplicação são iniciados e guardados, como um “storage”. O Cairngorm utiliza a API de Data Binding do Flex no Model Locator, de modo que basta a variável ser alterada no Model Locator para que o dado reflita diretamente na tela.

Responder

O Responder é implementado para associar o objeto responsável pelo tratamento do resultado de uma chamada remota. Sua implementação é no Command.

Event Broadcaster

O Event Broacaster é utilizado pela aplicação para notificar o Controller (que está “escutando”) que algo aconteceu.

Diagrama de Exemplo:




Links Sobre o Cairngorm:

http://labs.adobe.com/wiki/index.php/Cairngorm

http://www.iterationtwo.com/open_source_cairngorm.html

Componente ViewStack

Enfim, para quem quer começar uma grande sistema, muito bacana usar o Framework, porém

nem sempre são aplicações grandes! e como fazer para que mais tarde eu não tenha problemas com memória!?!?

Ta aí uma solução que a Adobe implementar entre a versão Flex 1.5 para a Flex 2.0, a modolurização!

isto é, um componente (ModuleLoader) que carrega swf`s externos em tempo de execução, poderoso com certeza, porem os mais críticos dizem que não é a melhor solução!

Logo!! +)

Existe o componente ViewStack!! também poderoso e inteligente componente que faz o consumo de memória ficar baixo!

Quando usar um, preste atenção em seu comportamento!, Ex:

Você tem várias abas dentre um ViewStack, ao abrir pela primeira vez, ele só descarrega na memória logo também na maquina cliente, o que irá exibir somente nesta tela, as outras abas, não são carregados absolutamente nada! o que para uma aplicação Web, se torna muito importante!

Estas outras Abas só irão ser carregadas após selecionadas, depois armazenadas em cache no Navegador do Cliente!

O Jeito de Programar Web 2.0


Bacana não!! Agora uma coisa lhes digo! se você é da época em que se programava com Delphi, Centura, VB, ou umas dessas linguagens Desktop, kra... infelizmente! temos que reaprender a programar, e rever todos os conceitos Web2.0!!

Porque digo isso, antigamente, quando se criava telas de cadastro, Ex:

Você tinha um Main que por sua vez Chamava a tela de Cadastro de Estados, e se não houvesse tal pais para tal estado, deveria Fechar a tela, ou abrir mais uma tela para Cadastrar o Tal país!! o.O

Complicado não? a você que pensa assim, lhes apresento a Web2.0, +)

Onde não existem inúmeras Telas! e sim uma Tela inteligente, capaz de ter todo o conteúdo necessário em apenas algumas telas!

Quer entender melhor do que estou falando!?

Pega esse Link

FlexStore

Show de Bola não!? viu o carrinho de compras?!? o componente de Comparativo!?! o Estilo de Contato!?

Bacana neh.... é isso ae.... A Web 2.0 (Já chamo de 3.0! =) vindo para Inovar e Facilitar a nossa vida!!

Resumindo! +)

  • Para Aplicações Maiores, utilizar um Framework MVC, no caso o Cairngorm
  • Para Aplicações Menores, interessante usar o componente ViewStack
  • Antes de começar a fazer a Telas, pense Web2.0! pense Flex! +)
Blza Galerinha !?!

ah Muito Obrigado a todos aqueles que tem acompanhado as noticias aqui do Blog!
O Números de visitas tem aumentado bastante! =)

Abraço Pessoal!!
\o/



Referências

Architecting Flex Applications: Cairngorm and RIA Microarchitecture
CFGigolo
DClick

terça-feira, 10 de abril de 2007

Ambiente com Flex2.0, Apollo, PHP, TomCat6.0 - Download!

Olá Pessoal,

Andei recebendo bastante e-mails com dúvidas de como configurar um ambiente para desenvolvimento!!

Vendo isso!! +) resolvi disponibilizar o meu Eclipse, ele vem:

  • 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

Para instalar, é muito fácil, partindo que você já Tenha instalado o JSDK 5.0 ou 6.0 no diretório
padrão, que é:

C:\Arquivos de programas\Java\jdk1.6.0\bin

É só extrair na raiz do diretório C:\

Ficando:

C:\Eclipse\Flex\
C:\Eclipse\Eclipse\
C:\Eclipse\Apollo\
C:\Eclipse\TomCat\

e etc...


Blza?!

Muito Fácil não!?

Abraço Galerinha!!
\o/

segunda-feira, 9 de abril de 2007

Delphi 2007.... Delphi for PHP

Olá Pessoal!

Esta, é para aqueles que gostam de Delphi ou PHP!

Foi Lançado recem, o Delphi 2007, para desenvolvimento Win32, e Delphi for PHP
O Delphi para PHP, ainda não tenho muitos detalhes, mais assista esse vídeo, e você saberá do que eu estou falando!

http://video.codegear.com/php/DBGridDelphiforPHP-ENGLISH/DBGridDelphiforPHP-ENGLISH.html

A IDE lembra é uma IDE de verdade, com gerenciamento de projeto e criação de aplicações no estilo arrastar e soltar.
Segue o mesmo conceito de componentes usados no Delphi, com uma biblioteca visual com 50 componentes (VCL) e a possibilidade de adicionar novos e estender os existentes.
Tudo que os programadores Delphi estão acostumados, mudando apenas a linguagem.


Umas das principais vantagens é que ele dá suporte para:
  • Windows Vista®
  • AJAX

Bacana Não?

Bom Maiores características você pode ter aki:

Link

Downloads (CodeGear)

Link

Blza!??!

Abraço Galerinha!!

\o/

domingo, 8 de abril de 2007

Adobe Flex e Efeitos

Olá Pessoal!! +)

quando nós estamos programando, todo mundo sabe que as vezes se estressa,

principalmente quando aquela função, chamada, ou o que for, não funciona!

mas, normal isso... e Sabe o que eu gosto fazer quando chega esses momentos!!?

Eu gosto de brincar com a aparência da aplicação, e o flex! já pensando em tudo, deixou pré tags para efeitos!

Efeitos Básicos:
  • Blur
  • Dissolve
  • Fade
  • Glow
  • Iris
  • Move
  • Resize
  • Rotate
  • Zoom
Tratar efeitos com o flex é muito Fácil!! pra começar, ele já vem pronto os efeitos! e claro também
dá a possibilidade de personalizar.

1 -Exemplo de usar o efeito Pronto ao Abrir uma "TitleWindow":


mx:TitleWindow creationCompleteEffect="Zoom"


Esta, é uma tag da TitleWindow, observe o atributo creationCompleteEffect="Zoom" com isso, você aplica um efeito no na TitleWindow, muito simples.


2 -Você também pode personalizar o efeito! ex:

No mxml crie esta tag:

mx:Zoom id="efZoom" startDelay="10" originX="1" duration="3000"

você já vai perceber que o efeito foi aprimorado com as definições que você fez.

para usar este efeito é só colocar a id do efeito, aonde você quer colocar o efeito



creationCompleteEffect="{efZoom}"


Neste exemplos só utilizei os efeitos ao form se criar, em todos os componentes você pode colocar efeitos nestes atributos:

  • addedEffect
  • creationCompleteEffect
  • hideEffect
  • mouseDownEffect
  • mouseUpEffect
  • moveEffect
  • removedEffect
  • resizeEffect
  • resizeEndEffect
  • resizeStartEffect
  • rollOutEffect
  • rollOverEffect
  • showEffect
Bom, eu fiz uma aplicação bem simples demonstrando como aplicar os efeitos nos forms e nos componentes

Aplicação Rodando
Link

Download do Source
Link





quarta-feira, 4 de abril de 2007

"Thiking in Flex"

Olá Pessoal!!,

hoje estava pesquisando algumas coisas da BEA, e derrepente em meio aquelas propagandas enormes, vejo um titulo assim:

"Thiking in Flex"

Eu, poxa vida, quem é que tá fazendo a brincadeira sem graça, de usar o título do livro mais famoso de java
(Bruce Eckel ) colocando o Flex no meio, e nossa! levei um susto não que o "JavaMan" estava desenvolvendo aos monte, aplicações envolvendo Flex e Java?!

Ele e mais o James Ward, desenvolveram uma arquitetura poderosa, usando Flex, Hibernate, and XFire.


Achei muito bacana, claro que deve ter uma porção da Adobe em cima disso, mais bacana saber que no nosso time tem grandes jogadores!! +)

Links:

http://www.tryflex2.com/?sdid=RWVT&sourcecode=RWVT&TRACKVAR=sdid%5C

http://www.adobe.com/devnet/flex/articles/flexjava.html?sdid%5C=RWVT


terça-feira, 3 de abril de 2007

DigOWs - Flex Browser!

Otem a noite, em meia a tanta coisa pra faze! resolvi fazer um Browser em Flex,
uma vez a muito tempo atraz tinha lido alguem que queria fazer isso...

Tempo Gasto: 2:30

A lógica é bem simples,
Em um Application, crio um canvas que será meu Frame.
Este Frame, será preenchido com o resultado de uma chamada a um JavaScript que se encontra no HTML.

Frame(Canvas):

/**
* Valida, e Passa o source (URL) para carregar o Frame.
**/

public function set source(source: String): void{
if(source){
if (! ExternalInterface.available){
throw new Error("ExternalInterface não funciona neste Browser, somente Internet Explorer 5 ou superior, Firefox Mozilla 1.7.5 , Opera , ou Browsers que suportam NPRuntime ");
}
__source = source;
//Chama o JavaScript e carrega o Frame.
ExternalInterface.call("carregaIFrame", source);
moveIFrame();
}
}



O ExternalInterface, é a class responsável por fazer uma chamada a uma lógica em JavaScript no HTML, porisso chama-se "ExternalInterface".


HTML:

function carregaIFrame(url){
}


Download do Source da Aplicação:
(
Link)