Flex - Guia Rápido
O que é Flex?
Flex é uma poderosa estrutura de aplicativo de código aberto que permite construir aplicativos tradicionais para navegador, celular e desktop usando o mesmo modelo de programação, ferramenta e base de código.
Flex fornece FLEX SDK que consiste na biblioteca de classes Flex (classes ActionScript), os compiladores Flex, o depurador, as linguagens de programação MXML e ActionScript e outros utilitários para construir aplicativos de internet ricos expressivos e interativos (RIA)
O Flex cuida da interface do usuário (IU) ou da funcionalidade do lado do cliente de um aplicativo da web. A funcionalidade do lado do servidor depende de componentes do lado do servidor escritos em uma linguagem de script tradicional (Java / PHP etc.)
Um aplicativo baseado em Flex, na verdade, entregue como um arquivo SWF e se parece muito com a parte HTML / JavaScript de um aplicativo da web tradicional.
O aplicativo Flex é implantado como arquivo (s) SWF mais um wrapper HTML, o (s) arquivo (s) CSS e quaisquer arquivos de script do lado do servidor (ou seja, Java, .CFM, .PHP, etc.) para o servidor. Como os aplicativos da web tradicionais.
Esses recursos são entregues a partir de um servidor para o navegador do cliente usando o método usual de solicitação / resposta HTTP e o Flash Player que executa o aplicativo em um navegador.
Vantagens do Flex
Os aplicativos Flex geralmente são baseados em Flash Player, que podem acessar recursos do dispositivo como GPS, câmera, banco de dados local, acelerômetro gráfico.
Os aplicativos Flex podem ser executados em dispositivos Android, BlackBerry Tablet OS e iOS.
Os aplicativos Flex podem ser executados em navegadores e também em desktops.
Os aplicativos Flex são independentes de plataforma. A IU pode ser nativa da plataforma ou pode ser feita da mesma forma em cada plataforma.
Os aplicativos Flex podem interagir com o servidor com todas as principais tecnologias do lado do servidor, como Java, Spring, Hibernate, PHP, Ruby, .NET, Adobe ColdFusion e SAP usando os padrões da indústria, como REST, SOAP, JSON, JMS e AMF.
O Flex Applications garante uma rica experiência do usuário por meio da interação intuitiva com o aplicativo e apresentação de informações em uma interface visualmente mais rica.
O aplicativo Flex é um aplicativo de página única em que os estados podem fazer a transição de um estado para outro sem ter que buscar uma nova página do servidor ou atualizar o navegador.
O aplicativo Flex reduz a carga no servidor em grande medida porque é necessário retornar o aplicativo apenas uma vez, ao invés de uma nova página toda vez que o usuário muda as visualizações.
Desvantagens do Flex
Os aplicativos Flex são aplicativos de thread único, mas o Flex fornece um modelo de programação assíncrona para mitigar essa preocupação.
Flex é baseado em ActionScript e XML. Aprender esses dois é fundamental para trabalhar no Flex.
Este tutorial irá guiá-lo sobre como preparar um ambiente de desenvolvimento para iniciar seu trabalho com Adobe Flex Framework. Este tutorial também ensinará como configurar o JDK e o Adobe Flash Builder em sua máquina antes de configurar o Flex Framework.
Requisitos do sistema
O FLEX requer JDK 1.4 ou superior, portanto, o primeiro requisito é ter o JDK instalado em sua máquina.
| JDK | 1.4 ou superior. |
|---|---|
| Memória | Sem requisitos mínimos. |
| Espaço em disco | Sem requisitos mínimos. |
| Sistema operacional | Sem requisitos mínimos. |
Siga as etapas fornecidas para configurar seu ambiente para iniciar o desenvolvimento de aplicativos Flex.
Etapa 1 - Verifique a instalação do Java em sua máquina
Agora abra o console e execute o seguinte java comando.
| SO | Tarefa | Comando |
|---|---|---|
| janelas | Abrir console de comando | c: \> versão java |
| Linux | Abra o terminal de comando | $ java -version |
| Mac | Terminal aberto | máquina: ~ joseph $ java -version |
Vamos verificar a saída de todos os sistemas operacionais -
| SO | Saída Gerada |
|---|---|
| janelas | versão java "1.6.0_21" Java (TM) SE Runtime Environment (build 1.6.0_21-b07) Cliente VM Java HotSpot (TM) (versão 17.0-b17, modo misto, compartilhamento) |
| Linux | versão java "1.6.0_21" Java (TM) SE Runtime Environment (build 1.6.0_21-b07) Cliente VM Java HotSpot (TM) (versão 17.0-b17, modo misto, compartilhamento) |
| Mac | versão java "1.6.0_21" Java (TM) SE Runtime Environment (build 1.6.0_21-b07) Servidor VM Java HotSpot (TM) de 64 bits (versão 17.0-b17, modo misto, compartilhamento) |
Etapa 2 - Configure o Java Development Kit (JDK)
Se você não tiver o Java instalado, poderá instalar o Java Software Development Kit (SDK) a partir do site Java da Oracle Java SE Downloads . Você encontrará instruções para instalar o JDK nos arquivos baixados e, em seguida, siga as instruções fornecidas para instalar e configurar a configuração. Por fim, defina as variáveis de ambiente PATH e JAVA_HOME para se referir ao diretório que contém java e javac, normalmente java_install_dir / bin e java_install_dir respectivamente.
Colocou o JAVA_HOMEvariável de ambiente para apontar para o local do diretório base onde o Java está instalado em sua máquina. Por exemplo -
| SO | Resultado |
|---|---|
| janelas | Defina a variável de ambiente JAVA_HOME como C: \ Arquivos de programas \ Java \ jdk1.6.0_21 |
| Linux | export JAVA_HOME = / usr / local / java-current |
| Mac | export JAVA_HOME = / Library / Java / Home |
Anexe a localização do compilador Java ao caminho do sistema.
| SO | Resultado |
|---|---|
| janelas | Anexe a string;% JAVA_HOME% \ bin ao final da variável do sistema, Caminho. |
| Linux | exportar PATH =$PATH:$JAVA_HOME / bin / |
| Mac | não requerido |
Etapa 3 - Configuração do Adobe Flash Builder 4.5
Todos os exemplos neste tutorial foram escritos usando Adobe Flash Builder 4.5 Profession IDE versão de teste. Portanto, sugiro que você tenha a versão mais recente do Adobe Flash Builder instalada em sua máquina. Além disso, verifique a compatibilidade do sistema operacional.
Para instalar o IDE Adobe Flash Builder, baixe os binários mais recentes do Adobe Flash Builder em https://www.adobe.com/in/products/flash-builder.html. Depois de fazer o download da instalação, descompacte a distribuição binária em um local conveniente. Por exemplo, em C: \ flash-builder no Windows, ou / usr / local / flash-builder no Linux / Unix e, finalmente, defina a variável PATH apropriadamente.
O Flash Builder será iniciado quando você executar os seguintes comandos em uma máquina Windows ou simplesmente clicar duas vezes em FlashBuilder.exe
%C:\flash-builder\FlashBuilder.exeO Flash Builder pode ser iniciado executando os seguintes comandos na máquina Unix (Solaris, Linux, etc.) -
$/usr/local/flash-builder/FlashBuilderA versão de teste do Adobe Flash Builder pode ser usada por 60 dias. Basta aceitar os termos e condições e pular as etapas iniciais de registro para continuar com o IDE. Para nosso entendimento, estamos usando a versão de teste para fins de ensino.
Após uma inicialização bem-sucedida, se tudo estiver bem, ele deve exibir o seguinte resultado -
Adobe Flash Builder vem pré-configurado com FLEX SDKs. Estamos usando o FLEX SDK 4.5 em nossos exemplos que vêm junto com o Adobe Flash Builder 4.5.
Etapa 4 - Configurar Apache Tomcat
Você pode baixar a versão mais recente do Tomcat em https://tomcat.apache.org/. Depois de fazer o download da instalação, descompacte a distribuição binária em um local conveniente. Por exemplo, em C: \ apache-tomcat-6.0.33 no Windows ou /usr/local/apache-tomcat-6.0.33 no Linux / Unix e defina a variável de ambiente CATALINA_HOME apontando para os locais de instalação.
O Tomcat pode ser iniciado executando os seguintes comandos na máquina Windows, ou você pode simplesmente clicar duas vezes em startup.bat
%CATALINA_HOME%\bin\startup.bat
or
C:\apache-tomcat-6.0.33\bin\startup.batO Tomcat pode ser iniciado executando os seguintes comandos na máquina UNIX (Solaris, Linux, etc.) -
$CATALINA_HOME/bin/startup.sh
Or
/usr/local/apache-tomcat-6.0.33/bin/startup.shApós uma inicialização bem-sucedida, os aplicativos da web padrão incluídos no Tomcat estarão disponíveis visitando http://localhost:8080/. Se tudo estiver bem, ele deve exibir o seguinte resultado -
Mais informações sobre como configurar e executar o Tomcat podem ser encontradas na documentação incluída aqui, bem como no site do Tomcat: http://tomcat.apache.org
O Tomcat pode ser interrompido executando os seguintes comandos na máquina Windows -
%CATALINA_HOME%\bin\shutdown
Or
C:\apache-tomcat-5.5.29\bin\shutdownO Tomcat pode ser interrompido executando os seguintes comandos na máquina UNIX (Solaris, Linux, etc.) -
$CATALINA_HOME/bin/shutdown.sh
Or
/usr/local/apache-tomcat-5.5.29/bin/shutdown.shAntes de começarmos a criar um aplicativo “HelloWorld” real usando o Flash Builder, vamos ver quais são as partes reais de um aplicativo Flex -
Um aplicativo Flex consiste nas quatro partes importantes a seguir, das quais a última parte é opcional, mas as três primeiras são obrigatórias.
- Bibliotecas Flex Framework
- Código do lado do cliente
- Recursos públicos (HTML / JS / CSS)
- Código do lado do servidor
Os locais de amostra de diferentes partes de um aplicativo Flex típico como HelloWord serão mostrados abaixo -
| Nome | Localização |
|---|---|
| Raiz do projeto | Olá Mundo/ |
| Bibliotecas Flex Framework | Caminho de construção |
| Recursos públicos | html-template |
| Código do lado do cliente | tabela table-bordered / com / tutorialspoint / client |
| Código do lado do servidor | tabela table-bordered / com / tutorialspoint / server |
Processo de construção de aplicativo
Para começar, o aplicativo Flex requer bibliotecas de estrutura Flex. Posteriormente, o Flash Builder adiciona automaticamente as bibliotecas para construir o caminho.
Quando construímos nosso código usando o construtor Flash, o construtor Flash fará as seguintes tarefas -
Compila o código-fonte para o arquivo HelloWorld.swf.
Compila um HelloWorld.html (um arquivo wrapper para arquivo swf) de um arquivo index.template.html armazenado na pasta html-template
Copia os arquivos HelloWorld.swf e HelloWorld.html na pasta de destino, bin-debug.
Copia swfobject.js, um código JavaScript responsável por carregar o arquivo swf dinamicamente em HelloWorld.html na pasta de destino, bin-debug
Copia bibliotecas de framework na forma de arquivo swf denominado frameworks_xxx.swf na pasta de destino, bin-debug
Copia outros módulos flex (arquivos .swf como sparkskins_xxx.swf, textLayout_xxx.swf) na pasta de destino.
Processo de lançamento de aplicativo
Abra o arquivo HelloWorld.html disponível na pasta \ HelloWorld \ bin-debug em qualquer navegador da web.
HelloWorld.swf será carregado automaticamente e o aplicativo começará a ser executado.
Bibliotecas Flex Framework
A seguir está um breve detalhe sobre algumas bibliotecas de framework importantes. Observe que as bibliotecas Flex são indicadas com a notação .swc
| Sr. Não | Nós e descrição |
|---|---|
| 1 | playerglobal.swc Esta biblioteca é específica para FlashPlayer instalado em sua máquina e contém métodos nativos suportados pelo Flash Player. |
| 2 | textlayout.swc Esta biblioteca oferece suporte aos recursos relacionados ao layout de texto. |
| 3 | framework.swc Esta é a biblioteca do flex framework que contém os principais recursos do Flex. |
| 4 | mx.swc Esta biblioteca armazena as definições dos controles da interface do usuário mx. |
| 5 | charts.swc Esta biblioteca suporta os controles de gráficos. |
| 6 | spark.swc Esta biblioteca armazena as definições dos controles de UI do spark. |
| 7 | sparkskins.swc Esta biblioteca oferece suporte à criação de pele de controles de IU do Spark. |
Código do lado do cliente
O código do aplicativo Flex pode ser escrito em MXML assim como ActionScript.
| Sr. Não | Tipo e descrição |
|---|---|
| 1 | MXML MXML é uma linguagem de marcação XML que usaremos para definir os componentes da interface do usuário. MXML é compilado em ActionScript durante o processo de construção. |
| 2 | ActionScript ActionScript é uma linguagem de programação procedural orientada a objetos e é baseada na especificação da linguagem de rascunho ECMAScript (ECMA-262) edição 4. |
No Flex, podemos combinar ActionScript e MXML para fazer o seguinte -
Layout dos componentes da interface do usuário usando tags MXML
Use MXML para definir declarativamente aspectos não visuais de um aplicativo, como acesso a fontes de dados no servidor
Use MXML para criar ligações de dados entre componentes da interface do usuário e fontes de dados no servidor.
Use o ActionScript para definir ouvintes de evento dentro de atributos de evento MXML.
Adicione blocos de script usando o
Inclui arquivos ActionScript externos.
Importar classes ActionScript.
Crie componentes do ActionScript.
Recursos Públicos
Esses são arquivos de ajuda referenciados pelo aplicativo Flex, como a página HTML do Host, CSS ou imagens localizadas na pasta html-template. Ele contém os seguintes arquivos -
| Sr. Não | Nome e descrição do arquivo |
|---|---|
| 1 | index.template.html Página HTML do host, com espaços reservados. O Flash Builder usa esse modelo para construir a página real HelloWorld.html com o arquivo HelloWorld.swf. |
| 2 | playerProductInstall.swf Este é um utilitário flash para instalar o Flash Player no modo expresso. |
| 3 | swfobject.js Este é o JavaScript responsável por verificar a versão do flash player instalado e por carregar HelloWorld.swf na página HelloWorld.html. |
| 4 | html-template/history Esta pasta contém recursos para gerenciamento de histórico do aplicativo. |
HelloWorld.mxml
Este é o código MXML / AS (ActionScript) real escrito implementando a lógica de negócios do aplicativo e que o compilador Flex traduz em um arquivo SWF que será executado pelo Flash Player no navegador.
Uma amostra de classe HelloWorld Entry será a seguinte -
<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s = "library://ns.adobe.com/flex/spark"
xmlns:mx = "library://ns.adobe.com/flex/mx"
width = "100%" height = "100%"
minWidth = "500" minHeight = "500"
initialize = "application_initializeHandler(event)">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
protected function btnClickMe_clickHandler(event:MouseEvent):void {
Alert.show("Hello World!");
}
protected function application_initializeHandler(event:FlexEvent):void {
lblHeader.text = "My Hello World Application";
}
]]>
</fx:Script>
<s:VGroup horizontalAlign = "center" width = "100%" height = "100%"
paddingTop = "100" gap = "50">
<s:Label id = "lblHeader" fontSize = "40" color = "0x777777" />
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" />
</s:VGroup>
</s:Application>A tabela a seguir fornece a descrição de todas as tags usadas no script de código acima.
| Sr. Não | Nó e descrição |
|---|---|
| 1 | Application Define o container do aplicativo que é sempre a tag raiz de um aplicativo Flex. |
| 2 | Script Contém a lógica de negócios em linguagem ActionScript. |
| 3 | VGroup Define um recipiente de agrupamento vertical que pode conter controles Flex UI de maneira vertical. |
| 4 | Label Representa um controle Label, um componente de interface de usuário muito simples que exibe texto. |
| 5 | Button Representa um controle de botão, que pode ser clicado para realizar alguma ação. |
Código do lado do servidor
Esta é a parte do lado do servidor de seu aplicativo e é muito opcional. Se você não estiver fazendo nenhum processamento de back-end em seu aplicativo, não precisará dessa parte, mas se houver algum processamento necessário no back-end e seu aplicativo do lado do cliente interagir com o servidor, você terá que desenvolver esses componentes.
No próximo capítulo, usaremos todos os conceitos mencionados acima para criar um HelloWorld aplicativo usando o Flash Builder.
Usaremos o Flash Builder 4.5 para criar aplicativos Flex. Vamos começar com um simplesHelloWorld inscrição.
Etapa 1 - Criar Projeto
A primeira etapa é criar um projeto Flex simples usando o IDE do Flash Builder. Inicie o assistente de projeto usando a opçãoFile > New > Flex Project. Agora nomeie seu projeto como HelloWorld usando a janela do assistente da seguinte forma -
Selecione o tipo de aplicativo Web (runs in Adobe Flash Player). No entanto, se não estiver selecionado, deixe os outros valores padrão como estão e clique no botão Concluir. Depois que seu projeto for criado com sucesso, você terá o seguinte conteúdo em seu Project Explorer -
Aqui está uma breve descrição de todas as pastas importantes -
| Pasta | Localização |
|---|---|
| mesa com borda de mesa | Arquivos de código-fonte (mxml / as classes). Criamos a estrutura de pastas com / tutorialspoint / client contendo as classes java específicas do lado do cliente responsáveis pela exibição da IU do cliente. |
| bin-debug | Esta é a parte de saída, ela representa o aplicativo da web implementável real. A pasta de histórico contém arquivos de suporte para gerenciamento de histórico do aplicativo Flex. framework_xxx.swf, os arquivos de estrutura flex devem ser usados pelo aplicativo flex. HelloWorld.html, arquivo HTML wrapper / host para aplicativo flex. HelloWorld.swf, nosso aplicativo baseado em flex. playerProductInstall.swf, instalador expresso do flash player. spark_xxx.swf, biblioteca para suporte ao componente spark. swfobject.js, JavaScript responsável por carregar HelloWorld.swf em HelloWorld.html. Ele verifica a versão do flash player e passa o parâmetro de inicialização para o arquivo HelloWorld.swf. textLayout_xxx.swf, biblioteca para suporte a componentes de texto. |
| html-template | Isso representa o aplicativo da web configurável. O Flash Builder compila arquivos da pasta html-template para a pasta bin-debug. A pasta de histórico contém arquivos de suporte para gerenciamento de histórico do aplicativo Flex. index.template.html, wrapper / host Arquivo HTML para aplicativos flex com espaços reservados para configuração específica do Flash Builder. É compilado em HelloWorld.html na pasta bin-debug durante a compilação. playerProductInstall.swf, o instalador expresso do flash player é copiado para a pasta bin-debug durante a compilação. swfobject.js, JavaScript responsável por carregar HelloWorld.swf em HelloWorld.html. Ele verifica a versão do flash player e passa o parâmetro de inicialização para o arquivo HelloWorld.swf que é copiado para a pasta bindebug durante a compilação. |
Etapa 2 - Criar arquivo CSS externo
Crie um arquivo CSS styles.css para a página Wrapper HTML em html-template pasta.
html, body {
height:100%;
}
body {
margin:0;
padding:0;
overflow:auto;
text-align:center;
}
object:focus {
outline:none;
}
#flashContent {
display:none;
}
.pluginHeader {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#9b1204;
text-decoration:none;
font-weight:bold;
}
.pluginInstallText {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
line-height:18px;
font-style:normal;
}
.pluginText {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
line-height:18px;
font-style:normal;
}Etapa 3 - Modificar modelo de página HTML Wrapper
Modificar modelo de página HTML de wrapper index.template.html dentro htmltemplatepasta. O Flash Builder criará um modelo de página HTML Wrapper padrão html-template / index.template.html , que será compilado em HelloWorld.html.
Este arquivo contém espaços reservados que o Flash Builder substitui durante o processo de compilação. Por exemplo, versão do flash player, nome do aplicativo, etc.
Vamos modificar este arquivo para exibir mensagens personalizadas caso o plugin flash não esteja instalado.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" lang = "en" xml:lang = "en">
<head>
<title>${title}</title>
<meta name = "google" value = "notranslate" />
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<link rel = "stylesheet" href = "styles.css" type = "text/css"></link>
<link rel = "stylesheet" type = "text/css" href = "history/history.css" />
<script type = "text/javascript" table table-bordered = "history/history.js">
</script>
<script type = "text/javascript" table table-bordered = "swfobject.js"></script>
<script type = "text/javascript">
// For version detection, set to min. required Flash Player version,
//or 0 (or 0.0.0), for no version detection.
var swfVersionStr = "${version_major}.${version_minor}.${version_revision}"; // To use express install, set to playerProductInstall.swf, //otherwise the empty string. var xiSwfUrlStr = "${expressInstallSwf}";
var flashvars = {};
var params = {};
params.quality = "high";
params.bgcolor = "${bgcolor}"; params.allowscriptaccess = "sameDomain"; params.allowfullscreen = "true"; var attributes = {}; attributes.id = "${application}";
attributes.name = "${application}"; attributes.align = "middle"; swfobject.embedSWF ( "${swf}.swf", "flashContent",
"${width}", "${height}",
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
// JavaScript enabled so display the flashContent div in case
//it is not replaced with a swf object.
swfobject.createCSS("#flashContent", "display:block;text-align:left;");
</script>
</head>
<body>
<div id = "flashContent">
<p style = "margin:100px;">
<table width = "700" cellpadding = "10" cellspacing = "2" border = "0">
<tr>
<td class = "pluginHeader">Flash Player Required</td>
</tr>
<tr>
<td class = "pluginText">The Adobe Flash Player version
10.2.0 or greater is required.</td>
</tr>
<tr>
<td class = "pluginInstallText" align = "left">
<table border = "0" width = "100%">
<tr class = "pluginInstallText" >
<td>Click here to download and install Adobe Flash Player:</td>
<td> </td>
<td align = "right">
<script type = "text/javascript">
var pageHost
= ((document.location.protocol == "https:") ? "https://" : "http://");
document.write("<a target = '_blank'"
+" href = 'http://get.adobe.com/flashplayer/'><"
+"img style = 'border-style: none' table table-bordered = '"
+pageHost
+"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"
+" alt = 'Get Adobe Flash player' /></a>" );
</script>
</td>
</tr>
</table>
</tr>
</table>
</p>
</div>
<noscript>
<object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
width = "${width}" height = "${height}" id = "${application}"> <param name = "movie" value = "${swf}.swf" />
<param name = "quality" value = "high" />
<param name = "bgcolor" value = "${bgcolor}" /> <param name = "allowScriptAccess" value = "sameDomain" /> <param name = "allowFullScreen" value = "true" /> <!--[if !IE]>--> <object type = "application/x-shockwave-flash" data = "${swf}.swf"
width = "${width}" height = "${height}">
<param name = "quality" value = "high" />
<param name = "bgcolor" value = "${bgcolor}" />
<param name = "allowScriptAccess" value = "sameDomain" />
<param name = "allowFullScreen" value = "true" />
<!--<![endif]-->
<!--[if gte IE 6]>-->
<p>
<p style = "margin:100px;">
<table width = "700" cellpadding = "10" cellspacing = "2"
border = "0">
<tr>
<td class = "pluginHeader">Flash Player Required</td>
</tr>
<tr>
<td class = "pluginText">The Adobe Flash Player version
10.2.0 or greater is required.</td>
</tr>
<tr>
<td class = "pluginInstallText" align = "left">
<table border = "0" width = "100%">
<tr class = "pluginInstallText" >
<td>Click here to download and install Adobe Flash
Player:</td>
<td> </td>
<td align = "right">
<script type = "text/javascript">
var pageHost
= ((document.location.protocol == "https:") ? "https://" : "http://");
document.write("<a target = '_blank'"
+" href = 'http://get.adobe.com/flashplayer/'><"
+"img style = 'border-style: none' table table-bordered = '"
+pageHost
+"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"
+" alt = 'Get Adobe Flash player' /></a>" );
</script>
</td>
</tr>
</table>
</tr>
</table>
</p>
</p>
<!--<![endif]-->
<p style = "margin:100px;">
<table width = "700" cellpadding = "10" cellspacing = "2" border = "0">
<tr><td class = "pluginHeader">Flash Player Required</td></tr>
<tr><td class = "pluginText">The Adobe Flash Player version
10.2.0 or greater is required.</td></tr>
<tr>
<td class = "pluginInstallText" align = "left">
<table border = "0" width = "100%">
<tr class = "pluginInstallText" >
<td>Click here to download and install Adobe Flash
Player:</td>
<td> </td>
<td align = "right">
<script type = "text/javascript">
var pageHost
= ((document.location.protocol == "https:") ? "https://" : "http://");
document.write("<a target = '_blank'"
+" href = 'http://get.adobe.com/flashplayer/'><"
+"img style = 'border-style: none' table table-bordered = '"
+pageHost
+"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"
+" alt = 'Get Adobe Flash player' /></a>" );
</script>
</td>
</tr>
</table>
</td>
</tr>
</table>
</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</noscript>
</body>
</html>Etapa 4 - Criar arquivo CSS interno
Crie um arquivo CSS Style.css para HelloWorld.mxml dentro table tablebordered/com/tutorialspointpasta. Flex fornece estilos css semelhantes para seus controles de IU, pois há estilos de css para controles de IU em HTML.
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
.heading {
fontFamily: Arial, Helvetica, sans-serif;
fontSize: 17px;
color: #9b1204;
textDecoration:none;
fontWeight:normal;
}
.button {
fontWeight: bold;
}
.container {
cornerRadius :10;
horizontalCenter :0;
borderColor: #777777;
verticalCenter:0;
backgroundColor: #efefef;
}Etapa 5 - Modificar classe de nível de entrada
O Flash Builder criará uma tabela de arquivo mxml padrão tablebordered / com.tutorialspoint / HelloWorld.mxml , que possui um contêiner de tag raiz <application> para o aplicativo. Vamos modificar este arquivo para exibir "Hello, World!" -
<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s = "library://ns.adobe.com/flex/spark"
xmlns:mx = "library://ns.adobe.com/flex/mx
width = "100%" height = "100%"
minWidth = "500" minHeight = "500"
initialize = "application_initializeHandler(event)">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
protected function btnClickMe_clickHandler(event:MouseEvent):void {
Alert.show("Hello World!");
}
protected function application_initializeHandler(event:FlexEvent):void {
lblHeader.text = "My Hello World Application";
}
]]>
</fx:Script>
<s:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40" color = "0x777777"
styleName = "heading" />
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" styleName = "button" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Você pode criar mais arquivos mxml ou actionscript no mesmo diretório de origem para definir novos aplicativos ou para definir rotinas auxiliares.
Etapa 6 - Criar aplicativo
O Flash Builder tem Build Automaticallypor padrão marcada. Basta verificar oProblemsVeja se há algum erro. Depois de concluir as alterações, você não verá nenhum erro.
Etapa 7 - Executar o aplicativo
Agora clique no
Se tudo estiver bem, você deve ver o pop-up do navegador, o aplicativo instalado e funcionando. Se estiver tudo bem com sua aplicação, ele produzirá o seguinte resultado: [ Experimente online ]
Porque, você está executando seu aplicativo no flash player, então será necessário instalar o plugin do Flash Player para o seu navegador. Basta seguir as instruções na tela para instalar o plugin. Se você já tem o plugin Flash Player definido para o seu navegador, então você deve ser capaz de ver o seguinte resultado -
Parabéns! Você implementou seu primeiro aplicativo usandoFlex.
Este tutorial irá explicar como criar um aplicativo war arquivo e como implementá-lo na raiz do servidor Web Apache Tomcat.
Se você entendeu esse exemplo simples, também será capaz de implantar um aplicativo Flex complexo seguindo as mesmas etapas.
Vamos seguir as seguintes etapas para criar um aplicativo Flex -
| Degrau | Descrição |
|---|---|
| 1 | Crie um projeto com um nome HelloWorld em uma packagecom. tutorialspoint.client conforme explicado no capítulo Flex - Criar aplicativo . |
| 2 | Modifique HelloWorld.mxml conforme explicado abaixo. Mantenha o resto dos arquivos inalterados. |
| 3 | Compile e execute o aplicativo para ter certeza de que a lógica de negócios está funcionando de acordo com os requisitos. |
Siga as etapas fornecidas abaixo para criar uma versão de versão de um aplicativo Flex e, em seguida, implantá-lo no servidor tomcat -
A primeira etapa é criar uma versão de lançamento usando Flash Builder IDE. Inicie o assistente de construção de lançamento usando a opçãoFile > Export > Flash Builder > Release Build.
Selecione o projeto como HelloWorld usando a janela do assistente como segue
Deixe os outros valores padrão como estão e clique no botão Concluir. Agora, o Flash Builder criará uma pasta bin-release contendo a versão de versão do projeto.
Agora que nossa versão de lançamento está pronta, vamos seguir as seguintes etapas para implantar um aplicativo Flex -
| Degrau | Descrição |
|---|---|
| 1 | Compacte o conteúdo da pasta bin-release do aplicativo na forma de arquivo HelloWorld.war e implante-o no Apache Tomcat Webserver. |
| 2 | Inicie seu aplicativo da web usando o URL apropriado, conforme explicado abaixo na última etapa. |
A seguir está o conteúdo do arquivo mxml modificado table table-bordered/com.tutorialspoint/HelloWorld.mxml.
<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s = "library://ns.adobe.com/flex/spark"
xmlns:mx = "library://ns.adobe.com/flex/mx"
width = "100%" height = "100%"
minWidth = "500" minHeight = "500"
initialize = "application_initializeHandler(event)">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
protected function btnClickMe_clickHandler(event:MouseEvent):void {
Alert.show("Hello World!");
}
protected function application_initializeHandler(event:FlexEvent):void {
lblHeader.text = "My Hello World Application";
}
]]>
</fx:Script>
<s:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40" color = "0x777777"
styleName = "heading" />
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" styleName = "button" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Quando você estiver pronto com todas as alterações feitas, vamos compilar e executar o aplicativo no modo normal como fizemos no capítulo Flex - Criar aplicativo . Se tudo estiver bem com sua aplicação, ele produzirá o seguinte resultado: [ Experimente online ]
Criar arquivo WAR
Agora nosso aplicativo está funcionando bem e estamos prontos para exportá-lo como um arquivo de guerra. Siga as seguintes etapas -
Vá para o diretório bin-release do seu projeto C: \ workspace \ HelloWorld \ binrelease
Selecione todos os arquivos e pastas disponíveis no diretório bin-release.
Compacte todos os arquivos e pastas selecionados em um arquivo chamado HelloWorld.zip .
Renomeie HelloWorld.zip para HelloWorld.war.
Implantar arquivo WAR
Pare o servidor tomcat.
Copie o arquivo HelloWorld.war para o diretório de instalação do tomcat> pasta webapps.
Inicie o servidor tomcat.
Olhe dentro do diretório webapps, deve haver uma pasta que HelloWorld foi criada.
Agora HelloWorld.war foi implantado com sucesso na raiz do Tomcat Webserver.
Executar aplicativo
Insira um URL no navegador da web -
http: // localhost: 8080 / HelloWorld / HelloWorld.html para iniciar o aplicativo.
O nome do servidor (localhost) e a porta (8080) podem variar de acordo com a configuração do tomcat.
Ciclo de vida do aplicativo Flex
Embora você possa construir aplicativos Flex sem entender as fases do ciclo de vida de um aplicativo, é bom conhecer o mecanismo básico; a ordem em que as coisas ocorrem. Isso o ajudará a configurar recursos como carregar outros aplicativos Flex em tempo de execução e gerenciar o processo de carregamento e descarregamento de bibliotecas de classes e ativos em tempo de execução.
Uma boa compreensão do ciclo de vida do aplicativo Flex permitirá que você crie aplicativos melhores e os otimize, porque você saberá onde executar o código da maneira ideal. Por exemplo, se você precisa garantir que algum código seja executado durante um pré-carregador, você precisa saber onde colocar o código para esse evento.
Quando carregamos o aplicativo flex em um navegador, os seguintes eventos ocorrem durante o ciclo de vida do aplicativo flex.
A seguir está um breve detalhe sobre os diferentes eventos do ciclo de vida do Flex.
| Sr. Não | Descrição do Evento |
|---|---|
| 1 | preInitialize: mx.core.UIComponent.preinitialize Tipo de evento: mx.events.FlexEvent.PREINITIALIZE Este evento é despachado no início da sequência de inicialização do componente. O componente está em um estado muito bruto quando este evento é despachado. Muitos componentes, como o controle de botão, criam componentes filhos internos para implementar a funcionalidade. Por exemplo, o controle Button cria um componente interno de UI TextField para representar seu texto de rótulo. Quando o Flex despacha o evento de pré-inicialização, os filhos, incluindo todos os filhos internos, de um componente ainda não foram criados. |
| 2 | inicializar: mx.core.UIComponent.initialize Tipo de evento: mx.events.FlexEvent.INITIALIZE Este evento é despachado após a fase de pré-inicialização. O framework Flex inicializa a estrutura interna deste componente durante esta fase. Este evento é disparado automaticamente quando o componente é adicionado a um pai. Você não precisa chamar initialize () geralmente. |
| 3 | creationComplete: mx.core.UIComponent.creationComplete Tipo de evento: mx.events.FlexEvent.CREATION_COMPLETE Este evento é despachado quando o componente termina sua construção, processamento de propriedade, medição, layout e desenho. Neste ponto, dependendo de sua propriedade visible, o componente não está visível, embora tenha sido desenhado. |
| 4 | applicationComplete: spark.components.Application.applicationComplete Tipo de evento: mx.events.FlexEvent.APPLICATION_COMPLETE Enviado após o aplicativo ser inicializado, processado pelo LayoutManager e anexado à lista de exibição. Este é o último evento do ciclo de vida de criação do aplicativo e significa que o aplicativo foi carregado completamente. |
Exemplo de ciclo de vida flexível
Vamos seguir as etapas para entender o ciclo de vida de teste de um aplicativo Flex criando um aplicativo de teste -
| Degrau | Descrição |
|---|---|
| 1 | Crie um projeto com um nome HelloWorld em uma packagecom. tutorialspoint.client conforme explicado no capítulo Flex - Criar aplicativo . |
| 2 | Modifique HelloWorld.mxml conforme explicado abaixo. Mantenha o resto dos arquivos inalterados. |
| 3 | Compile e execute o aplicativo para ter certeza de que a lógica de negócios está funcionando de acordo com os requisitos. |
A seguir está o conteúdo do arquivo mxml modificado src/com.tutorialspoint/HelloWorld.mxml.
<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s = "library://ns.adobe.com/flex/spark"
xmlns:mx = "library://ns.adobe.com/flex/mx"
width = "100%" height = "100%" minWidth = "500" minHeight = "500"
initialize = "reportEvent(event)"
preinitialize = "reportEvent(event)"
creationComplete = "reportEvent(event)"
applicationComplete = "reportEvent(event)">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
[Bindable]
private var report:String = "";
private function reportEvent(event:FlexEvent):void {
report += "\n" + (event.type + " event occured at: "
+ getTimer() + " ms" + "\n");
}
]]>
</fx:Script>
<s:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label textAlign = "center" width="100%" id = "lblHeader"
fontSize = "40" color = "0x777777" styleName = "heading"
text = "Life Cycle Events Demonstration" />
<s:TextArea id = "reportText" text = "{report}" editable = "false"
width = "300" height = "200">
</s:TextArea>
</s:VGroup>
</s:BorderContainer>
</s:Application>Quando você estiver pronto com todas as alterações feitas, vamos compilar e executar o aplicativo no modo normal como fizemos no capítulo Flex - Criar aplicativo . Se estiver tudo bem com sua aplicação, ele produzirá o seguinte resultado: [ Experimente online ]
O Flex suporta o uso de sintaxe e estilos CSS para aplicar aos seus controles de IU da mesma forma que CSS para componentes HTML.
Maneira nº 1: usando o arquivo de folha de estilo externo
Você pode consultar uma folha de estilo disponível no caminho de classe do aplicativo. Por exemplo, considere o arquivo Style.css emcom/tutorialspoint/client folder onde o arquivo HelloWorld.mxml também está.
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
...
.container {
cornerRadius :10;
horizontalCenter :0;
borderColor: #777777;
verticalCenter:0;
backgroundColor: #efefef;
}Então, o arquivo css pode ser consultado seguindo o trecho de código
<fx:Style source = "/com/tutorialspoint/client/Style.css" />Atribuir estilos ao componente UI usando a propriedade styleName
<s:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
...
</s:BorderContainer>Maneira nº 2: usando estilos dentro do componente Ui Container
Você pode definir estilos no componente de contêiner de IU usando a tag <fx: Style>
Seletor de nível de classe
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
/* class level selector */
.errorLabel {
color: red;
}
</fx:Style>Atribua estilos ao componente UI usando a propriedade styleName.
<s:Label id = "errorMsg" text = "This is an error message" styleName = "errorLabel" />Seletor de nível de id
Componente de UI de estilo usando o seletor de id.
<fx:Style>
/* id level selector */
#msgLabel {
color: gray;
}
</fx:Style>
<s:Label id = "msgLabel" text = "This is a normal message" />Seletor de nível de tipo
Defina o estilo de um tipo de componente de IU em um GO.
<fx:Style>
/* style applied on all buttons */
s|Button {
fontSize: 15;
color: #9933FF;
}
</fx:Style>
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" />Estilo Flex com Exemplo de CSS
Vamos seguir as etapas para verificar o estilo CSS de um aplicativo Flex criando um aplicativo de teste -
| Degrau | Descrição |
|---|---|
| 1 | Crie um projeto com um nome HelloWorld em um pacote com.tutorialspoint.client conforme explicado no capítulo Flex - Criar aplicativo . |
| 2 | Modifique Style.css, HelloWorld.mxml conforme explicado abaixo. Mantenha o resto dos arquivos inalterados. |
| 3 | Compile e execute o aplicativo para ter certeza de que a lógica de negócios está funcionando de acordo com os requisitos. |
A seguir está o conteúdo do arquivo CSS modificado src/com.tutorialspoint/Style.css.
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
.heading
{
fontFamily: Arial, Helvetica, sans-serif;
fontSize: 17px;
color: #9b1204;
textDecoration:none;
fontWeight:normal;
}
.button {
fontWeight: bold;
}
.container {
cornerRadius :10;
horizontalCenter :0;
borderColor: #777777;
verticalCenter:0;
backgroundColor: #efefef;
}A seguir está o conteúdo do arquivo mxml modificado src/com.tutorialspoint/HelloWorld.mxml.
<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s = "library://ns.adobe.com/flex/spark"
xmlns:mx = "library://ns.adobe.com/flex/mx"
width = "100%" height = "100%" minWidth = "500" minHeight = "500"
initialize = "application_initializeHandler(event)">
<!--Add reference to style sheet -->
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<!--Using styles within mxml file -->
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
/* class level selector */
.errorLabel {
color: red;
}
/* id level selector */
#msgLabel {
color: gray;
}
/* style applied on all buttons */
s|Button {
fontSize: 15;
color: #9933FF;
}
</fx:Style>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
protected function btnClickMe_clickHandler(event:MouseEvent):void {
Alert.show("Hello World!");
}
protected function application_initializeHandler(event:FlexEvent):void {
lblHeader.text = "CSS Demonstrating Application";
}
]]>
</fx:Script>
<s:BorderContainer width = "560" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label width = "100%" id = "lblHeader" fontSize = "40"
color = "0x777777" styleName = "heading" />
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" />
<s:Label id = "errorMsg"
text = "This is an error message" styleName = "errorLabel" />
<s:Label id = "msgLabel" text = "This is a normal message" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Quando você estiver pronto com todas as alterações feitas, vamos compilar e executar o aplicativo no modo normal como fizemos no capítulo Flex - Criar aplicativo . Se tudo estiver bem com sua aplicação, isso produzirá o seguinte resultado: [ Experimente online ]
O que é esfolar?
Skinning no Flex é um processo de personalização da aparência de um componente de interface do usuário completamente.
Um tema pode definir texto, imagem, filtros, transições e estados de um componente.
Um skin pode ser criado como um componente mxml ou ActionScript separado.
Usando a pele, podemos controlar todos os aspectos visuais de um componente de IU.
O processo de definição da aparência é o mesmo para todos os componentes da IU.
Etapa 1 - Criar um tema
Inicie o assistente Create MXML Skin usando a opção File > New > MXML Skin.
Insira o pacote como com.tutorialspoint.skin, nome como GradientBackgroundSkin e escolha o componente do host como controle existente do Flex BorderContainerspark.component.BorderContainer.
Agora você criou um skin para um BorderContainer. Modifique o conteúdo do arquivo de skin mxmlsrc/com.tutorialspoint/skin/GradientBackgroundSkin.mxml.
Atualize a camada de preenchimento da seguinte forma -
<!-- fill -->
<s:Rect id = "backgroundRect" left = "0" right = "0" height = "100%" top = "0">
<s:fill>
<s:LinearGradient rotation = "90">
<s:GradientEntry color = "0x888888" ratio = "0.2" />
<s:GradientEntry color = "0x111111" ratio = "1" />
</s:LinearGradient>
</s:fill>
</s:Rect>Etapa 2: aplique a pele
Você pode aplicar a pele sobre um componente de duas maneiras -
Aplicar skin no script MXML (estaticamente)
Aplique GradientBackgroundSkin para um BorderContainer com id mainContainer usando seu skinClass atributo.
<s:BorderContainer width = "560" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50"
horizontalAlign = "center" verticalAlign = "middle"
skinClass = "com.tutorialspoint.skin.GradientBackgroundSkin">Aplicar skin no ActionScript (dinamicamente)
Aplique GradientBackgroundSkin para um BorderContainer com id mainContainer usando seu skinClass propriedade.
protected function gradientBackground_clickHandler(event:MouseEvent):void {
mainContainer.setStyle("skinClass", GradientBackgroundSkin);
}Estilo Flex com Exemplo de Pele
Vamos seguir as etapas a seguir para ver o skinning em ação em um aplicativo Flex, criando um aplicativo de teste -
| Degrau | Descrição |
|---|---|
| 1 | Crie um projeto com um nome HelloWorld em um pacote com.tutorialspoint.client conforme explicado no capítulo Flex - Criar aplicativo . |
| 2 | Crie a skin GradientBackgroundSkin.mxml sob um pacote com.tutorialspoint.skin conforme explicado acima. Mantenha o resto dos arquivos inalterados. |
| 3 | Modifique HelloWorld.mxml conforme explicado abaixo. Mantenha o resto dos arquivos inalterados. |
| 4 | Compile e execute o aplicativo para ter certeza de que a lógica de negócios está funcionando de acordo com os requisitos. |
A seguir está o conteúdo do arquivo GradientBackgroundSkin.mxml src/com/tutorialspoint/skin/GradientBackg roundSkin.mxml.
<?xml version = "1.0" encoding = "utf-8"?>
<s:Skin xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s = "library://ns.adobe.com/flex/spark"
xmlns:mx = "library://ns.adobe.com/flex/mx">
<!-- host component -->
<fx:Metadata>
[HostComponent("spark.components.BorderContainer")]
</fx:Metadata>
<!-- states -->
<s:states>
<s:State name = "disabled" />
<s:State name = "disabled" />
<s:State name = "normal" />
</s:states>
<!-- SkinParts
name = contentGroup, type = spark.components.Group, required = false
-->
<!-- fill -->
<s:Rect id = "backgroundRect" left = "0" right = "0" height = "100%" top = "0">
<s:fill>
<s:LinearGradient rotation = "90">
<s:GradientEntry color = "0x111111" ratio = "0.2" />
<s:GradientEntry color = "0x888888" ratio = "1" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- must specify this for the host component -->
<s:Group id = "contentGroup" left = "0" right = "0" top = "0" bottom = "0" />
</s:Skin>A seguir está o conteúdo do HelloWorld.mxml modificado filesrc/com/tutorialspoint/client/HelloWorld.mxml.
<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s = "library://ns.adobe.com/flex/spark"
xmlns:mx = "library://ns.adobe.com/flex/mx"
width = "100%" height = "100%" minWidth = "500" minHeight = "500"
initialize = "application_initializeHandler(event)">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import com.tutorialspoint.skin.GradientBackgroundSkin;
import mx.controls.Alert;
import mx.events.FlexEvent;
import spark.skins.spark.BorderContainerSkin;
protected function btnClickMe_clickHandler(event:MouseEvent):void {
Alert.show("Hello World!");
}
protected function application_initializeHandler(event:FlexEvent):void {
lblHeader.text = "My Hello World Application";
}
protected function gradientBackground_clickHandler(event:MouseEvent):void {
mainContainer.setStyle("skinClass", GradientBackgroundSkin );
}
protected function standardBackground_clickHandler(event:MouseEvent):void {
mainContainer.setStyle("skinClass", BorderContainerSkin );
}
]]>
</fx:Script>
<fx:Declarations>
<s:RadioButtonGroup id = "selectorGroup" />
</fx:Declarations>
<s:BorderContainer width = "500" height = "500" id = "mainContainer"
skinClass = "spark.skins.spark.BorderContainerSkin"
horizontalCenter = "0" verticalCenter = "0" cornerRadius = "10">
<s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40" color = "green"
styleName = "heading" />
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" />
<s:RadioButton color = "gray" fontWeight = "bold"
group = "{selectorGroup}" label = "Standard Background"
click = "standardBackground_clickHandler(event)" selected = "true" />
<s:RadioButton color = "gray" fontWeight = "bold"
group = "{selectorGroup}" label = "Gradient Background"
click = "gradientBackground_clickHandler(event)" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Quando você estiver pronto com todas as alterações feitas, vamos compilar e executar o aplicativo no modo normal como fizemos no capítulo Flex - Criar aplicativo . Se estiver tudo bem com sua aplicação, ele produzirá o seguinte resultado: [ Experimente online ]
O que é vinculação de dados?
Data Binding é um processo no qual os dados de um objeto são vinculados a outro objeto. Requer uma propriedade de origem, uma propriedade de destino e um evento de disparo que indica quando copiar os dados da origem para o destino.
O Flex oferece três maneiras de vincular dados, conforme abaixo
- Sintaxe de colchetes no script MXML ({})
- tag <fx: binding> em MXML
- BindingUtils no ActionScript
Vinculação de dados - usando colchetes em MXML
O exemplo a seguir demonstra como usar chaves para especificar a vinculação de dados de uma origem ao destino.
<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2" text = "{txtInput1.text}" />Data Binding - Usando a tag <fx: Binding> em MXML
O exemplo a seguir demonstra como usar
<fx:Binding source = "txtInput1.text" destination = "txtInput2.text" />
<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2" />Data Binding - Usando BindingUtils no ActionScript
O exemplo a seguir demonstra como usar BindingUtils para especificar a vinculação de dados de uma origem ao destino.
<fx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
import mx.events.FlexEvent;
protected function txtInput2_preinitializeHandler(event:FlexEvent):void {
BindingUtils.bindProperty(txtInput2,"text",txtInput1, "text");
}
]]>
</fx:Script>
<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2"
preinitialize = "txtInput2_preinitializeHandler(event)" />Exemplo de Flex Data Binding
Vamos seguir as etapas abaixo para ver o skinning em ação em um aplicativo Flex criando um aplicativo de teste -
| Degrau | Descrição |
|---|---|
| 1 | Crie um projeto com um nome HelloWorld em um pacote com.tutorialspoint.client conforme explicado no capítulo Flex - Criar aplicativo . |
| 2 | Modifique HelloWorld.mxml conforme explicado abaixo. Mantenha o resto dos arquivos inalterados. |
| 3 | Compile e execute o aplicativo para ter certeza de que a lógica de negócios está funcionando de acordo com os requisitos. |
A seguir está o conteúdo do arquivo HelloWorld.mxml modificadosrc/com/tutorialspoint/client/HelloWorld.mxml.
<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s = "library://ns.adobe.com/flex/spark"
xmlns:mx = "library://ns.adobe.com/flex/mx
width = "100%" height = "100%" minWidth = "500" minHeight = "500">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
import mx.events.FlexEvent;
protected function txtInput6_preinitializeHandler(event:FlexEvent):void {
BindingUtils.bindProperty(txtInput6,"text",txtInput5, "text");
}
]]>
</fx:Script>
<fx:Binding source = "txtInput3.text" destination = "txtInput4.text" />
<s:BorderContainer width = "500" height = "550" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" text = "Data Binding Demonstration"
fontSize = "40" color = "0x777777" styleName = "heading" />
<s:Panel title = "Example #1 (Using Curly Braces,\{\})" width = "400"
height = "100" >
<s:layout>
<s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
</s:layout>
<s:HGroup >
<s:Label text = "Type here: " width = "100" paddingTop = "6" />
<s:TextInput id = "txtInput1" />
</s:HGroup>
<s:HGroup >
<s:Label text = "Copied text: " width = "100" paddingTop = "6" />
<s:TextInput id = "txtInput2" text = "{txtInput1.text}" />
</s:HGroup>
</s:Panel>
<s:Panel title = "Example #2 (Using <fx:Binding>)" width = "400"
height = "100" >
<s:layout>
<s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
</s:layout>
<s:HGroup >
<s:Label text = "Type here: " width = "100" paddingTop = "6" />
<s:TextInput id = "txtInput3" />
</s:HGroup>
<s:HGroup >
<s:Label text = "Copied text: " width = "100" paddingTop = "6" />
<s:Label id = "txtInput4" />
</s:HGroup>
</s:Panel>
<s:Panel title = "Example #3 (Using BindingUtils)" width = "400"
height = "100" >
<s:layout>
<s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
</s:layout>
<s:HGroup >
<s:Label text = "Type here: " width = "100" paddingTop = "6" />
<s:TextInput id = "txtInput5" />
</s:HGroup>
<s:HGroup >
<s:Label text = "Copied text: " width = "100" paddingTop = "6" />
<s:TextInput enabled = "false" id = "txtInput6"
preinitialize = "txtInput6_preinitializeHandler(event)" />
</s:HGroup>
</s:Panel>
</s:VGroup>
</s:BorderContainer>
</s:Application>Quando você estiver pronto com todas as alterações feitas, vamos compilar e executar o aplicativo no modo normal como fizemos no capítulo Flex - Criar aplicativo . Se estiver tudo bem com sua aplicação, ele produzirá o seguinte resultado: [ Experimente online ]
Cada interface de usuário considera os seguintes três aspectos principais -
UI Elements- Esses são os principais elementos visuais que o usuário eventualmente vê e com os quais interage. O Flex fornece uma lista enorme de elementos amplamente usados e comuns, variando do básico ao complexo, que abordaremos neste tutorial.
Layouts- Eles definem como os elementos da IU devem ser organizados na tela e fornecem uma aparência final para a GUI (Graphical User Interface). Esta parte será abordada no capítulo Layout.
Behavior- Esses eventos ocorrem quando o usuário interage com os elementos da IU. Esta parte será abordada no capítulo Tratamento de Eventos.
Elementos Flex UI
A biblioteca Flex UI fornece classes em uma hierarquia de classes bem definida para criar interfaces de usuário complexas baseadas na web. Todas as classes nesta hierarquia de componentes foram derivadas doEventDispatcher classe base conforme mostrado abaixo -
Cada controle de IU básico herda propriedades da classe de componente de IU que, por sua vez, herda propriedades de EventDispatcher e outras classes de nível superior.
| Sr. Não | Controle e descrição |
|---|---|
| 1 | Classe Flex EventDispatcher A classe EventDispatcher é a classe base para todas as classes que podem despachar eventos. A classe EventDispatcher permite que qualquer objeto na lista de exibição seja um destino de evento e, como tal, use os métodos da interface IEventDispatcher. |
| 2 | Flex UIComponent A classe UIComponent é a classe base para todos os componentes visuais, tanto interativos quanto não interativos. |
Controles básicos
A seguir estão alguns controles básicos importantes -
| Sr. Não | Controles e descrição |
|---|---|
| 1 | Rótulo Label é um UIComponent de baixo nível que pode renderizar uma ou mais linhas de texto uniformemente formatado. |
| 2 | Texto O controle de texto permite exibir conteúdo HTML, bem como texto normal em seu aplicativo. |
| 3 | Imagem O controle de imagem permite importar arquivos JPEG, PNG, GIF e SWF em tempo de execução. |
| 4 | LinkButton O controle LinkButton é um controle Button sem borda cujo conteúdo é realçado quando um usuário move o mouse sobre ele. |
Os controles de formulário permitem que os usuários insiram dados e fornece capacidade de interação com o aplicativo. Cada Form UI controla e herda propriedades da classe UIComponent que por sua vez herda propriedades de EventDispatcher e outras classes de nível superior.
| Sr. Não | Controle e descrição |
|---|---|
| 1 | Classe Flex EventDispatcher A classe EventDispatcher é a classe base para todas as classes que podem despachar eventos. A classe EventDispatcher permite que qualquer objeto na lista de exibição seja um destino de evento e, como tal, use os métodos da interface IEventDispatcher. |
| 2 | Flex UIComponent A classe UIComponent é a classe base para todos os componentes visuais, tanto interativos quanto não interativos. |
Controles de formulário
A seguir estão alguns controles de formulário importantes -
| Sr. Não | Controle e descrição |
|---|---|
| 1 | Botão O componente Botão é um botão retangular comumente usado. |
| 2 | ToggleButton O componente ToggleButton define um botão de alternância. |
| 3 | CheckBox O componente CheckBox consiste em um rótulo opcional e uma pequena caixa que pode conter uma marca de seleção ou não. |
| 4 | ColorPicker O controle ColorPicker fornece uma maneira para o usuário escolher uma cor em uma lista de amostras. |
| 5 | Caixa combo O controle ComboBox é uma classe filha do controle DropDownListBase. |
| 6 | DateChooser O controle DateChooser exibe o nome de um mês, o ano e uma grade dos dias do mês, com colunas rotuladas para o dia da semana. |
| 7 | Botao de radio O componente RadioButton permite que o usuário faça uma única escolha dentro de um conjunto de opções mutuamente exclusivas. |
| 8 | TextArea TextArea é um controle de entrada de texto que permite aos usuários inserir e editar várias linhas de texto formatado. |
| 9 | TextInput TextInput é um controle de entrada de texto que permite aos usuários inserir e editar uma única linha de texto formatado uniformemente. |
| 10 | DropDownList O controle DropDownList contém uma lista suspensa da qual o usuário pode selecionar um único valor. |
| 11 | NumericStepper O controle NumericStepper permite selecionar um número de um conjunto ordenado. |
Controles complexos fornecem aos usuários recursos avançados para lidar com uma grande quantidade de dados de uma maneira mais fácil e fornecem capacidade de interação com o aplicativo. Cada controle de UI complexo herda propriedades da classe UIComponent que por sua vez herda propriedades de EventDispatcher e outras classes de nível superior.
| Sr. Não | Controle e descrição |
|---|---|
| 1 | Classe Flex EventDispatcher A classe EventDispatcher é a classe base para todas as classes que podem despachar eventos. A classe EventDispatcher permite que qualquer objeto na lista de exibição seja um destino de evento e, como tal, use os métodos da interface IEventDispatcher. |
| 2 | Flex UIComponent A classe UIComponent é a classe base para todos os componentes visuais, tanto interativos quanto não interativos. |
Controles Complexos
A seguir estão alguns controles complexos importantes -
| Sr. Não | Controle e descrição |
|---|---|
| 1 | Grade de dados O controle DataGrid exibe uma linha de cabeçalhos de coluna acima de uma grade rolável. |
| 2 | AdvancedDataGrid O AdvancedDataGrid adiciona algumas funcionalidades adicionais ao controle DataGrid padrão para adicionar recursos de visualização de dados. |
| 3 | Cardápio O controle Menu cria um menu pop-up de opções selecionáveis individualmente. |
| 4 | Barra de progresso O controle ProgressBar fornece uma representação visual do progresso de uma tarefa ao longo do tempo. |
| 5 | RichTextEditor O controle RichTextEditor permite aos usuários inserir e formatar texto. |
| 6 | TileList O controle TileList O controle TileList exibe vários itens dispostos em blocos. |
| 7 | Árvore O controle Tree permite que um usuário visualize dados hierárquicos organizados como uma árvore expansível. |
| 8 | VideoPlayer O controle VideoPlayer é um reprodutor de vídeo com skin que oferece suporte para download progressivo, streaming multibit e streaming de vídeo. |
| 9 | Accordian Um controle Accordian tem uma coleção de contêineres MX filhos ou contêineres Spark NavigatorContent, mas apenas um deles por vez é visível. |
| 10 | TabNavigator O controle TabNavigator inclui um contêiner TabBar para navegar entre seus contêineres filhos. |
| 11 | ToggleButtonBar O controle ToggleButtonBar define um grupo horizontal ou vertical de botões que mantêm seu estado selecionado ou não selecionado. |
Os controles do painel de layout permitem que os usuários organizem os controles da IU na página. Cada controle Layout herda propriedades da classe UIComponent que por sua vez herda propriedades de EventDispatcher e outras classes de nível superior.
| Sr. Não | Controle e descrição |
|---|---|
| 1 | Classe Flex EventDispatcher A classe EventDispatcher é a classe base para todas as classes que podem despachar eventos. A classe EventDispatcher permite que qualquer objeto na lista de exibição seja um destino de evento e, como tal, use os métodos da interface IEventDispatcher. |
| 2 | Flex UIComponent A classe UIComponent é a classe base para todos os componentes visuais, tanto interativos quanto não interativos. |
Painéis de layout
A seguir estão alguns painéis de layout importantes -
| Sr. Não | Painel e descrição |
|---|---|
| 1 | BorderContainer A classe BorderContainer fornece um conjunto de estilos CSS que controlam a aparência da borda e o preenchimento do plano de fundo do contêiner. |
| 2 | Formato O contêiner Form fornece controle sobre o layout de um formulário, marca os campos do formulário como obrigatórios ou opcionais, lida com mensagens de erro e vincula os dados do formulário ao modelo de dados Flex para realizar a verificação e validação dos dados. |
| 3 | VGroup O contêiner VGroup é um contêiner Group que usa a classe VerticalLayout. |
| 4 | HGroup O contêiner HGroup é um contêiner Group que usa a classe HorizontalLayout. |
| 5 | Painel A classe Panel é um contêiner que inclui uma barra de título, uma legenda, uma borda e uma área de conteúdo para seus filhos. |
| 6 | SkinnableContainer A classe SkinnableContainer é a classe base para contêineres que podem ser modificados e que fornecem conteúdo visual. |
| 7 | Barra de abas O TabBar exibe um conjunto de guias idênticas. |
| 8 | TitleWindow O TitleWindow estende o Panel para incluir um botão Fechar e mover uma área. |
Podemos adicionar comportamento ao aplicativo flexível usando o conceito de efeitos. Por exemplo, quando uma caixa de texto recebe o foco, podemos fazer seu texto ficar mais em negrito e aumentar seu tamanho ligeiramente.
Cada efeito herda propriedades da classe Effect que, por sua vez, herda propriedades de EventDispatcher e outras classes de nível superior.
| Sr. Não | Efeito e descrição |
|---|---|
| 1 | Classe de efeitos flex A classe Effect é uma classe base abstrata que define a funcionalidade básica de todos os efeitos Flex. Esta classe define a classe de fábrica básica para todos os efeitos. |
Efeitos básicos
A seguir estão alguns efeitos visuais básicos importantes -
| Sr. Não | Efeito e descrição |
|---|---|
| 1 | Desvaneça O efeito Esmaecer anima a propriedade alfa de um componente. |
| 2 | WipeLeft A classe WipeLeft define um efeito de limpeza à esquerda. |
| 3 | WipeRight A classe WipeRight define um efeito de apagamento correto. |
| 4 | Move3D A classe Move3D move um objeto de destino nas dimensões x, y e z. |
| 5 | Scale3D A classe Scale3D dimensiona um objeto de destino em três dimensões em torno do centro de transformação. |
| 6 | Rotate3D A classe Rotate3D gira um objeto de destino em três dimensões em torno dos eixos x, y ou z. |
| 7 | Animar Este efeito Animate anima um conjunto arbitrário de propriedades entre valores. Especifique as propriedades e valores a serem animados definindo a propriedade motionPaths. |
O Flex usa o conceito de evento para passar dados de um objeto para outro, dependendo do estado ou da interação do usuário dentro do aplicativo.
ActionScript tem um genérico Eventclasse que define muitas das funcionalidades necessárias para trabalhar com eventos. Cada vez que um evento ocorre dentro de um aplicativo Flex, três tipos de objetos da hierarquia da classe Event são criados.
O evento tem as seguintes três propriedades principais
| Sr. Não | Descrição da Propriedade |
|---|---|
| 1 | Type o typeafirma sobre que tipo de evento acabou de acontecer. Isso pode ser clicar, inicializar, passar o mouse, alterar, etc. Os valores reais serão representados por constantes como MouseEvent.CLICK. |
| 2 | Target o target propriedade de Event é uma referência de objeto para o componente que gerou o evento. Se você clicar em um botão com um id de clickMeButton, o destino desse evento de clique será clickMeButton |
| 3 | CurrentTarget o currentTargetpropriedade varia a hierarquia do contêiner. Trata principalmente do fluxo de eventos. |
Fases do Fluxo de Eventos
Um evento passa por três fases à procura de manipuladores de eventos.
| Sr. Não | Fase e descrição |
|---|---|
| 1 | Capture Na fase de captura, o programa começará a procurar manipuladores de eventos do pai externo (ou superior) para o mais interno. A fase de captura para no pai do objeto que disparou o evento. |
| 2 | Target Na fase de destino, o componente que disparou o evento é verificado para um manipulador de eventos. |
| 3 | Bubble A fase de bolha é reversa da fase de captura, retrocedendo através da estrutura, desde o pai do componente alvo em diante. |
Considere o seguinte código de aplicativo -
<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s = "library://ns.adobe.com/flex/spark"
xmlns:mx = "library://ns.adobe.com/flex/mx
width = "100%" height = "100%" minWidth = "500" minHeight = "500" >
<s:Panel>
<s:Button id = "clickMeButton" label = "Click Me!" click = "doAction( );" />
</s:Panel>
</s:Application>Quando o usuário clica no Botão, ele também clica no Painel e no Aplicativo.
O evento passa por três fases procurando atribuições de manipulador de eventos.
Vamos seguir as etapas abaixo para testar a entrega de eventos em um aplicativo Flex -
| Degrau | Descrição |
|---|---|
| 1 | Crie um projeto com um nome HelloWorld em um pacote com.tutorialspoint.client conforme explicado no capítulo Flex - Criar aplicativo . |
| 2 | Modifique HelloWorld.mxml conforme explicado abaixo. Mantenha o resto dos arquivos inalterados. |
| 3 | Compile e execute o aplicativo para ter certeza de que a lógica de negócios está funcionando de acordo com os requisitos. |
A seguir está o conteúdo do arquivo mxml modificado src/com.tutorialspoint/HelloWorld.mxml.
<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s = "library://ns.adobe.com/flex/spark"
xmlns:mx = "library://ns.adobe.com/flex/mx
width = "100%" height = "100%" minWidth = "500" minHeight = "500">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
protected function reportEvent(event:MouseEvent):void {
var target:String = event.target.id;
var currentTarget:String = event.target.id;
var eventPhase: String;
if(event.target is Button) {
var button:Button = event.target as Button;
target = button.label + " Button";
} else if(event.target is HGroup) {
var hGroup:HGroup = event.target as HGroup;
target = hGroup.id + " HGroup";
} else if(event.target is Panel) {
var panel:Panel = event.target as Panel;
target = panel.id + " Panel";
}
if(event.currentTarget is Button) {
var button1:Button = event.currentTarget as Button;
currentTarget = button1.label + " Button";
} else if(event.currentTarget is HGroup) {
var hGroup1:HGroup = event.currentTarget as HGroup;
currentTarget = hGroup1.id + " HGroup";
} else if(event.currentTarget is Panel) {
var panel1:Panel = event.currentTarget as Panel;
currentTarget = panel1.id + " Panel";
}
var eventPhaseInt:uint = event.eventPhase;
if(eventPhaseInt == EventPhase.AT_TARGET) {
eventPhase = "Target";
} else if(eventPhaseInt == EventPhase.BUBBLING_PHASE) {
eventPhase = "Bubbling";
} else if(eventPhaseInt == EventPhase.CAPTURING_PHASE) {
eventPhase = "Capturing";
}
reports.text += " Target: " + target + "\n currentTarget: " +
currentTarget + "\n Phase: " + eventPhase + "\n----------\n";
}
]]>
</fx:Script>
<s:BorderContainer width = "630" height = "480" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "10"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label id = "lblHeader" text = "Event Handling Demonstration"
fontSize = "40" color = "0x777777" styleName = "heading" />
<s:Panel id = "parentPanel" title = "Main Parent"
click = "reportEvent(event)" width = "500"
height = "100" includeInLayout = "true" visible = "true">
<s:layout>
<s:VerticalLayout gap = "10" verticalAlign = "middle"
horizontalAlign = "center" />
</s:layout>
<s:HGroup id = "mainHGroup" click = "reportEvent(event)">
<s:Button label = "Click Me" click = "reportEvent(event)" />
</s:HGroup>
</s:Panel>
<s:Panel id = "reportPanel" title = "Events" width = "500" height = "230">
<mx:Text id = "reports" />
</s:Panel>
</s:VGroup>
</s:BorderContainer>
</s:Application>Quando você estiver pronto com todas as alterações feitas, vamos compilar e executar o aplicativo no modo normal como fizemos no capítulo Flex - Criar aplicativo . Se estiver tudo bem com sua aplicação, ele produzirá o seguinte resultado: [ Experimente online ]
O Flex oferece duas maneiras de criar componentes personalizados.
- Usando ActionScript
- Usando MXML
Usando ActionScript
Você pode criar um componente estendendo o componente existente. Para criar um componente usando o Flash Builder, clique emFile > New > ActionScript Class.
Insira os detalhes conforme mostrado abaixo -
O Flash Builder criará o seguinte arquivo CustomButton.as.
package com.tutorialspoint.client {
import spark.components.Button;
public class CustomButton extends Button {
public function CustomButton() {
super();
}
}
}Usando MXML
Você pode criar um componente estendendo o componente existente. Para criar um componente usando o Flash Builder, clique emFile > New > MXML Component.
Insira os detalhes conforme mostrado abaixo.
O Flash Builder criará o seguinte arquivo CustomLogin.mxml.
<?xml version = "1.0" encoding = "utf-8"?>
<s:Group xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s = "library://ns.adobe.com/flex/spark"
xmlns:mx = "library://ns.adobe.com/flex/mx"
width = "400" height = "300">
</s:Group>Vamos seguir as seguintes etapas para testar os controles personalizados em um aplicativo Flex -
| Degrau | Descrição |
|---|---|
| 1 | Crie um projeto com um nome HelloWorld em um pacote com.tutorialspoint.client conforme explicado no capítulo Flex - Criar aplicativo . |
| 2 | Modifique HelloWorld.mxml conforme explicado abaixo. Mantenha o resto dos arquivos inalterados. |
| 3 | Crie os componentes CustomLogin.mxml e CustomButton.as conforme explicado acima. Modifique esses arquivos conforme explicado abaixo. Mantenha o resto dos arquivos inalterados. |
| 4 | Compile e execute o aplicativo para ter certeza de que a lógica de negócios está funcionando de acordo com os requisitos. |
A seguir está o conteúdo do arquivo mxml modificado src/com.tutorialspoint/client/CustomLogin.mxml.
<?xml version = "1.0" encoding = "utf-8"?>
<s:Group xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s = "library://ns.adobe.com/flex/spark"
xmlns:mx = "library://ns.adobe.com/flex/mx" width = "400" height = "300">
<s:Form>
<s:FormItem label = "UserName:">
<s:TextInput width = "200" />
</s:FormItem>
<s:FormItem label = "Password:">
<s:TextInput width = "200" displayAsPassword = "true" />
</s:FormItem>
<s:FormItem>
<s:Button label = "Login" />
</s:FormItem>
</s:Form>
</s:Group>A seguir está o conteúdo do arquivo mxml modificado src/com.tutorialspoint/client/CustomButton.as.
package com.tutorialspoint.client {
import spark.components.Button;
public class CustomButton extends Button {
public function CustomButton() {
super();
this.setStyle("color","green");
this.label = "Submit";
}
}
}A seguir está o conteúdo do arquivo mxml modificado src/com.tutorialspoint/client/HelloWorld.mxml.
<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s = "library://ns.adobe.com/flex/spark"
xmlns:mx = "library://ns.adobe.com/flex/mx"
xmlns:client = "com.tutorialspoint.client.*"
initialize = "application_initializeHandler(event)">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function application_initializeHandler(event:FlexEvent):void {
//create a new custom button
var customButton: CustomButton = new CustomButton();
asPanel.addElement(customButton);
}
]]>
</fx:Script>
<s:BorderContainer width = "630" height = "480" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "10"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label id = "lblHeader" text = "Custom Controls Demonstration"
fontSize = "40" color = "0x777777" styleName = "heading" />
<s:Panel title = "Using MXML Component" width = "400" height = "200">
<client:CustomLogin>
</client:CustomLogin>
</s:Panel>
<s:Panel title = "Using AS Component" width = "400" height = "100">
<s:VGroup id = "asPanel" width = "100%" height = "100%" gap = "10"
horizontalAlign = "center" verticalAlign = "middle">
</s:VGroup>
</s:Panel>
</s:VGroup>
</s:BorderContainer>
</s:Application>Quando você estiver pronto com todas as alterações feitas, vamos compilar e executar o aplicativo no modo normal como fizemos no capítulo Flex - Criar aplicativo . Se estiver tudo bem com sua aplicação, ele produzirá o seguinte resultado: [ Experimente online ]
Flex fornece serviços RPC para fornecer dados do lado do servidor para o lado do cliente. O Flex fornece uma boa quantidade de controle sobre os dados do lado do servidor.
Usando serviços Flex RPC, podemos definir ações do usuário a serem executadas no lado do servidor.
Os serviços Flex RPC podem ser integrados com qualquer tecnologia do lado do servidor.
Um dos Flex RPC Service fornece suporte embutido para dados binários compactados a serem transferidos pela rede e é muito rápido.
Flex fornece os seguintes três tipos de serviços RPC
| Sr. Não | Serviço RPC e descrição |
|---|---|
| 1 | HttpService A tag <mx: HTTPService> é usada para representar um objeto HTTPService em um arquivo MXML. Quando você faz uma chamada para o método send () do objeto HTTPService, ele faz uma solicitação HTTP para o URL especificado e uma resposta HTTP é retornada. Você também pode usar os métodos HTTP HEAD, OPTIONS, TRACE e DELETE. |
| 2 | WebService O <mx: WebService> é usado para obter acesso às operações de serviços da web compatíveis com SOAP. |
| 3 | RemoteObject A tag <mx: RemoteObject> é usada para representar um objeto HTTPService em um arquivo MXML. Essa tag fornece acesso aos métodos de objetos Java usando a codificação Action Message Format (AMF). |
Vamos discutir o Serviço HTTP em detalhes. Usaremos um arquivo de origem XML colocado no servidor e acessá-lo no lado do cliente através do serviço HTTP.
Items.xml
<items>
<item name = "Book" description = "History of France"></item>
<item name = "Pen" description = "Parker Pen"></item>
<item name = "Pencil" description = "Stationary"></item>
<items>Declaração HTTPService
Agora declare um HTTPService e passe-o url do arquivo acima
<fx:Declarations>
<mx:HTTPService id = "itemRequest"
url = "http://www.tutorialspoint.com/flex/Items.xml" />
</fx:Declarations>Chamada RPC
Faça uma chamada para o método itemRequest.send () e vincule os valores do objeto lastResult do serviço da web itemRequest ao componente IU do Flex.
...
itemRequest.send();
...
<mx:DataGrid id = "dgItems" height = "80%" width = "75%"
dataProvider = "{itemRequest.lastResult.items.item}">
<mx:columns>
<mx:DataGridColumn headerText = "Name" dataField = "name" />
<mx:DataGridColumn headerText = "Description" dataField = "description" />
</mx:columns>
</mx:DataGrid>Exemplo de chamada de serviço RPC
Agora, vamos seguir as etapas para testar os serviços RPC em um aplicativo Flex -
| Degrau | Descrição |
|---|---|
| 1 | Crie um projeto com um nome HelloWorld em um pacote com.tutorialspoint.client conforme explicado no capítulo Flex - Criar aplicativo . |
| 2 | Modifique HelloWorld.mxml conforme explicado abaixo. Mantenha o resto dos arquivos inalterados. |
| 3 | Compile e execute o aplicativo para ter certeza de que a lógica de negócios está funcionando de acordo com os requisitos. |
A seguir está o conteúdo do arquivo mxml modificado src/com.tutorialspoint/HelloWorld.mxml.
<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s = "library://ns.adobe.com/flex/spark"
xmlns:mx = "library://ns.adobe.com/flex/mx"
minWidth = "500" minHeight = "500" creationComplete = "init(event)">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
protected function init(event:FlexEvent):void {
itemRequest.send();
}
]]>
</fx:Script>
<fx:Declarations>
<mx:HTTPService id = "itemRequest"
url = "http://www.tutorialspoint.com/flex/Items.xml" />
</fx:Declarations>
<s:BorderContainer width = "630" height = "480" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "10"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label id = "lblHeader" text = "RPC Service Demonstration"
fontSize = "40" color = "0x777777" styleName = "heading" />
<s:Panel id = "parentPanel" title = "Using RPC Services"
width = "500" height = "200" >
<s:layout>
<s:VerticalLayout gap = "10"
verticalAlign = "middle" horizontalAlign = "center" />
</s:layout>
<mx:DataGrid id = "dgItems" height = "80%" width = "75%"
dataProvider = "{itemRequest.lastResult.items.item}">
<mx:columns>
<mx:DataGridColumn headerText = "Name" dataField = "name" />
<mx:DataGridColumn headerText = "Description"
dataField = "description" />
</mx:columns>
</mx:DataGrid>
</s:Panel>
</s:VGroup>
</s:BorderContainer>
</s:Application>Quando você estiver pronto com todas as alterações feitas, vamos compilar e executar o aplicativo no modo normal como fizemos no capítulo Flex - Criar aplicativo . Se estiver tudo bem com sua aplicação, ele produzirá o seguinte resultado: [ Experimente online ]
O Flash Builder 4 tem um excelente suporte embutido para integração FlexUnit no ciclo de desenvolvimento Flex.
Criar uma classe de caso de teste
Você pode criar uma classe de caso de teste usando o assistente Criar classe de teste do Flash Builder. Executar casos de teste é muito fácil com o Flash Builder, como você verá neste artigo.
Para criar uma classe de caso de teste usando o Flash Builder, clique em File > New > Test Case Class. Insira os detalhes conforme mostrado abaixo.
O Flash Builder criará o seguinte TestClass1.as um arquivo.
package com.tutorialspoint.client {
public class TestClass1 {
[Before]
public function setUp():void {}
[After]
public function tearDown():void {}
[BeforeClass]
public static function setUpBeforeClass():void {}
[AfterClass]
public static function tearDownAfterClass():void {}
}
}Exemplo de integração FlexUnit
Agora, vamos seguir as etapas para testar a integração FlexUnit em um aplicativo Flex -
| Degrau | Descrição |
|---|---|
| 1 | Crie um projeto com um nome HelloWorld em um pacote com.tutorialspoint.client conforme explicado no capítulo Flex - Criar aplicativo . |
| 2 | Modifique HelloWorld.mxml conforme explicado abaixo. Mantenha o resto dos arquivos inalterados. |
| 3 | Crie o caso de teste TestClass1.as conforme descrito acima e Modifique TestClass1.as conforme explicado abaixo. |
| 4 | Compile e execute o aplicativo para ter certeza de que a lógica de negócios está funcionando de acordo com os requisitos. |
A seguir está o conteúdo do arquivo modificado como src/com.tutorialspoint/client/TestClass1.as.
package com.tutorialspoint.client {
import org.flexunit.asserts.assertEquals;
public class TestClass1 {
private var counter: int = 1;
[Before]
public function setUp():void {
//this code will run before every test case execution
}
[After]
public function tearDown():void {
//this code will run after every test case execution
}
[BeforeClass]
public static function setUpBeforeClass():void {
//this code will run once when test cases start execution
}
[AfterClass]
public static function tearDownAfterClass():void {
//this code will run once when test cases ends execution
}
[Test]
public function testCounter():void {
assertEquals(counter, 1);
}
}
}A seguir está o conteúdo do arquivo mxml modificado src/com.tutorialspoint/HelloWorld.mxml.
<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s = "library://ns.adobe.com/flex/spark"
xmlns:mx = "library://ns.adobe.com/flex/mx"
minWidth = "500" minHeight = "500">
</s:Application>Assim que estiver pronto com todas as alterações feitas, vamos compilar no modo normal como fizemos no capítulo Flex - Criar aplicativo .
Execução de casos de teste
Agora clique com o botão direito em TestClass1 no explorador de pacotes e selecione Run As > FlexUnit Tests. Você verá a seguinte saída na janela de teste do Flash Builder.
O Flash Builder também mostra os resultados do teste no navegador.
O Flex oferece excelente capacidade de depuração de código flexível e o Flash Builder 4 possui um excelente depurador integrado e suporte à perspectiva de depuração.
Durante o modo de depuração, o Flex Application é executado na versão Flash Player Debugger integrada no Flash Builder 4, que oferece suporte ao recurso de depuração.
Assim, os desenvolvedores obtêm uma configuração de depuração fácil e integrada no Flash Builder
Neste artigo, demonstraremos o uso da depuração de código do Flex Client usando o Flash Builder. Faremos as seguintes tarefas
- Defina pontos de interrupção no código e veja-os no Breakpoint Explorer.
- Percorra o código linha por linha durante a depuração.
- Veja os valores da variável.
- Inspecione os valores de todas as variáveis.
- Inspecione o valor de uma expressão.
- Exibe o quadro de pilha para threads suspensos.
Exemplo de depuração
| Degrau | Descrição |
|---|---|
| 1 | Crie um projeto com um nome HelloWorld em um pacote com.tutorialspoint.client conforme explicado no capítulo Flex - Criar aplicativo . |
| 2 | Modifique HelloWorld.mxml conforme explicado abaixo. Mantenha o resto dos arquivos inalterados. |
| 3 | Compile e execute o aplicativo para ter certeza de que a lógica de negócios está funcionando de acordo com os requisitos. |
A seguir está o conteúdo do arquivo mxml modificado src/com.tutorialspoint/HelloWorld.mxml.
<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s = "library://ns.adobe.com/flex/spark"
xmlns:mx = "library://ns.adobe.com/flex/mx"
width = "100%" height = "100%"
minWidth = "500" minHeight = "500"
initialize = "application_initializeHandler(event)">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
protected function btnClickMe_clickHandler(event:MouseEvent):void {
Alert.show("Hello World!");
}
protected function application_initializeHandler(event:FlexEvent):void {
lblHeader.text = "My Hello World Application";
}
]]>
</fx:Script>
<s:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40" color = "0x777777"
styleName = "heading" />
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" styleName = "button" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Assim que estiver pronto com todas as alterações feitas, vamos compilar no modo normal como fizemos no capítulo Flex - Criar aplicativo .
Etapa 1 - Coloque pontos de interrupção
Coloque um ponto de interrupção na primeira linha do manipulador de inicialização do aplicativo de HelloWorld.mxml
Etapa 2 - Depurar aplicativo
Agora clique no
Se tudo estiver bem, o aplicativo será iniciado no navegador e você verá os seguintes logs de depuração no console do Flash Builder.
[SWF] \HelloWorld\bin-debug\HelloWorld.swf
- 181,509 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\1
- 763,122 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\2
- 1,221,837 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\3
- 1,136,788 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\4
- 2,019,570 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\5
- 318,334 bytes after decompressionAssim que o aplicativo for iniciado, você verá o foco no ponto de interrupção do Flash Builder, pois colocamos o ponto de interrupção na primeira linha do método application_initialize Handler.
Você pode ver o rastreamento de pilha para threads suspensos.
Você pode ver os valores das expressões.
Você pode ver a lista de pontos de interrupção colocados.
Agora continue pressionando F6 até chegar à última linha do método application_initializeHandler (). Como referência para as teclas de função, F6 inspeciona o código linha por linha, F5 dá um passo adiante e F8 retoma o aplicativo. Agora você pode ver a lista de valores de todas as variáveis do método application_initializeHandler ().
Agora você pode ver que o código flexível pode ser depurado da mesma forma que um aplicativo Java pode ser depurado. Coloque pontos de interrupção em qualquer linha e brinque com os recursos de depuração do flex.
O Flex fornece duas maneiras de internacionalizar um aplicativo Flex. Demonstraremos o uso de Internacionalização de tempo de compilação sendo mais comumente usado entre projetos.
| Sr. Não | Técnica e Descrição |
|---|---|
| 1 | Compile Time Internationalization Essa técnica é mais prevalente e requer muito pouca sobrecarga em tempo de execução; é uma técnica muito eficiente para traduzir strings constantes e parametrizadas; mais simples de implementar. A internacionalização do Compile Time usa arquivos de propriedades padrão para armazenar strings traduzidas e mensagens parametrizadas, e esses arquivos de propriedades são compilados diretamente no aplicativo. |
| 2 | Run Time Internationalization Essa técnica é muito flexível, mas mais lenta do que a internacionalização de strings estáticas. Você precisa compilar os arquivos de propriedades de localização separadamente, deixá-los externos ao aplicativo e carregá-los em tempo de execução. |
Fluxo de trabalho de internacionalização de um aplicativo Flex
Etapa 1 - Criar estrutura de pastas
Crie uma pasta de localidade na pasta src do projeto Flex. Este será o diretório pai para todos os arquivos de propriedades para as localidades que o aplicativo suportará. Dentro da pasta locale, crie subpastas, uma para cada localidade do aplicativo a ser suportada. A convenção para nomear uma localidade é
{language}_{country code}Por exemplo, en_US representa o inglês dos Estados Unidos. O local de_DE representa o alemão. O aplicativo de amostra oferecerá suporte a dois idiomas comuns: inglês e alemão.
Etapa 2 - Criar arquivos de propriedades
Crie o arquivo de propriedades contendo as mensagens a serem utilizadas no aplicativo. Nós criamos umHelloWorldMessages.properties arquivo sob src > locale > en_US pasta em nosso exemplo.
enterName = Enter your name
clickMe = Click Me
applicationTitle = Application Internationalization Demonstration
greeting = Hello {0}Crie arquivos de propriedades contendo valores traduzidos específicos para o local. Nós criamos umHelloWorldMessages.properties arquivo sob src > locale > de_DEpasta em nosso exemplo. Este arquivo contém traduções em alemão. _de especifica a localidade do alemão e vamos oferecer suporte ao idioma alemão em nosso aplicativo.
Se você estiver criando um arquivo de propriedades usando o Flash Builder, altere a codificação do arquivo para UTF-8. Selecione o arquivo e clique com o botão direito nele para abrir sua janela de propriedades. Selecione Codificação do arquivo de texto como Other UTF-8. Aplique e salve a alteração.
enterName = Geben Sie Ihren Namen
clickMe = Klick mich
applicationTitle = Anwendung Internationalisierung Demonstration
greeting = Hallo {0}Etapa 3 - Especificar opções do compilador
Clique com o botão direito em seu projeto e selecione Propriedades.
Selecione Flex Compiler e adicione o seguinte às configurações de Argumentos Adicionais do Compilador -
-locale en_US de_DEClique com o botão direito em seu projeto e selecione Propriedades.
Selecione Flex Build Path e adicione o seguinte às configurações de Source Path -
src\locale\{locale}Exemplo de Internalização
Agora, vamos seguir as seguintes etapas para testar a técnica de internalização em um aplicativo Flex -
| Degrau | Descrição |
|---|---|
| 1 | Crie um projeto com um nome HelloWorld em um pacote com.tutorialspoint.client conforme explicado no capítulo Flex - Criar aplicativo . |
| 2 | Modifique HelloWorld.mxml conforme explicado abaixo. Mantenha o resto dos arquivos inalterados. |
| 3 | Compile e execute o aplicativo para ter certeza de que a lógica de negócios está funcionando de acordo com os requisitos. |
A seguir está o conteúdo do arquivo mxml modificado src/com.tutorialspoint/HelloWorld.mxml.
<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s = "library://ns.adobe.com/flex/spark"
xmlns:mx = "library://ns.adobe.com/flex/mx"
minWidth = "500" minHeight = "500">
<fx:Metadata>
[ResourceBundle("HelloWorldMessages")]
</fx:Metadata>
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.controls.Alert;
[Bindable]
private var locales:Array = [{label:"English", locale:"en_US"},
{label:"German", locale:"de_DE"}];
private function comboChangeHandler():void {
resourceManager.localeChain = [localeComboBox.selectedItem.locale];
}
protected function clickMe_clickHandler(event:MouseEvent):void {
var name:String = txtName.text;
var inputArray:Array = new Array();
inputArray.push(name);
Alert.show(resourceManager.getString('HelloWorldMessages'
,'greeting',inputArray));
}
]]>
</fx:Script>
<s:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40"
color = "0x777777"
text = "{resourceManager.getString('HelloWorldMessages','applicationTitle')}"
styleName = "heading" width = "90%" height = "150" />
<s:Panel width = "300" height = "150">
<s:layout>
<s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
</s:layout>
<s:HGroup >
<s:Label text = "{resourceManager.getString('HelloWorldMessages','enterName')}"
paddingTop = "2" />
<s:TextInput id = "txtName" />
</s:HGroup>
<s:Button
label = "{resourceManager.getString('HelloWorldMessages','clickMe')}"
click = "clickMe_clickHandler(event)" right = "10" />
</s:Panel>
<mx:ComboBox id = "localeComboBox" dataProvider = "{locales}"
change = "comboChangeHandler()" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Quando você estiver pronto com todas as alterações feitas, vamos compilar e executar o aplicativo no modo normal como fizemos no capítulo Flex - Criar aplicativo . Se estiver tudo bem com sua aplicação, ele produzirá o seguinte resultado: [ Experimente online ]
Altere o idioma usando o menu suspenso e veja o resultado.
Flex oferece uma aula especial FlexPrintJob para imprimir objetos flex.
FlexPrintJob pode ser usado para imprimir um ou mais objetos Flex, como um formulário ou container VBox.
FlexPrintJob imprime o objeto e todos os objetos que ele contém.
Os objetos podem ser toda ou parte da interface exibida.
Os objetos podem ser componentes que formatam dados especificamente para impressão.
A classe FlexPrintJob permite dimensionar a saída para caber na página.
A classe FlexPrintJob usa automaticamente várias páginas para imprimir um objeto que não cabe em uma única página.
A classe FlexPrintJob faz com que o sistema operacional exiba uma caixa de diálogo Imprimir. Você não pode imprimir sem alguma ação do usuário.
Prepare e envie um trabalho de impressão
Você imprime a saída preparando e enviando um trabalho de impressão. Vamos criar uma instância da classe FlexPrintJob
var printJob:FlexPrintJob = new FlexPrintJob();Inicie o trabalho de impressão
printJob.start();Flex fará com que o sistema operacional exiba uma caixa de diálogo Imprimir. Adicione um ou mais objetos ao trabalho de impressão e especifique como dimensioná-los
printJob.addObject(myObject, FlexPrintJobScaleType.MATCH_WIDTH);Cada objeto começa em uma nova página. Envie o trabalho de impressão para a impressora
printJob.send();Exemplo de impressão
| Degrau | Descrição |
|---|---|
| 1 | Crie um projeto com um nome HelloWorld em um pacote com.tutorialspoint.client conforme explicado no capítulo Flex - Criar aplicativo . |
| 2 | Modifique HelloWorld.mxml conforme explicado abaixo. Mantenha o resto dos arquivos inalterados. |
| 3 | Compile e execute o aplicativo para ter certeza de que a lógica de negócios está funcionando de acordo com os requisitos. |
A seguir está o conteúdo do arquivo mxml modificado src/com.tutorialspoint/HelloWorld.mxml.
<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s = "library://ns.adobe.com/flex/spark"
xmlns:mx = "library://ns.adobe.com/flex/mx"
width = "100%" height = "100%"
minWidth = "500" minHeight = "500"
initialize = "application_initializeHandler(event)">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.printing.FlexPrintJob;
import mx.printing.FlexPrintJobScaleType;
protected function btnClickMe_clickHandler(event:MouseEvent):void {
// Create an instance of the FlexPrintJob class.
var printJob:FlexPrintJob = new FlexPrintJob();
// Start the print job.
if (printJob.start() != true) return;
// Add the object to print. Do not scale it.
printJob.addObject(myDataGrid, FlexPrintJobScaleType.NONE);
// Send the job to the printer.
printJob.send();
}
protected function application_initializeHandler(event:FlexEvent):void {
lblHeader.text = "My Hello World Application";
}
]]>
</fx:Script>
<s:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50"
horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40" color = "0x777777"
styleName = "heading" />
<mx:DataGrid id = "myDataGrid" width = "300">
<mx:dataProvider>
<fx:Object Product = "Flex" Code = "1000" />
<fx:Object Product = "GWT" Code = "2000" />
<fx:Object Product = "JAVA" Code = "3000" />
<fx:Object Product = "JUnit" Code = "4000" />
</mx:dataProvider>
</mx:DataGrid>
<s:Button label = "Print Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)"
styleName = "button" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Quando você estiver pronto com todas as alterações feitas, vamos compilar e executar o aplicativo no modo normal como fizemos no capítulo Flex - Criar aplicativo . Se estiver tudo bem com sua aplicação, ele produzirá o seguinte resultado: [ Experimente online ]
Clique no botão imprimir e você pode ver a impressão da grade de dados mostrada abaixo.
