Iniciando com Flex e PHP usando WebORB

WebORB, Flash, Flex / Flex Builder, Flex Builder 4 Comments »

WebORB para PHP fornece uma implementação para Flex Remoting e Flex Messaging. Usando WebORB, desenvolvedores PHP podem integrar aplicações clientes Flex com objetos implantados em aplicações PHP. Além disso, WebORB para PHP pode funcionar como um gateway suportando assim aplicações flash cliente.

Iniciando – Instalação WebORB

A instalação do WebORB para PHP tem a seguinte estrutura de diretórios:

Iniciando – Instalação WebORB

Se estiver distribuindo de um computador Windows com IIS conceda permissão ler/escrever para a conta IUSR_< machinename> para a pasta Weborb.
Você pode verificar se a instalação do WebORB está correta no Management Console incluída com a distribuição WebORB. Abra http://localhost/caminho de instalação do weborb no navegador.Quando a console é carregado, você pode inspecionar o serviços remoto PHP através da aba Management ou executar os exemplos incluído com o produto.

Flex Builder Setup

Para criar um projeto Flex Builder para trabalhar com WebORB e PHP, siga as instruções do presente artigo ou observe o screencast (tem um em português feito pelo Ved - http://www.vedovelli.com.br).

Flex Application Code

A distribuição do WebORB para PHP contém alguns projetos Flex acabados demonstrando a conectividade e um remoting invocation. Copie e cole o conteúdo do exemplo.mxml localizado em \Exemplos\SampleApp\no mxml criado no Flex Builder. O código da aplicação faz uma conexão com um objeto PHP e retorna algumas informações básicas sobre o computador onde o objeto estiver em funcionamento.

A fim de comunicar com um objeto PHP remoto, O Flex utiliza a API RemoteObject para criar um remoting proxy:

remoteObject = new RemoteObject();
remoteObject.destination = “InfoServiceDestination”;
remoteObject.getComputerInfo.addEventListener(”result”,onResult);
remoteObject.addEventListener(”fault”, onFault);

Note que o nome de destino verifica o destino colocado no remoting-config.xml. Quando um usuário clica no botão ‘Get Computer Info’, a seguinte função executa um método remoto:

private function getInfo():void
{
  invokeButton.enabled = false;
  currentUserText.text = “”;
  processIdText.text = “”;
  osText.text = “”;
  phpVersionText.text = “”;
  remoteObject.getComputerInfo();
}

Quando uma resposta invocada está disponível, o Flex invoca uma resposta handler especificada na tag <RemoteObject>. A resposta handler no exemplo, preenche os campos de texto com os dados disponíveis no objeto retornado:

private function onResult(event:ResultEvent):void
{
  var computerInfo:Object = event.result;
  currentUserText.text = computerInfo.currentUser;
  processIdText.text = computerInfo.phpProcessId;
  osText.text = computerInfo.operatingSystem;
  phpVersionText.text = computerInfo.phpVersion;
  invokeButton.enabled = true;
}

Código PHP

O código fonte para a classe PHP server-side está abaixo:

class InfoService
{
  public function getComputerInfo()
  {
    $compInfo = new ComputerInfo();
    $compInfo->currentUser = get_current_user();
    $compInfo->phpProcessId = getmypid();
    $compInfo->operatingSystem = php_uname( ‘a’ );
    $compInfo->phpVersion = phpversion();
    return $compInfo;
  }
}
class ComputerInfo
{
  public $currentUser;
  public $phpProcessId;
  public $operatingSystem;
  public $phpVersion;
}

Distribuindo

IMPORTANTE Garanta a localização do diretório onde o Flex Builder copia a aplicação cliente compilada. É muito importante importar uma cópia do weborb.php no mesmo diretório.
weborb.php deve conter os seguintes códigos PHP:

<?php 
   require_once(”../Weborb/ORBHttpHandler.php”);
   $m_ORBHttpHandler = new ORBHttpHandler();
   $m_ORBHttpHandler->processRequest();
?>

MUITO IMPORTANTE: A primeira linha deve ser editada para apontar ao diretório Weborb da distribuição do produto. Por exemplo, vejam weborb.php localizado na pasta /Console.

Executando Aplicação Flex

Neste momento a aplicação Flex está pronta para funcionar. Você pode usar o Flex Builder para executar a aplicação.

Nota: Tradução feita a partir do original inglês em: http://www.themidnightcoders.com

Guia de ActionScript 3.0 em português… ufaa! Já era sem tempo.

Flash, Flex / Flex Builder, Flex Builder 3 Comments »

Olá pessoal, finalmente resolveram ter dó dos brasileiros e disponibilizaram o Guia de ActionScript 3.0 em Português, espero que atrás desse venham muitos outros, principalmente de Flex.

Segue o link para baixar o PDF

http://help.adobe.com/pt_BR/ActionScript/3.0_ProgrammingAS3/flash_as3_programming.pdf

Quem quiser ver direto no browser, aqui vai:

http://help.adobe.com/pt_BR/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-8000.html

Até mais, bom estudo!

Google Maps API para Flash e Flex - Parte I

Flex / Flex Builder 1 Comment »

Este material é uma tradução do original http://code.google.com/intl/pt-BR/apis/maps/documentation/flash/intro.html#Versioning e todos os crédito são da Google, eu apenas traduzi o mesmo para o Português, ainda terão mais 5 partes que serão os exemplos de uso, já estou traduzindo e logo estará online. Se vocês querem Screencast sobre o assunto, pede pro Vedovelli que ele com certeza fará, se já não o fez.O Google Maps API para Flash fornece um novo caminho para adicionar Google Maps interativo para seu site da web, usando plugin Flash® da Adobe para exibir conteúdo de mapas dinâmicos! Esta API existe como uma alternativa completamente independente do existente JavaScript Maps API, e fornece muitas das características daquela API enquanto também adicionando a habilidade de se misturar conteúdo de Flash com Google Maps.
O Google Maps API para Flash é novo, então nós gostaríamos de ouvir seu feedback. Nós o encorajamos a dar a nós um feedback.

Público

Esta documentação é projetada para as pessoas que tem familiaridade com Flash, Programação de ActionScript, conceitos de programação orientado a objeto.
Esta documentação é organizada para cobrir as seguintes áreas chave:

  • Google Maps Flash Basics (and “Hello World” Tutorial)
  • Google Maps Flash Events
  • Google Maps Flash Controls
  • Google Maps Flash Overlays
  • Google Maps Flash Services

Todos os novos desenvolvedores deviam ler ambos os documento, que explicam como instalar seu Google Map no ambiente de desenvolvimento Flash/Flex e mantê-lo, e , que explica como escrever sua primeira aplicação Google Maps Flash.

Introdução

Fornecendo uma versão de Flash, o Google Maps API permite aos desenvolvedores de Flash atuais integrar facilmente o Google Maps em seu ambientes de desenvolvimento Flash/Flex existente. Também, o Google Maps API para Flash abre um mundo inteiro de possibilidades interativas para exibir e usar conteúdo de mapa para aqueles desenvolvedores que não usam atualmente Flash.
Este guia de desenvolvedor assume que você está familiarizado com desenvolvimento de Flash e programação de ActionScript. Também não assume uso de qualquer ambiente de desenvolvimento particular, entretanto ele usa o Adobe Flex SDK livremente disponível dentro deste tutorial.
Note: Este guia usa exemplos da linha de comando COMO UNIX, entretanto seu uso não deve prejudicar a um ou outro desenvolvedores de Windows ou Macintosh.

Instalando Seu Ambiente de Desenvolvimento

O desenvolvimento de flash pode tomar muitas formas. Alguns desenvolvedores criam puramente dentro da aplicação de Flash para criar e organizar conteúdo, e adiciona ActionScript dentro daquele framework. Outros desenvolvedores usam uma IDE full-featured como Adobe® Flex® Builder para criar aplicações robustas com uso pesado de ActionScript. A escolha de ambiente de desenvolvimento é sua. Para este tutorial, porém, nós nos concentraremos em documentar o mais simples e a maioria da solução geral: O uso livre do Adobe Flex SDK 3 pela linha de comando.
Esta seção discute como obter e instalar o Adobe Flex SDK, como obter o Google Maps API para biblioteca do Flash, e como instalar seu ambiente de desenvolvimento para você conseguir programar em ActionScript e construir seu primeiro Google Maps API para Flash Maps.

Obtendo e Instalando o Adobe Flex SDK

Estarei omitindo aqui essa parte já que a maioria já deve ter instalado na sua máquina o Flex, mas quem não tiver pode ir nesse endereço.
http://www.adobe.com/products/flex/overview/#section-3

Obtendo a Biblioteca de Interface

O conteúdo para desenvovimento em flash que integra Google Maps exige a inclusão do Google Maps API para biblioteca de interface de Flash dentro de seu código de aplicação. Esta biblioteca consiste em um arquivo *.swc que é contido dentro da API de Maps para Flash/Flex SDK disponível na seguinte URL:

http://maps.googleapis.com/maps/flash/release/sdk.zip

Este arquivo SWC contém interfaces para todas as classes públicas no Google Maps API para o ambiente de desenvolvimento Flex/Flash. Compilando sua aplicação com esta biblioteca assegura que pode utilizar e comunicar com toda funcionalidade pública do runtime Google Maps API para biblioteca do Flash, que é recuperado de servidores do Google sempre que um cliente carrega sua aplicação.
Note que o tamanho do código que está correndo atualmente sua aplicação Flash Maps permanece separado do runtime que Google Maps API da biblioteca do Flash. Isto permite que façamos encarecimentos, bugs e modificações para a funcionalidade da core library sem exigir que você recompile sua aplicação. Note que se você já desejar utilizar nova funcionalidade que exige novas interfaces, você precisará carregar um SWC atualizado e recompilar sua aplicação.
A biblioteca de interface filename contém um sufixo identificando seu número de versão. (Por exemplo, map_flex_1_1 identifica versão “1.1″ da biblioteca de interface. Uma vez que você carregou a biblioteca de interface, crie um diretório de desenvolvimento e coloca o arquivo na raiz daquele diretório.

CÓDIGO UNIX:

# #Create a development directory
#

hostname$ mkdir myflashapp
hostname$ cd myflashapp

# # Copy the Google Maps API for Flash SDK to the root of your working development directory
#

hostname$ cp ~/sdk.zip

# # Unzip the SDK. The SWC interface library is located within the “lib” directory # Offline ASDoc HTML documentation is available within the “docs” directory
#

hostname$ unzip sdk.zip

Obtendo uma Maps API Kye

O Google Maps API para Flash, como o Google JavaScript Maps API, exige uso de um freely available developer key que você precisará especificar esta clave dentro de um dos três locais possíveis:
· Seu código ActionScript (compilando isto no SWF resultante)
· Um arquivo de configuração especial chamando uma declaração MXML
· O container DOM element em suas página da Web.
Este conjunto de documento discute as duas técnicas posteriores.

Instalando seus Diretórios de Desenvolvimento

O Google recomenda que você desenvolva sua aplicação usando um unico namespace que você possui, para prevenir colisões com outras aplicações, especialmente se você terá muitos desenvolvedores que trabalham em aplicações de flash múltiplo ao mesmo tempo. Usando namespaces também permite que você empacote seu código de aplicação em packages, que permita mais facilidade no compartilhando de código comum.
Os pacotes e namespaces devem ser definidos usando seu domínio de organização, e sub-domínio. Por exemplo, o Google Maps namespace é definido como com.google.maps e um pacote de exemplos dentro daquele namespace seriam definidos como com.google.maps.examples. Você pode então usar este namespace implicitamente para definir a estrutura de diretório de sua aplicação (por exemplo com/google/maps/examples/).
Você usará este namespace para definir um pacote dentro de seu código ActionScript, e definir sua aplicação dentro da declaração de MXML. Geralmente, ActionScript (*.as) reside dentro do diretório mais baixo de qualquer namespace que é definido, enquanto as declarações de MXML (*.mxml) residam na “raiz” da estrutura de diretório.

Manifesto Flex Brasil

Flex / Flex Builder 1 Comment »

Saiba o que é o Manifesto Flex Brasil

Minha principal contribuição para a comunidade:

Traduções da Documentação do Flex.

Por que ela é relevante: Porque assim como eu que não tenho um inglês fluente, muitos desenvolvedores que estão aderindo ao Flex, tanto programadores amadores, como seniors, passam pela mesma dificuldade, esbarrando na enorme quantidade de informações e tutoriais sobre Flex, mas grande parte em Inglês, e como para traduzir acaba honerando no precioso tempo que não temos pra traduzir.

A quem se destina: Aos desenvolvedores tanto com experiência como os que estão entrando agora nesse mundo. E que não dispõe nem de tempo, pra traduzir e nem de um bom Inglês.

Iniciando com Cairngorm.

Por que ele é relevante: Não preciso dizer aqui a importância de um bom desenvolvimento e o Cairngorm, que é da própria Adobe, vem ao encontro desse bom desenvolvimento, ele é um framework para o Flex, possobilitando um desenvolvimento em cima do MVC (Model. View, Controllers) facilitando não só o desenvolvimento individual de um sistema como o desenvovimento em equipe.

A quem se destina: Aos desenvolvedores interessados em fazer projetos mais robustos e bem estruturados.

Eu passo a bola para: Fabio Vedovelli

 

Usando parâmetro Query String

Flex / Flex Builder, Flex Builder No Comments »

Quando usar Flex Data Service, você pode adicionar parâmetros query string para amarar o pedido do cliente, e usar os valores daqueles parâmetros em qualquer aplicação Flex. Na realidade, o Flex e suporta variáveis de pedido GET passado como nome-valor no URL.

Quando criado a envoltura, O Flex Data Service converte os parâmetros para um flashVars. Como resultado, você pode acessar parâmetros query string em sua aplicação Flex se você estiver usando Flex Data Service ou se você implementar lado-servidor que lida gerando uma envoltura. Por exemplo, supõe que você está usando a camada-web, e você solicita a string seguinte na bara de endereço do Browser:

http://localhost:8101/flex/charts/PieChart1.mxml?fname=Nick&lname=Danger

o Flex adiciona aqueles valores como variáveis flashVars para o script.

NOTA

Você não pode passar parâmetros query string para aplicação Flex que roda dentro do Flash Player independente.

também pode anexar parâmetros query string para o <objeto> e <embutir> na propriedades src das tags no script. A propriedade src identifica o local do arquivo SWF da Aplicação Flex. Você acessa estes do mesmo modo que você acessa parâmetros da query string na barra de endereço do Browser.

O exemplo seguinte junta parâmetros Query String a propriedade src no script personalizado:

<object ... > 

<param name='src' value='TitleTest.mxml.swf?myName=Danger'>
     ...
<embed src='TitleTest.mxml.swf?myName=Danger' ... /> 

</object>

Como com propriedades flashVars, você pode acessa o valor do parâmetros em suas Aplicações Flex no objeto de parâmetros:

Var myName:String = Application.application.parameters.myName;

Se seu usuário solicita o arquivo SWF diretamente, sem um script, você pode acessar as variáveis na query string sem fornecer código adicional. O URL seguinte passa pelo nome Nick e a cidade natal São Francisco para a aplicação Flex:

http://localhost:8100/flex/myApp.swf?myName=Nick&myHometown=San Francisco

 

Traduzido da documentação oficial do ©Adobe ©Flex

Alert control

Flex / Flex Builder, Flex Builder No Comments »

Todos componentes Flex podem chamar o método estatico show() da classe para abrir a caixa de diálogo modal pop up com uma mensagem e um título opcional, botões, e ícones. O exemplo seguinte mostra um controle Alert personalizado:

O controle Alert fecha quando você selecionar um botão no controle, ou pressionar a tecla de Escape.
O método Alert.show() tem a seguinte sintaxe:

public static show(

text:String,
title:String = null,
flags:uint = mx.controls.Alert.OK,
parent:Sprite = null,
clickListener:Function = null,
iconClass:Class = null,
defaultButton:uint = mx.controls.Alert.OK) : Alert

Este método retorna um objeto Alert control object.
A tabela seguinte descreve os argumentos do método show():

text (Requerido) Especifica o texto da mensagem da caixa de diálogo
title Especifica o título de caixa de diálogo. Se omitido, exibe uma barra de título em branco.
flags Especifica o botão(ões) para exibir no caixa de diálogo. As opções são como segue: Mx.controls.Alert.OK botão OK Mx.controls.Alert.YES botão SIM Mx.controls.Alert.NO botão NÂO Mx.controls.Alert.CANCEL botão CANCELA Cada opção é um valor bit e pode ser combinada com outras opções usando o operador “|”. Os botões aparecerão na ordem listadas aqui não importando a ordem que você especifica-os em seu código. O valor padrão é mx.controls.Alert.OK.
parent O objeto pai do controle Alert
clickListener Especifica o listener(ouvinte) para o evento clique dos botões. O objeto event passado para este manipulador é uma instância da classe CloseEvent. O objeto event contém o campo detail, que é fixado para a bandeira do botão que foi clicado (mx.controls.Alert.OK, mx.controls.Alert.CANCEL, mx.controls.Alert.YES, ou mx.controls.Alert.NO).
iconClass Especifica um ícone para exibir à esquerda do texto da mensagem na caixa de diálogo
defaultButton Especifica o botão padrão usando um dos valores válidos para o argumento flags. Iste é o botão que é selecionado quando o usuário apertar o Enter. O valor padrão é Alert.OK.
Apertando as teclas de fuga, o botão Cancel ou No da mesma maneira que se você o clicasse.

Para usar o controle Alert, você primeiro importa a classe Alert em sua aplicação. Então chame o método show(), como o exemplo seguinte mostra:

<?xml version="1.0"?>
<!-- controlsalertAlertSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> 

<mx:Script>
          <![CDATA[
              import mx.controls.Alert;
          ]]>
</mx:Script> 

<mx:TextInput id="myInput" width="150" text=""/>
      <mx:Button id="myButton" label="Copy Text" click="myText.text = myInput.text;
      Alert.show('Text Copied!', 'Alert Box', mx.controls.Alert.OK);"/> 

      <mx:TextInput id="myText"/> 

</mx:Application>

Neste exemplo, selecionando o Botão o texto do TextInput é copiado para a TextArea, e exibe o Alerta.
Você também pode definir um evento listener(ouvinte) para o controle Button, como o exemplo seguinte mostra:

<?xml version=”1.0″?>
<!– controls\alert\AlertSimpleEvent.mxml –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>

<mx:Script>

<![CDATA[

import mx.controls.Alert;

private function alertListener():void {
myText.text = myInput.text;
Alert.show(”Text Copied!”, “Alert Box”, Alert.OK);
}
]]>
</mx:Script>

<mx:TextInput id=”myInput”
width=”150″
text=”"/>
<mx:Button id=”myButton”
label=”Copy Text”
click=”alertListener();”/>
<mx:TextInput id=”myText”/>
</mx:Application>

NOTA
Depois da caixa de diálogo do método show()ser criada, O Flex continua com o processo de sua aplicação; não espera pelo usuário fechar o caixa de diálogo.

Dimensionando o controle Alert

O controle automaticamente muda as propriedades de tamanhos para ajustar seu texto, botões, e ícone. Você pode explicitamente mudar o tamanho de um Alert usando o objeto Alert retornado do método show(), como o exemplo seguinte mostra:

<?xml version=”1.0″?>
<!– controls\alert\AlertSize.mxml –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>

<mx:Script>
<![CDATA[
import mx.controls.Alert;

// Define variable to hold the Alert object.
public var myAlert:Alert;

private function openAlert():void {
myAlert = Alert.show(”Copy Text?”, “Alert”,
Alert.OK | Alert.CANCEL);
// Set the height and width of the Alert control.
myAlert.height=150;
myAlert.width=150;
}
]]>
</mx:Script>

<mx:TextInput id=”myInput”
width=”150″
text=”"/>
<mx:Button id=”myButton”
label=”Copy Text”
click=”openAlert();”/>
<mx:TextInput id=”myText”/>
</mx:Application>

Neste exemplo, você fixa a propriedades altura e a largura do objeto Alert para tamanho do controle.

Usando event listeners com o Alert

O próximo exemplo adiciona um event listener ao controle da caixa de diálogo. Um event listener permite a você apresentar processo quando o usuário selecionar um botão do controle de Alerta. O event object passou para o event listenet é de tipo.
No próximo exemplo, você só copia o texto quando o usuário selecionar o botão OK no controle de Alerta:

<?xml version=”1.0″?>
<!– controls\alert\AlertEvent.mxml –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>

<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.CloseEvent;

private function alertListener(eventObj:CloseEvent):void {
// Check to see if the OK button was pressed.
if (eventObj.detail==Alert.OK) {
myText.text = myInput.text;
}
}
]]>
</mx:Script>

<mx:TextInput id=”myInput”
width=”150″
text=”" />
<mx:Button id=”myButton”
label=”Copy Text”
click=’Alert.show(”Copy Text?”, “Alert”,
Alert.OK | Alert.CANCEL, this,
alertListener, null, Alert.OK);’/>
<mx:TextInput id=”myText”/>
</mx:Application>

Neste exemplo, você define um event listener para o controle Alert. Dentro do corpo do event listener, você determina que botão foi apertado examinando a propriedade detail do objeto event. O objeto event é uma instância da classe CloseEvent. Se o usuário apertou o botão OK, copie o texto. Se o usuário apertou qualquer outro botão, ou apertou a tecla Esc, não copie o texto.

Especificando um icone para o Alert

Você pode incluir um ícone no controle que aparece à esquerda do Alerta. Este exemplo modifica o exemplo da seção prévia para adicionar a tag embed metadata para importar o ícone.

<?xml version=”1.0″?>
<!– controls\alert\AlertIcon.mxml –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>

<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.CloseEvent;
[Embed(source=”assets/alertIcon.jpg”)]
[Bindable]
public var iconSymbol:Class;

private function alertListener(eventObj:CloseEvent):void {
// Check to see if the OK button was pressed.
if (eventObj.detail==Alert.OK) {
myText.text = myInput.text;
}
}
]]>
</mx:Script>

<mx:TextInput id=”myInput”
width=”150″
text=”"/>
<mx:Button id=”myButton”
label=”Copy Text”
click=’Alert.show(”Copy Text?”, “Alert”,
Alert.OK | Alert.CANCEL, this,
alertListener, iconSymbol, Alert.OK );’/>
<mx:TextInput id=”myText”/>
</mx:Application>

Traduzido da documentação oficial do ©Adobe ©Flex

RIA, É o melhor remédio!

Flex / Flex Builder, Flex Builder, Ruby on Rails No Comments »

Desde que a Internet apareceu em minha vida, ainda com o nome de BBS, venho estudando e me aprimorando desde então, já estudei muitos assuntos dentro da minha área, mas nunca ri tanto, quando conheci o Flex 2, já tinha instalado uma vez, mas a primeira vez que instalei, não consegui nem executá-lo (era o SDK).

Desisti! Depois de algum tempo, estudando na FGG (Faculdade Gratuita Google) o professor Search me apresentou o Flex 2 Builder, baixei alguns tutoriais, e comecei a bricar com ele, simplesmente apaixonante.

Minha satisfação então se completou quando conheci o curso de Flex on Rails que o Carlos Eduardo iria ministrar através do Treina TOM. Foi através dele que conheci mais ainda o poder do Flex.

Essa semana recebi um e-mail, curso de Flex pela e-Genial, só felicidade, com certeza serei uns dos primeiros a me inscrever. Quero ter um domínio completo sobre o Flex, e não perderia por nada um curso de Flex ministrado nada mais, nada menos por Fábio Terracini, um dos pioneiros com desenvolvimento em Flex no Brasil.

É claro, não poderia deixar de agradecer o meu amigo Carlos Eduardo por ser um dos principais, senão o mais, a contribuir para o crescimento da RIA aqui no Brasil.

RIA, faz bem pros olhos!

Patch Flex 2.0.1 para compatibilidade com o Flash CS3 Profissional

Flex / Flex Builder No Comments »

Este patch permite que o Flex SDK e Flex Builder use Swfs e Swcs criados pelo Flash Profissional CS3. Depois de se aplicar o patch você deve ser capaz de levar classes e símbolos compilados com Flash CS3 e compila-los em um aplicativo de Flex. Você também deve poder pegar classes e bibliotecas compiladas com Flex e usa-las num projeto do flash CS3

Flex SDK Instruções de instalação
O patch Flex 2.0.1 para compatibilidade com o Flash CS3 Profissional é oferecido como um arquivo zipado contendo os seguintes arquivos:

· swfkit.jar
· mxmlc.jar
· fdb.jar

Os arquivos .jar devem ser instalados manualmente:

Para atualizar o SDK no Windows, Macintosh e Unix:

1. Vá para o diretório \lib do Flex SDK, como:
2. C:\Flex_SDK_2\lib\
3. Faça backup dos arquivos de swfkit.jar, mxmlc.jar e fdb.jar.
4. Baixe o arquivo flex_201_patch_final.zip file.
5. Extraia o arquivo ZIP para um local temporário.
6. Copie swfkit.jar, mxmlc.jar e fdb.jar para o diretório \lib de sua instalação de Flex SDK

Flex Builder, instruções de instalação:
1. Feche Flex Builder.
2. Carregue swfkit.jar, mxmlc.jar, e fdb.jar para um local em seu drive.
3. Vá para sua pasta \lib da instalação do Flex Builder / Flex 2 SDK geralmente localizada aqui:
4. Windows -> Standalone: C:\Program Files\Adobe\Flex Builder 2\Flex SDK 2\lib
5. Windows Plugin: C:\Program Files\Adobe\Flex Builder 2 Plug-in\Flex SDK 2\lib
6. Mac Standalone: Applications/Adobe Flex Builder 2/Flex SDK 2/lib
7. Mac Plugin: Applications/Adobe Flex Builder 2 Plugin-in / Flex SDK 2/ li
8. Faça um backup dos arquivos swfkit.jar, mxmlc.jar, e fdb.jar.
9. Copie e cole os arquivos baixados swfkit.jar, mxmlc.jar, e fdb.jar no diretório /lib do SDK.
10. Clique Sim para substituir.
11. Vá para o diretório lib em \com.adobe.flexbuilder.flex_2.0.155577 plugin, normalmente localizado aqui:

Windows Standalone: C:\Program Files\Adobe\Flex Builder 2\plugins\com.adobe.flexbuilder.flex_2.0.155577\lib
Windows Plugin: eclipse\plugins\com.adobe.flexbuilder.flex_2.0.155577\lib
Mac Standalone : Applications/plugins/com.adobe.com.flex_2.0.155577/ib
Mac Plugin eclipse/plugins/com.adobe.flexbuilder.flex_2.0.155577/lib
Faça um backup de swfkit.jar, mxmlc.jar, e fdb.jar.
Copie e cole os arquivos descarregado swfkit.jar, mxmlc.jar, e fdb.jar no diretório plugin lib.
Clique Sim para substituir.

Avaliação de Aplicativos Modulares - Parte V

Flex / Flex Builder No Comments »

Usando eventos ModuleLoader

A classe ModuleLoader dispara vários eventos, inclusive setup, ready, loading, unload, progress, error, e urlChanged. Você pode usar estes eventos para localizar o progresso do processo loading, e descobrir quando um módulo foi descarregado ou quando o URL do target ModuleLoader mudou.

Usando o evento error

O evento error dá a você uma oportunidade de detectar uma falha quando um módulo não carregar por uma determinada razão. No exemplo seguinte, você pode carregar e descarregar um módulo usando os controles de Botão. Para ativar um evento error, mude o URL no TextInput para um módulo que não existe. O manipulador de erro exibe uma mensagem para o usuário e escreve a mensagem de erro para o log.

<?xml version=”1.0″?>

<!– modules/ErrorEventHandler.mxml –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Script>
<![CDATA[
import mx.events.ModuleEvent;
import mx.modules.*;
import mx.controls.Alert;

private function errorHandler(e:ModuleEvent):void {
Alert.show(”There was an error loading the module.” +
” Please contact the Help Desk.”);
trace(e.errorText);
}

public function createModule():void {
chartModuleLoader.url = ti1.text;
chartModuleLoader.loadModule();
}

public function removeModule():void {
chartModuleLoader.unloadModule();
}

]]>
</mx:Script>

<mx:Panel title=”Module Example”
height=”90%”
width=”90%”
paddingTop=”10″
paddingLeft=”10″
paddingRight=”10″
paddingBottom=”10″
>
<mx:HBox>
<mx:Label text=”URL:”/>
<mx:TextInput width=”200″ id=”ti1″ text=”ColumnChartModule.swf”/>
<mx:Button label=”Load” click=”createModule()”/>
<mx:Button label=”Unload” click=”removeModule()”/>
</mx:HBox>
<mx:ModuleLoader id=”chartModuleLoader” error=”errorHandler(event)”/>
</mx:Panel>
</mx:Application>

Usando o evento progress

Você pode usar o evento progress para localizar o progresso de um módulo à medida que ele carrega. Quando você adicionar um listener para o evento de progress, Flex chama aquele listener em intervalos regulares durante o processo de carregamento do módulo. Todo tempo o listener é chamado, você pode olhar para a propriedade bytesLoaded do evento. Você pode comparar esta ao bytesTotal para conseguir uma porcentagem de conclusão.
O exemplo seguinte reporta o nível de conclusão durante o carregamento do módulo. Também produz uma barra de progresso simples que mostra a usuários e fecha ao terminar de carregar.

<?xml version=”1.0″?>
<!– modules/SimpleProgressEventHandler.mxml –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Script>
<![CDATA[
import mx.events.ModuleEvent;
import flash.events.ProgressEvent;
import mx.modules.*;

[Bindable]
public var progBar:String = “”;

[Bindable]
public var progMessage:String = “”;

private function progressEventHandler(e:ProgressEvent):void {

progBar += “.”;
progMessage =
“Module ” +
Math.round((e.bytesLoaded/e.bytesTotal) * 100) +
“% loaded”;
}

public function createModule():void {
chartModuleLoader.loadModule();
}

public function removeModule():void {
chartModuleLoader.unloadModule();
progBar = “”;
progMessage = “”;
}

]]>
</mx:Script>

<mx:Panel title=”Module Example”
height=”90%”
width=”90%”
paddingTop=”10″
paddingLeft=”10″
paddingRight=”10″
paddingBottom=”10″
>
<mx:HBox>
<mx:Label id=”l2″ text=”{progMessage}”/>
<mx:Label id=”l1″ text=”{progBar}”/>
</mx:HBox>

<mx:Button label=”Load” click=”createModule()”/>
<mx:Button label=”Unload” click=”removeModule()”/>

<mx:ModuleLoader
id=”chartModuleLoader”
url=”ColumnChartModule.swf”
progress=”progressEventHandler(event)”
/>
</mx:Panel>
</mx:Application>

Você também pode conectar um carregador de módulo para um controle ProgressBar. O exemplo seguinte cria um componente personalizado para o ModuleLoader que inclui um ProgressBar. O ProgressBar exibe o progresso do módulo carregando.

<?xml version=”1.0″?><!– modules/MySimpleModuleLoader.mxml –><mx:ModuleLoader xmlns:mx=”http://www.adobe.com/2006/mxml”>    <mx:Script>        <![CDATA[                   private function clickHandler():void {                if (!url) {                    url=”ColumnChartModule.swf”;                }                loadModule();            }               ]]>    </mx:Script>

    <mx:ProgressBar        id=”progress”        width=”100%”        source=”{this}”    />    <mx:HBox width=”100%”>      <mx:Button        id=”load”        label=”Load”        click=”clickHandler()”      />      <mx:Button        id=”unload”        label=”Unload”        click=”unloadModule()”      />      <mx:Button        id=”reload”        label=”Reload”        click=”unloadModule();loadModule();”      />    </mx:HBox></mx:ModuleLoader>

Você pode usar este módulo em um aplicativo simples, como o exemplo seguinte mostra:

<?xml version=”1.0″?><!– modules/ComplexProgressEventHandler.mxml –><mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” xmlns:local=”*”>

    <mx:Panel title=”Module Example”        height=”90%”        width=”90%”        paddingTop=”10″        paddingLeft=”10″        paddingRight=”10″        paddingBottom=”10″    >               <mx:Label text=”Use the buttons below to load and unload               the module.”/>        <local:MySimpleModuleLoader id=”customLoader”/>    </mx:Panel>

</mx:Application>

Este exemplo não muda a propriedade de tag do ProgressBar para todos os eventos. Por exemplo, se você carregar e então descarrega o módulo, a propriedade de tag permanece em “CARREGAR 100%”. Ajustar a tag corretamente, você deve definir outros manipuladores de evento para os eventos de ModuleLoader, como unload e error.

Avaliação de Aplicativos Modulares - Parte IV

Flex / Flex Builder No Comments »

Carregando e descarregando módulos

Para carregar e descarregar módulos você usa o métodos load() e unload() da classe ModuleLoader. Estes métodos não tem nenhum parâmetro; O ModuleLoader carrega ou descarrega o módulo que combina o valor da propriedade de uRL atual.
O exemplo seguinte carrega e descarrega o módulo quando você clicar o botão

<?xml version=”1.0″?><!– modules/ASModuleLoaderApp.mxml –><mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>    <mx:Script>        <![CDATA[        import mx.modules.*;

        public function createModule(m:ModuleLoader, s:String):void {            if (!m.url) {                m.url = s;                return;            }            m.loadModule();        }

        public function removeModule(m:ModuleLoader):void {            m.unloadModule();        }        ]]>    </mx:Script>

    <mx:Panel title=”Module Example”        height=”90%”        width=”90%”        paddingTop=”10″        paddingLeft=”10″        paddingRight=”10″        paddingBottom=”10″    >        <mx:TabNavigator id=”tn”            width=”100%”            height=”100%”            creationPolicy=”auto”        >            <mx:VBox id=”vb1″ label=”Column Chart Module”>                             <mx:Button                    label=”Load”                    click=”createModule(chartModuleLoader, l1.text)”                />                <mx:Button                    label=”Unload”                    click=”removeModule(chartModuleLoader)”                />                <mx:Label id=”l1″ text=”ColumnChartModule.swf”/>                <mx:ModuleLoader id=”chartModuleLoader”/>                                         </mx:VBox>

            <mx:VBox id=”vb2″ label=”Form Module”>                <mx:Button                    label=”Load”                    click=”createModule(formModuleLoader, l2.text)”                />                <mx:Button                    label=”Unload”                    click=”removeModule(formModuleLoader)”                />                <mx:Label id=”l2″ text=”FormModule.swf”/>                <mx:ModuleLoader id=”formModuleLoader”/>            </mx:VBox>        </mx:TabNavigator>    </mx:Panel></mx:Application>

Fixando o local de um ModuleLoader ativa um chamada para o método loadModule(),
também. Isto acontece quando você primeiro criar um ModuleLoader com a
propriedade de uRL fixa.
Também acontece se você mudar o valor daquela propriedade.
O exemplo seguinte carrega os módulos sem chamar o método
loadModule() porque a propriedade de uRL é fixada na tag <mx:ModuleLoader>:

<?xml version="1.0"?><!– modules/URLModuleLoaderApp.mxml –><mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>    <mx:Panel        title=”Module Example”        height=”90%”        width=”90%”        paddingTop=”10″        paddingLeft=”10″        paddingRight=”10″        paddingBottom=”10″    >

        <mx:Label width=”100%” color=”blue”            text=”Select the tabs to change the panel.”/>

        <mx:TabNavigator id=”tn”            width=”100%”            height=”100%”            creationPolicy=”auto”        >            <mx:VBox id=”vb1″ label=”Column Chart Module”>                <mx:Label id=”l1″ text=”ColumnChartModule.swf”/>                <mx:ModuleLoader url=”ColumnChartModule.swf”/>            </mx:VBox>

            <mx:VBox id=”vb2″ label=”Form Module”>                <mx:Label id=”l2″ text=”FormModule.swf”/>                <mx:ModuleLoader url=”FormModule.swf”/>            </mx:VBox>

        </mx:TabNavigator>    </mx:Panel></mx:Application>

Quando você carregar um módulo, o Flex assegura que existe só uma cópia de um módulo carregado, não importa quantas vezes você chama load() para aquele módulo.

Os módulos são carregados na child do aplicativo atual. Você pode especificar um aplicativo diferente usando a propriedade applicationDomain da classe ModuleLoader.

Quando duas classes do mesmo nome mas implementações diferentes são carregadas, o primeiro carregado é o que será usado.

Carregando módulos de diferentes servidores

Para carregar um módulo de um servidor em um aplicativo que roda em um servidor diferente, você deve estabelecer uma confiança entre o módulo e o aplicativo que vai carrega-lo.

Para permitir acesso através de domínios:

Em seu aplicativo, você deve chamar o método allowDomain() e especificar o target do domínio que carrega o módulo. Então, especifique o domínio no manipulador de evento preinitialize de seu aplicativo para assegurar que o aplicativo é instalado antes do módulo ser carregado.

1. No arquivo de domínio cruzado do servidor remoto onde seu módulo está, adicione uma entrada que especifica o servidor em que o aplicativo que carregará está rodando.

2. Carregue o arquivo cross-domain no servidor remoto no evento preinitialize de seu aplicativo.

3. No módulo carregado, chame o método allowDomain() de forma que pode comunicar com o carregador

O seguinte exemplo mostra o método init() do aplicativo carregado.

public function setup():void {    Security.allowDomain(”remoteservername”);    Security.loadPolicyFile(”http://remoteservername/crossdomain.xml”);    var request:URLRequest = new URLRequest(”http://remoteservername        /crossdomain.xml”);    var loader:URLLoader = new URLLoader();    loader.load(request);}

O seguinte exemplo mostra módulo carregado do método init():

public function initMod():void {    Security.allowDomain(”loaderservername”);}

O seguinte exemplo mostra o cross-domain que reside no servidor remoto:

<!-- crossdomain.xml file located at the root of the server --><cross-domain-policy>    <allow-access-from domain=”loaderservername” to-ports=”*”/></cross-domain-policy>