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 Instalando AIR 2.0 no seu Flash Builder http://www.horochovec.com.br/blog/2010/01/12/instalando-air-2-0-no-seu-flash-builder/ http://www.horochovec.com.br/blog/2010/01/12/instalando-air-2-0-no-seu-flash-builder/#comments Tue, 12 Jan 2010 05:30:52 +0000 Stefan Horochovec http://www.horochovec.com.br/blog/?p=217 Olá pessoal, Primeiramente quero desejar um Feliz 2010 a todos os leitores do blog!

Esse ano promete, teremos o lançamento no novo Flash Builder 4 com o Flex SDK 4.0, AIR 2.0 e Flash Catalyst, além das novas versões dos softwares da Adobe para a versão CS5, a qual venho testando a alguns meses e tenho me surpreendido bastante, principalmente com o Flash CS5, agora com recursos para desenvolvimento para Iphone, mas este será um assunto específico para outro post, nesse artigo, iremos tratar apenas da instalação do AIR 2.0 dentro do Flash Builder 4.

O primeiro passo é fazer o download da nova versão do AIR 2.0 disponível no Adobe Labs. Para fazer o download clique aqui. No meu caso, eu fiz o download e salvei o arquivo AIR20_win_sdk_010710.zip dentro da pasta sdks\ da instalação do meu Flash Builder.

AIR SKD Download

Feito o download, você deve duplicar a pasta 4.0.0 que contem a nova versão do SDK do Flex, e após isso adicionar o conteúdo do SDK da nova versão do AIR para dentro da nova pasta que você acabou de duplicar. No meu caso, antes de copiar os arquivos do SDK do AIR eu alterei o nome da pasta para “4.0.0 + AIR 2.0.0 Beta” e depois copiei todos os arquivos do novo SDK do AIR para dentro da nova pasta. Confirmei que todos os arquivos que já existiam com o mesmo nome deveriam ser sobre-escritos.

Fusão de pastas = Flex SDK + AIR SDK

Ok, feito isso, podemos abrir o Flash Builder e fazer a configuração do SDK para utilização.

Ao abrir o Flash Builder, vá ao menu: Window -> Preferences. Nesta janela, iremos adicionar um novo SDK para o Flash Builder, conforme a imagem abaixo:

3

Após clicar em “Add”, seguimos com a configuração abaixo. Perceba que eu adicionei ao “Flex SDK Location” o caminho do SDK copiado do 4.0.0 e com a adição do SDK no AIR 2.0.0.

4

E como resultado final:

5

Agora iremos criar um novo projeto, conforme as configurações da tela abaixo. Atente para a opção aonde eu digo que quero usar uma versão específica do SDK e marco o SDK “4.0.0 + AIR 2.0.0Beta“.

6

Clicando em “Finish”, uma vez que não será necessário mais nenhuma configuração, nosso projeto está apto a trabalhar com a versão 2.0 do AIR SDK.

Dentro do arquivo, Main-app.xml na segunda linha, podemos ver a indicação da versão do SDK no arquivo de configuração para compilação do projeto.

?Download Main-app.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<application xmlns="http://ns.adobe.com/air/application/2.0beta2">
 
<!-- Adobe AIR Application Descriptor File Template.
 
	Specifies parameters for identifying, installing, and launching AIR applications.
 
	xmlns - The Adobe AIR namespace: http://ns.adobe.com/air/application/2.0beta2
			The last segment of the namespace specifies the version 
			of the AIR runtime required for this application to run.
 
	minimumPatchLevel - The minimum patch level of the AIR runtime required to run 
			the application. Optional.
-->

Outro teste comum que você poderá encontrar em outros tutoriais com o mesmo objetivo que este é a instância de um objeto do tipo NativeProcess, que é uma classe específica desta versão do AIR, disponível no pacote: flash.desktop.. Você poderá fazer o teste da seguinte forma:

?Download Main.mxml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
					   xmlns:s="library://ns.adobe.com/flex/spark" 
					   xmlns:mx="library://ns.adobe.com/flex/mx">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
 
	<fx:Script>
		<![CDATA[
 
			private var nativeProcess : NativeProcess;
 
		]]>
	</fx:Script>
</s:WindowedApplication>

Bom pessoal, espero ter ajudado a quem quer testar e ainda tinha dúvidas de como proceder a instalação do AIR 2.0 dentro do Flash Builder 4.

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

]]> http://www.horochovec.com.br/blog/2010/01/12/instalando-air-2-0-no-seu-flash-builder/feed/ 2 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 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 Curso Adobe Flex – Básico ao Avançado http://www.horochovec.com.br/blog/2009/07/24/curso-adobe-flex-basico-ao-avancado/ http://www.horochovec.com.br/blog/2009/07/24/curso-adobe-flex-basico-ao-avancado/#comments Fri, 24 Jul 2009 04:03:14 +0000 Stefan Horochovec http://www.horochovec.com.br/blog/?p=136 Ola pessoal.

Estarei ministrando um curso de Adobe Flex em parceria com o NTI – Paraná. O curso terá 24 horas de duração e serão abordados diversos conteudos sobre Adobe Flex. Iremos desenvolver uma aplicação durante o curso que irá consumir serviços Java para persistência de informações.

Para mais informações, acesse o site do NTI Paraná, clicando aqui.

]]> http://www.horochovec.com.br/blog/2009/07/24/curso-adobe-flex-basico-ao-avancado/feed/ 2 Remover componentes do Custom do FlexBuilder http://www.horochovec.com.br/blog/2009/07/23/remover-componentes-do-custom-do-flexbuilder/ http://www.horochovec.com.br/blog/2009/07/23/remover-componentes-do-custom-do-flexbuilder/#comments Fri, 24 Jul 2009 02:49:44 +0000 Stefan Horochovec http://www.horochovec.com.br/blog/?p=128 Olá,

É muito comum no Flex o programador criar componentes para facilitar sua vida, porém, nem sempre você tem a necessidade de criar uma Library para isso, ou seja, você acaba customizando componentes dentro da sua própria aplicação. Porém, em algumas situações, você pode criar um componente “pai” e alguns “filhos”, usando a herança. Geralmente nesses casos você só usa na sua aplicação os componentes “filhos”, o componente “pai” é a base para eles e ele não deve ser utilizado em sua aplicação. Agora, como remover ele de sua aba “Custom” no FlexBuilder?

Existe uma forma simples de fazer isso, você fará o uso da metadata ExcludeClass.

Para exemplificar essa situação, iremos criar a seguinte situação. Um componente base que eu devo usar para os botões da minha aplicação, e depois, iremos criar um botão para o uso na aplicação. Vale lembrar que essa situação é apenas para ilustrar o uso da metadata e não é um padrão para criação de botões, até porque o componente pai irá herdar suas propriedades de um Canvas.

Segue abaixo, o código fonte do componente principal: Botao

?Download Botao.as
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

package br.com.horochovec
{
	import mx.containers.Canvas;
 
	public class Botao extends Canvas
	{
 
		public function Botao()
		{
			super();
		}
 
	}
 
}

Feito isso, iremos criar um novo componentes, que iremos chamar de BotaoOK:

?Download BotaoOK.as
1
2
3
4
5
6
7
8
9
10
11
12
13
14

package br.com.horochovec
{
	import br.com.horochovec.Botao;
 
	public class BotaoOK extends Botao
	{
		public function BotaoOK()
		{
			super();
 
		}
 
	}
}

Dessa forma, teremos o componente BotaoOK pronto para o uso, porém, no grupo “Custom” de meus componentes no FlexBuilder, eu tenho também disponivel para o uso o componente Botao, que é o componente pai, e eu não quero utilizá-lo em meu projeto. Quero removê-lo da lista, para que nenhum desenvolvedor utilize o mesmo. Como devo proceder?

?Download Botao.as
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

package br.com.horochovec
{
	import mx.containers.Canvas;
 
	[ExcludeClass]
	public class Botao extends Canvas
	{
 
		public function Botao()
		{
			super();
		}
 
	}
 
}

Pronto. Adicionando a Metadata [ExcludeClass] dentro do seu componente, ele não estará mais disponivel para o uso em minha aplicação, mas poderei continuar usando o componente pai para ser base de outros componentes.

Espero ter contribuido,

Abraços, dúvidas? Comentem!

]]> http://www.horochovec.com.br/blog/2009/07/23/remover-componentes-do-custom-do-flexbuilder/feed/ 0 Flexmania 2009 – Apresentação disponivel http://www.horochovec.com.br/blog/2009/07/08/flexmania-2009-apresentacao-disponivel/ http://www.horochovec.com.br/blog/2009/07/08/flexmania-2009-apresentacao-disponivel/#comments Wed, 08 Jul 2009 21:50:25 +0000 Stefan Horochovec http://www.horochovec.com.br/blog/?p=123 Ola pessoal!

Já estão disponiveis as apresentações da Flexmania 2009! Para conferir o link para todas as apresentações clique aqui.

Para assistir a minha palestra novamente, clique aqui, e para baixar os os projetos e minha apresentação de slides, clique aqui.

Obrigado novamente a todos que compareceram ao evento e a minha palestra :)

]]> http://www.horochovec.com.br/blog/2009/07/08/flexmania-2009-apresentacao-disponivel/feed/ 6