Luis Carlos Quinhone -Designer / Developer

Part 2 - Usando uma ModelLocator para Gerenciar A View

Nota: Tal como acontece com todos os tutoriais que virão nesta série, esta lição tem duas partes. Em primeiro lugar, no artigo você vai aprender a teoria por trás do tema e, em seguida, no vídeo que você vai fazer um verdadeiro ” code-along “. O artigo dará algumas instruções de como configurar o seu projeto de ” code-along “.

No tutorial anterior você aprendeu as vantagens de usar um ModelLocator para manipular os dados dentro de um aplicativo, no entanto, a vantagem do ModelLocator padrão se estende para além da gestão de dados. Pode manipular a “view” de uma aplicação tão bem. Para ver como funciona na gestão Cairngorm, primeiro você precisa criar um novo projeto chamado “ViewManager” e o nome do arquivo principal aplicação “Main.mxml”. Para este projeto, você também vai necessitar adicionar o Cairngorm.swc para construir o seu projeto (como descrito na parte 1). Também será necessário criar duas novas pastas dentro do “src” pasta: view e model. Quando estiver concluído, o projeto deve ser parecido à Figura 1 abaixo.

Figure 1 - ViewManager Project

Em seguida, você precisará ter o código do ModelLocator do tutorial anterior e colocá-lo dentro do seu aplicativo. Já publicamos o código abaixo para sua conveniência.

Actionscript:

1. package model {
2.     import com.adobe.cairngorm.model.IModelLocator;
3.     [Bindable]
4.     public class ViewModelLocator implements IModelLocator {
5.         // Single Instance of Our ModelLocator
6.         private static var instance:ViewModelLocator;
7.         public function ViewModelLocator(enforcer:SingletonEnforcer) {
8.         if (enforcer == null) {
9.                 throw new Error( “You Can Only Have One ViewModelLocator” );
10.             }
11.         }
12.         // Returns the Single Instance
13.         public static function getInstance() : ViewModelLocator {
14.             if (instance == null) {
15.                 instance = new ViewModelLocator( new SingletonEnforcer );
16.             }
17.             return instance;
18.         }
19.         //DEFINE YOUR VARIABLES HERE
20.     }
21. }
22. // Utility Class to Deny Access to Constructor
23. class SingletonEnforcer {}

Example 1 - The ModelLocator from Part 1

Se precisar de mais informação sobre a ModelLocator, volte a parte 1 do tutorial.
O único item que deve ser mudado na ModelLocator é a declaração “package”. Para este projeto, ser-lhe-á a colocação ModelLocator na pasta “model”, de modo que o caminho do package simplesmente precisa de mim “model” (ele já foi corrigido acima). Também será necessário adicionar uma variável à sua ModelLocator inicialmente. Esta variável será chamado “workflowState” e será do tipo “uint”. A declaração será semelhante a este:

Actionscript:

1. public var workflowState:uint = 0;

Example 2 – definindo a variável workflowState
Esta variável será utilizada para “controlar” a view da sua aplicação. A forma mais comum de conseguir isto é usar um ViewStack. Se você não estiver familiarizado com um ViewStack, sinta-se livre para ler esta informação. Um ViewStack tem uma propriedade denominada “selectedIndex”. Este valor numérico que define ” child ” é visível no ViewStack. Considere o seguinte código:

mxml:

1. <mx:ViewStack id=”myViewStack”>
2.   <mx:HBox id=”box1″>
3.     <mx:Label text=”I am Box 1″ />
4.   </mx:HBox>
5.   <mx:HBox id=”box2″>
6.     <mx:Label text=”I am Box 2″ />
7.   </mx:HBox>
8.   <mx:HBox id=”box3″>
9.     <mx:Label text=”I am Box 3″ />
10.   </mx:HBox>
11. </mx:ViewStack>

Example 3 - A exemplo simples de ViewStack
Inicialmente, o valor de selectedIndex é 0. Com esta configuração “box1″ seria visível. Se você emitir o seguinte comando

Actionscript:

1. myViewStack.selectedIndex = 1;

Example 4 - Configurando o selectedIndex
Então a caixa denominada “box2″ seria visível. No entanto, se você aplicar o ModelLocator a este conceito, você poderia usar o workflowState varaible para definir a propriedade selectedIndex. Ao vincular a selectedIndex ao valor workflowState, agora você tem controle total sobre o que é apresentado no ViewStack de seu ModelLocator

mxml:

1. <mx:ViewStack id=”myViewStack” selectedIndex=”{modelLocator.workflowState}”>
2.   …
3. </mx:ViewStack>

Example 5 - vinculando o selectedIndex ao workflowState

Definir constantes para melhorar o código

Seria simples para manipular a view utilizando este método, porém, poderia levar o código potencialmente confuso. Por exemplo, suponha que você tem os seguintes:

• Um ViewStack com dois filhos: um login e uma tela Welcome
• O ViewStack’s selectedIndex está vinculado à propriedade workflowState
• Um botão login que executa a ação mostrada no Exemplo 4.

Isto pode parecer como se ele funcionasse corretamente, mas ele não conta para quaisquer alterações. Se outro filho é adicionado à ViewStack, poderia ficar fora da ordem. Tem de haver uma maneira melhor para definir manualmente a propriedade selectedIndex. Para conseguir isso, você só precisa definir constantes dentro da ModelLocator

Actionscript:

1. //DEFINE YOUR VARIABLES HERE
2. public var workflowState:uint = 0;
3. // DEFINE VIEW CONSTANTS
4. public static const LOGIN_SCREEN = 0;
5. public static const WELCOME_SCREEN = 1;

Example 6 – Definindo constantes View no ModelLocator.

Ao usar esse método, você só tem que alterar o valor em um único local, se o número de children ou a ordem das children mudarem no ViewStack. Agora, você deve atribuir o botão login as seguintes medidas para o evento clique.

Actionscript:

1. myViewStack.selectedIndex = ViewModelLocator.WELCOME_SCREEN;

Example 7 – Fixando a View com constantes definidas.

Não só para proteger contra futuras mudanças, você também fez o seu código muito mais lógico. Outro desenvolvedor poderia facilmente analisar o código e entender o processo sem ter de referenciar todas as children no ViewStack.

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