Exemplos

Tour de Flex 2.0 – Cerca de 500 exemplos Flex!

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

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

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% [?]