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 [email protected]
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: [email protected]: [email protected] Informações: [email protected] 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 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.
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.
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
Top Related