James Ward, Envagelista da adobe, que se intitula ele proprio como Ria Cowboy ( www.jamesward.com ) é um dos cerebros por detras da tecnologia do flex, e desta feita lançou um video com bastantes pontos de boas praticas, bem como exemplos escritos.

Vejam o video:
Read more »

Bem, depois de uma duvida bem colocada no post que mostra como personalizar por completo um alert, com cores, icons, titulo, alpha, texto, etc…  ( http://msdevstudio.com/blog/2008/02/05/personalizao-do-flex-alert-box-em-action-script/ ) venho agora mostrar um pequeno tutorial como saber qual o botão foi clicado num alert.

Primeiro, temos que compreender as 2 diferentes maneiras de mostrar um alert, a segunda maneira é mais complexa, mas mais “personalizavel”… pelo que agora depende principalmente das vossas necessidades.

A mais simples:

import mx.controls.Alert;

//Alert.show("texto","titulo",botões);

Alert.show("um alerta","com titulo",Alert.NO | Alert.YES);

A mais complexa:

import mx.controls.Alert;

var meuAlerta:Alert = new Alert;

meuAlerta.text="um alerta";

meuAlerta.title="com titulo";

meuAlerta.buttonFlags=Alert.NO + Alert.YES;

addChild(meuAlerta);

E voilá! Temos duas maneiras de mostrar os alertas, agora para sabermos que botão foi clicado (ao clicar o botão o Alert fecha e dispara um CloseEvent que no seu parametro .detail “traz” a informação do botão clicado, ou seja, para isso temos que escutar esse CloseEvent, fazendo assim:

na primeira maneira:

import mx.controls.Alert;

import mx.events.CloseEvent;

Alert.show("um alerta","com titulo", Alert.NO | Alert.Yes, null, fechado);

//a função fechado ao ser definida aqui indica ao alert que terá que escutar 

//e chamar a função fechado quando ele for fechado ao clicar de um dos seu botoes

na segunda, basta adicionar antes do addChild() o seguinte:

meuAlerta.addEventListener(Event.CLOSE, fechado);

e finalmente a função que lida com os detalhes do evento close do nosso alerta:

private function fechado(evento:CloseEvent):void {

if(evento.detail==Alert.YES) //YES clicado

if(evento.detail==Alert.NO) //NO clicado

}

e está feito… podem ainda usar:

if(evento.detail==Alert.OK) //ok clicado
if(evento.detail==Alert.YES) //YES clicado
if(evento.detail==Alert.NO) //NO clicado
if(evento.detail==Alert.CANCEL) //CANCEL clicado

Bem simples, mas espero que seja util a alguém..

Abraço.

Para quem já conhece o flex cookbook já sabe do que estou a falar, para quem não sabe, fica o resumo, o cookbook é um estilo de livro (pergunta-resposta) em que podemos todos contribuir…

Mais uma boa noticia da Adobe e O’Reilly que juntos colocaram online esta beta.

Vale a pena ver, tanto o cookbook do AIR como o do Flex.

AIR Cookbook

Flex Cookbook

Abraço.

Quantas vezes precisamos de criar uma password temporária ou definitiva aleatoriamente?? Já me aconteceu ter que fazer isso em php, e em flex pensei que poderia ser muito util…

Desenvolvi então um package que permite gerar passwords aleatoriamente, com ou sem caracteres especiais ($-+-,.€@) e o seu tamanho facilmente alterável tudo com uma função bem simples:

public function geraPass():String {

    if(!size) size=6;

    var pass:String="";

    for(var x:int=0; x<size; x++) {

        if(specialChars==true) pass += chars[(Math.floor(Math.random() * (chars.length)))];

        else pass += chars[(Math.floor(Math.random() * (chars.length-14)))];            

    }

    return pass;

}

Simples ah?!?

Podem ver um exemplo a funcionar aqui com o código fonte disponivel para download

Aguardam-se comentários.

Abraço.

Em continuação com o tutorial ( 001 - 002 - 003 - 004 - 005 - 006 - 007 - 008 )

5. Programação Orientada a Objectos.

Por muitos a linguagem orientada a objectos é uma maneira simples, rápida e eficaz que se pode traduzir por uma melhor performance no código e uma mais fácil identificação de erros bem como a interpretação por parte de outros programadores. Mas como tudo, também existe outro lado da moeda, que muitos programadores ainda mostram barreira em aceitar esta metodologia de programação e se mostram muito reticentes ao seu uso.

Mas no Action Script 3 não existe outra maneira, ou se programa orientado a objectos ou então é melhor esquecer o AS3.

Daqui para a frente falaremos cada vez mais de este tipo de programação, bem como o seu uso, por isso vamos falar em mais concreto dos benefícios de usar a adequada estruturação do código. Um dos básicos da linguagem orientada a objecto é a compreensão do seu método de funcionamento e estruturação, com especial atenção a:

Class’s: Colecção de funções e variáveis relacionadas para facilitar a interacção com determinados objectos. Isto é o ‘core’ do AS3 e das linguagens OOP, e será mostrado o seu uso em diferentes situações.

Inheritance (Código hereditário) : Uma das grandes vantagens do AS3 (OOP) é a possibilidade de alterar/remover/adicionar propriedades/funções a determinado componente/função/método sem ter que re-inventar a roda, o que nos permite extender uma class/componente sem termos que programar a class do zero, o que além de nos poupar imensas linhas de código, permite também entender melhor o comportamento de determinado componente ou class e melhora-las/adequa-las às nossas necessidades.

Composition (Composição): Como foi falado em cima, esta possibilidade de extender todos os componentes e suas class’s, pode ser muito util, mas não é possível em algumas situações e para isso temos este metodo ”Composition” que é uma técnica que nos permite criar uma class que possa trabalhar com outra em conjunto, e que nada herda de uma possível class de um componente.

Encapsulation: Geralmente não é uma boa ideia expor todos os aspectos de uma class para outras class’s ou aplicação, esta Ecapsulação é um método que permite ”ocultar” a maior parte das propriedades e funçoes de uma class permitindo apenas que certos elementos sejam expostos.

Polymorphism: Este método permite que objectos de diferentes class’s possam ter o mesmo nome e os mesmos eventos e que se comportem de diferentes formas, o que acaba por permitir que não seja necessário que se criem novos métodos sendo depois mais fácil extender essa class…tendo apenas que perceber como o objecto se comporta nas diferentes classes.

Nota: É importante compreender que as linguagens OOP podem não ser fáceis, nem apropriadas para toda a gente ou situação, mas é muito util principalmente quando usada em projectos de média/grande dimensão com bastantes programadores, já que simplifica em muito o trabalho de equipa. Não é obrigado a aprender OOP para saber programar AS3, mas que ficará limitado a quase 50% das possibilidades do AS3 também é bem verdade.

Uma das iniciais vantagens no processo de programar uma linguagem OOP é escolher uma boa plataforma para o seu desenvolvimento, principalmente porque existem variadas maneiras de criar uma interface e várias ferramentas para o fazer. Uma boa prática é que antes de iniciar o seu projecto faça o seu plano de necessidades, objectivos, arquitectura e comportamento de programação. Se fizer isto, é meio caminho andado para perceber que uma linguagem OOP como o AS3 pode satisfazer facilmente as necessidades do projecto, mas não se preocupem em ser demasiado exigentes nos vossos primeiros projectos, porque com certeza que encontrarão problemas e cometerão erros, que servirão para optimizar e melhorar a vossa maneira de trabalhar.

Vamos falar detalhadamente e praticamente de cada um destes pontos…

Read more »

Em continuação com o tutorial ( 001 - 002 - 003 - 004 - 005 - 006 - 007)

4.3. Removendo objectos da display list. removeChild ():

O processo para remover child’s do stage ou de algum elemento é bem simples e muito parecido com o processo de os adicionar. O método removeChild() está também presente em muitos dos elementos gráficos, pelo que usamos apenas:

removeChild(painel) 

e eliminaria-mos o child painel bem como todo o seu conteúdo que inclui o nosso objecto comboBox.

Alem deste processo podemos usar também o método removeChildAt() que recebe como parâmetro o número/index do (child) objecto em causa, número/index esse que é atribuído automaticamente pela display list, no exemplo em cima, o comboBox será o child com número/index 0, visto que é o único child adicionado ao painel, para o remover-mos devemos usar:

painel.removeChildAt(0); 

e o comboBox seria automaticamente removido do painel.

Vamos supor que na função em cima, adicionamos também um TextInput ao painel:

private var texto:TextInput = new TextInput();

//e em baixo adicionaríamos ao painel:

painel.addChild(combo);

painel.addChild(texto);

Aqui o texto passará a ser o child com o número/index 1, e para o remover teríamos que usar:

painel.removeChild(texto);

ou

painel.removeChildAt(1);

Read more »

Em continuação com o tutorial ( 001 - 002 - 003 - 004 - 005 - 006)

4. Display List

A display list, mais uma vez traduzida à letra pode ser entendida como lista de apresentação, foi uma grande inovação no no flash/flex com o AS3, e que agora apresentou muitos problemas de adaptação para muitos designers/programadores habituados à versão anterior. Nas versões anteriores do AS, todos os elementos visuais eram tratados e apresentados separadamente no swf final o que exigia dos programadores um grande conhecimento e acima de tudo muito código para lidar com essa apresentação visual dos elementos e com os métodos de criar, eliminar e adicionar objectos o que resultava num controlo restrito desses mesmos objectos e que o garbage collector era incapaz de controlar.

O AS3 trouxe uma nova forma de lidar com estes objectos e sua apresentação, a display list. Logicamente esta display list pode ser entendida como uma lista de elementos visuais do swf que pode incluir os objectos mais comuns como movieclips e botões, mas também shapes, gráficos, painéis e muitos outros que não existiam nas versões anteriores ou que não podiam ser criados “programaticamente”.

Resumindo, a display list é praticamente o que contém e regula a apresentação de todos os nossos elementos visuais na altura da “criação”/apresentação do .swf final.

4.1. Entendendo a display list.

Para compreender algo que não vemos, temos que ter próvas bem lógicas do que se fala, e como disse em cima, a display list é o que gere todos os elementos gráficos do nosso .swf, falando no caso do flex, vou tentar fazer um rascunho do que podemos entender como sendo um esquema visual da display list. Suponhamos que em flex temos:

- Fundo da aplicação.

- 1 painel (Painel1)

- 1 titleWindow (Win1)

- 1 botão (botao1)

- 1 imagem dentro do painel 1 (Img1)

- 1 botão dentro do painel 1 (Botao2)

- 1 progressBar dentro do titleWindow (ProgressBar)

O esquema da display list apresentaria-se da seguinte forma:

Read more »

Em continuação com o tutorial (001 - 002 - 003 - 004 - 005)

3.2.2. Como remover EventListners ?

Os eventListner’s são muito úteis como puderam ver em cima, mas ao mesmo tempo podem ser causadores de problemas, bem como sobrecarregar o .swf final, vejamos no caso de querer-mos apenas que o botão apenas dispare o evento click uma única vez. No caso explicado anteriormente o botão disparará sempre o evento click e mouse over durante todo o tempo que o .swf tiver aberto, logo, se o nosso objectivo é apenas saber a primeira vez que o botão foi clicado, deixando o código em cima produziria um objectivo inválido, já que seria executado sempre que o user clica-se no botão. Aqui é que entram os removeListner’s, ou seja, se pretendemos que o botão apenas dispare uma única vez a função associada ao evento click teremos que remover esse eventListner assim que o nosso objectivo esteja concluído (apenas chamar a função uma única vez) e para isso faríamos o seguinte, usando a função anteriormente:

meuBotao1.addEventListner(MouseEvent.CLICK, botao_evento);

private function botao_evento(evt:MouseEvent):void {

switch (evt.type) {

                case MouseEvent.CLICK:

                meuBotao1.move(btn.x+5, btn.y+5); 

                //temos o objectivo terminado, logo vamos remover o eventListner:

                meuBotao1.removeEventListner(MouseEvent.CLICK, botao_evento);

                break;

}

Desta feita, a função botao_evento apenas será chamada pelo eventListner uma única vez, já que removemos o seu eventListner:

meuBotao1.removeEventListner(MouseEvent.CLICK, botao_evento);

neste removeEventListner temos apenas que cumprir uma regra; o evento a ser removido terá que ser exactamente igual (MouseEvent.CLICK) ao adicionado (addEventListner) incluindo a função a ele associada (botao_click), já que podem existir várias funções associadas ao mesmo eventListner:

meuBotao1.removeEventListner(MouseEvent.CLICK, botao_evento);

Nota:

Garbage Collector:

Como o nome diz, traduzido à letra, é um reconhedor de lixo, é um mecanismo que o flash player possui para, durante a execução, inspeccionar regularmente o swf e remover itens, objectos e referencias não utilizados ou deixados esquecidos pelo programador.

Regra geral os eventos não são inspeccionados nem removidos nessa recolha pelo garbage collector, porque o programador deve ter o bom senso de os remover, mas se for iniciante, provavelmente esquecerá um ou outro event listner, e por isso uma boa prática será marcar os seus event Listners para serem inspeccionados pelo garbage collector e removidos se desnecessários, para para isso quando criam o vosso event listner devem ter em atenção mais alguns parâmetros (sendo que apenas um deles é o mais importante).

Read more »

Em continuação com o tutorial ( 001 - 002 - 003 - 004 )

3.2.1. Como usar eventListners?

O conceito dos eventListners é bem simples, passando pela simples indicação no código que a instancia deve escutar determinado evento e “avisar” quando ele acontecer para que possamos executar determinada função.

Existe um pormenor que temos que ter em conta, certos eventos não são suportados por certas instâncias, por exemplo, um evento keyPress nunca será disparado numa imagem. O que quero dizer, é que como foi dito anteriormente, aqui também os eventos dependem das instâncias. Por exemplo, queremos que o utilizador ao clicar com o rato num botão seja executada uma função (funcao_a_executar) que deve ser chamado sem os () (este é dos poucos casos onde a função pode (obrigatoriamente) ser chamada sem os ()).

MeuBotão1.addEventListner(MouseEvent.CLICK, funcao_a_executar);

private function funcao_a_executar(event:MouseEvent):void {

    trace(“botão clickado”)

}

Temos que notar 1 ponto muito importante, como a funcao_a_executar() é disparada a partir de um MouseEvent, ela obrigatoriamente receberá parâmetros e características desse evento (algumas informações sobre a instancia) logo por isso terá que receber como parâmetro o “pai” desse evento, neste caso o “pai” é o MouseEvent. Um argumento muito util passado por esse evento é o target ou currentTarget que nos indica a instancia que disparou o evento à qual podemos aceder mesmo sem saber o nome dessa instancia.

Um exemplo bastante simples:

Temos 2 botões para aumentar/diminuir o tamanho de uma imagem 5 pixeis, iria-mos fazer assim:

botao_aumenta.addEventListner(MouseEvent.CLICK, aumenta);

botao_diminui.addEventListner(MouseEvent.CLICK, diminui);

private function aumenta(evt:MouseEvent):void {

    //para saber o nome da instancia:

    trace(“instancia : ”+evt.target);

    imagem1.width +=5;

}

private function diminui(evt:MouseEvent):void {

//para saber o nome da instancia:

    trace(“instancia : ”+evt.target);

    imagem1.width -=5;

}

O símbolo += ou -= serve para juntar ou diminuir os valores de certa variável/propriedade.

Read more »

Em continuação do tutorial (001 - 002 - 003)

Com falamos antes em bases da linguagem, já pouco mais há a dizer, visto que com o decorrer do tutorial falaremos mais atentamente sobre algumas propriedades da linguagem…

Vamos agora passar a falar do “core” do Action Script 3.

3. Propriedades, métodos e eventos

Depois de já termos falado das bases do AS3, vamos falar agora dos elementos base para poder construir, definir e instruir muitos dos elementos gráficos no Flex/Flash.

As propriedades são algo que define, uma característica e em ultimo caso chamada de parâmetro. Como na vida real podemos definir um carro como marca, colorido, portas , tipo ou cilindrada, no actionscript podemos fazer exactamente o mesmo, mas no caso de um carro, apenas teríamos propriedades fixas, que não podemos alterar facilmente (a não ser na oficina), enquanto que no action script e seus objectos as suas propriedades são maioritariamente de leitura-escrita, ou seja, num botão por exemplo, podemos obter o seu tamanho pela propriedade meuBotao.width, ao mesmo tempo também podemos definir o seu tamanho com meuBotao.width=250; Existem também algumas propriedades que não podem ser alteradas (leitura apenas) mas como no caso do carro, também as podemos alterar, não muito facilmente nem directamente, mas mais para o final do tutorial explicarei com o fazer.

Os métodos são geralmente opções que permitem ao programador fazer com que um objecto execute certas operações, na maioria, internas que podem tanto definir varias propriedades do objecto, ou efectuar uma simples acção. Por exemplo tendo um método definePosição() podemos definir o valor do x e do y em apenas uma linha de código, simplificando as definições das propriedades .x e .y. Em caso único, pode ser usados para especificar uma acção única, como por exemplo o navigateToURL() que abre determinado site no browser .

Eventos são retornos de determinadas acções, por exemplo num carro, ao desligar o motor é disparado um imaginário evento “stop”, no AS3, por exemplo um botão, se o utilizador clicar com o rato no botão é então accionado o evento click, e esse evento pode ser interceptado de maneira a que possamos efectuar uma acção, regra geral uma função. O “dispositivo” que lida com estes eventos, chama-se “Event Handler” e é a partir deste handler que são chamadas as possíveis funções. No action script 3 foram implantados já certas funções de Event Handling, que são chamados os Event Listners, em tradução à letra, são “escutadores de eventos” que servem precisamente para detectar quando determinado evento foi “disparado”, ou seja, quando o evento foi accionado, e a partir dessa detecção podemos saber em que preciso momento o evento foi disparado.

Fora estes eventos já implantados pelo AS3, podemos ainda criar os nossos próprios eventos, mas para isso teremos que explicar melhor como eles funcionam, o que acontecerá mais à frente….

Read more »