Mar 11

Manifesto Flex Brasil

Flex / Flex Builder 1 Comment »

Saiba o que é o Manifesto Flex Brasil

Minha principal contribuição para a comunidade:

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

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

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

Iniciando com Cairngorm.

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

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

Eu passo a bola para: Fabio Vedovelli

 

Mar 08

Iniciando com Cairngorm – Parte 3

Flex / Cairngorm, Flex Builder 1 Comment »

Agora que você tem isolados dois elementos específicos do Micro-Arquitetura Cairngorm, vamos agora criar uma aplicação mais completa. Até agora os tutoriais abrangeo apenas um design pattern, o ModelLocator, mas agora você será apresentado ao elemento mais determinante do Cairngorm, o Serviço ao Trabalhar com design padrão. A explicação deste padrão será em dois tutoriais. Este tutorial destina-se a cobrir o fluxo básico dentro de uma aplicação Cairngorm, bem como o próximo tutorial será expandida para incluir este fluxo servidor interação. No entanto, antes que você possa aplicar adequadamente este projeto padrão você precisa aprender sobre a organização de um projecto Cairngorm

Organizando um projeto Cairngorm

Uma das tarefas envolvidas com o projeto é qualquer organização. Ao trabalhar com outros desenvolvedores, esta se torna extremamente importante. Normalmente, um projeto Cairngorm é organizado da seguinte forma:

Existe um arquivo Main.mxml que é a aplicação principal para o Cairngorm.
• Os arquivos do projeto estão contidos em uma pasta que usa o formato ” reverse-dns “. Por exemplo, se o projecto foi nomeado CairngormSample, gostaria de utilizar as seguintes pastas net / davidtucker / CairngormSample.
• Dentro do diretório CairngormSample, haverá as seguintes pastas (haverá outras pastas adicionado no próximo tutorial).

  • event/ - Este diretório mantém todos os eventos personalizados para a aplicação
  • control/ - Este diretório é a casa do FrontController para a aplicação
  • commands/ - Este diretório contém os comandos que são chamados pela FrontController
  • model/ - A ModelLocator está contido nesta pasta (e outras classes relacionadas com o model)
  • view/ - Os componentes de view estão contidos neste diretório

Seguindo esse padrão, você pode saber onde encontrar qualquer classe que você pode precisar na sua aplicação Cairngorm. A Figura 1 ilustra esta estrutura de projeto. Ele também é um bom processo de desenvolvimento a ter um padrão estrutura organizacional para seus projetos - mesmo se você não estiver usando Cairngorm
Cairngorm Project Folder
Figure 1 - Cairngorm Project Structure

O serviço para trabalhar com padrão.

O Serviço para Trabalhar com Padrão é o mais difícil para a maioria das pessoas entenderem. Abrange mais da lógica da aplicação Cairngorm. Para compreender este padrão, será necessário compreender algumas das classes que estão incluídas no Cairngorm e seus respectivos efeitos.

• CairngormEvent [Referência] - CairngormEvent é central nesse padrão. Trata-se do evento. Para o evento ser tratados adequadamente no Cairngorm, ela terá de ser do tipo CairngormEvent.
• CairngormEventDispatcher [Referência] - CairngormEventDispatcher efetivamente as expedições CairngormEvents. É um Singleton (tal como o ModelLocator). Em versões anteriores Cairngorm, que poria esta classe regular, mas agora CairngormEvents pode-se (através do método de expedição). Este método é simplesmente um wrapper para o CairngormEventDispatcher, por isso mesmo se não tiver realmente importado e chamado a classe, ainda é central para o Service to Worker pattern em Cairngorm.
• FrontController [Referência] – Os mapas FrontController é um CairngormEvent para um Command.
• ICommand [Referência] - Para um comando funcionar corretamente em Cairngorm, ele precisa implementar a interface ICommand. Essa interface exige que um comando terá um método chamado execute e que aceitará o CairngormEvent que é mapeada para ela como um argumento.

O Event Flow do Cairngorm

A forma que essas classes interagem é o Cairngorm Evento Flow. A Figura 2 ilustra todo este processo. Enquanto este processo parece moroso, que segue uma ordem lógica.
Basic Cairngorm Event Flow
Figure 2 - Cairngorm Basic Event Flow
Por exemplo, assumir que a Figura 2 mostra o que acontece quando o usuário clica em um botão login. Tratar-se-ia seguir os seguintes passos

  • O usuário está visualizando um componente que tem um botão login.
  • Quando o botão é clicado, esse componente disparará um evento chamado LoginEvent que se estende CairngormEvent.
  • O FrontController irá receber o LoginEvent e executar o comando que é mapeado para o evento. Para este exemplo, será nomeado LoginCommand e implementará ICommand.
  • O comando é executado e recebeu o LoginEvent como um argumento. O LoginCommand irá alterar o valor workflowState no ModelLocator.
  • O ModelLocator terá uma constante predefinida para o ” Logged in View “. O comando irá mudar workflowState para este valor.
  • Neste ponto a view assumirá workflowState, irá automaticamente atualizar-se para a nova posição.

Depois que esses itens são entendidos, a próxima coisa mais importante para compreender O Cairngorm é: Tudo Deve Ser mapeadas para um evento. Trata-se de um excesso de simplificação drástica, mas é válido em muitas situações. Quando o usuário clica em um botão login - ele deve enviar uma CairngormEvent. Quando o usuário seleciona uma opção de mudar de opinião - ele deve enviar uma CairngormEvent. Quando um usuário envia um formulário para ser armazenado em um banco de dados - o formulário deverá enviar uma CairngormEvent. A expedição de um CairngormEvent conjuntos tudo em movimento

Custom CairngormEvent

A classe CairngormEvent pode ser utilizada dentro de seu projeto, mas na maioria das situações você irá criar seus próprios eventos personalizados que se estendem CairngormEvent (como afirmado anteriormente, de um evento para ser incluído no Cairngorm Event Flow ela deve estender CairngormEvent). Outra razão para criar eventos é personaliza-los para criar propriedades personalizadas do evento, que contêm os dados que você precisa passar para o comando. CairngormEvent tem uma propriedade denominada data (tipo de objeto), que podem conter dados, mas é ideal para ter uma propriedade strongly-typed onde você pode colocar os dados para passar.

Para este exemplo vai criar um evento que corresponde ao exemplo anterior de uma página de login. Este evento terá de cumprir os seguintes critérios:

  • Estender CairngormEvent
  • Ter uma propriedade para o nome de usuário
  • Ter uma propriedade para a senha

Código Exemplo 1 ilustra este evento concluído. Você pode ver que você precisará importar tanto a classe CairngormEvent como a basic Event. Além disso, tal como acontece com todos os eventos, você tem que definir o evento constante. Neste caso, você pode usar LOGIN. As propriedades são definidas abaixo do constante - e eles também são passados para o construtor. A única coisa fora do normal é que você precisa se sobrepor ao método público clone (). Isto é o que o método utiliza o evento para fazer uma cópia de si mesmo. Isto é fundamental no Cairngorm Event Flow. Além disso, para a função de implementar ICommand este método terá de ter um retorno tipo de evento (e não CairngormEvent).

Actionscript:

  • package net.davidtucker.CairngormSample.events {
  •    
  •     import com.adobe.cairngorm.control.CairngormEvent;
  •     import flash.events.Event;
  •    
  •     public class LoginEvent extends CairngormEvent {
  •    
  •         public static const LOGIN:String = “Login”;
  •        
  •         public var username:String;
  •         public var password:String;
  •        
  •         public function LoginEvent(submittedUsername:String,submittedPassword:String) {
  •             username = submittedUsername;
  •             password = submittedPassword;
  •             super(LOGIN);         
  •         }
  •        
  •         override public function clone():Event {
  •             return new LoginEvent(username,password);
  •         }
  •    
  •     }
  • }

Code Example 1 - Custom Event

Comandos

Os comandos dentro de um atual aplicativo Cairngorm “comando” da aplicação. Mesmo no próximo tutorial onde será interagindo com um servidor, o comando ainda fará a maioria dos trabalhos. Neste exemplo, você irá criar um componente que irá receber o nome de usuário e a senha do LoginEvent, verificar os valores contra valores  hard-coded e, em seguida, mudar o workflowState no ModelLocator se os valores estão corretos. O exemplo a seguir executa estas etapas (mas não tem os valores hard-coded incluídos - que serão cobertas no vídeo).

A primeira coisa a notar sobre o código abaixo no Código Exemplo 2 é que o LoginCommand implementa ICommand. Para conseguir isso a classe ICommand também é importado. Além disso, você vai notar o código boilerplate que você usou no passado para trazer no ModelLocator. Para implementar correctamente ICommand, o método execute () também é criado. Ele recebeu um evento do tipo CairngormEvent (tem que ser CairngormEvent e não LoginEvent para implementar correctamente ICommand). Para utilizar corretamente o caso, você precisará fazer um cast com este evento do tipo LoginEvent (o processo de casting será explicado no vídeo). A verdadeira lógica foi deixada fora deste comando, mas você pode ver que as atualizações ModelLocator de view. Depois que a lógica é implementada esta linha de código seria provavelmente colocado dentro de uma condição IF().

Actionscript:

  • package net.davidtucker.CairngormSample.commands {
  •    
  •     import com.adobe.cairngorm.commands.ICommand;
  •     import com.adobe.cairngorm.control.CairngormEvent;
  •     import net.davidtucker.CairngormSample.events.LoginEvent;
  •     import net.davidtucker.CairngormSample.model.ViewModelLocator;
  •        
  •     public class LoginCommand implements ICommand {
  •        
  •         public var modelLocator:ViewModelLocator = ViewModelLocator.getInstance();
  •        
  •         public function LoginCommand() {
  •         }
  •        
  •         public function execute(event:CairngormEvent):void {
  •        
  •             var loginEvent:LoginEvent = event as LoginEvent;
  •            
  •             // COMMAND LOGIC
  •            
  •             modelLocator.workflowState = ViewModelLocator.WELCOME_SCREEN;
  •            
  •         }
  •     }
  • }

Code Example 2 - Cairngorm Command

Controle de Frente (Front Controller)

Tal como referido anteriormente, o FrontController mapeia seus comandos CairngormEvents específicos. Sem isso, o evento jamais se integrará no fluxo Cairngorm. A classe estende FrontController e tem dois métodos: o método constructor e initialize o. O método initialize é onde você irá utilizar o método addCommand para mapear seus eventos de comandos (como se pode ver com o LoginEvent e LoginCommand).

Actionscript:

  • package net.davidtucker.CairngormSample.control {
  •    
  •     import com.adobe.cairngorm.control.FrontController;
  •    
  •     import net.davidtucker.CairngormSample.commands.*;
  •     import net.davidtucker.CairngormSample.events.*;
  •    
  •     public class SampleController extends FrontController {
  •    
  •         public function SampleController() {
  •             this.initialize();
  •         }
  •        
  •         public function initialize():void {
  1.            
  2.             //ADD COMMANDS
  3.             this.addCommand(LoginEvent.LOGIN,LoginCommand);
  4.            
  5.         }
  6.    
  7.     }
  8. }

Code Example 3 - The Cairngorm FrontController

Simplesmente criar um FrontController não é suficiente. Como qualquer classe que tem que ser instanciada dentro de sua aplicação. Código Exemplo 4 ilustra a forma de instanciar seu FrontController no Main.mxml de sua aplicação. Você só precisa adicionar o diretório como um controle XML Namespace e, em seguida, incluir a tag FrontController no arquivo.

mxml:

  • <?xml version=”1.0″ encoding=”utf-8″?>
  • <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
  •     xmlns:control=”net.davidtucker.CairngormSample.control.*”
  •     layout=”absolute”>
  •    
  •     <control:FrontController id=”controller” />
  • </mx:Application>

Code Example 4 - Integrating a FrontController

Agora que você tem visto os elementos básicos de um projeto Cairngorm, você pode realmente construir a amostra de trabalho com o vídeo. Como sempre, o código pedido está abaixo.

Tradução do original inglês: http://www.davidtucker.net