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

Mar 4

Evitando problemas com Views e DTOs

Escrito por DClick Team em 1, 4, 6, Access, app, Apresentação, AR, BI, class, código, código fonte, Componente, dados, Data Binding, Download, err, exemplo, flash, Flex, Flex Components, fonte, framework, Frameworks, FullScreen, gc, IE, if, lógica, Mac, O, on, Partilha, problema, problemas, pt, Ria’s Geral, screen, Screencast, string, swf, TAT, tv, Twitter, UI, UX, wave @ 03 4th, 2010 | via http://blog.dclick.com.br/pt/ | Sem comentários

Twitter!

No seu aplicativo você tem um DTO cujo os dados são renderizados por diferentes Views (telas). Então, toda hora que o seu DTO muda, você percebe sua aplicação travada por uns segundos. Depois de um tempo você percebe que o problema é que mesmo as telas que estão invisíveis estão executando código de apresentação de dados com base no novo DTO. Bem, este é um problema comum quando trabalhamos com DTOs complexos e abusamos do Data Binding.

A notícia ruim é que se você não teve este problema ainda, um dia você terá. A notícia boa é que uma das maneiras de evitar este problema é utilizar o DTOViewHelper, componente disponibilizado neste screencast.

Alguns Frameworks atuais do Flex oferecem maneiras de resolver este problema, mas o DTOViewHelper é independente do Framework que você usa. Além disso, como pode ser visto no Screencast, você pode definir métodos auxiliares dentro do DTOViewHelper com o objetivo compartilhar lógica de apresentação de dados de DTOs entre diferentes Views (veja o exemplo da Data que mostra a string “Hoje” no Screencast).

Clique aqui para fazer o download do código fonte do exemplo “errado” (I could be WRONG).

Clique aqui para fazer o download do código fonte do exemplo “certo” (I could be RIGHT).

Fev 22

Rotacionando Janelas no Flex: PodFlip Component

Escrito por DClick Team em 1, 3d, 4, 6, Access, Actionscript, Adobe, Adobe Flex, app, AR, class, código, código fonte, Componente, comunidade, Download, egenial, flash, Flash Player, Flex, Flex 4, Flex Components, fonte, FullScreen, futuro, gc, Imersão Adobe Flex, Mac, NaN, O, on, Partilha, Pessoal, player, pt, rest, Ria’s Geral, screen, Screencast, swf, TAT, tv, Twitter, UI, wave @ 02 22nd, 2010 | via http://blog.dclick.com.br/pt/ | Sem comentários

Twitter!

A ultima turma do Imersão Adobe Flex recebeu alguns “presentinhos”. Dentre eles o componente PodFlip, utilizado numa das aplicações que desenvolvemos aqui na DClick e que o pessoal já andou vendo por aí.

É verdade que o Flex 4 e com as novas capacidades 3D do Flash Player isso será bem mais fácil no futuro. Mas enquanto este dia não chega agora é a hora de compartilhar este componente com o restante de comunidade. Espero que seja util em algum projeto para vocês.

Clique aqui para fazer o download do código fonte deste screencast.

Nov 10

Terça Insana Mega Post: Um Post, um Screencast, dois componentes e um Podcast

Escrito por DClick Team em 1, 2009, 4, 6, Access, app, Apresentação, AR, arte, class, Componente, Componentes, control, DataGrid, Download, flash, Flex, Flex Components, for, FullScreen, html, IE, int, interface, itemRenderer, O, on, podcast, pt, Ria’s Geral, screen, Screencast, Sun, swf, tag, TAT, TerÃ§a Insana, tv, Twitter, UI, Vários, wave @ 11 10th, 2009 | via http://blog.dclick.com.br/pt/ | 1 comentário

Twitter!

Resolvi repetir a dose. E aqui estou eu novamente para mais um Terça Insana Megapost.

Componente ValidatorGroup: Use apenas um validador para mais de um controle de interface.

[kml_flashembed movie="/sources/validationGroup/ValidationGroup.swf" width="496" height="190"/]
Download do ValidatorGroup

HTMLTextItemRenderer: Use um ItemRenderer super leve para formatação “avançada” de uma célula no DataGrid

[kml_flashembed movie="/sources/htmlRenderer/HTMLTextItemRendererSample.swf" width="496" height="264"/]
Download do HTMLTextItemRenderer

Screencast 2 em 1: Entenda os dois componentes em apenas 5 minutos.

Podcast: Podcast baseado numa “reunião/apresentação” sobre componentetização e vários assuntos “avançados” de Flex na DClick. Neste Podcast a Parte I da reunião com foco em componentização e performance no front-end

Download do Podcast

Nov 3

Terça Insana Mega-Post: Um post, três screencasts e três componentes

Escrito por DClick Team em 1, 2009, 4, 6, Access, app, AR, class, Componente, Componentes, Download, flash, Flex, Flex Components, FullScreen, IE, Mac, O, on, pt, quick, Review, Ria’s Geral, screen, Screencast, screencasts, swf, TAT, tv, Twitter, UI, wave @ 11 3rd, 2009 | via http://blog.dclick.com.br/pt/ | Sem comentários

Twitter!

Componente QuickView: Faça um Preview dos seus DTOs

[kml_flashembed movie="/sources/megapost/QuickViewUsage2.swf" width="496" height="264"/]
Download do QuickView

Componente QuickSearch: Faça um QuickSearch como no MAC OS

[kml_flashembed movie="/sources/megapost/QuickSearch.swf" width="496" height="264"/]
Download do QuickSearch

Componente PodStack: Faça transições sem abrir mão do View Stack

[kml_flashembed movie="/sources/megapost/PodStackSample.swf" width="500" height="450"/]
Download do PodStack

Screencast 3 em 1: Entenda tudo isso em apenas 12 minutos. Nada de textos e posts longos complicados.

Out 1

Formulários dinâmicos com validadores

Escrito por DClick Team em Actionscript, Adobe, Arquitetura da Informação, Cairngorm & Patterns, Flash Platform, Flex, Flex Components, Gumbo, programação, RIA, Tutorial @ 10 1st, 2009 | via http://blog.dclick.com.br/pt/ | Sem comentários

Em minha estréia, trago para você este script para agilizar a construção de formulários Flex, ele apenas aponta “o caminho”, você deverá implementar com os demais validadores.

Para isso vamos começar pela classe Event. chamaremos essa classe de CustomEvent, seu objetivo será criar o validador dentro do evento (mx.events.FlexEvent) creationComplete do campo, para isto foi necessário adicionar três propriedades à classe, que são: validateType do tipo Object que receberá as informações para configurar o validador, o validator do tipo coringa para que fique mais fácil de trabalhar com vários validadores diferentes (aqui vou trabalhar apenas com mx.validators.StringValidator e mx.validators.EmailValidator), e a constante contendo o nome do evento que vai caracterizar a configuração que chamamos de VALIDATECHANGE.

PLAIN TEXT

ACTIONSCRIPT:

package core.events
{
import flash.events.Event;
import mx.events.FlexEvent;
import mx.validators.EmailValidator;
import mx.validators.StringValidator;
public class CustomEvent extends FlexEvent
{
static public const VALIDATECHANGE:String =‘validatechange’;
private var _validateType:Object;
private var _validator:*;
public function CustomEvent(type:String,validateType:Object, bubbles:Boolean=false,cancelable:Boolean=false)
{
super(type, bubbles,cancelable);
setValidator(validateType);
}
public override function clone() : Event {
return new CustomEvent(CustomEvent.VALIDATECHANGE,validateType);
}
public override function toString():String {
return formatToString(‘CustomEvent’,‘type’, ‘bubbles’, ‘cancelable’, ‘validateType’,‘validator’);
}
public function get validateType():Object
{
return _validateType;
}
public function get validator():*
{
return _validator;
}
private function setValidator(params:Object):void
{
if(params.validateType.length <1){
return;
}
_validateType = params;
switch(params.validateType){
case ‘string’:
case ‘noblank’:
_validator = new StringValidator();
if(params.message.length> 0){
_validator.requiredFieldError =
_validator.requiredFieldError =
_validator.tooLongError =
_validator.tooShortError = params.message;
}
_validator.minLength = 1;
break;
case ‘email’:
_validator = new EmailValidator();
if(params.message.length> 0){
_validator.requiredFieldError =
_validator.invalidCharError =
_validator.invalidDomainError =
_validator.invalidIPDomainError =
_validator.invalidPeriodsInDomainError =
_validator.missingAtSignError =
_validator.missingPeriodInDomainError =
_validator.missingUsernameError = params.message;
}
break;
}
_validator.source = params.source;
_validator.property = params.property;
_validator.required = params.required;
_validator.triggerEvent = params.triggerEvent;
_validator.enabled = true;
}
}
}

Os validadores são classes/tags separadas do campo, para agilizar o desenvolvimento precisamos dos validadores nos campos, para isso vamos manipular uma classe baseada no TextInput (spark.components.TextInput), de forma a permitir a passagem da configuração básica do validador na tag, trabalharemos com a tag CustomInput adicionando esses atributos, que são eles: validateType que distinguirá o tipo do validador, message contendo a mensagem que será enviada ao navegador em caso de erro, required caracteriza como requerido ou não, index que ocupará o lugar do id. Para manipulação interna foram criadas as propriedades: _initialized responsável por informar se é a primeira vez que o validador será criado,_params responsável por armazenar as configurações para criação do validador, e _validator o próprio validador.

PLAIN TEXT

ACTIONSCRIPT:

package core.mxml
{
import core.events.CustomEvent;
import core.model.CustomModelLocator;
import mx.events.FlexEvent;
import mx.utils.ObjectUtil;
import spark.components.TextInput;
[Event(name=“validatechange”, type=“core.events.CustomEvent”)]
public class CustomInput extends TextInput
{
private var _initialized:Boolean = false;
private var _params:Object = {validateType:”,message:”,source:”,index:”,property:‘text’,required:false,triggerEvent:‘change’};
private var _validator:* ;
private var _model:CustomModelLocator;
private var _validateType:String;
private var _message:String = ”;
private var _required:Boolean = false;
private var _index:int;
private var _source:String;
public function CustomInput()
{
_model = CustomModelLocator.getInstance();
super();
addEventListener(FlexEvent.CREATION_COMPLETE,onCreationComplete);
}
private function dispatchEventCustom():void{
_params.validateType = _validateType;
_params.message = _message;
_params.required = _required;
_params.source = this;
_params.index = _index;
dispatchEvent(new CustomEvent(CustomEvent.VALIDATECHANGE,_params));
}
private function onCreationComplete(event:FlexEvent):void {
id = this.id = super.id = name;
addEventListener(CustomEvent.VALIDATECHANGE,setValidator);
dispatchEventCustom();
_initialized = true;
}
public function get validator():* {
return _validator;
}
private function setValidator(event:CustomEvent):void
{
enabled = true;
_validator = event.validator;
_model[_source][event.validateType.index].validator = event.validator;
}
public function get validateType():String
{
return _validateType;
}
[Bindable(event=“validatechange”)]
[Inspectable(enumeration=“noblank,string,email”, name=‘validateType’)]
public function set validateType(v:String):void
{
_validateType = v;
if(_initialized){
dispatchEventCustom();
}
}
public function get message():String
{
return _message;
}
[Inspectable(type=‘String’, name=‘message’)]
public function set message(v:String):void
{
_message = v;
}
public function get source():String
{
return _source;
}
[Inspectable(type=‘String’, name=‘source’)]
public function set source(v:String):void
{
_source = v;
}
public function get required():Boolean
{
return _required;
}
[Inspectable(type=‘Boolean’, name=‘required’)]
public function set required(v:Boolean):void
{
_required = v;
}
public function get index():int
{
return _index;
}
public function set index(v:int):void
{
_index = v;
}
}
}

Os campos serão criados no modelo da classe Form (mx.containers.Form), e como quero deixar meu formulário mais genérico, ou seja, quero que os ids, labels e validadores, sejam flexíveis, possibilitando uma criação dinâmica, foi criada então a tag CustomFormBase, que receberá os dados para configuração do formulário, dinamicamente, em uma única propriedade, e ainda receberá a ação do submit (que não foi trabalhada tão profundamente).

PLAIN TEXT

ACTIONSCRIPT:

package core.mxml
{
import core.model.CustomModelLocator;
import flash.events.MouseEvent;
import mx.collections.ArrayCollection;
import mx.containers.Form;
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.validators.Validator;
import spark.components.Button;
public class CustomFormBase extends Form
{
public var send:Button;
private var _source:ArrayCollection;
private var _model:CustomModelLocator;
private var _dataConfig:String;
public function CustomFormBase()
{
_model = CustomModelLocator.getInstance();
super();
addEventListener(FlexEvent.CREATION_COMPLETE,doCreationComplete);
}
private function doCreationComplete(event:FlexEvent):void
{
send.addEventListener(MouseEvent.CLICK,submit);
}
protected function submit(event:MouseEvent):void
{
var _validators:Array = new Array();
for(var i:int=0;i<_source.length;i++){
_validators.push(_source[i].validator);
}
_validators = Validator.validateAll(_validators);
if (_validators.length == 0) {
Alert.show(“Preenchimento correto”, “SUCCESSO”);
}
}
public function get source():ArrayCollection
{
return _source;
}
public function get dataConfig():String
{
return _dataConfig;
}
[Bindable]
[Inspectable(type=‘String’, name=‘dataConfig’)]
public function set dataConfig(v:String):void
{
_dataConfig = v;
_source = _model[v];
}
}
}

Nosso primeiro MXML é bem simples, utilizando a classe Repeater (mx.core.Repeater), dispondo as tag da maneira que desejamos que sejam vizualizadas. (atenção UX)

PLAIN TEXT

CODE:

<mxml:CustomFormBase
xmlns:fx=“http://ns.adobe.com/mxml/2009″
xmlns:s=“library://ns.adobe.com/flex/spark”
xmlns:mx=“library://ns.adobe.com/flex/halo”
xmlns:mxml=“core.mxml.*”>
<mx:Repeater id=“configure” dataProvider=“{source}”>
<mx:FormItem label=“{configure.currentItem.label}” width=“100%”>
<mxml:CustomInput width=“100%”
source=“{dataConfig}”
name=“{configure.currentItem.id}”
message=“{configure.currentItem.message}”
required=“{configure.currentItem.required}”
validateType=“{configure.currentItem.validateType}”
text=“{configure.currentItem.text}”
index=“{configure.currentIndex}” />
</mx:FormItem>
</mx:Repeater>
<mx:FormItem width=“100%” horizontalAlign=“right”>
<s:Button id=“send” label=“Submit” />
</mx:FormItem>
</mxml:CustomFormBase>

Já que criamos um padrão de construção, vamos continuar nele, separando o ActionScript do MXML, durante a criação do arquivo de referência da aplicação.

PLAIN TEXT

ACTIONSCRIPT:

package core.mxml {
import core.model.CustomModelLocator;
import mx.collections.ArrayCollection;
import spark.components.Application;
public class CustomApplication extends Application
{
[Bindable] private var _model:CustomModelLocator;
public function CustomApplication()
{
_model = CustomModelLocator.getInstance();
super();
}
public function get dataConfig1():String
{
return _model.DATASOURCE1;
}
public function get dataConfig2():String
{
return _model.DATASOURCE2;
}
}
}

E adicionamos os dados (fake) fixos.

PLAIN TEXT

ACTIONSCRIPT:

package core.model
{
import mx.collections.ArrayCollection;
[Bindable]
public class CustomModelLocator
{
public const DATASOURCE1:String = ‘dataConfig1′;
public const DATASOURCE2:String = ‘dataConfig2′;
public var dataConfig1:ArrayCollection;
public var dataConfig2:ArrayCollection;
static private var instance:CustomModelLocator;
static public function getInstance() : CustomModelLocator
{
if ( instance == null ){
instance = new CustomModelLocator(new CustomSingleton());
}
return instance;
}
public function CustomModelLocator(singleton:CustomSingleton)
{
if ( singleton == null ){
throw new Error( “Construção inválida” );
}else{
dataConfig1 = new ArrayCollection([
{label:‘Nome’,message:‘Nome inválido’,validateType:‘noblank’,id:‘nome’,text:‘Pedro Claudio’,required:true},
{label:‘E-mail’,message:‘E-mail inválido’, validateType:‘email’,id:‘email’,text:”,required:true}
]);
dataConfig2 = new ArrayCollection([
{label:‘Endereço’,message:‘Endereço inválido’,validateType:‘noblank’,id:‘end’,text:”,required:true },
{label:‘Bairro’,message:‘Bairro inválido’,validateType:‘noblank’,id:‘bairro’,text:”,required:false},
{label:‘Cidade’,message:‘Cidade inválida’,validateType:‘noblank’,id:‘bairro’,text:”,required:true }
]);
}
}
}
}
class CustomSingleton {}

Por fim nossa chamada mãe.

PLAIN TEXT

CODE:

<mxml:CustomApplication
xmlns:fx=“http://ns.adobe.com/mxml/2009″
xmlns:s=“library://ns.adobe.com/flex/spark”
xmlns:mx=“library://ns.adobe.com/flex/halo”
xmlns:mxml=“core.mxml.*” viewSourceURL=“srcview/index.html”>
<mx:HDividedBox>
<s:Panel width=“350″>
<mxml:CustomForm dataConfig=“{dataConfig1}” width=“100%” />
</s:Panel>
<s:Panel width=“350″>
<mxml:CustomForm dataConfig=“{dataConfig2}” width=“100%” />
</s:Panel>
</mx:HDividedBox>
</mxml:CustomApplication>

exemplo
source

Este material foi registrado no http://cookbooks.adobe.com, local onde, a comunidade de desenvolvedores e usuários de tecnologias Adobe, podem compartilhar informações. E ainda no http://blog.pcsilva.com, origem do post.

Mai 18

ProgressBar parou de funcionar? Faltou coizinha…

Escrito por DClick Team em bar, Flex, Flex Components, progress @ 05 18th, 2009 | via http://blog.dclick.com.br/pt/ | Sem comentários

Derrepente, progressBar que sempre funcionou parou de funcionar. Bem pra dar estresse quando prazo é bem curto. Para passar direto de assunto… Acontece quando invez de player 9.x passou de usar 10.x.

Antigamente se você não colocou nada, ou colocou mode=”manual” no progressBar, funcionou. Agora com player 10, tem que colocar mode=”{ProgressBarMode.MANUAL}” se omite, barra nunca vai correr, se você tá setando pelo setProgress(loaded, total) de fora.

Mar 4

Carrossel 3D com Flash Player 10

Escrito por DClick Team em Actionscript, Flex, Flex Components @ 03 4th, 2009 | via http://blog.dclick.com.br/pt/ | Sem comentários

Eu havia postado uma breve introdução sobre efeitos 3D nativos do Flash Player 10 há algum tempo. Com base naquele estudo e um entendimento melhor de como o FP10 funciona, criei este componente que, apesar de comum para quem usa frameworks 3D (Papervision, etc…), funciona muito bem nativo e consequentemente fica muito mais leve.

Além disso o componente funciona com qualquer DisplayObject, tornando sua interatividade ainda maior.

A demo a seguir mostra o componente e algumas de suas propriedades:

Você pode visualizar aqui o código fonte.
(Não esqueça que este é um projeto FP10. Para este funcionar vá em Propriedade do Projeto > Flex compiler > Require Flash Player e preencha com 10.0.0).

| Entradas recentes »