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:

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.

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:

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:

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:

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!

Outra dúvida muito solicitada por email pela galera é a respeito da atualização do swiz, quando atualiza o framework logo de kara dá erro,confesso que esse tempo todo não trabalhei com projetos usando o swiz, só quando fiz esse Tutorial, e também por falta de tempo, não atualizei o framework, mas esse final de semana para minha surpresa tentei migrar e foi super tranquilo, então vou passar a dica para vocês agora.

Esse artigo é continuação do

TUTORIAL JAVA + FLEX NA PRÁTICA 1/6

TUTORIAL JAVA + FLEX NA PRÁTICA 2/6

TUTORIAL JAVA + FLEX NA PRÁTICA 3/6

TUTORIAL JAVA + FLEX NA PRÁTICA 4/6

TUTORIAL JAVA + FLEX NA PRÁTICA 5/6

TUTORIAL JAVA + FLEX NA PRÁTICA 6/6

TUTORIAL JAVA + FLEX NA PRÁTICA 7/6 – Bônus

TUTORIAL JAVA + FLEX NA PRÁTICA 8 – Datas

Caso queira o projeto java é só baixar aqui (sem as libs).

Caso queira o projeto java é só baixar aqui.(com as libs).

Caso queira o projeto flex é só baixar aqui.

ATUALIZANDO O SWIZ FRAMEWORK

Primeira coisa que vamos fazer é baixar a última versão stable e atualmente (25/01/2009) é a swiz-0.6.4-flex3.swz. Digo isso porque vi no site da swiz que existe a versão alpha 1.0 do framework, esse sim pelo que vi terá algumas novidades notável, como metadata personalizado, estou migrando para essa versão 0.6.4 e quando lançar a 1.0 atualizo vocês por aqui no blog . vamos ao que interessa .

1. se ainda não baixou baixe o swiz-0.6.4-flex3.swz.
2. na pasta libs do nosso projeto flex (CrudFlex) retiramos a antiga lib (swiz-0.0.5-010609.swc) e adicionamos a nova 0.6.4.

depois de ter feito isso vai dar erro na nossa models.delegates, isso porque a classe AbstractDelegate foi retirada do framework do swiz, basta retirar o extends AbstractDelegate que nossa classe voltará a funcionar, se vc tentar rodar agora já vai funcionar, blz.. espero que tenha ajudado muita gente.

Tô brincando galera… já que é para atualizar vamos atualizar direito..hehe assim funciona mais não está de acordo com a documentação do Swiz.

Próximo passo nosso será criar o nosso SwizConfig, no nosso projeto na index.mxml temos um preinitialize que invocava a funcção que iniciava o Swiz, agora temos o Swiz config que substitui essa antiga configuração, então nosso index.mxml era assim:

ficou agora assim:

tá, mas se funcionava antes porque vou fazer isso? explico, está vendo esse viewPackages e eventPackeges, isso é muito importante para usar uma nova Metadata do Swiz, o mediate, tinha na versão anterior mas não era interessante como agora , já que agora conseguimos passar para o nosso Mediate nosso Evento customizado, tudo isso graças a esse atributo eventPackeges. Além disso na 1.0 esse arquivo vai ser mantido pelo que vi, então você estará mais próximo para atualizar quando o mesmo for lançado.

USANDO O MEDIATE

Mas afinal o que é esse Mediate? o Mediate é uma Metadata, assim como usamos o Autowire, que serve para não precisar ficar adicionando escuta de eventos, vamos explicar na prática… vá em “views.action.CidadeAction” na função init temos duas escuta de evento

não precisamos fazer mais isso, pode apagar.. agora vá na função onSaveComplete e coloque o Mediate

o mesmo no onRemoveComplete

e como as duas funções fazem a mesma coisa podemos também utilizar de uma apenas assim:

só observe que foi necessário modificar o “modificador de acesso” para public, caso contrário não funciona.

Agora sim é isso galera, o swiz está por enquanto atualizado, vi alguns exemplos na internet usando coisas que nunca vi no swiz(Documentação) por isso me retive e mostrei baseado na documentação… seguindo os passos do mesmo..(Os delegates não são mais necessários mas já que está aí resolvi manter). Espero que te ajude e estimule a manter o framework atualizado, porque esse merece seu carinho e atenção

Cumps.

“O QUE È BOM TEM QUE CONTINUAR”        “O SENTIMENTO NÂO PODE PARAR”

Ano de 2010 começa e a vontade de ajudar a comunidade java e flex aumenta, e como podem perceber reativo hoje o Tutorial mais bombado do meu blog(JAVA + FLEX NA PRÀTICA) e os Motivos para reativar esse tutorial foi:

• Percebi que o público do meu blog é uma galera que busca um pouco além de pequenas dicas, gostaram é de tutorial.
• É mais fácil dar continuidade neste tutorial e mostrar algumas coisas mais avançadas ou continua de que começar outra, ter que ficar explicando d+, ter que no final ficar no básico.
• Muitas dúvidas por email que valem um novo post para explicações, atualizações e dicas.
• Quem sabe não sai um Ebook legal aí ,hein!

Então se prepara, pegue um café que no Tutorial Java + Flex Na Prática (8) – Datas você vai aprender como trabalhar com datas usando Flex e Java (já que essa é a dúvida campeão da galera por email).

Para você que ainda não leu esses artigos para facilitar lá vai

Esse artigo é continuação do

TUTORIAL JAVA + FLEX NA PRÁTICA 1/6

TUTORIAL JAVA + FLEX NA PRÁTICA 2/6

TUTORIAL JAVA + FLEX NA PRÁTICA 3/6

TUTORIAL JAVA + FLEX NA PRÁTICA 4/6

TUTORIAL JAVA + FLEX NA PRÁTICA 5/6

TUTORIAL JAVA + FLEX NA PRÁTICA 6/6

TUTORIAL JAVA + FLEX NA PRÁTICA 7/6 – Bônus

Caso queira o projeto java é só baixar aqui (sem as libs).

Caso queira o projeto java é só baixar aqui.(com as libs).

Caso queira o projeto flex é só baixar aqui.

TRABALHANDO COM DATAS NO JAVA  + FLEX

Sim, parece simples mas causa uma dúvida na galera que começa com JAVA + FLEX, seja na parte java com qual anotação usar ou seja no flex como pegar os valores em DD/MM/YYYY e converter em YYYY/MM/DD (já que é nesse formato que se armazena data no banco) . Tem muita gente que esquece que é data, se estressa e trata como se fosse string, nada contra mas se quiser pode aproveitar esse artigo para trabalhar Data como Data… vamos começar

A primeira coisa que vamos fazer é acrescentar um novo atributo na nossa entidade Cidade, vamos acrescentar a data de fundação(lógico que isso é redículo mas é um exemplo, ok) e com sua anotação correta.Vamos adicionar o atributo na nossa entidade:

simples não, apenas vale lembrar que o Date é o “java.util.Date” e não “java.sql.Date”, vamos agora pro flex que aqui acabou, perceberam como OO ajuda… mexemos em uma classe, o resto fica do jeito que está

No Flex adicionamos a atributo também na nossa entidade que é nosso clone da Cidade:

Agora, vamos criar um componente customizado, na verdade vamos extender o componente data Padrão do Flex (o DateField) chamei de DateFieldpt, só um detalhe, achei esse componente na net e não vou dar créditos pois não sei quem fez, então dentro do nosso projeto vamos criar um package components e vamos adicionar esse nosso componente, vamos ao código:

além desse componente precisamos de uma função que converta data para string e string para data, então crie mais um package utils e crie sua classe(sugeri Util.as) com essas funções, vamos ao código:

pronto, agora é moleza,adicionamos um novo campo na view que é o nosso componente customizado:

e pra finalizar em nossa action na function confirm adicionamos isso:

pronto, testa aí e você vai ver que já está funcionando, mas espera aí, ainda falta uma grande dica.

O HORÀRIO DE VERÂO BRASILEIRO!

Você vai testar agora, vai ver que está funcionando, vai ficar feliz e depois de um tempo pode acontecer de ter problemas com o nosso bendito horário de verão, explico, no Brazil não temos dia certo pra começar nem para terminar o bendito horário de verão, então como o sdk do java não utiliza a informaçao do sistema operacional(Windows, Linux, Mac) e sim do prório sdk, o sdk fica perdido com o nosso horário de verão. Mas como saber que estou tendo problemas?

• Quando você mandar gravar uma data (23/01/2010)  essa data vai retroceder um dia (22/01/2010). Putz kara, é exatamente o que está me acontecendo, como eu resolvo isso?

simples um POG do bem..hehe quando você manda gravar uma data como fazemos aqui a data vai com o time (00:00:00), então quando chega no java o time volta, consequentemente um dia anteior com o time (22:00:00 ou as 23:00:00), então a forma mais rápida foi setar o time para 12:00:00 e por mais que o sdk volte o time ainda será o mesmo dia , então na nossa classe Util na função stringToDate ficará assim:

fica aí a dica, aguardem que vem novos artigos para este tutorial, como atualização de swiz e relatórios integrando JAVA + FEX + IREPORT, até a próxima e bons estudos.

Cumps.