3. janeiro
2014
03
20
Índice
Desafio The Club
30
Editorial
04
12
Autor: Hamden Vogel
05
Autor: Thiago Cavalheiro Montebugnoli
22
Delphi 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)
4. janeiro
2014
04
Delphi é marca registrada da Borland International,
as demais marcas citadas são registradas
pelos seus respectivos proprietários.
Thiago Montebugnoli- Editor Chefe
thiago@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
muitasaúde,paz,alegriaemuitosprojetos.Parainiciarcomchavedeouro,
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
segundaparteeleaprofundasuastécnicasfazendoousodobancodedados
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
tantoaoleitorquedesejaratualizaroambientededesenvolvimentoquanto
ao que está iniciando seu aprendizado.
Nãodeixemdeconferirnossaseçãodedicasetruques,semprerecheada
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
Internet
http://www.theclub.com.br
Cadastro: cadastro@theclub.com.br
Suporte: suporte@theclub.com.br
Informações: info@theclub.com.br
Skype Cadastro: theclub_cadastro
Skype Suporte: theclub_linha1
theclub_linha2
theclub_linha3
www.twitter.com/theclubbr
Copyright The Club 2013
Diretor Técnico
Marcos César Silva
Diagramação
Vitor M. Rodrigues
Design
Vitor M. Rodrigues
Revisão
Drielly Cristini Patrinhani
Colunistas
Hamden Vogel
Jeferson Silva de Lima
Luciano Pimenta
Thiago Cavalheiro Montebugnoli
Juninho
Jeferson Silva de Lima
Impressão e acabamento:
GRIL - Gráfica e Editora
Taquarituba-SP - Tel. (14) 3762-1345
Reprodução
A 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
5. janeiro
2014
05
O
lá amigos do The Club, este artigo se direciona aos asso-
ciados que desejam preparar o ambiente de trabalho do
Android4.4utilizandoopacote“ADTBundleforWindows”
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.Surgiramtambéminúmerasdúvidasdenossosassociadosarespeitoda
instalaçãoeconfiguraçãodestasnovasferramentas,taiscomo:ondeencontrá-
-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
esitesespecíficos,pudereuniralgunsdadosimportantes,comoporexemplo:
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
atentasaoseremexecutadasemdispositivoscompoucaquantidadedememó-
ria,oqueaspermitemdesativaralgumasdasfuncionalidadesqueconsomem
grande quantidade de memória;
Android- Preparandooambiente
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:
FornecedordeSMS/MMS-padronizaçãonaAPIparatodasasaplicações
tratarem as mensagens SMS/MMS.
Impressão:Fornecesuporteembutido,APIecaixadediálogodeimpressã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-
seadasnanuvemdousuário,eofereceumamaneirapadronizadadeacessoa
documentosentreaplicativosefornecedoresdearmazenagem.Ofornecedor
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
Destacamosasalteraçõesqueimpactamusuáriosfinaisparacadarelease
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
6. janeiro
2014
06
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
executandooclássicoNext,Next,NexteInstall.PorpadrãooJDKseráinstalado
no diretório “C:Program FilesJavajdk1.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-
droidDeveloperTools)paraagilizarodesenvolvimentodeaplicativosAndroid.
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.
7. janeiro
2014
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
tamanhodeaproximadamente“500Mb”noformato“.rar”.Aodescompactar
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
efácilparaconfiguraroJDKparaquetrabalhecorretamenteemconjuntocom
estas ferramentas seria copiando o diretório:
C:Program FilesJavajdk1.7.0_45jre
Para dentro da pasta do eclipse:
C:adt-bundle-windows-x86-20131030eclipse
Na primeira execução da ferramenta Eclipse devemos receber uma tela
idêntica ao da Imagem 06.
Figura 06: Definindo o “WorkSpace”.
Devemosdefinirolocalpadrãoparaarmazenarosaplicativosdesenvolvi-
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.
Napróximatela,naprimeiraabasãolistadostodososdispositivosvirtuais
existentes.Podemosconferirconfiguraçõescomoonome,aplataforma,aAPI
e o tipo de processador. Na aba “Device Definitions” temos a possibilidade de
criardefiniçõesespecíficasdedispositivos,respeitandootamanhodatelaem
polegadas, o tipo de resolução, presença ou não de sensores de proximidade,
GPS,sepossuiounãocâmerasfrontaisoutraseiras,tipodeteclado,quantidade
de Memória RAM entre outras configurações.
Paraesteartigoiremosutilizardispositivosquejáestãopré-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ção
AVD 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
8. janeiro
2014
08
Keyboard Hardware keyboard present Presença de teclado
Skin Display a skin with hardware
controls
Estilocompatívelcomo
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.
VerImagem09paramaioresdetalhes.Paraconcluircliquenobotão“OK”.
Figura 09: Configurações de nossa Máquina Virtual.
Parainiciarcliquenobotão“Start”enapróximateladeixaremosasopções
de arranque como padrão. Normalmente quando emulamos uma máquina
virtualoprocessoporpadrãoéumpoucolento,demandandomuitodoproces-
sadoredousodamemóriaRAM.ÉaltamenterecomendávelpossuirumCom-
putadorcomumaconfiguraçãoaltaquandosetratadedesenvolvimentopara
Android.PodemosconferirnaImagem10nossamáquinavirtualfuncionando.
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ção
Application Name ExemploAndroid4 Nome da Aplicação
Project name ExemploAndroid4 Nome do Projeto
Package Name com.example.exemplo-
android4
Nome do Pacote
MinimumRequiredSDK 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.
9. janeiro
2014
09
Listagem 01: Código da Atividade.
Figura 11: Configurações Iniciais no Projeto de Exemplo.
Napróximatelairemosmanterasconfiguraçõespadrões,comasproprie-
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
aspróximasconfigurações.Napróximatelatemostambémapossibilidadede
alterarosestilodetelapadrão,comocordefundo,tipodeescalaentreoutros
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ção
Activity Name MainActivity Nome da Atividade
Layout Name Activity_main Nome do Layout
Navigation Type None Tipo de navegação
Figura 12: Configurações Finais.
Teremos o projeto localizado na região esquerda em “Package Explorer”
comotítulode“ExemploAndroid4”.Comoédecostume,aAtividadePrincipal
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;
}
}
Podemosobservarquefoiimplementadoautomaticamentedoismé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
barradeaçãoseelaestiverpresente.AbrindooarquivodeLay-outsituadona
árvore“ExemploAndroid4/res/layout/activity_main.xml”poderemosobservar
diversas novidades na paleta de componentes, específicos da plataforma da
versão 4 em diante. Ver Figura 13.
Figura 13: Palheta de Componentes.
Podemosconferirnestaversãoumestilomuitomaiseleganteeorganizado
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
10. janeiro
2014
10
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 Componente
Forms Widgets Textview
Text Fields Autocomplete
Time & Date Digital Clock
Other TextClock
Tabela 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=”AutoCompl
eteTextView” >
<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”
/>
11. janeiro
2014
11
</RelativeLayout>
Agorasimpodemoscompilareexecutaroexemplopeloitemmenu“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
aplicativoparainstalaçãoautomáticadepacotesdeoutrasversõesdoAndroid,
chamado“SDKManager”,comofoiditonoiníciodoartigo.Vamossuporqueo
desenvolvedorprecisedesenvolverumaplicativoparacelularesoutabletsmais
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
paradownloadeinstalação.Paraficarmaisclaro,cadaníveldaAPIidentificaa
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
AochecaroitemAndroid2.2(API8),habilitaráossub-itens:“SDKPlatform”
(aPlataformaemsi), “SamplesforSDK”(Exemplosprontosdestaplataforma)e
“GoogleAPIs”(PlataformaespecíficaparatrabalharcomoGoogle).Bastaclicar
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ão4.4KitKat).Trabalhamoscomaversão7.45doJavaSEeconfiguramos
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)totalmentecompatívelcomoAndroid4.4seguidodeumexemplo
deutilização.Outradicaimportantequeacheinecessáriosalientaréainstala-
çã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 Montebugnoli
adora 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-MicrosoftCertifiedTechnologySpecialist,MCAD-MicrosoftCertifiedApplicationDeveloper
e MCSD - Microsoft Certified Solution Developer.
Sobre o autor
12. janeiro
2014
12
V
imos na primeira parte desse artigo, uma base de como é a
tecnologiaASP.NETMVC.FizemosumcomparativocomoWeb
Formseiniciamos algunsexemplos.Nesseartigo,vamosnos
aprofundar, trabalhando com banco de dados.
NoASP.NETMVCpodemostrabalharcomLINQeEntityframework.Pode-
moscriarumbancodo“zero”,utilizandonossosmodelos(classes)oupodemos
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éofechamentodessaedição,aferramenta
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
(arquivoEDMX),épossível“transformar”essemodeloemclasses(CodeFirst).
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
13. janeiro
2014
13
Listagem 1. Classe Pessoa
Listagem 2. Classe contexto
Criando o banco de dados
Nesseexemplo,vamoscriarumaaplicaçãodozero.Crieumanovaaplica-
çã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.
Vamoscriaragoraocontextodaaplicação.Ocontextoéoresponsávelpor
gerenciarosobjetosedadosdaaplicação,elequefazocontroledealteraçõ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éumatécnicaparageraçãodetemplatesautomáticos,baseado
em um modelo. No artigo anterior, desenvolvemos manualmente as Views
de exemplos, inclusive do cadastro, bem como implementamos as Actions
no Controller.
MasvocêsabiaqueoVisualStudiopodecriartudoissoparavocê?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
14. janeiro
2014
14
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
Sefecharmosaaplicaçãoerodarmosnovamente,osdadoscontinuamlá.
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ãoprecisoucriar.AbraoarquivoWeb.configevejaastringdeconexãocriada:
<add name=”DefaultConnection”
connectionString=”Data
Source=(LocalDb)v11.0;Initial
Catalog=aspnet-EntityFirst-
20131125201039;Integrated Se
curity=SSPI;AttachDBFilena
me=|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?
VamosentendercomooVisualStudiocriouaspáginas,controllereactions.
OarquivoIndex.cshtmléoarquivoprincipaldocadastrodePessoa.Éneleque
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 }) |
15. janeiro
2014
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>
OcódigoésemelhanteaLista.cshtml,mostradanoartigoanterior.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.
TemosoutrométodoEditnocontroller,masesseserefereaoatodeeditar
(atualizar)oregistroselecionado.Porisso,eletemamarcaçãodeserumHttp-
PosterecebecomoparâmetroumobjetoPessoa.VejaocódigonaListagem5.
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit(Pessoa
pessoa)
{
if (ModelState.IsValid)
{
db.Entry(pessoa).State =
EntityState.Modified;
db.SaveChanges();
return
RedirectToAction(“Index”);
}
return View(pessoa);
}
VerificamosseosdadossãoválidoseatualizamosomesmousandooEntity
Framework. Após, redirecionamos para a lista, usando RedirectionToAction.
Os métodos Delete são bastante semelhantes ao Edit, um apenas busca
osdadosparamostraresolicitaraconfirmaçãodousuário,enquantoooutro,
efetiva a exclusão do objeto no banco. Os métodos Create, também não tem
nada de diferente do que vimos.
Sefossemoscriarnossoscadastros,semaajudadescaffolding,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áriodaaplicaçãopossaacharoregistroqueprecisa.Vamosadaptaralista,
para que possamos realizar uma pesquisa pelo nome da pessoa.
VamosmodificarométodoIndexqueretornatodososregistrosdePessoa
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);
}
16. janeiro
2014
16
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.
Porfim,chamamosaViewpassandoalistadepessoas,quefoifiltradaou
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
nométodo.Lembre-sedisso.Após,adicionamosumbotãoquefaráapesquisa.
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,
chamassehtmlAttributes.Nele,podemosadicionarcódigoCSS.Vejanocó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êdeveestarseperguntandoseasaplicaçõesASP.NETMVCserãofeias
como os exemplos mostrados até aqui. Claro que não, use a sua imaginação,
afinalvocêtemocontroletotalsobreoHTMLgerado.Ésuaresponsabilidade,
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õesdenavegação,rodapéquetodasaspáginasterãoovisualcolocadoaqui.
Faça um teste, adicione o código da Listagem 9.
...
<body>
<header>
<h1>Cabeçalho</h1>
17. janeiro
2014
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áginasdanossaaplicação.Rodeefaçaoteste.Useaimaginaçãoparacolocar
ummenunoheader,botõesdenavegação,informaçõesnorodapé,enfim,crie
e invente (ou chame um designer que faça isso ).
jQuery UI
jQueryUIéumabibliotecaparaajudaracriaçãodeinterfacesricas.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,precisamosmodificarocampotDtNascimentoparaquesejadotipo
TextBoxForenaseçãoScriptsdoCreate.cshtmlmodificarcomonaListagem10.
@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’,’Segund
a’,’Terça’,’Quarta’,’Quinta’,’S
18. janeiro
2014
18
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’,’Feve
reiro’,’Março’,’Abril’,’Maio’,’
Junho’,’Julho’,’Agosto’,’Setemb
ro’,’Outubro’,’Novembro’,’Dezem
bro’],
monthNamesShort: [‘Jan’,’Fe
v’,’Mar’,’Abr’,’Mai’,’Jun’,’Ju
l’,’Ago’,’Set’,’Out’,’Nov’,’D
ez’],
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
JanelaspopupssãomuitoutilizadasemaplicaçõesWeb.Sejaparamostrar
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,
mostrandootextocolocadonadiv.Dentrodométododialogtemosparâ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?
Paraqueissonãoocorra,precisamosusaraopçãomodalnopopup,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çaumteste,executeaaplicação,chameopopupetenteclicar
em algum link ou botão que esteja na página chamada.
19. janeiro
2014
19
Nota: Veja na página do jQuery UI (http://jqueryui.com/dialog)
como colocar um efeito na abertura da janela popup.
Conclusões
VimosnesteartigocomotrabalharcomoEntityFrameworkemaplicaçõ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 Pimenta
LucianoPimenta(NOVODOMINIO:www.lucianopimenta.com)édesenvolvedorDelphi/C#
paraaplicaçõesWebcomASP.NET,WindowscomWin32eWindowsFormscom.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
20. janeiro
2014
20
E
prafecharcomchavedeouro:validandonossaAplicaçãoatravés
de uma senha criptografada no Registro do Windows, e o nosso
módulo de consultas.
Umaspectointeressantenodesenvolvimentodeaplicaçõ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,
mantendoaaplicaçãoemmodotrial(evaluaçãooudemonstração)?Nonosso
“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.
Moraldahistória:ousuárioteráquetodavezcarregaroprogramadedoisem
doisminutos,ouentãoentracomasenhacorretaenuncamaisaconteceisso.
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:
Figura12-ProcedimentoparaarmazenarasenhadaaplicaçãonoregistrodoWindows.
TvisualPlanit
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
21. janeiro
2014
21
uma senha diferente de “senomar”.
Figura17-Aplicaçãovalidada,nocasodousuárioterentradocomasenhacorreta
(no nosso caso, a “senomar”).
Módulo de Consultas da Aplicação
Nossa aplicação terá um eficiente módulo para consultas, pesquisando
muitasinformaçõesdesejadaseinteressantesparaogerenciamentoeficazda
mesma,comopesquisaporpacientes,tipodepesquisaeperíodo(inclusiveos
pacientesmarcadose/oudesmarcadosemumdadoperíodo).Sãoretornados
valoresmonetáriosdeacordocomovalordoplanodesaúdemultiplicadocom
aquantidadedesessõesfrequentadaspelopacientedoplano.Todooprocesso
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
fazerosomatóriodocampodotipofloatchamadoValor,preenchendonapro-
priedadeExpressionovalorSUM(VALOR).Emelhorainda,podemosfazercom
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çãoparapersonalizá-laemnossasconsultas,atravésdoeventodoseu
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
vemcrescendosempremais,ecomidéiasinteressantes,comoporexemploo
temaprincipaldesteartigo,opoderosopacotedecomponentesTVisualPlanit
paraatenderaumagamadeaplicaçõesquenecessitemgravarinformaçõesde
consultasdepacientes,muitoútilesempremuitodemandadonomercadode
aplicações.Quemnuncaprecisoufazeralgoparecidoousoubedealguémque
precisava de um sistema de agendamento, seja de clínica médica, hospitalar,
dentária, psicológica, etc?
Acreditoquecomessescomponentestodootrabalhopesadoparaaexibi-
çãodetalhadadedesenhosdedatasehorassemelhantesaoestiloMsOutlook
foi facilitado, uma vez que constitui uma poderosa arquitetura de desenvolvi-
mento com uma interface agradável aos olhos do usuário.
Esoluçõescriativaseatraentesnuncasãodemais,gerandoummelhorfee-
dbacknapercepçãodoclienteemtermosdecustoesatisfaçã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 Vogel
Analista 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
especializadosemDelphi. Tambémdesenvolveemoutraslinguagenscomo
C/C++, ASP, PHP e .NET.
Sobre o autor
22. janeiro
2014
22
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
focoemdesenvolveremplataformasalémdoWindows,ou
seja,comoFiremonkeyMobileteremosapossibilidade 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.
Nesteartigoiremosfocarnoprimeirocontatocomaferramenta,portanto
apósrealizarainstalaçãoexecuteoaplicativoquevemjuntocomaferramenta,
o ‘Android Tools’.
• Android Tools:
Imagem 1 – Android Tools.
Aoexecutaroaplicativoo‘SDKManager’seráexibido,escolhaaversãodo
seudispositivoAndroideinstale.Independentedaversãoescolhidaoemulador
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 XE5
Primeiros 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
23. janeiro
2014
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
Coloqueemseuformuláriouma‘Label’ealtereapropriedade‘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’quefoiinstaladoanteriormente,oemuladorpodeseriniciado
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:UsersPublicDocumentsRADStudio12.0PlatformSDKsadt-bundle-
-windows-x86 20130522sdktoolsemulator.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
deumamáquinacliente,porémnesteclientesãonecessáriosalgunsarquivos
paraqueessacomunicaçãoocorranormalmente,comoporexemplo,asDLLs.
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
Inicialmentevamoscriarnossoservidordedadosqueseráacamadaentre
24. janeiro
2014
24
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.
• Naprimeiraetapaselecione‘VCLFormsApplication’nossoservidor
será feito em VLC, apenas nosso cliente será em Firemonkey Mobile;
• Nasegundaopçãovamosdefinir‘TCP/IP’paraacomunicaçãocom
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.
• NaultimaetapadefinaTDServerModule econcluaaconfiguração.
Imagem 8 – Etapa 3 e 4.
Aoconcluirasconfiguraçõesserãocriados3‘Units’emsuaaplicação,elas
que irão conter os métodos de comunicação de seu servidor.
Antesdeprosseguirmossalveoprojetoenomeieosarquivosdaseguinte
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.
25. janeiro
2014
25
VánaUnit‘ServerMethods’eadicioneocomponente‘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.
Alteretambémapropriedade‘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:
26. janeiro
2014
26
Listagem 1 – ApplyUpdates.
Imagem 16 – Adicionar novo Projeto.
SelecioneoitemcorrespondenteaaplicaçõesMobile(FiremonkeyMobile
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’conformedefinimosanteriormenteno‘ServerContainer‘.Como
provedorconfiguradovamosadicionarum‘ClientDataSet’paramanipularmos
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çõesemnossa basededados. Noseventos‘AfterPost’e‘AfterDelete’
adicione o comando:
cdsClientes.ApplyUpdates(0);
27. janeiro
2014
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-
tentesemseu formulário,portanto,pararealizaraexibiçãodetodososdados
selecione o asterisco (*) que se encontra no ‘ClientDataSet’ e arraste para o
‘StringGrid’,feitoisto2componentesserãoadicionadosaoseuformulário(‘Bi
ndSourceDB1’,‘BindingsList1’).
Comaconexãofeitajápodemosrealizaramanipulaçãodosdados,clique
com o botão direito no ‘BindSourceDB1’ e selecione a opção ‘Add Navigator’,
feito isto execute a aplicação.
Conclusão
Oprimeirocontantocomessanovaplataformadedesenvolvimentoacaba
gerando dúvida e incertezas de como as aplicações serão daqui pra frente.
Nesteartigoprocuramosdemonstrarosprimeirospassosparaaquelesque
desejamexperimentaraferramentaetestaralgumasdesuasfuncionalidades.
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 Lima
Consultor The Club.
Sobre o autor
28. janeiro
2014
28
Listagem 1
dicas the club
Nestaseçãodedicasireiauxiliá-loscomalgumasdicasemacetesquando
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.
29. janeiro
2014
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”.
30. janeiro
2014
30
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.
