adobe flex 4

34
Michael Labriola, Jeff Tapper Matthew Boles Prefácio por Matt Chotin, Gerente de Produto do Flex. Adobe® Flex® 4 Treinamento Direto da Fonte Rio de Janeiro, 2012

Upload: joao-carlos-brandao

Post on 28-Dec-2015

49 views

Category:

Documents


3 download

TRANSCRIPT

Page 1: Adobe Flex 4

Michael Labriola,

Je" Tapper

Matthew Boles

Prefácio por Matt Chotin,

Gerente de Produto do Flex.

Adobe® Flex® 4

Treinamento Direto da Fonte

Rio de Janeiro, 2012

Page 2: Adobe Flex 4

À minha esposa Laura e à minha $lha Lilia. Vocês me fazem sorrir.

– Micheael Labriola

Meus esforços neste livro são dedicados à minha esposa e meus $lhos Kaliope

e Kagan. Sem vocês para me inspirarem, esse livro não seria possível.

–Je) Tapper

À Sandra, minha esposa, que fez dos últimos 24 anos juntos uma alegria.

E ao Scrappy, meu amigo de pescaria peludo.

– Matthew Boles

Page 3: Adobe Flex 4

Biografias

Michael Labriola é Sócio Fundador e Consultor Sênior no Digital Primates IT. Tem desenvolvido aplicações de Internet desde 1995 e trabalhado com Flex desde seu programa beta 1.0. Michael é Adobe Certified Instructor, Community Professional, Flex Developer Champion e palestrante internacional em temas Flex e AIR, consultado por muitas marcas mais reconhecidas do mundo.

Como consultor, Michael orienta equipes de desenvolvimento de software utilizando tecnologias emergentes e projeta aplicações empresariais com alto impacto de negócio. Seu tempo livre é gasto escapando da tecnologia através de vinho e comida.

Jeff Taper é Sócio Fundador e Consultor Sênior no Digital Primates. Ele tem desenvolvido aplicações baseadas em Internet desde 1995 para inúmeros clientes, incluindo Major League Baseball, ESPN, Morgan Stanley, Condé Nast, IBM, Dow Jones, American Express, Verizon, e muitos outros. Jeff tem desenvolvido aplicações Flex desde os primórdios do Flex 1. Como instrutor, é certificado a ensinar todos os cursos da Adobe para desenvolvimento em Flex, AIR, Flash e ColdFusion. Ele também é um palestrante habitual nas Adobe Development Conferences e grupos de usuários. O Digital Primates IT fornece orientação especializada no desenvolvimento de aplicações ricas para Internet e fortalece clientes através de tutoria.

Matthew Boles é Especialista em Treinamento Técnico do grupo Adobe Technical Marketing e tem desenvolvido e ministrado cursos em Flex desde o lançamento 1.0. Matthew tem um background diverso em desenvolvimento de web, redes de computadores e ensino. Ele é coautor da versão anterior deste livro e autor contribuidor do software Flex para uso educacional autorizado pela Adobe.

Page 4: Adobe Flex 4

Agradecimentos

Obrigado ao Jeff, Matt e Simeon por seu trabalho e dedicação a este livro. Agradeço ao Chris Gieger pelo seu trabalho de design gratuito no aplicativo FlexGrocer. Muito obrigado ao Robyn por sua paciência e cuidado intermináveis. Obrigado ao Victor e a Nancy, pelo trabalho em nosso favor na Peachpit. Obrigado a todos os membros da equipe na Digital Primates que seguraram a barra quando este livro demorou um pouco mais do que o esperado. Obrigado a meus clientes pelo trabalho interessante e inspiração para me manter aprendendo essas novas tecnologias. E, como sempre, extensos agradecimentos ao Matt por me arrastar para esta aventura. E principalmente, obrigado à minha esposa Laura, que trata de tudo sem se queixar e é a verdadeira razão de eu realizar qualquer coisa.

– Michael Labriola

Eu gostaria de agradecer ao Mike, Matt, Sim and Robyn por todo o trabalho duro, que me ajudou a planejar este livro. Obrigado a Chris Gieger por fornecer lindos designs para nosso aplicativo, e – Chris, nos desculpe, pois não pudemos incluir todos os seus excelentes designs. Agradecimentos especiais vão para o time da Adobe, que fez tudo isto possível, especialmente os esforços de Matt Chotin e Deepa Subramaniam. Obrigado ao staff editorial, na Adobe Press, que encarou a tarefa hercúlea de tornar nossos escritos inteligíveis.

– Jeff Tapper

Obrigado ao Jeff, Mike e Robyn pelo ótimo trabalho em fazer este livro sair.

– Matthew Boles

Page 5: Adobe Flex 4

Sumário

......................Prefácio ................................................................................................... x

......................Introdução ............................................................................................. xii

Lição 1 ...........Entendendo as Rich Internet Applications ................................................... 3

A Evolução das Aplicações para Computador ..................................................................4

A Interrupção da Arquitetura Baseada em Página ..........................................................6

As Vantagens das Rich Internet Applications ...................................................................7

Tecnologias RIA ............................................................................................................................8

Lição 2 ...........Iniciando ................................................................................................. 17

Iniciando o Desenvolvimento de Aplicações Flex ........................................................18

Criando um Projeto e uma Aplicação MXML ..................................................................18

Entendendo a Área de Trabalho do Flash Builder .........................................................24

Rodando sua Aplicação ..........................................................................................................27

Explorando o Depurador do Flash Builder ......................................................................32

Preparando-se para a Próxima Lição .................................................................................40

Lição 3 ...........Fazendo o Layout da Interface .................................................................. 45

Aprendendo sobre Layouts ...................................................................................................46

Fazendo o Layout da Aplicação de E-Commerce ..........................................................50

Trabalhando com Layouts Baseados em Constraints ..................................................58

Trabalhando com View States ..............................................................................................63

Refatorando ................................................................................................................................70

Lição 4 ...........Usando Simple Controls ........................................................................... 77

Apresentando os Simple Controls ......................................................................................78

Exibindo Imagens .....................................................................................................................79

Construindo um Detail View .................................................................................................83

Usando Data Binding para Ligar uma Estrutura de Dados a um

Simple Control ...........................................................................................................................86

Usando um Layout Container Form para Criar Layouts de Simple Controls .......88

Page 6: Adobe Flex 4

Treinamento direto da fonte | vii

Lição 5 ...........Manuseando Eventos ............................................................................... 93

Entendendo o Manuseio de Eventos .................................................................................94

Manuseando Eventos de Sistema .................................................................................... 104

Lição 6 ...........Usando Dados XML Remotos ................................................................... 111

Usando XML Incorporado ................................................................................................... 112

Usando XML Carregado no Runtime .............................................................................. 117

Recuperando Dados XML com HTTPService ............................................................... 121

Pesquisando XML com EX4 ................................................................................................ 124

Usando Dados Dinâmicos de XML................................................................................... 131

Usando o XMLListCollection em Controle do Flex .................................................... 135

Lição 7 ...........Criando Classes ...................................................................................... 139

Construindo uma Classe ActionScript Customizada ................................................ 140

Construindo um Value Object ........................................................................................... 140

Construindo um Método para Criar um Objeto ......................................................... 147

Construindo Classes de Carrinho de Compras ............................................................ 150

Manipulando Dados de Carrinho de Compras ........................................................... 156

Lição 8 ...........Usando Data Binding e Collections .......................................................... 167

Usando o Data Binding ........................................................................................................ 168

Atuando como o Compilador ............................................................................................ 174

Entendendo as Implicações do Binding ........................................................................ 179

Usando ArrayCollections ..................................................................................................... 179

Refatorando ShoppingCartItem ....................................................................................... 200

Lição 9 ...........Dividindo a Aplicação em Componentes .................................................. 203

Introduzindo Componentes MXML ................................................................................ 204

Separando o Componente ShoppingView................................................................... 210

Dividindo um Componente ProductItem ..................................................................... 217

Criando Componentes para Gerenciar Carregamento de Dados ........................ 226

Lição 10 .........Usando DataGroups e Listas .................................................................... 237

Usando Listas...........................................................................................................................238

Usando DataGroups .............................................................................................................. 241

Virtualização com Listas ...................................................................................................... 251

Exibindo Produtos Alimentícios Baseados em Seleção de Categoria ................. 253

Page 7: Adobe Flex 4

viii | Sumário

Lição 11 .........Criando e Despachando Eventos .............................................................. 257

Entendendo os Benefícios de Loose Coupling (Acoplamento Fraco) ................. 258

Despachando Eventos ......................................................................................................... 259

Declarando Eventos para um Componente ................................................................. 263

Identificando a Necessidade de Classes de Eventos Customizados .................... 265

Construindo e Usando o UserAcknowledgeEvent..................................................... 266

Entendendo o Event Flow e o Event Bubbling ............................................................ 270

Criando e Usando a Classe ProductEvent ..................................................................... 276

Lição 12 .........Usando DataGrids e Item Renderers ........................................................ 287

Spark e MX ................................................................................................................................ 288

Apresentando DataGrids e Item Renderers ................................................................. 288

Exibindo o Carrinho de Compras com um DataGrid................................................. 289

Usando o AdvancedDataGrid ............................................................................................ 302

Lição 13 .........Usando o Drag-and-Drop ........................................................................ 327

Apresentando o Gerenciador Drag-and-Drop ............................................................ 328

Arrastando e Soltando entre Dois DataGrids ............................................................... 329

Arrastando e Soltando entre um DataGrid e uma Lista ........................................... 333

Usando um Componente Non-Drag-Enabled em uma Operação

Drag-and-Drop ....................................................................................................................... 337

Arrastando um Item Alimentício ao Carrinho de Compras .................................... 343

Lição 14 .........Implementando a Navegação ................................................................. 351

Introduzindo a Navegação ................................................................................................. 352

Criando o Processo de Verificação como um ViewStack ......................................... 354

Integrando o CheckoutView a uma Aplicação ............................................................ 359

Lição 15 .........Usando Formatters e Validators .............................................................. 365

Apresentando os Formatters e os Validators ............................................................... 366

Usando as Classes Formatter ............................................................................................. 368

Examinando os Two-Way Bindings .................................................................................. 371

Usando as Classes Validator ............................................................................................... 372

Lição 16 .........Personalizando um Aplicativo Flex com Styles ......................................... 379

Aplicando um Design com Styles e Skins ..................................................................... 380

Limpando a Aparência ......................................................................................................... 380

Aplicando Styles .....................................................................................................................381

Alterando o CSS no Runtime ............................................................................................. 400

Page 8: Adobe Flex 4

Treinamento direto da fonte | ix

Lição 17 .........Personalizando um Aplicativo Flex com Skins .......................................... 405

Entendendo a Função dos Skins em um Componente do Spark ......................... 406

O Relacionamento entre Skins e States ......................................................................... 410

Criando um Skin para a Aplicação ................................................................................... 419

Lição 18 .........Criando Componentes Personalizados com ActionScript ........................... 425

Apresentando Componentes com ActionScript 3.0 ................................................. 426

A Construção de Componentes Pode Ser Complexa ............................................... 426

Entendendo os Componentes do Flex ........................................................................... 427

Por Que Fazer Componentes? ........................................................................................... 428

Definindo um Componente ............................................................................................... 430

Criando os Visuais .................................................................................................................. 437

Adicionando Funcionalidade aos Componentes ....................................................... 444

Criando um Renderer para o Skin .................................................................................... 455

Requisitos Mínimos do Sistema.........................................................................................458

Apêndice A ....Instruções de Instalação ........................................................................ 459

Instalação de Software ......................................................................................................... 459

Importação de Projetos ....................................................................................................... 461

......................Índice Remissivo .................................................................................... 466

Page 9: Adobe Flex 4

Prefácio

Há dez anos a Macromedia criou o termo “Rich Internet Aplication” ou RIA para descrever a aplicação moderna da web: não somente como um local onde uma quantidade significativa de dados e lógica de negócios permanece em um servidor ou na nuvem, mas onde também o poder de tecnologia do computador é alavancado para oferecer uma maravilhosa experiência ao usuário. O Flex tem sido o centro do cenário das RIAs desde quando a Macromedia o apresentou em 2004 e os lançamentos subsequentes vieram sob a denominação da Adobe em 2006, após a aquisição da Macromedia por esta última. Com o lançamento do Flex 4, a Adobe está trazendo o poder da RIA para um público ainda maior de desenvolvedores. Este livro é o primeiro grande passo para aprender a usar esse poder.

O Adobe Flex abrange uma variedade de elementos. Ele tem uma linguagem de marcação informativa chamada MXML para ajudar a estruturar sua aplicação, e utiliza o ActionScript 3.0 (uma implementação do ECMAScript) para adicionar todo o poder de programação que você precisa. A sua UI (interface do usuário) pode até ser personalizada usando a conhecida sintaxe do CSS.

Além de aprender as linguagens utilizadas pelo Flex (e quando usar cada uma delas), você vai entender sobre a poderosa biblioteca de componentes e o melhor modo de tirar partido dela em suas aplicações. O Flex fornece layout containers, form controls, formatters e validators, uma biblioteca de animações e efeitos e muito mais, para possibilitar que você construa uma UI poderosa rapidamente. E quando o Flex não trouxer algo pronto nativo, você mesmo poderá construi-la com facilidade aplicando o que já existe.

Muito tempo foi gasto no Flex 4 para apresentar a próxima geração da estrutura de componente Flex chamada Spark. Criado na melhor arquitetura existente do Flex, o Spark oferece um mecanismo muito mais expressivo para que os desenvolvedores e designers possam trabalhar juntamente com o aspecto de suas aplicações do Flex. O Spark promove o conceito em termos de Model-View-Controller (MVC) e habilita a funcionalidade dos componentes, que serão de um modo limpo separados das aparências visuais e dos comportamentos. Além de simplesmente fazer com que as aplicações do Flex sejam desenvolvidas e mantidas com facilidade, essa separação também permite melhor colaboração entre designers e desenvolvedores, os quais podem não ter habilidade para trabalhar com a aplicação usando as mesmas ferramentas.

É claro que não basta ter uma interface bonita; sua aplicação precisa ser funcional, e frequentemente isso significa manipular dados. Você descobrirá que o Flex oferece uma variedade de maneiras de conectar suas fontes de dados de back-end, de XML para HTTP, para web services SOAP, para um protocolo remoto eficiente chamado Action Message Format ou AMF, que possui suporte de todas as maiores tecnologias de back-end. O Flex

Page 10: Adobe Flex 4

Treinamento direto da fonte | xi

também oferece forte interação com LiveCycle Data Services, uma oferta poderosa que torna fácil gerenciar grandes conjuntos de dados, especialmente quando estes dados são compartilhados entre muitos usuários.

Enquanto cada elemento do Flex pode ser codificado manualmente com seu melhor editor do texto favorito open source, o Flex SDK, o Adobe Flash Builder é um fantástico IDE (do inglês Integrated Development Environment ou Ambiente Integrado de Desenvolvimento) construído no Eclipse que pode ajudar a criar e testar mais rapidamente diversas funcionalidades. E como parte do Flex 4, a Adobe está apresentando uma nova ferramenta, o Adobe Flash Catalyst, o qual permite aos designers colaborarem de modo mais fácil com desenvolvedores na criação de excelentes experiências de usuário. Há diversas ferramentas e bibliotecas de terceiros como também extensões voltadas para você se tornar mais produtivo no seu desenvolvimento.

Mas não basta simplesmente saber sobre as peças que formam uma aplicação Flex; você precisa saber como usá-las bem. O Adobe Flex 4: Treinamento Direto da Fonte usa a especialidade de seus autores para apresentar várias lições que não vão apenas introduzir os conceitos do Flex, mas lhe ajudar a utilizar as melhores práticas. Com esta introdução, você logo estará construindo aplicações com melhor aspecto e fazendo mais do que qualquer coisa que já tenha feito antes.

Sabe aquelas aplicações que você vê no cinema e parecem ser tão surreais? Com o Flex 4 e suas ferramentas, elas não serão mais tão impossíveis de serem feitas.

Nós, da Adobe, mal podemos esperar para ver o que você pode criar!

Matt Chotin Gerente Sênior de Produto Adobe Systems, Inc.

Page 11: Adobe Flex 4

Introdução

Em março de 2002, a Macromedia criou o termo Rich Internet Application (RIA). Naquela época, a ideia parecia um pouco futurística. Mas tudo aquilo mudou, e as Rich Internet Applications são a realidade de hoje.

A Macromedia apresentou o Flex em 2004 para que desenvolvedores pudessem criar aplicações para a web para a quase onipresente plataforma Flash. Essas aplicações puderam se beneficiar do design aperfeiçoado, usabilidade e portabilidade que o Flex tornou possível, mudando drasticamente a experiência do usuário. Esses recursos são os princípios fundamentais da Web 2.0, uma nova geração de aplicações de Internet voltadas para a criatividade e colaboração.

Desde a introdução do Flex, a Macromedia – e agora a Adobe – lançou versões 1.5, 2 e 3 do Flex. Com o lançamento de versões subsequentes, ficou mais fácil a criação de aplicações ricas, interessantes e intuitivas, e o nível de expectativa do usuário sobre as aplicações web foi elevado. Inúmeras organizações descobriram os benefícios do Flex, construindo e implantando aplicações que rodam sobre a plataforma Flash.

Mas o Flex 1 e 1.5 não foram definitivamente produtos de mercado de massa. O preço, a falta de IDE, opções limitadas de implantação e outros fatores significavam que as versões anteriores do Flex eram especificamente orientadas a aplicações grandes e complexas, assim como para desenvolvedores sofisticados. No entanto, com os novos lançamentos da linha de produtos Flex, tudo isso mudou.

O Flex 2 foi lançado em 2006 e muito mais pessoas puderam desenvolver em Flex, já que o programa incluía um kit de desenvolvimento de software grátis (SDK). Com o open sourcing do Flex 3 e o anúncio de versões gratuitas do Flash Builder para estudantes, o desenvolvimento em Flex está ao alcance de qualquer desenvolvedor que tenha perspicácia suficiente. O lançamento do Flex 4 tornou ainda mais fácil construir aplicações de vanguarda, eficientes e ricas. Entre as muitas melhorias do Flex 4, a otimização do fluxo de trabalho entre desenvolvedores e designers, facilitando muito o processo de intuição induzida, levou à obtenção de designs com mais aplicações Flex.

É muito fácil de começar com o Flex. Ele é composto, em si próprio, de duas linguagens: MXML, uma linguagem de marcação baseada em XML; e ActionScript, a linguagem do Flash Player. As tags MXML são fáceis de aprender (especialmente quando o FlashBuilder cria-as para você). O ActionScript tem uma curva de aprendizagem mais inclinada, mas desenvolvedores com experiência prévia em programação e scripting aprenderão facilmente. Mas há mais coisas no desenvolvimento Flex do que MXML e ActionScript.

Page 12: Adobe Flex 4

Treinamento direto da fonte | xiii

Para se tornar um desenvolvedor Flex de sucesso, é necessário que você entenda uma quantidade de conceitos que incluem o seguinte:

Como aplicações Flex devem ser construídas (e como não deveriam)

Quais são os relacionamentos entre MXML e ActionScript, e quando usar cada um

Como carregar dados em uma aplicação do Flex

Como usar os componentes Flex e como criar o seu próprio

Quais são as implicações de performance do código que você escreve

Quais são as melhores práticas para escrever código que seja dimensionável, gerenciável e reutilizável

Desenvolver estas capacidades é o que este livro se propõe. Como autores, nós destilamos nossos conhecimentos sobre o Flex duramente adquiridos em uma série de lições que darão partida ao seu próprio desenvolvimento Flex. Começando com os princípios básicos e, então, gradualmente introduzindo funcionalidade adicional e know-how, a equipe de autores guia sua jornada adentro do excitante mundo das RIAs, garantindo sucesso a cada passo do caminho.

O Flex é poderoso, altamente capaz, divertido e inacreditavelmente viciante. E o Adobe Flex 4 Treinamento Direto da Fonte é o guia de viagem ideal na sua jornada para a próxima geração do desenvolvimento de aplicações.

Adobe Flex 4: Treinamento Direto da Fonte é uma atualização do extremamente conhecido Adobe Flex 3: Treinamento Direto da Fonte. Nossa sincera intenção é que tanto os leitores do livro anterior, como os que estão explorando o Flex pela primeira vez com este, achem o conteúdo imprescindível. Desde o lançamento de nosso livro anterior, o Flex SDK tem sido completamente reprocessado. Entre as várias melhorias estão:

Eficiência muito maior no runtime de aplicações do Flex

Um novo modelo de componente que remove muitos códigos desnecessários das aplicações, tornando-os muito menores

Grande aperfeiçoamento no fluxo de trabalho dos desenvolvedores e designers

E muito mais!

É um momento incrível para ser um desenvolvedor de RIA e nós esperamos que este livro lhe traga todas as ferramentas de que você precisa para começar com o Flex.

Page 13: Adobe Flex 4

xiv | Introdução

Pré-requisitos

Para aproveitar o máximo deste livro, você deve, no mínimo, entender a terminologia da web. Ele não é feito para ensinar a você nada além de Flex, então quanto melhor for o seu entendimento da World Wide Web, melhor você estará. Este livro foi escrito presumindo que você trabalha confortavelmente com linguagens de programação e esteja provavelmente trabalhando com linguagem Server-Side, como Java, .Net, PHP ou ColdFusion. Embora conhecimento de tecnologias Server-side não seja um requisito para o sucesso com este material, há muitas comparações e analogias feitas à programação web Server-side. Este livro não pretende ser uma introdução à programação ou uma introdução à programação orientada a objetos (OOP). Não se requer experiência com OOP, no entanto, se você não tiver nenhuma experiência em programação, poderá achar os materiais muito avançados.

Linhas gerais

Como você logo descobrirá, este livro reflete o máximo possível as práticas do mundo real. Onde certas seções do livro se diferenciam do que seria considerado uma prática do mundo real, todo esforço foi feito para esclarecer. Os exercícios foram pensados para fazê-lo usar as ferramentas e a interface rapidamente, de modo que possa começar a trabalhar em seus próprios projetos com a transição mais suave possível.

Este currículo deve levar aproximadamente 28-35 horas para ser completado e inclui as seguintes lições:

Lição 1: Entendendo as Aplicações Rich Internet Applications

Lição 2: Iniciando

Lição 3: Fazendo o Layout da Interface

Lição 4: Usando Simple Controls

Lição 5: Manuseando Eventos

Lição 6: Usando Dados de XML Remotos

Lição 7: Criando Classes

Lição 8: Usando Data-Binding e Collections

Lição 9: Dividindo a Aplicação em Componentes

Lição 10: Usando DataGroups e Listas

Lição 11: Criando e Despachando Eventos

Page 14: Adobe Flex 4

Treinamento direto da fonte | xv

Lição 12: Usando DataGrids e Item Renderers

Lição 13: Usando Drag and Drop

Lição 14: Implementando a Navegação

Lição 15: Usando Formatters e Validators

Lição 16: Personalizando um Aplicativo Flex com Styles

Lição 17: Personalizando um Aplicativo Flex com Skins

Lição 18: Criando Componentes Personalizados com ActionScript

Para quem é este livro?

Todo o conteúdo deste livro deve funcionar bem para usuários do Flash Builder em quaisquer de suas plataformas com suporte.

A aplicação do projeto

Adobe Flex 4: Treinamento Direto da Fonte inclui muitos tutoriais detalhados, feitos para mostrar a você como criar uma aplicação completa usando o Flex 4. Esta aplicação é uma mercearia virtual que exibe dados e imagens e conduz o usuário através de processos de checkout, finalizando exatamente antes que os dados sejam enviados a um servidor.

Ao final do livro, você terá construído um website inteiro usando Flex. Você começará aprendendo os princípios básicos do Flex e entendendo como o Flash Builder pode ser usado no desenvolvimento de aplicações. Nas lições iniciais, você fará uso do modo Design para começar a fazer o layout da aplicação, mas ao progredir através do livro e se tornar mais confortável com as linguagens utilizadas pelo Flex, você passará mais e mais tempo trabalhando no modo Source, que lhe dá a total liberdade e flexibilidade de trabalhar diretamente com o código. Ao fim do livro, você deverá estar totalmente confortável para trabalhar com as linguagens Flex e pode estar até mesmo apto a trabalhar sem o Flash Builder, usando o Flex SDK open source e seu compilador linha de comando.

Errata

Apesar de termos nos esforçado muito para criar uma aplicação e um livro impecáveis, nossos leitores poderão encontrar alguns problemas. A errata do livro será postada no site www.altabooks.com.br

Page 15: Adobe Flex 4

xvi | Introdução

Elementos padrão no livro

Cada lição neste livro começa dando as linhas gerais do foco principal da lição em mãos e apresentando novas características. Objetivos de aprendizado e o tempo aproximado necessário para completar todos os exercícios, também são listados no começo de cada lição. Os projetos são divididos em exercícios que demonstram a importância de cada habilidade. Cada lição se baseará nos conceitos e técnicas utilizadas nas lições anteriores.

DICA: Uma maneira alternativa de desempenhar uma tarefa ou uma sugestão a considerar

ao aplicar as habilidades que você está aprendendo.

NOTA: Informação adicional de background para expandir sua sabedoria e técnicas

avançadas que você pode explorar para desenvolver mais suas habilidades.

CUIDADO! Aviso informando sobre uma situação que você possa encontrar e que possa

causar erros, problemas, ou resultados inesperados.

Texto em negrito: Palavras que aparecem em negrito são termos que você deve digitar enquanto avança pelos passos das lições.

Código em negrito: Linhas de código que aparecem em negrito entre blocos de código ajudam você a identificar facilmente as mudanças no bloco a serem feitas em determinado passo do exercício.

Código no texto: código ou palavras-chave aparecem ligeiramente diferente do resto do texto para que você possa identificá-los.

Bloco de código: Para ajudar você a identificar facilmente código ActionScript, XML e HTML no livro, o código foi estilizado em uma fonte especial que é diferente do restante do texto. Linhas únicas de código ActionScript que são maiores que as margens da página continuam na próxima linha. Elas são representadas por uma seta no começo da continuação de uma linha quebrada e são recuadas abaixo da linha em que continuam. Por exemplo:

Page 16: Adobe Flex 4

Treinamento direto da fonte | xvii

Texto em itálico: Palavras em itálico são usadas para dar ênfase ou para apresentar vocabulário novo.

Palavras em itálico também são usadas para placeholders (marcadores de posição) indicando que um nome ou uma entrada pode variar dependendo da situação. Por exemplo, no caminho driveroot:/flex4tfs/flexgrocer, é possível substituir o nome atual da sua unidade raiz para o placeholder.

Comandos de menu e atalhos de teclado: Frequentemente existem várias maneiras de executar uma mesma tarefa no Flex Builder. As opções diferentes serão apontadas em cada lição. Comandos de menu são mostrados com colchetes angulares entre os nomes de menu e comandos: Menu>Command>Subcommand. Atalhos de teclado são mostrados com um “sinal de mais” entre o nome das teclas para indicar que você deve pressioná-las simultaneamente; por exemplo, Shift+Tab significa que você deve pressionar as teclas Shift e Tab ao mesmo tempo.

CD-ROM: O CD-ROM incluso contém todos os arquivos de mídia, arquivos iniciais e projetos finalizados de cada lição do livro. Esses arquivos estão localizados nos diretórios start e complete. A lição 1, “Entendendo as Aplicações Ricas para Internet”, não inclui exercícios. A qualquer momento, se quiser retornar ao material original da fonte, você poderá restaurar o projeto FlexGrocer. Algumas lições incluem um diretório intermediário, que contém arquivos em vários estágios de desenvolvimento na lição. Outras lições podem incluir um diretório independente usado para projetos pequenos com intenção de ilustrar um ponto específico ou exercitar sem afetar diretamente o projeto FlexGrocery.

Sempre que quiser consultar um dos arquivos que está sendo construído em uma lição para verificar se está executando corretamente as etapas dos exercícios, você encontrará os arquivos organizados no CD-ROM na lição correspondente. Por exemplo, os arquivos da Lição 4 estão localizados no CD-ROM na pasta Lesson04, em um projeto chamado FlexGrocer.fxp.

A estrutura de diretório das lições com que você estará trabalhando é a seguinte:

Estrutura do diretório

Page 17: Adobe Flex 4

xviii | Introdução

Adobe Treinamento Direto da Fonte

As séries Adobe Treinamento Direto da Fonte e Treinamento Avançado Direto das Fontes são desenvolvidas em associação com a Adobe e revisadas pelas equipes de suporte do produto. Ideal para estudantes ativos, os livros da série Treinamento Direto da Fonte oferecem instrução prática feita para lhe proporcionar um embasamento sólido dos fundamentos do programa. Se você aprende melhor fazendo, esta é a série para você. Cada título Treinamento Direto da Fonte contém horas de instrução sobre os programas de software da Adobe. Eles são feitos para ensinar as técnicas que você precisa para criar projetos sofisticados de nível profissional. Cada livro inclui um CD-ROM que contém todos os arquivos usados nas lições, projetos concluídos para comparação, e muito mais.

O Que Você Aprenderá

Você desenvolverá as habilidades de que precisa para criar e manter suas próprias aplicações Flex enquanto trabalha ao longo destas lições.

Ao fim do curso, você estará apto a:

Usar o Flash Builder para construir aplicações Flex

Entender MXML, ActionScript 3.0, e as interações entre ambos

Trabalhar com conjuntos complexos de dados

Carregar dados usando XML

Manusear eventos para possibilitar interatividade em uma aplicação

Criar suas próprias classes de eventos

Criar seus próprios componentes, tanto em MXML como em ActionScript 3.0

Aplicar styles e skins para personalizar a aparência e a percepção de uma aplicação

Adicionar gráficos a uma aplicação

E muito mais...

Requisitos Mínimos de Sistema

Windows

Processador de 2 GHz ou mais veloz

1 GB de RAM (recomenda-se 2 GB)

Page 18: Adobe Flex 4

Treinamento direto da fonte | xix

Microsoft Windows XP (com Service Pack 3), Windows Vista Ultimate ou Enterprise (32 bits ou 64 bits que executem em modo de 32 bits), Windows Server 2008 (32 bits) ou Windows 7 (32 bits ou 64 bits que executem em modo 32 bits)

1GB de espaço livre no disco rígido.

Java Virtual Machine (32 bits): IBM JRE 1.5, Sun JRE 1.5, IBM JRE 1.6 ou Sun JRE 1.6.

Resolução de 1024x768 (recomenda-se 1280x800) com placa de vídeo de 16 bits

Flash Player 10 ou superior.

Macintosh

Mac com base em processador Intel

OS X 10.5.6 (Leopard) ou 10.6 (Snow Leopard)

1 GB de RAM (recomenda-se 2 GB)

1GB de espaço livre no disco rígido

Java Virtual Machine (32 bits): JRE 1.5 ou 1.6

Resolução de 1024x768 (recomenda-se 1280x800) com placa de vídeo de 16 bits

Flash Player 10 ou superior

A linha de produtos Flex é extremamente excitante, e estamos esperando para nos surpreendermos com o que você fará com ela. Com uma base forte em Flex, você pode expandir rapidamente seu conjunto de habilidades. O Flex não é difícil de usar para quem tem experiência em programação. Com um pouquinho de iniciativa e esforço, você pode voar pelas lições a seguir e construir suas próprias aplicações e sites com rapidez.

Recursos Adicionais

Flex Community Help

A Flex community help reune usuários ativos do Flex, membros da equipe de produtos da Adobe, autores e especialistas para lhe oferecer as informações mais atualizadas, relevantes e úteis sobre o Flex. Se estiver procurando por um exemplo de código ou uma resposta a um problema, tiver uma pergunta sobre um software ou quiser compartilhar uma dica ou receita útil, você se beneficiará da community help. A pesquisa de resultados exibirá conteúdo da Adobe e da comunidade.

Page 19: Adobe Flex 4

xx | Introdução

Com a Community help da Adobe você poderá:

Focar sua pesquisa de resultados usando filtros que permitem selecionar as respostas de apenas do conteúdo da Adobe ou da comunidade, apenas do ActionScript Language Reference ou até mesmo de exemplos de código.

Baixar o conteúdo fundamental da Ajuda da Adobe e do ActionScript Language Reference para visualização off-line através da nova aplicação AIR de community help.

Saber se o que a comunidade pensa é o melhor e o mais útil conteúdo através de classificações e comentários.

Compartilhar seus conhecimentos com outros e descobrir o que os especialistas têm a dizer sobre o uso do seu produto da Adobe favorito

Aplicação AIR de Community Help

Se tiver instalado o Flex 4 ou qualquer produto Adobe CS5, você já terá a aplicação de community help. Essa aplicação concomitante permite que você pesquise e navegue pelo conteúdo da Adobe e comunidade e ainda comentar e classificar quaisquer artigos como se estivesse no navegador. Entretanto, você poderá também baixar a Ajuda da Adobe ou o conteúdo de referência para uso offline. Também é possível fazer assinatura para atualizações de conteúdo novo, que podem ser automaticamente baixados, para que você tenha sempre o conteúdo mais atualizado para o seu produto Adobe. A aplicação pode ser baixada em: http://www.adobe.com/support/chc/index.html.

Participação da Comunidade

O conteúdo da Adobe está atualizado com base em comentários e contribuições da comunidade. Você pode contribuir com conteúdo para a community help de diversas maneiras: adicionando comentários aos conteúdos ou fóruns, incluindo links para conteúdo da web, publicando seu próprio conteúdo no Community Publishing System ou contribuindo com dicas no CookBook. Descubra como contribuir. http://www.adobe.com/community/publishing/download.html.

Moderação e Recompensa da Comunidade

Mais de 150 especialistas de comunidade são moderadores dos comentários e recompensam outros usuários por contribuições úteis. Os que contribuem podem ganhar 5 pontos por pequenas coisas, como encontrar erros de digitação ou expressões erradas, e até 200 pontos por contribuições mais significantes, como tutoriais longos, exemplos, CookBook Recipes ou artigos Developer Center. Os pontos cumulativos dos usuários são postados na página de perfil da Adobe e os melhores contribuidores fazem parte dos quadros de classificação nas páginas de Ajuda e Suporte, CookBooks e Fóruns. Descubra mais em: www.adobe.com/community/publishing/community_help.html.

Page 20: Adobe Flex 4

Treinamento direto da fonte | xxi

Perguntas Frequentes

Para responder às perguntas frequentes sobre a Community Help, consulte http://community.adobe.com/help/profile/faq.html.

Suporte e Ajuda do Adobe Flex e Flash Builder: www.adobe.com/support/flex/ onde você pode encontrar e navegar pelo conteúdo de Ajuda e Suporte no adobe.com.

Adobe TV: http://tv.adobe.com é um recurso de vídeo on-line para orientações especiais e sugestões de produtos Adobe, incluindo um canal de Como Fazer para que você inicie o uso do seu produto.

Adobe Developer Connection: www.adobe.com/devnet é as sua fonte para artigos técnicos, exemplos de códigos e videos com orientações que abrangem os produtos e tecnologias de desenvolvimento da Adobe.

Cookbooks: http://cookbooks.adobe.com/home é o local onde você pode encontrar e compartilhar dicas de códigos para o Flex, ActionScript, AIR e outros produtos para desenvolvimento.

Recursos para educadores: www.adobe/education inclui três programas gratuitos que usam uma abordagem integrada para o ensino do software da Adobe e podem ser utilizados para preparação dos exames de Adobe Certified Associate.

Verifique também estes links úteis:

Fóruns da Adobe: http://forums.adobe.com permite que faça parte de discussões, perguntas e respostas sobre produtos Adobe.

Adobe Marketplace e Exchange: www.adobe.com/cfusion/exchange é uma central para encontrar ferramentas, serviços, extensões, exemplos de código e muito mais para completar e desenvolver seus produtos Adobe.

Página inicial do Adobe Flex: www.adobe.com/products/flex.

Adobe Labs: http://labs.adobe.com oferece acesso a builds recentes de alta tecnologia, assim como fóruns onde você pode interagir com equipes de desenvolvimento da Adobe que criam essa tecnologia e outros membros especialistas da comunidade.

Certificação Adobe

O programa de Certificação Adobe foi criado para ajudar aos clientes e instrutores da Adobe a melhorar e promover suas habilidades com o produto. Há quatro níveis de certificação:

Adobe Certified Associate (ACA)

Adobe Certified Expert (ACE)

Page 21: Adobe Flex 4

xxii | Introdução

Adobe Certified Instructor (ACI)

Adobe Auhorized Trainer (AATC)

A credencial Adobe Certified Associate (ACA) certifica que todas as pessoas têm habilidades básicas para planejar, criar, construir e manter comunicações efetivas usando diferentes formas de mídia digital.

O programa Adobe Certified Expert é uma maneira dos especialistas aumentarem o nível da credencial. Você pode usar a certificação Adobe como um estimulante para pedir aumento, encontrar um trabalho ou promover sua experiência.

Se você for um instructor com nível ACE, o programa Adobe Certified Instructor elevará suas habilidades para o próximo nível e lhe dará acesso a uma ampla variedade de recursos da Adobe.

Os Centros de Treinamento Autorizados da Adobe oferecem cursos e treinamento para instrutores dos produtos Adobe, empregando somente Instrutores Certificados Adobe. Um diretório do AATCs está disponível em http://partners.adobe.com, em inglês.

Para obter mais informações sobre programas certificados da Adobe, visite o site, em inglês, www.adobe.com/support/certification/main.html.

Page 22: Adobe Flex 4

LIÇÃO 1

Lição 1

O Que Você Aprenderá

Nesta lição, você irá:

Tempo Aproximado

Page 23: Adobe Flex 4

3

Lição 1

Entendendo as Rich

Internet Applications

Há mais de quatro décadas os computadores desempenham importante papel em am-

bientes de negócios. Ao longo deste tempo, os papéis de cliente e servidor têm evoluído

constantemente. Ao mesmo tempo em que as empresas e seus funcionários sentem-se

mais confortáveis para delegar responsabilidades aos computadores, a aparência, as

características e a arquitetura das aplicações informatizadas de negócios modifi caram-se

para atender às novas demandas. Os negócios de hoje em dia exigem aplicações web

mais rápidas, leves e ricas. Nesta lição, você aprenderá sobre este ambiente evolutivo e

entenderá as demandas de negócio que obrigam os desenvolvedores a construir Rich

Internet Applications (RIAs).

Você vai usar o Flex para construir a aplicação FlexGrocer vista aqui.

Page 24: Adobe Flex 4

4 Lição 1 Entendendo as Rich Internet Applications

A Evolução das Aplicações para Computador

-

-

-

-

-

-

-

-

-

Page 25: Adobe Flex 4

A Evolução das Aplicações para Computador 5

-

-

-

-

-

-

-

-

Page 26: Adobe Flex 4

6 Lição 1 Entendendo as Rich Internet Applications

-

A Interrupção da Arquitetura Baseada em Página

-

1.

2.

3.

4.

5.

-

Page 27: Adobe Flex 4

As Vantagens das Rich Internet Applications 7

-

-

-

As Vantagens das Rich Internet Applications

Gerentes de Negócios

-

-

Organizações de TI

-

Page 28: Adobe Flex 4

8 Lição 1 Entendendo as Rich Internet Applications

-

Usuários Finais

-

-

Tecnologias RIA

-

-

-

Asynchronous JavaScript and XML (AJAX)-

-

Page 29: Adobe Flex 4

Tecnologias RIA 9

-

-

-

-

-

Page 30: Adobe Flex 4

10 Lição 1 Entendendo as Rich Internet Applications

Máquina Virtual Java

-

-

Microsoft Silverlight

Silverlight: -

XAML:

-

Microso Expression Studio: -

Page 31: Adobe Flex 4

Tecnologias RIA 11

Plataforma Adobe Flash-

-

Adobe Flash Player e AIR

-

-

-

-

-

Page 32: Adobe Flex 4

12 Lição 1 Entendendo as Rich Internet Applications

Flash Professional

-

-

Flex

-

-

ActionScript 3.0:

-

-

MXML: -

-

-

Page 33: Adobe Flex 4

Tecnologias RIA 13

Flash Player 10 (FP10):

Flex SDK:

Flash Builder 4:

Flash Catalyst

-

-

Page 34: Adobe Flex 4

14 Lição 1 Entendendo as Rich Internet Applications

Flash Platform Server Technologies

O Que Você Aprendeu

Nesta lição, você: