Artigos JavaScript Introdução ao WinJS
Por que eu devo ler este artigo:O desenvolvimento de aplicações front-end e aplicações web está cada vez mais em evidência. Muitas são as tecnologias que permitem o desenvolvimento desse tipo de aplicação, e desenvolver aplicando todas essas tecnologias torna-se cada vez mais difícil sem a utilização de bibliotecas ou frameworks específicos para esse fim. Neste contexto, o WinJS, biblioteca JavaScript de código-fonte aberto distribuída pela Microsoft, apresenta-se como uma ótima solução, uma vez que essa facilita o desenvolvimento de aplicações baseadas no modelo web, sendo frequentemente utilizado para o desenvolvimento de aplicativos para a Windows Store.

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 ...

    Fim do trecho gratuito • continue abaixo
    CONTEÚDO EXCLUSIVO

    Desbloqueie toda a DevMedia

    • +2000 artigos e vídeos
    • +40 trilhas sobre Front-end, Back-end, IA e muito mais
    • +5000 exercícios práticos
    • Mentorias ao vivo individuais
    até 50% OFF
    A partir de
    R$ 69 /mês
    Assinar agora