Desenvolvimento com tecnologia Microsoft e Interoperabilidade
Twitter: @vbs_br
Facebook: vbatistadesouza
LinkedIn: viniciusbatista

Templates para Windows 8 – Como utilizá-los para tirar maior proveito.

Olá amigos!

Nesse artigo vou ajudá-los a entender melhor o código dos templates do AppDay, apresentando algumas das novas funcionalidades do Windows 8 e o código :)

Os templates são um facilitador para o desenvolvimento de seu aplicativo principalmente em se tratando de layout, mas como tirar maior proveito dos templates do AppDay ou qualquer outro template que você possa vir a utilizar?

A dica aqui é ir fundo nas funcionalidades do templates, não ficando limitado em alterar apenas a fonte de dados do template, mas adicionando mais desafios aos poucos.

O template é um acelerador, para que você consiga trabalhar em um aplicativo para o Windows 8 funcional e aprender as principais mudanças que a plataforma Windows está entregando. Como a nova linguagem visual, o WinRT (Windows RunTime) e a Windows Store.

Veja o vídeo que traz os passos de alterar o templates de Catálogo Eletrônico para um aplicativo de Cup Cackes, http://channel9.msdn.com/posts/AppDay-Parte-3.

 

Os templates que estou me referindo estão disponíveis no Codeplex! O portal de código open source da Microsoft.

http://win8appdaytemplate1.codeplex.com/ - Catálogo Eletrônico

http://win8appdaytemplate2.codeplex.com/ - Dicas de viagens

http://win8appdaytemplate3.codeplex.com/ - Ferrari

http://win8appdaytemplate4.codeplex.com/ - Indiana Jones

http://win8appdaytemplate5.codeplex.com/ - Xbox Live

Basicamente os dois templates tem a mesma estrutura, mudando mais o layout e o finalidade de cada um deles. Não se prendam ao tema do template, e sim qual linguagem visual mais se adequa a forma que deseja expressar a sua ideia.

Ficarei focado no código,  apresentando um exemplo visual de uma funcionalidade do Windows 8 que o template implementa e onde você vai encontrar a sua implementação no código. Sem mais milongas vamos por a mão na massa!
1) Contrato de Search (ou simplesmente busca);
  O contrato de Search é importante por dois motivos:

1) Possibilita que o usuário encontre a informação que deseja.

Aplicativos com muito texto ou com muita granularidade na informação, pode trazer um certo grau de complexidade para o usuário encontrar o que deseja.

2) Entrega mais relevância ao aplicativo, dando ao desenvolvedor mais exposição no Windows.

Sempre que o usuário realizar uma busca no Windows 8 (WinKey + Q), uma lista será apresentada para o usuário com os aplicativos que possuem a o contrato de serach implementado e com isso o usuário pode executar o aplicativo a partir da busca, como apresentado na figura ao lado.

 

Para implementar o Contrato de Search no seu aplicativo, antes mesmo de escrever qualquer código temos que alterar o arquivo de manifesto (Package.appxmanifest) em nosso projeto. Ao abrir o arquivo de manifesto no Visual Studio, você verá 4 abas (Application UI, Capabilities, Declarations e Packaging) a opção que vamos alterar é a Declarations (declarações).

As declarações é a maneira de informar o Windows qual ou quais funcionalidade que o seu aplicativo utiliza.

Na aba Declarations teremos uma combo com todas a declarações disponíveis, escolha a opção Search e clique em Add (adicionar).

O próximo passo é alterar o arquivo App.xml.cs incluindo um novo método de ativação, que será executado quando o usuário clicar sobre o ícone da sua aplicação (caso ela não seja a aplicação ativa).  Abra o arquivo App.xml.cs do template e procure pelo método abaixo.

OnSearchActivated(Windows.ApplicationModel.Activation.SearchActivatedEventArgs args)

O método faz basicamente o mesmo procedimento do método OnLaunch (executado quando o usuário clica sobre o Tile do seu aplicativo), incluindo uma funcionalidade a mais que é a de executar o filtro antes de redirecionar o usuário para a página inicial, que para esse caso será a página ResultadoBusca.xml.

 

2) Contrato de Share Source;

Essa é uma funcionalidade do Windows 8 que mais gosto, pois possibilita uma maneira padronizada de comunicação entre os aplicativos que o usuário possui. Para tanto, é necessário que o aplicativo que deseja receber dados de outros aplicativos implemente outro contrato, o Share Target e o aplicativo que quer compartilhar implemente o contrato Share Source.

Nesse item vamos cobrir o Share Source que é o contrato implementado pelo template, esse contrato é um pouco diferente dos demais, uma vez que não é necessário adicionar no arquivo de manifesto a intenção de fazer o compartilhamento de dados.

Informamos o Windows que aplicação realiza compartilhamento de informação através da classe DataTransferManager, no template utilizo a classe DataTransferManager no detalhamento de um item arquivo ItemPage.xaml.cs.

A utilização da classe se dá no método OnNavigatedTo, este método é executado sempre que a página for aberta. Nesse método recupero uma instância da classe DataTransferManager através do método estático GetForCurrentView, depois que consigo a instância do objeto registro dois handlers (métodos que serão executados quando o evento ocorrer) DataRequested e TargetApplicationChosen.

protected override void OnNavigatedTo(NavigationEventArgs e)         {            

base.OnNavigatedTo(e);

// Register the current page as a share source.            

this.dataTransferManager = DataTransferManager.GetForCurrentView();            

this.dataTransferManager.DataRequested += new TypedEventHandler<DataTransferManager, DataRequestedEventArgs>(this.OnDataRequested);  

this.dataTransferManager.TargetApplicationChosen += dataTransferManager_TargetApplicationChosen;        

}

O evento DataRequested é executado quando ativamos o share do Windows (pelo charms, ou pela tecla de atalho WinKey+H), e o evento TargetApplicationChosen é executado em um segundo momento do share, quando o usuário seleciona a aplicação desejada para receber os dados que serão compartilhados. O Windows lista todas as aplicações que implementam o contrato de Share Target e que dão suporte para o tipo de dado compartilhado.

private void OnDataRequested(DataTransferManager sender, DataRequestedEventArgs e)

O método OnDataRequested recebe dois parâmetros sendere, vamos utilizar o parâmetro e do tipo DataQuestEventArgs.

No template utilizo um método separado chamado GetShareContent para preencher os dados, mas também poderia fazer tudo dentro do próprio método OnDataRequested.

Verifiquem o conteúdo do método GetShareContent, com atenção ao seguinte código.

requestData.SetUri(new Uri(_baseUri, item.ImageUrl));

requestData.Properties.Title = string.Format(“{0} – {1}”, Win8CatalogApplication.Instance.Empresa.Nome, item.Nome);

 requestData.Properties.Description = item.Descricao;

 requestData.SetText(item.Descricao);

requestData.Properties.Thumbnail = imageStreamRef;

requestData.SetBitmap(imageStreamRef);

O objeto requestData é do tipo DataPackage e recebeu uma instância da propriedade DataRequestedEventArgs.Request.Data, as aplicações apresentadas pelo Windows estão diretamente vinculadas ao tipo de dados que preenchemos.

3) Live Tile;

Ter acesso ao conteúdo ou ao status do aplicativo sem ter que executar o aplicativo essa é a grande vantagem do Live Tile,

 

Acima temos um exemplo de uma App com a funcionalidade de Live Tile implementada, a primeira imagem apresenta o Tile do aplicativo quando desligamos o Live Tile e a segunda com o Live Tile habilitado.

Essa aplicação em questão é um Hub de fotos, a implementação do Live Tile apresenta algumas das fotos do aplicativo.

O Windows suporta vários tipos de Live Tiles tile template catalog , utilize aquele que melhor se adequar as suas necessidades.

No template é utilizada um Namespace chamado EnableLiveTile para criar os Live Tiles, utilize nos seus projetos :)

Este é o código utilizado pelo template para incluir o Live Tile

EnableLiveTile.CreateLiveTile.ShowliveTile(true, Win8CatalogApplication.Instance.Empresa.Nome);

4) App Bar;

A App Bar é um recurso utilizado acessar recursos/ou funcionalidades que são comuns durante todo o aplicativo, existe um documento bem completo explicando exatamente quando e como utilizar esse recurso, vale a pena dar uma conferida.

http://msdn.microsoft.com/pt-br/library/windows/apps/xaml/hh781231.aspx

No template utilizei a app bar para ajudar o usuário voltar para a home sempre que desejar, a App Bar pode ser utilizada no Topo da página como na figura ao lado ou na parte Inferior da página.

A App Bar é um componente visual e por isso é definido no XAML, abra o arquivo HomePage.xaml para verificar como utilizar.

 

<Page.TopAppBar>
<AppBar x:Name="TopApp" Padding="10,0,10,0" MinHeight="110" Background="#D1000000" BorderBrush="#D1000000">
           <Grid Height="100" Margin="40,0">
                 <StackPanel Margin="0" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left">
                     <Button x:Name="btnHome" HorizontalAlignment="Right" BorderBrush="{x:Null}" BorderThickness="0" FontWeight="Normal" VerticalAlignment="Stretch" Padding="0" Style="{StaticResource TopAppbarBtnStyle}" Click="btnHome_Click" >
                         <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Height="92" Margin="0" Width="92">
                             <Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/AppBarBtn/HomeappbarBtn.png" Width="92" Margin="0" Height="92"/>
                         </Grid>
                     </Button>
                 </StackPanel>
             </Grid>
       </AppBar>
</Page.TopAppBar>

5) Settings;

Para padronizar o local onde o usuário vai encontrar as configurações de um aplicativo, o Windows utiliza o Contrato de Settings.

Podemos definir as opções que teremos nas configurações de nosso aplicativo a qualquer momento, no template fiz uso do evento OnWindowCreated, na classe App (App.xaml.cs) que é executado sempre que uma nova janela for criada.

Neste método faço o registro do Handlers do evento que será executado quando o usuário clicar no ícone de settings da Charm Bar.

SettingsPane.GetForCurrentView().CommandsRequested += App_CommandsRequested;

No método App_CommandsRequested, vamos adicionar as opções que serão apresentadas para o usuário.

void App_CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)

Incluímos as opções utilizando a classe SettingsCommand, ao instanciar um objeto dessa classe devemos definir 3 (três) parâmetros ID, Texto e um handler que será executado quando o usuário clicar sobre a opção desejada. No template é utilizado o mesmo handler para todas as opções, e utilizamos o ID para identificar a opção que foi acionada.

UICommandInvokedHandler handler = new UICommandInvokedHandler(onSettingsCommand);

SettingsCommand aboutCommand = new SettingsCommand(“AU”, “Sobre”, handler);

args.Request.ApplicationCommands.Add(aboutCommand);

 

6) Snapped View.

O Snapped View permite que tenhamos dois aplicativos sendo executados ao mesmo tempo, com um espaço reduzido o aplicativo deve se adequar ao novo espaço não prejudicando a experiência do usuário.

Algumas páginas podem não ter uma representação no Snapped view, mas deve ser informado alguma informação para o usuário. Em alguns casos como em jogos, por exemplo, ao colocar no Snapped view é apresentado o placar com e o jogo é pausado.

No template utilizamos o controle VisualStateManager, este controle identifica o tipo de visualização que a aplicação está sujeita e executa alguns StoryBoard, trocando as propriedades de alguns controles.

Como exemplo de aplicação, vamos abrir o arquivo HomePage.xaml e procurar por VisualStateManager.

No template utilizamos o VisualStateManager para deixar a grid invisível e a lista de itens visível, alterando a propriedade da Visibility. No trecho de código a seguir, temos um exemplo de ambos os casos.

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>

Onde você pode evoluir?

1) Acessar uma fonte de dados externa.

A aplicação é de certa forma estática, uma vez que os dados por ela consumidos estão todos armazenados na aplicação, da maneira que foi desenvolvido o template você pode utilizar de um webservice (REST :) ) para realizar consultas, e por sua vez utilizar um backoffice para atualizar as informações apresentadas para os usuários.
O Windows Azure possui um serviço chamado Mobile Services, este serviço fornece uma infraestrutura com banco de dados e serviços REST que podem ser executados para fazer operações de CRUD.

OBS: Para consumir dados de fontes externas, é necessário incluir no arquivo de manifesto a utilização de internet, que por sua vez demanda a publicação da sua política de privacidade.
2) Utilização de notificação.

Ao deixar a aplicação com conteúdo dinâmico, talvez seja importante implementar a o serviço notificação, dessa forma o usuário vai receber notificações quando haver conteúdo novo disponível.

3) Incluir o pinning na aplicação.

O pinning de conteúdo permite que o usuário crie um acesso rápido direto para o conteúdo que deseja, assim ele consegue acessar o conteúdo diretamente pela Start Screen. Está é uma funcionalidade muito interessante e recomendada para ser implementada.

 

Conclusões

Existem várias maneiras de alterar o template e estender a sua funcionalidade, tenha uma experiência ponto-a-ponto com o template criando a sua App e submetendo-a  para a Windows Store e crie uma segunda versão, depois uma terceira e assim por diante.

Implementado aos poucos novas funcionalidades a cada nova versão, faça uso também do TFS – Team Foudation Service http://tfs.visualstudio.com/ gerenciando versões e bugs que seu aplicativo venha a apresentar.

Sejam perseverantes  e pacientes, às vezes ao primeiro contato as desafios parecem ser mais complicado do que realmente o são e você vera que a medida que for estudando e se aprofundando os conceitos vão se encaixando e os desafios clareando cada vez mais.

Abraço,

 

Vinícius.

 

18 comments

  1. NOssa, Vinicius, realmente muito bom esse artigo, o mais completo que achei até agora.

    Estava ajudando umas meninas que estão participando do campeonato paralelo ao Imagine Cup e vou mostrar esse artigo a elas :D show

    PS: adica do Azure Mobile Services foi ótima também, achoq ue elas vão usar

  2. Danilo Cecilia /

    Fala Vinícius, acompanhei o webcast deste último sábado gostei bastante porêm gostaria de dar uma susgestão, que tal fazer um hangout do google pra poder tirar algumas dúvidas da galera, ou passar mais afinco alguns pontos que não foi passado no webcast, por exemplo: constrindo um grid do zero, utilzando listview, comunicar com webservices, crud, etc…

    • A ideia dos templates é justamente para que o desenvolvedor iniciante não saia do zero, e ter um exemplo funcional.
      Estamos iniciando o desenvolvimento de Apps para Windows 8, os temas que levantou são excelentes, mas para um programador mais avançado que teoricamente consegue trabalhar com os exemplos que temos disponíveis em http://code.msdn.microsoft.com/windowsapps.

  3. Leonardo Wintrich /

    Fala Vinicius… da uma ajudinha ai. To com um erro estranho
    http://social.msdn.microsoft.com/Forums/pt-br/wpfpt/thread/63d490e9-4061-4da2-a15d-57d8077eff38

    Desde já agradeço

    • Não consegui ver a imagem do erro Leonardo. Teria como postar a imagem no Grupo do Facebook Apps4Win! Windows 8?

      • Leonardo Wintrich /

        O erro é:

        Error 1 The namespace ‘Win8Catalogo’ already contains a definition for ‘Program’ C:\Users\lwintrich\Documents\Visual Studio 2012\Projects\EstudoW8\Win8Catalogo\Win8Catalogo\obj\Release\App.g.i.cs 17 25 Win8Catalogo

        Já solicitei para entrar no grupo no facebook

        • Oi Leonardo, faz o seguinte:
          No meu Build do Visual Studio, selecione a opção Rebuild Solution. deve solucionar!

          • Leonardo Wintrich /

            Pois é… ja tentei o build, o clean, o rebuild,…. nada funciona. Eu ja tenho alguma experiencia em desenvolvimento. Porem trabalho com web. webform/mvc, etc.
            O estranho que qdo coloco em Debug funciona perfeitamente.

          • Leonardo Wintrich /

            Fala Vinícius, consegui aqui. Vi uma dica no face de excluir a pasta obj. A funcionou. Vlw ai pela ajuda!!! Abraço

  4. Aldo Amaral /

    Boa noite Vinicius tenho uma preocupação quero fazer meu 1ª app porem estou usando a template do indiana jones, a duvida principal e que desejo fala de um personagem de mangás onde fizeram um filmes dele, tenho ate uma mp3 de uma musica tema caso eu conclua meu app e poste na store poderei sofre algum tipo de critica por questões de direitos autorais pois eu sou fan do personagem e seriado, poderia me orienta nisso .

  5. Como faço para criar uma nova categoria no template da ferrari??

  6. Donizete /

    Olá Vinicius, parabéns pelo webcast. Quero alterar o template para utilizar subcategorias. É possível ou tem q alterar muito a funcionalidade? Mostre o caminho a seguir… os files para alterar… Cheguei a criar a subcategoria.cs, mas dá dando erro.. e aí começei a achar que não vale a pena pq tah dando erro no modelo Win8Catalog.Win8Catalogo.Model.Categoria.

    • Oi Donizete, para incluir uma subcategoria vc. vai ter que alterar muita coisa.
      Do modelo de dados, ao arquivos XML e a camada de apresentação (Navegação, Novas páginas…).

      Sugiro fortemente que utilize o template e navegue no código para entende-lo de ponta a ponta, principalmente no seu primeiro aplicativo :)

  7. Jorge /

    Boa Noite Vinicius,

    Gostaria de saber se é possível que o usuário seja direcionado para um site (ou conteúdo) externo clicando em um texto ou imagem do aplicativo. Como implemento essa funcionalidade?

    • Oi Jorge é possível sim, mas para isso é necessário incluir no arquivo de manifesto a utilização de internet.
      E publicar a política de privacidade utilizada na sua app em um domínio público.

      E o código é bem simples.
      Launcher.LaunchUriAsync(new Uri(“sua url”));

Trackbacks/Pingbacks

  1. Prepare-se para o AppDay: veja como tirar melhor proveito dos templates para Windows 8 | Porta 25 - [...] especialista em desenvolvimento Vinicius Souza preparou um artigo para ajudá-los a entender melhor o código dos templates do [...]

Leave a Reply to Aldo Amaral Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>