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

Fev 24

FlexUnit 4 – Testando componentes visuais

Escrito por DClick Team em 1, 4, 6, app, AR, class, classe, collection, Componente, Componentes, DataProvider, demo, Dica, event, EventListener, Evento, Flex, for, function, handle, ide, IE, if, int, lista, O, on, problema, processo, RIA, Ria’s Geral, Sem categoria, tag, TAT, Teste, Twitter, UI, update, XML, XMLList @ 02 24th, 2011 | via http://blog.dclick.com.br/pt/ | Sem comentários

Bom, acho que essa dica vai ajudar se você está pensando em testar componentes visuais.

No projeto do componente de organograma para a Petrobrás, além dos testes unitários padrões eu me aventurei um pouco com testes visuais do componente para me assegurar que dada uma modificação de algumas propriedades no componente o mesmo estava modificando corretamente sua visualização e avisando os componentes de suporte como Navigator, Logger dessas modificações.

O problema de testes visuais que acredito que todos saibam está no ciclo de vida dos componentes. Não conseguimos ser determinísticos em quanto tempo o componente estará pronto para sofrer asserts em suas propriedades. Vamos começar com o setUp e o tearDown de um teste unitário visual.

Vamos utilizar o FlexUnit 4.x nos casos de teste

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

[Before( async, ui )]
public function setUp ():void {
_chart = new OrganizationChart();
Async.proceedOnEvent( this, _chart, FlexEvent.CREATION_COMPLETE, 1000 )
UIImpersonator.addChild( _chart );
}

[After( ui )]
public function tearDown ():void {
UIImpersonator.removeChild( _chart );
_chart = null;
}

[Before( async, ui )]
Será executado antes de todos os casos de teste. As indicações async e ui na metadata dizem para o Runner do teste que esse método possui processos assíncronos e que o mesmo deve verificar a classe Async para proceder com o teste.

Async.proceedOnEvent( this, _chart, FlexEvent.CREATION_COMPLETE, 1000 )
Avisa que o teste só deve continuar quando o evento FlexEvent.CREATION_COMPLETE for disparado pelo componente.

UIImpersonator.addChild( _chart );
Adiciona o componente como um filho de uma espécie de Application que iniciará o ciclo de vida de criação do componente.

[After( ui )]
Executando após o teste em questão ser executado. Faz a limpeza dos elementos criados anteriormente.

UIImpersonator.removeChild( _chart );
Remove o componente da lista de filhos e executa o ciclo de vida de destruição do componente.

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

[Test( async )]
public function testDataProvider():void {
var x:XML = sampleXML.data as XML;
var collection:XMLListCollection = new XMLListCollection( new XMLList( x.item ) );

var asyncHandler:Function = Async.asyncHandler( this, updateCompleteHandler, timeout );
_chart.addEventListener( FlexEvent.UPDATE_COMPLETE, asyncHandler );

_chart.dataProvider = collection;
}

private function updateCompleteHandler( event:FlexEvent, passData:Object ):void {
Assert.assertEquals( 10, _chart.dataGroup.numElements );
}

No caso do componente, ao setar o dataProvider ele modifica o dataProvider de um DataGroup interno, que consequentemente vai efetuar a criação dos renderers. Nesse teste estamos validando se “ao preencher o dataProvider o DataGroup está criando os renderers enviados na coleção” efetuando a contagem de elementos presentes no DataGroup.

Utilizando o mesmo tipo de teste assíncrono podemos testar algumas interações do usuário como MouseEvent.MOUSE_CLICK, MouseEvent.MOUSE_MOVE simplesmente pegando a instância do componente criado e executando o evento manualmente. Com isso os listeners serão disparados e você poderá utilizar o Async.asyncHandler para escutar um determinado do componente e efetuar os asserts necessários para validar se a interação modificou as propriedades do componente.

Fev 16

Flex tip: Creating a self-close Alert

Escrito por Pablo Souza em 1, 2009, Adobe, app, AR, auto, BI, Bindable, control, Controls, demo, event, EventListener, Flex, function, handle, if, label, library, MXML, Number, O, on, pt, Ria’s Geral, spark, Ved, window, XML @ 02 16th, 2011 | via http://rectius.com.br/blog | Sem comentários

In the last days I’ve received a lot of questions about how to automatically close a popup window after a certain period of time. In order to demonstrate it let’s implementing a Flex alert that will be self-closed after 5 seconds. Check the code after the jump:

<?xml version="1.0" encoding="utf-8"?>
<s:Application
	xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
	[CDATA[
	import mx.controls.Alert;
	import mx.managers.PopUpManager;
?
	private var notificatorTimer:Timer;
	private var myAlert:Alert;
?
	[Bindable]
	public var timeDestroy:Number = 5000;
?
?
	private function startTimer(event:MouseEvent):void
	{
		notificatorTimer = new Timer(timeDestroy, 1);
		notificatorTimer.addEventListener(
			TimerEvent.TIMER_COMPLETE,
			remove_handler);
		notificatorTimer.start();
		myAlert = Alert.show(
			"Wait, I'm gonna be closed after 5 sec ...",
			"MyAlert");
	}
?
?
	private function remove_handler(event:TimerEvent):void
	{
		PopUpManager.removePopUp(myAlert);
	}
?
	]]>
fx:Script>
?
<s:Button label="Abrir Alert"
		  click="startTimer(event)" />
?
s:Application>

Hope you enjoy it!

Fev 11

Eventos no PHP

Escrito por Fábio Batista da Silva em AR, auto, BI, class, classe, custom, Customizando eventos, dados, demo, dispatch, dispatchEvent, Download, event, EventListener, Evento, Eventos, events, Flex, function, git, ide, if, library, O, on, pattern, PHP, pt, RIA, Ria’s Geral, server, string, UI, zend @ 02 11th, 2011 | via http://www.flexria.com.br/home | Sem comentários

Olá,

Depois de seculos sem aparecer resolvi fazer um post para divulgar um pequeno projeto que disponibilizei no github.

Trata se de uma pequena lib que implementa o Pattern Observer bem conhecido no flex através dos events.

O link para o projeto no github é : https://github.com/FabioBatSilva/events O php 5.3 é requisito para o funcionamento

La existe um pequeno wiki sobre o projeto com as funcionalidades básicas.
Desde já peço desculpa pelo inglês…rsrs

Depois de realizar o download dos arquivos
podemos utilizar a lib carregando atravez de algum autoloader como Zend_AutoLoad ou carregando manualmente:

set_include_path('/my/library' . PATH_SEPARATOR . get_include_path());
require_once 'Events/Event.php';
use EventsEvent;

Disparando Eventos :

Para disparar eventos a partir da sua classe vc terá que estender EventDispatcher e utilizar o método dispatchEvent($event)

* Esse metodo tem como parâmetro um objeto do tipo Event que sera disparado

use EventsEvent, EventsEventDispatcher;
?
class MyObject extends EventDispatcher
{
    private $name;
?
    public function setName($name)
    {
        $this->dispatchEvent(new Event(Event::CHANGE));
        $this->name = $name;
    }
?
}

Escutando Eventos :

Para escutar os evento vc deve utilizar o método addEventListener($type,$listener) do objeto que estende a classe EventDispatcher.

* O primeiro parâmetro é uma string que identifica o tipo do evento
* O segundo parâmetro a Closure/Function que será chamada quando o evento disparar

use MyObject;
$object = new MyObject();
?
$object->addEventListener(Event::CHANGE, function($event){
    echo 'My Object Has Changed';
});
?
$object->setName('New Name');

Então quando o nome é alterado o evento do tipo Event::CHANGE é disparado e todos que estiverem ouvindo por esse tipo de evento serão chamados.

Customizando Eventos :
Vc pode criar eventos personalizados, Eles poder servir para adicionar funcionalidades ao evento ou transportar dados.

use EventsEvent;
?
class MyEvent extends Event
{
    const CHANGE_NAME = 'changeName';
?
    public $oldName;
    public $newName;
?
    public function __construct($type, $oldName = null, $newName = null)
    {
        parent::__construct($type);
        $this->oldName  = $oldName;
        $this->newName  = $newName;
    }
}

Então para dispara o evento:

public function setName($name)
{
    $event = new MyEvent(MyEvent::CHANGE_NAME, $this->name, $name);
    $this->dispatchEvent($event);
    $this->name = $name;
}

E capturar os dados na função que esta ouvindo o evento:

$object->addEventListener(Event::CHANGE, function($event){
    echo "My Object Has Changed";
    echo "OLD : " + $event->oldName;
    echo "NEW : " + $event->newName;
});

É bem simples porem pode ser útil.

Abraço e até a próxima

Fev 7

Criando um Alert que fecha sozinho com a classe flash.utils.Timer

Escrito por Pablo Souza em 1, 2009, Adobe, app, AR, auto, BI, Bindable, código, control, Controls, Dica, event, EventListener, exemplo, Flex, function, handle, if, label, library, MXML, Number, O, on, pt, RIA, Ria’s Geral, spark, UI, XML @ 02 7th, 2011 | via http://rectius.com.br/blog | Sem comentários

A dica Flex de hoje é para aqueles que nos últimos dias me perguntaram sobre como fechar automaticamente uma janela depois de um certo período de tempo. Para esse exemplo criamos um Alert que será fechado após 5 segundos. Veja o código a seguir:

<?xml version="1.0" encoding="utf-8"?>
<s:Application
	xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
	[CDATA[
	import mx.controls.Alert;
	import mx.managers.PopUpManager;
?
	private var notificatorTimer:Timer;
	private var myAlert:Alert;
?
	[Bindable]
	public var timeDestroy:Number = 5000;
?
?
	private function startTimer(event:MouseEvent):void
	{
		notificatorTimer = new Timer(timeDestroy, 1);
		notificatorTimer.addEventListener(
			TimerEvent.TIMER_COMPLETE,
			remove_handler);
		notificatorTimer.start();
		myAlert = Alert.show(
			"Aguarde, serei fechado em 5seg ...",
			"MyAlert");
	}
?
?
	private function remove_handler(event:TimerEvent):void
	{
		PopUpManager.removePopUp(myAlert);
	}
?
	]]>
fx:Script>
?
<s:Button label="Abrir Alert"
		  click="startTimer(event)" />
?
s:Application>

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

Dez 30

Dica Flex – Disparando eventos customizados do ItemRenderer com Flex 4

Escrito por Pablo Souza em 1, 2009, Adobe, app, AR, BI, blog, boolean, botão, class, classe, classes, código, components, custom, DataGrid, DataProvider, demo, Dica, dispatch, dispatchEvent, event, EventListener, Evento, Eventos, events, exemplo, flash, Flex, for, function, handle, ide, IE, int, itemRenderer, label, library, lista, LOB, MXML, O, on, problema, problemas, pt, RIA, Ria’s Geral, spark, string, tag, TAT, UI, uint, XML, XP @ 12 30th, 2010 | via http://rectius.com.br/blog | Sem comentários

Nossa dica Flex de hoje serve para aqueles que desejam acessar métodos ou propriedades do objeto application ou parent documents de dentro de um item renderer. O Flex nos oferece as seguintes formas de acesso:

mx.core.FlexGlobals.topLevelApplication: Retorna o objeto application principal, que pode ser do tipo spark.components.Application ou mx.core.Application.

mx.core.UIComponent.parentDocument: Retorna o parent document do objeto atual. Usado como alternativa ao exemplo que vamos mostrar em seguida.

mx.core.UIComponent.parentApplication: Retorna o objeto application onde o objeto atual está inserido.

Além das formas acima, uma alternativa mais elegante (e orientada a obejtos) para acessar métodos ou propriedades do parent document ou application é utilizarmos os eventos do Flex.

Imagine que temos uma aplicação que lista todos os seus usuários num datagrid. Em uma de suas colunas temos um item renderer com um botão que exclui esses usuários. Para tal precisaremos acessar um método no parent document, que no nosso exemplo será a própria application. Como vimos anteriormente podemos obter o objeto parent document através da propriedade mx.core.UIComponent.parentDocument e dessa forma chamar nosso método de exclusão. Esse método funciona corretamente, porém gera um grande acoplamento entre os objetos além de quebrar o encapsulamento das classes. Para resolvermos esses problemas vamos fazer com que ao clicar no botão excluir um evento bubble seja disparado e no objeto parent document vamos escutar o evento e então chamar o método de exclusão.

O trecho de código abaixo mostra nossa datagrid com o item renderer que possui o botão de exclusão:

1
2
3
4
5
6
7
8
    <mx:DataGrid id="dataGrid" dataProvider="{model}">

        <mx:columns>

            <mx:DataGridColumn headerText="Nome" dataField="nome" />

            <mx:DataGridColumn

                headerText="Ação" dataField="nome"

                itemRenderer="br.com.rectius.itemRendererExample.ButtonItemRenderer" />

        </mx:columns>

    </mx:DataGrid>

A seguir está o código do nosso item renderer. Repare que ao clicar no botão excluir estamos disparando um evento customizado:

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
<?xml version="1.0" encoding="utf-8"?>

<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"

                          xmlns:s="library://ns.adobe.com/flex/spark"

                          xmlns:mx="library://ns.adobe.com/flex/mx"

                          focusEnabled="true">



    <fx:Metadata>

        [Event(name="ExcluirEvent",type="br.com.rectius.itemRendererExample.ExcluirEvent")]

    </fx:Metadata> 



    <fx:Script>

        <![CDATA[

            import br.com.rectius.itemRendererExample.event.UsersEvent;



            protected function lblData_clickHandler(event:MouseEvent):void

            {

                var excluirEvent:UsersEvent = new UsersEvent(UsersEvent.EXCLUIR_EVENT, dataGridListData.label, true);

                dispatchEvent(excluirEvent);

            }

        ]]>

    </fx:Script>



    <s:Button id="lblData" top="0" left="0" right="0" bottom="0"

              label="Excluir" click="lblData_clickHandler(event)" />



</s:MXDataGridItemRenderer>

A tag Metadata expõe ao parent document o evento customizado do botão excluir:

1
2
3
    <fx:Metadata>

        [Event(name="ExcluirEvent",type="br.com.rectius.itemRendererExample.ExcluirEvent")]

    </fx:Metadata>

Isso nos possibilitou escutar o evento “ExcluirEvent” no parent document:

1
2
3
4
            protected function application1_initializeHandler(event:FlexEvent):void

            {

                dataGrid.addEventListener(UsersEvent.EXCLUIR_EVENT, excluirHandler);

            }

Abaixo você pode ver o evento que criamos para encapsular o usuário a ser excluído. Nesse exemplo estamos setando na propriedade data do nosso evento UsersEvent uma string com o nome do usuário, porém num cenário real poderíamos enviar o ID do usuário, um Value Object que armazenaria todas as propriedades do usuário clicado, ou qualquer outro objeto conveniente para sua situação:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
package br.com.rectius.itemRendererExample.event

{

    import flash.events.DataEvent;



    public class UsersEvent extends DataEvent

    {

        public static var EXCLUIR_EVENT:String = "ExcluirEvent";



        public function UsersEvent(type:String, data:String="", bubbles:Boolean=false, cancelable:Boolean=false)

        {

            super(type, bubbles, cancelable, data);

        }

    }

}

Esperam que tenham gostado. Baixem aqui o projeto de exemplo.

Até a proxima!

Out 18

Upload de arquivos com Adobe Flex e Zend AMF

Escrito por Leonardo França em .NET, 1, 2009, 4, 6, action, Actionscript, ActionScript 3, Actionscript 3.0, Actionscript3, Adobe, Adobe Flex, AMF, apache, api, app, AR, arte, Artigo, back, bar, BI, Bindable, boolean, carregar, catch, class, classe, comunicação, control, Controls, custom, Download, err, erro, error, event, EventListener, events, filter, flash, Flex, for, framework, function, Google, handle, html, ide, IE, if, image, int, Java, Javascript, label, library, lite, live, map, mg, MXML, O, on, PHP, procura, progress, pt, reference, Remoting, Ria’s Geral, RoR, server, spark, string, Tema, Teste, TextInput, try, UI, utils, Ved, Widget, Widgets, Wordpress, XML, XP, zend, Zend Amf, zendAMF, zendFramework @ 10 18th, 2010 | via http://www.leonardofranca.com.br | Sem comentários

O Zend AMF é uma implementação feita em PHP [bb] para se trabalhar com o protocolo de comunicação binário AMF(Action Message Format) fazendo parte do ZendFramework. Precisei implementar um sistema de upload de arquivos que fosse um pouco diferente do que normalmente é usado no Adobe Flash, sendo que essa funcionalidade precisava ser integrada no Zend AMF.

Pesquisando um pouco na net, achei a solução que foi mais simples do que eu imaginava baseada nesse artigo com algumas poucas adaptações.

Começaremos pelo nosso gateway que será usado como endpoint no Adobe Flex.

ACERCA

GOOGLE

Votação

AUTORES

PUBLICIDADE