the club - megazine · br/), prestando serviços de consultoria atuando como analista de sistemas...
TRANSCRIPT
abril2014
abril2014
abril2014 03
20
Índice
Editorial
04
12
Autor: Luciano Pimenta
05
Autor: João Marcos Sakalauska
25Android - Trabalhando com o DatePicker e TimePicker
Autor: Thiago C. Montebugnoli
Autor: Jeferson Silva de Lima
ASP.NET
Novidades do Visual Studio 2013
Delphi XE5 – Trabalhando com Métodos no Android
Aplicações .NET em camadas, teoria e prática - Parte 2
abril201404
Delphi é marca registrada da Borland International, as demais marcas citadas são registradas
pelos seus respectivos proprietários.
Thiago Montebugnoli - Editor [email protected]
Olá amigos do The Club!
É sempre com muito orgulho e satisfação que apresendo mais uma edição de nossa revista. O nosso conteúdo está se tornando cada vez mais versátil, trazendo sempre para os leitores diversos assuntos envolvendo diferentes linguagens de programações. Nesta edição nosso colunista Lu-ciano Pimenta aborda as principais novidades do Microsoft Visual Studio 2013. Ele demonstra algumas inovações sendo que seu foco principal é o TFS (Controle de versão, tarefas e Metodologias ágeis) e algumas novidades que o desenvolvedor irá usar no dia-a-dia. Artigo recomendado para quem está pensando em migrar de versão. Já nosso colaborador João Marcos Sakalauska abrange a segunda parte do artigo sobre Aplicações .Net em camadas, sendo que neste nos dá maiores detalhes do conceito de progra-mação em camadas e continua o desenvolvimento do exemplo prático. Nosso consultor técnico Jeferson Silva de Lima continua com artigos relacionados ao Android utilizando o Delphi XE 5, e especificamente neste ele implementa alguns métodos para visualizar como é realizada a comunicação entre cliente e servidor, uma técnica primordial no desenvolvimento de sistemas. Para finalizar nossa série de artigos, eu também escrevo sobre o Android, mas utilizando Java como linguagem de Programação. Descrevo um pouco das funcionalidades dos componentes denominados “Pickers”(selecionadores), o DatePicker e o TimePicker, permitindo uma implementação rápida para desfrutar destes recursos.
Vou ficando por aqui, um abraço e até o mês que vem!
Av. Profº Celso Ferreira da Silva, 190 Jd. Europa - Avaré - SP - CEP 18.707-150
Informações e Suporte: (14) 3732-1529
Internethttp://www.theclub.com.br
Cadastro: [email protected]: [email protected] Informações: [email protected] Cadastro: theclub_cadastro
Skype Suporte: theclub_linha1 theclub_linha2 theclub_linha3
www.twitter.com/theclubbr
Copyright The Club 2013
Diretor TécnicoMarcos César Silva
DiagramaçãoVitor M. Rodrigues
DesignVitor M. Rodrigues
RevisãoDrielly Cristini Patrinhani
ColunistasHamden Vogel
Jeferson Silva de LimaLuciano Pimenta
Thiago Cavalheiro Montebugnoli
JuninhoJeferson Silva de Lima
Impressão e acabamento:GRIL - Gráfica e Editora
Taquarituba-SP - Tel. (14) 3762-1345
ReproduçãoA utilização, reprodução, apropriação, armazenamento em banco de dados, sob qualquer forma ou meio, de textos, fotos e outras criações intelectuais em cada publicação da revista “The Club Megazine” são terminantemente proibidos sem autorização escrita dos titulares dos direitos autorais.
Editorial
abril2014 05
Dando continuidade ao tema “Aplicações .NET em camadas”, continuaremos o desenvolvimento da nossa aplicação ini-ciada na primeira parte desse artigo.
No primeiro artigo criamos o banco de dados da nossa aplicação com apenas uma tabela “Usuários” e importamos através do Entity Framework a informação dessa tabela para nossa aplicação.
Caso você esteja desenvolvendo o projeto desde o início seguindo esse artigo, irá reparar que ao executar o projeto, já existe uma estrutura inicial como mostra a imagem 01.
Imagem 01 – Estrutura inicial ao executar a aplicação
Ainda nessa estrutura, ao lado direito do navegador temos os menus fornecidos nessa estrutura como mostra a Imagem 02.
Veja a imagem 02.
Com a estrutura inicial fornecida pelo próprio Framework MVC, fica mais fácil seguirmos com o desenvolvimento. A próxima etapa é definir por onde começar, pois, alguns desenvolvedores preferem iniciar o desenvolvimento
Aplicações NET em camadas, teoria e prática - Parte 2
pela camada de apresentação indo até a camada de dados e outros preferem partir da camada de dados indo até a camada de apresentação.
Nesse artigo vou sugerir começar pela camada de dados, pois, por ex-periência, vejo que é mais fácil mudar a apresentação em cima da estrutura de dados já pronta do que criar a camada de apresentação para depois se preocupar com a estrutura dos dados.
Imagem 02 – Menus da estrutura inicial da aplicação.
abril201406
Listagem 1
Camada Model
Nessa camada será desenvolvida a classe de interação com o banco de dados referente ao CRUD (CReate, Update, Delete).
Sendo assim, em Solution Explorer, clique na pasta Models para seleciona--la, em seguida clique com o botão direito e selecione a opção “Add ->New Item” ou use a tecla de atalho “CTRL + SHIFT + A”. Observação: Certifique-se de que a pasta Models esteja selecionada, caso contrário o novo item será criado no local errado.
Crie uma nova classe chamada “UsuarioModels.cs” como mostra a Imagem 03.
Veja a imagem 03.
A classe deverá possuir a seguinte estrtura:
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Data;
namespace MvcApp.Models{Publicclass UsuarioModels{Publicint IdUsuario { get; set; }Publicstring NomeUsuario { get; set; }Publicstring EmailUsuario { get; set; }publicstring Login { get; set; }publicstring Senha { get; set; }
private MVC context;
#region “Métodos de acesso”
///<summary>///Seleciona as informações de um usuário específico pela entidade Usuário passada através de Info.///</summary>
Imagem 03 – Classe UsuarioModels.cs.
abril2014 07
Listagem 2
///<param name=”info”></param>///<returns></returns>publicList<Usuario>Selecionar(Usuario info){context = new MVC();
IQueryable<Usuario>selecionarUsuario = context.Usuario.AsQueryable<Usuario>();selecionarUsuario = selecionarUsuario.Where(u =>u.IdUsuario == info.IdUsuario);return selecionarUsuario.ToList();}
///<summary>/// Seleciona as informações de todos os usuários pela entidade Usuário passada através de Info.///</summary>///<param name=”info”></param>///<returns></returns>Public List<Usuario>Selecionar(){ context = new MVC();
IQueryable<Usuario>listarUsuarios = context.Usuario.AsQueryable<Usuario>();Return listarUsuarios.ToList();}#endregion
///<summary>/// Construtor invocando método de seleção///</summary>//publicUsuarioModels()//{//this.Selecionar();//}}}
Com a nossa classe Model implementada, devemos agora programar nosso Controller.
Camada Controller
Nessa camada será desenvolvida a classe que direciona as rotas de cada requisição. Em “Solution Explorer”, clique na pasta Controllers para selecioná-la, em seguida clique com o botão direito e selecione a opção “Add ->Controller”.
Observação: Certifique-se de que a pasta Controllers esteja sele-cionada, caso contrário o novo item será criado no local errado.
Na tela “AddController”, defina o ControllerName como “UsuarioControl-ler” como mostra a Figura 04.
Imagem 04 – Definindo o UsuarioController.
Nesse artigo não utilizaremos os métodos fornecidos pelo Check da tela “AddController” na opção: “Add action method for Create, Update, Delete and Detailsscenarios”.
Ao final da criação do Controller a estrutura inicial estará da seguinte forma:
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;
namespace MvcApp.Controllers{publicclassUsuarioController : Controller{//// GET: /Usuario/
Public ActionResult Index(){return View();}
}}
Camada View
Agora a coisa começa a ficar interessante, pois, estamos perto de ver o resultado do nosso desenvolvimento. Para criar a View da aplicação, vá
abril201408
Listagem 3
em “Solution Explorer”, clique na pasta Views para seleciona-la, em seguida clique com o botão direito e selecione a opção “Add ->New Folder”. Crie a pasta Usuario e após isso, selecione a pasta e clique com o botão direito na opção “Add ->View”
Observação: Certifique-se de que a pasta Usuario esteja selecio-nada, caso contrário o novo item será criado no local errado.
Na tela “AddView” renomeie “ViewName” para ListarUsuarios, em seguida, clique na opção “Create a strongly-typedview” e em “View Data Class” selecione MvcApp.Usuario, para finalizar Selecione a opção “List” em “ViewContent” como mostra a imagem 05.
Imagem 05 – Nova View para a aplicação.
A página ListarUsuarios.aspx será criada com a seguinte estrutura:
<%@PageTitle=””Language=”C#”MasterPageFile=”~/Views/Shared/Site.Master”Inherits=”System.Web.Mvc.ViewPage<IEnumerable<MvcApp.Usuario>>”%>
<asp:ContentID=”Content1”ContentPlaceHolderID=”TitleContent”runat=”server”> ListarUsuarios</asp:Content>
<asp:ContentID=”Content2”ContentPlaceHolderID=”MainContent”runat=”server”>
<h2>ListarUsuarios</h2>
<table><tr><th></th><th>IdUsuario</th><th>NomeUsuario</th><th>EmailUsuario</th><th> Login</th><th>Senha</th></tr>
<%foreach (var item in Model) { %>
<tr><td><%:Html.ActionLink(“Edit”, “Edit”, new { id=item.IdUsuario }) %> |<%:Html.ActionLink(“Details”, “Details”, new { id=item.IdUsuario })%> |<%:Html.ActionLink(“Delete”, “Delete”, new { id=item.IdUsuario })%></td><td><%:item.IdUsuario%></td><td><%:item.NomeUsuario%></td><td><%:item.EmailUsuario%></td><td><%:item.Login%></td><td><%:item.Senha%></td></tr>
<% } %>
</table>
abril2014 09
Listagem 4
Listagem 5
<p><%:Html.ActionLink(“Create New”, “Create”) %></p>
</asp:Content>
Até o momento, não fizemos algo que possamos visualizar na aplicação, tanto que se você executar a aplicação, ela estará da mesma forma que foi apresentada no início do artigo. Se você tentar de forma astuta acessar a página que criamos, também não conseguirá, pois, é necessário informar ao Controller à Action que deverá ser executada através da requisição realizada.
Voltando ao controller“UsuarioController”, será necessário implementar a chamada ao método que carregará as informações para serem utilizadas na listagem, para isso, nosso controller deverá ficar da seguinte forma (alterações em negrito):
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;using MvcApp.Models;
namespace MvcApp.Controllers{publicclassUsuarioController : Controller {//// GET: /Usuario/
UsuarioModels mUsuario = newUsuarioModels();
Public ActionResult Index(){ return View();}
Public ActionResult ListarUsuarios(){ ViewData[“item”] = mUsuario.Selecionar(); Return View(ViewData[“item”]);}
}}
Com nosso controller alterado, precisamos definir no menu a chamada para a listagem de usuários.
Em Solution Explorer, abra a Master Page que fica em Views ->Shared.
Agora, incluiremos uma ActionLink para chamar a listagem de usuários. Apenas resumir e facilitar o entendimento, a ActionLink espera como parâ-metros o Texto do Link, a ActionName do Controller e o Nome do Controller, para facilitar, observe o código em negrito da Master Page:
<%@MasterLanguage=”C#”Inherits=”System.Web.Mvc.ViewMasterPage”%>
<!DOCTYPEhtmlPUBLIC”-//W3C//DTD XHTML 1.0 Strict//EN””http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><htmlxmlns=”http://www.w3.org/1999/xhtml”><headrunat=”server”><title><asp:ContentPlaceHolderID=”TitleContent”runat=”server”/></title><linkhref=”../../Content/Site.css”rel=”stylesheet”type=”text/css”/></head>
<body><divclass=”page”>
<divid=”header”><divid=”title”><h1>My MVC Application</h1></div>
<divid=”logindisplay”><%Html.RenderPartial(“LogOnUserControl”); %></div>
<divid=”menucontainer”>
<ulid=”menu”><li><%:Html.ActionLink(“Home”, “Index”, “Home”)%></li><li><%:Html.ActionLink(“Listar Usuários”, “ListarUsuarios”, “Usuario”)%></li><li><%:Html.ActionLink(“About”, “About”, “Home”)%></li></ul>
</div></div>
abril201410
<divid=”main”><asp:ContentPlaceHolderID=”MainContent”runat=”server”/>
<divid=”footer”></div></div></div></body></html>
Agora, execute a aplicação e repare que foi adicionada uma nova opção no menu conforme imagem 06.
Imagem 06 – Menu Listar Usuários.
A parte mais interessante vem agora, pois, quando clicar em Listar Usuários a listagem será apresentada mostrando as informações inseridas no banco de dados (no primeiro artigo) conforme imagem 07.
Imagem 07 – Listagem de Usuários.
Agora que ficou legal e tudo está empolgante, vamos ao entendimento de algumas questões.
Model
Na classe UsuarioModels, é necessário que você tenha declarado as propriedades similares ao que você possui no banco conforme imagem 08.
Imagem 08 – Classe com informações similares a tabela no banco de dados.
Os métodos, você poderá implementar como precisar, claro, respeitando as camadas e suas divisões.
Controller
Com utilização das Actions é necessário que você tenha bem definido a estrutura (Entidades) para saber o que vai implementar e como. Pois, cada
abril2014 11
João Marcos Sakalauska31 anos, é Analista de Sistemas e atua a mais de 10 anos na área de TI. Sócio proprietário na empresa IT Solution (http://www.itsolution.com.
br/), prestando serviços de consultoria atuando como Analista de Sistemas em projetos que utilizam as tecnologias VB6, .NET e Sql Server.
Sobre o autor
Action deverá ser acionada de acordo com a requisição que se deseja fazer, não necessariamente a externa através de um link, porque pode haver casos onde após executar uma Action seja necessário chamar outra Action do mesmo ou de outro Controller. No exemplo desse artigo,fizemos através de requisição externa através de um link como mostra a imagem 09.
Veja a imagem 09.
View
Sobre a view, apresentamos um dos recursos do .NET Framework que possibilita que você crie Views com base no Model existente definindo o tipo de conteúdo da View, Listagem, Detalhes, Criação, Edição, Exclusão.
Imagem 09 – Apresentação da Action requisitada.
Conclusão
Nesse artigo a ideia foi apresentar a facilidade do uso do Framework MVC contido no .NET Framework. Sua agilidade permite que a aplicação seja desen-volvida de forma padronizada, estruturada poupando o tempo do desenvolve-dor se comparado a algumas aplicações desenvolvidas utilizando web forms.
No próximo artigo, detalharemos ainda mais a questão das Actions, ex-plorando os demais recursos disponíveis.
abril201412
Listagem 1 – DDLPedidos.
Listagem 2 – DDLUsuários.
Introdução
Vimos anteriormente em nossos artigos como podemos conectar ao dispositivo móvel localmente e/ou através do DataSnap.No entanto, caso desejarmos trocar informações entre o servidor e o cliente(Android) como seria feito tal operação ?.
Neste artigo vamos criar alguns métodos para visualizarmos como é feita a comunicação entre cliente e servidor.
Servidor
Para a criação de nosso servidor DataSnap podemos seguir o mesmo processo que utilizamos no artigo ‘Delphi XE5 – Primeiros Passos’.
Com o servidor criado vamos inserir nossos componentes de conexão. Insira um SQLConnection e um SQLDataSet, renomeie,respectivamente,para Conexão e sdsAuxiliar, ambos serão inseridos no ‘ServerMethods’.
Nosso banco de dados será Firebird e terá 3 tabelas, ‘ PEDIDOS ‘ , ‘ USU-ARIOS ’ e ‘PRODUTOS’ . Segue abaixo DDL das tabelas:
/* Table: PEDIDOS */
CREATE TABLE PEDIDOS (ID_PEDIDO INTEGER NOT NULL,PRODUTO VARCHAR (30) CHARACTER SET ISO8859_1 COLLATE ISO8859_1,VALOR_UN FLOAT,QUANTIDADE INTEGER,TOTAL FLOAT,ID_VENDEDOR INTEGER);
D e l p h i X E 5 – Trabalhando com Métodos no Android
/* Primary keys definition */
ALTER TABLE PEDIDOS ADD CONSTRAINT PK_PEDIDOS PRIMARY KEY (ID_PEDIDO);
/* Indices definition */
CREATE UNIQUE INDEX PK_PEDIDOS ON PEDIDOS (ID_PEDIDO);
SET TERM ^ ;
/* Triggers definition */
/* Trigger: TRG_ID_PEDIDO */CREATE TRIGGER TRG_ID_PEDIDO FOR PEDIDOS ACTIVEBEFORE INSERT POSITION 0ASBEGINNEW.id_pedido = gen_id(gen_id_pedido,1);END^SET TERM ; ^
/* Table: USUARIOS */CREATE TABLE USUARIOS (ID_USUARIO INTEGER NOT NULL,NOME VARCHAR (30) CHARACTER SET ISO8859_1 COLLATE ISO8859_1);
abril2014 13
Listagem 3 – DDL Produtos.
Listagem 4 – Função Captura Nome de Usuário.
Listagem 5 – Função Gerar Pedido.
/* Primary keys definition */
ALTER TABLE USUARIOS ADD CONSTRAINT PK_USUARIOS PRIMARY KEY (ID_USUARIO);
/* Indices definition */
CREATE UNIQUE INDEX PK_USUARIOS ON USUARIOS (ID_USUARIO);
SET TERM ^ ;
/* Triggers definition */
/* Trigger: TRG_ID_USUARIO */CREATE TRIGGER TRG_ID_USUARIO FOR USUARIOS ACTIVEBEFORE INSERT POSITION 0ASBEGINNEW.id_usuario = gen_id(gen_id_usuario,1);END^SET TERM ; ^
/* Table: PRODUTOS */CREATE TABLE PRODUTOS (ID_PRODUTO INTEGER NOT NULL,PRODUTO VARCHAR (30) CHARACTER SET ISO8859_1 COLLATE ISO8859_1, VALOR_UN FLOAT);
/* Primary keys definition */
ALTER TABLE PRODUTOS ADD CONSTRAINT PK_PRODUTOS PRIMARY KEY (ID_PRODUTO);
/* Indices definition */
CREATE UNIQUE INDEX PK_PRODUTOS ON PRODUTOS (ID_PRODUTO);
Com as tabelas e conexões devidamente configuradas,criaremos as fun-ções responsáveis por transmitir os dados entre o cliente e o servidor.
Iniciaremos realizando a busca pelo usuário logado no sistema, veja abaixo a função:
functionPegarNomeUsuario(ID_Usuario: Integer): String;beginsdsAuxiliar.Close;sdsAuxiliar.CommandText:= Format(‘SELECT NOME FROM USUARIOS WHERE ID_USUARIO =%d’,[ID_Usuario]);sdsAuxiliar.Open; Result:=sdsAuxiliar.FieldByName(‘NOME’).AsString;sdsAuxiliar.Close;end;
Veja que realizamos apenas uma consulta no banco e retornamos o nome de usuário para que possamos trabalhar da forma que desejarmos.
Uma outra função que devemos criar será a responsável por gravar o pedido que realizamos em nosso aparelho móvel, veja abaixo a listagem:
functionGerarPedido(Lista: String): Boolean;Var Stream: TStringStream;begin TrycdsTemp.Close; Stream:=TStringStream.Create(Lista);Stream.Position:= 0;cdsTemp.LoadFromStream(Stream);cdsTemp.Open;cdsPedidos.Close;CopiarDados(cdsTemp,cdsPedidos);Result:= True; Except on E: Exception do Result:= False; End;Stream.Free;cdsTemp.EmptyDataSet;end;
Nesta função vamos receber do cliente uma String no formato XML pa-drão do TClientDataSet, após isso armazenaremos a mesma em uma variável TStringStream com o intuito de carregar o XML em nosso Client temporário através do comando LoadFromStream. Com os dados em memória será neces-sário apenas gravar tudo em nossa base, portanto, utilizamos o procedimento ‘CopiarDados’. Veja listagem abaixo:
abril201414
Listagem 6 – Procedimento Copiar Dados.
Listagem 7 – Função AutoInc.
procedureCopiarDados(Origem, Destino: TClientDataSet);Var I: Integer;BeginOrigem.First;whilenot Origem.Eof dobeginDestino.Open;Destino.Append;for I := 0 to Origem.FieldCount - 1 dobeginifDestino.Fields[I].Tag = 0 thenbeginDestino.Fields[I].Value := Origem.Fields[I].Value;endelseDestino.FieldByName(‘ID_PEDIDO’).AsInteger:= Autoinc(‘GEN_ID_PEDIDO’,Conexao);end;Destino.Post;Origem.Next;end;end;
Neste procedimento realizamos uma varredura no TClientDataSet de ori-gem, ou seja, onde os dados estão, e enviamos para o TClientDataSet destino que será responsável por gravar as informações no banco de dados. Veja que o campo ‘ID_PEDIDO’ é gravado separadamente por ser um PK(Primary Key), portanto, criamos a função ‘AutoInc’ que irá gerar o código auto incremento de nossa tabela.
functionAutoinc(Generator: string;Conexao: TSQLConnection): Integer;varsdsAutoInc: TSQLDataSet;beginsdsAutoInc := TSQLDataset.Create(nil);trysdsAutoinc.SQLConnection := Conexao;
sdsAutoinc.CommandText := ‘Select Cast(Gen_Id(‘ + Generator + ‘,1) as integer) as codigo from Rdb$Database’;sdsAutoinc.Open;Result :=sdsAutoInc.FieldByName(‘codigo’).AsInteger;finallysdsAutoInc.Close;sdsAutoInc.Free;end;end;
Com as funções criadas em nosso servidor podemos agora criar nossa aplicação Cliente.
Cliente
Crie uma aplicação Firemonkey Mobile como fizemos no artigo anterior e adicione um ‘Data Module’ ao projeto.
Em nosso DM(DataModule) adicione 2 componentes de conexão, SQLCon-nection e SQLServerMethod renomeie, respectivamente, para ConexaoDataS-nap e Metodos. Conecte o componente ‘ConexaoDataSnap’ em seu servidor, para isso selecione o driver DataSnap e indique as configurações: HostName, Port e Communication Protocol (Conforme Imagem 1).
Conecte o componente ‘Metodo’ ao ‘ConexaoDataSnap’ e com isso a conexão já está feita.
Imagem 1 – DataModule.
Agora volte ao formulário principal econfigure da seguinte forma:
Insira uma ‘label’ para receber o nome de nosso vendedor, um botão para acessar o formulário de pedidos,porém, antes de prosseguir crie o procedimen-to no evento OnShow para solicitar através de um ‘Inputbox’ o ‘ ID_USUARIO ’, com isso retornaremos através da função criada no servidor o nome do nosso vendedor, veja listagem abaixo:
abril2014 15
Listagem 8 – Evento OnShow.
{ Publicdeclarations }
VarCodVendedor: Integer;Nome_Vendedor: String; procedureTFrmxPrincipal.FormShow(Sender: TObject);VarCodString: String;begin RepeatCodString:= InputBox(‘Insira seu Código’,’Código do Usuário’,’’);If CodString = ‘’ thenBeginIfMessageDlg(‘Código Vazio ou Inválido. DesejaCancelar ?’,TMsgDlgType.mtWarning,mbYesNo,0)= mrYes thenBeginNome_Vendedor:= ‘Cancelado’;FrmxPrincipal.Close;//Exit; End; End;ifCodString<> ‘’ then Begin TryCodVendedor:=StrToInt(CodString);Metodos.ServerMethodName:= ‘TServerMethods1.PegarNomeUsuario’;Metodos.ParamByName(‘ID_Usuario’).AsInteger:= CodVendedor;Metodos.ExecuteMethod;Nome_Vendedor:= Metodos.ParamByName(‘ReturnParameter’).AsString;If Nome_Vendedor = ‘’ then BeginShowMessage(‘Código Inválido!’);End;Except on E: Exception do BeginShowMessage(‘Código deve ser numérico!’);
end;end;end; Until Nome_Vendedor<> ‘’;LbVendedor.Text := Nome_Vendedor;end;
Imagem 2 –InputBox Código de Usuário.
Após inserir o código o usuário será levado para a tela inicial, veja na imagem abaixo como deve ficar seu formulário principal:
Imagem 3 – Layout Formulário Principal.
abril201416
Listagem 9 – OnClick botão Pedido.
Listagem 11 – Insert Into Produtos.
Listagem 10 – Create Table Produtos.
Listagem 12 – Botão Adicionar.
No topo temos a Label que irá exibir o nome de usuário e no centro o botão pedido. No evento OnClick dobotão vamos inserir o seguinte comando:
FrmxPedido:= TFrmxPedido.Create(Self);FrmxPedido.Show;
Para que possamos trabalhar com pedidos de forma mais ágil será neces-sário criar uma tabela de produtos localmente em nosso dispositivo móvel, para isso vamos utilizar o banco de dados SQLite.
Pegue a estrutura da tabela de produtos criada anteriormente e insira no SQLite, veja abaixo:
CREATE TABLE PRODUTOS ( ID_PRODUTO INTEGER, PRODUTO VARCHAR(30),VALOR_UN DOUBLE PRECISION);
INSERT INTO PRODUTOS (ID_PRODUTO,PRODUTO,VALOR_UN)VALUES (1,’PAO FRANCES’,0.5);INSERT INTO PRODUTOS (ID_PRODUTO,PRODUTO,VALOR_UN)VALUES (2,’CAFE’,1);INSERT INTO PRODUTOS (ID_PRODUTO,PRODUTO,VALOR_UN)VALUES (3,’MARGARINA’,2.5);INSERT INTO PRODUTOS (ID_PRODUTO,PRODUTO,VALOR_UN)VALUES (4,’PINGADO’,1.5);
Na tela de pedidos insira um ‘TListView’ que irá exibir os itens do pedido, crie também um TClientDataSet nomeie de cdsItens, adicione os campos iguais da tabela de ‘PEDIDOS’ e após isso clique com o botão direito para criar o Dataset.
Imagem 4 – Formulário de Pedidos.
Acesse o BindVisually do formulário de Pedidos e conecte o campo ‘PRO-DUTO’ no ‘Item.Text’ do ListView o campo ‘ID_PEDIDO’ ao ‘Item.LookupData’ e o campo ‘QUANTIDADE’ ao ‘Item.Detail’. Com isso nossos dados serão exibidos no ListView. Para habilitar o campo Item.Detail do ListView altere a propriedade ‘ItemAppearance’ para: ‘ListItemRightDetail’, assim a quantidade também será exibida em sua lista.
Crie 2 botões um para inserir itens no TClientDataSet temporário e outro para finalizar o pedido. No evento OnClick do botão ‘adicionar’ insira o comando conforme listagem abaixo:
procedurebtnAdcClick(Sender: TObject);beginFrmxProdutos:=FrmxProdutos.Create(Self);FrmxProdutos.Show;end;
Imagem 5 – layout Formulário de Pedidos.
abril2014 17
Listagem 13 – ItemClickListView de Produtos.
O botão adicionar irá chamar o formulário de produtos, nele iremos encontrar um ‘ TabControl’ com 2 abas, na primeira vamos exibir todos os produtos para o usuário selecionar, já na segunda serão exibidos os detalhes do produto selecionado. Abaixo dos detalhes temos o botão ‘Incluir’ ao clicar nele vamos indicar a quantidade de produtos e retornaremos para a tela de pedidos com o produto já adicionado em nosso pedido. Veja imagens abaixo:
Imagem 6 e 7 – Formulário de Produtos.
Imagem 6 e 7 – Formulário de Produtos.
Imagem 8 – InputBox Quantidade.
Na codificação desta tela trabalhamos da seguinte forma:
Ao clicar no item da primeira aba utilizamos um Locate no TClientDataSet para apontar para o registro e jogamos para a segunda aba, veja listagem abaixo:
procedureLvProdutosItemClick(const Sender: TObject;constAItem: TListViewItem);VarI,ID_Item: Integer;beginDM.cdsProdutos.Close;DM.cdsProdutos.Open;ID_Item:= GetSelectedValue(LvProdutos).ToString.ToInteger();DM.cdsProdutos.Locate(‘ID_PRODUTO’,ID_Item,[]);TabControl.ActiveTab:= Detalhe;end;
Veja que chamamos a função ‘GetSelectedValue’ ela irá pegar o valor que está no campo ‘Item.LookupData’, ou seja, o ‘ID_PRODUTO’ que ligamos no ‘TListView’, veja abaixo imagem do BindVisually do formulário de produtos e listagem da função ‘GetSelectedValue’:
abril201418
Listagem 14 – Função Captura Item.LookupData.
Listagem 15 – Botão Incluir.
Imagem 9 – BindVisually Produtos.
Veja que já ligamos também os campos em 2 TEdtis, ‘edtProduto’ e ‘edtValor’, que se encontram na aba detalhe conforme notamos na imagem 7.
functionGetSelectedValue(AObject: TObject): TValue;varLEditor: IBindListEditorCommon;beginLEditor :=GetBindEditor(AObject, IBindListEditorCommon) as IBindListEditorCommon;Result := LEditor.SelectedValue;end;
Agora que os dados estão em exibição, resta apenas inserirmos os itens que vamos enviar para o servidor, para isso temos o botão ‘Incluir’ no evento ‘OnClick’ insira a seguinte listagem:
procedurebtnIncluirClick(Sender: TObject);Var B: Boolean;NString: String;begin RepeatNString:= InputBox(‘Informe a Quantidade’,’Quantidade’,’’);If NString = ‘’ thenBeginIfMessageDlg(‘Número Vazio ou Inválido. DesejaCancelar ?’,TMsgDlgType.mtWarning,mbYesNo,0)= mrYes
then Begin B:= True;FrmxProdutos.Close; Exit;end;end; If NString<> ‘’ then Begin TryQtd:=StrToInt(NString); B:= True; Except on E: Exception doBeginShowMessage(‘Quantidade deve ser Numérica’);B:= False; End; End; End; Until B = True; TryFrmxPedido.cdsItens.Insert;FrmxPedido.cdsItensID_PEDIDO.AsInteger:= FrmxPedido.cdsItens.RecordCount+1;FrmxPedido.cdsItensPRODUTO.AsString:= edtProduto.Text;FrmxPedido.cdsItensVALOR_UN.AsFloat:= StrToFloat(edtValor.Text);FrmxPedido.cdsItensQUANTIDADE.AsInteger:= Qtd;FrmxPedido.cdsItensTOTAL.AsFloat:= StrToFloat(edtValor.Text) * Qtd;FrmxPedido.cdsItensID_VENDEDOR.AsFloat:= CodVendedor;FrmxPedido.cdsItens.Post; Except on E: Exception doShowMessage(‘Falha ao Gravar! - ‘+E.Message);End; // Atualiza o Client TemporárioFrmxPedido.cdsItens.Close;FrmxPedido.cdsItens.Open;ShowMessage(‘Produto Adicionado com Sucesso!’);TabControl.ActiveTab:= Produtos;end;
abril2014 19
Listagem 16 – Botão Finalizar Pedido.
Agora que já adicionamos os produtos em nosso ‘cdsItens’ que está em memória podemos retornar para a tela de pedidos para finalizarmos(imagem 5 demonstra como os itens serão exibidos após a inclusão).
No botão finalizar que criamos inicialmente insira o seguinte comando no evento ’OnClick’:
procedureTFrmxPedido.btnFinalizaClick(Sender: TObject);Var Stream: TStringStream; B: Boolean;beginifcdsItens.RecordCount> 0 then Begin Try Stream:=TStringStream.Create(cdsItens.XMLData);Stream.Position:= 0;DM.Metodos.ServerMethodName:= ‘TServerMethods1.GerarPedido’;DM.Metodos.ParamByName(‘Lista’).AsString:= Stream.DataString;DM.Metodos.ExecuteMethod; B:=DM.Metodos.ParamByName(‘ReturnParameter’).AsBoolean;if B = True thenShowMessage(‘Enviado com Sucesso!’)elseShowMessage(‘Falha ao Enviar para o Servidor’);Except on E: Exception doShowMessage(‘Falha ao Enviar: ‘+E.Message);End;Stream.Free;cdsItens.EmptyDataSet;cdsItens.Close;cdsItens.Open;EndelseShowMessage(‘Adicione Produtos para Finalizar!’);end;
Imagem 10 – Pedido Enviado.
Na Listagem 16 criamos uma String no formato XML com todos os dados que inserimos no TClientDataSet em memória e enviamos para o servidor re-alizar o processo de inserção, se tudo correr bem a função irá retornar ‘True’ e vamos exibir a mensagem de confirmação, caso haja erros ele retornará ‘False’.
Conclusão
Neste artigo vimos como podemos trabalhar com troca de informações entre Cliente e Servidor utilizando a plataforma Android, fizemos um exem-plo simples de envio de pedidos que pode ser implementado da forma que desejarem.
Espero que tenham gostado deste artigo e até a próxima.
Jeferson Silva de LimaConsultor The Club.
Sobre o autor
abril201420
No final de 2013, a Microsoft lançou uma nova versão para sua ferramenta de desenvolvimento, o Visual Studio 2013. Vou mostrar neste artigo, algumas novidades inerentes dessa nova versão. Podemos dizer que o foco principal é TFS (controle de versão, tarefas, metodologias ágeis etc) e Azure.
Vou me ater as novidades que o desenvolvedor vai usar no dia-a-dia no desenvolvimento de seus projetos com o Visual Studio.
Novidades do Visual Studio 2013
ASP.NET
Muitas novidades presente na versão 2013 para aplicações Web. Uma bem interessante é a unificação de templates de projetos. Em versões anteriores, você tinha templates para criar ASP.NET Web Application, ASP.NET MVC etc (como podemos ver na Figura 1).
Figura 1. Templates diferentes para os diversos tipos de projetos nas versões anteriores do Visual Studio
abril2014 21
No Visual Studio 2013 você tem apenas um template (Figura 2).
Figura 2. Novo template unificado para aplicações Web
Ao clicar no template, um editor é aberto, onde você escolhe o tipo de aplicação Web deseja criar (Figura 3).
Figura 3. Escolhendo o tipo de aplicação Web
Achei mais limpo, mais enxuto, pois não temos uma quantidade enorme de templates para aplicações Web.
Dica: isso ocorre quando você escolhe o .NET Framework 4.5. Para versões anteriores, as opções são as mesmas de antigamente.
MVC 5
A versão 5 do ASP.NET MVC esta presente no Visual Studio 2013 e trás uma novidade muito legal, o BootStrap. Esse front end possui vários temas e plugins que podem ser usados em aplicações Web. Uma vantagem é que ele esta preparado para adaptar-se ao equipamento que você esta usando para visualizar a aplicação.
Ou seja, com browser do PC ou celular, seu site fica adaptado para o tipo de equipamento que esta consumindo a aplicação. Seu layout é mais limpo e bastante usado. Dê uma olhada no meu site (www.lucianopimenta.com) onde
uso o BootStrap há algum tempo (admito, preciso atualizar o site )
Para criar uma aplicação ASP.NET MVC, acesse o template ASP.NET Web Application e escolha MVC (Figura 3). Ao abrir, temos um projeto pronto para o uso, basta apertar F5 e visualizar o layout (Figura 4).
Figura 4. Aplicação web usando BootStrap
Para um pequeno teste, redimensione seu browser e veja que o layout se adapta ao tamanho da tela.
No site do BootStrap (www.getbootstrap.com) temos CSS, componentes, JavaScript e uma biblioteca customizada que você pode configurar para ser usada em seus projetos. Vale a pena passar na seção JavaScript e ver algumas funcionalidades como: janelas modal, NavBar, Tabs, ToolTips, paineis, etc.
Peek Definition
Quando você precisa saber a definição de uma classe ou método, basta usar o atalho F12 e o Visual Studio irá redirecionar para o objetivo (classe/método) desejado. Com o Peek Definition, usando as teclas Alt+F12, podemos visualizar no arquivo que estamos trabalhando, o corpo da classe ou método (Figura 5).
Figura 5. Usando Peek Definition para visualizar o corpo de uma classe
Na Figura 5, usamos as teclas Alt+F12 e a definição da classe Permissao é visualizada na mesma tela, sem abrir outra aba (a do arquivo da classe). O mesmo vale para métodos.
abril201422
Code Lens
Quando você precisa saber em quais classes esta declarado determinado método, com certeza já usou o atalho, clicando com o botão direito e esco-lhendo Find All References. Com o Code Lens ficou ainda mais fácil.
Antes da declaração do método, existe um link com a quantidade de references desse método. Ao clicar, temos o arquivo e linha onde esta sendo usado o método (Figura 6).
Figura 6. Onde esta sendo referenciado o método com o Code Lens
Scroll Bar
Caso você goste de rapidez para procurar seu código, você gostará da nova scroll bar do Visual Studio 2013. Clique com o botão direito na scroll bar e escolha a opção Scroll Bar Options. No editor, marque Use map mode for vertical scroll bar.
Por fim, em Souce overview escolha Narrow (Figura 7).
Figura 7. Configurando o preview na scroll bar
Agora, será mostrada uma nova scroll bar. Basta passar o mouse, para visu-alizar o código (Figura 8). Para acessar a linha do código, basta um duplo clique.
Figura 7. Preview da nova scroll bar
Heads up display
É uma funcionalidade muito interessante. Mesmo que tenhamos um controle de versão poderoso como o TFS e outros existentes no mercado, essa funcionalidade lista os usuários que alteraram determinado método (um popup mostra as informações ao colocar o mouse), qual tarefa estava
atribuída a essa modificação/correção, bem como testes que passaram ou não, usando testes unitários.
Ou seja, temos informações importantes sobre modificações do código. Veja na Figura 8 a funcionalidade em execução (Fonte: http://geekswithblogs.net/sdorman/archive/2013/09/09/153974.aspx).
Figura 8. Popup que mostra os usuários que modificaram o método
Controle de versão Git
Git é um controle de versão gratuito, integrado ao Visual Studio 2013. Uma das vantagens do Git é que podemos trabalhar com repositório local e esta totalmente integrado ao Visual Studio. Imagine que você trabalha em casa ou esta em visita ao cliente, e não tem acesso ao TFS da empresa.
Você pode criar um repositório local, sincronizar com o TFS, fazer as mo-dificações e aplicá-las novamente no TFS. Muito fácil e simples.
Vamos criar um repositório local para exemplificar. No Visual Studio 2013, abra ao Team Explorer. Para quem esta acostumado com o Team Explorer, temos um novo item, o Local Git Repositories (Figura 9).
Figura 9. Opção do Git no Team Explorer
Clique em New e escolha o local do repositório (exemplo: “C:\Reposito-rio”). Já temos o local onde os fontes serão armazenados. Dê um duplo clique no repositório criado. Será mostrada a tela para configuração do controle de versão e do Git.
Nota: Você pode criar a pasta de repositório no próprio diretório onde salvar o projeto.
Deverá ser mostrada uma mensagem indicando que uma ferramenta não esta instalada. Clique em Install duas vezes, para que a mesma seja instalada via Web Plataform Installer. Logo após instalado, podemos configurar as opções de branch, changes etc (Figura 10).
abril2014 23
Figura 10. Configurações do Git no Team Explorer
Na opção Solutions, clique em New e crie um novo projeto. Precisamos comitar os arquivos para o repositório. Clique com o botão direito na Solution e escolha Commit. Note que todos os arquivos do projeto estão com a “marca” de add (Figura 11).
Figura 11. Copiando os arquivos para o repositório
Nota: para realizar o commit é necessário configurar um e-mail nas configurações do Git.
Digite uma mensagem e clique em Commit. Note que agora, todos os ar-quivos tem um desenho de cadeado azul ao lado. Caso você altere um arquivo, será mostrado um ícone de um check vermelho, indicando que o arquivo esta sendo editado (Figura 11).
Figura 11. Arquivos do controle de versão do Git no Visual Studio
Se você esta acostumado a usar um controle de versão, o restante é igual: checkin, checkout, branchs etc. Se você deseja saber mais sobre como trabalhar com o Git, aconselhe esse link onde constam várias dicas de configurações da ferramenta: http://msdn.microsoft.com/pt-br/library/hh850437.aspx.
O Git possui uma interface gráfica para que você possa configurar ou clonar repositórios, trabalhar com os arquivos alterados fora do Visual Studio. Na ferramenta podemos verificar versões anteriores de arquivos, assim como voltar versão de arquivos etc (Figura 12).
Veja a figura 12
abril201424
Figura 12. Ferramenta visual do Git para verificar modificações de arquivos
Conclusões
Vimos neste artigo várias novidades do Visual Studio 2013. Quis mostrar aqui, apenas as que o desenvolvedor vai usar no seu dia-a-dia de programa-ção, mas o Visual Studio 2013 tem muitas outras funcionalidades que valem a pena uma estudada. O Git vale a pena uma estudada maior para entender o seu funcionamento e como integrar o repositório local com o TFS. Uma boa dica de estudos.
Um grande abraço a todos e até a próxima! www.lucianopimenta.net
Luciano PimentaLuciano Pimenta (NOVO DOMINIO: www.lucianopimenta.com) é desenvolvedor Delphi/C#
para aplicações Web com ASP.NET, Windows com Win32 e Windows Forms com .NET. Palestrante da 4ª edição da Borland Conference (BorCon) e da 1ª Delphi Conference.
É MVP Embarcadero, grupo de profissionais que ajudam a divulgar o Delphi no mundo. Atualmente é desenvolvedor da SoftDesign fábrica de softwares em Porto Alegre-RS.
Autor de mais de 90 artigos e de mais de 600 vídeos aulas publicadas em revistas e sites especializados, além de treinamentos presenciais e multimídias. É consultor da FP2 Tecnologia (www.fp2.com.br) onde ministra cursos de programação e banco de dados.
Sobre o autor
abril2014 25
Olá amigos do The Club, estou aqui novamente com mais um artigo sobre a plataforma Android. Neste artigo vou expli-car e exemplificar o uso dos componentes denominados “Pickers”, traduzindo para o português os “Selecionado-res”. Trabalharemos com o “DatePicker”(para selecionar a
Data) e o “TimePicker”(para selecionar a Hora) sobrescrevendo e implemen-tando as devidas classes. Pude perceber nesta nova versão do Android algumas melhorias e implementações de novos recursos nestes tipos de controles. Cada “Picker” fornece controles para selecionar parte da Data (dia, mês e ano) ou Hora (hora, minuto e AM/PM). Uma das vantagens do uso destes recursos é que os mesmos nos ajudam a garantir que os usuários possam escolher um formato de data ou hora válido e pré-formatado.
Classe “DialogFragment”
A principal classe que usaremos é a “DialogFragment”.Esta classe gerencia o ciclo de vida dos “Dialogs”, que nada mais é do que a caixa de diálogo que exibimos flutuando em cima da janela de atividade principal quando instan-ciamos um “Picker”. Os principais métodos sobrescritos são: OncreateDialog(), OnDateSet(), OnTimeSet() e o Show() . Todos estes métodos serão explicados mais adiante. De acordo com a documentação oficial do Android para Desen-volvedores, a classe “DialogFragment” foi adicionada pela primeira vez para a plataforma no Android 3.0 (API nível 11), ressaltando a compatibilidade dos aplicativo desenvolvidos para versões anteriores, estando disponível na biblioteca de suporte para compatibilidade.
(Importante informar que neste artigo estou utilizando a versão 4.1.2 (API nível 16) do Android, portanto, não foram realizados os testes com versões anteriores descritos acima).
Método OncreateDialog()
Este método permite a personalização da caixa de diálogo. É utilizado para mostrar um “AlerDialog” ao invés de um “Dialog” genérico. Este método é cha-
Android - Trabalhando com o DatePicker e TimePicker
mado após o evento “OnCreate” e antes do “OnCreateView”. A implementação padrão tem como parâmetro de entrada o último estado da instância salva no Fragmento ou Nulo se o fragmento for recém criado e de retornou ma nova instância de diálogo a ser exibida. Para o nosso artigo iremos retornar a classe “TimerPickerDialog” para Hora e “DatePickerDialog” para Data.
Método OnDateSet() e OnTimeSet()
Método responsável pelo retorno da Data ou Hora selecionada. Possui como parâmetros de entrada os seguintes itens: o componentes em si, o ano, o mês e o dia. Podemos utilizar este método para atualizar algum componente na tela, como por exemplo o “TextView”.
Método Show()
Responsável pela chamada do objeto, sendo que uma das implementações deste método possui como retorno um valor inteiro, que serve para identificar o identificador da transação, se a mesma foi confirmada ou não. Os parâmetros de entrada são: a transação existente e a tag para este fragmento.
Criando o exemplo prático
O nosso exemplo envolverá os dois componentes, o DatePicker e o Ti-mePicker.Para isto descreverei todos os passos daqui pra frente. Inicie uma aplicação do Zero clicando em “File/New/Android Project...” (Não fiz nada de diferente nesta parte)
Criando o “Lay-Out”
O aplicativo possuirá um “RelativeLayout” onde conterá dois “TextViews” e dois “Buttons”. Ver Imagem 01.
abril201426
Listagem 01: XML do Arquivo de layout.
Figura 01: Layout.
A Imagem 01 nos dá uma noção do Lay-out.O XML correspondente (Listagem 01)
<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/txtData” android:layout_width=”fill_parent” android:layout_height=”wrap_content” android:text=”Data” android:textSize=”18sp” />
<Button android:id=”@+id/btnData” android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_below=”@+id/txtData” android:layout_centerHorizontal=”true” android:text=”Escolher uma data” android:onClick=”MostrarData”/>
<TextView android:id=”@+id/txtHora” android:layout_width=”fill_parent” android:layout_height=”wrap_content” android:layout_below=”@+id/btnData” android:layout_centerHorizontal=”true” android:layout_marginTop=”18dp” android:text=”Hora” android:textSize=”18sp” />
<Button android:id=”@+id/btnHora” android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_alignLeft=”@+id/btnData” android:layout_below=”@+id/txtHora” android:onClick=”MostrarHora” android:text=”Escolher uma Hora” />
</RelativeLayout>
abril2014 27
Codificando o exemplo
Possuiremos apenas uma atividade que codificaremos logo em seguida.
Utilizaremos algumas bibliotecas adicionais para desenvolver este exem-plo, veja abaixo:
package com.example.artigo_datepicker;
import android.os.Bundle;import android.app.Activity;import android.app.DatePickerDialog;import android.app.Dialog;import android.app.DialogFragment;import android.app.FragmentTransaction;import android.app.TimePickerDialog;import android.app.TimePickerDialog.OnTimeSetListener;import android.widget.DatePicker;import android.widget.TextView;import android.widget.TimePicker;import android.widget.Toast;import java.util.Calendar;import android.text.format.DateFormat;import android.view.View;
As principais são: “DialogFragment”, “FragmentTransaction”,“TimePickerDialog” e “DatePickerDialog” – ambas utilizadas para formar
as classes principais: “DatePickerFragment” e “TimePickerFragment”.
public class MainActivity extends Activity { private TextView txtData, txtHora; private int Ano, Mes, Dia, Hora, Minuto;
Todas as variáveis serão do tipo “Private” (privadas), sendo txtData e txtHora para armazenar o resultado em um “TextView” e as outras cinco do tipo Inteiras para receber o Ano, Mês, Dia, Hora e Minuto. Foi necessário criar estas variáveis globais pois utilizaremos este resultado várias vezes em nosso aplicativo.
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); InicializaListeners(); final Calendar cal = Calendar.getInstance(); Ano = cal.get(Calendar.YEAR); Mes = cal.get(Calendar.MONTH); Dia = cal.get(Calendar.DAY_OF_MONTH); Hora = cal.get(Calendar.HOUR); Minuto = cal.get(Calendar.MINUTE); AtualizarData(); AtualizarHora(); }
No evento OnCreate() é onde Inicializaremos nossas variáveis do tipo TextView e com o auxílio da classe “Calendar” recuperamos a Data e Hora Atuais com o método “get”. Esta classe possui as propriedades necessárias para receber os dados. Os procedimentos “AtualizarData()” e “AtualizarHora()” tam-bém serão disparados neste momento.(Ambos serão detalhados mais adiante)
public void InicializaListeners() { txtData = (TextView) findViewById(R.id.txtData); txtHora = (TextView) findViewById(R.id.txtHora); }
Método responsável por inicializar as variáveis.
public class DatePickerFragment extends DialogFragment implements DatePickerDialog.OnDateSetListener {
É muito comum criarmos classes dentro de classes. Isto fica a cargo do de-senvolvedor. Para uma maior simplicidade neste artigo iremos criar e detalhar
abril201428
classes dentro de nossa atividade principal. A Classe “DatePickerFragment” irá herdar da classe principal “DialogFragment”. Irá também implementar os métodos da “DatePickerDialog.OnDateSetListener”.
@Overridepublic Dialog onCreateDialog(Bundle savedInstanceState) {final Calendar calendario = Calendar.getInstance(); Ano = calendario.get(Calendar.YEAR); Mes = calendario.get(Calendar.MONTH); Dia = calendario.get(Calendar.DAY_OF_MONTH);
return new DatePickerDialog(getActivity(), this, Ano, Mes, Dia); }
O método “OncreateDialog”, como foi dito anteriormente, ele é respon-sável pela personalização da caixa de diálogo. Iremos criar uma variável do tipo “Calendar” e ir atribuindo na sequencia nas variáveis inteiras: Ano, Mês e Dia. Este método irá nos retornar a instância configurada e formatada do “DatePickerDialog”.
@Overridepublic void onDateSet(DatePicker view, int year, int month, int day) { Ano = year; Mes = month; Dia = day; AtualizarData(); MensagemData(); }
Já o método OnDateSet é disparado no momento que atribuímos alguma modificação no componente. Recebe como parâmetro o próprio DatePicker e as variáveis Ano, Mês e Dia. Dentro dele possuímos outros dois procedi-mentos. O “AtualizarData”, que nada mais é um método para atualizar a data no componente “txtData” e o “MensagemData” para exibir uma mensagem informativa com a data alterada ao usuário.
@Overridepublic int
show(FragmentTransaction transaction, String tag) { return super.show(transaction, tag); }
Método principal para chamar o objeto. }
private void AtualizarData() {txtData.setText(new StringBuilder().append(Dia).append(“/”).append(Mes + 1).append(“/”).append(Ano).append(“ “)); }
Utilizamos a classe “StringBuilder” para realizar a junção das variáveis Dia, Mês e Ano no formato padronizado e por final atribuímos para a variável “txtData”.
private void MensagemData() {Toast.makeText(this, new StringBuilder().append(“Data: “).append(txtData.getText()), Toast.LENGTH_SHORT).show(); }
A classe “Toast” dará uma mensagem informativa ao usuário.
public void MostrarData(View v) {DialogFragment ClasseData = new DatePickerFragment();ClasseData.show(getFragmentManager(), “datepicker”); }
Este é o método que será disparado ao clicar no botão “Escolher uma Data”. Ele instanciará a classe “DatePickerFragment” e invocará o método “Show” com os devidos parâmetros. A Imagem 02 nos dará uma ideia de como está ficando nosso exemplo.
abril2014 29
Figura 02: DatePicker.
Teremos um trabalho identico para trabalharmos com o “TimePicker”. O primeiro passo seria criarmos uma classe para esta tarefa.
public class TimePickerFragment extends DialogFragment implements OnTimeSetListener {
A classe TimePickerFragment herdará da mesma “DialogFragment” im-plementando os métodos da “OnTimeSetListener”.
@Overridepublic Dialog onCreateDialog(Bundle savedInstanceState) { final Calendar c = Calendar.
getInstance(); Hora = c.get(Calendar.HOUR_OF_DAY); Minuto = c.get(Calendar.MINUTE);
return new TimePickerDialog( getActivity(), this, Hora, Minuto, DateFormat.is24HourFormat(getActivity()) ); }
Seguindo a mesma lógica anterior, o método “OnCreateDialog” também irá nos retornar uma caixa de diálogo já configurada e formatada no padrão de Horas. A única diferença é que usaremos a classe “TimePickerDialog” junto com o método “is24HourFormat” que podemos conferir no código acima.
@Overridepublic void onTimeSet(TimePicker view, int hourOfDay, int minute) { Hora = hourOfDay; Minuto = minute; AtualizarHora(); MensagemHora(); }
Faremos o mesmo, criando outros dois procedimentos: o “AtualizarHora” e o “MensagemHora”.
@Overridepublic int show(FragmentTransaction transaction, String tag) { return super.show(transaction, tag); }
Também sobrescrevemos o método “show” (Citado logo no início do artigo).
} private void AtualizarHora()
abril201430
Figura 03: TimePicker.
Thiago Cavalheiro Montebugnoliadora aprender novas tecnologias. Formado pela Faculdade de Tecnologia de Botucatu
– SP (FATEC), já desenvolveu softwares utilizando a plataforma .NET, Delphi junto com Banco de Dados SQL Server e Firebird. Atualmente trabalha no Centro de Processamento de Dados da Prefeitura Municipal de Itaí-SP é colunista mensal da Revista The Club Megazine e é consultor Técnico do The Club. Possui as seguintes certificações: MCP - Microsoft Certified Professional, MCTS - Microsoft Certified Technology Specialist, MCAD - Microsoft Certified Application Developer e MCSD - Microsoft Certified Solution Developer.
Sobre o autor
{txtHora.setText(new StringBuilder().append(Hora).append(“:”).append(Minuto)); } Formataremos no formato correto e setamos para a variável “txtHora”.
private void MensagemHora() {Toast.makeText(this, new StringBuilder().append(“Hora: “).append(txtHora.getText()), Toast.LENGTH_SHORT).show(); }
Novamente utilizo a classe “Toast” para informar ao usuário.
public void MostrarHora(View v) {DialogFragment ClasseHora = new TimePickerFragment(); ClasseHora.show(getFragmentManager(), “timePicker”); }
O Método “MostrarHora” será utilizado no evento “Onclick” do botão “Escolher uma Hora”. Neste momento será instanciado a classe “TimePickerFragment” junto com o método “Show”. Ver Imagem 03. }
Veja a figura 13.
Conclusões
Procurei neste artigo abordar o uso destes importantes componentes na linguagem Android. Inicialmente procurei familiarizar o leitor com sua principal classe “ DialogFragment” seguindo os principais métodos implementados ao decorrer do artigo. Desenvolvi dois exemplos práticos envolvendo o TimePicker (Horas) e DatePicker (Datas). É importante salientar que com base nestes exem-plos podemos criar e personalizar outros recursos da maneira que desejarmos. Vou ficando por aqui, um abraço e até o mês que vem!
Referênciashttp://developer.android.com/reference/android/widget/DatePicker.htmlhttp://developer.android.com/guide/topics/ui/controls/pickers.html
abril2014 05
abril2014