Salve pessoal,

Neste artigo irei demonstrar como criar um componente visualizador de mensagens bem parecido com o que msn utiliza.
É muito comum hoje em aplicações Flex/Air a necessidade de transpor informações entre a app e usuário. A grande parte dos usuário não ficam satisfeitos quando ao realizar alguma tarefa o sistema exiba na parte central da aplicação uma caixa com texto e uns botôes. Há alguns fatores importantes que devem ser levados em consideração.

1 – Usuário não tem o costume de ler toda a informação contidas em alertas.
2 – O usuário não quer ter seu fluxo de trabalho interrompido por um alerta, que na grande parte do tempo ele não quer ler.
3 – Fica dificil em primeira instancia visual o usuario distinguir se significa um erro ou apenas mensagens de rotina como “Salvo com sucesso”.

Se pararmos para pensar melhor poderemos encontrar outros fatores importantes.

Uma solução elegante para este problema é a criação de um componente que possa passar a mensagem ao usuário de uma
forma que não impeça o fluxo de trabalho e ao mesmo tempo chame a atenção do usuário para a mensagem “informação”
que o sistema esteja passando.

Para este proposito iremos criar um componente de mensagem similar ao que o msn, twitter entre outros aplicativos utilizam.

Requisitos para o desenvolvimento do artigo:
* Ter Flex/Flash Builder ou outra IDE.
* Ter SDk 3 ou superior.
* Conhecimento em ActionScript e Mxml.

Nivel de dificuldade: 5

Certo agora vamos ao que realmente interessa.

Passo 1:

Criar um projeto flex: “AlertaCustomizado” ou outro nome qualquer e com a seguinte estrutura.

Passo 2:

Criar a classe AlertaUI.as. Esta é a classe que será exibida para o usuario, ou seja, será o componente principal.
Esta classe é relativamente simples, composta pelos seguintes componentes nativos do flex:

1 – O componente base será um Canvas.

2 – Teremos dois efeitos Parallel.

* createEffect = responsavel por exibir o componente alerta na tela, este será composto pelos efeitos Move e Fade.
* removeEffect = responsável por ocultar o componente de alerta da tela pai, este tambem será composto por dois efeitos o Move e o Fade. Poderiamos ter utilizado nos dois casos tanto no create quanto no remove o efeito Move, contudo para dar um pouco mais de elegancia utilizaremos o fade.

3 – Um componente Labelo qual iremos defini-lo como o titulo do nosso alerta.

4 – Um componente Text o qual conterá o conteudo do nosso alerta que desejamos apresentar ao usuário.

5 – Um componente Image para exibido ao lado do titulo do alerta.

Segue a baixo o codigo da classe AlertaUI.mxml o mesmo relativamente simples o unico detalhe é a vinculacao dos efeitos createEffect e removeEffect aos respectivos eventos do canvas.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="200" height="100"
           styleName="fundoAlertaSucesso" paddingBottom="5" paddingLeft="5" paddingTop="5" paddingRight="5"
           verticalScrollPolicy="off" horizontalScrollPolicy="off"
           creationCompleteEffect="{createEffect}" removedEffect="{removeEffect}">
 
    <mx:Style>
        .fundoAlertaSucesso{
            borderStyle: applicationControlBar;
            fill-colors: #03A438, #6FCE8F;
            fillAlphas: 1, 1;
            highlightAlphas: 0, 0;
            drop-shadow-enabled: true;
            corner-radius: 5;
        }
 
        .fundoAlertaErro{
            borderStyle: applicationControlBar;
            fill-colors: #E43434, #FCA5A5;
            fillAlphas: 1, 1;
            highlightAlphas: 0, 0;
            drop-shadow-enabled: true;
            corner-radius: 5;
        }
    </mx:Style>
 
    <mx:Script>
        <![CDATA[
            [Bindable]
            protected var _titulo:String;
 
            [Bindable]
            protected var _conteudo:String;
 
            [Bindable]
            protected var _icone:String;
        ]]>
    </mx:Script>
 
    <!-- Criando e configurando os efeitos -->
    <mx:Parallel id="createEffect">
        <mx:Move id="mvExibirAlerta"/>
        <mx:Fade/>
    </mx:Parallel>
 
    <mx:Parallel id="removeEffect">
        <mx:Move id="mvOcultarAlerta"/>
        <mx:Fade/>
    </mx:Parallel>
 
    <mx:Label id="lbTitulo" width="100%" text="{_titulo}" fontFamily="Courier New" fontSize="14"
              fontWeight="bold" color="#FFFFFF" left="5" top="5"/>
 
    <mx:Text id="tConteudo" htmlText="{_conteudo}" fontFamily="Courier New" fontSize="12" left="5"
             top="30" right="5" bottom="5"/>
 
    <mx:Image width="20" height="20" right="5" top="5" id="imgIcon" source="{_icone}" visible="{_icone != null}"/>
 
</mx:Canvas>

Passo 3

– Com o nosso esqueleto do nosso alerta pronto agora iremos definir as funcionalidades para o mesmo. Mas para isso iremos criar uma classe que extenda AlertaUI.mxml. Esta classe sim pode parecer complexa mais é muito simples requer apenas um pouco de atenção para alguns detalhes, vamos a eles:

1 – Metodo show este tem o mesmo intuito do metodo Alert.show, ou seja, exibir o componente na tela. Este pode receber até 5 paramentros:

* Titulo = Define o titulo que será exibido no componente.

* Conteudo = Define o conteudo que será exibido dentro do componente Text.

* TipoAlerta = Este irá definir qual o style que será utiliazado no Alerta.
Digamos que você queira que quando ocorrer um erro na aplicação seja exibido um alerta com um estilo diferente para chamar a atenção do usuário ou que quando ocorra algo rotineiro como: “Cadastro salvo com sucesso” etc seja exibido um alerta também com um estilo diferente, nesta situação este parametro é de suma importancia. Pois aqui voce poderá criar diferentes Style.css e defini-los da forma que bem entender. Neste artigo para exemplo didático irei criar apenas dois Style um identificando ERRO e outro SUCESSO.

* Duracao = Define o tempo em segundos que o alerta ficará disponivel para o usuário, o padrão será 3s.
* Icone = Define um icone a ser amostrado ao lado do titulo.

Assim o metodo show terá as seguintes responsabilidades:

* Instanciar uma nova variavel Alerta.
* Configurar o alerta criado baseado nos argumentos passados, como: Titulo, Icone, tipo do style etc..
* Executar o metodo PopUpManager.addPopUp passando como paramentro o alerta criado.
* E por ultimo e muito importante. Avisar ao gerenciador de Alerta (o qual irei falar em breve) que foi criado um novo alerta e o mesmo esta sendo exibido na tela.

2 – Metodo onCreate este é o segundo metodo mais importante do componente. O onCreate esta vinculado ao CREATION_COMPLETE, assim quando todos os componentes do alerta for criado o mesmo irá terminar de realizar algumas configuraçoes que somente é possivel neste estágio são elas:

* Definir o X e o Y do alerta, ou seja, definindo onde o alerta será exibido na tela. Para efeito didático irei abordar a mesmo localição do MSN no canto inferior direito, contudo esta é uma funcionalidade que você poderá futuramente customizar para ser exibido em outros locais.

* Configurar o efeito Move do createEffetc. Assim se já estiver sendo exibido um alerta na tela deverá ser levando em consideração a posição Y do novo alerta para que este não fique sobreposto ao antigo. Assim precisamos apenas configurar o yFrom e o yTo.

* Configurar o efeito Move do removeEffetc para indicar o yTo do mesmo, este irei definir sempre o Y da altura do Application.

* Irá ser adicionado dois listeners:MouseEvent.ROLL_OVER e MouseEvent.ROLL_OVER. neste dois efeitos que estara a jogado do alerta.
Sera bem comum o sistema exibir um alerta e o usuario nao conseguir ler todo o conteudo do alerta ate o mesmo fechar, para resolver este problema iremos fazer com que quando o usuario colocar o mouse em cima do alerta o mesmo nao ira ser ocultado mesmo que o tempo de 3 segundos seja atingido e que quando o usuario remover o mouse do alerta este sera ocultado imediatamente.

* Criando e configurando um timer para o Alerta. Este ira marcar quando o alerta devera ser ocultado.

3 – Metodo fecharAlerta este apenas remove da tela o alerta e avisa o gerenciador de alerta que o mesmo foi removido da tela.

Segue o codigo do Alerta.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

package com.fabielprestes.views.impl {
    import com.fabielprestes.views.AlertaUI;
 
    import flash.display.DisplayObject;
    import flash.events.MouseEvent;
    import flash.events.TimerEvent;
    import flash.utils.Timer;
 
    import mx.core.Application;
    import mx.events.FlexEvent;
    import mx.managers.PopUpManager;
 
 
    /**
     * Responsavel por exibir e controlar o componente de alerta na tela.
     *
     * @author Fabiel Prestes
     */
    public class Alerta extends AlertaUI {
 
        private var _novaAltura:int;
 
        private var _duracao:int = 3000;
 
        private var _timerOcultarAlerta:Timer;
 
        public static var ALERTA_SUCESSO:int = 0;
        public static var ALERTA_ERRO:int = 1;
 
        public function Alerta() {
            super();
 
            this.addEventListener(FlexEvent.CREATION_COMPLETE, onCreate);
        }
 
        /**
         * @private
         * Espera o alerta ser totalmente criado para seguir o fluxo de configuraçao de posicionamento.
         * @param evt
         */
        private function onCreate(evt:FlexEvent):void {
 
            /* Definindo o local onde o alerta será exibido,
             * Por simplicidade irei adotar o mesmo padrao do MSN, Twitter e outros, ou seja,
             * no canto inferior direito da tela
             *
             * Define o X, para isso pega-se o tamanho total da tela - o tamanho do nosso alerta - um gap qualquer.
             * Define o Y, para isso pega-se a (altura total da tela - um gap qualquer) - (a altura do nosso alerta * total de alerta visiveis na tela)  */
            this.x = Application.application.width - this.width - 5;
            this.y = (Application.application.height - 5) - (this.height * GerenciadorAlerta.getInstance().totalAlertaVisivel);
 
            /* Configurando os efeitos de MOVE. */
            this.mvExibirAlerta.yFrom = Application.application.height;
            this.mvExibirAlerta.yTo = y;
 
            this.mvOcultarAlerta.yTo = Application.application.height;
 
            /* Configurando o eventos do MOUSE
             *
             * Apos o alerta ser exibido o mesmo ficará visivel apenas por um determinado tempo.
             * Desta maneira caso o demore para ler a msg o alerta será ocultado, para que isso nao aconteça
             * iremos definir que quando o usuario colocar o mouse em cima o alerta o mesmo fica disponivel ate
             * que o usuario retire o mouse de cima do alerta. */
            this.addEventListener(MouseEvent.ROLL_OVER, function():void {
                _timerOcultarAlerta.removeEventListener(TimerEvent.TIMER_COMPLETE, fecharAlerta);
            });
 
            this.addEventListener(MouseEvent.ROLL_OUT, function():void {
                fecharAlerta(null);
            });
 
            /* Configurando o Tempo 'Timer' no qual o alerta ficará disponivel antes de ser ocultado */
            _timerOcultarAlerta = new Timer(_duracao, 1);
            _timerOcultarAlerta.addEventListener(TimerEvent.TIMER_COMPLETE, fecharAlerta);
            _timerOcultarAlerta.start();
 
            /* Ao sair deste metodo o efeito Parallel que nos deixamos como Bindable no creationCompleteEffect da Tela
             * será ativado */
        }
 
        /**
         * @private
         * Remove o alerta da Tela.
         * Neste momento o efeito Parallel que nos deixamos como Bindable no removedEffect da Tela
         * será ativado
         * @param evt
         */
        private function fecharAlerta(evt:TimerEvent):void{
            PopUpManager.removePopUp( this );
 
            /* Avisa o gerenciador que foi removido um Alerta */
            GerenciadorAlerta.getInstance().alertaRemovido();
        }
 
        /**
         * Responsavel por criar, configurar e exibir o Alerta tendo como base os argumentos como referencia.
         *
         * @param titulo Define o titulo a ser exibido no componente
         * @param conteudo Define o conteudo do alerta
         * @param tipoAlerta Define o style do alerta
         * @param duracao Define a duracao em segundos que o alerta ficará visivel para o usuario. Padra 3000 '3s'
         * @param icone Define um icone para ser exibido no alerta
         * @return a instancia do alerta criado e exibido;
         */
        public static function show(titulo:String, conteudo:String, tipoAlerta:int = 0, duracao:int = 3000, icone:String = null):Alerta {
            var alerta:Alerta = new Alerta();
            alerta._titulo = titulo;
            alerta._conteudo = conteudo;
            alerta._icone = icone;
            alerta._duracao = duracao;
 
            /* Define o Style do Alerta pelo tipo.
             * O padrao será sempre o fundoAlertaSucesso */
            if(tipoAlerta == ALERTA_ERRO)
                alerta.setStyle('styleName', 'fundoAlertaErro');
 
            /* Exibe o alerta na tela */
            PopUpManager.addPopUp(alerta, DisplayObject(Application.application), false);
 
            /* Avisa o gerenciador que foi criado um novo alerta */
            GerenciadorAlerta.getInstance().alertaCriado();
 
            return alerta;
        }
    }
}

Passo 4

– Criando Gerenciador de alertas, este tem a finalidade de armazenar todos os alertas que estao sendo exibidos no momento, isso se deve ser feito para que quando o metodo onCreate for configurar os eventos ele calcule exatamente a posicao com que o novo alerta devera ser exibido. O gerenciador sera um Singletom para estas informacoes estarem visiveis e unicas para toda a aplicacao.

Segue o codigo GerenciadorAlerta.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

package com.fabielprestes.views.impl {
 
    /**
     * Classe responsavel por gerenciar os alertas que estao visiveis ao usuario.
     * Esta classe será um Singleton.
     *
     * @author Fabiel Prestes
     */
    public class GerenciadorAlerta {
 
        private static var _instance:GerenciadorAlerta;
 
        private var _totalAlertaVisivel:int = 0;
 
        private var _totalAlertaVisivelAux:int = 0;
 
        public function GerenciadorAlerta(type  rivateGerenciadorAlerta) {
            if (type == null) {
                throw new Error("Erro: Não é possivel instancia GerenciadorAlerta, já que este é um Singleton.");
            }
        }
 
        /**
         * Retorna a instancia unica da classe GerenciadorAlerta
         */
        public static function getInstance():GerenciadorAlerta {
            if (_instance == null)
                _instance = new GerenciadorAlerta(new PrivateGerenciadorAlerta());
            return _instance;
        }
 
        public function alertaCriado():void {
            _totalAlertaVisivel++;
            _totalAlertaVisivelAux++;
        }
 
        public function alertaRemovido():void {
            _totalAlertaVisivel--;
 
            if(_totalAlertaVisivel <= 0)
                _totalAlertaVisivelAux = 0;
        }
 
        /**
         * Retorna o total de alerta que esta visivel para o usuario na tela
         */
        public function get totalAlertaVisivel():int {
            return _totalAlertaVisivelAux;
        }
    }
}
 
internal class PrivateGerenciadorAlerta {
    public function PrivateGerenciadorAlerta() {
    }
}

Passo 5 e Ultimo

– Criaremos uma classe teste que ira exibir quantro tipos de alerta. Alerta de sucesso com e sem imagem e Alerta de erro com e sem imagem.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
    <mx:Script>
        <![CDATA[
            import com.fabielprestes.views.impl.Alerta;
 
        ]]>
    </mx:Script>
 
    <mx:Button click="Alerta.show('Teste Sucesso', 'Conteudo teste')" label="Alerta Sucesso"/>
    <mx:Button click="Alerta.show('Teste Sucesso', 'Conteudo teste', Alerta.ALERTA_SUCESSO, 3000, 'assets/user.gif')" label="Alerta Sucesso Com Imagem"/>
    <mx:Button click="Alerta.show('Teste Erro', 'Conteudo teste', Alerta.ALERTA_ERRO)" label="Alerta Erro"/>
    <mx:Button click="Alerta.show('Teste Erro', 'Conteudo teste', Alerta.ALERTA_ERRO, 3000, 'assets/user.gif')" label="Alerta Erro Com Imagem"/>
</mx:Application>

E isso ai pessoal uma maneira simples e facil de se criar alertas como o do Msn, Twitter, gtalk etc…
Agora e so customizarem da melhor maneira.
Este componente foi baseado em alguns aspectos em componentes já existentes como o : Notification .
Qualquer duvida ou sugestao enviar comentarios.

Codigo Fonte.

Outro dos bons exemplos que se podem fazer ao criar uma aplicação usando actionscript 3 é a utilização do código, num dos simples exemplos vou mostrar como podemos usar apenas uma função para lidar com 4 ou mais eventos…e de tipos diferentes!

Na minha aplicação, tinha a necessidade de adicionar alguns eventos (inicialmente do rato) a um elemento e lidar com os mesmos, muita gente faria, por exemplo ao lidar com 4 eventos do rato numa dataGrid:

O que neste caso teriamos que usar 4 funções diferentes: onClick, onDoubleClick, onRollOver, onRollOut do estilo:

É facil compreender que muita gente use esta forma (eu já usei), mas existe uma forma mais pratica, uma vez que todos os eventos são MouseEvent, podemos fazer apenas uma função:

(…)
Leia o resto de Flex/AS3 – Truques e Dicas #8 – Re-use o código! (288 palavras)

© Mário Santos em TSW – That Should Work, 2009. |
Link Permanente |
Um comentario |
Adicionar ao
del.icio.us -
Stumble it -
Google Bookmark -
technorati


Mais artigos relacionados nas categorias: action script 3, as3, boas praticas, events, Flash, Flex, handle, optimização, re-uso

Os custom events podem ser muito uteis quando não queremos estar dependentes dos eventos da aplicação, ou simplesmente para efectuarmos alguma ação em determinada altura commo vou mostrar em baixo. Mas o principal objectivo deste post é mostrar como criar um evento que além de se comportar como tal também servirá para guardar e transferir dados que estarão acessiveis na função de escuta quando o evento for disparado.

Vejam um exemplo de um “custom event” normal:

Desta forma, acabamos por ter um evento pessoal chamado meuEvento que para o disparar:

Para escutar este evento:

Este é o procedimento normal de um custom event.

O meu problema na aplicação era de como passar dados no evento, ou seja, aproveitar um evento para enviar dados, por exemplo de um módulo para outro ou até simplesmente de um itemRender para o seu parent, ou tão simplesmente de um componente para outro. Se pensarmos que todos os eventos são classes, podemos pensar que estas podem ser extendidas, logo podem ser personalizados… vejamos um evento chamado meuEvPessoal:
(…)
Leia o resto de Flex/AS3 – Truques e Dicas #7 – Custom Event (223 palavras)

© Mário Santos em TSW – That Should Work, 2009. |
Link Permanente |
2 comentarios |
Adicionar ao
del.icio.us -
Stumble it -
Google Bookmark -
technorati


Mais artigos relacionados nas categorias: Action Script, Air, as3, comunicação, custom, dados, event, eventos, Flash, Flex

Não é uma pergunta, mas sim mais uma dica para optimização de código e serve também para explicação deste estranho operador: ? (sim, é um ponto de interrogação!).

O operador condicional (?) pode ser usado para optimizar código e nos poupar algumas linhas, e junto com alguns outros pontos, pode reduzir o nosso código em mais de 50%, como no exemplo, que passará de 12 linhas para 3. Mas vamos então ao exemplo.

Imaginem uma função de comparação com o if:

Neste código, apesar de tudo estar correcto, conta com 11 linhas, podemos optimiza-lo de algumas maneiras, poupando bastantes linhas de código, veja:

(…)
Leia o resto de Flex/AS3 – Truques e Dicas #6 – Operador Condicional ? (447 palavras)

© Mário Santos em TSW – That Should Work, 2009. |
Link Permanente |
6 comentarios |
Adicionar ao
del.icio.us -
Stumble it -
Google Bookmark -
technorati


Mais artigos relacionados nas categorias: Action Script, Air, as2, as3, comparação, condicional, exemplo, Flash, Flex, operadores, Tutorial

Bem, toda a gente sabe que o Bindable nos salva em muitas situações, mas por vezes alem do bindable o ChangeWatcher pode ser muito util.

Uma curta explicação sobre o que é uma variavel bindable:

A tag [Bindable] que faz com que o  valor da variavel nomeCliente seja monitorizada e em caso de alteração que todos os elementos na nossa aplicação que usem essa variavel sejam informados das alterações. 

Mas agora imaginem que tenho um objecto:

E quero saber quando foi alterada a lingua, e apenas a lingua… o resto não quero saber… claro que poderiamos fazer um método tradicionalmente sujo, guardando a lang do objecto numa variavel à parte, depois associando um evento change, por exemplo a um elemento que sofra a alteração quando o Bindable informar esse mesmo elemento, tal como um label:

Agora poderiamos saber quando essa alteração via bindable Ocorreu, já que ao mudar o label a função objectoMudou seria chamada e aí comparariamos o valor do cliente.lang com a variavel lang que tinhamos anteriormente, para sabermos se a lang foi alterada, mas isto tudo seria lógico se não existisse o chamado changeWatcher, que serve perfeitamente para saber quando uma propriedade de um objecto mudou. O seu uso é simples, tendo apenas uma obrigação, o objecto de ser inicializado como ObjectProxy() e nao como Object, já que sendo declarado como objecto ele não é passivel de ser observado. Vejam o exemplo seguindo o objecto cliente:(…)
Leia o resto de Flex/AS3 – Truques e Dicas #5 – [Bindable] & Change Watcher (100 palavras)

© Mário Santos em TSW – That Should Work, 2009. |
Link Permanente |
Um comentario |
Adicionar ao
del.icio.us -
Stumble it -
Google Bookmark -
technorati


Mais artigos relacionados nas categorias: Action Script, as3, Bindable, changeWatcher, EventListener, explicação, Flash, Flex, Tutorial, utils

Por vezes já se depararam a declarar variaveis e iniciar as mesmas, por exemplo:

Mas se vos disser que não necessitavamos de usar o false neste caso? sim, a declaração seguinte faz o mesmo:

Estou a falar que qualquer variavel boolean declarada é declarada como false, a não ser que lhe indiquemos o contrário:

Bem como esta variavel, encontramos valores por defeito em todas as outras, sendo assim:

Qualquer variavel não declarada, é-lhe atribuido o estado undefined :

Qualquer outra declaração de outra qualquer classe é-lhe atribuida o valor null:

Todas estas variaveis são faceis de saber se não estão com o valor por defeito, basta comparar o seu valor com o valor por defeito, execeptuando o Number que não podemos fazer por exemplo:

Como fariamos numa string: if(str!=null) ou num int: if(num1!=0). Ora então, mas como sabemos se o defeito foi alterado numa variavel Number?, simples, com o isNaN(), usando da simples forma:

O isNaN() devolve um valor true no caso de ser a variavel estiver como NaN ou false caso tenha um numero atribuido a ela. E fica ja agora, outra dica, o if() se não encontrar condição, compara com o boolean true por isso se estivermos a fazer uma comparação que devolva verdadeiro ou falso, não necessitamos de colocar:

porque o 

faz exactamente o mesmo

Bom, espero que seja util,

Abraços.

© Mário Santos em TSW – That Should Work, 2009. |
Link Permanente |
Sem comentarios |
Adicionar ao
del.icio.us -
Stumble it -
Google Bookmark -
technorati


Mais artigos relacionados nas categorias: Action Script, as3, boolean, comparadores, if, int, isNaN, NaN, Number, operadores, string, uint

Bem, uma das vantagens dos ciclos é a redução enorme de linhas numa aplicação, pois bem existem muitos ciclos, mas hoje vou falar de um em especifico o for e de um elemento que muita gente conheçe, o break e um detalhe chamado “break to label”;

O loop funciona de forma muito simples bem como o break, imaginem:

Este código executa o cilco 5 vezes, mas como temos um break se o j==2 ele simpelsmente só é executado 2 vezes… mas agora imaginem um ciclo dentro de outro ciclo:

Neste caso, o break apenas vai travar o segundo ciclo for enquanto que o primeiro continua a ser executado, ou seja, para cada valor de I o segundo ciclo será executado 2 vezes porque tem o break==2;

(…)
Leia o resto de Flex/AS3 – Truques e Dicas #3 – break to label; (37 palavras)

© Mário Santos em TSW – That Should Work, 2009. |
Link Permanente |
3 comentarios |
Adicionar ao
del.icio.us -
Stumble it -
Google Bookmark -
technorati


Mais artigos relacionados nas categorias: Action Script, as3, break, exemplos, Flash, Flex, for, loop, Tutorial

Esta é mais uma das reliqueas do as3, principalmente para dar consistencia e fiabilidade à nossa aplicação e evitar que sejam disparados erros que o utilizador final possa ver. Ou seja o objectivo do

#2 – Try, Catch & Finally

É precisamente prevenir as malditas janelas de erro (quando o utilizador têm o flash player debug) e disparar acções quando esse erro acontecer, impedindo assim uma falha na aplicação. Este uso é muito util, embora pessoalmente não o use sempre (iria expandir em muito as linhas de código da aplicação) mas uso sempre que exista uma grande possibilidade de erro, no meu exemplo a seguir verão que é muito util.

O que eu necessitava na minha aplicação, era que quando o utilizador fizer logout (apresentasse o ecra de login de novo) da aplicação todas os meus popup’s adicionados via PopUpManager (podem ser até 20 paineis em popup) sejam removidos. 

Como eu não queria ter a necessidade de estar a controlar individualmente se um painel está aberto ou não (poderia fazer isso atravez de um array de estados) apenas percorro todos os child’s do systemManger na minha aplicação (um popUpManager.addItem() adiciona o popUp à display list do sistemManager, como se tratasse de uma janela) e tento remove-los com o popUpManager. Claro que se a minha aplicação tiver um elemento que não tenha sido colocado pelo PopUpManager iria acontecer um erro ao tentar remover esse componente, e aí sim a necessidade deste try, catch, finally torna-se muito fiavel.

O seu funcionamento é bem simples, o try encarrega-se de “tentar” executar a acção, enquanto que o catch se ocupa de “captar” todos os possiveis erros que aconteçam ao executar a acção e o finally encarrega-se de executar uma acção no final de tudo, quer exista erro ou não. Este finally é opcional e quanto ao catch podemos usar quantos quisermos, para cada tipo de erro especifico ou erros em geral. Seguindo com um exemplo… (…)
Leia o resto de Flex/AS3 – Truques & Dicas #2 – Try, Catch & Finally (434 palavras)