Eduardo Armstrong Correnti

CheckBox com quebra de linha

2011-09-11T20:01:00.002-03:00

Blz?! Depois de quase um ano sem postrar nada essa dica é bem interessante. O componente
CheckBox padrão do Flex não faz quebra de linha oque na minha opinião é uma tremenda furada por parte da Adobe mas como quase sempre há um "jeitinho", este é mais um deles. O componente deste artigo faz a quebra de linha do texto do checkBox e é importante salientar que a quebra é feita pela propriedade width sendo assim não é necessário colocar "\n" no texto.

Source da classe

package {

  import flash.text.TextFieldAutoSize;
  
  import mx.controls.CheckBox;
  
  public class CheckBoxMultLine extends CheckBox {
    public function CheckBoxMultLine() {
      super();
    }
    
    override protected function createChildren(): void {
      super.createChildren();
  
      textField.wordWrap = true;
      textField.autoSize = TextFieldAutoSize.LEFT;
    }
    
    override protected function updateDisplayList(unscaledWidth: Number, unscaledHeight: Number):void {
      super.updateDisplayList(unscaledWidth, unscaledHeight);
    }
  }
}

Exemplo

Obs.: O mesmo pode ser feito com o RadioButton

Bons estudos e bom trabalho a todos.

Abraços

AutoComplete extends TextInput

2010-12-27T22:15:00.005-02:00

Blz?!

Quando comecei a trabalhar com Flex um dos componentes mais bacanas que eu encontrei foi o AutoComplete da Adobe.
Mas olhando o source o compenente vi que é baseado em um ComboBox oque para mim não ajuda muito porque eu já tenho um componente baseado no TextInput que contém várias implementações, máscara, UpperCase, Numerico, ou seja, ter que reescrever essas implementações para o AutoComplete seria perder tempo e aumentar o nível de complexidade de manutenção, oque é um tiro no pé e como eu não gosto de atirar no meu pé eu escrevi o componente FAutoComplete que é baseado em um TextInput. Vão observar que eu fiz extends para o FTextInput, basta substituir por TextInput.

Há comentários no fonte então a história acaba aqui e vamos ao source.

Source da classe

package Componente {

  import flash.events.Event;

  import flash.events.KeyboardEvent;

  

  import mx.collections.ArrayCollection;

  import mx.controls.ComboBox;

  import mx.controls.TextInput;

  import mx.events.DropdownEvent;

  

  public class FAutoComplete extends FTextInput {

    private var

      FField: String = '',

      FDataProvider: ArrayCollection = new ArrayCollection(),

      _uCombo: ComboBox = new ComboBox();

    

    [Inspectable(

      category = "eduarmstrong", 

      defaultValue = ""

    )]

    public function get LabelField(): String {

      return(FField);

    }

    public function set LabelField(AField: String): void {

      FField = AField;

    }

    

    [Inspectable(

      category = "eduarmstrong", 

      defaultValue = ""

    )]

    public function get DataProvider(): ArrayCollection {

      return FDataProvider;

    }

    public function set DataProvider(ADataProvider: ArrayCollection): void {

      var

        I: int;

        

      // Faz add do todos os item usando um for para não alterar a estrutura do arrayCollection

      for (I = 0; I < ADataProvider.length; I++)  

        FDataProvider.addItem(ADataProvider[I]);

    }



    public function FAutoComplete() {

      // Listener para os eventos observados

      addEventListener(Event.CHANGE, proChangeEvent);

      addEventListener(KeyboardEvent.KEY_DOWN, proKeyDownEvent);

      super();

    }



    private function proKeyDownEvent(EvKey: KeyboardEvent): void {

      // Quando o usuário pressionar a seta para baixo muda o foco para comboBox

      if (EvKey.keyCode == 40) {

        if (_uCombo.visible)

          _uCombo.setFocus();

      }

      // Quando usuário pressionar Ctrl + ESPAÇO abre a lista completa  

      else if (EvKey.ctrlKey && EvKey.keyCode == 32) {

        // Removo o filtro

        FDataProvider.filterFunction = null;

        FDataProvider.refresh();

        // Exibe a comboBox

        _uCombo.open();

        _uCombo.visible = true;

        _uCombo.selectedIndex = 0;

      }

    }



    private function proChangeEvent(EvChange: Event): void {

      if (text != '') {

        FDataProvider.filterFunction = fncFiltraDataProvider;

        FDataProvider.refresh();

        

        function fncFiltraDataProvider(Item: Object): Boolean {

          var

            _rConsiste: Boolean,

            _rTamanho: int;

         

          // Tamanho da String digitada

          _rTamanho = text.length;  

          

          // Filtro para simular like ' %' do SQL

          if (String(Item[FField]).toUpperCase().substr(0, _rTamanho) == text.toUpperCase())

            _rConsiste = true;

          else

            _rConsiste = false;

          

          return _rConsiste;

        }

        

        /* Depois de aplicar a filterFunction se ainda "existir" 

        dados no arrayCollection abre a comboBox */

        if (FDataProvider.length > 0) {

          _uCombo.open();

          _uCombo.visible = true;

        }

        else

          proHideCombo();

      }

      else

        proHideCombo();

    }

    

    private function proHideCombo(): void {

      _uCombo.close();

      _uCombo.visible = false;

      setFocus();

    }

    

    private function proCloseComboBox(EvClose: DropdownEvent): void {

      proHideCombo();

      text = _uCombo.selectedItem.DS;

    }

    

    override protected function createChildren(): void {

      super.createChildren();

      

      // Configuração para comboBox

      _uCombo.labelField = FField;

      _uCombo.selectedIndex = - 1;

      _uCombo.setStyle('arrowButtonWidth', '0');

      _uCombo.editable = true;

      _uCombo.visible = false;

      _uCombo.addEventListener(DropdownEvent.CLOSE, proCloseComboBox);

      _uCombo.dataProvider = FDataProvider;



      addChild(_uCombo);

    }



    override protected function updateDisplayList(w:Number, h:Number): void {

      super.updateDisplayList(w, h);

      

      _uCombo.width = width;

      _uCombo.x = 0;

      _uCombo.y = (height + 2);

    }

  }

}

Como utilizar

[Bindable]

private var

  _rDado: ArrayCollection = new ArrayCollection([

    {CD: '1', DS:'Andriano'},

    {CD: '2', DS:'Adriana'},

    {CD: '3', DS:'Ana'},

    {CD: '4', DS:'Amanda'},

    {CD: '5', DS:'Beatriz'},

    {CD: '6', DS:'Beti'},

    {CD: '7', DS:'Barbara'},

    {CD: '8', DS:'Bia'},

    {CD: '9', DS:'Francisco'},

    {CD: '10', DS:'Fred'},

    {CD: '11', DS:'Floriano'}

  ]);

 

 

 // DataProvider - Informa o ArrayCollection que servirá de base para o componente

 // LabelField - Qual field dentro do ArrayCollection deverá ser listado

Bons estudos e bom trabalho a todos.

Abraços

Consultar CEP - HTTPService

2010-11-16T22:39:00.004-02:00

Blz?!

Depois de mais de 2 meses de inatividade desta vez ou mostrar aqui uma dica que um amigo (Felipe Cesarini) me passou. Esse post nada mais é que o Flex consumindo um Webservices de consulta de CEP no caso do site www.buscarcep.com.br/ (não conheço ninguém da empresa, não estou ganhando um centavo), é um serviço muito bacana e vale a pena dar uma olhada com mais atenção.

Faça o cadastro no site www.buscarcep.com.br/ e obter a chave de acesso.

Não me preocupei em fazer nenhuma grande validação antes de consumir o WS ou no retorno do mesmo o exemplo está preparado apenas para o caso "deu tudo certo", então recomendo se você for implementar isso na sua aplição de atenção ao tratamento de erros [;)]

Agora chega de enrolação, vamos lá!

Basta digitar o seu CEP e pressionar ENTER ou TAB, a chave de acesso deste exemplo só dá direito a 10 consultas por minuto então se não funcionar de primeira, aguarde um pouco.

import mx.managers.CursorManager;
import mx.rpc.events.ResultEvent;
import mx.rpc.http.HTTPService;
import mx.rpc.events.FaultEvent;
import mx.controls.Alert;


[Bindable]
private var
  _uBucaCEP: HTTPService;

private function proCreationComplete(): void {
  // Iniciazila o serviço
  _uBucaCEP = new HTTPService();
  _uBucaCEP.method = 'POST';
  _uBucaCEP.addEventListener(ResultEvent.RESULT, proCEPResultHandler, false, 0, true);
  _uBucaCEP.addEventListener(FaultEvent.FAULT, proFaultEvent, false, 0, true);
  _uBucaCEP.resultFormat = 'e4x'; 
}

private function proNR_CEPFocusOut(): void {
  // Faz uma verificação simples antes de realizar a consulta
  if (eNR_CEP.length == 8 && !isNaN(parseInt(eNR_CEP.text))) {
    CursorManager.setBusyCursor();
    _uBucaCEP.url = 'http://www.buscarcep.com.br/?cep=' + eNR_CEP.text + '&formato=xml&chave=SUA_CHAVE_AQUI'
   _uBucaCEP.send();
  }
}

private function proCEPResultHandler(Evento: ResultEvent):void {
  var 
    _rResult: XMLList = new XMLList(new XML(Evento.result));
  
  CursorManager.removeAllCursors();
  if (eNR_CEP.length == 8){
    eNM_END.text = String(_rResult..bairro);
    eCD_CIDADE.text = String(_rResult..ibge_municipio);
    eNM_CIDADE.text = String(_rResult..cidade);
    eSG_ESTADO.text = String(_rResult..uf);
  } 
  else {
    eNM_END.text = '';
    eNM_BAIRRO.text = '';
    eCD_CIDADE.text = '';
    eNM_CIDADE.text = '';
    eSG_ESTADO.text = '';
  }
}

private function proFaultEvent(Evento: FaultEvent): void {
  CursorManager.removeAllCursors();
  Alert.show(Evento.message.toString());
}

Bons estudos e bom trabalho a todos.

Abraços

Substitute - Classe StringUtil

2010-09-07T09:50:00.003-03:00

Blz?!

Quantas vezes já aconteceu de você precisar de uma funcionalidade e pensar, "isso deveria existir em Flex" e acabou dando um "jeitinho" ?
Se isso nunca aconteceu com você meus parabéns, comigo já e esse post é exatamente isso, precisava concatenar Strings, tinha um texto principal e no meio deste precisava colocar as informações de um formulário preenchido pelo usuário a primeira coisa que me lembrei foi do printf existente no C e pesquisando encontrei o método substitute da classe StringUtil, veja o exemplo abaixo com é simples a implementação

import mx.utils.StringUtil;
            
[Bindable]
private var _uMsg: String = 'Nome {0} \nEmpresa: {1} \nTelefone: {2}'; 
          
private function proClickBtnSubstitue(): void {
  mMsg.text = StringUtil.substitute(_uMsg, eNome.text, eEmp.text, eTel.text);
}

Bons estudos e bom trabalho a todos.

Abraços

Personalizando o componente DateField

2010-07-17T01:56:00.006-03:00

Blz?!

Nesse post vou personalizar o componente DataField, vamos ver como usar a propriedade Inspectable já mostrada nesse post.
Além da tradução para português o componente recebeu alguns funções/métodos para facilitar a vida no dia a dia.

1 - DataInicial - Inicializa o componente com a data atual
      - parâmetros: Hoje ou Vazio
2 - CheckDate - Faz a validação da data, mas não interrompe o processo
      - parâmetros: true ou false
3 - KeyDown - Função adicionada para melhorar a usabilidade do componente
      - abre o calendário quando o usuário pressionar a tecla ESPAÇO.

DataInicial e CheckDate você pode setar o valor em modo design equanto a propriedade para abrir o calendário que está atribuída ao evento KeyDown é default no componente e foi criada para melhorar a usabilidade do componente DateField, quanto menos o usuário necessitar do mouse melhor.

package {
  import flash.events.FocusEvent;
  import flash.events.KeyboardEvent;
  
  import mx.controls.Alert;
  import mx.controls.DateField;
  import mx.events.FlexEvent;
  import mx.events.ValidationResultEvent;
  import mx.validators.DateValidator;

  public class FDateField extends DateField {
    [Bindable]
    private var
      FDataInicial: String = 'Vazio',
      FCheckDate: Boolean = true;
      
    [Inspectable(
      category = "eduarmstrong", 
      enumeration = "Hoje,Vazio"
    )]
    public function get DataInicial(): String {
      return(FDataInicial);
    }
    public function set DataInicial(ADataInicial: String): void {
      FDataInicial = ADataInicial;
    }

    [Inspectable(
      category = "eduarmstrong", 
      enumeration = "true,false"
    )]
    public function get CheckDate(): Boolean {
      return(FCheckDate);
    }
    public function set CheckDate(ACheckDate: Boolean): void {
      FCheckDate = ACheckDate;
    }
    
    public function FDateField() {
      super();
      // Legenda para os dias da semana
      dayNames = ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'];
      
      // Formato para data
      formatString = 'DD/MM/YYYY';
      
      // Restrict usado para evitar que o usuário digite A-Z
      restrict = "0-9, /";
      
      // Tradução dos meses 
      monthNames = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 
        'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
      
      // Irá permitir que o usuário digite a data
      editable = true;
      
      // Inicia o calendário no Domingo   
      firstDayOfWeek = 0; 
      
      // Habilita a navegação por ano.
      yearNavigationEnabled = true;  
      
      width = 100;
      
      /* Adicionando ao evento de focusOut o método que irá colocar
      máscara na data digitada pelo usuário */
      addEventListener(FocusEvent.FOCUS_OUT, proSetMask, false, 0, true);
      
      /* Adiciona ao evento keyDown o método para "abrir" o calendário
      ao pressionar ESPAÇO */
      addEventListener(KeyboardEvent.KEY_DOWN, proKeyDown, false, 0, true);
      
      // Adicina ao evento creationComplete o método que irá preencher a data
      addEventListener(FlexEvent.CREATION_COMPLETE, proDataInicial, false, 0, true);
    }
    
    private function proDataInicial(E: FlexEvent): void {
      if (FDataInicial == 'Hoje')
         data = new Date();
    }
    
    private function proKeyDown(E: KeyboardEvent): void {
      // Espaço
      if (E.keyCode == 32)
        open();
    }

    private function proSetMask(evFocus: FocusEvent): void {
      if ((text.charAt(2) != '/') || (text.charAt(5) != '/')) {
        if (text.length == 6)
          text = text.substr(0, 2) + '/' + text.substr(2,2) + '/' + text.substr(4, 4);
        else if (text.length == 8)
          text = text.substr(0, 2) + '/' + text.substr(2,2) + '/' + text.substr(4, 4);
      }
      
      // Verifica se a opção para validar a data está ativa
      if (FCheckDate)
        proCheckDate();
    }
    
    private function proCheckDate(): void {
      var       
        _rDateValidator: DateValidator = new DateValidator();
        
      _rDateValidator.source = this;
      _rDateValidator.required = false;
      _rDateValidator.property = 'text';
      _rDateValidator.inputFormat = 'dd/mm/yyyy';
      _rDateValidator.allowedFormatChars = '/-';
      _rDateValidator.wrongDayError = 'Favor informar um dia válido para o mês.' 
      _rDateValidator.wrongLengthError = 'Favor informar a data no formato dd/mm/aaaa.' 
      _rDateValidator.wrongMonthError = 'Favor informar um mês entre 1 e 12.' 
      _rDateValidator.validate();
    }
  }
}

Bons estudos e bom trabalho a todos.

Abraços

Tire fotos dos seus componentes

2010-06-17T22:04:00.005-03:00

Blz?!

A primeira vista o título pode soar no mínimo estranho, mas logo logo você vai entender e concordar (ou continuar achando que sou louco).

Mas vamos ao que interessa, nesse post vou mostrar como você pode gerar uma imagem de qualquer componente da sua aplicação e apartir dai é só usar a criatividade. A classe responsável em "gerar a imagem" é a UISnapShot e o restante é a parte do "usar a criatividade"

package Componente {
  import flash.display.BitmapData;
  import flash.geom.Matrix;
  import flash.display.Bitmap;
  import mx.controls.Image;
  import mx.core.UIComponent;
  
  public class UISnapShot extends Image {
    public function UISnapShot() {
        /* Definindo largura e altura para que a imagem ocupe
        100% do espaço onde for adicionada */
        this.percentWidth = 100;
        this.percentHeight = 100;
        super();
    }
  
    public function set targetUI(Target: UIComponent): void {
        // Método set para definir o alvo 
        drawUISnapShot(Target);
    }
  
    private function drawUISnapShot(Target: UIComponent): void {
        var UIBData:BitmapData = new BitmapData(Target.width, Target.height);
        var UIMatrix:Matrix = new Matrix();
        UIBData.draw(Target, UIMatrix);
        source = new Bitmap(UIBData);
        invalidateDisplayList();
    }
  }
}

Agora que já vimos como "tirar foto do componente", vamos a parte de criatividade. Desde que eu instalei o W7 uma das poucas coisas que eu gostei foi a miniatura do aplicativo minimizado que aparece sempre que você coloca o mouse na barra de tarefas então para esse exemplo eu fiz uma classe bem simples para fazer as miniaturas das telas minimizadas na aplicação. E para isso eu fiz uma classe chamada FDockBarW7 (apesar de não ser uma dockBar foi o primeiro nome que me veio na cabeça).

package Componente {
  import Function.FParam;
  
  import flash.events.MouseEvent;
  import flash.events.TimerEvent;
  import flash.utils.Timer;
  
  import mx.containers.Canvas;
  import mx.core.UIComponent;
  import mx.effects.Fade;

  public class FDockBarW7 extends Canvas {
    private var _uParam: FParam = FParam.getInstance();
    private var _uParent: Object = new Object();
    private var _uTarget: Object = new Object();
    private var _uImgDock: UISnapShot = new UISnapShot();
    
    private static var _rInstance: FDockBarW7;
    
    public function FDockBarW7(Type: PrivateFDockBarW7) {
      super();
      addEventListener(MouseEvent.MOUSE_OVER, removeSnapShot);
      if (Type == null)
    throw new Error('Obtenha uma instância da classe usando o método getInstante().');
    }
    
    public static function getInstance(): FDockBarW7 {
   if (_rInstance == null)
    _rInstance = new FDockBarW7 (new PrivateFDockBarW7());
   return _rInstance;
  }
  
    public function showSnapShot(Parent: Object, Target: Object = null, Time: int = 3000): void {
      var
        _rTimer: Timer = new Timer(Time, 1);
        
      _rTimer.addEventListener(TimerEvent.TIMER, proRemove);
      _rTimer.start();
      
      function proRemove(evTimer: TimerEvent): void {
        dispatchEvent(new MouseEvent(MouseEvent.MOUSE_OVER));
      }    
      _uParent = Parent;
      _uTarget = Target;
      
      this.x = _uParent.x;
      this.y = _uParent.y - 160;
      _uImgDock.width = 300;
      _uImgDock.height = 150;
      
      if (_uTarget != null)
        _uImgDock.targetUI = _uTarget as UIComponent;
      else
        _uImgDock.targetUI = _uParent as UIComponent;
       
       this.addChild(_uImgDock);
      
      _uParam._sMDIApp.addChild(this);
    }
        
    public function removeSnapShot(e: MouseEvent): void {
      try {
      // _sMDIApp é o canvas principal da minha aplicação
        _uParam._sMDIApp.removeChild(this);
      }
      catch (e: Error){
      
      }
    }    
  }
}

internal class PrivateFDockBarW7 {
  public function PrivateFDockBarW7() {
  }
}

Já temos duas classes, UISnapShot para "tirar a foto" e a FDockBarW7 para montar a miniatura da janela. Nesse exemplo estou usando o MDIWindow.

public static function openTela(Componente: DisplayObject, Caption: String): void {
  var
    _rDock: FDockBarW7 = FDockBarW7.getInstance(), 
    _rTela: MDIWindow = new MDIWindow();
  
  // Listener para detectar o mouse sobre a tela  
  _rTela.addEventListener(MouseEvent.MOUSE_OVER, show);
  
  // Configuração da tela
  _rTela.title = Caption;
  _rTela.height = 400;
  _rTela.width = 500;
  _rTela.layout = 'vertical';
  _rTela.addChild(Componente);
  
  /* _sMDIApp mais uma vez o canvas principal da aplicação
  é o canvas de base usado pora adicionar telas, alert
  personalizado entre outros . . .*/
  _uFparam._sMDIApp.windowManager.add(_rTela);
  
  function show(e: MouseEvent): void {
    // se a tela estiver minimizada . . .
    if (_rTela.minimized)
      _rDock.showSnapShot(_rTela, Componente);
  }
}

private function cliBntAbrirTela(): void {
  var _r: FParam = FParam.getInstance();
  var _t: Teste = new Teste();

  _r._sMDIApp = cvApp;
 
  FncUtil.openTela(_t, 'teste');
}

Clique aqui para ver o exemplo

Bons estudos e bom trabalho a todos.

Abraços

Controlando o processamento assíncrono

2010-06-06T10:04:00.005-03:00

Blz?!

Depois de mais de um mês sem postar nada desta vez vou mostrar uma maneira simples, porém muito eficaz de controlar o processamento assíncrono. Você já deve ter ficado com

muita raiva quando por exemplo existem dois métodos, o primeiro faz uma consulta a base de dados e o segundo toda uma decisão com base nas informações do primeiro método, mas a consulta demora mais que devia e o segundo método é executado como ainda não houve retorno do primeiro método de duas uma, blz não vai acontecer nada (oque já não é nada bom) ou vai "explodir" um erro na cara do usuário (ainda pior). Então para controlar isso vamos "amarrar" a execução dos métodos passando-os como parâmetro, nesse exemplo vão ver dois botões "Sem controle" e "Com controle".
Sem controle é a chamada dos método da maneira tradicional onde você colocaria os métodos um logo abaixo do outro conforme a ordem de execução, já "Com controle" os métodos são passados na assinatura dos métodos (confuso? vai ficar mais tranquilo ao ver o código) assim quem foi passado somente será executado ao final do primeiro método.

import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.managers.CursorManager;

[Bindable]
private var _uDado: ArrayCollection = new ArrayCollection();

/* Na assinatura do método há um parâmetro do tipo Function que
pode ou não ser informado dependendo da necessidade */
private function metodoUm(OnRetorna: Function = null): void {
  var
    _rResult: Number,
    I: int;
  
  CursorManager.setBusyCursor();
  
  // Um laço de repetição para simular uma operação "demorada"
  for (I = 0; I <= 99999; I++) {
    _rResult = (I * 90 + 88 / Math.PI + 9999 / .56 * 903.09); 
    _uDado.addItem(_rResult);
  }
  
  /* Se for informado algum método ao "chamar" o métodoUm
  é agora que ele será "chamado" */
  if (OnRetorna != null)
    OnRetorna();  
}

private function metodoDois(): void {
  // Bloco try para capturar o erro
  try {
    mResultado.text += '\n' + _uDado[99999];
  }
  catch (erro: Error) {
    mResultado.text += '\n' + erro.message;
  }
  
  // Remove o busy
  CursorManager.removeAllCursors();
}

private function clickBtnSemControle(): void {
  /* Aqui a o modo "tradicional" onde os método são colocados
  na ordem de execução */
  metodoUm();
  metodoDois();
}

private function clickBtnComControle(): void {
  // Aqui colocando um pouco mais de ordem nas coisas
  metodoUm(metodoDois);
}

Ps.: Nos testes o método "Sem controle" deu erro duas a cada dez execuções,
portanto não se engane se ao executar o exemplo parecer que as duas maneiras
sempre terão o mesmo resultado.

Bons estudos e bom trabalho a todos.

Abraços

Comparando datas

2010-04-30T22:26:00.001-03:00

Blz?!

Nesse exemplo vou mostrar uma maneira fácil de fazer uma das piores coisas que existem (na minha opinião), comparar duas datas e saber qual é maior.

DtCompare.mxml


  applicationComplete="proCreationComplete()" layout="absolute" width="330" height="278">

DtCompare.as

import mx.utils.ObjectUtil;

private function proCreationComplete(): void {
  var
    _rNow: Date = new Date(); 
  /* Configurando o componente para padrão brasileiro
  eu recomendo fazer um componente para isso, mas p/
  esse exemplo esse tipo de configuração basta */  
  dt1.monthNames = ['Janeiro', 'Fevereiro', 
    'Março', 'Abril', 'Maio', 'Junho', 'Julho', 
    'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
  dt1.dayNames = ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'];
  dt1.formatString = 'DD/MM/YYYY';
  dt1.firstDayOfWeek = 0; 
  dt1.yearNavigationEnabled = true;
  
  dt2.monthNames = dt1.monthNames;
  dt2.dayNames = dt1.dayNames;
  dt2.formatString = dt1.formatString;
  dt2.firstDayOfWeek = dt1.firstDayOfWeek; 
  dt2.yearNavigationEnabled = dt1.yearNavigationEnabled;
  
  dt1.data = _rNow; 
  dt2.data = _rNow; 
}

private function proClickBtnComparar(): void {
  // Usando o método dateCompare da classe ObjectUtil
  if (ObjectUtil.dateCompare(dt1.selectedDate, dt2.selectedDate) < 0)
    mResultado.text += dt1.text + ' < ' + dt2.text + '\n';
  else if (ObjectUtil.dateCompare(dt1.selectedDate, dt2.selectedDate) > 0)
    mResultado.text += dt1.text + ' > ' + dt2.text + '\n';
  else
    mResultado.text += dt1.text + ' = ' + dt2.text + '\n';
}

Bons estudos e bom trabalho a todos.

Abraços

MenuBar - dataProvider estático

2010-04-26T20:56:00.001-03:00

Blz?!

Esse exemplo mostra como usar o componente MenuBar com um dataProvider estático, ou seja você já sabe todas as opções que devem existir.

MnBar.mxml

MnBar.as

import mx.collections.XMLListCollection;
import mx.controls.Alert;
import mx.events.MenuEvent;

private function proCreationComplete(): void {
  var 
    _rNmDataProvider: XMLListCollection,
    _rNnItem: XMLList =
      <>
        
          
          
          
        
        
          
          
          
            
            
          
        
      ;

   _rNmDataProvider = new XMLListCollection(_rNnItem);    
   mnBar.dataProvider = _rNmDataProvider;
}

private function proItemClick(e: MenuEvent):void  {
  // Só irá mostrar o Alert nos sub-menus
  if (e.item.@data != 'barra')
    Alert.show('Opção: ' + e.item.@label + '\n' + 
      'Data: ' + e.item.@data, 'eduarmstrong');
}

Bons estudos e bom trabalho a todos.

Abraços

Utilizando a tag Inspectable para personalizar componentes

2010-04-15T11:30:00.011-03:00

Blz?!

Nesse exemplo eu personalizei o coponente TextInput, atribuindo a ele uma função de UpperCase ao texto. Mas o que eu realmente quero mostrar é como montar a sua "paleta de propriedades" utilizand a tag Inspectable.

Leia a documentação da Adobe sobre Inspectable

package Componente {
  import flash.events.Event;
  
  import mx.controls.TextInput;
  
  public class FTxtInput extends TextInput {
    private var _uToUpperCase: Boolean;
    
    public function FTxtInput() {
      super();
       addEventListener(Event.CHANGE, changeEvent);
    }
    
    [Inspectable(
      category = "eduarmstrong", 
      enumeration = "true,false",
      defaultValue = "false"
    )]
    
    public function get UpperCase(): Boolean {
      return(_uToUpperCase);
    }
    
    public function set UpperCase(Valor: Boolean): void {
      _uToUpperCase = Valor;
    }
    
    private function changeEvent(e: Event): void {
      if (_uToUpperCase)
        text = text.toUpperCase();  
    }
  }
}

Foi criada a categoria eduarmstrong contendo a UpperCase

Bons estudos e bom trabalho a todos.

Abraços

filterFunction - Estados X Cidades

2010-04-14T12:35:00.013-03:00

Blz?!

Esse é um exemplo "clássico" onde a aplicação tem duas comboBox, estado e cidade,o usuário seleciona o estado e na combo de cidades serão listadas apenas as cidades do estado selecionado, para fazer isso vamos fazer uso de 2 ArrayCollection (estado e cidade) e para fazer o filtro a propriedade filterFunction

FilterFnc.mxml


  
  
      width="150" x="200" y="47"/>

FilterFnc.as

import mx.collections.ArrayCollection;
 
 [Bindable] 
 private var _uEstado: ArrayCollection = new ArrayCollection([
   {estado: 'Acre - AC', codEst: '1'},
   {estado: 'Amazonas - AM', codEst: '2'},
   {estado: 'Bahia - BA', codEst: '3'}
 ]);
 
 [Bindable]
 private var _uCidade: ArrayCollection = new ArrayCollection([
   {codEst: '1', cid: 'Acrelandia - AC'},
   {codEst: '2', cid: 'Alvaraes - AM'},
   {codEst: '1', cid: 'Assis Brasil - AC'},
   {codEst: '3', cid: 'Alagoinhas - BA'},
   {codEst: '1', cid: 'Brasileia - AC'},
   {codEst: '2', cid: 'Anori - AM'},
   {codEst: '1', cid: 'Epitaciolandia - AC'},
   {codEst: '3', cid: 'Acajutiba - BA'},
   {codEst: '3', cid: 'Adustina - BA'},
   {codEst: '1', cid: 'Cruzeiro do Sul - AC'},
   {codEst: '1', cid: 'Capixaba - AC'},
   {codEst: '2', cid: 'Amatura - AM'},
   {codEst: '2', cid: 'Anama - AM'},
   {codEst: '1', cid: 'Bujari - AC'},
   {codEst: '2', cid: 'Apui - AM'},
   {codEst: '3', cid: 'Abaira - BA'},
   {codEst: '3', cid: 'Abare - BA'},
   {codEst: '2', cid: 'Autazes - AM'},
   {codEst: '2', cid: 'Atalaia do Norte - AM'},
   {codEst: '3', cid: 'Aiquara - BA'},
   {codEst: '3', cid: 'Agua Fria - BA'}
 ]);  

 private function setFiltro(): void {
    _uCidade.filterFunction = fncFiltraCidade;
    _uCidade.refresh();
    cbxCidade.selectedIndex = 0;
 }
 
 private function fncFiltraCidade(Item: Object): Boolean {
   if (Item.codEst.search(cbxEstado.selectedItem.codEst) != -1)
     return true;
   else 
     return false;
 }
 
 private function removeFiltro(): void {
   cbxEstado.selectedIndex = -1;
   cbxCidade.selectedIndex = -1;
   _uCidade.filterFunction = null;
   _uCidade.refresh();  
 }

Bons estudos e bom trabalho a todos.

Abraços

DataGrid truncando informações

2010-04-13T15:35:00.003-03:00

Blz?!

É muito comum o uso do componente DataGrid, por ser prático, fácil, mas alguma vezes as informações
insistem em ultrapassar o tamanho da coluna e você não tem como aumentar ainda mais o tamanho do componente com isso os dados ficam truncados. Para resolver esse problema (leia problema como opinião própria e não como tautologia), basta implementar o Label no itemRenderer do DataGrid.

No exemplo abaixo o primeiro DataGrid sem itemRenderer e o segundo com itemRenderer, notem que no segundo DataGrid quando o dado ultrapassa o tamanho da coluna são criados 3 pontinhos, assim que o usuário posicionar o mouse sobre o dado ele será exibido em um toolTip permitindo que todo conteúdo seja lido.

Basta adicionar na declaração do DataGrid: itemRenderer="mx.controls.Label"

Bons estudos e bom trabalho a todos.

Abraços

Efeitos básicos, deixe a sua aplicação mais agradável

2010-04-12T18:32:00.003-03:00

Blz?!

É muito importante quando se está desenvolvendo uma aplicação a confiabilidade na persistências dos dados,
a usabilidade de aplicação como um todo e para isso ficar mais agradável ao usuário pode-se fazer uso de efeitos de transição e se bem aplicados ganham pontos positivos do usuário final. Nesse exemplo veremos duas maneiras de aplicar efeitos de transição: usando a tag de efeito diretamente no mxml e também como fazer a mesma coisa com "actionScript puro".

< ?xml version="1.0" encoding="utf-8"?>
< mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="380" height="192">
  < mx:Script>
   < ![CDATA[
   import mx.effects.Sequence;
   import mx.effects.Move;
   import mx.effects.Blur;

   private function efeito(): void {
   var
   _rSeq: Sequence = new Sequence(),
   _rMv: Move = new Move(),
   _rRt: Rotate = new Rotate();

   // Configurando os efeitos
   _rMv.duration = 1000;
   _rMv.xTo = 330;
   _rMv.xFrom = 36;
   _rRt.duration = 100;
   _rRt.angleFrom = 45;

   // Agrupando os efeitos no parallel
   _rSeq.addChild(_rMv);
   _rSeq.addChild(_rRt);

   _rSeq.target = cvImg;
   _rSeq.play();
   }
   ]]>
  < /mx:Script>
  < !-- Montando o efeito apenas com as tags no mxml -->
  < mx:Parallel id="effPar">
   < mx:Rotate id="effRotate" duration="1000" angleFrom="45" target="{cvImg}"/>
   < mx:Move target="{cvImg}" duration="1000" xTo="330" xFrom="40"/>
  < /mx:Parallel>

  < !-- Efeito usado para destacar o botão "Start - as" quando o mouse estiver sobre o mesmo -->
   < mx:Blur duration="500" id="efBlur" target="{btnAs}"/>
  < mx:Canvas id="cvImg" x="20" y="97" width="36" height="36" borderStyle="solid" cornerRadius="20" borderColor="#070707" backgroundColor="#B6B752">
   < mx:Button x="12.6" y="0" label="Button" width="8.759999" height="34" enabled="false" cornerRadius="10" fillAlphas="[1.0, 1.0]" fillColors="[#114ECC, #040000]"/>
  < /mx:Canvas>

  < !-- Basta "acionar o play()" e pronto -->
  < mx:Button x="20" y="10" label="Start - mxml" click="{effPar.play()}" height="30"/>

  < !-- Como o efeito está sendo construido totalmento no actionScript, chamamos um método -->
  < mx:Button id="btnAs" x="126" y="9" label="Start - as" width="98" height="31" click="efeito()" mouseOver="{efBlur.play()}"/>
< /mx:Application>

Os dois botões possuem os mesmos efeitos e as mesmas configurações, o que diferencia o comportamento é a classe Parallel (executa seus filhos simultâneamente) e a classe Sequence (executa seus filhos um após o outro).

Outras classes de efeito:

Blur
Dissolve
Fade
Glow
Iris
Move
Resize
Rotate
Zoom

Bons estudos e bom trabalho a todos.

Abraços

Binding - deixe o Flex trabalhar para você

2010-04-11T21:34:00.001-03:00

Blz?!

Uma das funcionalidades mais interessantes da linguagem é o binding, vamos ver 3 maneiras de implementar

"Data binding lets you pass data between client-side objects in an Adobe® Flex® application. Binding automatically copies the value of a property of a source object to a property of a destination object when the source property changes."

"Ligação de dados permite transmitir dados entre os objetos do lado do cliente em um aplicativo Adobe ® Flex ®. Encadernação copia automaticamente o valor de uma propriedade de um objeto de origem para uma propriedade de um objeto de destino, quando muda a propriedade de origem."

< ?xml version="1.0" encoding="utf-8"?>
< mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
   applicationComplete="inicApp(event)"
   layout="absolute">
   < !-- TAG Binding usada no mxml -->
   < mx:Binding source="eIdade.text" destination="lbIdade.text"/>
   < mx:Script>
       < ![CDATA[
           import mx.binding.utils.BindingUtils;
           import mx.events.FlexEvent;

           private function inicApp(e: FlexEvent): void {
              // Utilizando a classe BindingUtils
              BindingUtils.bindProperty(lbTel, 'text', eTel, 'text');
           }
       ]]>
   < /mx:Script>
   < mx:Form>
       < mx:FormItem label="Nome: ">
           < mx:TextInput id="eNome"/>
       < /mx:FormItem>
       < mx:FormItem label="Idade: ">
           < mx:TextInput id="eIdade"/>
       < /mx:FormItem>
       < mx:FormItem label="Telefone: ">
           < mx:TextInput id="eTel"/>
       < /mx:FormItem>
   < /mx:Form>

   < !-- Setando diretamento o binding diretamente no componente -->
    < mx:Label text="{eNome.text}" y="120"/>
    < mx:Label id="lbIdade" y="140"/>
   < mx:Label id="lbTel" y="160"/>
< /mx:Application>

Mais um exemplo rápido, fácil e prático, bons estudos e bom trabalho.

Abraços

ContextMenu, rápido, prático e muito fácil

2010-04-09T17:57:00.002-03:00

Blz?!

Desta vez vamos ver como fazer o famoso "botão direito", que para nós desenvolvedores é o
contextMenu, muito útil quando você quer adicionar uma funcionalidade específica a um componente e não quer encher a interface de botões.

Nesse exemplo eu fiz a implementação do contextMenu em um dataGrid, mas pode-se usar em uma infinidade de componentes, só colocar a criatividade para funcionar, vamos lá . . .

private function addContextMenu(): void {
  var
   _rMenu: ContextMenu = new ContextMenu(),
   _rItem: ContextMenuItem = new ContextMenuItem('Mostrar detalhes');

   _rMenu.hideBuiltInItems();

   _rItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, mostrarDetalhe);

   _rMenu.customItems.push(_rItem);

   dtgPessoa.contextMenu = _rMenu;

   function mostrarDetalhe(e: ContextMenuEvent): void {
   Alert.show(
   'Nome: ' + dtgPessoa.selectedItem.nome + '\n' +
   'Idade: ' + dtgPessoa.selectedItem.idade + '\n' +
   'Tel: ' + dtgPessoa.selectedItem.tel);
   }
}

É isso ae, mais um exemplo simples, prático e rápido de ser implementado, não há nenhum tratamento de erro já que não é o objetivo do post ;)

Bons estudos e bom trabalho a todos.

Abraços

DragDrog : DataGrid / TileList com ItemRenderer:

2010-04-08T23:35:00.002-03:00

Blz?!

Esse é um exemplo bem simples mas muito didático para a galera que está começando a brincar com Flex.

Fiz um pequeno projeto para mostrar o DragDrop de dois componentes, DataGrid e TileList, não fiz nenhuma implementação complexa, utlizei apenas as proprieadades nativas dos componentes.

Descrição do projeto

1 - DataGrid
2 - TileList
2 - Componentes personalizados que são usados como itemRenderer, um em cada um dos TileList
1 - Uma classe singleton para "guardar" os ArrayCollection que uso como dataProvider de cada compoentne.

DragDrop.mxml

IR1.mxml

IR2.mxml

Param.as

A aplicação é muito simples o objetivo principal é mostrar como é fácil, rápido e simples trabalhar com itemRenderer.

Bons estudos e bom trabalho.

Abraços

Reduzindo o tamanho final do swc

2010-04-07T11:35:00.004-03:00

Blz?!

Essa dica é sobre deploy do projeto. Se você já fez uma libary (Flex Libary Project) deve ter notado que por mais simples que seja essa libary ela sempre passa fácil os 300 KB
isso porque quando você faz um novo projeto o framework é embutido no seu swc final, para que isso não ocorra basta alterar nas propriedades do projeto a maneira que a libary vai utilizar o framework, vamos lá . . .

A primeira imagem é uma libary simples onde eu tenho alguns componentes personalizados, funções que são úteis em vários projetos.

Esse projeto depois de compilado gera um swc de 851 KB é um arquivo muito grande, se o usuário final tem uma boa conexão de internet nem vai perceber isso, caso contrário vai ficar no mínimo insatisfeito com a demora para abri a aplicação.

Agora vamos melhorar removendo o framework de dentro desse swc, nas propriedades do projeto:

Mude Link Type para "External" e clique em OK.

Agora vamos ver o resultado do mesmo projeto depois de compilado.

De 851 KB para 51KB, uma mudança bem expressiva não?!

Isso ae galera, bom trabalho e bons estudos a todos

Abraços!

Trabalhando com datas

2010-02-12T12:13:00.002-02:00

Blz?!

Mais um post, desta vez vou mostrar uma maneira bem simples de trabalhar com datas.

Já vi muita coisa no google sobre o assunto fazendo multiplicações complicadas de se entender, o que vou fazer nesse exemplo é deixar que o próprio Flex "pense". É necessário apenas indicar o que você quer fazer, somar/diminuir Dias, Meses, Anos, Horas, Segunds e até Milesegundos.

private function fncSomaData(Data: Date, Qtde: Number, TpInc: String): Date {
  var
    _rData: Date = new Date(Data);

  _rData[TpInc] += Qtde;

  return _rData;
}

Os parâmetros Date e Qtde são auto-explicáveis o mais importante mesmo é o TpInc, é ele que vai "falar" o que queremos somar/diminuir

ano = 'fullYear'
mes = 'month'
dia = 'date'
hora = 'hours'
minuto = 'minutes'
segundo = 'seconds'
millesegundo = 'milliseconds'

Abraços

Disparar evento click do botão com Enter

2010-02-08T22:30:00.005-02:00

Blz?! mais uma dica relacionada a usabilidade da aplicação. Primeiro vamos ao teste, coloque um botão e tente disparar o evento click usando o mouse FUNCIONA!! (óbvio), agora com ESPAÇO (opa, funciona tbm) e por ultimo tente com ENTER (não? wtf?!)

Para resolver o que na minha visão é um problema é bem simples, basta sobreescrever o método keyDownHandler

package Exemplo {
import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.ui.Keyboard;

import mx.controls.Button;

public class Botao extends Button {
    public function Botao() {
      super();
    }

    override protected function keyDownHandler(event: KeyboardEvent):void {
      if (!enabled)
        return;

      if (event.keyCode == Keyboard.SPACE || event.keyCode == Keyboard.ENTER)
        dispatchEvent(new MouseEvent(MouseEvent.CLICK));
    }
}
}

Abraços

Formatando valores no dataGrid

2010-01-30T16:40:00.013-02:00

BLz?! esse é um simples exemplo de como implementar funções para formatação de valores do dataGrid

1º - Faça uma nova clase, essa será a classe que iremos usar no dataGrid:

package Exemplo {
  public class labelFunction {
    public function labelFunction() {
    }
    
    public static function addBarra(Item: Object, C: Object): String {
      if (Item[C.dataField] != undefined) 
        return adicionaBarra(Item[C.dataField]);
      else
        return '';
    }
    
    private static function adicionaBarra(Valor: String): String {
      return Valor + '/';
    }
  }
}

2º - Faça a chamada da classe no dataGrid:

labelFunction="labelFunction.addBarra"

Obs.: Esse exemplo é apenas para mostrar como utlizar a propriedade labelFunction do dataGrid, agora é só colocar a criatividade para funcionar

Abraços

Abrir/fechar a Tree clicando na descrição do nó

2010-01-29T22:26:00.011-02:00

Blz galera?! lá vai minha primeira e simples contribuição para a galera que anda quebrando a cabeça e divertindo-se com Flex. Coloque uma Tree e faça o teste, tenta abrir os nós clicando na descrição, não vai conseguir, eu particularmente acho isso muito ruim, a usabilidade fica horrível fazendo que o usuário seja ninja para clicar certinho no "triângulo" que tem ao lado da descrição do nó.

Agora chega de enrolar e vamos lá . . .

1º no fonte mxml:

itemClick="itemClickTree(event)"

2º no as faça o seguinte método

private function itemClickTree(Evento: Event): void {
var
item: Object = new Object();

item = Tree(Evento.currentTarget).selectedItem;

if (tree.dataDescriptor.isBranch(item))
tree.expandItem(item, !tree.isItemOpen(item), true);
}

Agora sempre que o usuário clicar na descrição da Tree o nó irá abrir/fechar.

Abraços!