Desenvolvendo Universal Apps com HTML/WinJS para Windows 8.1 – Parte 3

Há um tempo atrás publicamos um post sobre desenvolvimento de aplicativos universais com HTML e JS para Windows e Windows Phone 8.1. Nele citamos que uma das formas de compartilhamento que temos em aplicativos universais é o compartilhamento de código.

O compartilhamento de código é o mais comum, onde costumamos ter um código Javascript que é compartilhado entre os aplicativos das duas plataformas.

Mas temos ainda uma outra opção de compartilhamento que é o de interface. Nessa opção de compartilhamento, tanto o HTML como o Javascript são definidos no projeto Shared e referenciados pelos projetos Windows e Windows Phone.

Etapa 1: Desenvolvendo em uma página comum

No post anterior fizemos a cópia do arquivo Shared\page\home\home.html no projeto referente a cada uma das duas plataformas.

Com isso, foi possível escrever o código específico para Windows sem afetar nosso projeto Windows Phone.
Porém, apenas parte do código era somente para Windows e poderíamos então ter optado em manter um único arquivo. Mas para isso, temos que lidar com o conteúdo HTML que não é comum entre as plataformas.

E não existe uma forma mais simples de lidar com isso do que usar o próprio CSS.

1. Vamos começar então movendo o arquivo Windows\pages\home\home.html para o caminho Shared\pages\home\. Depois disso vamos apagar o arquivo WindowsPhone\pages\home\home.html.
2. Agora vamos tratar o HTML específico do Windows no home.html. Para tanto vamos primeiro alterar nosso arquivo Shared\pages\home\home.html definindo uma nova classe CSS sobre o elemento que agrupa o conteúdo somente para Windows (linhas em destaque):

   	<section aria-label="Main content" role="main">
           <div class="mainContent">
               <p>What's your name?</p>
               <input id="nameInput" type="text" />
               <button id="helloButton">Say "Hello"</button>
               <div id="greetingOutput" data-win-bind="textContent: greetings"></div>
           </div>
   
           <div class="windowsonly">
               <label for="ratingControlDiv">
                   Rate this greeting:
               </label>
               <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">
               </div>
               <div id="ratingOutput" data-win-bind="textContent: rating"></div>
           </div>
       </section>
   	

   Nota:
   Definomos a classe CSS windowsonly no elemento div que contém o controle rating do Windows.

3. Agora vamos alterar o arquivo WindowsPhone\css\default.css para incluir, no início do arquivo, o CSS necessário para não exibir o conteúdo que é somente para Windows:

   	.windowsonly {
           display: none;
       }
   	

4. E podemos também fazer o mesmo no arquivo Windows\css\default.css. Para este vamos definir a classe CSS phoneonly:

   	.phoneonly {
           display: none;
       }
   	

E pronto! Agora só precisamos usar a classe windowsonly para o HTML do Windows e a classe phoneonly para o HTML do Windows Phone. Lembrando que o default.css é carregado por ambas as plataformas pelo nosso arquivo inicial default.html. Assim sendo, se usarmos o esquema de navegação Single Page, em que a página default.html sempre se mantem ativa, trocando-se somente seu conteúdo, todos nossos HTMLs da aplicação terão disponível as regras CSS acima.

Etapa 2: Criando estilos comuns

As folhas de estilo CSS normalmente são feitas para cada plataforma pois costumam ser bem específicas. Contudo, existem algumas regras que podem se aplicar para as duas plataformas.

A seguir iremos criar um CSS que seja comum tanto para Windows como para Windows Phone.

1. Primeiro vamos criar um novo arquivo CSS default-shared.css na pasta Shared\css\default-shared.css do projeto Shared.
2. Neste arquivo vamos definir o CSS que irá ser aplicado nas duas plataformas. Exemplo:

   	#greetingOutput {
   	    color: blueviolet;
   	    font-size: 2em;
   	    margin-top: 20px;
   	    margin-bottom: 20px;
   	    border-bottom: solid 1px gray;
   	}
   
   	#greetingOutput:empty {
   	    border: none;
   	}
   	

3. Agora vamos alterar o arquivo default.css de cada plataforma para incluir o arquivo default-shared.css que acabamos de criar:
   • No Windows, alterar o arquivo Windows\css\default.css incluindo a seguinte linha no início do arquivo:

     	@import url(default-shared.css);
     	

   • No Windows Phone, alterar o arquivo WindowsPhone\css\default.css incluindo a seguinte linha no início do arquivo:

     	@import url(default-shared.css);
     	

4. Agora vamos testar a aplicação tanto no Windows como no Windows Phone.
   • No Windows:

   • No Windows Phone:

Resumindo esta etapa…

Quando tivermos alguma página comum onde precisamos ter conteúdo somente para Windows ou Windows Phone, criamos classe CSS windowsonly e phoneonly. Depois, no arquivo default.css de cada plataforma, definimos a regra CSS que não exibe o conteúdo da outra plataforma:

• No Windows:

.phoneonly {
    display: none;
}

• no Windows Phone:

.windowsonly {
    display: none;
}

Já no HTML temos o seguinte:

<section aria-label="Main content" role="main">
    <div class="mainContent">
        <p>What's your name?</p>
        <input id="nameInput" type="text" />
        <button id="helloButton">Say "Hello"</button>
        <div id="greetingOutput" data-win-bind="textContent: greetings"></div>
    </div>

    <div class="windowsonly">
        <label for="ratingControlDiv">
            Rate this greeting:
        </label>
        <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">
        </div>
        <div id="ratingOutput" data-win-bind="textContent: rating"></div>
    </div>
</section>

Já para estilo CSS comum, criamos um arquivo Shared\css\default-shared.css e lá definimos nossas regras de estilo CSS comuns. Depois importamos esse CSS dentro do default.css de cada plataforma:

@import url(default-shared.css);

Dessa forma, as regras de estilo definidas no arquivo Shared\css\default-shared.css irão compor o conjunto de regras de estilo aplicadas nas nossas páginas HTML.

Considerações Finais

Aqui terminamos essa série curta de posts em que abordamos a forma como maximizar o compartilhamento de código entre projetos Windows 8.1 e Windows Phone 8.1 quando desenvolvemos Universal Apps.

E aí, gostaram? Querem saber mais sobre algum outro assunto? Mande-nos dicas, sugestões e comentários. Esse espaço foi criado com o objetivo de fornecer dicas e tratar assuntos de desenvolvimento que poderão auxiliar nós desenvolvedores a transpor obstáculos na criação de aplicativos para Windows/WindowsPhone. E com a sua ajuda poderemos aperfeiçoar ainda mais o conteúdo que estamos disponibilizando aqui.

Obrigado e continue nos seguindo no talkitbr!