Para os mais atentos foi lançada a compilação de todos estes tutoriais à um tempo atrás, basta procurarem no blog, que teve algum sucesso o que me levou a escrever uma segunda parte apenas em pdf que distribui inicialmente consoante uma doação, e que mais tarde também foi distribuída num pequeno “giveaway” e que agora finalmente será distribuída publicamente para o publico. Esta segunda parte do tutorial será dividida em vários post’s durante algumas semanas, e no final será colocado o pdf para download… se necessita urgentemente desta segunda parte (conta com 60 novas paginas) então entre em contacto comigo no twitter ou por email justificando essa necessidade que talvez sejam dos primeiros a receber esta segunda parte gratuitamente, embora haja alguns desses contactos que possam não ter resposta não desesperem… vai ser rápido para estar completamente publicado.

Este tutorial foca o Action Script 3 Orientado para o Flex, mas na sua base a estrutura é exactamente a mesma para o flash, por isso será com certeza útil também para os amantes do flash.

Nota: Não sendo um profissional, as técnicas adoptadas podem não ser as mais correctas, podendo mesmo existir alguns erros, mas bom… se detectarem algo “anormal” me informem.

Bom, vamos então à parte 12.

Não utilizem o sistema de comentários em baixo para tirar duvidas, elas não serão respondidas aqui! Usem antes o fórum do blog disponivel em: http://forum.msdevstudio.com

Continuando… Falaremos agora de (notem que os pontos podem nao estar seguidos, a versão final sofreu pequenas alterações):

5.3. Relacionamento entre classes.

Neste momento a nossa class passa a pertencer ao grupo de classes pessoais que podemos adicionar ao nosso projecto.
Um dos pontos muito úteis é o reaproveitamento do código para as mais variadas coisas, e de entre as quais podemos usar um relacionamento entre varias classes pessoais.

Um exemplo pode ser a definição de certas constantes numa class. Vamos supor que necessitamos de ter definidos tamanhos e um titulo para vários painéis feitos pela class em cima, poderemos efectuar 2 tipos de classes para este efeito, embora para este tipo de definições possamos usar uma class sem “inicializador” (apenas servirá para definir constantes / variáveis)
[coolcode lang="actionscript"]
package teste
{
public class def
{
public const PANEL_W:int = 400;
public const PANEL_H:int = 300;
public const PANEL_TITLE:String = “Painel personalizado”;
}
}
[/coolcode]
Esta class  não necessita de ser inicializada porque apenas apresenta parâmetros fixos da nossa aplicação e não têm um constructor.

Na nossa class em cima vamos colocar em prática o uso desta nossa class, editando a class teste.as e fazendo o seguinte.
No topo a seguir aos imports coloquem:
[coolcode lang="actionscript"]
import teste.def;
[/coolcode]
e na nossa função criado() substituimos a linha:
[coolcode lang="actionscript"]
_nomePessoal=”Teste Painel “+Math.floor(Math.random()*15);
[/coolcode]
por
[coolcode lang="actionscript"]
_nomePessoal=def.PANEL_TITLE+Math.floor(Math.random()*15);
[/coolcode]
Neste momento o titulo de cada painel criado será iniciado pela definição colocada na class def:
[coolcode lang="actionscript"]
public const PANEL_TITLE:String = “Painel personalizado”;
[/coolcode]
vamos também definir o tamanho fixo do nosso painel da class, trocando na função teste() o seguinte:
[coolcode lang="actionscript"]
//definimos o painel
this .width=270;
this .height=270;
[/coolcode]
por
[coolcode lang="actionscript"]
this .width=def.PANEL_W;
this .height=def.PANEL_H;

[/coolcode]

Desta forma, todos os paineis criados pela nossa class teste terão sempre as definições :
[coolcode lang="actionscript"]
public  const PANEL_W:int = 400;
public  const PANEL_H:int = 300;
public  const PANEL_TITLE:String = “Painel personalizado”;
[/coolcode]
Este tipo de definições são muito úteis quando há necessidade de ter sempre constantes na nossa aplicação, por exemplo num caso de uma aplicação que se liga a um banco de dados, podemos guardar o host e informações de login.. neste caso, apenas com um problema. Estas constantes apenas podem ser lidas, visto que são constantes e apenas podem ser alteradas pelo criador da aplicação e compilando de novo a aplicação.

Este trabalho poderia ser feito pela class seguinte:
[coolcode lang="actionscript"]
package  teste
{
public class definicoes
{
public const PANEL_W:int = 400;
public const PANEL_H:int = 300;
public const PANEL_TITLE:String = “Painel personalizado”;

public function definicoes()
{

//constructor

}

}
}
[/coolcode]
Mas neste caso teríamos algum código inválido, ou seja, o definicoes() ira ser inicializado em vão.. não temos necessidade de o ter no código (embora o possamos ter)

O action Script 3 é tão versátil que nos permite inclusive extender uma class já feita para trabalhar com outros exemplos, vejam o exemplo seguinte que estende a nossa class de definições.
[coolcode lang="actionscript"]
package  teste
{
public class fullDef extends def
{
public const PANEL_DATE:String = “20/09/2008″;

public function fullDef()
{

}

}
}
[/coolcode]
Este método cria uma nova class fullDef que estende a nossa class def, por palavras mais simples esta class usa as definições da class def em si própria, ou seja, herda (hereditária) as variáveis da class que está a ser estendida:
[coolcode lang="actionscript"]
public  const PANEL_W:int = 400;
public  const PANEL_H:int = 300;
public  const PANEL_TITLE:String = “Painel personalizado”;

[/coolcode]

e trata-as como se fossem suas, ou seja estas mesmas variáveis estarão disponíveis na class fullDef, basta testarem da seguinte forma:
[coolcode lang="actionscript"]
var  fid:fullDef = new fullDef;
[/coolcode]

e a partir deste momento as constantes da nossa class def de definições estarão também disponíveis nesta nossa class, juntamente com a constante PANEL_DATE que adicionei em cima, pela seguinte forma:
[coolcode lang="actionscript"]
fid.PANEL_DATE;
fid.PANEL_H;
fid.PANEL_TITLE;
fid.PANEL_DATE;
[/coolcode]
De notar que uma constante não pode ser alterada depois do nosso código ter sido compilado num ficheiro .swf.

Para esse efeito usamos apenas private var, e se o formos fazer usando a  nossa class de definições e a class fullDef deveremos usar o método [Bindable] já explicado anteriormente e que vai permitir que todas as classes que utilizem a nossa class def sejam actualizados com novos valores.

Esta extensão funciona com variáveis, constantes, e funções quer das nossas classes pessoais ou das classes do Flex / Flash.

Bom, por agora é tudo… até uma próxima…

Sugestões? criticas? e porque não elogios? deixe um comentário…

Duvidas? Use o fórum.

Tutoriais Flash, Flex and AIR

 Bom, venho falar do The Tech Labs disponivel em http://www.thetechlabs.com que se dedica exclusivamente à publicação de tutoriais Flash, Flex e Air, embora seja em inglês, o seu conteudo é muito facil de entender, até porque disponibiliza em todos os seus exemplos o código fonte para download. 

De entre os artigos encontra de tudo, desde uma série de exemplos de como trabalhar com a framework alternativa3d, ou away3d até aplicações completas quer para Flash, Flex, Air ou até mesmo flash lite.

Recentemente também conta com a minha participação (se o facto de estar em inglês não agrada, talvez assim já mereça uma visita… huahuah) onde já coloquei 3 tutoriais, 2 dedicados ao Flex e um ao Flash (sim, também trabalho com flash) que têm como titulos:

Integrate Flex Builder 3.0 & Php easly with the fresh ZendAMF

Build a contact manager in Flex with ZendAMF; Part One – Layout; From Photoshop to Flex

Create real water effects with Flash CS4 & ActionScript 3.0

Dêm uma vista de olhos, e aproveitem para navegar pelo resto do site, de certeza que vão encontrar alguma coisa bem util! Abraço!

Para quem ainda nao sabe, o tour de flex é um aplicativo air que apresenta cerca de 218 exemplos em flex e air, que demonstra em muitas da enormes capacidades do  Adobe Flex. Depois do excelente lançamento já à alguns tempos do showcase do flex é lançado agora o Tour de flex que sem duvida aliados podem ser capazes de incentivar ao uso da plataforma flash para aplicações realmente ricas para a internet e desktop. Podem fazer o download aqui. (Para quem ja instalou o aplicativo, basta abri-lo visto que ele contém um sistema de actualização automatica.)

A minha participação está disponivel no menu em “Other Components”  orgulhosamente entre nomes como Alex Uhlmann,  Doug McCune ou Mark Shpeherd. O Titulo do aplicativos está no menu  ”Mário Santos – Graphic Data Presentation” como podem ver pelos screenshots que se seguem:

Espero que seja o primeiro de muitos, embora actualmente nao tenha muito tempo para a preparação de alguns exemplos.

Abraço.

Mais uma boa noticia da Adobe e O’Reilly que juntos colocaram online esta beta.

Vale a pena ver, tanto o cookbook do AIR como o do Flex.

AIR Cookbook

Flex Cookbook

Abraço.

Cliente: http://coenraets.org/apps/livehelp/customer.html (coloquem o vosso endereço de email)

Operador: http://coenraets.org/apps/livehelp/callcenter.html (coloquem o vosso endereço de email)

NOTA: Os endereços de email devem ser iguais para identificar a mesma sandbox.

Download parte Cliente aqui

Download parte Operador aqui

Download BlazeDS aqui

Download LCDS aqui

Mais informações sobre a devida configuração aqui.

Uma excelente aplicação para enriquecer o conhecimento das possibilidades do flex.

Abraço.

Depois de muito investigar, e pricipalmente ao saber de alguns exemplos de como carregar um iframe do html em cima de uma aplicação pdf, decidi por mãos à obra e investigar um pouco mais sombre esta maneira “sombria” de abrir pdf’s… claro que continua a ser necessário ter instalado o Acrobat reader, mas é uma opção para quem não pretende ter muito trabalho…

Ainda estou a trabalhar num exemplo, mas coloquei-o já online para que possam dar o vosso feedback…

Podem ver o exemplo aqui com um documento de exemplo.

Abraços.

edit: Código fonte disponivel em:

http://msdevstudio.com/blog/2008/06/27/flex-js-pdf-reader-in-flex-source/

Bom, dei de caras com as propriedades deepLink, que podem ser obtidas atravéz do browserManager/URLUtil, por isso fiz um pequeno exemplo que podem usar nas vossas aplicações, copiando o contudo do arquivo que disponibilizo em baixo para a raiz da vossa aplicação, depois basta fazerem o import na vossa aplicação:

São então disponibilizadas as seguintes funções:

getPort():String

getProtocol():String

getServer():String

getDoc():String

getTodo():String

getPath():String

onde para receberem os respectivos elementos devem usar:

   1: var util:urlUtils = new urlUtils();

   2: //tomando como exemplo o link: http://msdevstudio.com/immo/backend/backend.html

   3:

   4: //buscar nome do servidor:

   5: var nomeServidor:String = util.getServer();

   6: //devolve: msdevstudio.com

   7:

   8: //buscar protocolo

   9: var protocolo:String = util.getProtocol();

  10: //devolve http

  11:

  12: //buscar porta

  13: var porta:String = util.getPort();

  14:

  15: //buscar url completo

  16: var urlCompleto:String = util.getTodo();

  17: //devolve http://msdevstudio.com/immo/backend/backend.html

  18:

  19: //buscar caminho relativo 

  20: var caminho:String = util.getPath();

  21: //devolve http://msdevstudio.com/immo/backend/

  22:

  23: //buscar o nome do portador do swf

  24: var documento:String = util.getDoc();

  25: // devolve backend.html

Isto não é nada mais que um simples package que simplifica as coisas em aplicações medias/grandes e que em muitas variadas situações se torna muito util.

Podem fazer o download aqui.

fiz um package pelo simples motivo de ajudar a quem ler a perceber como um package funciona, bem como se podem tornar simples a utilização destes packages principalmente pela sua reutilização por outros programadores e outras aplicações. Podem ver o código comentado também.

Aguarda-se feedback.

Este artigo está disponivel em pdf para download.

Esta parte engloba vários assuntos entre os quais destaco:

• Direfenças, vantagens e desvantagens de módulos e componentes
• Criação de componentes
• Criação de módulos
• Troca de informações entre componentes, módulos e a aplicação
• Criação de exemplos e funções para lidar com eventos
• Pequena explicação de objectos remotos
• Instalação do amfPHP e configuração
• Configuração do Flex para trabalhar com o amfPHP
• Primeiro serviço do amfPHP e sua utilização pelo Flex

Entrando já em pormenores mais avançados do Flex, esta parte é ideal não só para iniciantes, mas também para utilizadores intermédios que ainda têm algumas duvidas de como trabalhar com módulos, componentes e objectos Remotos.

Aqui ficam os links desejados:

Parte IV: Adobe_flex_a_partir_do_zero_4.pdf

Parte III : Adobe_Flex_a_partir_do_zero_3.pdf

Parte II : Adobe_Flex_a_partir_do_zero_2.pdf

Parte I : Adobe_Flex_a_partir_do_zero_1.pdf

Compilação partes I, II, III, IV : Flex_Book_Part_1_2_3_4.pdf (actualizado, ler topico)

services-config.xml usado na parte IV: services-config.rar

Aguarda-se feedback.

EDIT : Descobri um pequeno erro no tutorial que será corrigido na proxima edição mas entretanto deixo esse indicação para que não tenham problemas

Na página 5, ponto 6.3, no topo onde diz:

“(suponhamos que no campo user do nosso bConfig queremos colocar um user predefinido), basta na função abrePainelLogin” colocarmos o seguinte:
painel.inputUser.text=”teste”;

a seguir ao PopUpManager.createPopUp(); “

Deve ler-se:

“(suponhamos que no campo user do nosso bConfig queremos colocar um user predefinido), basta na função abrePainelLogin” colocarmos o seguinte:
painel.inputUser.text=”teste”;

a seguir ao PopUpManager.centerPopUp(); “

Estão todos convidados a indicar erros para que o tutorial seja cada vez mais livre de erros!

p.s. Talvez seja necessário a ajuda de uma outra pessoa para fazer a revisão do tutorial no final da sua série, para fazer a compilação completa em apenas um ficheiro, e então gostava de saber se algém estaria interessado!

Edit: Parte 5 disponivel em: Adobe flex a partir do zero parte 5 (post)

Um abraço.

Uma possibilidade é usar o google analytics, mas acabáramos por andar um pouco perdidos com a API, interpretação da mesma e além disse em sites com um número elevado de visitas o google analytics será pago… o que decidi fazer, pode ser feito com qualquer outro sistema de estatísticas openSource. No meu sistema de imobiliária ( http://msdevstudio.com/blog/2008/02/27/backend-sistema-imobilirio-gesto-de-imveis/) inicialmente estou a utilizar esse sistema, embora terei que o alterar se a versão for para comercializar devido à licença GPL debaixo da qual foi disponibilizado o sistema que voou falar.

O sistema em si é o Stats Indexer 1.3 disponivel a correr em: http://members.lycos.nl/promajo/statsindexer.php

Tudo o que tem que fazer é o seu download em: http://members.lycos.nl/promajo/dl/StatsIndexerJDL.rar e instalar o sistema normalmente na mesma directoria onde estará a pagina a ser monitorizada (primeiro configurar e criar as tabelas), depois apenas inserir numa pagina comum (Geralmente na que corre o swf, index.html ?, para obterem o máximo partido do script, o vosso ficheiro (.swf) deve ser inserido numa pagina .php e o servidor deve ter suporte a php ) o primeiro código disponível no index-readme.txt.

Depois basta acederem ao vosso index.php 3 ou 4 vezes para “encher” dados na base de dados e ver as estatísticas correndo o ficheiro statsindexer.php

O sistema em si está a funcionar, mas como queria esses dados no Flex, teria obrigatoriamente que o passar por xml ou usando o amfphp. Foi esta segunda opção que usei. Deu algum trabalho mas lá acabei por criar um serviço para o amfphp o qual disponibilizo para download, este serviço está pronto a usar, bastando coloca-lo na pasta services do amfphp e usa-lo para obter os dados armazenados pelo stats Indexer. (Devem alterar no final do stats.php as informações de login da base de dados bem como o nome da mesma).

Basta darem uma vista de olhos nas funções deste meu serviço ou usarem o browser dos services do amfphp e testarem o servico stats para ver como os dados são devolvidos, depois basta criarem o serviço no flex para lidar com esses mesmo dados.

Lá para o final de semana se tiver um pouco de tempo faço um exemplo de como recuperar esses dados e os colocar num gráfico em flex.

Download Stats Indexer: http://members.lycos.nl/promajo/dl/StatsIndexerJDL.rar

Download Service: stats.rar

Download amfPHP: http://sourceforge.net/project/showfiles.php?group_id=72483#files

Espero que ajude “muita” gente

Qualquer duvida, critica ou sugestão basta comentarem.

Abraços.