04 Android Preparando o ambiente de desenvolvimento para o Android 4.4 (KitKat) 05 Editorial Autor: Thiago Cavalheiro Montebugnoli ASP.NET MVC Parte II 12 Autor: Luciano Pimenta TvisualPlanit - incrementado como base para turbinar um novo aplicativo parte 2 20 Índice Autor: Hamden Vogel Delphi XE5 - Primeiros Passos 22 30 Autor: Jeferson Silva de Lima Desafio The Club 03
Editorial Av. Profº Celso Ferreira da Silva, 190 Jd. Europa - Avaré - SP - CEP 18.707-150 Informações e Suporte: (14) 3732-1529 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 abordados 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 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 Thiago Montebugnoli - Editor Chefe thiago@theclub.com.br 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. Delphi é marca registrada da Borland International, as demais marcas citadas são registradas pelos seus respectivos proprietários. 04
Android - Preparando o ambiente de desenvolvimento para o Android 4.4 (KitKat) Olá amigos do The Club, este artigo se direciona aos associados 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 Android. 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; 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 baseadas 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, escolhendo 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 05
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) 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. Um tópico importante que devemos lembrar é que a data de expiração para esta última versão é no mês de Fevereiro de, 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 03: Instalando o Java. ADT Bundle for Windows (Android SDK e Eclipse) 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. Diferente do artigo anterior, o Android SDK fornece as bibliotecas da API e ferramentas de desenvolvimento necessárias para construir, testar e depurar 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 (Android 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 02: Escolhendo a Opção de Download. Figura 04: Download do ADT Bundle for Windows. 06
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: 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 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 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. Na primeira execução da ferramenta Eclipse devemos receber uma tela idêntica ao da Imagem 06. Figura 06: Definindo o WorkSpace. Figura 08: Dispositivos Virtuais. Devemos definir o local padrão para armazenar os aplicativos desenvolvidos. 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 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 07
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 Interno SD Card Valor vazio Presença de Cartão de Memória Tabela 01: Valores da 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 processador e do uso da memória RAM. É altamente recomendável possuir um Computador com uma configuração alta quando se trata de desenvolvimento para Android. Podemos conferir na Imagem 10 nossa máquina virtual funcionando. Ver Imagem 09 para maiores detalhes. Para concluir clique no botão OK. 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. Figura 09: Configurações de nossa Máquina Virtual. Propriedade Valor Descrição Application Name ExemploAndroid4 Nome da Aplicação Project name ExemploAndroid4 Nome do Projeto Package Name com.example.exemploandroid4 Nome do Pacote Minimum Required SDK API 19: Android 4.4 Mínimo requerido (KitKat) Target SDK API 19: Android 4.4 Alvo (KitKat) Compile With API 19: Android 4.4 Compilar com (KitKat) Theme Holo Light with Dark Action Bar Tema padrão Tabela 02: Configurações Iniciais. 08
@Override protected void oncreate(bundle savedinstancestate) super. oncreate(savedinstancestate); setcontentview(r.layout. activity_main); Figura 11: Configurações Iniciais no Projeto de Exemplo. Na próxima tela iremos manter as configurações padrões, com as propriedades abaixo checadas, sendo: Create Custom Lancher icon para criar um ícone de inicialização customizado, 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çã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. @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 implementado, 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. 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.exemploandroid4/MainActivity.java. Dê um duplo clique nesta classe e por padrão teremos o código conforme a listagem 01, Listagem 01: Código da Atividade. package com.example. exemploandroid4; import android.os.bundle; import android.app.activity; import android.view.menu; public class MainActivity extends Activity 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 09
versão bem atualizada) é que na região direita inferior temos as Properties (Propriedades) dos componentes, facilitando no desenvolvimento. Continuando o exemplo, iremos colocar alguns componentes na tela, Ver Tabela 04. Palheta Forms Widgets Text Fields Time & Date Other Tabela 04: Componentes. Abaixo o código XML correspondente: Listagem 01: Código da Atividade. Componente Textview Autocomplete Digital Clock TextClock <RelativeLayout xmlns:android= http://schemas. android.com/apk/res/android xmlns:tools= http:// schemas.android.com/tools width= match_ parent 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 width= wrap_content height= wrap_content android:text= @string/ hello_world /> <AutoCompleteTextView android:id= @+id/ autocompletetextview1 width= wrap_content height= wrap_content alignparentleft= true below= @+id/textview1 margintop= 16dp android:ems= 10 android:text= AutoCompl etetextview > <requestfocus /> </AutoCompleteTextView> <requestfocus alignright= @+id/ autocompletetextview1 below= @+id/ autocompletetextview1 marginright= 36dp margintop= 16dp /> <DigitalClock android:id= @+id/ digitalclock1 width= wrap_content height= wrap_content alignleft= @+id/ autocompletetextview1 below= @+id/ autocompletetextview1 margintop= 31dp android:text= DigitalClock /> <TextClock android:id= @+id/ textclock1 width= wrap_content height= wrap_content alignleft= @+id/digitalclock1 below= @+id/digitalclock1 margintop= 28dp android:text= TextClock /> 10
</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. 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. Figura 14: Exemplo em Run-Time. Um forte abraço e até o mês que vem! 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. Referencias http://developer.android.com/ Sobre o autor 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 - Microsoft Certified Technology Specialist, MCAD - Microsoft Certified Application Developer e MCSD - Microsoft Certified Solution Developer. thiago@theclub.com.br Figura 15: SDK Manager. 11
ASP.NET MVC Parte II 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. Podemos criar um banco do zero, utilizando nossos modelos (classes) ou podemos fazer engenharia reversa com um banco existente. Entity Framework Power Tools 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). Fazer engenharia reversa (criar classes baseadas nos objetos do banco), não é algo simples. Imagine seu banco de dados com 50 tabelas, Stored Procedures 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, Figura 2. Exemplo de geração de classes usando engenharia reversa 12
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. 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). Listagem 1. 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. 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. Listagem 2. Classe contexto using System.Data.Entity;... Veja que foi criado o controller, assim como uma pasta Pessoa em View e alguns arquivos para o cadastro da pessoa (Figura 4). 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 Figura 4. Cadastro usando template do Visual Studio 13
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). 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. Listagem 3. Código do arquivo Index.cshtml <h2>index</h2> 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 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 14 <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 )
@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. 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. Listagem 4. Código do Edit do PessoaController public ActionResult Edit(int id = 0) Pessoa pessoa = db.pessoas. Find(id); if (pessoa == null) return HttpNotFound(); return View(pessoa); 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). 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. Listagem 5. Código do Edit para atualizar os registros [HttpPost] [ValidateAntiForgeryToken] public ActionResult Edit(Pessoa pessoa) if (ModelState.IsValid) db.entry(pessoa).state = EntityState.Modified; Listagem 6. Adaptando o método Index para pesquisar 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); 15
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). Listagem 7. Modificando a View para a pesquisa <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). 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 parecido. 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. Listagem 8. Código do arquivo _Layout.cshtml <!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> 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. 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. @Html.TextBox( nome,, new style = width:350px ) O segundo parâmetro é o valor do TextFor, assim, quando quisermos que Listagem 9. Mudando o layout... <body> <header> <h1>cabeçalho</h1> 16
... </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). 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. Listagem 10. Configurando o calendário @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. Figura 8. Atualizando o jquery UI da Solution. Clique em Install. 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. Listagem 11. Customizando o calendário Nota: caso a versão do projeto seja a mais atualizada, uma mensagem indicando que não ouve atualização será mostrada. $( #tdtnascimento ).datepicker( dateformat: dd/mm/yy, daynames: [ Domingo, Segund a, Terça, Quarta, Quinta, S 17
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). ); $(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. 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. Listagem 12. Chamando uma janela popup <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 ); 18 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.
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. Sobre o autor Luciano Pimenta Luciano 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. www.lucianopimenta.net 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! 19
TvisualPlanit incrementado como base para turbinar um novo aplicativo parte 2 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 13 - Senha criptograda no registro do Windows. Figura 14 - Aplicação em modo trial. Figura 15 - Informando a senha Figura 12 - Procedimento para armazenar a senha da aplicação no registro do Windows. 20 Figura 16 - Entrando com um senha diferente do esperado (no nosso caso, com