outubro2014

outubro2014

outubro2014 03

18

Índice

Dicas The Club

28

Editorial

04

09

Autor: Hamden Vogel

05

Autor: Lucas Vieira de Oliveira

23Visual Studio 2013 – Apresentando o Visual Studio Online

Autor: Thiago C. Montebugnoli

Autor: Luciano Pimenta

Delphi XE5 - Trabalhando com estilos na VCL – Delphi XE5

Versionamentos de Arquivos o THVCheckVersion – Parte 2

Android Studio - Parte IV

outubro201404

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

pelos seus respectivos proprietários.

Thiago Montebugnoli - Editor Chefethiago@theclub.com.br

Caro leitor,

Neste ano já alcançamos a edição de nº 10 da revista The Club Megazine e é sempre com muita satisfação que apresento temas úteis ao dia-a-dia dos senhores. Nosso colunista Luciano Pimenta continua trabalhando com a IDE “Android Studio”. Neste artigo ele demonstra alguns controles mais avançados, como o “ProgressBar”, “TabHost”, “SearchView” e “ListView”, implementando características de customização dos mesmos, se tornando muito útil tanto para o aprendiz quanto ao programador mais experiente. Já nosso colaborador mensal Hamden Vogel, vem com a segunda parte do artigo “Versionamentos de Arquivos com o THVCheckVersion”. Desta vez ele abrange outros recursos para serem implantados neste componente, complementando o artigo do mês de Setembro, o deixando pronto para ser explorado nos projetos. Utilizando a partir da versão XE2 do Delphi, Lucas Vieira de Oliveira, escreveu o artigo “Trabalhando com estilos na VCL”, uma dica que será de bom agrado para todo programador que deseja deixar o visual muito mais agradável de suas aplicações. Eu descrevi as funcionali-dades de uma ferramenta da Microsoft, o “Visual Studio Online”, um ser-viço nas nuvens que além de fazer o controle do código-fonte, traz outras características de extrema importancia para o desenvolvimento em equipe.

Para finalizarmos, recomendo a leitura de nossa seção de dicas e truques, sempre com as melhores dicas no mundo da programação.

Um Forte 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: cadastro@theclub.com.brSuporte: suporte@theclub.com.br Informações: info@theclub.com.brSkype Cadastro: theclub_cadastro

Skype Suporte: theclub_linha1 theclub_linha2 theclub_linha3

www.twitter.com/theclubbr

Copyright The Club 2013

Diretor TécnicoMarcos César Silva

DiagramaçãoVitor M. Rodrigues

DesignVitor M. Rodrigues

RevisãoDenise Blair

ColunistasHamden Vogel

Jeferson Silva de LimaLuciano Pimenta

Lucas Vieira de OliveiraThiago Cavalheiro Montebugnoli

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

outubro2014 05

Olá pessoal, no artigo deste mês vamos mostrar um recurso nativo e bem interessante do Delphi XE5, na verdade este recurso está presente na instalação do Embarcadero RAD Studio desde sua versão XE2. É o VCL Style.

Foi também na versão XE2 que a Embarcadero incorporou ao RAD Studio a plataforma de desenvolvimento Firemonkey, e com ela vieram muitos recursos de personificação da aparência das aplicações desenvolvidas nesta plataforma, além é claro de muitas outras funcionalidades que possui o Firemonkey. A revista The Club publicou alguns artigos exemplificando o uso do componente “TstyleBook”, por exemplo, é uma ótima forma de se personalizar uma aplicação e bastante simples também.

Mas como o assunto deste artigo não é o Firemonkey, vamos direto ao ponto, a VCL Style é um recurso nativo do Delphi, ou seja, não depende de nenhum componente de terceiros. E sua aplicação é bem simples. Vamos direto à prática então.

Onde configurar o VCL Style?

A configuração do VCL Style fica na janela de Project Options, ou seja, onde fazemos a configuração de nosso projeto. Vale ressaltar que essa configuração será apenas para o projeto aberto no Delphi. É uma configuração individual para cada projeto. Portanto crie um novo projeto “VCL Forms Application - Delphi” para começarmos. Para abrir a janela Project Options acesse o menu (Project -> Options) ou usando as teclas de atalho (Shift + Ctrl + F11).

A janela é dividida em duas partes, ao lado esquerdo fica o um menu em árvore com as opções de configurações do projeto atual agrupadas por categorias. O restante da janela é a área onde são exibidas as opções de con-figuração de cada categoria.

Acesse na árvore de menu a opção “Application” e selecione sua sub-categoria “Apearence” (ver figura 1). Serão exibidos dois grupos de opções

de configurações, “Application Settings” e “Custom Styles”. A Embarcadero já disponibiliza alguns estilos juntamente com a instalação do RAD Studio, estes são listados no grupo de opções Custom Styles. Pode-se também criar um novo estilo personalizado ou também editar qualquer outro estilo já configurado usando a ferramenta “Bitmap Style Designer”, mas isso fica para um próximo artigo.

Figura 1 – Configuração de estilo na janela Project Options

Repare na figura 1, que foi checado o estilo “Luna”, note também que a

caixa de seleção “Default Style” ficou definida com o tema checado. O estilo selecionado em Default Style será o qual ficará aplicado ao projeto por padrão todo vez que o projeto for executado. Todo estilo definido nesta caixa, exceto o padrão estilo do Windows, será definido automaticamente no arquivo Source de seu projeto, com a extensão (.DPR). Veja na listagem 1 como ficará esta definição. Para acessar o arquivo Source de seu projeto, clique no menu “Project” e depois em “View Source”.

Delphi XE5 - Trabalhando com estilos na VCL – Delphi XE5

outubro201406

Listagem 1 – Definição do estilo padrão do projeto no código

program Exemplo1;

uses Vcl.Forms, Vcl.Themes, Vcl.Styles, unPrincipal in ‘unPrincipal.pas’ {Form1};

{$R *.res}

begin Application.Initialize; Application.MainFormOnTaskbar := True; Application.Title := ‘Exemplo TheClub’;

TStyleManager.TrySetStyle(‘Luna’);

Application.CreateForm(TForm1, Form1); Application.Run;end.

Note que foi usada a função “TrySetStyle” da classe “TstyleManager”, onde é passado como parâmetro o nome do estilo que deseja aplicar ao projeto, ela ainda possui um parâmetro oculto do tipo booleano que por padrão assume “True”, este parâmetro define se será exibida ou não uma mensagem de aviso caso o estilo não seja encontrado. Essa função retorna um valor booleano “False” caso dê erro e “True” em caso contrário.

Vale ressaltar que esta linha de código, onde informa o estilo, foi adicio-nada automaticamente pelo Delphi. Ainda sim, é interessante conhecer este método, pois pode-se ter a necessidade de alterar o estilo do projeto em tempo de execução, e neste caso este método seria uma mão na roda. Para por chamá-lo em uma Unit de seu projeto é necessário adicionar na Uses sua biblioteca, a “Vcl.Themes”. Caso a biblioteca “Vcl.Styles” ainda não esteja adicionada ao Source do projeto, você deverá adicioná-la na Unit em que for realizar a alteração dos temas, pois é nesta biblioteca que ficam as classes de estilos do Delphi.

Se quiser ver uma prévia de como ficará o estilo em seus formulários, basta selecionar um estilo e clicar no botão “Preview”, será exibido um formulário com a estilização do tema escolhido. Veja a figura 2 a pré-visualização do estilo “Cyan Night”, um dos estilos que vem com a instalação do RAD Studio XE5.

Figura 2 – Pré-visualização do estilo Cyan Night

Podem ser checados vários estilos de uma vez, assim as configurações destes estilos serão incorporadas ao executável de seu projeto, e assim que pre-cisar alternar entre eles, basta chamar o método “TrySetStyle”. Caso chame um estilo pela função “TrySetStyle” que não esteja vinculado ao seu projeto, será exibida uma mensagem de erro, informando o erro ao usuário (ver figura 3).

Figura 3 – Falha ao trocar ao aplicar o estilo ao projeto

Para confirmar o estilo padrão de seu projeto basta clicar no botão “Ok” da janela Project Options.

Agora iremos adicionar alguns componentes de controle visuais ao formu-lário e ver a transformação que seu formulário sofrerá com o novo estilo defini-do. Colocamos alguns componentes em um formulário e aplicamos ao projeto o estilo padrão “Luna”, veja na figura 4 como ficou a aplicação deste estilo.

Veja a Figura 4.

Exemplo prático

Agora que sabemos como aplicar os estilos ao nosso projeto, podemos criar um projeto de exemplo mostrando como fazer a alteração de estilos em nosso projeto em tempo de execução.

Crie um novo projeto “VCL Forms Application - Delphi”. Salve a Unit prin-

outubro2014 07

Listagem 2 – Codificação do método PreencheEstilos

cipal com o nome “unPrincipal” e o projeto como o nome “VCLEstilos”, em um diretório de sua preferência.

Adicione uma Label com o Caption “Selecione um estilo...” e logo abaixo dela adicione um ComboBox, altere a propriedade Style do mesmo para “cs-DropDownList”, assim ele ficará desativado para edição da propriedade Text e o usuário terá apenas a opção de selecionar os itens que já compõem a lista.

A lista do ComboBox será preenchida com os estilos que forem vinculados ao projeto, neste exemplo iremos checar todos os estilos que vem por padrão na instalação do RAD Studio XE5. Portanto acesse a tela Project Options (Shift + Ctrl + F11) e marque todos os estilos disponíveis. Não se esqueça de alterar o Default Style para “Windows”, pois iremos abrir este por padrão.

Depois de vinculado todos os estilos ao projeto agora vamos criar um procedimento para alimentar a lista do ComboBox quando o formulário principal for criado em memória. Veja na listagem 2 a codificação do método “PreencheEstilos”.

private { Private declarations } procedure PreencheEstilos(ComboBox: TComboBox); { Use as teclas de atalho (Shift + Ctrl + C) para criar o corpo da procedure. }

procedure TForm1.PreencheEstilos(ComboBox: TComboBox);begin ComboBox.Clear;

// Adicione o estilo definido

como padrão ao primeiro item do ComboBox. ComboBox.Items.Add(‘Windows’); ComboBox.Items.Add(‘Amakrits’); ComboBox.Items.Add(‘Amethyst Kamri’); ComboBox.Items.Add(‘Aqua Graphite’); ComboBox.Items.Add(‘Aqua Light Slate’); ComboBox.Items.Add(‘Auric’); ComboBox.Items.Add(‘Carbon’); ComboBox.Items.Add(‘Charcoal Dark Slate’); ComboBox.Items.Add(‘Cobalt XEMedia’); ComboBox.Items.Add(‘Cyan Dusk’); ComboBox.Items.Add(‘Cyan Night’); ComboBox.Items.Add(‘Emerald Light Slate’); ComboBox.Items.Add(‘Golden Graphite’); ComboBox.Items.Add(‘Iceberg Classico’); ComboBox.Items.Add(‘Lavender Classico’); ComboBox.Items.Add(‘Light’); ComboBox.Items.Add(‘Luna’); ComboBox.Items.Add(‘Metropolis UI Black’); ComboBox.Items.Add(‘Metropolis UI Blue’); ComboBox.Items.Add(‘Metropolis UI Dark’); ComboBox.Items.Add(‘Metropolis UI Green’); ComboBox.Items.Add(‘Obsidian’); ComboBox.Items.Add(‘Ruby Graphite’); ComboBox.Items.Add(‘Sapphire Kamri’); ComboBox.Items.Add(‘Silver’); ComboBox.Items.Add(‘Slate Classico’); ComboBox.Items.Add(‘Smokey Quartz Kamri’); ComboBox.Items.Add(‘Turquoise Gray’);

Figura 4 – Exemplo com o estilo Luna

outubro201408

Listagem 3 – Chamada do método PreencheEstilos

Listagem 4 – Chamada da função TrySetStyle para alteração de estilos em tempo de execução

// Exibe no ComboBox o tema padrão definido. ComboBox.ItemIndex := 0;end;

Adicionamos neste procedimento todos os estilos vinculados ao projeto. Os nomes dos estilos deverão estar iguais aos que são exibidos na janela “Project Options”. Não se preocupe com letras maiúsculas e minúsculas, pois neste caso o Delphi não fará distinção.

O estilo definido por padrão no projeto deverá ser o primeiro a ser adi-cionado à lista, pois assim sabemos que para exibi-lo no ComboBox, bastará atribuir o índice 0 (zero) à propriedade ItemIndex do componente.

Agora adicione no evento OnCreate do formulário a chamada do método “PreencheEstilos” (ver listagem 3).

procedure TForm1.FormCreate(Sender: TObject);begin PreencheEstilos(ComboBox1);end;

Note que apenas passamos o ComboBox como parâmetro e o método se encarregará de preenchê-lo com os estilos que definimos anteriormente ao projeto.

Neste momento os estilos ainda não estão sendo alterados em tempo de projeto. Vamos ao código que irá realizar esta operação. Ainda em tempo de projeto, selecione o componente ComboBox e acesse na janela Object Inspector a aba de eventos e dê um duplo click no evento OnChange. Neste evento iremos utilizar a função “TrySetStyle”, mencionada anteriormente. Portanto, adicione na Uses da unPrincipal a biblioteca da classe “TstyleManager”, a biblioteca “Vcl.Themes”. Verifique se não há a necessidade de adicionar também a biblioteca “Vcl.styles”, caso ainda não tenha sido adicionada à Uses do Source do projeto (o arquivo .DPR). O parâmetro que devemos passar a esta função é o nome do estilo que irá ser aplicado, e este nome nós teremos na propriedade Text do ComboBox, pois já estará previamente preenchida com os estilos que iremos utilizar em nosso projeto. Veja na listagem 4 como será feita a chamada da função “TrySetStyle”.

procedure TForm1.ComboBox1Change(Sender: TObject);begin TStyleManager.

TrySetStyle(TComboBox(Sender).Text);end;

A partir deste ponto o nosso projeto de exemplo já irá fazer a troca de estilos em tempo de execução, basta adicionar mais alguns controles visuais para ver como ficarão em cada estilo disponível em nosso projeto. Caso queira verificar a aplicação dos estilos em mais de um formulário, basta adicionar mais um formulário ao projeto e fazer a sua chamada a partir de um botão, por exemplo. Pois estes estilos são aplicados à todos os formulário do projeto. Veja na Imagem 5 nosso projeto em execução com alguns controles visuais que foram adicionados.

Figura 5 – Exemplo em execução

Conclusão

Vimos neste artigo uma ótima forma de se personalizar as aplicações desktop geradas pela VCL do Delphi a partir da versão XE2. É um recurso muito simples de se aplicar e dará uma cara nova aos seus projetos. Mostramos em nosso exemplo prático uma forma de se aplicar esta mudança de estilos já em tempo de execução.

Espero que tenham gostado. Uma forte abraço e até a próxima.

suporte@theclub.com.br

Lucas Vieira de OliveiraConsultor Técnico The Club.

Sobre o autor

outubro2014 09

Fazendo uma retrospectiva sobre nossos artigos de Android, conhe-cemos o Android Studio, ferramenta gratuita do Google para criar apps. Vimos como criar aplicativos e seus tipos (templates), além de conhecer controles de tela para criar Activitys etc.

Neste artigo, quero mostrar controles mais avançados, como ProgressBar, TabHost (abas para separar controles de tela), SearchView, além do muito usado ListView. Veremos características dos mesmos e como customizar o ListView com imagens.

Criando um novo projeto

Vamos criar um novo projeto para esses novos exemplos, crie um do tipo Master/Detail Flow. Vamos conhecer primeiramente o ProgressBar, que serve para mostrar ao usuário que algum processo esta sendo executado, assim o mesmo não pensa que a aplicação travou.

O ProgressBar pode ser apenas um texto e uma image, girando, como também podemos mostrar o percentual do processamento. Crie um layout no projeto com o nome de “layout_progress.xml”. Adicione um Button. Aces-se o arquivo ItemDetailFragment.java e vamos codificar o botão no método onCreateView.

Semelhante ao exemplo anterior, onde precisávamos saber qual item do menu foi selecionado, no tipo Master/Detail, temos um ListView com itens e precisamos saber qual o selecionado. Primeiro declare uma variável privada na classe, para podermos acessar o Progressbar no evento click do botão:

private ProgressDialog pBar;

Também declare a variável:

public View rootView = null;

Android Studio – Parte IV

No método onCreateView, vamos usar o seguinte código:

rootView = new View(getActivity());

if (mItem.id == “1”){ //botão Button btn = (Button)rootView.findViewById(R.id.button); btn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //ProgressBar pBar = new ProgressDialog(v.getContext()); pBar.setCancelable(true); pBar.setMessage(“Exemplo de progressBar”); pBar.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL); pBar.show(); } });}

return rootView;

Pegamos do mItem, o identificador do item selecionado, para executar o que precisamos. Usamos um ProgressDialog, um janela com um ProgressBar embutido. Atribuímos uma mensagem (use resource para essa mensagem ), um estilo e chamamos o show.

outubro201410

O setCancelable indica se a barra será fechada, se o usuário tocar na tela fora da área do ProgressBar ou usar a tecla voltar. Coloque false, se deseja que ela não seja fechada pelo usuário. Execute a aplicação, acesse o Item 1 e clique no botão. Teremos o ProgressBar (Figura 1)

Figura 1. ProgressBar em execução

Calma lá, ele não fez nada!!! Claro, não codificamos ele para fazer alguma coisa . Precisamos usar um handler para atualizar o progresso da barra. Primei-ro, precisamos indicar qual o mínimo e o máximo para a barra:

pBar.setProgress(0);pBar.setMax(100);

Após o show(), adicione o seguinte código:

new Thread(new Runnable() { public void run() { while (i < 100) {

try { Thread.sleep(100); } catch (InterruptedException e) { e.printStackTrace(); }

pBarHandler.post(new Runnable() { public void run() {

pBar.setProgress(i++); } }); } }}).start();

Lembrando, que o exemplo é para entendimento e fins didáticos. Usamos uma Thread para fazer um loop até 100. Usamos o método sleep para “pausar” e podermos atualizar em tela a barra. pBarHandler esta declarado na classe, assim como o incrementador:

int i = 0;private Handler progressBarHandler = new Handler();

O Handler serve para atualizarmos o layout da tela, pois usando uma Thread, não podemos mexer em controles de tela. O método que incrementa o valor é o setProgress. Execute novamente e veja a barra em progresso (Figura 2).

Figura 2. ProgressBar com contador

Note que ao chegar o final, o dialogo ainda continua aparecendo. Sim, não dizemos para ele fechar quando chegar em 100%. Após o Handler, coloque o seguinte código:

if (i == 100) pBar.dismiss();

Pronto, agora, ao terminar o progresso, a janela será fechada. Outro exemplo para ProgressBar, para quando queremos mostrar apenas o proces-so e não temos ou não queremos mostrar o percentual. Veja o exemplo no código a seguir:

pBar = new ProgressDialog(v.getContext());pBar.setCancelable(true);pBar.setIndeterminate(false);

outubro2014 11

pBar.setMessage(“Processando....”);pBar.show();

Nesse exemplo, o dismiss, que fecha o dialogo, deve ser chamado, após o processamento ser realizado. Exemplo comum, é quando acessamos um banco de dados, retornamos dados usando JSON etc. Veja na Figura 3, o layout do progressBar.

Figura 3. ProgressBar sem contador

TabHost

Controle muito eficiente se tivermos vários controles em tela e precisamos organiza-los em abas. Vamos criar um layout, que será o nosso controle, cha-mando o arquivo de “tabhost.xml”. Para cada aba, precisamos de um layout, assim, se tivermos três abas, precisamos de três arquivos XML.

Nesse exemplo, vamos criar duas abas, então, crie dois arquivos de layout. Adicione os controles que desejar, nesses dois layouts. Vamos voltar ao tabhost.xml e adicionar o nosso layout:

<?xml version=”1.0” encoding=”utf-8”?>

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:orientation=”vertical” android:layout_width=”match_parent” android:layout_height=”match_parent”>

<TabHost android:id=”@+id/TabHost01” android:layout_width=”fill_parent” android:layout_height=”fill_parent”>

<LinearLayout android:layout_width=”fill_parent”

android:layout_height=”fill_parent” android:orientation=”vertical” >

<!-- TabWidget cria as tabs --> <TabWidget android:id=”@android:id/tabs” android:layout_width=”fill_parent” android:layout_height=”wrap_content”> </TabWidget>

<!-- layouts das tabs --> <FrameLayout android:id=”@android:id/tabcontent” android:layout_width=”fill_parent” android:layout_height=”fill_parent” >

<!-- Aba 1 --> <include android:id=”@+id/aba1” android:layout_width=”fill_parent” android:layout_height=”match_parent” layout=”@layout/aba_um” > </include>

<!-- Aba 2 --> <include android:id=”@+id/aba2” android:layout_width=”fill_parent” android:layout_height=”wrap_content” layout=”@layout/aba_dois” > </include>

</FrameLayout> </LinearLayout> </TabHost></LinearLayout>

outubro201412

Todos os layouts ficam dentro de um TabHost. Primeiro, temos um LinearLayout para os itens. Usamos um TabWidget para criar as abas e um FrameLayout para indicar os layouts que criamos para cada aba. Usamos o include para inserir o layout de cada aba:

<!-- Aba 1 --><include android:id=”@+id/aba1” android:layout_width=”fill_parent” android:layout_height=”match_parent” layout=”@layout/aba_um” ></include>

Crie um layout para mostrarmos o TabHost (“layout_tabhost.xml”). Nele, vamos usar novamente o include para colocar o tabhost.xml:

<include android:id=”@+id/tabs” android:layout_width=”wrap_content” android:layout_height=”wrap_content” layout=”@layout/tabhost”></include>

No OnCreateView, vamos codificar para carregar esse último layout:

else if (mItem.id == “2”){ rootView = inflater.inflate(R.layout.layout_tabhost, container, false);

TabHost myTabHost;

myTabHost =(TabHost)rootView.findViewById(R.id.TabHost01);

myTabHost.setup(); TabHost.TabSpec spec = myTabHost.newTabSpec(“tab_creation”);

spec.setIndicator(“Aba 1”, getResources().getDrawable(android.R.drawable.ic_menu_add));

spec.setContent(R.id.aba1);

myTabHost.addTab(spec);

myTabHost.addTab(myTabHost.newTabSpec(“tab_inser”) .setIndicator(“Aba 2”, getResources().getDrawable( android.R.drawable.ic_menu_edit)).setContent(R.id.aba2));}

Procuramos o TabHost usando o findViewById. Configuramos cada aba adicionando nome, usando a classe TabSpec. Veja o resultado na Figura 4 (ao abrir a app, selecione o Item 2).

Figura 4. Abas com TabHost

Abas com imagens

E se precisarmos (e sempre queremos) colocar imagens nas abas? É possível? Sim, mas usaremos XMLs para isso. Crie dois arquivos XML, mas na pasta drawable, com o nome de “icon_aba_um.xml” e “icon_aba_dois.xml”.

Nesses arquivos, vamos adicionar as imagens:

<?xml version=”1.0” encoding=”utf-8”?><selector xmlns:android=”http://schemas.android.com/apk/res/android”> <!-- imagem para quando a aba esta selecionada --> <item android:drawable=”@drawable/ic_action_paste_selected” android:state_selected=”true” /> <!-- imagem para quando a aba não esta selecionada --> <item android:drawable=”@drawable/ic_action_paste” /></selector>

Note que temos que ter duas imagens: uma para quando a aba esta

outubro2014 13

selecionada e outra para quando a mesma não esta selecionada. Adicione imagens desse tipo nas pastas drawable, lembrando de colocar imagens para cada tipo de tamanho.

Após criar os dois, temos que modificar o código do TabHost:

spec.setIndicator(“”,getResources().getDrawable(R.drawable.icon_aba_um));...myTabHost.addTab(myTabHost.newTabSpec(“tab_inser”) .setIndicator(“”,getResources().getDrawable( R.drawable.icon_aba_dois)).setContent(R.id.aba2));

Veja que removemos o nome da aba (necessário), e carregamos o XML cria-do usando getDrawable. Veja na Figura 5, como ficou as abas com as imagens.

Figura 5. Abas com imagens

ListView

Talvez um dos controles mais usados no Android. Nossos templates já possuem o ListView por padrão. Projeto dos artigos anteriores, o menu lateral é um ListView. Nesse template, a tela principal é um ListView. E o melhor, podemos customizá-los .

Acesse o arquivo ItemListFragment.java e localize o método onCreate. Nele, temos o código que preenche o ListView:

setListAdapter(new ArrayAdapter<DummyContent.DummyItem>( getActivity(), android.R.layout.simple_list_item_activated_1, android.R.id.text1, DummyContent.ITEMS));

O setListAdapter, esta na classe ListFragment. Precisamos passar um adapter, e esta sendo criado um ArrayAdapter com o tipo DummyContent. Essa classe esta criada no nosso pacote, e lá que estão os itens do ListView:

addItem(new DummyItem(“1”, “Item 1”));addItem(new DummyItem(“2”, “Item 2”));addItem(new DummyItem(“3”, “Item 3”));

Modifique os valores para modificar a lista inicial. Podemos modificar o método onCreate para receber um array de strings por exemplo:

mDrawerListView.setAdapter(new ArrayAdapter<String>( getActionBar().getThemedContext(), android.R.layout.simple_list_item_1, android.R.id.text1, new String[]{ getString(R.string.games), getString(R.string.groups), getString(R.string.settings),}));

Nesse caso, passamos resources para os valores dos itens. O código é do projeto anterior que criamos.

Customizando um ListView

Para customizar um ListView, precisamos criar uma classe que herde de BaseAdapter e um arquivo XML que será o layout de cada item de um ListView. Primeiro, criaremos um layout chamado “single_item_listview.xml”. Adicione o seguinte código:

<?xml version=”1.0” encoding=”utf-8”?><RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:orientation=”horizontal” android:layout_width=”match_parent” android:layout_height=”match_parent”

outubro201414

android:padding=”3dp”>

<ImageView android:id=”@+id/thumbnail” android:layout_width=”40dip” android:layout_height=”40dip” android:scaleType=”fitXY”/>

<TextView android:id=”@+id/item” android:layout_width=”fill_parent” android:layout_height=”wrap_content” android:layout_alignTop=”@+id/thumbnail” android:layout_toRightOf=”@+id/thumbnail” android:text=”Item” android:textStyle=”bold” android:textSize=”15dip” android:paddingLeft=”5dp”/>

<TextView android:id=”@+id/descrption” android:layout_width=”fill_parent” android:layout_height=”wrap_content” android:text=”Description” android:layout_below=”@+id/item” android:layout_toRightOf=”@+id/thumbnail” android:layout_toEndOf=”@+id/thumbnail” android:paddingLeft=”5dp”/></RelativeLayout>

Colocamos um ImageView para mostrar uma imagem para o item, dois TextView para indicar o texto do item e uma descrição para o mesmo. Você pode configurar a propriedade Text do TextView apenas para visualizar no preeview como será o layout.

Vamos criar uma classe para ter os atributos do nosso item do ListView. Clique com o botão direito no pacote na pasta Java e escolha New>Pakage. Dê o nome de “Models”. Clique com o botão direito na pasta criada e escolha New>Java Class.

Dê o nome de “Item”. Adicione os atributos com o seguinte código:

private int Id;private String sNmItem;private String sDSItem;private int iLogo;

Clique com o botão direito na classe, e escolha Refactor>Encapsulate Fields. Será aberto um editor, para marcar os atributos para o Android Studio gerar os métodos get e set (Figura 6).

Figura 6. Editor para criar os métodos dos atributos da classe

Clique em Refactor para os métodos serem criados. Por fim, crie um novo construtor para a classe, para receber os valores dos atributos por parâmetro:

public Item(int id, String nmItem, String dsItem, int logo){ this.Id = id; this.sNmItem = nmItem; this.sDSItem = dsItem; this.iLogo = logo;}

Vamos agora, criar o Adapter, responsável por carregar esse ListView customizado. Crie uma nova pasta chamada “ListAdapter” e nela crie uma classe chamada “ListItem”. Como comentei, nossa classe terá de herdar de BaseAdapter, então, digite:

outubro2014 15

public class ListItem extends BaseAdapter

O código ficará com erro, então, acesse o ícone de uma lâmpada e clique no menu. Escolha Implement Methods. Um editor é aberto para escolhermos os métodos da classe BaseAdapter que usaremos (Figura 7).

Figura 7. Editor para criar os métodos da classe

Deixe todos os métodos selecionados e clique em OK. Vamos declarar alguns atributos e o Create dessa classe:

private Activity activity;private static LayoutInflater inflater = null;private List<Item> data;

public ListItem(Activity activity, List<Item> data) { this.activity = activity; this.data = data; inflater = (LayoutInflater)activity.getSystemService( Context.LAYOUT_INFLATER_SERVICE);}

Declaramos como atributos um tipo Activity, LayoutInflater e uma lista de Item (modelo criado anteriormente). No construtor, recebemos uma Activity e a lista de itens. Repassamos os parâmetros para os atributos e carregamos o inflater, que ajudará a carregar o layout do item, criado antes.

O método getCount, deve retornar a quantidade de registros do adapter, então precisamos apenas chamar a variável data.size(). O getItem, deve retor-

nar o item, de acordo com a posição passada como parâmetro, então digite:

return data.get(position);

O getItemId, quer o identificador do objeto, então, basta digitar:

Item item = (Item)this.getItem(position);return item.getId();

Chamamos o getItem, e retornamos o id do Item. Por fim, o mais impor-tante, o getView. Esse método que vamos preencher os controles do XML. Adicione o seguinte código:

View vi=convertView;

if(convertView == null) vi = inflater.inflate(R.layout.single_item_listview, null);

ImageView imagem = (ImageView)vi.findViewById(R.id.thumbnail);TextView item = (TextView)vi.findViewById(R.id.item);TextView description = (TextView)vi.findViewById(R.id.descrption);

Item itemObject = data.get(position);

item.setText(itemObject.getsNmItem());description.setText(itemObject.getsDSItem());imagem.setImageResource(itemObject.getiLogo());

return vi;

O parâmetro convertView será o responsável por carregar o layout que criamos (single_item_listview). Com esse layout carregado, podemos acessar os controles de tela para preencher os mesmos.

Usando a variável data, pegamos o dado e atribuímos aos controles. Sim-ples. Para finalizar, precisamos criar a lista de itens e repassar o novo adapter para o ListView da nossa tela principal. Acesse o método onCreate e digite o seguinte código (comente o código do setListAdapter):

outubro201416

List<Item> lista = new ArrayList<Item>();lista.add(new Item(1, “ProgressBar”, “Controle para mostrar uma barra de progresso”, R.drawable.ic_action_progressbar));lista.add(new Item(2, “TabHost”, “Controle para mostrar abas”, R.drawable.ic_action_tabhost));lista.add(new Item(3, “ListView”, “Controle para mostrar dados em forma de lista”, R.drawable.ic_action_listview));

setListAdapter(new ListItem(getActivity(), lista));

Criamos uma lista de itens, e no setListAdapter, chamamos a classe ListItem para preencher o ListView. Veja o resultado na Figura 8.

Figura 8. Customizando o ListView com textos e imagens

As imagens estão na pasta drawable. Mas para saber qual o item foi selecionado? Pegar suas informações que configuramos no ListItem? Crie um novo layout e adicione um ListView (layout_listview.xml).

Vamos fazer o mesmo exemplo, apenas colocando em um layout separado. No onCreate do ItemDetailFragment, digite:

else if (mItem.id == “3”){

rootView = inflater.inflate(R.layout.layout_listview, container, false);//ListViewListView lview = (ListView)rootView.findViewById(R.id.listView);

List<Item> lista = new ArrayList<Item>();...

final ListItem adapter = new ListItem(getActivity(), lista);lview.setAdapter(adapter);

lview.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { Item itemObject = (Item)adapter.getItem(position);

Toast.makeText(getActivity(), “ Id: “ + itemObject.getId() + “ Texto: “ + itemObject.getsNmItem(), Toast.LENGTH_LONG).show(); } });}

Carregamos o nosso layout, preenchemos a lista, igual ao exemplo anterior. Configuramos o Listener do ListView para o onItemClick. No evento, pegamos o objeto selecionado, e mostramos os dados.

Execute a aplicação, escolha o item (terceiro) na tela principal, aparecerá a lista customizada. Basta escolher um item para visualizar as informações do item selecionado (Figura 9).

outubro2014 17

Para customizar ainda mais, vamos colocar linhas antes os itens para realçar ainda mais o ListView. Digite no ListView:

android:divider=”@android:color/black”android:dividerHeight=”1dp”

Figura 9. Verificando qual item foi selecionado no ListView

Podemos usar qualquer tamanho da linha, assim como cor. Veja na Figura 10, o ListView customizado.

Figura 10. Alterando cor e tamanho da linha divisória do ListView

Conclusões

Vimos neste artigo, mais controles de tela usados no Android. Conhecemos controles comuns em aplicações Android e aprendemos como customizá-los para que nossas aplicações fiquem o mais profissional possível. No próximo ar-tigo conheceremos outros controles que facilitam o desenvolvimento Android.

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

outubro201418

Versionamento

Agora que o processo de sincronização de monitoramento dos arquivos para com nosso aplicativo foi explicado na edição anterior, o próximo passo da edição de hoje é explicar o tema do nosso artigo; como um tema depende do outro ambos tem a sua importância de participação e por isso serão discutidos minuciosamente; o componente implementa ambas as abordagens visto que uma depende da importância da outra; segue a descrição do processo abaixo:

1. Um arquivo é alterado e salvo;2. O Windows envia uma mensagem notificando nosso aplicativo que

o arquivo foi salvo;3. O nosso aplicativo recebe a mensagem, contendo o nome do arquivo

alterado e data de sua alteração gravada no disco rígido;4. O aplicativo chama o caminho temporário do Windows (nota: se

falhar essa chamada por alguma razão, o funcionamento do processo termina aqui);

5. O aplicativo inicia o processo de versionamento do arquivo;6. O aplicativo registra o arquivo alterado com uma nomenclatura

própria padronizada (senão um reescreveria o outro, visto que é o mesmo nome);

7. O processo é encerrado.

Basicamente é isso. Note que foi descrito de forma superficial, principal-mente nos itens 5 e 6, onde todo o funcionamento do processo é executado. Ele funciona da seguinte forma:

1. Um arquivo é notificado (exemplo: c:\diretoriotal\teste.txt);2. O aplicativo verifica primeiro se o arquivo já foi versionado antes;3. Se ele nunca foi versionado antes, então ele será copiado para o

diretório temporário do Windows, e será criado a seguinte árvore de diretórios (exemplo: [diretório temporário do Windows]\pasta ‘HVCheckVersion’\pasta com o mesmo nome do arquivo a ser copiado\arquivo copiado – exemplo “C:\Users\hvogel\AppData\Local\Temp\HVCheckVersion\teste\teste.txt”);

4. Se o arquivo já foi copiado pelo menos uma vez, a partir de agora ele receberá um novo nome – algo do tipo “02-08-14-10-01-teste.txt” (será sempre esse padrão – ‘dd-mm-yy-hh-min-arquivo.extensao’);

5. O processo é encerrado.

Versionamentos de Arquivos: o THVCheckVersion – Parte 2

Analisando a função CreateVersionCommittedFile (abaixo) percebe-se o nome do arquivo a ser pesquisado, se ele já existe e o nome que será mantido ou alterado, para o diretório local de versionamento temporário do Windows:

Segue abaixo trechos do código-fonte relacionado ao processo de geração de arquivos versionados:

function THVCheckVersion.CreateVersionCommittedFile: string;begin Self.GetInitialVersionCommittedFile; if FileExists(fDestinationCommittedFile) then Self.GetNextVersionCommittedFile;

Result := fDestinationCommittedFile;end;

function THVCheckVersion.GetNextVersionCommittedFile: string;var tempFileName: string; tempExt: string; tempPath: string;begin tempPath := ExtractFilepath(fDestinationCommittedFile); tempExt := ExtractFileExt(fD

outubro2014 19

estinationCommittedFile); tempFileName := biblioteca.ExtractName(ExtractFilename(fDestinationCommittedFile)); tempFileName := FormatDateTime(‘dd-mm-yy-hh-mm’,Now) + ‘-’ + tempFileName + tempExt;

Result := (Biblioteca.GetTmpDir + IncludeTrailingPathDelimiter(TempBaselineFolderName) + IncludeTrailingPathDelimiter(Biblioteca.ExtractName(ffile)) + tempFileName);

fDestinationCommittedFile := Result;end;function THVCheckVersion.GetInitialVersionCommittedFile: string;begin Result := (Biblioteca.GetTmpDir + IncludeTrailingPathDelimiter(TempBaselineFolderName) + IncludeTrailingPathDelimiter(Biblioteca.ExtractName(ffile)) + ExtractFileName(ffile));

fDestinationCommittedFile := Result;end;

TDiff: Componente para checkar versões de arquivos

Este componente poderoso, desenvolvido por Angus Johnson (http://www.angusj.com/delphi/) serviu como base principal para o nosso projeto, onde foi desenvolvida a idéia principal de comparações de versões, sendo adaptado e incrementado para o nosso componente THVCheckVersion, pois foram acrescentadas outras funcionalidades à ele, como toda a implantação de notificação automática de alterações de arquivos chamada pela função ReadDirectoryChangesW e o processo de controle de criação de arquivos para versionamento nos diretórios temporários do Windows. Uma coisa interes-sante neste componente é como a comparação entre arquivos é feita – são comparados inteiros (hashes), onde são construídas listas de hashes para cada linha de um arquivo. Cada linha é representada por um único hash que é baseada no conteúdo daquela linha. Uma coisa a destacar é que uma vez que probabilidade de duas linhas diferentes que geram o mesmo hash é tão pequena, essa possibilidade remota poderá ser ignorada.

Figura 03 – Demo do componente TDiff, alicerce fundamental do nosso componente relacionado a parte de comparar arquivos.

Um pequeno fragmento de código que exemplifica esta implementação de hashes segue abaixo:

source1, source2: TStringList; result1, result2: TStringList;hashlist1, hashlist2: TList;

hashlist1.Clear; for i := 0 to source1.Count -1 dohashlist1.Add(HashLine(source1[i],true,true));

function HashLine(const line: string; IgnoreCase, IgnoreBlanks: boolean): pointer;var i, j, len: integer; s: string;begin s := line; if IgnoreBlanks then begin i := 1; j := 1; len := length(line); while i <= len do begin if not (line[i] in [#9,#32]) then begin s[j] := line[i]; inc(j); end; inc(i); end; setlength(s,j-1); end; if IgnoreCase then s := AnsiLowerCase(s); //return result as a pointer

outubro201420

to save typecasting later... result := pointer(CalcCRC32(pchar(s), length(s)));end;

const table: ARRAY[0..255] OF DWORD = ($00000000, $77073096, $EE0E612C, $990951BA, $076DC419, $706AF48F, $E963A535, $9E6495A3, $0EDB8832, $79DCB8A4, $E0D5E91E, $97D2D988, $09B64C2B, $7EB17CBD, $E7B82D07, $90BF1D91, $1DB71064, $6AB020F2, $F3B97148, $84BE41DE, (continua …)

//CRC algorithm courtesy of Earl F. Glynn ...//(http://www.efg2.com/Lab/Mathematics/CRC.htm)function CalcCRC32(p: pchar; length: integer): dword;var i: integer;begin result := $FFFFFFFF; for i := 0 to length-1 do begin result := (result shr 8) xor table[ pbyte(p)^ xor (result and $000000ff) ]; inc(p); end; result := not result;end;

Resumo da Ópera: Pondo o THVCheckVersion pra funcionar

Finalmente, o nosso componente já pode trabalhar – e de forma trans-parente e imperceptível para o usuário – ele só cria/edita seus arquivos e o componente se encarrega de fazer o resto, versionando e comitando nas suas pastas equivalentes no diretório temporário do Windows.

Uma coisa a mencionar aqui é o uso de clientdataset´s para armazenar por ordem de modificação (através de indexfieldnames) todos os arquivos versio-nados de um mesmo, e outro clientdataset para armazenar todos os arquivos base (filename e filepath) em um XML a fim de sincronizar na hora do merge, com o arquivo original e o arquivo alterado em uma determinada data/hora – pronto – o processo está estabelecido e sincronizado – podendo ser comparado a qualquer momento pela solicitação do usuário – elegantemente com cores (desenhadas pelo TStringGrid) para sinalizar como legenda os eventos gerados

(modificações, inserções, deleções) resultantes das comparações realizadas.

Figura 04 – Demo do nosso projeto Versionador em ação.

Figura 05 e 06 – Outras ilustrações do nosso projeto Versionador. Segue abaixo trechos do código-fonte relacionados ao clientdataset

responsável por filtrar todos os arquivos versionados de um arquivo original, ordenando via índice a sua data/hora de alteração. Esse procedimento é responsável por exibir os itens versionados em uma grid (dbgrid), onde um duplo-clique carregará o conteúdo comparativo entre o arquivo original e o arquivo versionado selecionado nessa grid:

procedure THVCheckVersion.GetAllVersionedCommittedFiles(const MySearchBaselineFolder:

outubro2014 21

string);var sr: TSearchRec; searchResult: integer; datahoraArquivo: TDateTime;begin if tempClientDataSet.Active then tempClientDataSet.EmptyDataSet;

with tempClientDataSet.Aggregates.Add do begin Expression := ‘MAX(MODIFIEDDATE)’; AggregateName := ‘MaxData’; Active := True; end;

tempClientDataSet.AggregatesActive := true;

tempClientDataSet.IndexFieldNames := ‘MODIFIEDDATE’; //para ordenar por data

try searchResult := FindFirst(GetTempBaselineFullPath + IncludeTrailingPathDelimiter(MySearchBaselineFolder)+’*.*’,faAnyFile,sr); while searchResult = 0 do begin if sr.Name[1] <> ‘.’ then begin if not (sr.Attr and FILE_ATTRIBUTE_DIRECTORY > 0) then begin datahoraArquivo := StrToDateTime(formatdatetime(ShortDateFormat + ‘ ‘ + ShortTimeFormat, FileDateToDateTime(sr.Time)));

with tempClientDataSet do begin Append; FieldByName(‘FILENAME’).AsString := sr.Name; FieldByName(‘MODIFIEDDATE’).

AsDateTime := datahoraArquivo; //SysUtils.FileDateToDateTime(SysUtils.FileAge(theFile)); Post; end; end; end; searchResult := FindNext(sr); end;

finally findClose(sr); end;

if clOriginalFilePath.Locate(‘FILENAME’, MySearchBaselineFolder, [loPartialKey]) then begin fOriginalFullPathFileName := clOriginalFilePath.FieldByName(‘PATHNAME’).AsString + clOriginalFilePath.FieldByName(‘FILENAME’).AsString; end;

//if (tempClientDataSet.RecordCount > 0) then //begin // showmessage(tempClientDataSet.Aggregates.Find(‘MaxData’).Value); // tempClientDataSet.Filter := ‘MODIFIEDDATE = ‘ + QuotedStr(tempClientDataSet.Aggregates.Find(‘MaxData’).Value); // tempClientDataSet.Filtered := True; // ShowMessage(tempClientDataSet.fieldByName(‘FILENAME’).AsString); // end;end;

procedure THVCheckVersion.CreateTempClientDataSet;begin if not Assigned(tempClientDataSet) then tempClientDataSet := TClientDataSet.Create(Self);

outubro201422

if tempClientDataSet.Active then tempClientDataSet.EmptyDataSet;

RemoveFields;

with tempClientDataSet.FieldDefs do begin

with AddFieldDef do begin Name := ‘FILENAME’; DataType := ftString; Size := 200; end;

with AddFieldDef do begin Name := ‘MODIFIEDDATE’; DataType := ftDateTime; end; end;

with tempClientDataSet.Aggregates.Add do begin Expression := ‘MAX(MODIFIEDDATE)’; AggregateName := ‘MaxData’; Active := True; end;

tempClientDataSet.AggregatesActive := true;

if tempClientDataSet.Active then tempClientDataSet.Close; tempClientDataSet.CreateDataSet;end;

Conclusão

Acredito que a maioria dos desenvolvedores que já trabalharam com ferramentas de versionamento, gerando baselines, commitando, fazendo cheking/checkout, etc; já imaginaram com uma implementação mais de perto ao Delphi, seja apenas para acompanhar o histórico dos código-fontes ou então para resgatar uma versão que estava correta que compilava anteriormente, ou então uma função que antes estava melhor escrita e otimizada mas que a próxima versão já não mais.

Esse componente traz uma abordagem alternativa ao processo de ver-sionamento tradicional fabricados nos já conhecidos softwares de mercado, podendo customizar adicionando novas funcionalidades ou aperfeiçoando as implementações existentes, para tornar mais eficiente o processo de versio-namento e mais viável negocialmente.

Desejo ao leitor boas leituras com este componente e que possa se divertir tanto quanto eu, adicionando e alterando suas funcionalidades. O código-fonte é free, juntamente com os programas de exemplo distribuídos. Um abraço a todos e até a próxima !

suporte@theclub.com.br

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

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

Sobre o autor

outubro2014 23

Olá amigos do The Club, neste artigo gostaria de apresentar uma ferramenta lançada o ano passado para nós desenvol-vedores, o Visual Studio Online, um complemento baseado na nuvem do Windows Azure para o Microsoft Visual Studio 2013. Descreverei suas principais funcionalidades

de uma forma prática e rápida. Mas aí vem a pergunta, o que seria o Visual Studio Online? Como foi dito anteriormente, de uma forma mais específica este complemento seria um composto de diversos serviços para desenvolvedores hospedados na plataforma de computação em nuvem Windows Azure. É uma página online para os projetos de desenvolvimento. Para fins de informações é também importante saber que o Visual Studio Online conecta-se com outras IDEs de desenvolvimento como Eclipse ou o Xcode, oferecendo suporte para vá-rias plataformas e linguagens. Uma das principais funcionalidades é o controle de código-fonte na nuvem, a qual iremos detalhar um pouco mais ao decorrer do artigo. Abaixo citarei outras características para fins de conhecimento.

Características

- Serviço de compilação e teste de carga baseado na nuvem;- “Application Insights”: um serviço que oferece informações como estado

da saúde, disponibilidade, desempenho e uso das aplicações.

- “Monaco”: um ambiente de desenvolvimento “para a nuvem, da nuvem” que oferece um subconjunto de recursos e funcionalidades do Visual Studio via navegadores com foco em certos cenários. Um destes cenários seria a edição de sites do Windows Azure usando qualquer navegador moderno e em qualquer aparelho com ou sem Windows.

Pré- Requisitos

Para realizarmos a integração do Microsoft Visual Studio 2013 com o Visual Studio Online deveremos possuir uma conta ativa de E-mail no Outlook, Live ou Hotmail. Eu criei uma no hotmail especialmente para nosso artigo, podemos

Visual Studio 2013 Apresentando o Visual Studio Online

conferir o usuário e a senha abaixo:

e-mail: theclubprogramadores2014@hotmail.comsenha: 123mudar

Tipos de Planos

É importante lembrar que esta ferramenta possui diversos tipos de planos, achei necessário descrever abaixo suas especificações de acordo com o site da Microsoft.

- Visual Studio Online Basic: Inclui acesso aos repositórios de código, ferra-mentas de planejamento e rastreamento, recursos de colaboração de equipe e o ambiente de desenvolvimento do Visual Studio Express.

Importante: Os primeiros cinco usuários por conta com o plano Basic são gratuitos.

- Visual Studio Online Professional: Inclui todos os recursos disponíveis no plano Basic, além de incluir a utilização do ambiente de desenvolvimento do Visual Studio Professional. Até 10 usuários com o plano do Visual Studio Online Professional podem ser adquiridos em uma conta.

- Visual Studio Online Advanced: Inclui todos os recursos disponíveis no plano Basic, assim como a colaboração de equipe avançada, ferramentas de planejamento e rastreamento e solicitações de comentários de participantes.

Nota: Usaremos o plano “Visual Studio Online Basic”, recomendado para pequenos projetos e no máximo até cinco programadores. Para quem desejar maiores informações de valores dos outros planos, recomendo consultar o site:

outubro201424

http://azure.microsoft.com/pt-br/pricing/details/visual-studio-online/

Criando uma Conta

Para criar uma conta no Visual Studio Online, deveremos acessar o link abaixo:

http://www.visualstudio.com/

Logo em seguida clicar no botão “Comece a usar gratuitamente”. Ver Figura 01.

Figura 01: Comece a usar gratuitamente.

Na próxima etapa deveremos preencher alguns dados para criação da conta, como:

Nome Completo: The Club – O Maior Clube de Programadores do BrasilEmail de contato: theclubprogramadores2014@hotmail.comPaís/Região: BrasilURL da Conta: theclubprogramadores2014.visualstudio.com

A “URL da Conta” é a página onde nosso projeto será armazenado.Fiquem a vontade para inserir o nome que acharem adequado, lembrando que todos estes dados deverão ser preenchidos obrigatoriamente. Ver Imagem 02 para melhores detalhes.

Figura 02: Criando uma Conta do Visual Studio Online.

Conectando a URL com o Microsoft Visual Studio 2013

Após clicar no botão “Criar Conta”, na próxima tela teremos algumas configurações para editar os dados e acessar a nossa URL. Para acessar a nossa página basta clicar no link situado na região direita, como indica a Imagem 03. Esta URL é a mesma indicada anteriormente no momento da criação da conta.

Figura 03: Acessando a URL.

Ao entrar na URL possuímos três abas, tais como: “Overview”, “Users” e “Rooms” sendo respectivamente para termos uma visão geral da aplicação, criar e gerenciar usuários e conversas em salas de bate-papos com outros integrantes. Para compartilharmos o projeto entre diversos usuários da equipe deveremos entrar na aba “Users” para adicionarmos os mesmos. (No nosso caso possuímos apenas o usuário The Club)

Nos focaremos na aba “Overview”, pois na primeira vez que logarmos é necessário criar um Projeto. Alguns dados são necessários como “Nome do projeto”, “Descrição do projeto”, “Tipo de Controlador de Versão” e “Templa-te”. Ver Figura 04.

Project name: Artigo The ClubDescription: Artigo Voltado para o aprendizado do Visual Studio Online Version control: Team Foundation Version ControlProcess Template: Microsoft Visual Studio Scrum 2013

Figura 04: Criando o primeiro projeto.

Na próxima etapa nos deparamos com algumas abas importantes, sendo as principais:

- Home: onde teremos uma visão geral da nossa aplicação e algumas configurações iniciais;

- Code: é o local onde estará armazenado o nosso código fonte, contendo

outubro2014 25

todas as informações das últimas alterações, Comentários referentes ao código e um histórico completo de alterações.

- Work: Esta região é para quem trabalha com a metodologia de desen-volvimento “Scrum”, contendo um acervo completo de tarefas relacionas a este tipo de controle.

- Build: São as definições de compilação criadas usando o Visual Studio e podem ser executadas no Visual Studio Online. As compilações pode ser con-figuradas para serem executadas sob demanda, em um intervalo especificado, ou para integração contínua.

- Test: Criar testes de carga no Visual Studio 2013 podendo ser executado no Visual Studio Online.

Temos inúmeros itens para explorar nesta tela, mas devemos nos atentar na aba “Home”, a qual se responsabiliza por conectar ao Microsoft Visual Studio 2013. Para isto clique no botão “Open With Visual Studio to Conect”. Ver Imagem 05.

Figura 05: Conectando com o MVS 2013.

Automaticamente abrirá a IDE do Visual Studio solicitando o usuário e senha criado anteriormente no Hotmail, OutLook ou Live. Ver Figura 06.

Figura 06: Informando as credenciais de acesso.

Criando um projeto no Visual Studio 2013

Com o Visual Studio 2013 aberto criaremos um projeto de exemplo em Asp.Net, para isto clique em “File/New Project” definindo um nome, caminho e solução. Para ocorrer a integração deveremos marcar o item “Add to source Control”. Ver Figura 07.

Figura 07: Criando um novo projeto em Asp.Net.

Possuímos também outro tipo de controlador de versão, o “Git”. No nosso caso escolheremos o “Team Foundation Version Control”, ao qual está voltado o aprendizado do artigo e logo em seguida clique no botão “Ok”. Ver Figura 08.

Figura 08: Escolhendo o TFVC.

Na próxima etapa teremos que adicionar a “Solution” ao nosso controla-dor. O projeto indica a mesma solução criada anteriormente no Visual Studio Online. Ver Figura 09.

Figura 09: Adicionando o projeto.

outubro201426

Em “Source Control Explorer” na região superior teremos alguns botões importantes como: Mostrar/Esconder Itens excluídos, Atualizar aplicação com o servidor, adicionar ou excluir itens da pasta, obter última versão do servidor, “Check Out” para baixar e “Check In” para atualizar os conteúdos do servidor, “Compare Folders” para comparar o conteúdo dos arquivos locais com os que estão na URL, History para um histórico de tarefas, entre outros. Podemos conferir com maiores detalhes na Figura 10.

Figura 10: Source Control Explorer.

A partir desta tela que poderemos realizar o controle. Inicialmente para subir no servidor iremos realizar o “Check-in” clicando na solution “theclubE-xemplo” e escolhendo o ícone . Na tela “Team Explorer - Pending Changes” podemos inserir alguns comentários se necessário para o Update em questão. Ver Figura 11.

Figura 11: Alterações em andamento.

Como faremos o Controle de Código-Fonte?

Poderíamos utilizar a tela “Source Control Explorer”, mas para efetuar as tarefas básicas faremos o uso de um atalho. Para isto, na “solution explorer” clique no nosso projeto “theClubExemplo” e teremos uma tela idêntica ao da Imagem 12. Um detalhe importante ao possuirmos todos arquivos atualizados com o servidor teremos um “cadeado” ao lado de cada arquivo.

Figura 12: Solution Explorer.

Ao efetuarmos alguma alteração o ícone automaticamente irá mudar, por exemplo no arquivo “web.config”. Ver ícone abaixo:

Como vimos anteriormente podemos atualizar o servidor facilmente es-

colhendo a opção “Check-in”. Aliás, podemos conferir os principais atalhos ao clicarmos com o botão direito sobre os arquivos da solução. Ver Imagem 13.

Veja a Figura 13: Principais Funções.

Detalhamento das principais funções:

Check Out for Edit: baixamos a última versão so arquivo no servidor.Compare: Comparar códigos do servidor e local.Source Control/Get Specific Version: Resgatar alguma versão específica

do servidor.Source Control/Undo Pending Changes: Desfazer alterações Pendentes.Source Control/View History: Visualizar histórico de tarefas.Source Control/Annotate: Anotações sobre versões.

O trabalho de configuração e manutenção é muito fácil e é por isto que recomendo fortemente o uso do Visual Studio Online como controlador de código-fonte em empresas, não esquecendo que e o mais importante é a total

outubro2014 27

compatibilidade com o MVS 2013.

Conclusões

Aprendemos com este artigo as principais funções desta ferramenta disponibilizada pela Microsoft. O Controle de Código-fonte é uma técinica muito recomendável para aplicações que utilizam mão-de-obra de vários programadores. Temos uma ferramenta gratuita para no máximo de cinco usuários que certamente abrangerá inúmeros pequenos projetos. Fica aí a dica, um abraço e até o mês que vem!

Figura 13: Principais Funções.thiago@theclub.com.br

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

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

Sobre o autor

outubro2014

dicas the club

28

Listagem 1 – Uses.

Listagem 2 – Constante.

Listagem 3 – Botão Atualizar.

Delphi XE5 - Criando aplicações Atuali-záveis no Android.

Nesta dica vamos demonstrar como criar um aplicativo atualizável para Android, ou seja, podemos disponibilizar uma nova versão online para download sempre que alguma alteração for realizada, tudo para facilitar a manutenção do aplicativo.

Para esta dica vamos utilizar os seguintes componentes:

• IdHTTP;• IdSSLIOHandlerSocketOpenSSL.

O segundo componente será utilizado para protocolos https, ou seja, a utilização deste componente vai depender do local onde irá manter suas atualizações, por exemplo, em sites de hospedagem que utilizem este tipo de protocolo.

Para utilizar o componente ‘IdSSLIOHandlerSocketOpenSSL’ vá na proprie-

dade ‘IOHandler’ do ‘IdHTTP’ e o selecione. Para iniciarmos adicione as seguintes Uses ao projeto:

Androidapi.Jni.JavaTypes,FMX.Platform.Android,Androidapi.IOUtils,Androidapi.JNIBridge,Androidapi.Jni.GraphicsContentViewText,Androidapi.Jni.Net,FMX.Helpers.Android;

Declare também a constante APK_Name que será o nome de seu apk.

Const APK_Name = ‘Project2.apk’;

Após realizarmos as configurações iniciais podemos começar, adicione um botão ao seu ‘Form’ e no evento OnClick insira o seguinte comando:

procedure TForm2.btnAtualizarClick(Sender: TObject);var aURL: String; aArquivo: TFileStream;begin Try If FileExists(Format(‘%s/%s’, [GetSharedDownloadsDir, APK_Name])) Then DeleteFile(Format(‘%s/%s’, [GetSharedDownloadsDir, APK_Name]));

aArquivo := TFileStream.Create(Format(‘%s/%s’, [GetSharedDownloadsDir, APK_Name]), 65280);

IdHTTP.HandleRedirects := True; aURL := ‘https://seusite/’+ APK_Name; IdHTTP.Get(aURL, aArquivo); ShowMessage(‘Download Finalizado’);

If FileExists(Format(‘%s/%s’, [GetSharedDownloadsDir, APK_Name])) Then Instalar; Except On E:Exception do ShowMessage(‘Falha no Processo de Atualização! - ‘+ E.Message); End; aArquivo.Free;end;

No procedimento acima verificamos primeiramente a existência do ar-quivo(.apk) em nossos Downloads (Memória Externa) caso já exista ele será removido para que o novo arquivo seja baixado. Criamos uma variável do Tipo TFileStream para armazenar o arquivo baixado, note também que utilizamos a propriedade HandleRedirects do IdHTTP para que o componente realize os devidos redirecionamentos de conexão, por fim o Download é iniciado.

outubro2014 29

Listagem 4 – Instalar.

Após o arquivo ser baixado com sucesso podemos realizar a instalação, portanto, adicione o procedimento ‘Instalar’ conforme listagem abaixo:

procedure Instalar;Var aArquivo: JFile; Intent: JIntent;begin aArquivo := TJfile.JavaClass.Init(StringToJString(GetSharedDownloadsDir), StringtoJString(APK_Name)); Intent := TJIntent.Create; Intent.SetAction(TJIntent.JavaClass.ACTION_VIEW); Intent.AddFlags(TJIntent.JavaClass.FLAG_ACTIVITY_NEW_TASK); Intent.SetDataAndType(TJnet_Uri.JavaClass.FromFile(aArquivo), StringToJString(‘application/vnd.android.package-archive’)); SharedActivityContext.StartActivity(Intent);end;

Neste procedimento repetimos o processo que realizamos no artigo “Delphi XE5 - Trabalhando com Intents” utilizando Intents executamos o processo de instalação.

Ao finalizar a instalação verá que a nova versão já está disponível.

Delphi – Alterando a cor da Fonte do GroupBox

Muitas vezes precisamos realizar tarefas que não existem nas propriedades de um componente, e para resolver este tipo de problema deveremos sobres-crever alguns métodos para chegar ao resultado esperado. Para exemplificar alteraremos a cor da fonte para cor azul do componente GroupBox. Para nosso exemplo disponha um componente do tipo GroupBox no formulário e alguns Edits e Labels se acharem necessário.

O próximo passo é declarar um “Type” da classe “TgroupBox” e sobres-crever o método “Paint”. Ver Listagem abaixo.

type TGroupBox = class(StdCtrls.TGroupBox) public procedure Paint; override; end;

O método “Paint” irá nos propor a alteração da Fonte e a Cor de Fundo utilizando o método “Font.Color” e “Brush.Color” respectivamente.

procedure TGroupBox.Paint;var H: Integer; R: TRect; Flags: Longint; CaptionRect, OuterRect: TRect; Size: TSize; Box: TThemedButton; Details: TThemedElementDetails;begin with Canvas do begin Font := Self.Font;

if ThemeControl(Self) then begin if Text <> ‘’ then begin GetTextExtentPoint32(Handle, PChar(Text), Length(Text), Size); CaptionRect := Rect(0, 0, Size.cx, Size.cy); if not UseRightToLeftAlignment then OffsetRect(CaptionRect, 8, 0) else OffsetRect(CaptionRect, Width - 8 - CaptionRect.Right, 0);

outubro201430

end else CaptionRect := Rect(0, 0, 0, 0);

OuterRect := ClientRect; OuterRect.Top := (CaptionRect.Bottom - CaptionRect.Top) div 2; with CaptionRect do ExcludeClipRect(Handle, Left, Top, Right, Bottom); if Enabled then Box := tbGroupBoxNormal else Box := tbGroupBoxDisabled; Details := ThemeServices.GetElementDetails(Box);

ThemeServices.DrawElement(Handle, Details, OuterRect); SelectClipRgn(Handle, 0); if Text <> ‘’ then begin H := TextHeight(‘0’); if not UseRightToLeftAlignment then R := Rect(8, 0, 0, H) else R := Rect(R.Right - Canvas.TextWidth(Text) - 8, 0, 0, H); Flags := DrawTextBiDiModeFlags(DT_SINGLELINE);

DrawText(Handle, PChar(Text), Length(Text), R, Flags or DT_CALCRECT); Brush.Color := Color; //Cor de Fundo Font.Color := clBlue; //Cor da Fonte DrawText(Handle, PChar(Text), Length(Text), R, Flags); end; end else inherited; //Herdando da classe paint. end;end;

Na Figura 01 teremos nosso exemplo em Run-Time.

Figura 01: GroupBox – Alterando a Cor da Fonte.

outubro2014 05

outubro2014