Apresentando o SuperQuiz

O SuperQuiz é um jogo de Quiz para Windows 8 para Metro Style, desenvolvido em C#, que utilizou como base o template grid, disponível no Visual Studio 2012 RC.

O propósito deste jogo é servir como um primeiro contato para programadores e designers com o novo modelo de programação, introduzido com o Metro Style no Windows 8. E nada mais legal do que ter o primeiro contato com uma aplicação funcional.

Desenvolvemos o SuperQuiz  em XAML e C# pela facilidade que temos de desenvolver em C#, mas o mesmo jogo poderia ser desenvolvido em HTML5 e JavaScript.

Faça download do projeto acessando o link: http://supermetroquiz.codeplex.com/ abra o projeto e acompanhe o artigo.

Veja abaixo o projeto do SuperQuiz:

Pastas e seus conteúdos

Para facilitar o entendimento do  projeto vou descrever o que você vai encontrar a cada item do projeto.

1. Properties

Abrindo este item você vai encontrar o arquivo AssemblyInfo.cs - neste arquivo, configuramos as opções para configuração do Build (compilação), tais como nome da empresa, versão, descrição, etc.

Este arquivo só está presente em projetos do tipo Windows e não é exclusividade do Metro Style. 

2. References

Na pasta References você vai encontrar todas as referências que o SuperQuiz necessita para ser compilado e executado. Este projeto não faz uso de nenhuma referência específica, mas sim as padrões para todos os projetos C# para o Windows 8 Metro Style.

.NET for Metro Style apps

Windows

3. Assets

Na pasta Assets,  você vai encontrar os recursos utilizados pela aplicação. Para este projeto encontraremos todas as imagens usadas pela aplicação, como as diferentes opções de logo (utilizadas na aplicação), imagens de fundo e até mesmo as (imagens) utilizadas pelo conteúdo da aplicação.

4. Common

O diretório Common possui classes e estilos XAML que simplificam o desenvolvimento da aplicação.

Lá encontramos a definição da classe LayoutAwarePage, que é a (classe) base para todas as páginas do nosso projeto.

O arquivo de estilo StandardStyle.xaml, possui as definições dos estilos utilizada na diagramação visual do projeto.

5. SuperQuiz

Neste diretório encontramos as classes de controle, modelo, utilitários, as views e os arquivos XML de conteúdo. Veja na imagem abaixo:

SuperQuiz namespace

6. App.xaml

O arquivo é utilizado para definirmos os estilos utilizados pela aplicação (StandardStyle.xaml e QuizStyle.xaml) e o nome da aplicação.

A sua classe, App.xaml.cs especifica o comportamento da aplicação estendendo a classe básica Application. Nesta classe, controlamos o ciclo de vida da aplicação.

7. CategoryPage.xaml

Esta página da nossa aplicação apresenta os quizes de uma categoria. É apresentada quando clicamos sobre o título de uma categoria na página HomePage.xaml.

8. HomePage.xaml

Este arquivo é a página de hub de nosso conteúdo - é a primeira página que o usuário visualiza ao entrar na aplicação.

9. Package.appxmanifest

O arquivo de manifesto, como é conhecido, é utilizado pelo sistema operacional para identificar quais as funcionalidades que sua aplicação está utilizando (definindo as Capabilities e Declarations).

O arquivo de manifesto também é utilizado para definirmos as imagens de logo que a aplicação faz uso, e como sua aplicação é visualizada na store.

Cada um dos aspectos que o arquivo de manifesto configura está disponível por uma aba no editor. Para visualizá-lo, clique duas vezes sobre o arquivo de manifesto.

Package Manifest

10. QuizPage.xaml

Esta página é apresentada quando clicamos sobre um Quiz na página de Hub (homepage) ou na página de categoria (CategoryPage).

Ela traz uma breve descrição sobre o quiz e utiliza o controle FlipView para navegarmos entre os Quizes de uma categoria.

11. QuizPlayPage.xaml

Página que apresenta a pergunta e as alternativas do Quiz – nela é implementado o contrato de share.

12. SearchResults.xaml

Apresenta o resultado da pesquisa, quando o contrado de busca é utilizado. Esta página possui a mesma estrutura da HomePage, alterando apenas a fonte de dados utilizada para apresentar o resultado.

Navegação

Agora que você conhece os componentes do projeto SuperQuiz, vou apresentar a navegação do aplicativo. Conhecer como e quando cada página é apresentada vai ajudá-lo a customizar a aplicação.

Abaixo, apresento as imagens com as principais telas da aplicação. Aqui não estou incluindo o SplashScreen comum para todas as aplicações Metro Style.

Página	Descrição
	HomePage.xaml   Apresenta as categorias com alguns quizes que a compõem. Esta é a página de entrada da aplicação.
	CategoryPage.xaml   A página é apresentada ao clicar no botão com o nome da categoria na HomePage. Ela apresenta a imagem da categoria e os quizes que possui.
	QuizPage.xaml   Página de apresentação do Quiz - possui a imagem que identifica o Quiz e uma breve descrição de seu conteúdo. Na AppBar, há o botão para iniciar o Quiz. Pode ser acessada em três momentos: na HomePage, na CategoryPage ou, ainda, na SearchResults.
	QuizPlayPage.xaml   Aqui é apresentada a Pergunta do Quiz e suas alternativas. Acessamos esta página quando clicamos no botão iniciar.

Lógica do aplicativo

A lógica do SuperQuiz está dividida em duas classes do namespace SuperQuiz.Logic - a classe QuizApplication e a QuizPlay.

A classe QuizApplicaiton é responsável por carregar os arquivos XML de categoria e quiz, registrar o comandos de configurações (Settings), Sobre (About), e  popular a estrutura de dados  de busca.

Já a classe QuizPlay é responsável por controlar o game de Quiz propriamente dito.

QuizApplication Class

O método responsável por ler os arquivos XML e popular o modelo de dados é o InternalLoad. Esse método lista todos os arquivos com a extensão .xml da pasta SuperQuiz\Assets\Categories, populando o dicionário de categorias.

Veja abaixo o código utilizado por popular as categorias:

var appCategoriesFolder = await Windows.ApplicationModel.Package.Current.InstalledLocation.GetFolderAsync(@"SuperQuiz\Assets\Categories");

var quizCategoriesQuery = appCategoriesFolder.CreateFileQueryWithOptions(new QueryOptions(CommonFileQuery.OrderByName, new string[] { ".xml" }));

foreach (var item in await quizCategoriesQuery.GetFilesAsync())
{
   try
   {
      var category = await ObjectPersister.LoadAsync<QuizCategory>(item.Path, ObjectPersisterLocation.Path);
      if (category.Quizzes == null)
      {
         category.Quizzes = new ObservableCollection<Quiz>();
      }
      CategoryDictionary[category.UniqueId] = category;
      QuizCategories.Add(category);
   }
   catch { }
}

 A próxima etapa do código é carregar o arquivos de Quiz - veja o código abaixo:

var appQuizzesFolder = await Windows.ApplicationModel.Package.Current.InstalledLocation.GetFolderAsync(@"SuperQuiz\Assets\Quizzes");

var quizFilesQuery = appQuizzesFolder.CreateFileQueryWithOptions(new QueryOptions(CommonFileQuery.OrderByName, new string[] { ".xml" }));
foreach (var item in await quizFilesQuery.GetFilesAsync())
{
   try
   {
      var quiz = await ObjectPersister.LoadAsync<Quiz>(item.Path, ObjectPersisterLocation.Path);
      foreach (var question in quiz.Questions)
      {
         question.Quiz = quiz;
      }
      QuizDictionary[quiz.UniqueId] = quiz;
      if (CategoryDictionary.ContainsKey(quiz.CategoryUniqueId))
      {
         CategoryDictionary[quiz.CategoryUniqueId].Quizzes.Add(quiz);
      }
   }
   catch { }
}

Quando não existir arquivos xml, o método cria uma estrura de categorias e quizes executando o método QuizDataSource.GenerateSampleQuizzes().

As categorias populadas são posteriormente atribuídas para a propriedade DefaultViewModel, no método LoadState da página. Veja abaixo o código da página HomePage:

protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)
{
   this.DefaultViewModel["Categories"] = QuizApplication.Instance.QuizCategories;
}

Conclusões

Neste artigo foi apresentado o exemplo de um jogo de quiz de uma aplicação Windows 8 Metro Style.

Essa aplicação implementa as principais funcionalidades de um aplicativo, e será uma base para o seu aprendizado.

Navegue no código, familiarize-se com a estrutura do aplicativo e inclua breakpoints para entender seu funcionamento.