MXML - redeRIA | Agregador de noticias, artigos, tutoriais Flex, Flash, JavaFX, AJAX e Rich internet applications em geral!

Jan 6

Livro Adobe Air em Ação a caminho

Escrito por Daniel Schmitz em 1, 2.0, 4, 6, Adobe, Adobe Air, Air, app, AR, Banco de Dados, busca, C#, class, control, CRUD, dados, Flex, for, game, Google, Gráfico, if, lite, Livro, mg, MXML, NaN, O, on, Outros, pagamento, RIA, Ria’s Geral, S+S, SQLite, Tema, UI, XML @ 01 6th, 2012 | via http://flex.etc.br | Sem comentários

Para quem acha que o Flex simplesmente morreu pode estar dando um tiro no pé. Está na hora de abrir a mente e continuar a estudar. 2012 já começou e estamos a todo vapor criando o livro Adobe Air em Ação.

Este livro será um pouco diferente dos outros, pois contará com prática, que é o que precisamos para aprender algo. Nada se aprende apenas na teoria, e hoje em dia a teoria está no ? google, a um click de uma boa busca.

Estamos criando um pequeno sistema financeiro, que terá Swiz, SQLite e gráficos, e iremos mostrar passo a passo toda a sua construção. Para matar um pouco da curiosidade, algumas telas a seguir do nosso “sisteminha”. Veja algumas telas a seguir:

Out 25

FormItemClassicSkin

Escrito por Fabio da Silva em 1, 4, 6, Adobe, Apresentação, AR, BI, blog, Blogs, C#, class, css, Dica, err, erro, error, Flex, fonte, for, Formação, Formulário, Google, ide, int, library, mg, MXML, O, on, reference, RIA, Ria’s Geral, RoR, S+S, skins, spark, swf, team, tool, tooltip, UI, Validadores, XML @ 10 25th, 2011 | via http://fabiophx.blogspot.com | Sem comentários

O FormItem quando usado com validadores irá informar visualmente quando a informação não for válida.

Não sei quanto a vocês mas gosto mais da forma de apresentação de erros do FormItem do MX, o do Spark acaba usando mais espaço do formulário e o do MX considero mais “elegante” por não ser tão chamativo quanto o do Spark.

Alterando o FormItemSkin original consegui criar um com os mesmos comportamentos visuais do MX. Umas coisas que me chamaram a atenção no skin original:

O skin part indicatorDisplay tem um toolTip fixo com a palavra Required, não sei porque o Flex Team não fez internacionalização (I18N).
O skin part contentGroup marcando os styles showErrorTip e showErrorSkin para true mostra a borda vermelha com o toolTip da mensagem de erro.
Deixei também a possibilidade de usar o indicador de requirido atual ou o tradicional asterisco vermelho. Para aplicar o skin e o indicador é só usar o css abaixo, o que chama atenção aqui é se forem invertidas as linhas o indicador não é aplicado.

@namespace s “library://ns.adobe.com/flex/spark”;

@namespace mx “library://ns.adobe.com/flex/mx”;

s|FormItem

requiredIndicatorSource: Embed(source=”Assets.swf”,symbol=”mx.containers.FormItem.Required”);

skinClass: ClassReference(“br.com.ouromoderno.skins.FormItemClassicSkin”)

O fonte do skin pode ser baixado aqui: FormItemClassicSkin.mxml.

Ago 31

[Adobe Flex] Estilizando gráficos

Escrito por Gabriel Versallini em 1, 2.0, 2009, 3.5, 4, 6, Adobe, app, AR, Artigo, back, BI, Bindable, C#, class, código, collection, custom, DataProvider, event, events, Flex, git, Gráfico, ide, IE, if, image, layout, library, mg, MXML, O, on, pt, RIA, Ria’s Geral, S+S, spark, Stroke, UI, XML @ 08 31st, 2011 | via http://www.versallini.com.br | Sem comentários

Olá, galera! Neste artigo mostraremos uma maneira simples de estilizar gráficos no Flex, acrescentando poucas linhas de código. Veja a seguir:

Veja o resultado:

Gostou? Caso queria estilizar um pouco mais dê uma olhada na biblioteca CustomChartLib desenvolvida por Erko Bridee.

Até a próxima!
Abraço

Ago 31

Trabalhando com XStream para leitura e geração de XML

Escrito por Gabriel Versallini em 1, 4, api, app, apple, AR, Artigo, BI, boolean, C#, catch, class, classe, código, demo, desempenho, Download, email, Excel, for, ide, IE, if, int, Java, MXML, NaN, O, on, print, produtividade, pt, RIA, Ria’s Geral, S+S, string, TAT, Tema, Teste, try, UI, XML, XP @ 08 31st, 2011 | via http://www.versallini.com.br | Sem comentários

Olá! Neste artigo mostraremos um pouco do XStream, uma biblioteca Java open-source que permite a serialização de objetos em XML e vice-versa. Proporcionando ao programador um salto de produtividade na hora criar rotinas de importação e exportação com extrema rapidez e um desempenho excelente.

Vamos ao trabalho! Acesse o http://xstream.codehaus.org e faça download da biblioteca. Crie um projeto Java, referencie o arquivo xstream-1.4.1.jar no projeto e estará pronto para iniciar a codificação. Criaremos primeiro a nossa classe modelo, UsuarioVO:

package br.com.versallini.vo;

public class UsuarioVO

       private Integer id;
       private String  name;
       private String  email;

       // ... getters and setters

Agora criaremos o arquivo XML que será utilizado na importação, Usuario.xml:



	2
  	Steve Jobs
  	steve.jobs@apple.com.br

Agora sim podemos criar a nossa classe principal, XStreamUtil:

package br.com.versallini.util;

import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;

import br.com.versallini.vo.UsuarioVO;

import com.thoughtworks.xstream.XStream;
import com.thoughtworks.xstream.io.xml.DomDriver;

public class XStreamUtil

	public static void main(String[] args)

		XStreamUtil util = new XStreamUtil();

		UsuarioVO user = new UsuarioVO();
		user.setId(1);
		user.setName("Gabriel Versallini");
		user.setEmail("gabriel@versallini.com.br");

		util.exportFile(user);

		try

			util.importFile();

		catch (Exception e)

			System.out.print(e.getMessage());

	}

	private void formatXML(XStream xstream, Boolean attribute)

		xstream.alias("usuario", UsuarioVO.class);
		if (attribute)

			xstream.aliasAttribute(UsuarioVO.class, "id", "codigo");
			xstream.aliasAttribute(UsuarioVO.class, "name", "nome");
			xstream.aliasAttribute(UsuarioVO.class, "email", "email");

	}

	private void exportFile(UsuarioVO usuario)

		XStream xstream = new XStream(new DomDriver());
		formatXML(xstream, false);
		String xml = xstream.toXML(usuario);

		System.out.println(xml + "n");

	private void importFile() throws IOException

		File file = new File("./Usuario.xml");
		InputStream inputStream = new FileInputStream(file);
		XStream xstream = new XStream(new DomDriver());
		formatXML(xstream, false);

		UsuarioVO usuario = (UsuarioVO) xstream.fromXML(inputStream);

		System.out.println("########################################");
		System.out.println("ID: " + usuario.getId());
		System.out.println("Nome: " + usuario.getName());
		System.out.println("Email: " + usuario.getEmail());
		System.out.println("########################################");

}

O método formatXML na linha 38 permite que a leitura ou geração do arquivo XML em 2 formatos (com ou sem atributos), veja a seguir:


	1
  	Gabriel Versallini
  	gabriel@versallini.com.br

Simples, não?! Faça seus testes e divirta-se.

Até a próxima!
Abraço

Ago 18

Usando a API de atualização do Adobe AIR

Escrito por Leonardo França em .NET, 1, 2.0, 2009, 4, 6, action, Actionscript, Actionscript3, Adobe, Adobe Air, Air, api, Aplicativos, app, AR, auto, BI, botão, C#, chrome, class, classe, configuração, demo, Desenvolvedor, Download, err, erro, error, event, EventListener, events, exemplo, firefox, flash, flash builder, Flex, for, Formação, framework, function, Google, handle, html, IE, if, image, int, library, mg, MXML, novidade, Novidades, Number, O, on, Outros, PHP, platform, pt, quick, reference, referencia, RIA, Ria’s Geral, RoR, S+S, site, Software, spark, swf, TAT, Tema, Teste, UI, uint, update, Ved, web, window, XML @ 08 18th, 2011 | via http://www.leonardofranca.com.br | Sem comentários

Uma das funcionalidade que mais me foi útil no Adobe AIR, foi a adição de uma API mais bem elaborada para fazer atualização automatica de meus aplicativos. Isso pode ser muito importante porque nem todos os usuários tem tempo(ou vontade) de voltar no site do aplicativo para baixar a última versão.
Isso já é rotina para sistemas operacionais e softwares que usamos no dia-a-dia como o Mozilla Firefox e o Google Chrome(que nem pede permissão para atualizar né senhor Google).

A partir do Adobe AIR 1.5, temos a classe ApplicationUpdater e ApplicationUpdaterUI que tem como objetivo, definir o básico de funcionalidade de atualização para os aplicativos feitos com Adobe AIR

Gerenciar as atualizações pode ser complicado e o AIR update framework possui as API’s necessarias para que você faça isso de maneira prática e funcional. O desenvolvedor pode por exemplo:

Verificar atualizações por intervalo de tempo ou por requisição do usuário.
Baixar os arquivos de atualização da web
Avisar o usuário na primeira execução do software recém-instalado
Confirmar se o usuário deseja verificar se há atualizações
Exibir informações sobre a nova versão de atualização para o usuário
Exibir o status do download ou informação de erro para o usuário

As informações são obtidas a partir de arquivos XML onde você diz qual a última versão do software, as novidades da nova versão etc. Vamos a um exemplo prático, no caso usarei o Flash Builder que já deve ter os arquivos applicationupdater.swc e applicationupdater_ui.swc como referencia na biblioteca.
Começamos pelo xml chamado updateConfig.xml, que “dira” a seu aplicativo onde estão os arquivos para atualização.

PLAIN TEXT

XML:

version=“1.0″ encoding=“utf-8″?>
xmlns=“http://ns.adobe.com/air/framework/update/configuration/1.0″>
>http://localhost:81/leonardofranca/air/updates/testeUpdate/updateDescriptor.xml>
>1>
>

Ele deve ser salvo no mesmo diretorio da sua aplicação, junto com os outros arquivos xml e swf. Agora no Flex, instanciaremos a classe ApplicationUpdateUI e setaremos o arquivo xml de configuração para que o Flex possa saber onde está a atualização.

PLAIN TEXT

ACTIONSCRIPT3:

var appUpdater:ApplicationUpdaterUI = new ApplicationUpdaterUI();
appUpdater.configurationFile = new File(“app:/updateConfig.xml”);
appUpdater.initialize();
//via ActionScript
//appUpdater.updateURL = ” http://example.com/updates/update.xml”;
//appUpdater.delay = 1;

O arquivo updateDescriptor.xml é onde fica setado a versão em si da atualização do seu aplicativo e onde você pode colocar a descrição das novidades da atualização.

PLAIN TEXT

XML:

version=“1.0″ encoding=“utf-8″?>
xmlns=“http://ns.adobe.com/air/framework/update/description/2.5″>
>0.0.2>
>http://localhost:81/leonardofranca/air/updates/testeUpdate/testeUpdate_0.0.2.air>
>
This version has fixes for the following knowns issues:
*First issue
*Second issue
]]>>
>

Basicamente é isso, vamos só implementar a chamada para que ao abrir o aplicativo, ele verifique se existe atualização.

PLAIN TEXT

MXML:

“1.0″ encoding=“utf-8″?>
xmlns:fx=“http://ns.adobe.com/mxml/2009″
xmlns:s=“library://ns.adobe.com/flex/spark”
xmlns:mx=“library://ns.adobe.com/flex/mx” creationComplete=“windowedapplication1_creationCompleteHandler(event)”>
>
[CDATA[
import air.update.ApplicationUpdaterUI;
import air.update.events.UpdateEvent;
import mx.events.FlexEvent;
private var appUpdater:ApplicationUpdaterUI;
protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void
appUpdater = new ApplicationUpdaterUI();
appUpdater.configurationFile = new File("app:/updateConfig.xml");
appUpdater.addEventListener(ErrorEvent.ERROR, onError);
appUpdater.addEventListener(UpdateEvent.INITIALIZED, handlerInit);
appUpdater.initialize();
//via ActionScript
//appUpdater.updateURL = " http://example.com/updates/update.xml";
//appUpdater.delay = 1;
protected function onError(event:ErrorEvent):void
trace(event.text);
protected function handlerInit(event:UpdateEvent):void
appUpdater.checkNow();
]]>
>
>
>
>

Criei uma segunda versão do meu aplicativo de teste para demonstração, deveremos ter o seguinte resultado:

Clique para ampliar

Caso o usuário queira verificar se existe alguma atualização do aplicativos, basta clicar no botão “check for upadates. O arquivo atualizado é baixado e instalado.

Clique para ampliar

Referências:
http://help.adobe.com/en_US/air/build/WS9CD40F06-4DD7-4230-B56A-88AA27541A1E.html
http://www.adobe.com/devnet/air/flex/quickstart/articles/update_framework.html

Jul 27

Qual a diferença entre Application, Component, Module, ItemRenderer e Skin ?

Escrito por Daniel Schmitz em 1, 2.0, app, aprender flex, AR, C#, Componente, DataGrid, exemplo, Flex, Flex 4, for, Formulário, Geral, int, itemRenderer, lista, MXML, O, on, RIA, Ria’s Geral, S+S, server, spark, swf, tag, TextInput, UI, XML @ 07 27th, 2011 | via http://flex.etc.br | Sem comentários

O nosso leitor Sandro André nos fez uma pergunta muito boa para quem está começando a aprender Flex, veja:

“queria tirar uma dúvida, o que é e para que server MXML APPLICATION, MXML MODULE, MXML COMPONENT,? MXML ITEM RENDERER, E MXML SKIN?”

Fiz uma resposta rápida, mas seria interessante adicionarmos mais informações através dos comentários. Conto com vocês!

MXML Application: É a aplicação principal, que “vira” um arquivo SWF
na compilação.

MXML Module: É um módulo, um pedaço da aplicação principal, que também? ”vira” um SWF, mas é dependente de um MXML Application

MXML Component: É um componente que é adicionado ao MXML
Application/Module. Geralmente uma tela, um formulário, um Panel, um
DataGrid.

MXML Item Renderer: É uma renderização personalizada de um item de uma? lista. Uma lista pode ser um Spark List, Um datagrid, um combobox,
etc.

MXML Skin: É a forma como um componente pode ser desenhado. Por
exemplo, um combo box é formado por um Spark TextInput e um Spark
Button. A skin pode mudar essa forma.

Jul 13

5 teclas de atalho essenciais no Flash Builder 4.5

Escrito por Daniel Schmitz em 1, Access, AR, arte, busca, C#, class, classe, código, Componente, event, exemplo, explorer, flash, flash builder, Flash Builder 4, for, handle, ide, IE, if, int, menu, MXML, O, on, Pessoal, procura, produtividade, programação, quick, RIA, Ria’s Geral, S+S, Sugestões, UI, XML, XP @ 07 13th, 2011 | via http://flex.etc.br | Sem comentários

Pessoal,

todas as IDEs possuem centenas de teclas de atalho que são muito úteis para aumentar a produtividade do programador. No Flash Builder, não poderia ser diferente, e excluindo a tecla mais importante que é CTRL+S, exibo a seguir 5 teclas essenciais para acelerar o seu desenvolvmento, veja:

CTRL+3 ? Quick Access

Usada para executar um comando da IDE, como por exemplo criar uma classe, abrir as preferências do projeto, ou então executar a aplicação. Acostume-se a usar esta tecla ao invés de ficar procurando itens no menu da aplicação

CTRL+1 Quick Assis

Usada para fornecer sugestões ao código. Uma das aplicações é criar um método/propriedade que não existe, criar event handlers, etc.

CTRL+O Quick Outline

Usada para navegar no arquivo aberto. Por exemplo, se você está em uma classe ou mxml e quer ir para outra parte do código, como um método ou componente qualquer, acione a tecla e faca a busca. É útil também para ver os métodos e propriedades de uma classe.

CTRL+SHIFT+R Open Resource

Permite abrir qualquer classe ou arquivo do projeto, muito útil e mais rápido que ficar procurando a classe no Package Explorer.

ALT+ Seta para cima/baixo

Selecione um código e use estas teclas para ver o resultado. O texto é facilmente movido. Útil para inserir códigos prontos em um laço ou para refatorar a ordem dos métodos.

Aplicando estas teclas de atalho, você irá perceber que a sua programação será mais rápida e produtiva. Experimente!

Se você achar mais alguma tecla interessante, não deixe de comentar !

Jun 20

Criando um Componente de Notificação com Flex 4

Escrito por Pablo Souza em 1, 2.0, 3d, 4, 6, Adobe, AR, BI, blog, browser, C#, class, classe, classes, código, código fonte, Componente, Design, Design Pattern, Diversos, Excel, exemplo, flash, flash builder, Flex, Flex 4, fonte, for, html, IE, if, int, MXML, O, on, padrão, pattern, Projetos, Ria’s Geral, S+S, singleton, spark, state, TAT, Treinamento, UI, Vários, XML, XP @ 06 20th, 2011 | via http://rectius.com.br/blog | Sem comentários

Faz algum tempo que não escrevo aqui no blog, estou em vários projetos simultâneos e acabei ficando sem gás para escrever no mesmo ritmo que antes. Para compensar, hoje vou disponibilizar um componente de notificação bem bacana que criei para um treinamento in company de Flex. O código aborda diversos conceitos interessantes do Flex 4 como states, FXG e Spark Skinning. Além disso, o componente é um excelente exemplo de onde utilizar o design pattern Singleton.

O componente possui 3 classes:

NotificatorMode.as
Utilizado como um “Enum”, define as constantes que representam os estados do componente: Warning, Success e Failure.

NotificatorManager.as
Implementação do padrão de projeto Singleton, responsável por manipular as mensagens de notificação.

Notificator.mxml
Classe que define a aparência, comportamento e estados do componente de notificação.

A pasta /assets contêm os arquivos que foram gerados no Fireworks e exportados como FXG para o Flash Builder.

Your browser does not support iframes.

Quer o código fonte? Baixe aqui..

Espero que tenham gostado. Até a próxima!

Jun 16

Flex com Multilinguagem (internacionalização)

Escrito por SamuelFacchinello em 1, 2.0, 2009, 4, 6, Adobe, Adobe Flex, app, AR, BI, Bindable, blog, Blogs, botão, C#, DataProvider, exemplo, Flex, fonte, for, framework, Frameworks, function, Google, html, ide, idiomas, IE, image, instalação, int, label, layout, library, Links, mg, MXML, O, on, opensource, PMP, pt, RIA, Ria’s Geral, S+S, SDK, spark, string, SVN, TAT, Tema, TextInput, UI, uint, Vários, XML @ 06 16th, 2011 | via http://desenvolvendoemflex.blogspot.com/ | Sem comentários

Olá!!

Hoje vou mostrar como fazer um sistema Multilinguagem (alterando locales) no Flex. Conforme o exemplo:

*Para ver o fonte, clique com o botão direito do mouse e ViewSource.

Para isso você precisa ter os locales das linguagens. Os locales podem ser baixados nesses links:

Estes locales devem ser colocados no diretório: “instalaçãodoflex/sdks/versaodosdk/frameworks/locale/”.

Configurando o projeto
Clique com o botão direito do mouse no projeto, vá em “properties” depois em “Flex Compiler”, em “Additional compiler arguments:” coloque o seguinte:
-locale en_US pt_BR -source-path+=../locale/locale

Ficando assim:

Após configurar o locale do seu projeto, você deve criar as pastas “projeto/locale/en_US” e “projeto/locale/pt_BR” e adicionar o arquivo “localization.properties” dentro de cada pasta.

en_US

label_selecione_linguagem=Select your language
label_nome=Name
label_sobrenome=Last Name
send_btn=Send

pt_BR

label_selecione_linguagem=Selecione a linguagem
label_nome=Nome
label_sobrenome=Sobrenome
send_btn=Enviar

Para ler estes arquivos faz assim:



    
        
    

    
        

    
  [ResourceBundle('localization')]

sendo a variável LOCALIZATION o nome do arquivo criado (pode ter vários).
para ler cada linha do arquivo utiliza-se:

resourceManager.getString(LOCALIZATION, 'string')

Por hoje é isso!!

Comente!

Mai 19

10 coisas que um bom programador flex deve saber

Escrito por Daniel Schmitz em .NET, 1, 2.0, 2009, 3.5, 4, 6, action, Action Script, Actionscript, ActionScript 3, Actionscript 3.0, Actionscript3, Adobe, Air, api, Aplicativos, Apresentação, AR, Arquitetura, arte, Artigo, as3, BI, Bindable, blog, bug, builder 4, C#, Cairngorm, class, classe, classes, código, código fonte, Componente, Componentes, components, control, Controles, css, Curso, Cursos, custom, dados, Data Binding, DataGrid, Debug, demo, desempenho, Desenvolvedor, desenvolvedores, Design, developer, development, dispatch, dispatchEvent, DRE, empresas, err, Estilo, event, EventListener, Evento, Eventos, eventos customizados, events, Excel, explorer, Ferramenta, flash, flash builder, Flash Builder 4, Flash Player, Flex, Flex 3, Flex 4, Flex Examples, fonte, for, framework, Frameworks, Google, Gráfico, handle, html, HTTPService, ide, IE, if, int, interface, Java, layout, lista, live, Livro, lógica, map, Mate, MAX 2009, mvc, MXML, O, on, oop, opensource, Outros, player, polimorfismo, problema, problemas, programação, Projetos, pt, RIA, Ria’s Geral, ruby, S+S, site, skins, Sun, tag, TAT, Tech, Tecnologia, tv, UI, uint, utf8, Ved, Vídeo, vs, web, Webservice, XML, XP @ 05 19th, 2011 | via http://flex.etc.br | Sem comentários

Esta é uma tradução do seguinte artigo: 10 Things A Good Flex Developer Should Know

Para ser um bom programador Flex é preciso mais que simplesmente saber como usar alguns componentes nativos do Flex. É preciso muito mais.

Aqui está minha contribuição sobre o assunto… juntamente com alguns recursos ou algumas palavras-chave que você poderá pesquisar facilmente através do Google.

Por favor, comente no blog se você achar que esqueci algo (o que é inevitável) ou se quiser sugerir alguns recursos interessantes que devo acrescentar.

1- Programação orientada a Objetos (OO)

O Flex se baseia na linguagem ActionScript3, que é totalmente orientada a objetos. Embora não seja um conceito fácil de aprender, programação orientada a objeto é um pré-requisito para aprender Flex. Se já possui experiência com OO (Java, C#, Ruby, etc), então você está pronto. Se não, você precisará pegar um livro sobre OO e começar a aprender o mais rápido possível.

· Head First Java (Java? Sim, Eu sei. Mas confie em mim.)

· Object-oriented programming with ActionScript 3.0

Nota: Alguns de vocês poderão perguntar – “O que são padrões de projetos?”. Vamos dar um passo de cada vez? Preocupe-se em entender classes e objetos, interfaces, herança, composição, polimorfismo, encapsulamento, etc. Só então considere estudar padrões de projetos. De fato, se eu escrever um post intitulado “10 coisas que um GRANDE programador Flex deve saber”, padrões de projeto estará nessa lista.

2- ActionScript/MXML

ActionScript é a linguagem de programação usada juntamente com MXML para criar aplicações Flex. MXML é uma linguagem de marcação baseada em XML. Cada tag MXML é mapeada diretamente para uma classe ActionScript correspondente. MXML é usado pelos desenvolvedores Flex principalmente para apresentar a interface do usuário, enquanto que, o ActionScript é usado para a lógica de negócio. Com exceções, é claro.

O Framework Flex inclui centenas de classes ActionScript e interfaces usadas para desenvolver aplicações Flex. Seu nível de habilidade como um desenvolvedor Flex está diretamente ligado ao seu conhecimento em relação ao ActionScript e MXML.

· Flex in a Week

· Tour De Flex

· Essential ActionScript 3.0

Nota: Fique ? vontade com a API do Flex. Como um desenvolvedor Flex, você vai usá-la diariamente.

3- Debugging

Boa parte do tempo de qualquer programador é gasto no debugging. Obviamente, é necessário debugar para rastrear a causa de bugs. No entanto, também é uma ótima maneira de conhecer o código fonte.

Felizmente, existem muitas ferramentas disponíveis para ajudá-lo com o trabalho de debugging. Invista algum tempo para aprender essas ferramentas. Seu investimento irá proporcionar retorno imediato.

· Flash Builder 4.5 Debugger

· De MonsterDebugger

· Kap Inspect

4- Programação orientada a eventos

Aplicações Flex são orientadas a eventos. Toda ação é o resultado de um evento assíncrono.

Como um desenvolvedor Flex, você deve saber como responder a eventos e como criar e disparar eventos. Para isso, é necessária uma sólida compreensão da arquitetura de eventos do Flex, incluindo familiaridade com os seguintes conceitos:

· Eventos nativos (Flash Player ou Framework de eventos Flex)

· Eventos customizados (Eventos criados pelo desenvolvedor, que estende a classe Event ou uma de suas subclasses)

· Disparar eventos, propagação de eventos (ver classe EventDispatcher e seu método dispatchEvent)

· Event listeners, event handlers (ver classe EventDispatcher e seus métodos addEventListener e removeEventListener)

· Fases do evento (capture, target & bubbling phases; target vs. currentTarget)

· Objetos do evento, tipos de eventos (ver classe Event e subclasses)

· Comportamento do evento default (ver classe Event e subclasses e seu método preventDefault)

5- Data binding

Aparentemente, data binding é um “no brainer”[1]. É só vincular o valor de uma propriedade ao valor de outra propriedade usando chaves. Quando o valor da propriedade de origem for alterado, o valor da propriedade de destino também é alterado.

No entanto, existe uma sobrecarga associada ao uso indiscriminado de data binding, podendo haver implicações no desempenho. Uma sólida compreensão de data binding ajudará a determinar quando é apropriado o seu uso e quando não é.

· Flex Tips – Using Bindable Metadata Events

· Michael Labriola’s presentation entitled Diving in the Data Binding Waters

6- Item renderers

Uma característica de uma aplicação Flex bem projetada é a apresentação dos dados de uma forma visualmente atraente. O Flex oferece uma série de controles baseados em listas (DataGrid, List, TileList, HorizontalList, etc) responsável pela apresentação dos dados. Portanto, pode-se personalizar a exibição dos dados com a ajuda de item renderers.

Você irá consumir muito tempo trabalhando com item renderers. Então é melhor saber bem como ele funciona.

· Flex Examples – Item Renderers in Practice

· A Deep Dive into Flex 4 Lists and Layouts

7- Acesso remoto a dados

Você conhece muitas aplicações que não interagem com os dados? Eu também não. Saiba como recuperar dados através de HTTPServive, WebService e RemoteObject. A arquitetura do framework Flex também poderá ajudá-lo com isso (ver #9).

· Retrieving and handling data with HTTPService

· Retrieving and handling data with WebService

· Retrieving and handling data with RemoteObject

8- Styling / Skinning

Não vamos nos esquecer que o Flex é uma tecnologia de interface e, como tal, certamente há expectativas em relação ao design. Como um desenvolvedor Flex, você deve ser capaz de personalizar a aparência de seus aplicativos usando estilos CSS, gráficos e/ou skins.

Com o Flex 4, não há mais desculpas. Use um pouco do seu tempo para conhecer de uma vez o lado direito do seu cérebro. É uma excelente mudança de paradigma, e vai ajudá-lo a diferenciar-se dos outros desenvolvedores Flex.

· Flex Style Explorer

· ScaleNine

· Introduction to Flex: Part 3 – Styles & Skins

9- Pelo menos um framework de arquitetura Flex

A maioria dos frameworks de arquitetura Flex impõe uma separação de camadas através da implementação do MVC (model-view-controller). Além disso, esses mesmos frameworks especificam como seu código deve ser organizado dentro do projeto Flex.

Embora muitos argumentariam que os frameworks são desnecessários, acredito que os desenvolvedores Flex se beneficiam em muitos aspectos da experiência de usá-los. Basta assistir ? s técnicas (boas ou más) empregadas por um framework para resolver problemas complexos de arquitetura. Isso contribuirá para seu crescimento como um desenvolvedor Flex.

Além disso, é difícil negar o fato de que a experiência com framework aumentará substancialmente o seu valor comercial como um desenvolvedor Flex. Jesse Warden me disse recentemente “Existem poucas empresas que não usam frameworks, mas isso é raro. Queiramos ou não, está na ‘moda’”. Eu concordo com Jesse.

· Cairngorm

· Parsley

· PureMVC

· Mate

· Swiz

· Robotlegs

10- Ciclo de vida de componentes e display list

Eu não estava convencido da necessidade de aprender o ciclo de vida de componentes Flex ou da display list até que escrevi o meu primeiro componente customizado (na verdade foi um componente semi-customizado que se estendia do componente Canvas). Até essa época eu usava componentes nativos do Flex, usando apenas o MXML enquanto que a display list era renderizada para mim. Em nenhuma vez tive que usar os métodos addChild, createChildren ou commitProperties, e usava o evento creatiomComplete para tudo.

Meu primeiro componente customizado usava uma quantidade enorme de eventos assíncronos, e eu não poderia prever a ordem em que cada evento seria disparado. Só depois que eu aprendi os métodos e variáveis do ciclo de vida dos componentes do Flex que eu pude ter um certo controle.

Estes métodos do ciclo de vida estão lá para serem usados. Saiba como funcionam e use-os para o seu benefício. Sua vida será mais fácil e você perderá menos cabelos.

· Colin Moock’s Lost ActionScript Weekend – The Display List

· Creating New Components in Flex 3

· Diving Deep with the Flex Component Lifecycle

· Understanding the Flex 3 Component and Framework Lifecycle

[1] Expressão americana usada para algo que requer pouco esforço mental ou inteligência para realizar ou compreender

« Entradas anteriores |