janeiro2014

janeiro2014

janeiro2014 03

20

Índice

Desafio The Club

30

Editorial

04

12

Autor: Hamden Vogel

05

Autor: Thiago Cavalheiro Montebugnoli

22Delphi XE5 - Primeiros Passos

Autor: Jeferson Silva de Lima

Autor: Luciano Pimenta

Android

TvisualPlanit - incrementado como base para turbinar um novo aplicativo – parte 2

ASP.NET MVC – Parte II

Preparando o ambiente de desenvolvimento para o Android 4.4 (KitKat)

janeiro201404

Delphi é marca registrada da Borland International, as demais marcas citadas são registradas

pelos seus respectivos proprietários.

Thiago Montebugnoli - Editor Chefethiago@theclub.com.br

Primeiramente gostaria de desejar um Feliz Ano Novo a você nobre leitor, que nossa parceria continue por este ano todo. Desejo também muita saúde, paz, alegria e muitos projetos. Para iniciar com chave de ouro, nosso consultor técnico Jeferson Silva de Lima, nos apresenta os primeiros passos do Delphi XE 5. Uma novidade desta ferramenta que não podemos deixar escapar é que nesta versão podemos desenvolver softwares para dispositivos móveis, tanto para a plataforma Android quanto para IOS, uma mão na roda para quem deseja aumentar seu leque de aprendizado. Hamden Vogel finaliza o artigo sobre o componente “TVisualPlanit”, sendo que nesta segunda parte ele coloca em prática todos os conceitos abor-dados no primeiro artigo. Já nosso colaborador Luciano Pimenta aborda a segunda parte do artigo sobre “Asp.Net MVC”, outro artigo recomendado para quem deseja aprender uma nova forma de desenvolvimento. Nesta segunda parte ele aprofunda suas técnicas fazendo o uso do banco de dados trabalhando com LINQ ou Entity Framework. Para finalizar, eu preparei um artigo que descreve as últimas novidades para trabalhar com o ambiente de desenvolvimento para o Android 4.4. Procurei explicar de uma maneira rápida e prática desde a instalação dos componentes até a configuração e o desenvolvimento de um pequeno aplicativo de exemplo, se destinando tanto ao leitor que desejar atualizar o ambiente de desenvolvimento quanto ao que está iniciando seu aprendizado.

Não deixem de conferir nossa seção de dicas e truques, sempre recheada das últimas novidades no mundo da programação.

Abraços

Av. Profº Celso Ferreira da Silva, 190 Jd. Europa - Avaré - SP - CEP 18.707-150

Informações e Suporte: (14) 3732-1529

Internethttp://www.theclub.com.br

Cadastro: cadastro@theclub.com.brSuporte: suporte@theclub.com.br Informações: info@theclub.com.brSkype Cadastro: theclub_cadastro

Skype Suporte: theclub_linha1 theclub_linha2 theclub_linha3

www.twitter.com/theclubbr

Copyright The Club 2013

Diretor TécnicoMarcos César Silva

DiagramaçãoVitor M. Rodrigues

DesignVitor M. Rodrigues

RevisãoDrielly Cristini Patrinhani

ColunistasHamden Vogel

Jeferson Silva de LimaLuciano Pimenta

Thiago Cavalheiro Montebugnoli

JuninhoJeferson Silva de Lima

Impressão e acabamento:GRIL - Gráfica e Editora

Taquarituba-SP - Tel. (14) 3762-1345

ReproduçãoA utilização, reprodução, apropriação, armazenamento em banco de dados, sob qualquer forma ou meio, de textos, fotos e outras criações intelectuais em cada publicação da revista “The Club Megazine” são terminantemente proibidos sem autorização escrita dos titulares dos direitos autorais.

Editorial

janeiro2014 05

Olá amigos do The Club, este artigo se direciona aos asso-ciados que desejam preparar o ambiente de trabalho do Android 4.4 utilizando o pacote “ADT Bundle for Windows” contendo a última versão do Eclipse, junto com seu kit de ferramentas SDK e o JDK com as ferramentas necessárias

para desenvolvimento de aplicações utilizando o Java. É importante ressaltar que possuímos um artigo do mês 11 de 2011 com o título “Primeiros passos com o Android”. Na época este artigo fez uma abordagem ampla destas ferramentas citadas anteriormente. Como a tecnologia está sempre criando novas versões e ferramentas a nossa equipe achou necessário criar um artigo específico para quem deseja usar os últimos recursos para programação An-droid. Surgiram também inúmeras dúvidas de nossos associados a respeito da instalação e configuração destas novas ferramentas, tais como: onde encontrá--la? Qual versão devo usar? Como instalá-la? Resumindo, este artigo irá se basear no nosso antigo artigo com todas as atualizações necessárias para um bom funcionamento. Ao decorrer do artigo gostaria de abordar algumas das principais características do Android 4.4 seguido da instalação e configuração dos softwares necessários para o bom funcionamento.

Principais características do Android 4.4

De acordo com minha pesquisa que realizei na internet em fóruns, blogs e sites específicos, pude reunir alguns dados importantes, como por exemplo:

1-) Menor uso de memória

- Processos do sistema consomem menos “heap”;- A memória do sistema foi agressivamente mais protegida contra aplica-

ções que consomem grandes quantidades de memória;- O “ActivityManager.isLowRamDevice()”permite que aplicações fiquem

atentas ao serem executadas em dispositivos com pouca quantidade de memó-ria, o que as permitem desativar algumas das funcionalidades que consomem grande quantidade de memória;

Android - Preparando o ambiente de desenvolvimento para o Android 4.4 (KitKat)

2-) Modo de Imersão

- Permite executar as aplicações usando a tela cheia, incluindo a área dos três botões (Back, Home e Menu) através dos uso das flags “View.SYTEM_UI_FLAG_IMMERSIVE” e “View.SYTEM_UI_FLAG_IMMERSIVE_STICKY”.

3-) Implementação de novos frameworks, tais como:

Fornecedor de SMS/MMS - padronização na API para todas as aplicações tratarem as mensagens SMS/MMS.

Impressão: Fornece suporte embutido, API e caixa de diálogo de impressão para encontrar, configurar e imprimir através do Wi-Fi, em uma impressora local ou impressão em nuvem, e permite a impressão de diversos tipos de documentos.

Armazenamento: Integra as instalações de armazenamento local ou ba-seadas na nuvem do usuário, e oferece uma maneira padronizada de acesso a documentos entre aplicativos e fornecedores de armazenagem. O fornecedor de armazenagem pode incluir um provedor de documentos em sua própria aplicação Android, sendo automaticamente integrado no framework quando a aplicação for instalada no dispositivo, disponibilizando o serviço para todas as aplicações.

Transições: Os desenvolvedores podem usar este novo framework para animar as transições entre várias cenas das suas interfaces de usuário, esco-lhendo a transição de um conjunto pré-definido de transições, ou criando as suas próprias animações.

Java SE 7u45 - JDK

Destacamos as alterações que impactam usuários finais para cada release do Java. De acordo com o site oficial http://www.java.com/pt_BR/download/faq/release_changes.xml, este último foi datado no mês de Outubro de 2013.

Abaixo algumas delas:

- Restaurar Prompts de Segurança: foi implementado um novo botão

janeiro201406

disponível no Painel de Controle do Java para remover decisões confiáveis lembradas anteriormente.

- Proteções contra Redistribuição Não Autorizada das Aplicações Java: A partir da versão 7u45, os desenvolvedores de aplicações podem especificar novos atributos de arquivo de Manifesto JAR que:

• forneçam um título seguro para a aplicação (Atributo Application--Name do Manifesto)

• identifiquem os locais dos quais o código JavaScript pode chamar métodos na aplicação (atributo Caller-Allowable-Codebase do Manifesto)

Um tópico importante que devemos lembrar é que a data de expiração para esta última versão é no mês de Fevereiro de 2014, sendo que após esta data o Java irá fornecer advertências e lembretes adicionais para atualizar para a versão mais recente.

Segue a seguir o link para realizar o download deste kit, Ver Figura 01.

http://www.oracle.com/technetwork/java/javase/downloads/index.html

Figura 01: Download do JDK.

Clique no item “Java Platform (JDK) 7u45” e na próxima tela clique em “Accept License Agreement” para aceitar os termos de licença e escolha a opção “Windows x86” – “jdk-7u45-windows-i586.exe” para sistemas 32 bits e “Windows x64” – “jdk-7u45-windows-x64.exe” para os de 64 bits. No meu caso utilizarei o de 32 bits. Ver Imagem 02.

Figura 02: Escolhendo a Opção de Download.

A instalação do JDK não possui segredos, basta executar o instalador e ir executando o clássico Next, Next, Next e Install. Por padrão o JDK será instalado no diretório “C:\Program Files\Java\jdk1.7.0_45”.

Ver Imagem 03.

Figura 03: Instalando o Java.

ADT Bundle for Windows (Android SDK e Eclipse)

Diferente do artigo anterior, o Android SDK fornece as bibliotecas da API e ferramentas de desenvolvimento necessárias para construir, testar e depu-rar aplicativos para o Android. Tudo já vem pré-configurado, uma novidade que facilita e muito a vida de nós programadores. Ele inclui os componentes essenciais do Android SDK e uma versão do Eclipse IDE com built-in ADT (An-droid Developer Tools) para agilizar o desenvolvimento de aplicativos Android.

Ou seja, com um único download, o pacote ADT inclui tudo que você precisa para começar a desenvolver aplicativos, sendo:

- Última versão do Eclipse + ADT Plugin;- Android SDK Tools;- Android Platform-tools;- A mais recente plataforma Android (Versão 4.4);- A imagem do sistema mais recente do Android para o emulador.

Para baixá-lo utilize o link (Ver Imagem 04)

http://developer.android.com/sdk/index.html

Figura 04: Download do ADT Bundle for Windows.

janeiro2014 07

Clique no botão “Download the SDK”. Na próxima tela terá a opção para escolher 32 ou 64 bits. No meu caso escolhi a primeira. O arquivo terá um tamanho de aproximadamente “500 Mb” no formato “.rar”. Ao descompactar o arquivo possuirá uma pasta com as seguintes sub-pastas:

Figura 05: Sub-pastas do pacote de instalação.

Eclipse: A pasta onde está localizada a última versão do Eclipse.Sdk: Todas as ferramentas necessárias para desenvolvimento utilizando

o Android.SDK Manager.exe: Aplicativo para instalação automática de pacotes de

outras versões do Android.(Por padrão estamos utilizando a versão 4.4)

Depois de muitos testes, chegamos à conclusão que a forma mais rápida e fácil para configurar o JDK para que trabalhe corretamente em conjunto com estas ferramentas seria copiando o diretório:

C:\Program Files\Java\jdk1.7.0_45\jre

Para dentro da pasta do eclipse:

C:\adt-bundle-windows-x86-20131030\eclipse

Na primeira execução da ferramenta Eclipse devemos receber uma tela idêntica ao da Imagem 06.

Figura 06: Definindo o “WorkSpace”.

Devemos definir o local padrão para armazenar os aplicativos desenvolvi-dos. Escolha a opção “Use this as the default and do not ask again” para que esta janela não apareça novamente ao iniciar.

Criando o Dispositivo Virtual

É importante relembrar que para criar e testar aplicações Android não é preciso ter em mãos um aparelho com o Android. Depois de termos efetuado

as configurações iniciais o passo seguinte é configurar o dispositivo Virtual. Um AVD (Android Virtual Device) é um conjunto de configurações usadas pelo Android Emulator. Ao criar um AVD nós podemos definir características de hardware e software que estão presentes no emulador. Para isto clique no ícone “Android Virtual Device manager”, conforme ilustra a Imagem 07.

Figura 07: Criando um AVD.

Na próxima tela, na primeira aba são listados todos os dispositivos virtuais existentes. Podemos conferir configurações como o nome, a plataforma, a API e o tipo de processador. Na aba “Device Definitions” temos a possibilidade de criar definições específicas de dispositivos, respeitando o tamanho da tela em polegadas, o tipo de resolução, presença ou não de sensores de proximidade, GPS, se possui ou não câmeras frontais ou traseiras, tipo de teclado, quantidade de Memória RAM entre outras configurações.

Para este artigo iremos utilizar dispositivos que já estão pré-configurados, para isto volte para a primeira aba e na região direita localize o botão “New” para configuração de um novo AVD. Ver Imagem 08.

Figura 08: Dispositivos Virtuais.

As configurações deverão seguir de acordo com a Tabela 01 a seguir.

Propriedade Valor DescriçãoAVD Name Android4.4 Nome do dispositivo

Device 4.0’’ WVGA (480 x 800: hdpi) Tipo do Dispositivo

Target Android 4.4 – API Level 19 Tipo de arquitetura

CPU/ABI ARM (armeabi-v7a) Processador

janeiro201408

Keyboard Hardware keyboard present Presença de teclado

Skin Display a skin with hardware controls

Estilo compatível com o Hardware

Front Câmera None Câmera frontal

Back Camera Nome Câmera Traseira

Memory Options Ram: 512, VM Heap: 32 Quantidade de Memó-ria RAM

Internal Storage 200 Mb Armazenamento In-terno

SD Card Valor vazio Presença de Cartão de Memória

Tabela 01: Valores da Máquina Virtual.

Ver Imagem 09 para maiores detalhes. Para concluir clique no botão “OK”.

Figura 09: Configurações de nossa Máquina Virtual.

Para iniciar clique no botão “Start” e na próxima tela deixaremos as opções de arranque como padrão. Normalmente quando emulamos uma máquina virtual o processo por padrão é um pouco lento, demandando muito do proces-

sador e do uso da memória RAM. É altamente recomendável possuir um Com-putador com uma configuração alta quando se trata de desenvolvimento para Android. Podemos conferir na Imagem 10 nossa máquina virtual funcionando.

Figura 10: Android 4.4.

Criando um Exemplo Prático

Clique no menu “File/New/Android Application Project” e teremos uma tela inicial com as seguintes configurações. Ver Tabela 02 e Imagem 11.

Propriedade Valor DescriçãoApplication Name ExemploAndroid4 Nome da Aplicação

Project name ExemploAndroid4 Nome do Projeto

Package Name com.example.exemplo-android4

Nome do Pacote

Minimum Required SDK API 19: Android 4.4 (KitKat)

Mínimo requerido

Target SDK API 19: Android 4.4 (KitKat)

Alvo

Compile With API 19: Android 4.4 (KitKat)

Compilar com

Theme Holo Light with Dark Action Bar

Tema padrão

Tabela 02: Configurações Iniciais.

janeiro2014 09

Listagem 01: Código da Atividade.

Figura 11: Configurações Iniciais no Projeto de Exemplo.

Na próxima tela iremos manter as configurações padrões, com as proprie-dades abaixo checadas, sendo:

“Create Custom Lancher icon” para criar um ícone de inicialização custo-mizado, “Create Activity” para criar a Atividade com os métodos padrões e a definição do local onde será armazenado o aplicativo. Clique em “Next” para as próximas configurações. Na próxima tela temos também a possibilidade de alterar os estilo de tela padrão, como cor de fundo, tipo de escala entre outros tipos de lay-outs. Fiquem a vontade para configurar do jeito que acharem melhor. Para finalizar esta etapa definimos algumas outras configurações de acordo com a tabela 03. (Ver Imagem 12)

Propriedade Valor DescriçãoActivity Name MainActivity Nome da Atividade

Layout Name Activity_main Nome do Layout

Navigation Type None Tipo de navegaçãoFigura 12: Configurações Finais.

Teremos o projeto localizado na região esquerda em “Package Explorer” com o título de “ExemploAndroid4”. Como é de costume, a Atividade Principal está situada no caminho “ExemploAndroid4/src/com.example.exemploan-droid4/MainActivity.java”. Dê um duplo clique nesta classe e por padrão teremos o código conforme a listagem 01,

package com.example.exemploandroid4;

import android.os.Bundle;import android.app.Activity;import android.view.Menu;

public class MainActivity extends Activity {

@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); }

@Override public boolean onCreateOptionsMenu(Menu menu) {// Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; }}

Podemos observar que foi implementado automaticamente dois métodos, o primeiro estamos acostumados, o “OnCreate()” já o segundo, o “OnCreate-OptionsMenu” é um método sobrescrito que já vem pronto para ser imple-mentado, sendo responsável por Inflar o menu, o que adiciona itens para a barra de ação se ela estiver presente. Abrindo o arquivo de Lay-out situado na árvore “ExemploAndroid4/res/layout/activity_main.xml” poderemos observar diversas novidades na paleta de componentes, específicos da plataforma da versão 4 em diante. Ver Figura 13.

Figura 13: Palheta de Componentes.

Podemos conferir nesta versão um estilo muito mais elegante e organizado em minha opinião. Por exemplo, o padrão do Layout principal de nossa tela vem configurado como “relativeLayout” (Possibilita uma melhor flexibilidade e movimentação dos componentes na tela).

Outra facilidade que percebi (isto pelo fato do eclipse estar em uma

janeiro201410

Listagem 01: Código da Atividade.

versão bem atualizada) é que na região direita inferior temos as “Properties” (Propriedades) dos componentes, facilitando no desenvolvimento. Continu-ando o exemplo, iremos colocar alguns componentes na tela, Ver Tabela 04.

Palheta ComponenteForms Widgets Textview

Text Fields Autocomplete

Time & Date Digital Clock

Other TextClockTabela 04: Componentes.

Abaixo o código XML correspondente:

<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android” xmlns:tools=”http://schemas.android.com/tools” android:layout_width=”match_parent” android:layout_height=”match_parent” android:paddingBottom=”@dimen/activity_vertical_margin” android:paddingLeft=”@dimen/activity_horizontal_margin” android:paddingRight=”@dimen/activity_horizontal_margin” android:paddingTop=”@dimen/activity_vertical_margin” tools:context=”.MainActivity” >

<TextView android:id=”@+id/textView1” android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”@string/hello_world” />

<AutoCompleteTextView android:id=”@+id/autoCompleteTextView1” android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_

alignParentLeft=”true” android:layout_below=”@+id/textView1” android:layout_marginTop=”16dp” android:ems=”10” android:text=”AutoCompleteTextView” >

<requestFocus /> </AutoCompleteTextView>

<requestFocus android:layout_alignRight=”@+id/autoCompleteTextView1” android:layout_below=”@+id/autoCompleteTextView1” android:layout_marginRight=”36dp” android:layout_marginTop=”16dp” />

<DigitalClock android:id=”@+id/digitalClock1” android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_alignLeft=”@+id/autoCompleteTextView1” android:layout_below=”@+id/autoCompleteTextView1” android:layout_marginTop=”31dp” android:text=”DigitalClock” />

<TextClock android:id=”@+id/textClock1” android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_alignLeft=”@+id/digitalClock1” android:layout_below=”@+id/digitalClock1” android:layout_marginTop=”28dp” android:text=”TextClock” />

janeiro2014 11

</RelativeLayout>

Agora sim podemos compilar e executar o exemplo pelo item menu “Run/Run” ou pela tecla de atalho. O resultado será idêntico ao da Imagem 14.

Figura 14: Exemplo em “Run-Time”.

Como instalar outras versões do Android?

Dentro do pacote de instalação “ADT Bundle for Windows” temos um aplicativo para instalação automática de pacotes de outras versões do Android, chamado “SDK Manager”, como foi dito no início do artigo. Vamos supor que o desenvolvedor precise desenvolver um aplicativo para celulares ou tablets mais antigos com a versão 2.2? Fazendo o uso deste aplicativo podemos resolver facilmente este problema. Para isto, dê um duplo clique para carregar uma tela idêntica ao da Figura 15.

Figura 15: SDK Manager.

Podemos observar que temos todas as versões do Android disponíveis para download e instalação. Para ficar mais claro, cada nível da API identifica a revisão da estrutura de uma versão da plataforma Android, no caso da Versão 2.2 estamos fazendo o uso da API 8. No site oficial podemos consultar todas as informações referentes às versões já lançadas.

http://developer.android.com/guide/topics/manifest/uses-sdk-element.html

Ao checar o item Android 2.2 (API 8), habilitará os sub-itens: “SDK Platform” (a Plataforma em si), “Samples for SDK” (Exemplos prontos desta plataforma) e “Google APIs” (Plataforma específica para trabalhar com o Google). Basta clicar em “Install package...” e esperar alguns minutos para concluir este processo.

Conclusões

Procurei neste artigo explicar todas as etapas para preparar o ambiente de trabalho para a versão mais atualizada do Android até esta presente data (Versão 4.4 KitKat). Trabalhamos com a versão 7.45 do Java SE e configuramos o conjunto de ferramentas “ADT Bundle for Windows”, o que facilitou e muito a vida de nós programadores. Aproveitei também para criar um Dispositivo Virtual (AVD) totalmente compatível com o Android 4.4 seguido de um exemplo de utilização. Outra dica importante que achei necessário salientar é a instala-ção e configuração de outras versões da plataforma Android.

Espero que tenham gostado deste artigo, e ressalto que estamos abertos a novas sugestões para artigos futuros.

Um forte abraço e até o mês que vem!

Referencias

http://developer.android.com/

thiago@theclub.com.br

Thiago Cavalheiro Montebugnoliadora aprender novas tecnologias. Formado pela Faculdade de Tecnologia de Botucatu

– SP (FATEC), já desenvolveu softwares utilizando a plataforma .NET, Delphi junto com Banco de Dados SQL Server e Firebird. Atualmente trabalha no Centro de Processamento de Dados da Prefeitura Municipal de Itaí-SP é colunista mensal da Revista The Club Megazine e é consultor Técnico do The Club. Possui as seguintes certificações: MCP - Microsoft Certified Professional, MCTS - Microsoft Certified Technology Specialist, MCAD - Microsoft Certified Application Developer e MCSD - Microsoft Certified Solution Developer.

Sobre o autor

janeiro201412

Vimos na primeira parte desse artigo, uma base de como é a tecnologia ASP.NET MVC. Fizemos um comparativo com o Web Forms e iniciamos alguns exemplos. Nesse artigo, vamos nos aprofundar, trabalhando com banco de dados.

No ASP.NET MVC podemos trabalhar com LINQ e Entity framework. Pode-mos criar um banco do “zero”, utilizando nossos modelos (classes) ou podemos fazer engenharia reversa com um banco existente.

Entity Framework Power Tools

Fazer engenharia reversa (criar classes baseadas nos objetos do banco), não é algo simples. Imagine seu banco de dados com 50 tabelas, Stored Pro-cedures e Functions? Seria muito trabalhoso fazer isso manualmente (criar classe por classe). Por isso, temos uma ferramenta que auxilia nessa tarefa e em muitos outros trabalhos, o Entity Framework Power Tools.

Acesse o link: http://visualstudiogallery.msdn.microsoft.com/72a60b14-1581-4b9b-89f2-846072eff19d. Até o fechamento dessa edição, a ferramenta estava na versão Beta 4. As versões suportadas pelo Visual Studio são 2013, 2012 e 2010. Veja na Figura 1 o menu.

Figura 1. Menu do Entity Framework Power Tools

A ferramenta vai gerar todas as classes referente as tabelas do banco,

ASP.NET MVC – Parte II

assim como uma classe de contexto. Se você já usa o EF e tem um modelo (arquivo EDMX), é possível “transformar” esse modelo em classes (Code First).

Clique com o botão direito sobre o projeto e escolha o menu Entity Framework>Reverse Engineer Code First.

Será aberto o editor de configuração e conexão com o banco de dados. Coloque os parâmetros necessários para conectar ao banco de dados que deseja. A ferramenta cria as classes na pasta Models, como também a classe de contexto (Figura 2).

Figura 2. Exemplo de geração de classes usando engenharia reversa

janeiro2014 13

Listagem 1. Classe Pessoa

Listagem 2. Classe contexto

Criando o banco de dados

Nesse exemplo, vamos criar uma aplicação do zero. Crie uma nova aplica-ção ASP.NET MVC e na pasta Models crie uma classe chamada “Pessoa”. Veja na Listagem 1 o código da classe Pessoa.

namespace EntityFirst.Models{ public class Pessoa { [Key] public int nCdPessoa { get; set; } public string sNmPessoa { get; set; } public DateTime tDtNascimento { get; set; } public double nVlLimite { get; set; } }}

Classe bem simples. Temos que atentar, para a marcação do campo nCdPessoa. O campo é a chave, então, precisamos indicar a responsabilidade da mesma, para que o EF saiba como gerenciar esse modelo.

Vamos criar agora o contexto da aplicação. O contexto é o responsável por gerenciar os objetos e dados da aplicação, ele que faz o controle de alterações, preenche os objetos com dados e faz a persistência no banco.

Veja na Listagem 2 o contexto da nossa aplicação.

using System.Data.Entity;...

namespace EntityFirst.Models{ public class ContextDB: DbContext { public DbSet<Pessoa> Pessoas { get; set; } }}

Veja que herdamos de DbContext. A partir de agora, toda classe criada dentro de Models, precisa ser referenciada na classe ContextDB, para que possamos interagir com a mesma usando o contexto.

Scaffolding

Scaffolding é uma técnica para geração de templates automáticos, baseado

em um modelo. No artigo anterior, desenvolvemos manualmente as Views de exemplos, inclusive do cadastro, bem como implementamos as Actions no Controller.

Mas você sabia que o Visual Studio pode criar tudo isso para você? Vamos criar um novo Controller e atente para o editor (Figura 3).

Figura 3. Editor de criação do Controller

Veja as opções no item Template. No exemplo anterior, escolhíamos a opção Empty MVC controller, ou seja, um controller vazio. Agora, escolha a segunda opção, que indica que vamos usar Entity Framework.

Em Data Context class, escolha a classe do contexto. Em Model class, escolha a classe Pessoa. Clique em Add.

Nota: caso a classe do contexto não apareça no item Data Context class, dê um build na aplicação e refaça o passo a passo.

Veja que foi criado o controller, assim como uma pasta Pessoa em View e alguns arquivos para o cadastro da pessoa (Figura 4).

Figura 4. Cadastro usando template do Visual Studio

janeiro201414

Listagem 3. Código do arquivo Index.cshtml

Abra a classe PessoaController e note que todos os métodos são criados, assim como todas as páginas para um CRUD. Se precisarmos adaptar, basta mexer onde necessário. Execute a aplicação e faça um teste.

Nota: crie um controller chamado “Home” para direcionar ao cadastro ou altere o arquivo RouteConfig.cs para chamar o controller Pessoa no lugar de Home (padrão).

Cadastre, navegue e exclua registros (Figura 5).

Figura 5. Opções de cadastros criados pelo template

Se fecharmos a aplicação e rodarmos novamente, os dados continuam lá. Mas como, você pode se perguntar. Simples, o Entity Framework notou que não tínhamos uma base de dados, ele criou uma .

Na segunda execução da aplicação, a base de dados existe, portanto, ele não precisou criar. Abra o arquivo Web.config e veja a string de conexão criada:

<add name=”DefaultConnection” connectionString=”Data Source=(LocalDb)\v11.0;Initial Catalog=aspnet-EntityFirst-20131125201039;Integrated Security=SSPI;AttachDBFilename=|DataDirectory|\aspnet-EntityFirst-20131125201039.mdf” providerName=”System.Data.SqlClient” />

Abra o Management Studio e localize o banco de dados criado (Figura 6).

Figura 6. Banco de dados criado pelo Entity Framework

Como funciona?

Vamos entender como o Visual Studio criou as páginas, controller e actions. O arquivo Index.cshtml é o arquivo principal do cadastro de Pessoa. É nele que iniciamos, pois tem a lista com as pessoas cadastradas, assim como podemos editar, remover e adicionar novos registros.

Veja na Listagem 3 o código.

<h2>Index</h2>

<p> @Html.ActionLink(“Create New”, “Create”)</p><table> <tr> <th> @Html.DisplayNameFor(model => model.sNmPessoa) </th> <th> @Html.DisplayNameFor(model => model.tDtNascimento) </th> <th> @Html.DisplayNameFor(model => model.nVlLimite) </th> <th></th> </tr>

@foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.sNmPessoa) </td> <td> @Html.DisplayFor(modelItem => item.tDtNascimento) </td> <td> @Html.DisplayFor(modelItem => item.nVlLimite) </td> <td> @Html.ActionLink(“Edit”, “Edit”, new { id=item.nCdPessoa }) |

janeiro2014 15

Listagem 4. Código do Edit do PessoaController

Listagem 5. Código do Edit para atualizar os registros

Listagem 6. Adaptando o método Index para pesquisar

@Html.ActionLink(“Details”, “Details”, new { id=item.nCdPessoa }) | @Html.ActionLink(“Delete”, “Delete”, new { id=item.nCdPessoa }) </td> </tr>}

</table>

O código é semelhante a Lista.cshtml, mostrada no artigo anterior. Gostaria que atentasse na parte final do código, onde temos três ActionLink. Um para edição, outro para visualizar o cadastro e o terceiro para excluir.

Note que no link, estamos passando um parâmetro, o código da Pessoa. Agora, veja na Listagem 4 o código do Edit no controller.

public ActionResult Edit(int id = 0){ Pessoa pessoa = db.Pessoas.Find(id); if (pessoa == null) { return HttpNotFound(); } return View(pessoa);}

O código, recebe como parâmetro o código da pessoa, que visualizamos na ActionLink da Listagem 3. Assim, pesquisamos o objeto e retornamos para a View. Se não for encontrado, um erro será executado.

Temos outro método Edit no controller, mas esse se refere ao ato de editar (atualizar) o registro selecionado. Por isso, ele tem a marcação de ser um Http-Post e recebe como parâmetro um objeto Pessoa. Veja o código na Listagem 5.

[HttpPost][ValidateAntiForgeryToken]public ActionResult Edit(Pessoa pessoa){ if (ModelState.IsValid) { db.Entry(pessoa).State = EntityState.Modified;

db.SaveChanges(); return RedirectToAction(“Index”); } return View(pessoa);}

Verificamos se os dados são válidos e atualizamos o mesmo usando o Entity Framework. Após, redirecionamos para a lista, usando RedirectionToAction.

Os métodos Delete são bastante semelhantes ao Edit, um apenas busca os dados para mostrar e solicitar a confirmação do usuário, enquanto o outro, efetiva a exclusão do objeto no banco. Os métodos Create, também não tem nada de diferente do que vimos.

Se fossemos criar nossos cadastros, sem a ajuda de scaffolding, poderíamos usar a mesma lógica e modificar o que for necessário, mas acredito que não mude muito do que foi visto.

Nota: deixo como dica a pesquisa a fundo dos arquivos CSHTML para ver como foi criado o cadastro, links etc.

Pesquisa

Estamos acostumados a usar filtragem de dados (pesquisa) para que o usuário da aplicação possa achar o registro que precisa. Vamos adaptar a lista, para que possamos realizar uma pesquisa pelo nome da pessoa.

Vamos modificar o método Index que retorna todos os registros de Pessoa do banco. Veja na Listagem 6 como deverá ficar o código (se quiser, comente o código atual e coloque esse novo).

public ActionResult Index(string nome){ var pessoas = db.Pessoas.ToList();

if (!string.IsNullOrEmpty(nome)) { pessoas = pessoas.Where(p => p.sNmPessoa.ToUpper().Contains(nome.ToUpper())).ToList(); } return View(pessoas);}

janeiro201416

Listagem 7. Modificando a View para a pesquisa

Listagem 8. Código do arquivo _Layout.cshtml

Listagem 9. Mudando o layout

Adicionamos um parâmetro ao método do valor digitado pelo usuário. Primeiramente, continuamos selecionando todos os registros de Pessoa. A seguir, verificamos se o parâmetro não é nulo ou vazio para que possamos pesquisar pelo nome da pessoa, usando o valor do parâmetro.

Por fim, chamamos a View passando a lista de pessoas, que foi filtrada ou não. Agora, precisamos modificar Index.cshtml. Veja na Listagem 7¸ o código da modificação, que deve ser colocado abaixo do link que remete ao cadastro (Create new).

<p> @using (Html.BeginForm()) { <p> Descrição: @Html.TextBox(“nome”) <input type=”submit” value=”Pesquisar” /> </p> } </p>

Colocamos um bloco BeginForm para podermos pegar a ação do botão. A seguir, temos um rótulo e uma caixa de texto. O parâmetro do TextFor é o nome, e esse nome tem que ser igual ao nome do parâmetro que colocamos no método. Lembre-se disso. Após, adicionamos um botão que fará a pesquisa.

Execute a aplicação e acesse a lista de registros. Veja a caixa de texto e o botão de pesquisa. Faça uma pesquisa para testar (Figura 7).

Figura 7. Pesquisando registros na lista

Caso deseje aumentar a caixa de texto, um dos parâmetros do TextFor, chamasse htmlAttributes. Nele, podemos adicionar código CSS. Veja no código a seguir, como ficaria a caixa de texto com largura de 350px.

@Html.TextBox(“nome”, “”, new { style = “width:350px” })

O segundo parâmetro é o valor do TextFor, assim, quando quisermos que

apareça um valor default, basta preencher o mesmo.

Layout

Você deve estar se perguntando se as aplicações ASP.NET MVC serão feias como os exemplos mostrados até aqui. Claro que não, use a sua imaginação, afinal você tem o controle total sobre o HTML gerado. É sua responsabilidade, usar CSS, HTML 5, jQuery UI, enfim tudo que for possível para melhorar a aparência da sua aplicação.

Em Web Forms, temos as Master Pages para reutilizarmos o layout sem precisar refazer em todas as páginas ASPX. No ASP.NET MVC temos algo pa-recido. O arquivo _Layout.cshtml, presente na pasta View>Shared possui o layout padrão da aplicação.

Veja na Listagem 8 o código da página.

<!DOCTYPE html><html><head> <meta charset=”utf-8” /> <meta name=”viewport” content=”width=device-width” /> <title>@ViewBag.Title</title> @Styles.Render(“~/Content/css”) @Scripts.Render(“~/bundles/modernizr”)</head><body> @RenderBody()

@Scripts.Render(“~/bundles/jquery”) @RenderSection(“scripts”, required: false)</body></html>

No inicio, temos o título, usando o ViewBag. Renderizamos arquivos CSS e temos a seção body. RenderBody é onde as páginas que usam esse layout serão renderizadas. Assim, podemos trabalhar com um layout com menu, botões de navegação, rodapé que todas as páginas terão o visual colocado aqui.

Faça um teste, adicione o código da Listagem 9.

...<body> <header> <h1>Cabeçalho</h1>

janeiro2014 17

Listagem 10. Configurando o calendário

Listagem 11. Customizando o calendário

</header>

@RenderBody()

<footer> <h1>Rodapé</h1> </footer>...

Adicionamos um cabeçalho e rodapé que será mostrado em todas as páginas da nossa aplicação. Rode e faça o teste. Use a imaginação para colocar um menu no header, botões de navegação, informações no rodapé, enfim, crie e invente (ou chame um designer que faça isso ).

jQuery UI

jQuery UI é uma biblioteca para ajudar a criação de interfaces ricas. Nesse exemplo, veremos como adicionar um DatePicker para o campo Nascimento no cadastro. Precisamos atualizar o jQuery UI para uma versão mais atual do calendário. Acesse o menu Tools>Library Package Manager>Manage Nuget Package for Solution. Lembre-se, vamos atualizar apenas a nossa solução.

Caso tenha outros projetos e deseja fazer a mesma funcionalidade, terá que atualizar cada solução. Acesse o item Online>nuget.org e digite “jQuery UI datepicker” (Figura 8).

Figura 8. Atualizando o jQuery UI da Solution.

Clique em Install.

Nota: caso a versão do projeto seja a mais atualizada, uma mensa-gem indicando que não ouve atualização será mostrada.

Agora, precisamos modificar o campo tDtNascimento para que seja do tipo TextBoxFor e na seção Scripts do Create.cshtml modificar como na Listagem 10.

@section Scripts {

@Scripts.Render(“~/bundles/jqueryval”) @Scripts.Render(“~/bundles/jqueryui”) @Styles.Render(“~/Content/themes/base/css”)

<script> $(function () { $(“#tDtNascimento”).datepicker(); }); </script>}

Execute a aplicação e veja o calendário quando posicionamos o mouse no campo (Figura 9).

Figura 9. Calendário no cadastro de pessoa.

Podemos customizar o método datepicker de várias maneiras, inclusive traduzindo para o português as informações mostradas. Veja na Listagem 11 alguns parâmetros do datepicker.

$(“#tDtNascimento”).datepicker({ dateFormat: ‘dd/mm/yy’, dayNames: [‘Domingo’,’Segunda’,’Terça’,’Quarta’,’Quinta’,’S

janeiro201418

Listagem 12. Chamando uma janela popup

exta’,’Sábado’], dayNamesMin: [‘D’,’S’,’T’,’Q’,’Q’,’S’,’S’,’D’], dayNamesShort: [‘Dom’,’Seg’,’Ter’,’Qua’,’Qui’,’Sex’,’Sáb’,’Dom’], monthNames: [‘Janeiro’,’Fevereiro’,’Março’,’Abril’,’Maio’,’Junho’,’Julho’,’Agosto’,’Setembro’,’Outubro’,’Novembro’,’Dezembro’], monthNamesShort: [‘Jan’,’Fev’,’Mar’,’Abr’,’Mai’,’Jun’,’Jul’,’Ago’,’Set’,’Out’,’Nov’,’Dez’], nextText: ‘Próximo’, prevText: ‘Anterior’, closeText: ‘Fechar’, currentText: ‘Hoje’});

Rode a aplicação e veja as modificações (algumas aparecem apenas de acordo com o tema usado na aplicação).

Popup

Janelas popups são muito utilizadas em aplicações Web. Seja para mostrar uma mensagem ou até mesmo ser usada como cadastro. Podemos usar o jQuery UI para criar janelas simples, modal e com animações.

No primeiro exemplo, basta colocar um div onde se deseja criar o popup e configurar o botão que vai chamar a janela. Veja no código da Listagem 12 o exemplo.

<div id=”dialog” title=”Popup simples”> <p>Texto que será mostrado no popup.</p></div>

<button id=”opener”>Popup</button>

<script> $(“#opener”).click(function () { $(“#dialog”).dialog(“open”);

});

$(function () { $(“#dialog”).dialog({ autoOpen: false }); });</script>

Nota: não esqueça de adicionar os scripts e estilos para o jQuery UI, semelhante ao mostrado no exemplo do datepicker, da Listagem 10.

Criamos um código para que ao clicar no botão seja chamado o popup, mostrando o texto colocado na div. Dentro do método dialog temos parâmetros de configuração e nesse exemplo, indicamos que o popup não será aberto automaticamente.

Veja a aplicação com janela de popup na Figura 10.

Figura 10. Janela de popup

Lembrando que você pode adicionar controles, rótulos, enfim o que quiser dentro do div que “representa” a janela popup. Mas se tivemos links, botões na página que chamou o popup e o usuário quiser clicar e isso quebra regras da aplicação?

Para que isso não ocorra, precisamos usar a opção modal no popup, assim, somente o que estiver no popup pode ser clicado. Para que nossa janela seja modal, basta adicionar o seguinte código dentro do método dialog:

modal: true

Simples. Faça um teste, execute a aplicação, chame o popup e tente clicar em algum link ou botão que esteja na página chamada.

janeiro2014 19

Nota: Veja na página do jQuery UI (http://jqueryui.com/dialog) como colocar um efeito na abertura da janela popup.

Conclusões

Vimos neste artigo como trabalhar com o Entity Framework em aplicações ASP.NET MVC. Deixamos o Visual Studio, usando templates, criar as views e actions. Entendemos como funciona esses métodos para que possamos customizá-los.

Ainda conhecemos um pouco do jQuery UI, uma biblioteca poderosa para que possamos enriquecer nossas aplicações Web. Existem bibliotecas de terceiros, algumas free, que também ajudam e muito no desenvolvimento de aplicações ASP.NET MVC.

Para fins de aprendizado, fica um desafio: adaptar o cadastro de pessoa para que use um popup. Será que seus conhecidos já são suficientes? Um grande abraço a todos e até a próxima!

www.lucianopimenta.net

Luciano PimentaLuciano Pimenta (NOVO DOMINIO: www.lucianopimenta.com) é desenvolvedor Delphi/C#

para aplicações Web com ASP.NET, Windows com Win32 e Windows Forms com .NET. Palestrante da 4ª edição da Borland Conference (BorCon) e da 1ª Delphi Conference.

É MVP Embarcadero, grupo de profissionais que ajudam a divulgar o Delphi no mundo. Atualmente é desenvolvedor da SoftDesign fábrica de softwares em Porto Alegre-RS.

Autor de mais de 90 artigos e de mais de 600 vídeos aulas publicadas em revistas e sites especializados, além de treinamentos presenciais e multimídias. É consultor da FP2 Tecnologia (www.fp2.com.br) onde ministra cursos de programação e banco de dados.

Sobre o autor

janeiro201420

E pra fechar com chave de ouro: validando nossa Aplicação através de uma senha criptografada no Registro do Windows, e o nosso módulo de consultas.

Um aspecto interessante no desenvolvimento de aplicações é como ela pode ser validada e registrada pelo usuário mediante uma chave. Existem várias formas de fazer isso, e a cada dia surgem novas formas de validação de aplicações. Para essa nossa aplicação, uma nova forma também foi criada. E é uma técnica também interessante, apesar de simples. Que tal armazenar uma senha criptografada no registro do Windows do usuário, mantendo a aplicação em modo trial (evaluação ou demonstração) ? No nosso “plano de validação da aplicação” ela terá dois minutos de funcionamento, sendo contados esses dois minutos através de um contador regressivo: se o usuário não informar a senha correta (e não adianta “fuçar” o registro do Windows, ele pode até achar a pasta onde está armazenada a chave, mas ela estará criptografada, e o programa não vai aceitar) a aplicação será fechada. Moral da história: o usuário terá que toda vez carregar o programa de dois em dois minutos, ou então entra com a senha correta e nunca mais acontece isso.

Para nosso exemplo, a senha será “senomar” (é Ramones ao contrário, a melhor banda que já existiu na minha opinião ). Essa senha ficará guardada em uma pasta chamada proAgendusPwd no registro do Windows, de acordo com a figura abaixo:

Figura 12 - Procedimento para armazenar a senha da aplicação no registro do Windows.

T v i s u a l P l a n i t incrementado como base para turbinar um novo aplicativo – parte 2

Figura 13 - Senha criptograda no registro do Windows.

Figura 14 - Aplicação em modo trial.

Figura 15 - Informando a senha

Figura 16 - Entrando com um senha diferente do esperado (no nosso caso, com

janeiro2014 21

uma senha diferente de “senomar”.

Figura 17 - Aplicação validada, no caso do usuário ter entrado com a senha correta (no nosso caso, a “senomar”).

Módulo de Consultas da Aplicação

Nossa aplicação terá um eficiente módulo para consultas, pesquisando muitas informações desejadas e interessantes para o gerenciamento eficaz da mesma, como pesquisa por pacientes, tipo de pesquisa e período (inclusive os pacientes marcados e/ou desmarcados em um dado período). São retornados valores monetários de acordo com o valor do plano de saúde multiplicado com a quantidade de sessões frequentadas pelo paciente do plano. Todo o processo de filtro é realizado via TClientDataSet para nossa melhor performance. Um aspecto interessante deste componente é de poder criar campos agregados (com base em índice para melhor performance) para fazer cálculos. No nosso caso foi criado um campo agregado chamado Total, que tem a finalidade de fazer o somatório do campo do tipo float chamado Valor, preenchendo na pro-priedade Expression o valor SUM(VALOR). E melhor ainda, podemos fazer com essa informação de total seja informada no final da nossa consulta, exibindo sempre no final, assim como um rodapé. Para isso basta colocar o comando “if gblast in clAuxConsulta.GetGroupState(1) then” e preenchê-lo, tratando a informação para personalizá-la em nossas consultas, através do evento do seu evento OnGetText, de acordo com a figura abaixo:

Figura 18 - Escrevendo no Evento GetText para personalizar a informação de somatório de atendimentos por um período informado.

A opção de consultas no módulo de agendamentos é acessível clicando na checkbox “painel de consultas”, onde são mostradas todas as opções de filtro citadas acima, e conforme pode se ver também na figura logo abaixo:

Figura 19 - Habilitando o módulo de consultas.

Figura 20 - Relatório com gráfico, gerado através da pesquisa de relatórios.

Conclusão

Acredito que existem várias formas de se implementar uma solução em Delphi através principalmente da imensa variedade dos componentes disponíveis na VCL e no mercado profissional, e também acredito na cada vez maior comunidade opensource de pacotes de componentes para Delphi, que vem crescendo sempre mais, e com idéias interessantes, como por exemplo o tema principal deste artigo, o poderoso pacote de componentes TVisualPlanit para atender a uma gama de aplicações que necessitem gravar informações de consultas de pacientes, muito útil e sempre muito demandado no mercado de aplicações. Quem nunca precisou fazer algo parecido ou soube de alguém que precisava de um sistema de agendamento, seja de clínica médica, hospitalar, dentária, psicológica, etc?

Acredito que com esses componentes todo o trabalho pesado para a exibi-ção detalhada de desenhos de datas e horas semelhantes ao estilo MsOutlook foi facilitado, uma vez que constitui uma poderosa arquitetura de desenvolvi-mento com uma interface agradável aos olhos do usuário.

E soluções criativas e atraentes nunca são demais, gerando um melhor fee-dback na percepção do cliente em termos de custo e satisfação, produzindo-se assim, melhores resultados em todo o ciclo de vida da aplicação não somente na área de desenvolvimento como também no gerenciamento de sistemas.

suporte@theclub.com.br

Hamden VogelAnalista de Sistemas pós-graduado em Engenharia de Software pela

UPIS e Programador Delphi com larga experiência desde 2000, tem de-senvolvido e vendido softwares em Delphi para a África e Estados Unidos, além do mercado nacional. Colaborou com dicas e componentes para sites especializados em Delphi. Também desenvolve em outras linguagens como C/C++, ASP, PHP e .NET.

Sobre o autor

janeiro201422

A Embarcadero lançou recentemente a versão XE5 do Delphi e a grande novidade é o suporte para o desenvolvimento em Android. A utilização do Firemonkey sempre teve o foco em desenvolver em plataformas além do Windows, ou seja, com o Firemonkey Mobile teremos a possibilidade em

desenvolver diretamente para dispositivos Android.

Iniciando

No primeiro contato que tivemos com a ferramenta sentimos algumas mudanças significativas em relação aos componentes que já estamos acostu-mados a trabalhar, no entanto, nada que não possa ser ajustado.

Neste artigo iremos focar no primeiro contato com a ferramenta, portanto após realizar a instalação execute o aplicativo que vem junto com a ferramenta, o ‘Android Tools’.

• Android Tools:

Imagem 1 – Android Tools.

Ao executar o aplicativo o ‘SDK Manager’ será exibido, escolha a versão do seu dispositivo Android e instale. Independente da versão escolhida o emulador será habilitado. Na imagem abaixo fiz a instalação para a versão 4.2.2, mas veja a versão que vem em seu dispositivo.

Imagem 2 – SDK Manager.

Delphi XE5Primeiros Passos

Após realizar a instalação do ‘SDK Platform’ o emulador será exibido em seu Delphi no ‘Project Manager’ conforme imagem 3.

Imagem 3 – Project Manager.

Para utilizar seu dispositivo para depuração é necessário conectar o aparelho na máquina por um cabo USB, nas configurações do aparelho será necessário ativar a opção ‘Depuração USB’ e instalar os drivers do dispositivo corretamente, no site da Embarcadero tem alguns tutorias para identificação do seu aparelho. Segue abaixo:

Ativando a depuração USB em um dispositivo Android:http://docwiki.embarcadero.com/RADStudio/XE5/en/Enabling_USB_De-

bugging_on_an_Android_Device

janeiro2014 23

Instalação do driver USB para o seu dispositivo Android:http://docwiki.embarcadero.com/RADStudio/XE5/en/Installing_the_USB_

Driver_for_Your_Android_Device

Configurando seu sistema para detectar o seu dispositivo Android:http://docwiki.embarcadero.com/RADStudio/XE5/en/Configuring_Your_

System_to_Detect_Your_Android_Device

Ao inserir um dispositivo Android em sua máquina e realizar a instalação dos Drivers corretamente ele será exibido em ‘Project Manager’ juntamente com o Emulador para a compilação.

Para testar sua primeira aplicação crie um novo projeto em:

• File / New / Firemonkey Mobile Application – Delphi

Coloque em seu formulário uma ‘Label’ e altere a propriedade ‘Text’ para ‘Olá Mundo!’, selecione o dispositivo no qual deseja depurar em ‘Target’ e compile a aplicação.

Imagem 4 – Formulário Firemonkey Mobile.

Neste caso vamos demonstrar a compilação utilizando o emulador ‘rsxe5_android’ que foi instalado anteriormente, o emulador pode ser iniciado de 2 formas, ao compilar a aplicação o que neste caso irá exibir uma janela de confirmação conforme imagem 5, ou também pode ser iniciado manual-mente na pasta:

C:\Users\Public\Documents\RAD Studio\12.0\PlatformSDKs\adt-bundle--windows-x86 20130522\sdk\tools\emulator.exe

Caminho pode alterar dependendo do local da instalação.

Imagem 5 – Confirmação.

Após confirmar, o emulador será iniciado para exibir sua aplicação, con-forme imagem 6.

Imagem 6 – Emulador rsxe5_android.

Nesta primeira parte vimos os primeiros passos para desenvolver uma aplicação Firemonkey Mobile, portanto, podemos iniciar a criação de uma aplicação mais funcional que irá auxiliar em futuros projetos.

DataSnap com Firemonkey Mobile – Android

Em Delphi quando necessitamos desenvolver uma aplicação Cliente/Servidor criamos um aplicativo que irá acessar nossa base de dados através de uma máquina cliente, porém neste cliente são necessários alguns arquivos para que essa comunicação ocorra normalmente, como por exemplo, as DLLs.

Quando trabalhamos com dispositivos Android o uso de DLLs acaba não sendo possível, por conta da incompatibilidade com a plataforma.

Para resolver este empecilho é necessário a utilização do componente DataSnap que irá criar a ponte entre a base de dados e o cliente, ou seja, nossos dispositivos móveis.

Criando a Aplicação – Server

Inicialmente vamos criar nosso servidor de dados que será a camada entre

janeiro201424

o banco e o cliente. No Delphi vá em:

• File / New / Other / Delphi Projects / DataSnap Server / DataSnap Server.

Após clicar em ’OK’ vamos iniciar a configuração de nosso Servidor.

• Na primeira etapa selecione ‘VCL Forms Application’ nosso servidor será feito em VLC, apenas nosso cliente será em Firemonkey Mobile;

• Na segunda opção vamos definir ‘TCP/IP’ para a comunicação com nossa base de dados e marque também ‘Sever Methods Class’.

Imagem 7 – Etapa 1 e 2.

• Defina a porta que irá utilizar na etapa 3, vamos utilizar a porta padrão 211, teste a conexão e avance para o próximo passo.

• Na ultima etapa defina TDServerModule e conclua a configuração.

Imagem 8 – Etapa 3 e 4.

Ao concluir as configurações serão criados 3 ‘Units’ em sua aplicação, elas que irão conter os métodos de comunicação de seu servidor.

Antes de prosseguirmos salve o projeto e nomeie os arquivos da seguinte forma:

• Unit1.pas = DataSnapServer.pas;• ServerMethodsUnit1.pas = ServerMethods.pas;• ServerContainerUnit1.pas = ServerContainer.pas;• Project1.dproj = Server.dproj;• Nomeie o formulário como ‘Servidor’.

Imagem 9 – Projeto Servidor.

Altere no ‘ServerContainer’ o nome da ‘Unit’ ‘ServerMethodsUnit1’ para o nome que está em seu servidor de métodos, ou seja, para ‘ServerMethods’.

Imagem 10 – ServerContainer.

Antes de prosseguirmos salve seu projeto em um grupo, assim nossa aplicação Cliente será criada dentro da mesma estrutura, vamos nomear de ‘ProjectDataSnap.groupproj’.

Imagem 11 – Save Project Group.

janeiro2014 25

Vá na Unit ‘ServerMethods’ e adicione o componente ‘SQLConnection’ em seu formulário e o nomeie de Conexão. Para selecionar nossa conexão vamos em ‘Data Explorer’ e escolha a base de dados que será utilizada (No exemplo vamos utilizar o Firebird).

Imagem 12 – Data Explorer.

Imagem 13 – Configurações da Conexão.

Após a configuração coloque a Conexão criada em seu ‘SQLConnection’ na propriedade ‘ConnectionName’, neste exemplo o nome de nossa conexão será ‘TESTE’.

Imagem 14 – SQLConnection.

Altere também a propriedade ‘Name’ do ‘ServerMethods’ para ‘DSServer-Methods’ e após isso vamos prosseguir com as configurações.

Adicione juntamente com o ‘Conexao’ os seguintes componentes:

- SQLDataSet:

• Na propriedade ‘SQLConnection’ indique o ‘Conexao’;• Mude o ‘Name’ para ‘SDSClientes’;• No ‘CommandType’ vamos utilizar ‘ctTable’;• No ‘CommandText’ coloque ‘CLIENTES’;• Na propriedade ‘Active’ indique ‘True’.

- DataSetProvider:

• Na propriedade ‘DataSet’ coloque o ‘SDSClientes’;• Altere o Name para ‘DSPClientes’;

Para finalizarmos a configuração de nosso servidor, vamos na ‘Unit’ ‘Ser-verContainer’ e no procedimento ‘DSServerClass1GetClass’ insira o nome de seu ‘ServerMethods’ conforma Imagem abaixo:

Imagem 15 – GetClass.

Compile sua aplicação.

Criando a Aplicação – Client

Com nosso servidor rodando já podemos ir para nossa aplicação ‘Client’, para isso vá em ‘Project Manager’ e adicione um novo projeto, conforme imagem abaixo:

janeiro201426

Listagem 1 – ApplyUpdates.

Imagem 16 – Adicionar novo Projeto.

Selecione o item correspondente a aplicações Mobile (Firemonkey Mobile Application) conforme imagem 17 e logo após selecione o tipo da aplicação, neste exemplo vamos utilizar ‘Blank Application’.

Imagem 17 – Nova aplicação.

Salve a aplicação e nomeie a ‘Unit1’ para ‘DataSnapClient’ e o ‘Project1’ para ‘Client’.

Feito isso vamos configurar a conexão de nosso cliente ao servidor, para isso adicione um ‘SQLConnection’ em seu formulário e o nomeio de Conexao. Defina o driver como ‘DataSnap’, clique no ‘+’ para expandir as opções do

driver e altere o ‘HostName’ para o IP de seu servidor, deixe como ‘False’ a propriedade ‘LoginPrompt’ e teste a conexão.

(Para realizar este teste deixe a aplicação ‘Server’ rodando).

Imagem 18 – SQLConnection.

Agora adicione o componente ‘DSProviderConnection1’ e mude a pro-priedade ‘SQLConnection’ para ‘Conexao’ e ‘ServerClassName’ para ‘TDSSer-verMethods’ conforme definimos anteriormente no ‘ServerContainer‘. Com o provedor configurado vamos adicionar um ‘ClientDataSet’ para manipularmos os nossos dados, nomeie-o de ‘cdsClientes’ e na propriedade ‘RemoteSer-ver’ coloque ‘DSProviderConnection1’. Ainda no ‘cdsClientes’ coloque em ‘ProviderName’ o ‘DataSetProvider’ referente ao nosso servidor, ou seja, o ‘DSPClientes’. Com as propriedades configuradas deixe ‘Active’ como ‘True’ e veja se os campos foram carregados corretamente.

Veja a Imagem 19

Nos eventos do ‘cdsClientes’ vamos adicionar 2 comandos para aplicar as modificações em nossa base de dados. Nos eventos ‘AfterPost’ e ‘AfterDelete’ adicione o comando:

cdsClientes.ApplyUpdates(0);

janeiro2014 27

Imagem 19 – cdsClientes.

Para finalizar vamos adicionar o componente ‘TStringGrid’ que exibirá nossos dados. A conexão entre componente e dados deve ser feita através do ‘LiveBindings‘, portanto clique com o botão direito sobre o StringGrid e selecione ‘Bind Visually...’, uma janela será exibida com os componentes exis-tentes em seu formulário, portanto, para realizar a exibição de todos os dados selecione o asterisco (*) que se encontra no ‘ClientDataSet’ e arraste para o ‘StringGrid’, feito isto 2 componentes serão adicionados ao seu formulário (‘BindSourceDB1’,‘BindingsList1’).

Com a conexão feita já podemos realizar a manipulação dos dados, clique com o botão direito no ‘BindSourceDB1’ e selecione a opção ‘Add Navigator’, feito isto execute a aplicação.

Conclusão

O primeiro contanto com essa nova plataforma de desenvolvimento acaba gerando dúvida e incertezas de como as aplicações serão daqui pra frente.

Neste artigo procuramos demonstrar os primeiros passos para aqueles que desejam experimentar a ferramenta e testar algumas de suas funcionalidades. Portanto, este exemplo pode ser melhorado e implementado da forma que desejar, servirá como base para futuros projetos.

Espero que tenham gostado e até a próxima.

suporte@theclub.com.br

Jeferson Silva de LimaConsultor The Club.

Sobre o autor

janeiro201428

Listagem 1

dicas the club

Nesta seção de dicas irei auxiliá-los com algumas dicas e macetes quando trabalhamos com LINQ TO ENTITIES.

1) Construindo a cláusula WHERE dinâmica

Para este exemplo teremos como base uma tabela simples de Cadastro. A condição será implementada em 3 Comboboxes, Sexo, Cor e Grau. Para testes, inclua no Formulário estes componentes seguindo de 1 Botão e 1 Datagridview. Ver Imagem 01.

Figura 01: Linq com cláusula Where.

Inclua o código abaixo no evento “Click()” do botão.

private void button1_Click(object sender, EventArgs e){

DBEntities db = new DBEntities();

LINQ TO ENTITIES

var query = from c in db.CADASTRO select c;

if (comboBox1.Text != “”) { query = query.Where(tb => tb.SEXO == comboBox1.Text); }

if (comboBox2.Text != “”) { query = query.Where(tb => tb.COR == comboBox2.Text); }

if (comboBox3.Text != “”) { query = query.Where(tb => tb.GRAU == comboBox3.Text); } dataGridView1.DataSource = query; }

Primeiramente realizamos a consulta com uma instrução de Select e logo em seguida iremos concatenando os valores caso o valor do combobox seja diferente de vazio. Finalmente atribuímos o resultado em um DataGridView.

janeiro2014 29

Listagem 2

2-) Agrupando registros (Group By)

Teremos um formulário apenas com 1 DataGridView e 1 Botão, Veja Imagem 02.

Figura 02: Agrupando Registros.

Agrupamento Simples

No evento “Click” do Botão faremos o agrupamento simples, utilizando apenas uma tabela.

private void button1_Click(object sender, EventArgs e)

{ DBEntities db = new DBEntities();

var query =(from p in db.CADASTRO group p by new { p.TIPO } into g select new { VALOR = g.Max(p => p.VALOR), NOME = g.FirstOrDefault().NOME, ENDERECO = g.FirstOrDefault().ENDERECO, }); dataGridView1.DataSource = query;}

Teremos como resultado desta instrução os registros agrupados por “TIPO” e o campo “VALOR” com o seu Max(maior valor) seguido dos campos “NOME” e “ENDERECO”.

janeiro201430

Questões

desafio the club

1 - Procedimento responsável por gerar um aviso sonoro.

2 - Função MonthsBetween responsável por trazer o número aproximado de meses entre 2 TDateTime pertence a Unit ...

3 - Procedimento responsável por liberar a referência de um objeto e substituir por Nil.

4 - Procedimento responsável por selecionar todo o texto no controle de edição.

5 - A função IntToStr responsável por converter um valor inteiro em string pertence a Unit...

6 - Procedimento utilizado para sair do bloco de comando atual.

7 - Utilizado juntamente com o Application, encerra a execução da aplicação.

8 - Procedimento que inicializa o gerador de números aleatório.

9 - Função responsável por converter um valor String para inteiro.

10 - Classe que representa a área de transferência do sistema.

janeiro2014 05

janeiro2014