Artigos - The · PDF fileO EntityDAC fornece uma poderosa estrutura que permite realizar o mapeamento de objeto-relacional de tabelas ... Também é us controle de

ORM é a sigla em inglês para Object-Relational Mapping, ou em português Mapeamento de Objeto-Relacional, quecomputação é definido como uma técnica de programação orientada a objetos para a conversão de tipos de dados enBasicamente a proposta cria um "banco de objetos virtuais" que podem ser manipulados pela aplicação através de suas p

Artigos http://theclub.com.br/restrito/revistas/201512/1512.aspx

1 de 28 23/12/2015 16:40

características relacionais, com avançados recursos de persistência e abstração, tudo isso de forma independente de banco

Você muito provavelmente escreve códigos em suas aplicações de forma semelhante ao mostrado a seguir:

Query1.close; Query1.Sql.Text := 'SELECT codigo, nome FROM cadastro WHERE codigo =:codigo’;Query1.ParamByName(çodigo').AsInteger := 10; Query1.Open; ShowMessage('O código é: '+ inttostr(Query1.FieldByName('codigo').AsInteger));

Dessa forma a lógica da sua aplicação está ligada diretamente ao código SQL implementado, no entanto, os recursoSQL-Structured Query Language podem variar e caso você deseje que uma mesma aplicação dê suporte a Oracle e MS-Spor exemplo, lidam de forma diferente com tratamento de datas.

Numa abordagem simplificada, a técnica de ORM propõe que você “empacote” suas tabelas em estruturas de clinguagem de programação, e então, ao invés de escrever instruções SQL para interagir com o banco de dados vocêmétodos e propriedades dos objetos instanciados a partir destas classes.

Veja a seguir como o código anterior poderia ser re-escrito de forma totalmente independente do banco de dados esc

var cadastro: TCadastro;... Cadastro := DemoContext.GetEntity(TCadastro, 10) as TCadastro;ShowMessage('O código é: ' + inttostr(Cadastro.codigo));

Você passa a ter foco unicamente na lógica e deixa sob a responsabilidade do ORM toda camada de comunicação cpossível retornar um único objeto, como mostrado no exemplo anterior, ou um lista de objetos com base em uma comostrado a seguir:

var Emps: IEntityEnumerable;...Emps := DemoContext.GetEntities(TEmp, 'codigo > 10');

Para que o código anterior seja possível é preciso contar com um framework de ORM, e dessa forma você poderá acódigo a camada de acesso e comunicação com o banco de dados. Com este tipo de abordagem, torna-se muito fácil fazeaplicação suporte diferentes bancos de dados, se o framework escolhido suportar por exemplo Oracle, MS-SQLServer e Iaplicação poderá trabalhar com qualquer um destes bancos sem que você precise alterar uma única linha de código da aplic

Ao aprender como mapear objetos para bancos de dados relacionais o lugar para se começar é com os atributos de classe, pois tipicamente um atributo será mapeado para zero ou mais colunas em um banco de dados relacional.

Importante ressaltar que nem todos os atributos são persistentes, alguns são usados apenas para cálculos temexemplo, um estudante pode ter um objeto com atributo “média“, necessário para sua aplicação, mas que não é salvo no bapois é calculado pela aplicação com base nas demais notas do mesmo, sendo estas notas outros atributos do mesmo objeto

Atributos de um objeto podem também ser implementados como Classes e também vir a ser instanciados comoexemplo, um objeto “Cliente” pode ter entre seus atritutos um objeto “Endereço” que por sua vez terá diversos a“Logradouro“, “Cidade“ e “Cep“. Este exemplo demonstra claramente uma associação entre as duas classes, que necessidade de ser mapeadas em uma estrutura relacional quando persistidas no banco de dados.

Fica claro que para aproveitar ao máximo os recursos do ORM é imprescindível um bom conhecimento dos conceiaplicação prática de POO – Programação Orientada a Objetos. Herança, polimorfismo, Classe, Atributos, Instância, são toconceitos que precisam estar muito claros para você, e sugere-se revisa-los para um melhor aproveitamento deste artigo.

Existem diversas plataformas de ORM disponíveis para uso no Delphi. No momento de definir a plataforma que melsuas necessidades, alguns critérios importantes devem ser considerados:

Possibilidade de uso de herança, ser capaz de criar hierarquias entre as entidades, e fazer uso de polferramentas podem suportar uma variedade de combinações de tabelas e classes para permitir em ORIGINAL-mecanis

Suporte qualquer tipo de relacionamento (1-1, 1-n, n-n)Suporte a controle de transaçõesSuporte a “aggregates“, equivalente aos recursos SQL de SUM, AVG, MIN, MAX e COUNTSuporte a agrupamentos, equivalente aos recursos SQL de GROUP BYSuporte a Joins, equivalente aos recursos SQL de innerJoin e outterJoinSuporte a uma grande variedade de servidores de bancos de dadosSuporte a DataBinding. É possível linkar os objetos mapeados a estruturas visuais da tela de forma que m

objetos se reflitam em mudanças visuais na tela e vice-versa?O framework tem recursos de Cache e otimização de Queries? Suporte otimista e pessimista para tratamento de concorrência

Uma das opções de ORM mais completa em recursos e compatível com Delphi é o EntityDAC(www.devart.com/entitydac/). A proposta deste artigo é exemplificar o conceito de ORM e despertar os desenvolvedores pamaravilhoso de novas possibilidades, utilizando para isso o EntityDAC como forma de contextualização e exemplificação do


2 de 28 23/12/2015 16:40

uma forma prática e didática.

O estudo dos conceitos de ORM através da contextualização de um exemplo prático específico permite que o entendimento mais aprofundado dos recursos da tecnologia e possa em seguida generalizar o aprodizado para futuraoutras plataformas de ORM disponiveis no mercado ou até mesmo criar a sua própria plataforma, em Delphi ou em outras li

Sobre o EntityDAC

O EntityDAC fornece uma poderosa estrutura que permite realizar o mapeamento de objeto-relacional de tabelasdados para classes em Delphi com suporte total para encapsulamento, herança, polimorfismo e outros recursos de POO.

Compatível com Win32, Win64, MacOS, o EntityDAC além de robusto e completo é também bastante flexível,trabalhar com diferentes modelos de abordagem no densenvolvimento de aplicações com banco de dados, onde os mais com

Base de dados Primeiro - Uma base de dados é desenvolvida em primeiro lugar (ou já existia por algum motivoum modelo de dados e as classes de aplicação são gerados com base no banco de dados existente.

Modelo Primeiro - Um modelo de dados é criado em uma ferramenta de desenvolvimento de modelos, em segude dados e as classes do aplicativo são gerados por este modelo.

Código Primeiro - Neste caso, classes de aplicação são a fonte original e o banco de dados e o modelo são gedelas.

Entre outros recursos o pacote acompanha o Visual ORM Model Designer que permite a criação e edição visual dos mgeração automática de códigos fontes das classes de aplicação em Delphi.

Os componentes de acesso a dados padrões suportados são ADO, IBX, dBExpress e FireDAC, sendo possível ainda outros componentes de acesso de dados fornecidos pela própria Devart. O suporte ao recém lançado FireDAC comprometimento do fabricante com a manutenção constante da plataforma, que utiliza os componentes de acesso compatibilidade com os seguintes servidores de banco de dados:

Oracle 9 ou superiorSQL Server 2000 ou superiorMySQL 4.1 ou superiorFirebird 2 ou superiorPostgreSQL 8 ou superiorSQLite 3 ou superiorDB2 9.5 ou superior

O site o produto conta com uma versão completa e 100% funcional disponivel para download, fornecida na modalidadias, e compatível com o Delphi e C++ Builder desde a versão 2007 até a mais recente versão XE7. Após a instalaçãocomponentes serão disponibilizados:

Componentes Standard EntityDAC

TEntityConnectionPermite configurar e controlar conexões de diferentes servidores. Também é uscontrole de transação sobre sessões e para a realização de consultas SQL no bdados.

TEntityXMLModelRepresenta o meta-modelo em tempo de design. Usado para configurar os comdados EntityDAC, como TEntityTable e TEntityQuery.

TEntityContextGerencia as entidades. Usado para criar, atualizar e excluir entidades, recuperarmazenar entidades de/para o banco de dados, armazenando entidades usadapara uso futuro e destruindo entidades não utilizadas.

TEntityDataSetMantém os dados a partir de uma fonte arbitrária. Pode conter uma única entidlista de entidades. Pode ser usado em tempo de execução somente.

TEntityDataSourceFornece uma interface para conectar componentes data-aware em um formulácomponentes EntityDAC do tipo Dataset.

Professional EntityDAC Components

TEntityTablePermite recuperar e atualizar entidades do tipo single-meta sem escrever dLINQ.

TEntityQueryUsa instruções LINQ para recuperar entidades de tabelas de banco de dadoa um ou mais componentes de reconhecimento de dados através de um objTDataSource. Este componente fornece um mecanismo de atualização de d

Componentes Devart Data Providers

TUniDACDataProviderLink entre o DataProvider dos componentes Devart Universal Data Access eaplicação.

TODACDataProvider Link entre o DataProvider dos componentes Devart Oracle Data Access e a

TSDACDataProviderLink entre o DataProvider dos componentes Devart SQLServer Data Accessaplicação.


3 de 28 23/12/2015 16:40

TMyDACDataProvider Link entre o DataProvider dos componentes Devart MySQL Data Access e a

TIBDACDataProviderLink entre o DataProvider dos componentes Devart Interbase Data Access eaplicação.

TPgDACDataProviderLink entre o DataProvider dos componentes Devart PostgreSQL Data Accesaplicação.

TLiteDACDataProvider Link entre o DataProvider dos componentes Devart SQLite Data Access e a

Componentes Standard Data Providers

TADODataProvider Link entre o DataProvider do ADO e a aplicação.TDBXDataProvider Link entre o DataProvider do dbExpress e a aplicação.TIBXDataProvider Link entre o DataProvider do Interbase e a aplicação.TFireDACDataProvider Link entre o DataProvider do FireDAC e a aplicação.

O EntityDAC é um framework de ORM, logo ele é uma abstração da camada do banco de dados e o componente Tenpor si só não é um componente de conexão de acesso a banco de dados propriamente dito. Isso porque ele usa pacotedados para intermediar a comunicação com o banco e realiza este acesso interfaces uniformizadas para as operações no ba

Esta arquitetura, conforme mostrado na Figura 01, permite que a comunicação com os componentes DAC ou de ade dados como ADO, IBX, dBExpress, FireDAC e DevartDAC seja feita através de classes intermediárias chamadas DataProassim, é possível utilizar o EntityDAC com praticamente qualquer componente DAC de terceiros, a exemplo de ZEOS, FibPlbastando para isso implementar a classe de DataProvider adequada.

Figura 01: Arquitetura do framework de ORM do EntityDAC

Após instalar o pacote do EntityDAC executando o auto-instalador, execute o Delphi e adicione um componeTEntityConnection no seu Form ou Datamodule é possível dar duplo clique no componente e realizar as configurações de ado mesmo utilizando uma janela visual de configuração, conforme mostrado na Figura 02.


4 de 28 23/12/2015 16:40

Figura 02: Configuração do acesso ao banco no TEntityConnection

Alternativamente é possível realizar a configuração dos campos diretamente a partir do seu código, conforme exempseguir.

uses UnidacDataProvider;// ...var Connection: TEntityConnection;begin Connection := TEntityConnection.Create(nil); Connection.ProviderName := 'UniDAC'; Connection.Dialect := 'SQLite'; Connection.ConnectionString := 'DataBase=C:\demo.db3'; Connection.LoginPrompt := True; Connection.Connected := True;end;

Embora EntityDAC seja um framework ORM que portanto elimina a necessidade de acesso direto ao banco de dcasos em este tipo de acesso se faça necessário é ainda existem vários métodos para interação direta com o banco, classe TEntityConnection. Sendo assim é possível executar uma chamada tradicional de controle transacional conformseguir.

varConnection: TEntityConnection;begin// cria e inicializa a conexão com o banco// ...// inicia a transaçãoConnection.StartTransaction;try// ...// commit da transaçãoConnection.CommitTransaction;except// rollback da transação em caso de erroConnection.RollbackTransaction;end;end;

Ou seja, existem recursos avançados de abstração conforme veremos a seguir, no entanto todos os recursos tradiciojá estamos acostumados a trabalhar encontram-se mantidos e estão disponíveis para uso sempre que o desenvolvedor julga

Recursos de LINQ no EntityDAC

Como vimos, o uso de ORM ao desenvolver seus aplicativos deve não só acelerar o desenvolvimento da aplicaçãtambém unificar o código do aplicativo e fazer aplicações independentes das especificidades e sintaxe SQL do servidordados para o qual foi desenvolvido, permitindo o suporte a vários bancos de dados em sua aplicação, sem que seja neces


5 de 28 23/12/2015 16:40

ou adequações. O EntityDAC implementa um recurso chamado LINQ-Language Integrated Query como forma de prover umaconsulta independente.

Além da independência do uso de sintaxe SQL no código o LINQ também simplificar significativamente a criação econsultas e demais operações com o banco, uma vez que faz uso do motor da IDE, a medida que se digita o código oauto-completar permitem a visualização de nomes de classe, seus atributos e etc, e da mesma forma, a verificação consulta é realizada ainda na fase de compilação aplicação, facilitando em muito o processo de debug.

A seguir apresentamos alguns dos recursos disponibilizados pelo LINQ:

Cláusula FromA cláusula From é obrigatória e toda query LINQ inicia com uma cláusula From que indica a fonte dos dados a s

Conforme mostrado a seguir, é possível utilizar uma ou mais cláusulas From em cascata para combinar múltiplas fontes de caso as fontes são combinadas com lógica CROSS JOIN.

Linq.From(Emp)Linq.From(Emp).From(Dept)

Cláusula WhereA cláusula Where é opcional e define os filtros a serem aplicados ao realizar a busca de dados. Ao utiliza a cl

devemos inserir uma expressão lógica que define a condição do filtro a ser aplicado, conforme mostrado no exemplo a segu

Linq.From(Emp).Where(Emp['Sal'] > 1000)

Cláusula SelectA cláusula Select define os campos da que serão apresentados no resultado e caso nenhum argumento seja espe

serão listados. Segue exemplo de uso.

Linq.From(Emp).Select

Linq.From(Emp).Select(Emp['EName'])

Cláusulas OrderBy, OrderByDescending, ThenBy, ThenByDescendingAs cláusula de Order são opcionais e especificam a ordenação de apresentação dos resultados e podem ser u

cláusulas de From e Join ou após Where e GroupBy. Segue exemplo de uso.

Linq.From(Emp).OrderBy(Emp['DeptNo']).ThenBy([Emp['Sal'], Emp['Comm']])

Cláusula GroupByA cláusula de GroupBy é optional e agrupa os dados do resultado de acordo com uma condição pre-estabelecida. P

após cláusula From, Join ou Where. Segue exemplo de uso.

Linq.From(Emp).GroupBy(Emp['DeptNo'])

Cláusulas Join, LeftJoin, RightJoin, FullJoin, OnAs cláusulas de Join são opcionais e correlacionam dados de uma fonte com outra com base em um critério de c

elementos. Podem ser utilizadas após cláusulas From ou outro Join. Segue exemplo de uso.

Linq.From(Emp).Join(Dept)

Linq.From(Emp).Join(Dept).On(Emp['DeptNo'] = Dept['DeptNo'])


6 de 28 23/12/2015 16:40

Linq.From(Emp).LeftJoin(Dept).On(Emp['DeptNo'] = Dept['DeptNo'])

Os desenvolvedores já habituados com a construção de scripts SQL perceberão a semelhança dos conceitos apdevem manter em mente o fato de que agora eu escrevo códigos no Delphi e estes estão mapeados em classes que abstraeespecífica do banco, sendo assim, estamos fazendo a mesma coisa que um SQL faria, no entanto com suporte CodeCode-Insite e debug durante a compilação.

Criando sua primeira aplicação com o EntityDAC

Utilizaremos o EntityDAC para criar um modelo a partir de uma base de dados SQLite já existente e utilizaremosteste fornecido durante a instalação e disponivel no diretório "Documents\Devart\EntityDAC\Demos\EntityDemo\DB\SQLite

Execute o Entity Developer a partir do menu do EntityDAC criado no RAD Studio e em seguida para criar um novo moDeveloper clique em "File -> New Model".

O primeiro passo é no assistente de modelo de criação é escolher o tipo do modelo. Existem quatro tipos de modelosno EntityDAC, são eles:

Code-mapped entities: Neste caso, para cada entidade do banco de dados será gerada uma classe de "entdescendente TEntity totalmente gerenciado por um contexto de dados. Os metadados do modelo serão geradosseparada, como um conjunto de classes especiais "metadados", que são viculadas via código classes de entidade corr

Attribute-mapped entities: Para este tipo de modelo, as classes de entidade também serão geradas, mas metadados do modelo não são geradas. Em vez disso, as classes de entidade são marcadas com atributos esmetadados serão gerados automaticamente em tempo de execução usando esses atributos.

XML-mapped entities: Apenas as classes de entidade serão geradas. Os metadados modelo devem ser especum arquivo XML- Extensible Markup Language externo que pode ser gerado usando o Entity Developer ou criado manu

Attribute-mapped objects: Este tipo de modelo é semelhante ao modelo "Attribute-mapped entities", mas as clnão são descendentes de TEntity, mas sim de TObject.

Para este tutorial escolheremos a opção “Code-mapped entities” pois este talvez seja o modelo mais intuitivo e simSelecione a opção conforme mostrado na Figura 03 e atribua o nome do projeto para "Demo.odml" e pressione o botão "Cre

Figura 03: Criando novo modelo com opção “Code-mapped entities”

Em seguida, conforme mostrado na Figura 04, selecione a opção de “Database First” que indica que estaremomodelo de desenvolvimento baseado em um banco de dados já existente.


7 de 28 23/12/2015 16:40

Figura 04: Criando novo modelo com opção “Database first”

Em seguida é preciso configurar a comunicação com o banco de dados e para isso selecionaremos a opção de prodotConnect for SQLite" conforme mostrado na Figura 05.

Figura 05: Criando novo modelo com opção de provider “Devart dotConnect for SQLIte”

No próximo passo selecionamos a opção "Generate From Database" conforme mostrado na Figura 06, assim podeobjetos automaticamente ao modelo ao invés de cria-los manualmente no modelo de visualização de diagrama.


8 de 28 23/12/2015 16:40

Figura 06: Criando novo modelo com opção de provider “Devart dotConnect for SQLIte”

A lista de objetos será então apresentada e podemos selecionar quais serão incluídos no modelo, conforme mostr07.

Figura 07: Selecionando objetos que serão adicionados ao modeloAo gerar as classes, o Entity Developer define automaticamente nomes para as classes e suas propriedades, de


9 de 28 23/12/2015 16:40

nomes dos objetos no banco de dados. A próxima página do assistente permite a criação de regras para geração desteenquanto, deixe os valores de opção padrão inalterados conforme mostrado na Figura 08.

Figura 08: Criação de regras para geração de nomes de classes e suas propriedades

Defina a seguir os nomes para o nosso modelo e contexto de dados. Na próxima página do assistente, defina o nopara "DemoModel" e o nome do contexto de dados para "DemoContext" conforme mostrado na Figura 09.


10 de 28 23/12/2015 16:40

Figura 09: Definição de nomes para o modelo e contexto de dadosA próxima página permite escolher os objetos de banco de dados que serão adicionados à exibição de diagrama do

a opção "todas as entidades" selecionada conforme mostrado na Figura 10.

Figura 10: Seleção dos objetos de banco de dados que serão adicionados à exibição de diagrama

Na página de "Code Generation Templates" podemos configurar os nomes dos arquivos gerados, conforme mostrado


11 de 28 23/12/2015 16:40

O nome de cada Unit pode ser especificado na página do assistente. Por padrão, os nomes são: "Classes", " Meta"Mapping" e " Context", respectivamente

Figura 11: Configuração dos configurar os nomes dos arquivos a serem geradosDepois de terminar o assistente, o modelo será criado automaticamente pelo assitente com base nas infromaçõ

configuradas, e o diagrama do modelo será mostrado conforme mostrado na Figura 12.


12 de 28 23/12/2015 16:40

Figura 12: Diagrama visual do modelo do banco de dados criado automaticamente pelo assistente

O último passo é para gerar arquivos conforme mostrado na Figura 13. Para fazer isso, pressione o botão "Gerar tecla F7).

Figura 13: Geração dos arquivos com base no modelo

Os arquivos gerados serão colocados no diretório em que o projeto modelo foi salvo. Estes arquivos representamclasses que permitem a abstração no acesso aos dados do banco de dados.

Agora estamos prontos para passar para a próxima fase, a criação do aplicativo de teste.


13 de 28 23/12/2015 16:40

No RAD Studio, vamos criar um novo “VCL Forms Application”, e definir o nome do formulário principal para "DemAdicionar um novo DataModule na aplicação com o nome "DemoDataModule". Em seguida, adicione ao projeto as unitspreviamente gerados (DemoModel.Context.pas, DemoModel.Linq.pas, DemoModel.MetaData.pas, DemoModel.Classes.pprojeto como "DemoProject", nomeando os arquivos da Unit e datamodule como "DemoMainFormUnit" e "DemoDatrespectivamente.

Abra o DataModule e adicione componentes das classes TEntityConnection, TEntityXMLModel e TEntityContmostrado na Figura 14. Além disso, se você estiver usando UniDAC adicione um e TSQLiteUniProvider. Ou, se você eLiteDAC adicione um TlitedacEntityProvider.

Figura 14: Adicionando componentes ao Datamodule

Para ter acesso aos metadados do modelo em tempo de design, defina a propriedade FileName do componente TEnpara o arquivo *.Mapping.xml conforme mostrado na Figura 15.

Figura 15: Configurando o acesso aos metadados

Em seguida, selecione o componente TentityConnection e especifique o caminho para o banco de dados naConnectionString bem como defina outras propriedades conforme mostrado na Figura 16.

Figura 16: Configurando o acesso aos metadados

Por fim, configure as propriedades de contexto de dados conforme mostrado na Figura 17.

Figura 17: Configurando propriedades de contexto

Vamos agora configurar o formulário principal, a fim de exibir uma lista de entidades de banco de dado


14 de 28 23/12/2015 16:40

DemoDataModuleUnit na cláusula USES da Unit principal. Em seguida, abra o formulário principal, sob a forma de designer TEntityDataSet, TdataSource, Tbutton e TDBGrid. Defina os nomes dos componentes, como mostrado na Figura 18. Defina DataSource do componente TDBGrid para "MasterSource", e a propriedade DataSet do componente TDataSource para "Mas

Figura 18: Tela principal do aplicativo demo em design time

TEntityDataSet destina-se a armazenar uma lista de entidades arbitrária, assim, pode ser configurado em tempoapenas. Escreva o código a seguir no manipulador de eventos do Button1.OnClick. Além disso, afim de declarar a variávelILinqQueryable, adicione as Units EntityDAC.Enumerable e EntityDAC.Linq na cláusula USES conforme mostrado a seguir.

implementation{$R *.dfm}uses EntityDAC.Enumerable, EntityDAC.Linq;procedure TDemoMainForm.Button1Click(Sender: TObject);var Depts: ILinqQueryable;begin Depts := Linq.From(DemoDataModule.EntityContext1['Dept']).Select; MasterDataSet.SourceCollection := DemoDataModule.EntityContext1.GetEntities(Depts); MasterDataSet.Open;end;

No código inicializams a variável Depts com o resultado da consulta LINQ que retorna a lista de todas as entidade"Dept", em seguida, definimos Depts como a coleção de origem para MasterDataSet.

Agora podemos compilar a aplicação para ter certeza de que tudo é feito corretamente. Execute o aplicativo, e pres"Open". A lista de registros do banco será apresentada no grid conforme mostrado na Figura 19.

Figura 19: Tela principal do aplicativo demo em runtime

Perceba que nossa aplicação fará um filtro no banco de dados usando LINQ e não uma sintaxe SQL específica do Sassim para que possamos conectar com outro banco basta adicionar o provider do servidor desejado e sem nenhuma alteravocê poderá listadar dados a partir de qualquer servidor de banco de dados aceito pelo EntityDAC! Isso é desenvolvimentocom total independencia do banco de dados!


15 de 28 23/12/2015 16:40

Sobre o Autor

Victory Fernandes - @victoryjorge Embarcadero MVP– Brazil Diretor técnico da TKS Software www.tkssEngenheiro Eletricista e MSc. em Medicina Contatos através do site www.tkssoftware.com/victory

E-mail: [email protected]

Recapitulando

Se você tem acompanhado a nossa série sobre o Polymer já viu que ele é uma biblioteca mantidapelo Google para desenvolvimento de Web Components, que são nada mais que tags HTML personalizadas.Uma das principais vantagens dos Web Components é a reutilização, e partindo dessa premissa, hoje nósiremos aprender a utilizar componentes desenvolvidos por terceiros.

A biblioteca oficial

O Google, juntamente com a comunidade de desenvolvedores do Polymer decidiram implementaralguns componentes que são comuns e juntá-los em uma biblioteca oficial. Vale lembrar que ela foidisponibilizada a partir da versão 1.0 e está sempre aumentando.Até a data deste artigo a comunidade separou os componentes oficiais em algumas categorias:

Iron elements: pacote de utilitários incluindo elementos de interface gráfica (ícones, inputs ecomponentes de layout) e elementos que não possuem interface gráfica, como AJAX e componentesde armazenamento.

Paper elements: conjunto de elementos que implementam o guia de estilo do Material Design(padrão gráfico utilizados no Android 5.0+).

Gold elements: conjunto de elementos com formulários utilizados em lojas virtuais.Platinum elements: conjunto de elementos com características de aplicativos para

smartphones, como as notificações “puxe para atualizar”, armazenamento off-line e bluetooth.

Instalando os elementos

Os elementos podem ser baixados de duas formas, através do Bower ou baixando o arquivo ZIP.Assim como temos feito, iremos utilizar o Bower para fazer o download de nossos componentes. Se vocêpreferir baixar os arquivos manualmente você pode encontrar os arquivos acessando o catálogo decomponentes disponível no seguinte endereço: https://elements.polymer-project.org/.

Você pode instalar um elemento de cada vez, ou instala toda uma coleção de elementos.Neste artigo nós iremos iniciar um novo projeto, para isso devemos abrir o console na pasta que

iremos armazenar nosso projeto e dizer ao Bower que desejamos criar um novo projeto digitando ocomando bower init. O Bower irá fazer uma série de perguntas e criar o arquivo bower.json com a estruturasemelhante ao exemplo abaixo:

bower init? name Capitulo 3? description Exemplo do Capitulo 3? main file index.html? what types of modules does this package expose?? keywords polymer? authors Ricardo Crivelli <[email protected]>? license MIT? homepage? set currently installed components as dependencies? Yes? would you like to mark this package as private which prevents it from beingaccidentally published to the registry? Yescidentally published to the registry? (y/N) Y{ name: 'Capitulo 3', authors: [ 'Ricardo Crivelli <[email protected]>'


16 de 28 23/12/2015 16:40

], description: 'Exemplo do Capitulo 3', main: 'index.html', moduleType: [], keywords: [ 'polymer' ], license: 'MIT', homepage: '', private: true, ignore: [ '**/.*', 'node_modules', 'bower_components', 'test', 'tests' ]}

? Looks good? Yes

O segundo passo será instalarmos o Polymer:

bower install --save Polymer/polymer

Em nosso artigo nos iremos utilizar os elementos contidos no Paper elements, para tanto iremosinstalar toda a biblioteca através do seguinte comando:

bower install –-save PolymerElements/paper-elements

Este comando irá instalar toda a biblioteca e suas dependências, portanto este processo pode levarum tempo dependendo de sua conexão com a internet.

Dica importante: ao inserir o argunto --save para o comando bower install você adiciona o item àlista de dependências de seu projeto no arquivo bower.json, assim quando você executar o comando bowerupdate em outra máquina o bower irá fazer o download para você automaticamente.

Dando continuidade ao nosso exemplo, o próximo passo será utilizar o paper-header-panel e opaper-toolbar. Eles são os responsáveis por exibir um cabeçalho ao nosso site. Nosso arquivo index.htmldeverá ficar mais ou menos assim:

<!DOCTYPE html>

<html>

<head>

<title>The Club - Capítulo 3</title> <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">

<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html"> </head>

<body class="fullbleed layout vertical">

<paper-header-panel class="flex">

<paper-toolbar>


17 de 28 23/12/2015 16:40

<div>The Club</div>

</paper-toolbar>

</paper-header-panel>

</body>

</html>

Se você executar o arquivo você verá que ele já possui um cabeçalho muito semelhante aosencontrados nos aplicativos mais novos no Android. A figura 1 mostra como é a aparência da nossa páginaaté agora. Um ponto muito importante e que não deve ser levado em conta neste momento são os atributosclass encontrados no elementos pois eles são uma parte mais avançada do Polymer que será tratada napróxima parte.

Figura 1 – O paper-header-panel em ação.

Outro elemento muito comum é o paper-card, responsável por agrupar o conteúdo da página e opaper-button que substitui a tradicional tag button. Sua implementação é maios ou menos como o exemploa seguir e o resultado pode ser visto na figura 2.

<!DOCTYPE html>

<html>

<head>

<title>The Club - Capítulo 3</title> <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html"> <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html"> <link rel="import" href="bower_components/paper-card/paper-card.html"> <link rel="import" href="bower_components/paper-button/paper-button.html"> </head>

<body class="fullbleed layout vertical">


18 de 28 23/12/2015 16:40

<paper-header-panel class="flex">

<paper-toolbar>

<div>The Club</div>

</paper-toolbar>

</paper-header-panel> <br /> <paper-card heading="Título do cartão" elevation="3"> <div class="card-content">Conteúdo do cartão.</div> <div class="card-actions"> <paper-button>Botão Exemplo</paper-button> </div> </paper-card>

</body>

</html>

Fácil não? Uma sugestão é que você acesse o catálogo de elementos, principalmente os paper-elements e implementá-los para que você pegue o jeito de como usar componentes de terceiros e iraprendendo a ler a documentação do Polymer.

Outras bibliotecas

A biblioteca oficial do Polymer não é o único repositório com Web Components. Existem vários sitesem que você pode baixar componentes e até mesmo enviar os que você criar. Uma dica importante é quenem sempre os componentes serão feitos com o auxílio do Polymer, pois como vimos na primeira parte oPolymer é apenas uma biblioteca que auxilia na criação de componentes, e ele não impede que você usecomponentes criado sem o auxilio da biblioteca.

Os principais sites que com elementos são o Custom Elements (http://customelements.io),Component Kitchen (http://component.kitchen) e o Built With Polymer que contém somente elementoscriados com o Polymer, o acesso pode ser feito através do endereço http://builtwithpolymer.org.

Figura 2 – Página com o paper-card e paper-button.


19 de 28 23/12/2015 16:40

Conclusão

No artigo de hoje conseguimos ter uma boa visão de como podemos utilizar os componentesdesenvolvidos por terceiros, os principais sites com componentes para baixar e recapitulamos como iniciarum projeto com o Bower e o Polymer.

Bom por hoje é só, espero que tenham gostado e até a próxima!

Sobre o autor

Ricardo Barbosa Crivelli, mais conhecido como Rico, é formado como Bacharel em Sistemas deInformação e Licenciado em Computação pela Universidade Estadual do Norte do Paraná, atualmente éTécnico em TI no Instituto Federal de São Paulo – Câmpus Avaré. Tem como especialidade a linguagem PHPe o framework Symfony, apesar de adorar trabalhar com front-end e desenvolvimento mobile e possuir ascertificações COBiT 4.1 Foundation e Delphi 2006 Developer.

E-mail para contato: [email protected]

Sobre o Autor

Ricardo Barbosa Crivelli mais conhecido como Rico, é formado como Bacharel emSistemas de Informação e Licenciado em Computação pela Universidade Estadual do Nortedo Paraná, atualmente é Técnico em TI no Instituto Federal de São Paulo – CâmpusAvaré. Tem como especialidade a linguagem PHP e o framework Symfony, apesar deadorar trabalhar com front-end e desenvolvimento mobile e possuir as certificações COBiT4.1 Foundation e Delphi 2006 Developer.


Introdução

O AngularJS é oficialmente descrito como uma tecnologia que roda no lado do cliente (client-side)escrita totalmente em JavaScript e que trabalha com tecnologias bem estabelecidas a longa data comoHTML, CSS e JavaScript, para tornar o desenvolvimento de aplicações web mais fácil e rápido.Os objetivos principais do framework são criar aplicações web que rodem em uma única página e tornar odesenvolvimento interativo e moderno, aumentando o nível de abstração entre o desenvolvedor e as tarefasmais rotineiras do desenvolvimento de aplicações web.

O AngularJS cuida de características avançadas que se tornaram muito comum no desenvolvimentoweb, como:

Serviços AJAXInjeção de DependênciaTestesSepara a lógica, modelos e as views

O Google foi seu criador e continua sendo até hoje o seu maior mantenedor juntamente com acomunidade de desenvolvimento. O seu código está licenciado sobre a licença MIT e pode ser encontradono Github.

Data Binding A maneira mais fácil de iniciar seu aprendizado é através de nosso Hello World. Para iniciar nossa

aplicação nós iremos criar estrutura mais básica para o funcionamento de uma aplicação desenvolvida como AngularJS e a Figura 1 mostrará seu resultado.

<!DOCTYPE html>

<html ng-app> <head>

<title>Hello World</title>


20 de 28 23/12/2015 16:40

<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script> </head>

<body>

<input ng-model="nome" type="text" placeholder="Seu nome"> <h1>Hello {{ nome }}</h1> </body></html>

Figura 1 - Resultado do nosso Hello World

O AngularJS, diferentemente de outros frameworks, trabalha com live views que atualizam a páginaem tempo real, já os frameworks tradicionais juntam os dados vindo do banco de dados com a view paracriar uma view estática. Essa funcionalidade é muito importante, pois é através dela que nós conseguimoscriar aplicações dinâmicas com poucas linhas e nada de JavaScript.

Os únicos requisitos para que sua aplicação funcione é você explicitar que sua aplicação rodará oAngularJS através do atributo ng-app na tag <html> e incluir o arquivo JavaScript contendo o framework.Se você alterar o valor do input verá que a mensagem irá mudar em tempo real e automaticamente.

Simple Data Binding

Ao revisarmos nosso código é possível ver que nós fizemos um bind da variável nome no inputatravés do atributo ng-model. Isso significa que não importa aonde o valor for colocado ele será alterado seo valor do input for alterado.

Em nosso exemplo do Hello World o nosso bind é o que é chamado de “bind de mão-única”, ou“one-way data binding”, pois o valor de nome é alterado somente quando alteramos o input.O bind de mão única é muito útil, mas nem sempre satisfaz nossas necessidades, e para isso nós temostambém o two-way data binding ou bind de mão-dupla, e nele o valor poderá ser alterado em mais de umlugar e seu valor refletirá em toda a página, confira um exemplo mais simples.

<!DOCTYPE html>


<title>Two Way Data Binding</title> <scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script> </head>

<body>


21 de 28 23/12/2015 16:40

<p>Hello {{ nome }}</p>

<input id="nome1" ng-model="nome" type="text" placeholder="Seu nome"> <input id="nome2" ng-model="nome" type="text" placeholder="Seu nome" value="{{nome }}"> </body></html>

Com este exemplo é possível ver que ao alterar o input nome1 o valor do input nome2 será alteradoe vice-versa.

Controles

Os controles podem ser definidos como um construtor em JavaScript que atribui valor iniciais ecomportamentos ao escopo da nossa aplicação.

Tipicamente ao criar uma aplicação nós precisamos definir valores iniciais ao nosso escopo para queeles estejam disponíveis para nossa view.

Para exemplificar vamos definir um valor para a variável nome em nosso exemplo anterior.

<!DOCTYPE html>


<title>Controller</title> <scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script> </head>

<body>

<div ng-controller="MeuController">

<p>Hello {{ nome }}</p> <input id="nome1" ng-model="nome" type="text" placeholder="Seu nome">

<input id="nome2" ng-model="nome" type="text" placeholder="Seu nome"value="{{ nome }}">

<button ng-click="helloJoao()">João</button>

<button ng-click="helloMaria()">Maria</button> </div> <script> function MeuController($scope) { $scope.nome = 'Rico'; $scope.helloJoao = function() { $scope.nome = 'João'; } $scope.helloMaria = function() {


22 de 28 23/12/2015 16:40

$scope.nome = 'Maria'; } }; </script> </body></html>

Melhores Práticas

Devido à natureza do JavaScript em si e como ele passa por valor e referencias, é considerar umaboa prática no AngularJS fazer o bind nas views pela referência de um atributo de um objeto ao invés defazer um bind ao objeto em si. Para exemplificar melhor vamos reescrever nosso exemplo anterior.

<!DOCTYPE html>


<title>Controller</title> <scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script> </head>

<body>

<div ng-controller="MeuController"> <p>Hello {{ pessoa.nome }}</p> <input id="nome1" ng-model="pessoa.nome" type="text" placeholder="Seu nome">

<input id="nome2" ng-model="pessoa.nome" type="text" placeholder="Seu nome"value="{{ pessoa.nome }}">

<button ng-click="helloJoao()">João</button>

<button ng-click="helloMaria()">Maria</button> </div> <script> function MeuController($scope) { $scope.pessoa = { nome: 'Rico'; }; $scope.helloJoao = function() { $scope.pessoa.nome = 'João'; }; $scope.helloMaria = function() { $scope.pessoa.nome = 'Maria'; };


23 de 28 23/12/2015 16:40

}; </script> </body></html>

Conclusão No artigo de hoje foi possível ter uma breve introdução sobre o que é e como é o funcionamento

básico do incrível framework JavaScript, o AngularJS.Poderoso e super simples, o framework possibilita a criação de aplicações web interativas de fácildesenvolvimento.

Sobre o Autor

Ricardo Barbosa Crivelli , mais conhecido como Rico, é formado como Bacharel emSistemas de Informação e Licenciado em Computação pela Universidade Estadual do Nortedo Paraná, atualmente é Técnico em TI no Instituto Federal de São Paulo – CâmpusAvaré. Tem como especialidade a linguagem PHP e o framework Symfony, apesar deadorar trabalhar com front-end e desenvolvimento mobile e possuir as certificações COBiT4.1 Foundation e Delphi 2006 Developer.


Caros leitores, neste artigo vou abordar um tema tão interessante, mas tão pouco explorado edisponível na internet – a persistência de um objeto descendente de TDataSet. Vamos descobrir facilidadestradicionais de banco de dados que será baseada em um objeto de TStream – muito prático paraportabilidade e manutenção, além de eficiente e fácil de se implementar e recuperar seus dados – trazendoassim a comodidade e eficiência para a sua utilização em um cenário vasto de possibilidades – imagine umaplicativo que entrega um arquivo de dados de forma robusta e sem limitação de tamanho – podendo abrireditavelmente em um controle tradicional Data-Aware da VCL, podendo ter a possibilidade de customizar asnecessidades do desenvolvedor devido ao código-fonte disponível do componente – ele é o nossoTHVDataSetStream.

A princípio, analisando a classe TDataSet ela pode assustar – não tem muita opção de aprendizadofácil – tente iniciar pela classe TBDEDataSet (DBTABLES.PAS) e verá que muita coisa poderia ter sidoexplicado antes, de uma outra maneira mais fácil, mas não é – não existe documentação além daquelaencontrada na classe TTextDataSet (TextData.pas) que já vem fornecida pelo Delphi.

Escrever um componente de persistência geralmente não é simples – envolve muita manipulação deponteiros, bookmarks, sobreescrita de diversas funções de manipulação de memória, funções internas deabrir (antes e depois) e fechar (antes e depois), funções de navegação de registros (obter o registro atual eo total de registros), funções de alocação de buffers, e muito mais – e isso não se acha comumente nainternet – existe muita pouca coisa para se encontrar neste sentido – e quase não agrada aos olhos em100% – pelo fato de não ser criterioso e abrangente e com a qualidade ao que se esperaria em um controlede grid, por exemplo. Por fim, exige que o desenvolvedor seja experiente com o funcionamento padrão daclasse TDataSet, conhecendo os métodos básicos essenciais necessários para a escrita de uma classeherdeira dela, e assim dando início a um novo mundo de desenvolvimento – a persistência de dados em umatabela própria!

Criar uma tabela tem suas vantagens – pode ser criada até em tempo de execução. Pode seresvaziada e editada a qualquer momento – e como no nosso caso é um descendente de TStream então ela épotencialmente “portável” para outras subclasses dela como a TMemoryStream, TFileStream e demais tiposde fluxo de dados suportadas por esta classe pai virtual. Nosso componente terá uma classe base e umadescendente, com métodos virtuais a serem sobreescritos para uma correta operação de manuseiotradicional de um banco de dados alternativo e muito “atraente” para uma aplicação.

Iniciando com o nosso THVDataSetStreamNosso componente realiza as funções básicas de um objeto de TDataSet comum, ou pelo menos ao

que deveria ser esperado – e isso não é tão comum de se encontrar – e por isso foi implementado para queum aplicativo pudesse realizar de forma bem transparente todas essas funcionalidades para o usuário,usando praticamente todos os métodos conhecidos de DBTables, mas nessa versão corrente não há suporte


24 de 28 23/12/2015 16:40

para sentenças SQL.O THVDataSetStream foi inicialmente baseado em dois componentes escritos por Marco Cantu (link:

http://www.marcocantu.com/code/md6htm/MdDataPack.htm#MdDsCustom.pas) que são o TMdCustomDataSet e o TMdDataSetStream. Este site foi o único encontrado em que se explica “de formaútil” a criação de dataset´s. E nele também é explicado muito bem como se desenvolve um objetodescendente de TDataSet baseado em TStream. Muito bem, mas falta muita coisa. Está faltando um métodopara remover e outro pra pesquisar. Além disso sua implementação requer arquivos ini de configuraçãopara os layouts das tabelas (colunas). Muito exposto para alguém modificar estes dados – e para criar umatabela nova, viu como é difícil? O componente quase “não deixa” você criar – vai dar erros e mais erros atéfinalmente criar – e se o usuário ou até mesmo o desenvolvedor quisesse um “wizard” contendo os nomesde atributos a serem selecionados, validação destes atributos como posição, tipo, tamanho eobrigatoriedade (required) – que são exigidos na criação de um objeto de TField – aí como faria? Todo bancode dados possui um aplicativo wizard desses! E porque no nosso não?

Comparativo entre os componentes TMdDataSetStream e THVDataSetStream:Legenda: 1. TMdDataSetStream é o componente disponibilizado na internet2. THVDataSetStream é o componente desenvolvido neste artigo por mim

Funcionalidade TMdDataSetStream THVDataSetStreamInserir X XEditar X XSalvar X XDeletar - X

Localizar - XCriar tabela se não existir - X

Limpar todos registros - XArmazenamento eficientedos atributos (layout) da

tabela

- X

Processamento de scriptspara geração de layouts

da tabela

- X

Wizar para auxiliar nageração do layout da

tabela

- X

Como pode notar, as únicas características disponibilizadas no componente freewareTMdDataSetStream são as funções implementadas de editar, inserir e salvar, além das padrões de abrir efechar. O que quero trazer é um componente baseado nele só que muito mais aprimorado – e com algumasalternativas interessantes no que diz respeito a persistência e processamento de layouts – uma classeprópria pra isso chamada TSettings, onde através de RTTI faremos serialização de dois atributos para umobjeto do tipo TStream para armazenar eles, que são o script do layout a ser lido toda vez que a tabela foraberta (a fim de que se saiba os campos e seus dados) e o recordcount, necessário para informar aoarquivo de dados quantos registros já foram armazenados nele, pois internamente o descendente deTDataSet precisa conhecer para ler e atualizar seus dados (através da sobreescrita do método virtualfunction InternalRecordCount: Integer; override;).

Segue abaixo um pequeno trecho do código-fonte, na declaração dos tipos e procedimentos(interface), onde esta classe será utilizada internamente pelo nosso THVDataSetStream.

unit SettingsU;

interface uses Classes; {$M+} type TCustomSettings = class public procedure LoadFromStream(const Stream: TStream); procedure LoadFromFile(const FileName: string); procedure SaveToStream(const Stream: TStream); procedure SaveToFile(const FileName: string); end;

TSettings = class(TCustomSettings) private FRecordCount: integer; FScript: string; published property RecordCount: Integer read FRecordCount write FRecordCount; property Script: string read FScript write FScript;


25 de 28 23/12/2015 16:40

end;

var Settings: TSettings;

implementation

uses TypInfo, Sysutils;

{ TSettings }

{ ... }


26 de 28 23/12/2015 16:40

Figuras 01, 02 , 03: Demonstração do programa que implementa um “wizard” – programa auxiliar para a orientação de geração de colunaspara o nosso banco de dados do THVDataSetStream.

Este nosso aplicativo de wizard é interessante, porque através dele especificamos quais as colunasque o nosso componente irá criar em tempo de execução. Claro que poderíamos pular toda esta parte ecolocar logo um arquivo ini pra ele ler as colunas e pronto – mas não é o que queremos – isso já estáimplementado pelo componente anterior encontrado na internet (TMdDataSetStream) e gostaríamos defazer, sinceramente, algo melhor e porque não mais profissional? Serializando estes dados é mais eficientee seguro (não tem como abrir em um bloco de notas e sair alterando ele, por exemplo) e também é de altonível sua codificação, por utilizar recursos avançados de RTTI, TStream e TDBGrid a fim de ilustrar passo apasso todos os campos a serem processados e gerados – note que este aplicativo contém uma lista demetadados para serem utilizados no processo deste layout de tabelas do nosso THVDataSetStream.

Basicamente, o que o nosso componente THVDataSetStream irá fazer é ler um arquivo-cabeçalho,que será este objeto de TStream gerado através da classe TSettings usada para sua serialização. Este éprimeiro passo para que a tabela seja carregada, mesmo que vazia, pois não tem como o componente abrirsem saber “o que” vai abrir – e sabendo os campos em que irá popular seus dados então fica o processomais transparente para esta inicialização dos dados – chamado sempre no método sobreescrito deTDataSet InternalInitFieldDefs.

Portanto, segue um resumo do funcionamento do componente THVDataSetStream:

Ler o arquivo de cabeçalho NOME_DA_TABELA + extensão “header” – exemplo:CLIENTES.header;

1.

O componente THVParser irá ler este arquivo e processar, chamando o métodoCreateTempDefinitionTable, criando os campos um a um, através da função AddFieldDef da classeTFieldDefs (DB.pas);

2.

O componente THVParser irá retornar informações necessárias exigidas pela procedureInternalInitFieldDefs (responsável pela definição dos campos) – que são o FRecordSize e oFFieldOffset. Também será retornado o FRecordCount no método sobreescrito InternalPreOpen;

3.

No objeto de THVDataSetStream, especificar o caminho completo do arquivo na propriedadeTableName (exemplo: “C:\Hamden\Softwares\BD\Demo_Table\ CLIENTES”);

4.

Mandar abrir ele, exemplo: na propriedade Active colocar “True” ou no fonte em“HVDataSetStream1.Open;”

5.

O componente irá abrir o arquivo. Se ele não existir, será criado automaticamente. Lembrandoque o arquivo é sempre sem extensão. O arquivo do cabeçalho é o nome dele mais a extensão“header”. Portanto, sempre será estes dois arquivos; nunca poderão estar em locais distintos.Exemplo: tabela CLIENTES -> serão dois arquivos -> CLIENTES.header e CLIENTES.

6.

ConclusãoEste é o fim da primeira parte sobre o funcionamento do componente THVDataSetStream;

inicialmente abordamos sua estrutura, funcionamento e também um aplicativo auxiliador de geração decolunas para criação das tabelas (wizard). Exploramos todos os requisitos iniciais para o processo defuncionamento deste componente, e no próximo artigo vamos ilustrar com detalhes o nosso componente naprática, exibindo seus dados através dos controles Data-Aware da VCL. Um bom estudo e até a próxima!


27 de 28 23/12/2015 16:40

Sobre o Autor

Hamden Vogel Consultor The Club.



28 de 28 23/12/2015 16:40