Delphi XE5 - Trabalhando com

Transcrição

1

2

3 04 Delphi XE5 - Trabalhando com estilos na VCL Delphi XE5 05 Editorial Autor: Lucas Vieira de Oliveira Android Studio - Parte IV 09 Autor: Luciano Pimenta Versionamentos de Arquivos o THVCheckVersion Parte 2 18 Índice Autor: Hamden Vogel Visual Studio 2013 Apresentando o Visual Studio Online Autor: Thiago C. Montebugnoli Dicas The Club 03

4 Editorial Av. Profº Celso Ferreira da Silva, 190 Jd. Europa - Avaré - SP - CEP Informações e Suporte: (14) 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 funcionalidades de uma ferramenta da Microsoft, o Visual Studio Online, um serviç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! Internet Cadastro: cadastro@theclub.com.br Suporte: suporte@theclub.com.br Informações: info@theclub.com.br Skype Cadastro: theclub_cadastro Skype Suporte: theclub_linha1 theclub_linha2 theclub_linha3 Copyright The Club 2013 Diretor Técnico Marcos César Silva Diagramação Vitor M. Rodrigues Design Vitor M. Rodrigues Revisão Denise Blair Colunistas Hamden Vogel Jeferson Silva de Lima Luciano Pimenta Lucas Vieira de Oliveira Thiago Cavalheiro Montebugnoli Impressão e acabamento: GRIL - Gráfica e Editora Taquarituba-SP - Tel. (14) Thiago Montebugnoli - Editor Chefe thiago@theclub.com.br Reprodução A utilização, reprodução, apropriação, armazenamento em banco de dados, sob qualquer forma ou meio, de textos, fotos e outras criações intelectuais em cada publicação da revista The Club Megazine são terminantemente proibidos sem autorização escrita dos titulares dos direitos autorais. Delphi é marca registrada da Borland International, as demais marcas citadas são registradas pelos seus respectivos proprietários. 04

5 Delphi XE5 - Trabalhando com estilos na VCL Delphi XE5 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. 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. 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 configuração de cada categoria. Acesse na árvore de menu a opção Application e selecione sua subcategoria Apearence (ver figura 1). Serão exibidos dois grupos de opções 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. 05

6 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} Application.Initialize; Application.MainFormOnTaskbar := True; Application.Title := Exemplo TheClub ; TStyleManager. TrySetStyle( Luna ); Application.CreateForm(TForm1, Form1); Application.Run; end. 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 precisar 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). 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 adicionada 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. 06 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 formulário e ver a transformação que seu formulário sofrerá com o novo estilo definido. 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-

7 Figura 4 Exemplo com o estilo Luna 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. Listagem 2 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); 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 ); 07

8 // Exibe no ComboBox o tema padrão definido. ComboBox.ItemIndex := 0; TrySetStyle(TComboBox(Sender). Text); 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 adicionado à lista, pois assim sabemos que para exibi-lo no ComboBox, bastará atribuir o índice 0 (zero) à propriedade ItemIndex do componente. 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. Agora adicione no evento OnCreate do formulário a chamada do método PreencheEstilos (ver listagem 3). Listagem 3 Chamada do método PreencheEstilos procedure TForm1. FormCreate(Sender: TObject); PreencheEstilos(ComboBox1); 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. Listagem 4 Chamada da função TrySetStyle para alteração de estilos em tempo de execução procedure TForm1. ComboBox1Change(Sender: TObject); TStyleManager. 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. Sobre o autor Lucas Vieira de Oliveira Consultor Técnico The Club. suporte@theclub.com.br 08

9 Android Studio Parte IV Fazendo uma retrospectiva sobre nossos artigos de Android, conhecemos 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. Acesse 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; 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() 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. 09

10 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) 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 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. Primeiro, 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() { 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 processo 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); 10

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, chamando 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= schemas.android.com/apk/res/ android android:orientation= vertical width= match_ parent height= match_ parent > <TabHost TabHost01 width= fill_parent height= fill_parent > <LinearLayout width= fill_parent height= fill_parent android:orientation= vertical > <!-- TabWidget cria as tabs --> <TabWidget android:id/tabs width= fill_parent height= wrap_content > </TabWidget> <!-- layouts das tabs --> <FrameLayout android:id/tabcontent width= fill_parent height= fill_parent > <!-- Aba 1 --> <include aba1 width= fill_parent height= match_parent aba_um > </include> <!-- Aba 2 --> <include aba2 width= fill_parent height= wrap_content aba_dois > </include> </FrameLayout> </LinearLayout> </TabHost> </LinearLayout> 11

12 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 width= fill_ parent height= match_ parent > </include> 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). Crie um layout para mostrarmos o TabHost ( layout_tabhost.xml ). Nele, vamos usar novamente o include para colocar o tabhost.xml: <include width= wrap_ content height= wrap_ content > </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); 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= schemas.android.com/apk/res/ android > <!-- imagem para quando a aba esta selecionada --> <item drawable/ic_action_paste_ selected android:state_ selected= true /> <!-- imagem para quando a aba não esta selecionada --> <item drawable/ic_action_paste /> </selector> Note que temos que ter duas imagens: uma para quando a aba esta 12

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 criado usando getdrawable. Veja na Figura 5, como ficou as abas com as imagens. 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), })); Figura 5. Abas com imagens Nesse caso, passamos resources para os valores dos itens. O código é do projeto anterior que criamos. 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)); 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= schemas.android.com/apk/res/ android android:orientation= horizon tal width= match_ parent height= match_ parent 13

14 android:padding= 3dp > <ImageView thumbnail width= 40dip height= 40dip android:scaletype= fitxy /> 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). <TextView width= fill_parent height= wrap_content android:text= Item android:textstyle= bold android:textsize= 15dip android:paddingleft= 5dp /> <TextView descrption width= fill_parent height= wrap_content android:text= Description 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. 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: Dê o nome de Item. Adicione os atributos com o seguinte código: 14

15 public class ListItem extends BaseAdapter 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 retornar o item, de acordo com a posição passada como parâmetro, então digite: return data.get(position); 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). 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 importante, 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); 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. 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. Simples. 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): 15

16 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. 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); //ListView ListView 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() 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(); } }); } 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). 16 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).

17 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 artigo conheceremos outros controles que facilitam o desenvolvimento Android. Figura 9. Verificando qual item foi selecionado no ListView Um grande abraço a todos e até a próxima! Para customizar ainda mais, vamos colocar linhas antes os itens para realçar ainda mais o ListView. Digite no ListView: black android:dividerheight= 1dp Sobre o autor Luciano Pimenta Luciano Pimenta (NOVO DOMINIO: é 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 ( onde ministra cursos de programação e banco de dados. 17

18 Versionamentos de Arquivos: o THVCheckVersion Parte 2 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, principalmente 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 teste.txt (será sempre esse padrão dd-mm-yy-hh-min-arquivo.extensao ); 5. O processo é encerrado. 18 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; Self. GetInitialVersionCommittedFile; if FileExists(fDestinationCom mittedfile) then Self. GetNextVersionCommittedFile; Result := fdestinationcommittedfile; function THVCheckVersion. GetNextVersionCommittedFile: string; var tempfilename: string; tempext: string; temppath: string; temppath := ExtractFilepath(f DestinationCommittedFile); tempext := ExtractFileExt(fD

19 estinationcommittedfile); tempfilename := biblioteca.ex tractname(extractfilename(fdest inationcommittedfile)); tempfilename := FormatDateTime( dd-mm-yy-hhmm,now) tempfilename + tempext; Result := (Biblioteca.GetTmpDir + Inc ludetrailingpathdelimiter(tempb aselinefoldername) + IncludeTrailingPathDelimite r(biblioteca.extractname(ffile)) + tempfilename); fdestinationcommittedfile := Result; function THVCheckVersion. GetInitialVersionCommittedFile: string; Result := (Biblioteca.GetTmpDir + Inc ludetrailingpathdelimiter(tempb aselinefoldername) + IncludeTrailingPathDelimite r(biblioteca.extractname(ffile)) + ExtractFileName(ffile)); fdestinationcommittedfile := Result; TDiff: Componente para checkar versões de arquivos Este componente poderoso, desenvolvido por Angus Johnson ( 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 interessante 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 do hashlist1.add(hashline(source1[ i],true,true)); function HashLine(const line: string; IgnoreCase, IgnoreBlanks: boolean): pointer; var i, j, len: integer; s: string; s := line; if IgnoreBlanks then i := 1; j := 1; len := length(line); while i <= len do if not (line[i] in [#9,#32]) then s[j] := line[i]; inc(j); inc(i); setlength(s,j-1); if IgnoreCase then s := AnsiLowerCase(s); //return result as a pointer 19

20 to save typecasting later... result := pointer(calccrc32(pchar(s), length(s))); const table: ARRAY[0..255] OF DWORD = ($ , $ , $EE0E612C, $990951BA, $076DC419, $706AF48F, $E963A535, $9E6495A3, $0EDB8832, $79DCB8A4, $E0D5E91E, $97D2D988, $09B64C2B, $7EB17CBD, $E7B82D07, $90BF1D91, $1DB71064, $6AB020F2, $F3B97148, $84BE41DE, (continua ) (modificações, inserções, deleções) resultantes das comparações realizadas. Figura 04 Demo do nosso projeto Versionador em ação. //CRC algorithm courtesy of Earl F. Glynn... //( Mathematics/CRC.htm) function CalcCRC32(p: pchar; length: integer): dword; var i: integer; result := $FFFFFFFF; for i := 0 to length-1 do result := (result shr 8) xor table[ pbyte(p)^ xor (result and $000000ff) ]; inc(p); result := not result; Resumo da Ópera: Pondo o THVCheckVersion pra funcionar Finalmente, o nosso componente já pode trabalhar e de forma transparente 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 versionados 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 20 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.Get AllVersionedCommittedFiles(c onst MySearchBaselineFolder:

21 string); var sr: TSearchRec; searchresult: integer; datahoraarquivo: TDateTime; if tempclientdataset.active then tempclientdataset. EmptyDataSet; with tempclientdataset. Aggregates.Add do Expression := MAX(MODIFIEDDATE) ; AggregateName := MaxData ; Active := True; tempclientdataset. AggregatesActive := true; tempclientdataset. IndexFieldNames := MODIFIEDDATE ; //para ordenar por data try searchresult := FindFirst(G ettempbaselinefullpath + Includ etrailingpathdelimiter(mysearch BaselineFolder)+ *.*,faanyfile,sr); while searchresult = 0 do if sr.name[1] <>. then if not (sr.attr and FILE_ATTRIBUTE_DIRECTORY > 0) then datahoraarquivo := StrToDateTime(formatda tetime(shortdateformat + + ShortTimeFormat, FileDateToDateTime(sr.Time))); with tempclientdataset do App FieldByName( FILENAME ). AsString := sr.name; FieldByName( MODIFIEDDATE ). AsDateTime := datahoraarquivo; //SysUtils. FileDateToDateTime(SysUtils. FileAge(theFile)); Post; searchresult := FindNext(sr); finally findclose(sr); if cloriginalfilepath. Locate( FILENAME, MySearchBaselineFolder, [lopartialkey]) then foriginalfullpathfilename := cloriginalfilepath. FieldByName( PATHNAME ). AsString + cloriginalfilepath. FieldByName( FILENAME ). AsString; //if (tempclientdataset. RecordCount > 0) then // // showmessage(tempclientdataset. Aggregates.Find( MaxData ). Value); // tempclientdataset. Filter := MODIFIEDDATE = + QuotedStr(tempClientDataSet. Aggregates.Find( MaxData ). Value); // tempclientdataset. Filtered := True; // ShowMessage(tempClientDataSet. fieldbyname( FILENAME ). AsString); // procedure THVCheckVersion. CreateTempClientDataSet; if not Assigned(tempClientDataSet) then tempclientdataset := TClientDataSet.Create(Self); 21

22 if tempclientdataset.active then tempclientdataset. EmptyDataSet; RemoveFields; with tempclientdataset. FieldDefs do with AddFieldDef do Name := FILENAME ; DataType := ftstring; Size := 200; with AddFieldDef do Name := MODIFIEDDATE ; DataType := ftdatetime; with tempclientdataset. Aggregates.Add do Expression := MAX(MODIFIEDDATE) ; AggregateName := MaxData ; Active := True; tempclientdataset. AggregatesActive := true; if tempclientdataset.active then tempclientdataset.close; tempclientdataset. CreateDataSet; 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 versionamento 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 versionamento 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! Sobre o autor Hamden Vogel Analista de Sistemas pós-graduado em Engenharia de Software pela UPIS e Programador Delphi com larga experiência desde 2000, tem desenvolvido 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. suporte@theclub.com.br 22

23 Visual Studio 2013 Apresentando o Visual Studio Online Olá amigos do The Club, neste artigo gostaria de apresentar uma ferramenta lançada o ano passado para nós desenvolvedores, o Visual Studio Online, um complemento baseado na nuvem do Windows Azure para o Microsoft Visual Studio 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. conferir o usuário e a senha abaixo: theclubprogramadores@hotmail.com senha: 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, ferramentas 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. Pré- Requisitos Para realizarmos a integração do Microsoft Visual Studio 2013 com o Visual Studio Online deveremos possuir uma conta ativa de no Outlook, Live ou Hotmail. Eu criei uma no hotmail especialmente para nosso artigo, podemos 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: 23

24 Criando uma Conta Para criar uma conta no Visual Studio Online, deveremos acessar o link abaixo: 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. Logo em seguida clicar no botão Comece a usar gratuitamente. Ver Figura 01. 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) 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 Brasil de contato: theclubprogramadores@hotmail.com País/Região: Brasil URL da Conta: theclubprogramadores.visualstudio.com 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 Template. Ver Figura 04. Project name: Artigo The Club Description: Artigo Voltado para o aprendizado do Visual Studio Online Version control: Team Foundation Version Control Process Template: Microsoft Visual Studio Scrum 2013 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 04: Criando o primeiro projeto. Na próxima etapa nos deparamos com algumas abas importantes, sendo as principais: Figura 02: Criando uma Conta do Visual Studio Online 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

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 desenvolvimento 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 configuradas 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. 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. 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 Para isto clique no botão Open With Visual Studio to Conect. Ver Imagem 05. 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 05: Conectando com o MVS Automaticamente abrirá a IDE do Visual Studio solicitando o usuário e senha criado anteriormente no Hotmail, OutLook ou Live. Ver Figura 06. Figura 08: Escolhendo o TFVC. Na próxima etapa teremos que adicionar a Solution ao nosso controlador. O projeto indica a mesma solução criada anteriormente no Visual Studio Online. Ver Figura 09. Figura 06: Informando as credenciais de acesso. Figura 09: Adicionando o projeto. 25