Páginas

Mostrando postagens com marcador adobe flex. Mostrar todas as postagens
Mostrando postagens com marcador adobe flex. Mostrar todas as postagens

quarta-feira, 13 de julho de 2011

Adobe lança Beta do AIR 3.0 e do FlashPlayer 11

A Adobe lançou hoje (13/07/2011) o BETA do AIR 3.0 e do FlashPlayer 11, onde foram corrigidas algumas questões de segurança e de performance, também adicionaram suporte a 64bits.

Você poderá fazer o download das versões betas aqui: AIR 3.0 e FlashPlayer11.

Agora é só testar!!!

quinta-feira, 16 de junho de 2011

Flex com Multilinguagem (internacionalização)

Olá!!


Hoje vou mostrar como fazer um sistema Multilinguagem (alterando locales) no Flex. Conforme o exemplo:

*Para ver o fonte, clique com o botão direito do mouse e ViewSource.

Para isso você precisa ter os locales das linguagens. Os locales podem ser baixados nesses links:
Estes locales devem ser colocados no diretório: "{instalaçãodoflex}/sdks/{versaodosdk}/frameworks/locale/".

Configurando o projeto
Clique com o botão direito do mouse no projeto, vá em "properties" depois em "Flex Compiler", em "Additional compiler arguments:" coloque o seguinte:
  -locale en_US pt_BR -source-path+=../locale/{locale}


Ficando assim:


Após configurar o locale do seu projeto, você deve criar as pastas "{projeto}/locale/en_US" e "{projeto}/locale/pt_BR" e adicionar o arquivo "localization.properties" dentro de cada pasta.

en_US
label_selecione_linguagem=Select your language
label_nome=Name
label_sobrenome=Last Name
send_btn=Send

pt_BR
label_selecione_linguagem=Selecione a linguagem
label_nome=Nome
label_sobrenome=Sobrenome
send_btn=Enviar


Para ler estes arquivos faz assim:
<?xml version="1.0" encoding="utf-8"?>
<s:Application viewSourceURL="srcview/index.html"
               xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:s="library://ns.adobe.com/flex/spark">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <fx:Script>
        <![CDATA[
            import mx.resources.ResourceBundle;
            
            [Bindable]
            private var locales:Array = ['pt_BR', 'en_US'];
            
            private static const LOCALIZATION:String = 'localization';
            
            private function changeLanguage():void {
                this.resourceManager.localeChain = [cbxLanguage.selectedItem];
            }
        ]]>
    </fx:Script>

    <fx:Metadata>
  [ResourceBundle('localization')]
 </fx:Metadata>

    <mx:Form>
        <mx:FormItem label="{resourceManager.getString( LOCALIZATION , 'label_selecione_linguagem' )}:">
            <mx:ComboBox id="cbxLanguage"
                         change="changeLanguage()"
                         dataProvider="{locales}"/>
        </mx:FormItem>

        <mx:FormItem label="{resourceManager.getString( LOCALIZATION , 'label_nome' )}:">
            <s:TextInput/>
        </mx:FormItem>

        <mx:FormItem label="{resourceManager.getString( LOCALIZATION , 'label_sobrenome' )}:">
            <s:TextInput/>
        </mx:FormItem>

        <s:Button label="{resourceManager.getString( LOCALIZATION , 'send_btn' )}"/>
    </mx:Form>
</s:Application>


sendo a variável LOCALIZATION o nome do arquivo criado (pode ter vários).
para ler cada linha do arquivo utiliza-se:
resourceManager.getString(LOCALIZATION, 'string')


Por hoje é isso!!

Comente!


sábado, 11 de junho de 2011

#FlexMania 2011

Olá!

Este ano ocorre a 3ª edição do FlexMania. É um evento online e gratuito que junta vários palestrantes falando sobre diversos assuntos.

O evento acontece dias 07, 08, 09 e 10 de Julho de 2011.

Eu e todos aqui da @PontoSistemas vamos participar!!

Para saber mais acesse: http://www.flexmania.com.br/

Até mais!

sexta-feira, 10 de junho de 2011

Variáveis Globais no Flex.

Olá.

Neste post vou mostrar como fazer com que uma (ou várias) variável seja utilizada e compartilhe o mesmo valor em toda a aplicação.

Para isto basta criar uma classe, com o método getInstance() e chamar esta classe em qualquer lugar do sistema através do getInstance(), e pronto você terá a mesma variável com o mesmo valor.


Classe de exemplo:

VariaveisGlobais.as
package com.blogspot.desenvolvendoemflex.utils {
 import mx.collections.ArrayCollection;
    
    [Bindable]
    public class VariaveisGlobais {
        private static var instance:VariaveisGlobais;
        
        public var variavel:ArrayCollection;
  
        public static function getInstance():VariaveisGlobais {
            if (instance==null) {
                instance = new VariaveisGlobais();
            }
            return instance;
        }
    }
}


para utiliza-la basta instanciar desta maneira em qualquer parte de seu programa:
            [Bindable]
            public var varGlobal:VariaveisGlobais = VariaveisGlobais.getInstance();

Tenha cuidado ao utilizar desta forma, pois dependendo da quantidade de variáveis e informações, pode ficar pesado o sistema.

Por hoje é isso!

Até a próxima.

Comentem!!

sábado, 28 de maio de 2011

TextArea com atalho para Desfazer e Refazer

Por padrão o componente TextArea do Flex não possui função de desfazer e refazer, com isso resolvi implementar estas duas funções.

Para testar é só digitar um texto, e pressionar Ctrl+Z para desfazer e Ctrl+Y para refazer.

*download do fonte: botão direito "View Source"

Código Fonte:
/*############################################################*/
/*                                                            */
/*   Powered by: Samuel Facchinello                           */
/*   http://desenvolvendoemflex.blogspot.com/                 */
/*                                                            */
/*############################################################*/
package com.blogspot.desenvolvendoemflex.utils {
    import flash.events.Event;
    import flash.events.KeyboardEvent;
    
    import mx.collections.ArrayCollection;
    import mx.controls.Alert;
    import mx.controls.TextArea;
    
    /**
     *
     * @author SAMUEL FACCHINELLO
     * @site http://desenvolvendoemflex.blogspot.com/
     */
    public class TextAreaWithUndo extends TextArea {
        
        /**
         * Variable of control position Undo or Redo
         * */
        [Bindable]
        private var _position:int = -1;
        
        public function get position():int {
            return _position;
        }
        
        /**
         * Variable that stores all typed letters
         * */
        [Bindable]
        private var _array:ArrayCollection = new ArrayCollection();
        
        public function get array():ArrayCollection {
            return _array;
        }
        
        /**
         * Constructor
         *
         */
        public function TextAreaWithUndo() {
            super();
            //add value default
            addValue("");
            
            //add Event on KeyDown
            addEventListener(KeyboardEvent.KEY_DOWN, myKeyDown);
        }
        
        /**
         * Function with KeyDown
         * @param eventObj: KeyboardEvent
         *
         */
        private function myKeyDown(eventObj:KeyboardEvent):void {
            // Was Ctrl key pressed?
            if (eventObj.ctrlKey) {
                var valueReturn:String = null;
                
                switch (eventObj.keyCode) {
                    
                    case 90: // Was Ctrl-Z pressed?  
                        valueReturn = returnPrevisionValue();
                        break;
                    
                    case 89: // Was Ctrl-Y pressed?  
                        valueReturn = returnNextValue();
                        break;
                    
                    default:
                        break;
                }
                
                //if return exist
                if (valueReturn!=null) {
                    //set text with return functions
                    text = valueReturn;
                    
                    //select last _position in TextArea
                    setSelection(text.length, text.length);
                }
            } else {
                //only adds to the list if any of these characters.
                //list from here: http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=00000520.html
                if ((eventObj.keyCode>=65&&eventObj.keyCode<=90)||(eventObj.keyCode>=48&&eventObj.keyCode<=57)||(eventObj.keyCode>=96&&eventObj.keyCode<=111)||(eventObj.keyCode>=186&&eventObj.keyCode<=222)) {
                    addValue(text);
                }
            }
        }
        
        /**
         * Function that adds the letters in the array
         * @param value: propertie "text" of TextArea
         *
         */
        private function addValue(value:String):void {
            //it was press Ctrl + Z ever, and was entered some value, clears the values ​​of the position in which this forward
            if (_array.length>0&&_array.length-1>_position) {
                for (var i:int = _array.length-1; i>_position; i--) {
                    _array.removeItemAt(i);
                }
            }
            
            //if the value is being added is equal to the last added, not added!
            if (_array.length>0) {
                if (value==_array.getItemAt(_array.length-1)) {
                    return;
                }
            }
            
            _array.addItem(value);
            _position++;
        }
        
        /**
         * triggered when press Ctrl + Y
         * @return : Returns the next value from the list according to position
         *
         */
        private function returnNextValue():String {
            if (_position+1>=0&&_position+1<_array.length) {
                _position++;
                return _array.getItemAt(_position) as String;
            }
            
            return null;
        }
        
        /**
         * triggered when press Ctrl + Z
         * @return : Returns the Prevision value from the list according to position
         *
         */
        private function returnPrevisionValue():String {
            if (_position-1>=0) {
                _position--;
                return _array.getItemAt(_position) as String;
            }
            
            return null;
        }
    }
}

Adicionei este componente ao Google Code, pode ser visto aqui: http://code.google.com/p/textarea-with-undo/

Qualquer elogio, dúvida, sugestão ou melhoria para o componente, deixe um comentário!!

Abraço, até a próxima.



*Tradução para o inglês com o Google Translate. :)

quarta-feira, 25 de maio de 2011

Carregando CSS diferentes em runtime

Muitas vezes precisamos que uma mesma aplicação fique com aparências diferentes de acordo com o gosto de cada um, por isso vou mostrar como carregar um ou vários CSS em runtime no Flex.

Procurando na internet sobre isso, me deparei com o blog do Fabio Silva dizendo como fazer, então resolvi implementar e mostrar para vocês como fazer.

Como faz?
O css deve ser compilado, (no FlashBuilder) basta clicar com o botão direito do mouse no arquivo do CSS e marcar a opção "Compile CSS to SWF", com isso o CSS será compilado como um arquivo externo, no formato ".swf", ao rodar sua aplicação basta usar a função:
StyleManager.loadStyleDeclarations("./css/css.swf");

Exemplo:

Para fazer o download do fonte clique com o botão direito e depois em "view source".
ou

Código Fonte:
<?xml version="1.0" encoding="utf-8"?>
<s:Application minHeight="600"
               minWidth="955"
               viewSourceURL="srcview/index.html"
               xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:s="library://ns.adobe.com/flex/spark">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <fx:Script>
        <![CDATA[
            protected function button1_clickHandler(event:MouseEvent):void {
                //função que carrega o CSS
                StyleManager.loadStyleDeclarations("./css/css.swf");
            }
            
            protected function button2_clickHandler(event:MouseEvent):void {
                //função que carrega o CSS
                StyleManager.loadStyleDeclarations("./css/css2.swf");
            }
        ]]>
    </fx:Script>

    <s:Label text="Label Spark"/>

    <mx:Label text="Label MX"/>

    <s:Button label="carregar CSS 1"
              click="button1_clickHandler(event)"/>

    <mx:Button label="carregar CSS 2"
               click="button2_clickHandler(event)"/>
</s:Application>

Por hoje é isso!!!

Sigam o blog e comentem!!

Fontes:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/styles/StyleManager.html
http://fabiophx.blogspot.com/2010/09/carregando-css-em-run-time.html

sexta-feira, 20 de maio de 2011

Salvar tamanho e posição das colunas em um DataGrid

Hoje surgiu um problema aqui na @PontoSistemas, onde teríamos que salvar a posição e o tamanho da coluna de acordo com o que o cliente preferir, como cada pessoa organiza a tela de um jeito diferente. Tudo isso porque toda vez que o DataGrid é construído novamente, ele volta ao estado inicial.

A idéia:
Ao organizar ou alterar os tamanhos das colunas de um DataGrid/AdvancedDataGrid salve as posições e os tamanhos das colunas.

A solução:
Altere o tamanho e/ou a ordem das colunas, e recarregue a página. Elas irão voltar na mesma ordem e tamanho que você as deixou.


Clique com o botão direito em cima do DataGrid, depois em "view source" para visualizar o código fonte.
ou

SalvarColunas.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application viewSourceURL="srcview/index.html"
               xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:s="library://ns.adobe.com/flex/spark">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.controls.DataGrid;
            import mx.events.FlexEvent;
            import mx.utils.ObjectUtil;
            
            /* salvar ordem das colunas */
            public function reordenarColunas(event:Event, nomeSharedObj:String):void {
                var grid:* = event.currentTarget;
                
                if (grid is DataGrid||grid is AdvancedDataGrid) {
                    var colunas:ArrayCollection = null;
                    
                    //le informações salvas
                    var shared:SharedObjectHelper = new SharedObjectHelper(nomeSharedObj);
                    
                    if (shared.getObjects()) {
                        if (shared.getObjects().length>0) {
                            if (shared.getObjects()!=null) {
                                colunas = shared.getObjects();
                            }
                        }
                    }
                    
                    if (colunas==null) { //se nao tiver nada salvo, salva, e nao faz nada.
                        salvarOrdemColunas(event, nomeSharedObj);
                        return;
                    }
                    var colunasAtual:Array = grid.columns.slice(0, grid.columns.length); //pega as colunas atual
                    
                    if (colunasAtual.length!=colunas.length) { //se sao colunas diferentes salva as novas.
                        salvarOrdemColunas(event, nomeSharedObj);
                        return;
                    }
                    
                    var colunasNovo:Array = new Array();
                    var i:int = 0;
                    
                    while (colunas.length>0) { //enquanto tiver colunas a serem alteradas
                        if (colunasAtual[i]!=null) { //se ja foi alterado a coluna é setado como nula.
                            if (colunasAtual[i].dataField.toString()==colunas.getItemAt(0).datafield.toString()) { //verifica se a atual é igual a coluna a ordenada
                                colunasAtual[i].width = colunas.getItemAt(0).width; //seta o tamanho da coluna
                                colunasNovo.push(colunasAtual[i]); //adiciona a coluna na ultima possição (para deixar na ordem)
                                
                                //remove o que ja foi verificado
                                colunas.removeItemAt(0);
                                colunasAtual[i] = null;
                                
                                i = -1; //zera o contador para reavaliar todas as colunas
                            }
                        }
                        i++;
                    }
                    
                    grid.horizontalScrollPolicy = "on"; //atribui o Scroll horizontal por causa dos Widths setados na mao
                    grid.columns = colunasNovo; //seta as novas colunas no grid
                    grid.validateProperties(); //atualiza o grid para aparecer as novas colunas
                }
            }
            
            public function salvarOrdemColunas(event:Event, nomeSharedObj:String):void {
                var grid:* = event.currentTarget;
                
                if (grid is DataGrid||grid is AdvancedDataGrid) {
                    
                    var shared:SharedObjectHelper = new SharedObjectHelper(nomeSharedObj);
                    shared.clear();
                    
                    var obj:Object = null;
                    
                    for each (var i:Object in grid.columns) {
                        obj = new Object();
                        obj.datafield = i.dataField;
                        obj.width = i.width;
                        shared.addObject(obj);
                    }
                }
            }
        ]]>
    </fx:Script>

    <!--
        columnStretch = ao redimencionar as colunas.
        headerShift = ao trocar as colunas de posição.
    -->
    <mx:AdvancedDataGrid columnStretch="salvarOrdemColunas(event,'nomeDoObjetoSalvo')"
                         creationComplete="reordenarColunas(event,'nomeDoObjetoSalvo')"
                         headerShift="salvarOrdemColunas(event,'nomeDoObjetoSalvo')">
        <mx:columns>
            <mx:AdvancedDataGridColumn dataField="a"/>

            <mx:AdvancedDataGridColumn dataField="b"/>

            <mx:AdvancedDataGridColumn dataField="c"/>

            <mx:AdvancedDataGridColumn dataField="d"/>

            <mx:AdvancedDataGridColumn dataField="e"/>
        </mx:columns>
    </mx:AdvancedDataGrid>
</s:Application>

SharedObjectHelper.as
package {
    import flash.net.SharedObject;
    
    import mx.collections.ArrayCollection;
    
    public class SharedObjectHelper {
        private var _sharedObject:SharedObject;
        
        private var _dadosSharedObject:ArrayCollection;
        
        private var _nomeArquivoSharedObject:String;
        
        /**
         * Construtor
         */
        public function SharedObjectHelper(valor:String) {
            inicializaHelper(valor);
        }
        
        /**
         * Limpa objeto dentro do SharedObject
         */
        public function clear():void {
            _dadosSharedObject.removeAll();
            _sharedObject.flush();
        }
        
        /**
         * @private
         * Responsavel por recuperar a instancia do SharedObject baseado no
         * parametro.
         *
         */
        private function inicializaHelper(valor:String):void {
            _dadosSharedObject = new ArrayCollection();
            _nomeArquivoSharedObject = valor;
            _sharedObject = SharedObject.getLocal(_nomeArquivoSharedObject);
            
            if (getObjects()) {
                _dadosSharedObject = getObjects();
            }
        }
        
        /**
         * Retorna todos um array de dados que está armazendo no SharedObject
         * @return ArrayCollection
         */
        public function getObjects():ArrayCollection {
            return _sharedObject.data[_nomeArquivoSharedObject];
        }
        
        /**
         * Adiciona um dado ao array de dados.
         * @param Object
         */
        public function addObject(o:Object):void {
            _dadosSharedObject.addItem(o);
            updateSharedObjects();
        }
        
        /**
         * @private
         * Vincula o array de dados a um SharedObject.
         */
        private function updateSharedObjects():void {
            _sharedObject.data[_nomeArquivoSharedObject] = _dadosSharedObject;
            _sharedObject.flush();
        }
    }
}

Da maneira que foi implementado, as definições da posição e do tamanho das colunas são salvas na memória do FlashPlayer (como se fosse os cookies das páginas web), ao limpar esse "cookie" as configurações voltam ao estado original.

Por hoje é isso. Em breve novas dicas.

Comentem!!!

10 coisas que um bom programador flex deve saber

Olá!!! Li no blog do Daniel Schmitz e achei muito interessante compartilhar.

Vale a pena ler.

Link: http://www.flex.etc.br/traducoes/10-coisas-que-um-bom-programador-flex-deve-saber/

Até a próxima.