Introdução ao WinJS

Desenvolver aplicações front-end ou qualquer outro tipo de aplicação web requer certo grau de conhecimento em diversas tecnologias, tais como: CSS, JavaScript e HTML. Procurando reduzir a complexidade do processo desse tipo de desenvolvimento, muitos frameworks e bibliotecas foram desenvolvidos. A iniciativa da Microsoft nesse sentido é a biblioteca JavaScript WinJS, que provê vários recursos para facilitar a criação de aplicações que façam uso das tecnologias CSS, HTML e JavaScript, sendo compatível com, senão todos, a maioria dos navegadores e principalmente com aplicações da Windows Store.

Essa biblioteca, assim como outras já conhecidas por muitos desenvolvedores, torna esse trabalho menos penoso, além de garantir maior produtividade. O que destaca o WinJS de muitas outras opções conhecidas é a sua capacidade de adaptação, ou seja, permitir a integração com Angular, Knockout e React sem que o desenvolvedor tenha que reaprender tudo o que já sabe sobre as mesmas, sendo necessário somente a criação de controles de adaptação para a integração.

Neste artigo será feita uma breve apresentação do WinJS, com uma rápida explicação sobre sua estrutura, amostras de sua implementação, recursos, formas de adaptação com demais tecnologias, além da aquisição e desenvolvimento de uma aplicação exemplo básica utilizando o Visual Studio 2013.

O WinJS

Trata-se basicamente de uma biblioteca JavaScript Open-Source que serve para auxiliar os desenvolvedores na criação de aplicações que façam uso das tecnologias HTML, CSS e JavaScript, não impedindo, é claro, que outras tecnologias sejam acrescentadas. Essa biblioteca permite também a criação profissional de todo tipo de aplicação para a Windows Store.

Essa biblioteca conta também, assim como outras, com diversos recursos HTML de interfaces gráficas do usuário, tais como: SplitView, ListView, FlipView, Barras de Ferramentas, Flyouts e Caixas de Diálogo. Possui também uma robusta arquitetura capaz de permitir a virtualização de coleções (listas), permitindo o controle de páginas, promisses, data-binding, além de um engine para templates.

O WinJS pode ser utilizado não somente para qualquer uma de suas aplicações baseadas no modelo HTML/JavaScript para Windows, mas também em web sites e qualquer outra plataforma que execute aplicativos baseados em HTML, como é o caso do Apache Cordova. Ela também habilitará sua execução em qualquer navegador, podendo ser aplicada de forma independente ou até mesmo em conjunto com outros frameworks ou bibliotecas.

Conhecendo seus principais recursos

Características e implementação básica

O WinJS apresenta a mesma estrutura para todos os seus controles, assim sendo, ao se criar um controle WinJS, deve-se declarar o mesmo diretamente no HTML. Por exemplo, pode-se declarar um controle dentro de um elemento qualquer, como uma <div>, no qual seriam inseridos, por exemplo, dois atributos personalizados: data-win-control e data-win-options. Explorando esses atributos temos:

• data-win-control: atributo que especifica o construtor do controle. Essa tag precede os controles WinJS que serão utilizados, e sua sintaxe é semelhante a esta: data-win-control="WinJS.UI.Rating";
• data-win-options: esse atributo deve ser preenchido com uma lista de objetos, contendo em sua estrutura pares de chave e valor, sempre separados por vírgulas, sendo sua estrutura semelhante a seguinte: { <chave1>:<valor1>, <chave2>:<valor2>, <chave3>:<valor3>,...,<chaveN>:<valorN> }, onde cada uma das chaves representa uma propriedade do controle. Pode-se, inclusive, especificar manipuladores de eventos no referido controle, basta para isso utilizar o prefixo “on” no nome do evento, como neste exemplo: data-win-options="{ label: 'home', icon: 'home', onclick: /*faça algo*/}".

Na Listagem 1 é apresentado um trecho de código no qual se pode observar a aplicação de um desses controles. O referido código permite a criação de um método de avaliação, semelhante ao apresentado na Figura 1. Lembramos que este exemplo apresenta somente parte do código, sendo esse controle totalmente aplicado nas demais seções deste artigo.

Listagem 1. Exemplo do controle Rating.

 1.<div id="meuControle" data-win-control="WinJS.UI.Rating" data-win-options="{
 2.    averageRating: 3.4, maxRating: 5}">
 3.</div>

Figura 1. Controle Rating

Buscando trabalhar o código de forma a criar uma interface limpa e organizada, cria-se na linha 1 uma div, a qual faz referência a um controle WinJS.UI.Rating, que recebe como dados adicionais o valor médio de 3.4 (averageRating: 3.4) e o valor máximo aceitável de 5 (maxRating: 5), através do comando data-win-options, cuja sintaxe foi previamente explicada.

Segurança (Suporte a Marks)

Demonstrando preocupação em ser adaptativo a diversos navegadores, além de manter os padrões sugeridos pela W3C, essa biblioteca possui rigoroso esquema de segurança para impedir a execução de scripts maliciosos, logo todo evento “invocado” diretamente no HTML será analisado pelo método WinJS.UI.processAll(), que possivelmente analisará e bloqueará o manipulador de eventos. Isso, em alguns casos, pode gerar um erro de segurança que pode ser evitado quebrando a definição do manipulador de eventos em uma função chamada WinJS.Utilities.markSupportedForProcessing ou WinJS.UI.eventHandler. Para entender melhor o que foi explicado, analise o código apresentado na Listagem 2.

Listagem 2. Implementação básica da chamada de um evento no HTML

 1.<div data-win-control="WinJS.UI.SplitViewCommand" data-win-options= "{ 
 2.    label:'Home', icon:'home', onclick: mySplitView.homeClicked}"></div>

Nesse código o evento é “invocado” diretamente no HTML, o que pode gerar uma falha de segurança (devido a execução direta do comando onclick:mySplitView.homeCli ...