Funcionalidade muito utilizada em sites, a qual é o armazenamento de dados no cookie do browser, esta função é muito utilizada para salvar as preferências de usuários como: login, email, ultimo acesso entre outras informações.
No Flex isso também é possível podendo ser até mais poderoso do que as formas atuais, para fazer isso você deve utilizar o SharedObject.
A função do Shared Objects (ShO) é armazenar dados localmente, funcionando como um cookies do browser. Assim você pode armazenar dados e chamá-los durante a sessão atual ou em outra futura sessão. Contudo estes dados não podem ser acessados por outra aplicação Flex mais sim apenas pela aplicação criadora.
Shared Objects vs Cookies
É comum desenvolvedores confundirem ShO com cookies.
Os cookies que aderem ao padrão RFC 2109 geralmente têm as seguintes características:
• Eles podem expirar, e geralmente é feito isso no final da sessão por default.
• Podem ser desabilitados pelos clientes.
• Há um limite de 300 cookies sendo no Maximo 20 por site.
• Um cookie tem o espaço de armazenamento de 4 kb.
• Há a possibilidade de serem considerados como arquivos maliciosos.
• Há uma comunicação entre cliente e servidor para armazenamento dos dados.
Shared Object tem as seguintes características:
• Eles não expiram por default.
• Por padrão o seu limite de armazenamento é de 100 kb.
• Eles podem armazenar dados simples como: String, Date, Array ….
• A aplicação pode indicar locais específicos para o armazenamento dos dados.
• Não há transmissão e comunicação entre o cliente e o servidor para a busca e armazenamento dos dados.
Com a classe SharedObject é possível realizar qualquer manipulação dos dados que ficarão armazenados no cliente. Esta possui os seguintes métodos:
• clear() – Limpa permanentemente todos os dados contidos no Shared Object.
• flush() – Grava os dados do ShO no cliente.
• getLocal() – Retorna uma instancia do ShO no cliente, caso não exista o mesmo cria uma.
• getSize() – Retorna o tamanho em Bytes do ShO no cliente. Uma observação o tamanho default é de 100kb, contudo isto pode ser alterado para mais.
Na prática:
Criando uma lista de contatos.
Criar uma classe chamada ShareObjectHelper a qual irá realizar a manipulação dos dados do Shared Object, tais como: incluir, remover e listar.
Esta é uma classe bem simples no qual será usado um ArrayCollection para armazenar todos os dados que armazenarão dos contatos que o usuário incluiu.
package { import mx.collections.ArrayCollection; import flash.net.SharedObject; public class SharedObjectHelper { private var _sharedObject:SharedObject; private var _dpSharedObject:ArrayCollection; private var _nomeArquivoSharedObject:String; /** * Construtor */ public function SharedObjectHelper(valor:String) { inicializaHelper(valor); } /** * @private * Responsavel por recuperar a instancia do SharedObject baseado no * parametro. * */ private function inicializaHelper(valor:String):void { _dpSharedObject = new ArrayCollection(); _nomeArquivoSharedObject = valor; _sharedObject = SharedObject.getLocal(_nomeArquivoSharedObject); if (getObjects()) { _dpSharedObject = 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 { _dpSharedObject.addItem(o); updateSharedObjects(); } /** * @private * Vincula o array de dados a um SharedObject. */ private function updateSharedObjects():void { _sharedObject.data[_nomeArquivoSharedObject] = _dpSharedObject; _sharedObject.flush(); } } }
<?xml version="1.0"?> <mx:Application xmlns:local="*" xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()" backgroundColor="#ffffff" layout="vertical" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#D3D3D3, #E7E7E7]" viewSourceURL="srcview/index.html"> <mx:Script> <![CDATA[ import mx.events.ValidationResultEvent; import mx.validators.ValidationResult; import mx.collections.ArrayCollection; import mx.utils.ObjectUtil; import flash.net.SharedObject; [Bindable] public var dpContatos:ArrayCollection = new ArrayCollection(); public var shoHelper:SharedObjectHelper; /** * @private * Inicializa a classe SharedObjectHelper e ja cria/recupera * instancia de um objeto SharedObject. */ private function init():void { shoHelper = new SharedObjectHelper("contatos"); if (shoHelper.getObjects()) { dpContatos = shoHelper.getObjects(); } } /** * @private * Adiciona um contato na lista de contatos e executa o addObject da classe * sharedObjectHelper. */ private function addContato():void { if(valNome.validate().type == ValidationResultEvent.VALID){ /* Cria um objeto dinamico com os atributos dos fomularios */ var objInsert:Object = {nome: txtNome.text, apelido: txtApelido.text}; shoHelper.addObject(objInsert); dpContatos = shoHelper.getObjects(); /* Limpa os campos do formularios */ txtNome.text = ''; txtApelido.text = ''; } } /** * @private * Remove um contato do DataGrid e da lista de contatos do SharedObejct */ public function removeContato():void { if (dgContatos.selectedIndex > -1) { dpContatos.removeItemAt(dgContatos.selectedIndex); } } ]]> </mx:Script> <mx:StringValidator id="valNome" source="{txtNome}" property="text" required="true" requiredFieldError="Campo Obrigatório" triggerEvent="''"/> <mx:Panel title="Contatos" layout="vertical" horizontalAlign="center" width="400"> <mx:Form width="100%"> <mx:FormItem label="Nome" width="100%"> <mx:TextInput id="txtNome" width="100%"/> </mx:FormItem> <mx:FormItem label="Apelido" width="100%"> <mx:TextInput id="txtApelido" width="100%"/> </mx:FormItem> <mx:Button id="b2" label="Salvar" click="addContato()"/> </mx:Form> <mx:DataGrid id="dgContatos" dataProvider="{dpContatos}" width="100%"> <mx:columns> <mx:DataGridColumn headerText="Nome" dataField="nome"/> <mx:DataGridColumn headerText="Apelido" dataField="apelido"/> <mx:DataGridColumn headerText="Opções" width="80" textAlign="center"> <mx:itemRenderer> <mx:Component> <mx:Button label="Excluir" width="8" click="outerDocument.removeContato()"/> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn> </mx:columns> </mx:DataGrid> </mx:Panel> </mx:Application>





