Stefan Horochovec » AIR http://www.horochovec.com.br/blog Blog sobre plataforma Flash - Flex e AIR - e sua integração com Java Mon, 12 Jul 2010 02:01:05 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 FlexORM – Framework ORM para persistência em AIR 1.5 – Download http://www.horochovec.com.br/blog/2010/01/27/flexorm-%e2%80%93-framework-orm-para-persistencia-em-air-1-5-download/ http://www.horochovec.com.br/blog/2010/01/27/flexorm-%e2%80%93-framework-orm-para-persistencia-em-air-1-5-download/#comments Thu, 28 Jan 2010 00:42:31 +0000 Stefan Horochovec http://www.horochovec.com.br/blog/?p=270 Olá pessoal

Conforme prometido através de comentários no post anterior, segue o download do projeto DuckToDo com a implementação de um projeto utilizando FlexORM com AIR 1.5

Download aqui.

Forte abraço

]]> http://www.horochovec.com.br/blog/2010/01/27/flexorm-%e2%80%93-framework-orm-para-persistencia-em-air-1-5-download/feed/ 0 FlexORM – Framework ORM para persistência em AIR 1.5 http://www.horochovec.com.br/blog/2010/01/27/flexorm-framework-orm-para-persistencia-em-air-1-5/ http://www.horochovec.com.br/blog/2010/01/27/flexorm-framework-orm-para-persistencia-em-air-1-5/#comments Wed, 27 Jan 2010 03:08:04 +0000 Stefan Horochovec http://www.horochovec.com.br/blog/?p=250 Olá pessoal,

Neste artigo, irei comentar um pouco sobre o FlexORM. Este framework tem como objetivo o mapeamento objeto-relacional em projetos que utilizem AIR e base de dados embarcada (SQLite).

O FlexORM é uma criação de Mark Moloney, e é hospedado pela RIAForge.

O FlexORM tem suporte a versão 1.5 do AIR e abaixo, podemos listar algumas de suas vantagens para seu uso:

* Não há necessidade de criação e atualização de tabelas. O FlexORM se encarrega da criação da estrutura do banco, através de um mapeamento feito dentro do próprio objeto a ser persistido;

* Possui suporte as operações CRUD;

* Suporta associações 1:N, N:M, N:1 e 1:1;

* Suporte a atributos transientes;

* Suporte a constraints para consistência de chaves-estrangeiras, através de triggers do SQLite;

* Transações;

* Criação automática de índices;

* Lazy Loading;

* Dentre outras;

Para exemplificar o uso do FlexORM, irei criar um projeto chamado DuckToDo e o objetivo do projeto é que eu possa cadastrar algumas tarefas que eu precise realizar. A aplicação é bem simples no quesito visual, uma vez que o intuito do artigo é o conhecimento do FlexORM.

Para iniciar, iremos criar um projeto no FlexBuilder chamado DuckToDo, conforme a tela abaixo:

Em seguida, vá as propriedades do projeto, e na opção Flex Compiler, adicione a seguinte linha de comando ” -keep-as3-metadata+=Table,Id,Column,ManyToOne,OneToMany,ManyToMany,Transient”, para que o compilador interprete as Metadatas adicionadas ao mapeamento dos Beans, conforme tela abaixo:

Feito isso, você deve fazer o download do FlexORM e adicionar ao seu projeto. Você pode optar por fazer o download do source através de um servidor de versionamento (subversion), ou fazer o download através deste link do arquivo .SWC do projeto FlexORM.

Depois de obter o .SWC, ou por download, ou recompilando o projeto, você deve adicioná-lo a pasta lib/ de seu projeto.

Feito isso, criaremos nossa classe de objeto que será persistida pela nossa aplicação.

Crie uma nova classe actionscript na package “org.flexduck.model” chamada Todo, e adicione o código abaixo:

?View Code ACTIONSCRIPT3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

package org.flexduck.model
{
 
	[Bindable]
	[Table(name="TODO")]
	public class Todo
	{
		[Id]
		public var codigo 	: int;
 
		[Column(name="titulo")]
		public var titulo 	: String;
 
		[Column(name="descricao")]
		public var descricao : String;
 
	}
 
}

Neste momento, quem trabalha com Java e utiliza Hibernate ou JPA já percebe uma grande semelhança. Através da Metadata [Table] no escopo da classe, definimos a qual tabela este objeto deve ser persistido.

No atributo codigo, foi adicionado a Metadata [Id] indicando que esse atributo corresponde a chave primária, ou o identificador, do objeto.

E nos atributos, titulo e descrição, adicionado a Metadata [Column] indicando que refere-se a uma coluna. Junto a Metadata também foi adicionado o nome respectivo da coluna na tabela.

Com isso, nosso bean está pronto para ser persistido. Vamos para a sua gravação.

Dentro do arquivo DuckToDo.mxml foi criada a seguinte estrutura de componentes.

?View Code ACTIONSCRIPT3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<mx:Binding destination="todo.titulo" 		source="titulo.text"/>
<mx:Binding destination="todo.descricao" 	source="descricao.text"/>
 
<mx:Panel width="500" height="250" layout="absolute" title="O que tenho para fazer?" horizontalCenter="0" verticalCenter="0">
 
<mx:ViewStack id="vw" top="0" right="0" left="0" bottom="0">
	<mx:Canvas label="Grid" width="100%" height="100%">
 
		<mx:Label x="10" y="10" text="Título" fontWeight="bold"/>
		<mx:TextInput x="10" y="29" width="460" id="titulo" text="{this.todo.titulo}"/>
 
		<mx:Label x="10" y="58" text="Descrição" fontWeight="bold"/>
		<mx:TextArea x="10" y="75" width="460" height="85" id="descricao" text="{this.todo.descricao}"/>
 
		<mx:Button x="318" y="172" label="Adicionar" id="btnAdd" click="btnAddHandler(event);"/>
		<mx:Button x="252" y="172" label="Listar" id="btnListar" click="btnListarHandler(event);"/>
		<mx:Button x="189" y="172" label="Novo" id="btnNovo" click="btnNovoHandler(event);"/>
		<mx:Button x="406" y="172" label="Excluir" id="btnDel" click="btnDelHandler(event);"/>
 
	</mx:Canvas>
 
	<mx:Canvas label="Formulario" width="100%" height="100%">
		<mx:DataGrid 	top="5" right="5" left="5" bottom="30" 
						id="dg" 
						doubleClickEnabled="true" 
						doubleClick="doubleClickHandler(event);">
			<mx:columns>
				<mx:DataGridColumn dataField="titulo"/>
			</mx:columns>
		</mx:DataGrid>
		<mx:Button label="Pesquisar" id="btnPesquisar" click="btnPesquisarHandler(event);" bottom="5" right="5"/>
		<mx:Button label="Cadastrar" id="btnCadastrar" click="btnCadastrarHandler(event);" bottom="5" right="90"/>
	</mx:Canvas>
 
</mx:ViewStack>
 
</mx:Panel>

Essa estrutura corresponde a um Panel, contendo um ViewStack com dois Canvas dentro. Para o primeiro Canvas foi adicionado um Grid para conter a lista de tarefas e no segundo Canvas, um pequeno formulário para a manutenção dos registros.

Nesse artigo não irei comentar sobre a estrutura do formulário, considerando apenas como relevante as instruções de uso do FlexORM.

Foi adicionado um evento no creationComplete da minha aplicação, para instanciar o banco de dados, conforme declaração abaixo:

?View Code ACTIONSCRIPT3
1
2

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
						creationComplete="initApp(event);">

E dentro do bloco de programação em ActionScript foi adicionado:

?View Code ACTIONSCRIPT3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

<mx:Script>
<![CDATA[
 
import org.flexduck.model.Todo;
import nz.co.codec.flexorm.EntityManager;
 
/**
 * Objeto de persistencia
 */ 
private var genericDAO 	: EntityManager	= EntityManager.instance;
 
/**
 * Classe para listar
 */
private var todoClass	: Class			= Todo;
 
/**
 * Bean
 */
[Bindable]
private var todo		: Todo			= new Todo();
 
/**
 * Evento disparado no creationComplete da aplicação para fazer a conexão com o banco de dados
 */
private function initApp(event:Event) : void
{
	var appDataBase : File = File.documentsDirectory.resolvePath("ducktodo.db");
	var sqlConn		: SQLConnection	= new SQLConnection();
	sqlConn.open(appDataBase);
	this.genericDAO.sqlConnection	= sqlConn;
}
 
/**
 * Função disparada no click do botão de "Adicionar"
 */
private function btnAddHandler(event:MouseEvent) : void
{
	this.genericDAO.save(this.todo);
	this.dg.dataProvider	= this.genericDAO.findAll(this.todoClass);
}
 
/**
 * Função disparada no click do botão de "Excluir"
 */
private function btnDelHandler(event:MouseEvent) : void
{
	this.genericDAO.remove(this.todo);
	this.dg.dataProvider	= this.genericDAO.findAll(this.todoClass);
}
 
/**
 * Função disparada no duplo click no grid de pesquisa
 */
private function doubleClickHandler(event:MouseEvent) : void 
{
	this.todo	= this.dg.selectedItem as Todo;
	this.vw.selectedIndex	= 0;
}
 
/**
 * Função disparada no click do botão de "Pesquisar"
 */
private function btnPesquisarHandler(event:MouseEvent) : void
{
	this.dg.dataProvider	= this.genericDAO.findAll(this.todoClass);
}
 
/**
 * Função disparada no click do botão de "Cadastrar"
 */
private function btnCadastrarHandler(event:MouseEvent) : void
{
	this.vw.selectedIndex 	= 0;
}
 
/**
 * Função disparada no click do botão de "Listar"
 */
private function btnListarHandler(event:MouseEvent) : void
{
	this.vw.selectedIndex	= 1;
}
 
/**
 * Função disparada no click do botão de "Novo"
 */
private function btnNovoHandler(event:MouseEvent) : void
{
	this.todo	= new Todo();
}
]]>
</mx:Script>

Alguns comentários relevantes:

Na função initApp, foi criado uma conexão SQLConnection, e a mesma foi passada para um objeto chamado genericDAO. Este objeto é uma instancia da classe EntityManager do FlexORM, responsável por executar os métodos para manipulação do banco de dados.

Na função btnAddHandler foi feita a persistencia do objeto Todo. Perceba que essa função é responsável por gravar e atualizar o objeto, não sendo necessário que o desenvolvedor se preocupe com a operação específica, apenas que em determinado momento, o objeto deve ser persistido, gravando-o ou fazendo sua atualização.

Na função btnDelHandler foi solicitado que determinado objeto fosse apagado do banco de dados.

Na função btnPesquisarHandler foi solicitado uma busca em todos os registros de determinada Classe, e não um objeto, fique atento a essa situação.

Os demais eventos servem para a navegação da tela, portanto, não serão comentados.

Se você fez corretamente a inclusão de todos os fontes, terá o resultado:

?View Code ACTIONSCRIPT3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
						creationComplete="initApp(event);">
 
<mx:Script>
<![CDATA[
 
import org.flexduck.model.Todo;
import nz.co.codec.flexorm.EntityManager;
 
/**
 * Objeto de persistencia
 */ 
private var genericDAO 	: EntityManager	= EntityManager.instance;
 
/**
 * Classe para listar
 */
private var todoClass	: Class			= Todo;
 
/**
 * Bean
 */
[Bindable]
private var todo		: Todo			= new Todo();
 
/**
 * Evento disparado no creationComplete da aplicação para fazer a conexão com o banco de dados
 */
private function initApp(event:Event) : void
{
	var appDataBase : File = File.documentsDirectory.resolvePath("ducktodo.db");
	var sqlConn		: SQLConnection	= new SQLConnection();
	sqlConn.open(appDataBase);
	this.genericDAO.sqlConnection	= sqlConn;
}
 
/**
 * Função disparada no click do botão de "Adicionar"
 */
private function btnAddHandler(event:MouseEvent) : void
{
	this.genericDAO.save(this.todo);
	this.dg.dataProvider	= this.genericDAO.findAll(this.todoClass);
}
 
/**
 * Função disparada no click do botão de "Excluir"
 */
private function btnDelHandler(event:MouseEvent) : void
{
	this.genericDAO.remove(this.todo);
	this.dg.dataProvider	= this.genericDAO.findAll(this.todoClass);
}
 
/**
 * Função disparada no duplo click no grid de pesquisa
 */
private function doubleClickHandler(event:MouseEvent) : void 
{
	this.todo	= this.dg.selectedItem as Todo;
	this.vw.selectedIndex	= 0;
}
 
/**
 * Função disparada no click do botão de "Pesquisar"
 */
private function btnPesquisarHandler(event:MouseEvent) : void
{
	this.dg.dataProvider	= this.genericDAO.findAll(this.todoClass);
}
 
/**
 * Função disparada no click do botão de "Cadastrar"
 */
private function btnCadastrarHandler(event:MouseEvent) : void
{
	this.vw.selectedIndex 	= 0;
}
 
/**
 * Função disparada no click do botão de "Listar"
 */
private function btnListarHandler(event:MouseEvent) : void
{
	this.vw.selectedIndex	= 1;
}
 
/**
 * Função disparada no click do botão de "Novo"
 */
private function btnNovoHandler(event:MouseEvent) : void
{
	this.todo	= new Todo();
}
]]>
</mx:Script>
 
<mx:Binding destination="todo.titulo" 		source="titulo.text"/>
<mx:Binding destination="todo.descricao" 	source="descricao.text"/>
 
<mx:Panel width="500" height="250" layout="absolute" title="O que tenho para fazer?" horizontalCenter="0" verticalCenter="0">
 
<mx:ViewStack id="vw" top="0" right="0" left="0" bottom="0">
	<mx:Canvas label="Grid" width="100%" height="100%">
 
		<mx:Label x="10" y="10" text="Título" fontWeight="bold"/>
		<mx:TextInput x="10" y="29" width="460" id="titulo" text="{this.todo.titulo}"/>
 
		<mx:Label x="10" y="58" text="Descrição" fontWeight="bold"/>
		<mx:TextArea x="10" y="75" width="460" height="85" id="descricao" text="{this.todo.descricao}"/>
 
		<mx:Button x="318" y="172" label="Adicionar" id="btnAdd" click="btnAddHandler(event);"/>
		<mx:Button x="252" y="172" label="Listar" id="btnListar" click="btnListarHandler(event);"/>
		<mx:Button x="189" y="172" label="Novo" id="btnNovo" click="btnNovoHandler(event);"/>
		<mx:Button x="406" y="172" label="Excluir" id="btnDel" click="btnDelHandler(event);"/>
 
	</mx:Canvas>
 
	<mx:Canvas label="Formulario" width="100%" height="100%">
		<mx:DataGrid 	top="5" right="5" left="5" bottom="30" 
						id="dg" 
						doubleClickEnabled="true" 
						doubleClick="doubleClickHandler(event);">
			<mx:columns>
				<mx:DataGridColumn dataField="titulo"/>
			</mx:columns>
		</mx:DataGrid>
		<mx:Button label="Pesquisar" id="btnPesquisar" click="btnPesquisarHandler(event);" bottom="5" right="5"/>
		<mx:Button label="Cadastrar" id="btnCadastrar" click="btnCadastrarHandler(event);" bottom="5" right="90"/>
	</mx:Canvas>
 
</mx:ViewStack>
 
</mx:Panel>
 
</mx:WindowedApplication>

Basta exportar sua aplicação, e tudo deverá funcionar perfeitamente.

Forte abraço e até a próxima!

]]> http://www.horochovec.com.br/blog/2010/01/27/flexorm-framework-orm-para-persistencia-em-air-1-5/feed/ 12 Adobe Shibuya http://www.horochovec.com.br/blog/2009/10/15/adobe-shibuya/ http://www.horochovec.com.br/blog/2009/10/15/adobe-shibuya/#comments Thu, 15 Oct 2009 22:01:30 +0000 Stefan Horochovec http://www.horochovec.com.br/blog/?p=193 Ola pessoal,

A Adobe está melhorando cada vez mais o client AIR para que as empresas venham a desenvolver suas aplicações pensando em sua utilização.

O AIR possui tudo que você precisa para criar um processo de distribuição da sua aplicação em qualquer sistema operacional e possibilita diversas customizações para o processo de instalação e atualização da aplicação, inclusive atualização de novas versões de forma extremamente prática (conforme mostrado aqui no meu blog).

E agora, um novo novo produto/serviço aparece no mercado. O Adobe Shibuya, ainda beta e não liberado para o uso, mas para quem vem desenvolvendo e utilizando o AIR pode ficar ainda mais animado com a tecnologia.

A proposta do Adobe Shibuya é que em poucas linhas de código você possa criar um controle de distribuição de aplicações em AIR. De que forma? Try e Buy!! Ou seja, versões demo e opção para compra da sua aplicação direto pelo site da Adobe – veja a loja online aqui.

Você irá ter um controle de compras através do Adobe Developer Connection e receberá os pagamentos uma vez por mês.

Bom, a idéia é ótima e só tende a aumentar a quantia de projetos em AIR. Eu particularmente adorei a idéia de poder desenvolver algo e por para vender direto no site da Adobe. :)

Para acompanhar o Shibuya, clique aqui.

Vida longa ao Flex!

]]> http://www.horochovec.com.br/blog/2009/10/15/adobe-shibuya/feed/ 0 Tecsul Pato Branco – 2009 http://www.horochovec.com.br/blog/2009/10/07/tecsul-pato-branco-2009/ http://www.horochovec.com.br/blog/2009/10/07/tecsul-pato-branco-2009/#comments Thu, 08 Oct 2009 00:20:16 +0000 Stefan Horochovec http://www.horochovec.com.br/blog/?p=190 Durante os dias 14, 15 e 16 acontecerá em Pato Branco, PR o evento Tecsul. O Tecsul é uma união de dois eventos, o Aftertaste e o Sematis.

Serão três dias de palestras e minicursos com diversos palestrantes e instrutores.

O AUG FlexDuck estará presente no dia 14 com um minicurso sobre Flex.

Convido todos a estarem participando do evento. Mais informações, clique aqui.

]]> http://www.horochovec.com.br/blog/2009/10/07/tecsul-pato-branco-2009/feed/ 0 Curso de Adobe Flex em Dois Vizinhos http://www.horochovec.com.br/blog/2009/09/18/curso-de-adobe-flex-em-dois-vizinhos/ http://www.horochovec.com.br/blog/2009/09/18/curso-de-adobe-flex-em-dois-vizinhos/#comments Fri, 18 Sep 2009 04:20:21 +0000 Stefan Horochovec http://www.horochovec.com.br/blog/?p=188 Ola

Em mais uma parceria com o NTI Paraná e Sudotec, estaremos realizando um curso de 24 horas de Adobe Flex em Dois Vizinhos/PR.

O curso tem duração de 24 horas. As aulas serão na Sudotec. O curso é para iniciantes e a linguagem que utilizaremos como back-end será o Java.

Para mais informações, acesse o site do NTI Parana, clicando aqui

]]> http://www.horochovec.com.br/blog/2009/09/18/curso-de-adobe-flex-em-dois-vizinhos/feed/ 1 AIR – Criando uma aplicação com atualização automática – Parte III http://www.horochovec.com.br/blog/2009/08/14/air-criando-uma-aplicacao-com-atualizacao-automatica-parte-iii/ http://www.horochovec.com.br/blog/2009/08/14/air-criando-uma-aplicacao-com-atualizacao-automatica-parte-iii/#comments Fri, 14 Aug 2009 05:36:52 +0000 Stefan Horochovec http://www.horochovec.com.br/blog/?p=168 Na última parte do artigo, a última configuração que deve ser feita dentro do projeto, é que dentro da pasta src, você deve criar um arquivo chamado update-config.xml. Esse arquivo irá conter as informações de como o processo de atualização deve se comportar.

?Download update-config.xml
1
2
3
4
5
6
7
8
9
10
11
12

<configuration xmlns="http://ns.adobe.com/air/framework/update/configuration/1.0">
	<url>http://www.seusite.com.br/air/update-config.xml</url>
	<delay>1</delay>
	<defaultUI>
		<dialog name="checkForUpdate" visible="true" />
		<dialog name="downloadUpdate" visible="true" />
		<dialog name="downloadProgress" visible="true" />
		<dialog name="installUpdate" visible="true" />
		<dialog name="fileUpdate" visible="true" />
		<dialog name="unexpectedError" visible="true" />
	</defaultUI>
</configuration>

Todas as opções foram marcadas como true, para que você possa acompanhar todas as etapas do processo.

A partir deste momento, o trabalho fica todo por conta do Flex. Não há mais necessidade de você se preocupar com nada. Ele será responsável por fazer a verificação, sugerir ou não o download, e caso o usuário opte por baixar a aplicação, ainda irá sou salva-lá em seu HD, ou atualizar automaticamente a aplicação. Fácil não é?

Mas como ele sabe que existe uma nova versão para ser baixada?

Através de um arquivo XML que deverá ser publicado no servidor na mesma URL foi informada na propriedade URL do objeto autoUpdater.

Vamos dar uma conferida em como deve ser esse XML para que o autoUpdater possa fazer as verificações necessárias.

?Download update-config.xml
1
2
3
4
5
6
7
8
9

<?xml version="1.0" encoding="utf-8"?>  
<update xmlns="http://ns.adobe.com/air/framework/update/description/1.0">  
	<version>1.1</version>  
	<url>http://www.seusite.com.br/air/AIRAutoUpdate1-1.air</url>  
	<description><![CDATA[   
	v1.1
	* Adicionado novos feeds para leitura
	]]></description>  
</update>

Simples não é? Poucas informações são necessárias para que a atualização ocorra. Você deve informar apenas a versão da aplicação que deverá ser atualizada. Ou seja, minha primeira compilação da primeira versão do projeto era 1.0, a próxima versão, ela foi compilada como 1.1, então é essa versão que eu devo passar para o update-config.xml.

Depois, devo informar a URL que está o arquivo que deverá ser feito o download para a atualização. E por ultimo, posso descrever quais foram as alterações na versão que geraram a nova atualização.

Dessa forma, quando iniciarmos a aplicação, o aplicativo irá ler esse XML, verificará que existe uma nova versão disponível, e irá inicializar o processo de atualização.

De uma forma simples assim, você não precisará mais se preocupar com atualizadores ou em informar seu cliente que existe uma nova versão para o sistema. Deixe o AIR trabalhar um pouco por você!

Com os códigos informados acima, temos a primeira versão do sistema completa, exceto o XML de atualização, que só deve ser publicado quando houver uma nova versão. Abaixo, seguem os fontes para a versão 1.1 do projeto. Esses sem comentários adicionais, já que o intuito do artigo era apenas explicar como é feita a atualização de forma automática em aplicações em AIR.

AIRAutoUpdate-app.xml

?Download AIRAutoUpdate-app.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.5">
	<id>AIRAutoUpdate</id>
	<version>1.1</version>
	<filename>AIRAutoUpdate</filename>
	<name>AIRAutoUpdate - Tutorial IMasters</name>
	<installFolder>Horochovec/AIR/AIRAutoUpdate</installFolder>
	<programMenuFolder>Horochovec/AIR/AIRAutoUpdate</programMenuFolder>
	<description>Exemplo de app que faz sua atualização automática</description>
    <copyright>Stefan Horochovec (stefan@horochovec.com.br)</copyright>
	<initialWindow>
		<title>AIRAutoUpdate</title>
		<content>AIRAutoUpdate.swf</content>
		<systemChrome>none</systemChrome>
		<transparent>true</transparent>
		<visible>true</visible>
	    <minimizable>true</minimizable>
	    <maximizable>false</maximizable>
	    <resizable>false</resizable>
	</initialWindow>
</application>

Posts.mxml

?Download AIRAutoUpdate-app.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute" 
	width="500" 
	height="250" 
	showCloseButton="true" 
	creationComplete="creationCompleteHandler(event);"
	close="onCloseHandler(event);" 
	title="Feeds Imasters - Seção Flex">
 
	<mx:Script>
		<![CDATA[
 
			import flash.desktop.NativeApplication;
			import mx.events.CloseEvent;
			import mx.events.FlexEvent;			
			import mx.rpc.events.ResultEvent;
 
			/**
			 * Dataprovider do grid
			 */			
			private var xmlList : XMLList;
 
    		/**
    		 * Evento disparado na finalização da construção do componente
    		 * Responsavel por iniciar o HTTPService para leitura do feed
    		 */
			private function creationCompleteHandler(event:FlexEvent) : void
			{
				this.service.send();
			}
 
			/**
			 * Evento disparado no termino com sucesso da leitura do HTTPService
			 * Responsavel por adicionar ao grid o dataProvider
			 */
			private function serviceHandler(event:ResultEvent) : void
			{
				var result : XML = new XML(event.result);
				xmlList	= result..item;
				this.grid.dataProvider	= xmlList;
			}
 
    		/**
    		 * Evento disparado no fechar da TitleWindow, ele é responsável por fechar a aplicação
    		 */			
			private function onCloseHandler(event:CloseEvent) : void 
			{
				NativeApplication.nativeApplication.exit();
			}
 
			/**
			 * Quando ocorrer um click no grid, o botao para abrir o link do post
			 * sera habilitado, e coloca os textos para os componentes do autor 
			 * e descrição do post
			 */
			private function onClickGridHandler(event:MouseEvent) : void
			{
				this.btnLink.visible	= true;
				this.autor.text			= ((this.grid.selectedItem) as Object)['author'];
				this.descricao.text		= ((this.grid.selectedItem) as Object)['description'];
			}
 
			/**
			 * Click do botao para visualizar o artigo
			 */
			private function onBtnLinkClickHandler(event:MouseEvent) : void
			{
				navigateToURL(new URLRequest(((this.grid.selectedItem) as Object)['guid'].toString()), "_blank");
			}
 
		]]>
	</mx:Script>
 
	<mx:HTTPService id="service" url="http://imasters.uol.com.br/feed/secao/flex" 
					showBusyCursor="true" resultFormat="e4x" 
					result="serviceHandler(event)"/>
 
	<mx:VBox bottom="5" left="5" right="5" top="5">
		<mx:AdvancedDataGrid id="grid" designViewDataType="flat" 
							 bottom="5" left="5" right="5" top="5" 
							 height="50%" width="100%"
							 click="onClickGridHandler(event);">
			<mx:columns>
				<mx:AdvancedDataGridColumn headerText="Titulo do artigo" dataField="title"/>
			</mx:columns>
		</mx:AdvancedDataGrid>
 
		<mx:Canvas 	height="50%" width="100%" borderColor="#DADADA" borderStyle="solid">
			<mx:Label x="6" y="6" id="autor" fontWeight="bold"/>
			<mx:TextArea 	height="53" id="descricao" bottom="6" left="6" right="6" 
							borderStyle="none" selectable="false" mouseFocusEnabled="false" 
							mouseEnabled="false"/>
			<mx:LinkButton 	x="383" y="4" label="Ler artigo" visible="false" 
							id="btnLink" click="onBtnLinkClickHandler(event);"/>
 
		</mx:Canvas>
 
	</mx:VBox>
 
</mx:TitleWindow>

Espero ter ficado claro o processo de atualização automática no AIR.

Abraços a todos.

]]> http://www.horochovec.com.br/blog/2009/08/14/air-criando-uma-aplicacao-com-atualizacao-automatica-parte-iii/feed/ 8 AIR – Criando uma aplicação com atualização automática – Parte II http://www.horochovec.com.br/blog/2009/08/14/air-criando-uma-aplicacao-com-atualizacao-automatica-parte-ii/ http://www.horochovec.com.br/blog/2009/08/14/air-criando-uma-aplicacao-com-atualizacao-automatica-parte-ii/#comments Fri, 14 Aug 2009 05:32:26 +0000 Stefan Horochovec http://www.horochovec.com.br/blog/?p=145 Segunda parte…

Na continuação podemos partir para o desenvolvimento da aplicação em si. Eu criei um componente chamado Posts.mxml, ele encontra-se dentro da package: br.com.horochovec.view.Posts. A idéia desse componente é que ele seja responsável por consumir o Feed sobre Flex do site iMasters, passe algumas informações para um Grid, e assim, o usuário possa listar os posts do site e obter mais informações sobre ele.

Esse componente estende de uma TitleWindow, dentro dele possui um VBox, AdvancedDataGrid, e um Canvas, que contem dentro dele um Label, um TextArea e um LinkButton.

O componente VBox é o container que agrupará todos os outros componentes visuais desse componente.

Ainda no componente Posts.mxml, eu possuo um HTTPService. Esse HTTPService é responsável por consumir o Feed da iMasters em seu momento de criação. Ou seja, quando o componente Posts.mxml for criado, irá consumir o HTTPService para que busque todos os artigos disponíveis no site na seção Flex. O formato do consumo das informações será através de e4x.

O AdvancedDataGrid tem apenas uma única coluna, ela é responsável por imprimir o titulo do artigo. Caso o usuário opte por clicar no item do Grid, eu solicito para a aplicação que me mostre no quadro abaixo (composto por um Canvas, Label, TextInput e LinkButton) algumas informações do post selecionado.

Segue o fonte na integra do componente desenvolvido.

?Download Posts.mxml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute" 
	width="500" 
	height="250" 
	showCloseButton="true" 
	creationComplete="creationCompleteHandler(event);"
	close="onCloseHandler(event);" 
	title="Feeds Imasters - Seção Flex">
 
	<mx:Script>
		<![CDATA[
 
			import flash.desktop.NativeApplication;
			import mx.events.CloseEvent;
			import mx.events.FlexEvent;			
			import mx.rpc.events.ResultEvent;
 
			/**
			 * Dataprovider do grid
			 */			
			private var xmlList : XMLList;
 
    		/**
    		 * Evento disparado na finalização da construção do componente
    		 * Responsavel por iniciar o HTTPService para leitura do feed
    		 */
			private function creationCompleteHandler(event:FlexEvent) : void
			{
				this.service.send();
			}
 
			/**
			 * Evento disparado no termino com sucesso da leitura do HTTPService
			 * Responsavel por adicionar ao grid o dataProvider
			 */
			private function serviceHandler(event:ResultEvent) : void
			{
				var result : XML = new XML(event.result);
				xmlList	= result..item;
				this.grid.dataProvider	= xmlList;
			}
 
    		/**
    		 * Evento disparado no fechar da TitleWindow, ele é responsável por fechar a aplicação
    		 */			
			private function onCloseHandler(event:CloseEvent) : void 
			{
				NativeApplication.nativeApplication.exit();
			}
 
			/**
			 * Quando ocorrer um click no grid, o botao para abrir o link do post
			 * sera habilitado, e coloca os textos para os componentes do autor 
			 * e descrição do post
			 */
			private function onClickGridHandler(event:MouseEvent) : void
			{
				this.btnLink.visible	= true;
				this.autor.text			= ((this.grid.selectedItem) as Object)['author'];
				this.descricao.text		= ((this.grid.selectedItem) as Object)['description'];
			}
 
			/**
			 * Click do botao para visualizar o artigo
			 */
			private function onBtnLinkClickHandler(event:MouseEvent) : void
			{
				navigateToURL(new URLRequest(((this.grid.selectedItem) as Object)['guid'].toString()), "_blank");
			}
 
		]]>
	</mx:Script>
 
	<mx:HTTPService id="service" url="http://imasters.uol.com.br/feed/secao/flex" 
					showBusyCursor="true" resultFormat="e4x" 
					result="serviceHandler(event)"/>
 
	<mx:VBox bottom="5" left="5" right="5" top="5">
		<mx:AdvancedDataGrid id="grid" designViewDataType="flat" 
							 bottom="5" left="5" right="5" top="5" 
							 height="50%" width="100%"
							 click="onClickGridHandler(event);">
			<mx:columns>
				<mx:AdvancedDataGridColumn headerText="Titulo do artigo" dataField="title"/>
			</mx:columns>
		</mx:AdvancedDataGrid>
 
		<mx:Canvas 	height="50%" width="100%" borderColor="#DADADA" borderStyle="solid">
			<mx:Label x="6" y="6" id="autor" fontWeight="bold"/>
			<mx:TextArea 	height="53" id="descricao" bottom="6" left="6" right="6" 
							borderStyle="none" selectable="false" mouseFocusEnabled="false" 
							mouseEnabled="false"/>
			<mx:LinkButton 	x="383" y="4" label="Ler artigo" visible="false" 
							id="btnLink" click="onBtnLinkClickHandler(event);"/>
 
		</mx:Canvas>
 
	</mx:VBox>
 
</mx:TitleWindow>

Algumas considerações interessantes sobre o componente acima:

  • creationComplete=”creationCompleteHandler(event);” Quando o componente tiver sido criado, ele irá disparar a função creationCompleteHandler(); que será responsável por iniciar o consumo do HTTPService.
  • onCloseHandler(event:CloseEvent); Neste evento a classe NativeApplication é acionada sendo responsável por fechar a aplicação pelo botão de fechar da TitleWindow, componente base para o componente Posts;
  • serviceHandler(event:ResultEvent); Evento responsável por filtras as informações que o HTTPService consumiu e as retornaram como string. Essas informações foram passadas para um XMLList aonde este XMLList será o dataProvider do Grid.

Com isso temos um componente baseado em uma TitleWindow, que é capaz de buscar informações de um feed do site da iMasters, através de HTTPService e disponibilizar as informações na tela.

Dentro da minha aplicação principal, eu possuo a definição de alguns estilos, para que o fundo transparente funcione sem nenhum transtorno.

Para uma melhor interpretação, irei disponibilizar todo o fonte do main, depois comentando cada uma das observações necessárias.

?Download AIRAutoUpdate.mxml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:app="br.com.horochovec.view.*" 
    width="500" height="250"
    layout="absolute"
    paddingRight="0"
    paddingLeft="0" 
    creationComplete="onCreationCompleteHandler(event);">
 
    <mx:Style>
    	/**
    	 * Estilo para a aplicação possuir o background transparente
    	 */
        Application 
        {
            background-color:""; 
            background-image:""; 
            padding: 0px;
        }
    </mx:Style>
 
    <mx:Script>
    	<![CDATA[
    		import air.update.events.DownloadErrorEvent;
 
    		import air.update.events.UpdateEvent;
    		import air.update.ApplicationUpdaterUI;
    		import mx.controls.Alert;
    		import mx.events.CloseEvent;
    		import mx.events.FlexEvent;
 
    		/**
    		 * Objeto para atualizacao automatica
    		 */
    		private var autoUpdater	: ApplicationUpdaterUI = new ApplicationUpdaterUI();
 
    		/**
    		 * Evento disparado na finalização da aplicação para adicionar um Listner de MouseDown 
    		 * no componente principal da aplicação
    		 */
    		private function onCreationCompleteHandler(event:FlexEvent) : void 
    		{
    			this.main.addEventListener( MouseEvent.MOUSE_DOWN,	onMouseDownHandler );
    			this.autoUpdateInit();
    		}
 
    		/**
    		 * Funcao para configuracao do inicio da atualizacao
    		 */
    		private function autoUpdateInit() : void 
    		{
    			this.autoUpdater.updateURL	= "http://www.horochovec.com.br/air/update-config.xml";
    			this.autoUpdater.isCheckForUpdateVisible	= false;
    			this.autoUpdater.addEventListener(UpdateEvent.INITIALIZED,	onUpdateApp);
    			this.autoUpdater.addEventListener(ErrorEvent.ERROR,			onErrorUpdate);
    			this.autoUpdater.initialize();
    		}
 
    		/**
    		 * Evento de inicializacao de atualizacao
    		 */
    		private function onUpdateApp(event:UpdateEvent) : void 
    		{
    			this.autoUpdater.checkNow();
    		}
 
    		/**
    		 * Evento em caso de erro na atualizacao
    		 */
    		private function onErrorUpdate(event:ErrorEvent) : void
    		{
    			Alert.show(event.toString());
    		}
 
    		/**
    		 * Possibilita arrastar o componente na janela atual 
    		 */
    		private function onMouseDownHandler(event:MouseEvent) : void
    		{
    			stage.nativeWindow.startMove();
    		}
 
 
    	]]>
    </mx:Script>
 
    <!-- Componente com a aplicação -->
    <app:Posts x="0" y="0" id="main"/>
 
</mx:Application>

Algumas considerações:

  • creationComplete=”onCreationCompleteHandler(event);” No termino da criação da aplicação, a função onCreationCompleteHandler() será disparada, ela é responsável por adicionar um EventListner de MouseDown em meu componente Posts, e também executa a função autoUpdateInit(), que será responsável por eu iniciar meu objeto de atualização automática;
  • function autoUpdateInit();Nessa função ocorre a configuração do objeto para efetuar a atualização automática. O primeiro atributo informado é a URL do arquivo XML que será consultado para verificar se existe uma atualização disponível para a aplicação (o formato do arquivo será informado na sequência).O segundo atributo informado é para que seja visível a busca por novas atualizações, esse atributo está informado como true, para que possamos acompanhar a busca por novas atualizações e ver se realmente está funcionando a implementação.Em seguida, dois EventListner são adicionados ao objeto, um quando ele for inicializado, e outro caso aconteça algum erro.Por fim, a função inicializa o objeto de atualização através da função initialize();
  • function initialize(); Essa função é responsável por solicitar ao componente de atualização que verifique na URL informada se o aplicativo possui uma versão nova.

Dessa forma, terminamos a segunda parte do artigo. Até a próxima!

]]> http://www.horochovec.com.br/blog/2009/08/14/air-criando-uma-aplicacao-com-atualizacao-automatica-parte-ii/feed/ 0 AIR – Criando uma aplicação com atualização automática – Parte I http://www.horochovec.com.br/blog/2009/08/14/air-criando-uma-aplicacao-com-atualizacao-automatica-parte-i/ http://www.horochovec.com.br/blog/2009/08/14/air-criando-uma-aplicacao-com-atualizacao-automatica-parte-i/#comments Fri, 14 Aug 2009 05:28:49 +0000 Stefan Horochovec http://www.horochovec.com.br/blog/?p=139 Ola pessoal,

Esse e os próximos dois posts no meu blog irei abordar um assunto que considero bastante interessante e que a Adobe teve um cuidado todo especial quando projetou essa atualização no SDK 1.5 do AIR, que foi a API para uma auto-atualização de sua aplicação. Esse artigo será divido em três partes. Os códigos fontes dos dois projetos utilizados estão disponíveis para download..

O post foi dividido em três partes devido a seu tamanho, seria muito extenso tudo em um unico.

Espero que aproveitem ;)

Hoje é possível que você configure sua aplicação para que ela procure no servidor se existe uma atualização disponível e caso exista, se você quer fazer o download e atualizar sua aplicação. Ainda é possível que você possa informar ao usuário do sistema, quais seriam os motivos para a atualização da aplicação. Tudo isso, através de poucas linhas de codificação e apenas um arquivo XML em seu servidor.

Para ilustrar essa situação, vamos criar uma aplicação que irá ler um feed do site da iMasters. A primeira versão da aplicação será responsável por ler apenas um dos feeds, e a sua atualização, poderá ter mais opções de leitura.

Vou iniciar o artigo, partindo do principio que você já saiba criar um projeto no FlexBuilder para AIR. Essa aplicação tem alguns detalhes interessantes. O primeiro deles é que ela terá seu background transparente, ou seja, você tem a impressão que a aplicação está rodando como um gadget, outra grande inovação que a Adobe trouxe para o AIR.

Eu criei um projeto chamado AIRAutoUpdate e o FlexBuilder criou a estrutura abaixo:

imagem01

Bom, para quem não conhece a estrutura do AIR, o arquivo AIRAutoUpdate-app.xml é responsável por definir diversas informações ao compilador. O FlexBuilder adiciona um arquivo bem extenso quando você cria um projeto, iremos substituir o arquivo que ele criou por uma versão mais simples, contendo apenas aquilo que for relevante para esse tutorial, conforme informado abaixo:

?Download download.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.5">
	<id>AIRAutoUpdate</id>
	<version>1.0</version>
	<filename>AIRAutoUpdate</filename>
	<name>AIRAutoUpdate - Tutorial</name>
	<installFolder>Horochovec/AIR/AIRAutoUpdate</installFolder>
	<programMenuFolder>Horochovec/AIR/AIRAutoUpdate</programMenuFolder>
	<description>Exemplo de app que faz sua atualização automática</description>
    <copyright>Stefan Horochovec (stefan@horochovec.com.br)</copyright>
	<initialWindow>
		<title>AIRAutoUpdate</title>
		<content>AIRAutoUpdate.swf</content>
		<systemChrome>none</systemChrome>
		<transparent>true</transparent>
		<visible>true</visible>
	    <minimizable>true</minimizable>
	    <maximizable>false</maximizable>
	    <resizable>false</resizable>
	</initialWindow>
</application>

Esse artigo não tem como objetivo descrever todas as informações que foram atribuídas ao XML, porem, algumas ressalvas serão feitas aos atributos que são base para esse artigo.

  1. <version></version> Utilizado para definir qual a versão da aplicação atualmente, é usado para fazer verificações de versão para atualização.
  2. <systemChrome>none</systemChrome> Definição do tipo do System Chrome, essa opção tem valor default “standard”, porem, para criar uma aplicação com fundo transparente, deve-se atribuir o valor “none”.
  3. <transparent>true</transparent> Definição se a janela deverá ser transparente, é apenas aplicável quando systemChrome for do tipo none.
  4. <visible>true</visible> Define se a janela deverá se iniciar como visível, como o valor default é false, passamos para true.

Assim, dessa forma o compilador irá receber as informações necessárias a nível de definição da aplicação para que o seu background fique transparente.

Terminamos assim, a primeira parte do artigo, até a proxima.

]]> http://www.horochovec.com.br/blog/2009/08/14/air-criando-uma-aplicacao-com-atualizacao-automatica-parte-i/feed/ 2 Forum FlexBrasil http://www.horochovec.com.br/blog/2009/04/10/forum-flexbrasil/ http://www.horochovec.com.br/blog/2009/04/10/forum-flexbrasil/#comments Fri, 10 Apr 2009 12:28:02 +0000 Stefan Horochovec http://www.horochovec.com.br/blog/?p=98 Ola pessoal,

Estava dando uma olhada nas estatisticas do Forum FlexBrasil e resolvi divulgar um pouco do Forum aqui no Blog.

O Forum conta hoje com 6727 usuários registrados, com um crescimento de quase 15 pessoas por dia se juntando a comunidade do Forum.

Ora, 15 pessoas se juntam ao Forum por dia para compartilhar seu conhecimento e suas dúvidas, eu acho isso fantástico.

Se você ainda não conhece o forum, ou ainda não se cadastrou… Acesse: Forum FlexBrasil.

O Forum conta com diversos grupos para facilitar sua postagem e seu aprendizado nele, você acessa diretamente o conteudo que deseja acessar, sem precisar filtrar todas as mensagens são postadas.

Conheça, faça parte da comunidade!

Abraços

]]> http://www.horochovec.com.br/blog/2009/04/10/forum-flexbrasil/feed/ 0 AIR + SQLite + Download http://www.horochovec.com.br/blog/2009/04/10/air-sqlite-download/ http://www.horochovec.com.br/blog/2009/04/10/air-sqlite-download/#comments Fri, 10 Apr 2009 11:58:42 +0000 Stefan Horochovec http://www.horochovec.com.br/blog/?p=91 Ola pessoal,

Algumas pessoas pediram por email e teve ate pedido no blog mesmo do projeto para download do artigo sobre AIR + SQLite…

Bom, vamos para o download dele, para baixar o projeto, clique aqui.

Abraços a todos

]]> http://www.horochovec.com.br/blog/2009/04/10/air-sqlite-download/feed/ 4