Desenvolvendo para Windows 8 com HTML, CSS e JavaScript

Introdução

Como já deve ser de conhecimento do leitor, é possível desenvolver aplicações para Windows 8 utilizando HTML, CSS e JavaScript, da mesma forma como também se pode fazer com C# e XAML. Caso o leitor ainda não soubesse disso, esteja ciente que esta é uma das maiores novidades apresentadas juntas com o mais recente sistema operacional da Microsoft e seu IDE de desenvolvimento, o Visual Studio 2012.

Assim como em uma aplicação web, pode-se utilizar HTML e CSS para montar o layout da aplicação, que é baseada em páginas, e usar JavaScript para acrescentar funcionalidades. Nessa caso, a JavaScript assume o papel que até então era das linguagens C#, Visual Basic e C++.

A possibilidade de desenvolver WinRT Apps, como são chamadas as aplicações para Windows 8 (diferentes das aplicações desktop convencionais), atraiu profissionais do desenvolvimento web, que já estavam acostumados com essa essas linguagens.

De fato as WinRT apps funcionam como aplicações web sendo executadas em um browser, que nesse caso é App Container. Esse App Container pode ser considerado, a grosso modo como um Internet Explorer sem bordas, barras de ferramentas ou menus e que serve unicamente para executar as WinRT apps.

Assim, como é de se esperar, é possível utilizar bibliotecas como jQuery e Modernizr nas aplicações, bem como importar folhas de estilos e plugins de terceiros.

As funcionalidades nativas, porém, encontram-se em uma biblioteca JavaScript chamada WinJS, apoiadas por algumas formatações visuais fornecidas pela Microsoft para estruturação do layout, segundo padrões que visam otimizar a interface para dispositivos sensíveis ao toque (caso do Surface, por exemplo, tablet oficial da Microsoft com Windows 8).

Neste artigo será demonstrado o processo de desenvolvimento de uma aplicação básica utilizando HTML, CSS e JavaScript, buscando explorar um pouco de cada uma dessas tecnologias, aplicadas em um projeto WinRT.

Criando a aplicação

O processo de criação da aplicação não difere dos demais tipos de projetos já existentes no Visual Studio. Basta acessar o menu FILE > New > Project... e selecionar a categoria JavaScript > Windows Store. Existem, por padrão, 5 templates para criar a aplicação, que diferem entre si basicamente pelo layout que é criado automaticamente, facilitando parte do trabalho de desenvolvimento:

• Blank App;
• Grid App;
• Split app;
• Fixed Layout App;
• Navigation App;

Para este artigo, utilizaremos o template Blank App, para que possamos inserir alguns controles visuais livremente na página principal, sem que nenhum elemento seja adicionado por padrão.

Figura 1: Criando a aplicação

Estrutura do projeto

Ao criar o projeto, assim como na maioria dos templates, são criadas algumas pastas e arquivos iniciais, como se pode ver na Solution Explorer, exibida na figura 2.

Figura 2: Estrutura do projeto

As pastas e arquivos são os seguintes:

• References: referências do projeto à bibliotecas externas, contidas em arquivos de extensão winmd. Por padrão é adicionada a referência à WinJS - Windows Library for JavaScript 1.0, anteriormente citada. Essas referências funcionam de forma análoga às DLLs importadas em aplicações Windows Forms e WPF, por exemplo.
• css: pasta contendo as folhas de estilo (arquivos .css) utilizadas para formatar visualmente as páginas e elementos da aplicação. Inicialmente contém apenas o arquivo default.css, com algumas poucas linhas de código.
• images: pasta utilizada para armazenar as imagens da aplicação. Por padrão são incluídas a logomarca da aplicação em vários tamanhos e a tela de splash screen.
• js: pasta onde ficam armazenados os arquivos de script JavaScript da aplicação. Inicialmente é incluído apenas o arquivo default.js, que contém algum código a partir do qual pode-se iniciar o desenvolvimento da aplicação.
• [Nome_Da_Aplicação]_TemporaryKey.pfx: um certificado digital temporário utilizado quando a aplicação é publicada.
• default.html: página principal da aplicação, contendo apenas código HTML, assim como uma página web básica.
• package.appxmanifest: esse arquivo é formado por código XML e contém informações sobre a aplicação, principalmente para serem utilizadas quando esta for publicada e instalada em um dispositivo, de forma que o sistema operacional possa conhecer a aplicação.

Enfim, código...

Vamos então programar um pouco e dar alguma funcionalidade á aplicação.

Como o objetivo deste artigo é apresentar os conceitos básicos necessários para se iniciar o desenvolvimento de Windows Store Apps (como também são chamadas essas aplicações) utilizando HTML, CSS e JavaScript, vamos apenas inserir alguns elementos visuais, aplicar alguma formatação e apresentar uma mensagem para o usuário. Assim, teremos utilizado as três linguagens.

Inicialmente, vamos abrir a página default.html e inserir o seguinte código entre as tags <body> e </body>, substituindo o parágrafo que é inserido por padrão:

Listagem 1: Conteúdo da tag body

<div class="conteudo">
    <section>
        <h1>Olá, mundo</h1>
        <h2>Esta é minha primeira Windows Store App</h2>
    </section>
    <section>
        <label for="txtNome">Nome</label>
        <input type="text" id="txtNome" placeholder="Digite seu nome"/>
        <button id="btnTestar">Clique aqui</button>
    </section>
</div>

Em seguida, vamos abrir o arquivo default.css e inserir o seguitne código abaixo de todo conteúdo já existente.

Listagem 2: Código adicionado ao arquivo default.css

.conteudo {
    margin:20px;
}

section {
    padding:10px;
}

section h1 {
    color:yellow;
}

Com isso, já podemos executar a aplicação e ver como esta´o visual da página principal, que deve ser igual ou semelhante à figura 3.

Figura 3: App em execução

Porém, nada acontece se clicarmos no botão. Precisamos inserir algum código JavaScript para atribuir funcionalidade a essa interface.

Então, podemos abrir o arquivo default.js e inserir o seguinte código em substituição às linhas 14 e 15 já existentes (linhas comentadas).

Listagem 3: Código JavaScript adicionado

document.getElementById("btnTestar").addEventListener("click", function () {
    var nome = document.getElementById("txtNome").value;
    Windows.UI.Popups.MessageDialog("Olá, " + nome).showAsync();
});

Essas quatro linhas de código são responsáveis por definir uma função para tratar o evento click do botão, na qual obtemos o valor digitado no input e exibimos uma mensagem para o usuário.

Se executarmos a aplicação agora, digitarmos um nome no input e pressionarmos o botão, teremos o seguinte resultado.

Figura 4: Mensagem exibida para o usuário

Conclusão

Neste exemplo rápido, utilizamos um pouco de cada linguagem para criar uma aplicação bastante simples, mas que juntamente com as informações previamente apresentadas, serve como base para que se possa iniciar o desenvolvimento de aplicações mais complexas.

Percebemos que a estrutura do projeto e o código utilizado em muito pouco diferem de uma página web comum, o que facilita o aprendizado por aqueles que já estavam acostumados com esse eixo do desenvolvimento de sistemas.

Sugestão de leitura

• Introdução ao desenvolvimento de Windows Store Apps;
• Conhecendo o emulador do Windows 8.