Flex - Aplicativos

Antes 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 seguintes quatro partes importantes, 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 denotadas 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 skins de controles de UI 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 tag.

• 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 instalada 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.