Este artigo foi traduzido por máquina.
Design e UX
Criação de Aplicativos da Windows Store no Blend
Mistura para Visual Studio 2012 é uma poderosa ferramenta de autoria visual para a criação de aplicativos Windows Store construídos usando XAML ou HTML. Mistura está incluída no Visual Studio de 2012, e está disponível diretamente da tela inicial.
Se você estiver familiarizado com a criação de aplicativos XAML para Windows Presentation Foundation (WPF), Silverlight ou Windows Phone, você vai rapidamente se sentir em casa. Esta versão de mistura fornece ferramentas que são semelhantes às versões anteriores, mas também inclui suporte para a plataforma Windows 8 XAML. Além disso, a mistura fornece novas e inovadoras ferramentas de criação visuais para criar apps da loja do Windows usando HTML, CSS e JavaScript.
Vamos primeiro dar uma olhada rápida no que há de novo para a construção de aplicativos de armazenamento do Windows com XAML e então fazer uma exploração mais aprofundada das ferramentas de mistura para a criação de aplicativos Windows Store com HTML.
Utilizando mistura para criar Apps da loja do Windows com XAML
Windows 8 fornece uma nova plataforma XAML para apoiar o desenvolvimento de aplicações. A plataforma suporta não só tradicionais linguagens gerenciadas (c# e Visual Basic), mas também desenvolvimento nativo c++. O conjunto de recursos XAML é semelhante ao WPF e Silverlight e inclui um conjunto de controles do Windows 8 específico e propriedades de dispositivo de destino oferece suporte a mistura. Além disso, os designers XAML no Visual Studio 2012 e mistura agora usam a mesma base de código, resultando em muito melhor compatibilidade do que antes. (Em geral, Visual Studio 2012 e mistura oferecem um grande fluxo de trabalho integrado. Você pode abrir o mesmo projeto em ambas as ferramentas ao mesmo tempo e alternar sem problemas. Eu gosto de escrever o código no Visual Studio para tirar proveito do grande código editor e depurador e para projetar, autor e estilo UX na mistura).
Aqui estão alguns dos destaques da funcionalidade do Windows 8 para criação de aplicativos Windows Store com XAML na mistura.
Built-in suporte para 8 controles Windows mistura possui suporte interno de criação de controles do Windows 8 como AppBar e ListView, tornando mais fácil para construir aplicações com estes controles icônicos. O AppBar é um fly-in controle que normalmente é escondido, mas a superfície de design da mistura ajuda você a trazer o controle no modo de exibição para edição interativa. ListView, com todas a associated modelos para itens de dados, estilos de grupo e muito mais, é também totalmente suportado na mistura.
Criação de ver apps da loja do Windows são esperados para ser executado em uma variedade de fatores de forma, a exposição de diferentes tamanhos e densidades de pixel e se adaptar a diferentes pontos de vista (retrato, paisagem, bati e completa). O painel do dispositivo (Figura 1) ajuda você a criar, editar e modificar o aplicativo com diferentes pontos de vista selecionados na superfície de design. O painel do dispositivo também está integrado com o Gerenciador de estado Visual.
.png)
Figura 1 painel de dispositivo de mistura para aplicativos de armazenamento Windows construído com XAML
Utilizando mistura para criar Apps da loja do Windows com HTML
Mistura é um ambiente único para criar, modelar e iterating design de interface de usuário baseada em HTML e para a criação de limpo e profissional, compatível com os padrões de marcação. Ao contrário de ferramentas de criação de páginas HTML tradicionais, mistura pode lidar com cenários de design para aplicativos que usam JavaScript para criar ou modificar o conteúdo em tempo real. A superfície de design de mistura usa o mesmo motor de renderização como o tempo de execução do Windows, mas ele também executa JavaScript a partir do momento que você carregar uma página, o que garante uma visualização precisa de dois elementos de uma página estática e dinâmica. O painel DOM ao vivo e as ferramentas CSS ricas e produtivas no Blend ajudá-lo a trabalhar com os elementos que você criar na marcação, bem como com todos os elementos que vem do script ou é carregado a partir de um fragmento.
As próximas seções, abordarei estes e outros destaques da funcionalidade HTML na mistura.
Código na superfície de Design executando código na superfície de design para precisa renderização de páginas de código gerado é o alicerce da criação de aplicativos Windows Store com HTML na mistura. Por exemplo, a marcação no Figura 2 inclui padrão HTML e JavaScript. Quando você cola essa marcação em uma página vazia na mistura, a execução de JavaScript e é executado diretamente na superfície de design no modo de edição.
Figura 2 mistura executa JavaScript na superfície de Design
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function init() {
var p = document.querySelector('#placeholder');
if (p) {
var fruit = ['apples', 'oranges',
'lemons', 'pears', 'strawberries'];
for (var i=0; i<fruit.length; i++) {
var e = document.createElement("div");
e.textContent = fruit[i];
e.className = 'fruit';
p.appendChild(e);
}
}
}
</script>
</head>
<body onload="init()">
<div id="placeholder"></div>
</body>
</html>
Os elementos gerados por JavaScript são processados corretamente na superfície de design. Porque a superfície de design executa o código no modo de edição, você pode selecionar elementos JavaScript gerado como se fosse qualquer outro elemento.
Os elementos também aparecem no painel do DOM de viver (Figura 3), que representa o estado dinâmico da árvore Document Object Model (DOM), não apenas o conteúdo do documento de marcação. Elementos não presentes na marcação, tais como aqueles criados por JavaScript ou carregada dinamicamente de um fragmento, são marcados com ícones de raio para indicar que estes elementos foram gerados pelo script.
.png)
Figura 3 o painel DOM ao vivo
O painel DOM ao vivo também mostra quais classes são anexados a cada elemento. Por exemplo, o código em Figura 2 gera o elemento de "fruta" para cada gerado de nome da classe. Enquanto você não pode modificar diretamente elementos JavaScript gerado (não há nenhuma marcação para mistura modificar), você pode ainda estilo contra as classes, desde que o gerar código usa nomes de classe CSS ou os elementos gerados caso contrário podem ser acessados com um seletor CSS.
Editores de propriedade CSS Rich mistura fornece muitos editores de propriedade rica que tornam complexo propriedades CSS acessíveis, bem como lotes de apoio para manipulação interativa dos elementos na superfície de design. Por exemplo, Windows 8 oferece suporte a um modelo de layout padrão novo em CSS chamado grade CSS. A grade CSS é um layout incrivelmente útil, especialmente para aplicativos redimensionáveis que precisam ser executados em vários fatores de forma. Layout de grade funciona com um conjunto de linhas e colunas, semelhantes a uma tabela, onde cada linha e coluna podem ser atribuído um determinado comportamento de redimensionar. Linhas ou colunas podem ser definidas para um tamanho fixo, para redimensionar proporcionalmente, ou para ajustar automaticamente o seu conteúdo. Se você estiver familiarizado com a grade XAML, você será certo em casa com grades HTML.
Grade CSS, edição no leva mistura o esforço fora muitos cenários de layout CSS (ver Figura 4). Você pode desenhar e modificar grades na superfície de design, consulte medições no local [1], modificar tamanhos e unidades usando no lugar da interface do usuário [2] no objeto, inserir e excluir linhas e colunas e muito mais.
.png)
Figura 4 prancheta edição de CSS Grid
Mistura também fornece editores de cor e suporte para CSS gradientes e fundos multicamados (Figura 5), todos com feedback visual imediato. Além disso, você pode facilmente editar CSS transições na mistura. Figura 6 mostra a transição de CSS editor com uma transição escalonada definida para três propriedades, incluindo funções de atenuação.
.png)
Figura 5 cor edição inclui Feedback Visual
.png)
Figura 6 edição uma transição de CSS
Edição de CSS Styling com CSS é o coração de visualmente criação de interfaces de usuário baseadas em HTML. Mistura é construída em torno de um sofisticado conjunto de ferramentas de estilo CSS. Por exemplo, o painel de regras de estilo (Figura 7) mostra todas as regras de estilo que são aplicadas ao documento HTML atualmente aberto.
.png)
Figura 7 painel de regras de estilo
Em Figura 7, você pode ver como as regras de estilo são classificadas por estilo e na declaração de ordem [1]. Busca é com suporte para grandes conjuntos de regras de estilo. O painel de regras de estilo também mostra consultas da mídia [2] e as regras de estilo definidas dentro de cada consulta. Você também vê qual consulta de mídia, se for o caso, está ativa no momento. Porque Windows Store apps fazem uso de consultas da mídia para manipular vários Estados de exibição, isso é muito importante para o estilo de app.
Regras de estilo podem ser criadas, editadas ou excluídas no painel de regras de estilo (embora mistura tem muitos atalhos de produtividade para criação de regra de estilo). Durante a criação de seletores CSS, mistura ajuda com IntelliSense para seletores CSS. Ao digitar um seletor, mistura fornece uma lista de opções de conclusão no contexto do documento atual, como você pode ver em Figura 8.
.png)
Figura 8 IntelliSense para seletores CSS
IntelliSense para seletores CSS também destaca os elementos visados pelo seletor enquanto você está digitando. Esse recurso é chamado o adorno de escopo da regra. O adorno de escopo da regra não só é exibido pelo IntelliSense; parece também a qualquer momento um estilo é selecionado diretamente ou indiretamente, que torna mais fácil identificar quais elementos são afetados pela regra de estilo selecionado. Em Figura 9, o adorno de escopo da regra é mostrado com linhas verdes. Seletores CSS podem se tornar bastante complexos, então você vai encontrar este é um utilitário muito útil.
.png)
Figura 9 um exemplo de regra escopo adorno
Você pode selecionar sempre as regras de estilo diretamente no painel de regras de estilo e, em seguida, editar as propriedades CSS para a regra de estilo no painel de propriedades CSS. Em muitos casos, no entanto, é mais fácil selecionar um elemento na superfície de design ou no painel do DOM de viver e encontrar as regras de estilo que afetam esse elemento.
Sempre que você seleciona um elemento sobre o design de superfície, o painel de propriedades CSS (Figura 10) exibe uma lista de regras de estilo que são aplicadas ao elemento na ordem de precedência. Isso torna muito mais fácil encontrar o estilo que você precisa. Por padrão, propriedades são mostradas em uma exibição Categorizado, mas uma visão alfabética também está disponível. A lista de propriedades da CSS é bastante longa (atualmente mais de 300 propriedades CSS são definidas), portanto para localizar uma propriedade, você pode pesquisar a lista de propriedade ou de filtro para ver somente as propriedades que estão sendo atualmente definidas na regra.
.png)
Figura 10 painel de propriedades CSS
Em muitos casos, as propriedades que contribuem para o estilo de um elemento vêm de muitas regras de estilo diferente. Isso pode tornar difícil de entender por que parece um elemento da maneira que faz. Nesses casos, uma visão de roll-up de todas as propriedades de "ganhar" ajuda a determinar quais estilos são aplicados (Figura 11).
.png)
Figura 11 Ver ganhar Propriedades
A vista de ganhar Propriedades mostra somente as propriedades que subir para a superfície da cascata CSS, classificada pela regra de estilo de origem. Essa visão é extremamente útil para o diagnóstico, mas também para os ajustes rápidos de um valor de propriedade existente.
A exibição de valores computados mostra Propriedades com os valores que o navegador vê para processamento após o processamento das declarações de CSS. Isso às vezes pode ser uma grande ajuda quando você está tentando resolver problemas. Mistura também fornece acesso para a cascata CSS, outra ferramenta para diagnosticar problemas em seu monitor.
Para cada propriedade, você pode ver a cascata CSS para Ver os valores de todas as regras que afetam uma determinada propriedade. Por exemplo, você pode ter uma propriedade de cor de fundo que é definida por duas regras diferentes, com o um na parte superior sendo aquele que "ganha" para essa propriedade. Exibição em cascata CSS (Figura 12) também permite que você navegue rapidamente às regras de concorrência.
.png)
Figura 12 vista da cascata CSS
Mistura oferece muitos atalhos para rapidamente criar regras de estilo para elementos selecionados. Você pode criar uma regra que tem como alvo o ID do elemento selecionado (#foo, se o elemento tem um ID de foo), ou criar regras de correspondência de qualquer uma das classes no atributo className. Você também pode adicionar e remover classes rapidamente, ou adicione uma nova classe e criar uma regra para isso, em uma única etapa (ver Figura 13). Estes gestos de produtividade no contexto de fazem estilo com a mistura rápida, suave e eficiente.
.png)
Figura 13 adicionar uma classe e criar uma regra de estilo em uma única etapa
Por último mas não menos importante, porque todo mundo comete erros e muda de idéia, mistura fornece algumas funções de refatoração. Com estes, você pode cortar e copiar as regras de estilo inteira, todos os valores de propriedade de uma regra de estilo ou valores de propriedade apenas selecionado. Você pode então colar as regras copiadas ou propriedades em uma regra de estilo novo ou existente.
Controles de WinJS na biblioteca do Windows para JavaScript (WinJS), o Windows fornece um conjunto de controles baseados em HTML para aplicativos de armazenamento do Windows. Isso inclui controles simples, como um interruptor, bem como controles sofisticados como ListView ou FlipView. WinJS controles são semelhantes aos controles de outros kits de ferramentas de interface do usuário, como o JQuery. Uma diferença é que WinJS controles podem ser usados no código (e também declarativamente da marcação) usando atributos de dados padrão para aplicar os metadados de controle. Esse mecanismo permite que a mistura fornecer uma experiência de autoria de primeira classe para os controles.
WinJS controles são criados em mistura usando o painel ativos. Figura 14 mostra o painel de ativos com a categoria dos controles mais comuns exibido. Você pode inserir controles ou tags HTML na página arrastando ou clicando duas vezes o ativo. Você também pode procurar e filtro resulta em painel ativos.
.png)
Figura 14 mistura painel de ativos
Depois de adicionar um controle para a superfície de design, você pode configurá-lo usando o painel de atributos HTML. As opções de configuração para o controle selecionado são mostradas na categoria Windows App controles no painel. Para um interruptor de alavanca, por exemplo, você pode definir os atributos labelOff e labelOn ou modificar o título.
Quando a página for carregada, o toolkit de WinJS localiza elementos com atributos de controle de dados-vitória e ele então cria o controle de backup, com as opções definidas em dados-opções de vitória. A implementação do controle, como com controles HTML em outros conjuntos de ferramentas, cria os elementos que exibir o controle dinamicamente. Porque mistura executa código na superfície de design, o controle será exibido com precisão no modo de edição. Você também verá os elementos dinâmicos criados pelo controle. Os elementos gerados pelo JavaScript são identificados por um ícone de raio.
A edição do modelo de dados e fragmentos mesmo um ListView é um controle muito mais complexo do que um interruptor, ele é configurado usando atributos em uma maneira similar. Além disso, Blend tem profunda suporte para edição do modelo de dados com um ListView. Um modelo de dados é um trecho de HTML que é usada para processar cada item de dados único em uma lista. Ao vivo a edição do modelo de dados em ajuda de mistura que você design e modelos de dados estilo no lugar, dentro da ListView, com as atualizações reflete com precisão.
Você pode criar um modelo de dados padrão vazio direita do editor de atributos e, em seguida, use a mistura de ferramentas de autoria para editar o modelo. Figura 15 mostra a marcação para o ListView simples com um modelo de dados que é mostrado no Figura 16.
Figura 15 ListView com um modelo de dados
<div id="cityTemplate"
data-win-control="WinJS.Binding.Template">
<div class="cityItem">
<img class="cityImage"
data-win-bind="src:image">
<div class="cityLabel"
data-win-bind="textContent:name"></div>
</div>
</div>
<div id="cityList"
data-win-control="WinJS.UI.ListView"
data-win-options="{
itemDataSource:AppData.cities.dataSource,
itemTemplate:select('#cityTemplate'),
layout:{type:WinJS.UI.ListLayout}">
</div>
.png)
Figura 16 ListView usando o modelo de dados
Uma div define o ListView e outra div, marcado como um controle de modelo, fornece a raiz do modelo de dados. O conteúdo deste div (no caso, a div com a classe cityItem) é instanciado para cada item de dados que ListView processa. O controle do modelo anexado para o div modelo também garante que o modelo não é realmente visível na página.
Isto coloca um pouco de um problema de edição visual, pois para editar um modelo de dados, você precisará editar o conteúdo do modelo. No entanto, o controle de dados-modelo esconde o modelo de conteúdo — para mantê-lo fora do caminho do conteúdo da página "real" — então você não pode ver nada para editar. Mas mesmo que o modelo de conteúdo visível, o que você realmente quer ver e editar o modelo de dados no contexto do ListView, não fora dela.
Figura 17 ilustra o que você precisa fazer para editar um modelo de dados. Selecione um elemento na ListView, diretamente na superfície de design [1]. Você pode ver no painel do DOM de viver que o elemento selecionado (imagem) é um elemento gerado dinamicamente dentro de ListView [2]. O ListView também é exibido no painel DOM ao vivo [3].
.png)
Figura 17 edição um ListView e um modelo de dados
Na visualização de código, é destacada a tag img dentro do modelo de dados [4]. Na parte superior da superfície de design, informação diz-lhe que o conteúdo selecionado originou-se de um modelo de dados [5].
Quando você selecionar o elemento no ListView, vestígios de mistura as origens do elemento exibido. Mistura identifica esse elemento como provenientes de um modelo de dados e exibe essas informações. Agora, como você editar o elemento, mistura automaticamente faz as edições relevantes na marcação e estilos do modelo de dados, atualizando todos os itens exibidos no ListView que você vá. Não há atualizações manuais são necessárias.
A capacidade de ver através de um ListView em um modelo de dados é um dos meus recursos favoritos da mistura. Isso também funciona com fragmentos. Um fragmento é uma página HTML que é carregada dinamicamente para outra página usando uma função de utilitário de WinJS ou um HTMLControl (um controle especial de WinJS). Assim como com modelos, mistura detecta fragmentos em uma página e fornece o mesmo nível de edição no local. Você pode ver os fragmentos no lugar e contexto (Figura 18) a maneira que eles foram feitos para ser usado e totalmente editá-los, sem restrição e sem ter que abrir outro documento.
.png)
Figura 18 edição um fragmento HTML
Modo interativo
O modo interativo é uma das melhores e mais úteis características de mistura. Como eu disse antes, mistura sempre executa seu código na superfície de design. No modo de edição normal, que o impede de interagir com o aplicativo, assim você só pode selecionar, manipular e editar elementos que são visíveis na prancheta. Modo interativo tira essa camada protetora, para que você pode interagir com o aplicativo que está sendo executado.
Então por que não basta executar o aplicativo? A razão mais importante é a capacidade de acumular o estado. Quando você executa o aplicativo no Windows ou no simulador, a instância em execução é completamente separada do que você tem na superfície de design. Qualquer interação que você tem com o aplicativo execução altera apenas o estado do aplicativo executando. O momento que você parar nesta instância, o estado acumulado é ido.
Como você alterna entre o modo interativo e modo de edição, o estado do aplicativo é preservado. Se você fizer algo tão simples como mudar o estado de um botão de alternância, trazer em uma mosca, alterar opções ou até mesmo criar um desenho em uma tela, quando você retornar ao modo de edição, seu estado é preservado. Isso permite que você editar e ajustar a sua aplicação nos Estados que normalmente nunca verá na superfície de design. Isso é extremamente conveniente, rápido e libertadora porque você pode agora editar visualmente em afirma que não pode ser alcançado estaticamente em tudo. De muitas maneiras, o modo interativo é como as ferramentas de desenvolvedor em um navegador, mas intimamente ligado ao projeto fonte real e a superfície de design.
Figura 19 mostra duas visões de um aplicativo de relógio mundial simples. Para ver o segundo, algum código precisa ser executado, que é acionado por alavanca de interruptor de modo. No modo de edição, não há nenhuma maneira de fazer esse código a executar, mas assim que eu mudar para o modo interativo simplesmente pode deslizar o comutador analógico e Digital e as mudanças do vista, prontas para editar. Não consigo imaginar trabalhar sem modo interativo anymore.
.jpg)
Figura 19 alternar o estado de aplicativo dinâmico via modo interativo
Projetar para dispositivos
Apps da loja do Windows executado em uma grande variedade de dispositivos, de tabuletas pequenas grandes monitores de desktop. Esses dispositivos vêm em uma variedade de resoluções e exibir densidades de pixel. Além disso, Windows Store apps podem ser em modos de exibição diferentes (paisagem, retrato, modo instantâneo e preenchido).
Ao criar aplicativos adaptáveis, é importante ser capaz de ver e editar o aplicativo em uma variedade de Estados de exibição diferentes. Mistura permite que você faça isso, indicando com precisão as diferentes escala modos na superfície de design, controlado pelo painel do dispositivo.
Conclusão
Mistura para Visual Studio 2012 fornece criação visual para aplicativos de armazenamento do Windows, com suporte para HTML e XAML. A funcionalidade XAML é semelhante a versões anteriores de mistura, então se você tiver usado versões anteriores você vai se sentir em casa. Além de suporte avançado para desenvolvimento de aplicações Windows Store, mistura para Visual Studio 2012 também suporta compatibilidade melhorada com o Designer XAML na mistura.
Mistura suporte para HTML representa um tipo novo e inovador de ambiente de criação para HTML. Mistura pode tratar não só a marcação HTML e CSS, mas também o padrão bastante frequente de conteúdo gerado pelo JavaScript. Mais importante, a mistura de HTML faz criação visual de HTML, CSS e WinJS produtivas, rápido e divertido.
Christian Schormann é gerente de programa de parceiros da equipe mistura. Sua paixão é construir ferramentas de criação visuais para designers, artistas e desenvolvedores.
Agradecemos aos seguintes especialistas técnicos pela revisão deste artigo: Joanna Mason, Rosenil Adria, Josh pimenta e Erik Saltwell