Exemplos
Tour de Flex 2.0 – Cerca de 500 exemplos Flex!
21/06/10
Adobe acaba de lançar o novo Tour de versão Flex 2.0 , que agora contém cerca 500 exemplos Flex! A nova versão tem novos exemplos (apenas disponível na versão AIR do Tour de Flex), incluindo:
- Detecção de armazenamento em massa
- Processo Nativo
- Abrir com o aplicativo padrão
- Socket Server
Além disso, existem alguns bons exemplos do novo Flash Player 10.1 e AIR 2 APIs, incluindo:
- Handler de erro global
- Globalização / Internacionalização
- Acesso ao Microfone
Aqui está um exemplo do Doug McCune’s Physics Form bem legal e um dashboard em tempo real do Tour de Flex: real-time Tour de Flex Dashboard.
Se você já tem instalado o Tour de Flex, então ele deve fazer o auto update para a versão mais recente quando você iniciá-lo. Caso contrário, instale-o a partir daqui:
Popularity: 51% [?]
Usando Shared Objects no Flex
25/04/10
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>
Popularity: 61% [?]
Adobe AIR com SQLite
24/04/10
Adobe acrescentou a possibilidade de utilizar bancos de dados locais, quando eles criaram AIR. Este é um dos muitos recursos que ajudam a tornar o Adobe AIR uma ótima solução para aplicações desktop multi-plataforma. Neste rápido tutorial vou mostrar como criar um banco de dados de arquivo e abrir uma conexão com ele. O código é muito simples, então vamos pular direto para ele. A primeira coisa é criar um arquivo para o banco de dados. Em SQLite, que é o mecanismo de banco de dados utilizado no Adobe AIR, o banco de dados completo é armazenado em apenas um único arquivo. É realmente um sistema muito bom compacto e portátil. Eu usei a função applicationStorageDirectory sobre a classe File para criar um arquivo que aponta para o armazenamento de aplicação local e com o nome dbTest.db. No meu caso (no Seven), o caminho real no disco é C:\Users\usuário\AppData\Roaming\SQLiteExample\Local Store. O arquivo não é criado, até iniciar a aplicação.
import flash.data.SQLStatement; import flash.errors.SQLError; import flash.events.Event; import flash.events.SQLErrorEvent; import flash.events.SQLEvent; import flash.events.TimerEvent; import flash.filesystem.File; import flash.utils.Timer; import mx.collections.ArrayCollection; import mx.controls.Alert; import mx.utils.ObjectUtil; import org.osmf.events.TimeEvent; // sqlconn é uma variável que precisamos para definir uma // coneção com a nosso banco de dados private var sqlconn:SQLConnection = new SQLConnection(); // sqlstate é um SQLStatement que precisamos para executar // o executar os comandos sql private var sqlstate:SQLStatement = new SQLStatement(); // ArrayCollection é usado como dataprovider para a nossa datagrid. // Tem de ser bindable para que os dados em nosso datagrid // mudem automaticamente, quando mudamos o nosso ArrayCollection [Bindable] private var dp:ArrayCollection = new ArrayCollection(); // função que chamamos no inicio da aplicação private function init():void { // primeiro precisamos de "setar" o arquivo para o banco de dados // Se o banco de dados não existe, ele irá criar // um banco de dados quando inicia var db:File = File.applicationStorageDirectory.resolvePath("dbTest.db"); // depois de "setar" o arquivo para o banco de dados, // precisamos de abri-lo. sqlconn.openAsync(db); // precisamos de "setar" os event listners de para que possamos // saber se temos algum erro, quando o banco de dados é // totalmente aberto e também para saber quando recebemos um // resultado de uma query sql, o ultimo é para ler // os dados do banco de dados. sqlconn.addEventListener(SQLEvent.OPEN, db_opened); sqlconn.addEventListener(SQLErrorEvent.ERROR, error); sqlstate.addEventListener(SQLErrorEvent.ERROR, error); sqlstate.addEventListener(SQLEvent.RESULT, resault); } private function db_opened(e:SQLEvent):void { // quando um banco de dados é aberto precisamos do link do SQLStatment // para a nossa conexão, se não "setar" esta conexão vamos ter um // erro quando executar o SQLStatment. sqlstate.sqlConnection = sqlconn; // escrevemos o SQLStatment. // no SQLStatment criamos uma tabela no banco de dados com o nome "aluno", // com 3 colunas (id, nome, apelido) sqlstate.text = "CREATE TABLE IF NOT EXISTS aluno " + "( id INTEGER PRIMARY KEY AUTOINCREMENT, nome TEXT, apelido TEXT);"; // depois de conectar o SQLStatment a nossa SQLConnection e escrever o // comando sql, precisamos de executar o SQLStatment // nada vai mudar até executar o SQLStatment. sqlstate.execute(); // depois de carregar o banco de dados e criar a tabela // se já não existir, chamamos de método refresh() para popular o datagrid refresh(); } // função para adicionar um item no banco de dados private function addItem():void { // este comando SQL é para adicionar um item na tabela sqlstate.text = "INSERT INTO aluno (nome, apelido) " + "VALUES('"+nome.text+"','"+apelido.text+"');"; sqlstate.execute(); refresh(); } // função para chamar quando queremos fazer o refresh de dados no datagrid private function refresh(e:TimerEvent = null):void { // objeto timer que precisamos se o SQLStatment está ainda em execução, // caso contrário tentamos novamente depois de 10 milliseconds. var timer:Timer = new Timer(10,1); timer.addEventListener(TimerEvent.TIMER, refresh); if ( !sqlstate.executing ) // precisamos checar se o SQLStatment está ainda executando // o ultimo comando sql. // se sim, usamos o timer para voltar a executar em 10 milliseconds. // senão checar, podemos ter erro pq o SQLStatment // não pode executar 2 comandos aomesmo tempo. { // SQLStatment que retorna todos os dados da tabela "aluno". sqlstate.text = "SELECT * FROM aluno" sqlstate.execute(); } else { timer.start(); } } // função que é chamada se receber algum resultado do comando sql. // também pode ser chamado, quando for inserir algum dado private function resault(e:SQLEvent):void { // com o sqlstate.getResult().data pegamos o array de objetos // para cada linha do banco de dados var data:Array = sqlstate.getResult().data; // passamos o array de objetos para o // dataprovider para popular o datagrid dp = new ArrayCollection(data); } // função que remove um item do banco de dados private function remove():void { // SQLStatment para excluir da tabela o id que tem o // mesmo número que selecionamos no datagrid para excluir sqlstate.text = "DELETE FROM aluno WHERE id="+dp[dg.selectedIndex].id; sqlstate.execute(); refresh(); } // função que é chamada quando recebemos um erro do comando sql // ou conexão sql e mostra esse erro em um alert. private function error(e:SQLErrorEvent):void { Alert.show(e.toString()); }
Aplicação básica para entender e aprender como você pode armazenar dados em banco de dados SQLite. O exemplo é muito básico, mas você deve pegar uma idéia de como fazê-lo.
Aplicativo AIR aqui (view source habilitado).
Popularity: 72% [?]



