Este artículo proviene de un motor de traducción automática.

Diseño y UX

Creación de aplicaciones para la Tienda Windows

Christian Schormann

Mezcla para 2012 de Visual Studio es una potente herramienta de creación visual para crear aplicaciones Windows tienda construidas usando XAML o HTML. Mezcla se incluye con Visual Studio 2012, y está disponible directamente desde la pantalla de inicio.

Si está familiarizado con la creación de aplicaciones para Windows Presentation Foundation (WPF), Silverlight o Windows Phone XAML, rápidamente podrá sentirse como en casa. Esta versión de mezcla proporciona herramientas que son similares a las versiones anteriores, pero también incluye soporte para la plataforma Windows 8 XAML. Además, mezcla proporciona nuevas e innovadoras herramientas de autoría visuales para crear aplicaciones Windows tienda usando HTML, CSS y JavaScript.

Yo voy tomar primero un vistazo rápido de lo que es nuevo para la construcción de aplicaciones de la tienda de Windows con XAML y entonces hacer una exploración más profunda de las herramientas de mezcla para crear aplicaciones Windows tienda con HTML.

Licue a crear aplicaciones Windows tienda con XAML

Windows 8 proporciona una nueva plataforma XAML para apoyar el desarrollo de la aplicación. La plataforma soporta no sólo tradicionales lenguajes administrados (C# y Visual Basic), sino también desarrollo nativo en C++. El conjunto de características XAML es similar a la de WPF y Silverlight e incluye un conjunto de controles de Windows 8-específicos y propiedades de dispositivo de destino que admite la mezcla. Además, los diseñadores XAML en Visual Studio 2012 y mezcla ahora usan el mismo código base, resultando en mucho mejor compatibilidad que antes. (En general, Visual Studio 2012 y mezcla ofrecen un gran flujo de trabajo integrado. Puede abrir el mismo proyecto en ambas herramientas al mismo tiempo y cambiar suavemente. Me gusta escribir código en Visual Studio para tomar ventaja del gran código editor y depurador, diseño, autor y estilo UX en mezcla).

Aquí son algunos de los aspectos más destacados de la funcionalidad de Windows 8 para crear aplicaciones de Windows tienda con XAML en la mezcla.

Soporte para Windows 8 controles incorporados mezcla tiene compatibilidad integrada con creación de controles de Windows 8 como AppBar y ListView, haciéndola fácil de crear aplicaciones con estos controles icónicos. El AppBar es un control de mosca que normalmente está oculta, pero la superficie de diseño de mezcla le ayuda a llevar el control en la vista de edición interactiva. ListView, con todas la Asociación­ADO plantillas de elementos de datos, estilos de grupos y mucho más, es también completamente compatible con la mezcla.

Ver edición apps Store de Windows se esperan ejecutar en una variedad de factores de forma, en diferentes tamaños y densidades de pixel y adaptarse a diferentes puntos de vista (retrato, paisaje, ajustado y completo). El panel de dispositivos (figura 1) le ayuda a crear, editar y modificar la aplicación con diferentes vistas seleccionadas en la superficie de diseño. El panel de dispositivo también está integrado con el jefe de estado Visual.

Figura 1 Panel de dispositivo de mezcla para aplicaciones de Windows tienda construida con XAML

Licue a crear aplicaciones Windows tienda con HTML

Mezcla es un entorno único para crear, estilo y diseño de interfaz de usuario basada en HTML iterando y crear limpio, profesional, compatible con los estándares de marcado. A diferencia de los tradicionales herramientas de edición de HTML, mezcla puede manejar escenarios de diseño para aplicaciones que usan JavaScript para crear o modificar el contenido de la mosca. La superficie de diseño de mezcla utiliza el mismo motor de renderizado como el tiempo de ejecución de Windows, pero también se ejecuta JavaScript desde el momento de que cargar una página, lo que garantiza una visualización precisa de ambos elementos de página estática y dinámica. El panel de vivir DOM y las ricas y productivas herramientas CSS en mezcla ayudarán a trabajar con los elementos que se crea en el marcado, así como con todos los elementos que viene de la secuencia de comandos o se carga desde un fragmento.

En las siguientes secciones, hablaré de estos y otros aspectos destacados de la funcionalidad HTML en la mezcla.

Código sobre la superficie de diseño ejecuta código en la superficie de diseño para la representación exacta de páginas de código generado es la piedra angular de la construcción de aplicaciones Windows tienda con HTML en mezcla. Por ejemplo, el marcado en figura 2 incluye el estándar HTML y JavaScript. Cuando pegue este marcado en una página vacía en la mezcla, las carreras de JavaScript y se ejecuta directamente sobre la superficie de diseño en modo de edición.

Figura 2 mezcla funciona JavaScript en la superficie de diseño

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

Los elementos generados por el código JavaScript se procesan correctamente sobre la superficie de diseño. Porque la superficie de diseño ejecuta código en modo de edición, puede seleccionar elementos generados por JavaScript como lo haría cualquier otro elemento.

Los elementos se muestran en el panel de DOM Live (figura 3), que representa el estado dinámico del árbol del modelo de objetos de documento (DOM), no sólo el contenido del documento marcado. Elementos no presentes en el marcado, tales como los crearon por JavaScript o cargan dinámicamente de un fragmento, están marcados con rayo iconos para indicar que estos elementos fueron generados por la secuencia de comandos.

Figura 3 el Panel de DOM vivo

El panel de DOM viven también muestra que las clases se adjuntan a cada elemento. Por ejemplo, el código en figura 2 genera el elemento de "fruta" para cada uno generado de nombre de clase. Mientras que no se pueden modificar directamente elementos generados por JavaScript (no hay ningún marcado de mezcla modificar), todavía puede estilo contra las clases, siempre que el código generador utiliza nombres de clase CSS o de lo contrario se puede acceder a los elementos generados con un selector CSS.

Editores de propiedades de CSS de Rich mezcla proporciona muchos editores de propiedades ricos que hacen complejo propiedades CSS accesibles, así como gran cantidad de apoyo para la manipulación interactiva de elementos en la superficie de diseño. Por ejemplo, Windows 8 admite un nuevo modelo de diseño CSS estándar llamado la cuadrícula CSS. La cuadrícula CSS es un diseño increíblemente útil, especialmente para aplicaciones de tamaño variable que deba ejecutar en múltiples factores de forma. Cuadrícula de diseño trabaja con un conjunto de filas y columnas, similares a una tabla, donde cada fila y columna pueden asignarse un determinado tamaño de comportamiento. Filas o columnas se pueden definir a un tamaño fijo, para cambiar proporcionalmente el tamaño, o para ajustar automáticamente su contenido. Si está familiarizado con la cuadrícula XAML, estarás bien en casa con rejillas HTML.

Cuadrícula CSS edición en toma de mezcla el estrés fuera de muchos escenarios de diseño CSS (ver figura 4). Puede dibujar y modificar las rejillas en la superficie de diseño, véase mediciones in situ [1], modificar tamaños y unidades utilizando en el lugar en el objeto de interfaz de usuario [2], insertar y eliminación filas y columnas y mucho más.

Figura 4 mesa de trabajo de edición de CSS Grid

Mezcla también proporciona apoyo y editores de color para fondos de múltiples capas y degradados CSS (figura 5), todos con retroalimentación visual inmediata. Además, puede modificar fácilmente las transiciones de la CSS en la mezcla. Figura 6 muestra la transición de CSS editor con una transición escalonada definida por tres propiedades, incluyendo las funciones de aceleración.

Figura 5 Color edición incluye comentarios visuales

Figura 6 edición una transición de CSS

Edición de CSS estilo con CSS es el corazón de autoría visualmente interfaces de usuario basadas en HTML. Mezcla está construido alrededor de un sofisticado conjunto de herramientas para el estilo CSS. Por ejemplo, el grupo de reglas de estilo (figura 7) muestra todas las reglas de estilo que se aplican al documento HTML actualmente abierto.

Figura 7 Panel de reglas de estilo

En figura 7, puede ver cómo las reglas de estilo se clasifican por la hoja de estilos y en orden de declaración [1]. Búsqueda es compatible para las más grandes colecciones de reglas de estilo. El panel de las reglas de estilo también muestra consultas de medios de comunicación [2] y las reglas de estilo definidas dentro de cada consulta. También verá que consulta de medios de comunicación, si los hay, está actualmente activa. Porque Windows Store apps hacen uso de las consultas de los medios de comunicación para manejar diversos Estados de vista, esto es muy importante para el estilo de la app.

Las reglas de estilo pueden crear, editar o borrar en el panel reglas de estilo (aunque mezcla tiene muchos atajos de productividad para la creación de reglas de estilo). Durante la creación de selectores de CSS, mezcla ayuda con IntelliSense para selectores de CSS. Mientras escribes un selector, mezcla proporciona una lista de opciones de finalización en el contexto del documento actual, como se puede ver en figura 8.

Figura 8 IntelliSense para selectores de CSS

IntelliSense para selectores CSS también destaca los elementos dirigidos por el selector mientras está escribiendo. Esta característica se llama el adorno de ámbito de aplicación de la regla. El adorno de ámbito de aplicación de la regla no aparece sólo por IntelliSense; también aparece cualquier momento un estilo se selecciona directamente o indirectamente, que hace más fácil identificar los elementos que se ven afectados por la regla de estilo seleccionado. En figura 9, el adorno de ámbito de aplicación de la regla se muestra con líneas verdes. Selectores de CSS pueden llegar a ser bastante complejos, así que usted encontrará que es una utilidad muy útil.

Figura 9 ejemplo del adorno de ámbito de aplicación de la regla

Puede seleccionar siempre las reglas de estilo directamente en el panel reglas de estilo y, a continuación, editar las propiedades CSS de esa regla de estilo en el panel de propiedades de CSS. Sin embargo, en muchos casos, es más fácil seleccionar un elemento en la superficie de diseño o en el panel de DOM vivir y encontrar las reglas de estilo que afectan a ese elemento.

Cuando se selecciona un elemento en el diseño de la superficie, el panel de propiedades de CSS (figura 10) muestra una lista de reglas de estilo que se aplican al elemento en orden de prioridad. Esto hace mucho más fácil encontrar el estilo que usted necesita. De forma predeterminada, las propiedades se muestran en una vista clasificada, pero una vista alfabético también está disponible. La lista de propiedades CSS es bastante larga (actualmente más de 300 propiedades CSS se definen), por lo que para localizar una propiedad, puede buscar en la lista de propiedad o filtrar para ver sólo las propiedades que actualmente se están estableciendo en la regla.

Figura 10 Panel de propiedades CSS

En muchos casos, las propiedades que contribuyen al estilo de un elemento provienen de muchas reglas de estilo diferente. Esto puede hacer difícil de entender por qué la apariencia de un elemento la forma que lo hace. En estos casos, una vista de todas las propiedades de "ganar" ayuda a determinar qué estilos se aplican (figura 11).

Figura 11 vista ganar propiedades

La vista de ganar propiedades muestra sólo las propiedades que suben a la superficie de la cascada CSS, ordenada por la regla de origen de estilo. Este punto de vista es muy útil para el diagnóstico, sino también para la deformación rápida de un valor de propiedad existente.

La vista de los valores calculados muestra propiedades con los valores que el navegador se ve para el procesamiento después de procesar las declaraciones CSS. A veces esto puede ser de gran ayuda cuando usted está tratando de resolver problemas. Mezcla también proporciona acceso a la cascada CSS, otra herramienta para diagnosticar problemas en la pantalla.

Para cada propiedad, puede ver la cascada CSS para ver los valores de todas las reglas que afectan a una determinada propiedad. Por ejemplo, podría tener una propiedad de color de fondo definido por dos reglas diferentes, con uno en la parte superior siendo el que "gana" para esa propiedad. Pantalla de conexión en cascada de las CSS (figura 12) también permite que se desplaza rápidamente a las reglas de competencia.

Figura 12 vista de la cascada CSS

Mezcla ofrece muchos métodos abreviados para crear rápidamente las reglas de estilo para los elementos seleccionados. Puede crear una regla que se dirige el ID del elemento seleccionado (#foo, si el elemento tiene un ID de foo), o crear reglas que coincidan con alguno de las clases en el atributo className. También puede agregar y quitar las clases rápidamente, o agregar una nueva clase y crear una regla para él, en un solo paso (véase figura 13). Estos gestos de productividad en contexto hacen peinado con mezcla rápida, suave y eficiente.

Figura 13 agregar una clase y crear una regla de estilo en un solo paso

Por último pero no menos importante, porque todo el mundo comete errores y cambia su mente, mezcla proporciona algunas funciones de refactorización. Con estos, rápidamente puede cortar y copiar las reglas de estilo completo, todos los valores de propiedad de los valores de propiedad sólo seleccionada o una regla de estilo. Luego puede pegar las reglas copiadas o propiedades en una regla de estilo nuevo o existente.

Controles de WinJS en la biblioteca de Windows para JavaScript (WinJS), Windows proporciona un conjunto de controles basados en HTML para aplicaciones de almacenamiento de Windows. Esto incluye controles simples como un interruptor, así como sofisticados controles ListView como FlipView. Controles de WinJS son similares a los controles en otros toolkits de interfaz de usuario, tales como JQuery. Una diferencia es que WinJS controles pueden utilizarse desde el código (y también mediante declaración de marcado) mediante atributos de datos estándar para aplicar los metadatos de control. Este mecanismo permite la mezcla proporcionar una experiencia de creación de primera clase para los controles.

Controles de WinJS se crean en la mezcla mediante el panel activos. Figura 14 muestra el panel activos con la categoría de los controles más comunes que se muestran. Puede insertar controles o etiquetas HTML en la página arrastrando o haciendo doble clic en el activo. También puede buscar y filtro de resultados en el panel activos.

Figura 14 Panel de activos de mezcla

Después de agregar un control a la superficie de diseño, se puede configurar mediante el panel de atributos HTML. Se muestran las opciones de configuración del control seleccionado en la categoría de controles de aplicación de Windows en el panel. Para un interruptor de palanca, por ejemplo, puede establecer los atributos labelOff y labelOn o modificar el título.

Cuando la página se carga, el kit de herramientas de WinJS encuentra elementos con atributos de datos-win-control y luego crea el control de respaldo, con las opciones configuradas en Opciones de Victoria de datos. La aplicación de control, al igual que con los controles HTML en otros toolkits, crea los elementos que muestran el control dinámicamente. Porque la mezcla ejecuta código en la superficie de diseño, el control se mostrará con precisión en modo de edición. También verá los elementos dinámicos creados por el control. Los elementos generados por JavaScript se identifican con un icono de rayo.

Edición de la plantilla de datos y fragmentos a pesar de un control ListView es un control mucho más complejo que un interruptor de palanca, se configura mediante atributos de una manera similar. Más allá de esto, mezcla tiene soporte para la edición de la plantilla de datos con un control ListView. Una plantilla de datos es un fragmento de código HTML que se utiliza para representar cada elemento de datos único en una lista. Plantilla de datos edición en ayuda de mezcla que diseño en directo y plantillas de datos de estilo en su lugar, en el control ListView, con las actualizaciones reflejaban con precisión.

Puede crear una plantilla de datos predeterminado vacío derecho desde el editor de atributos y, a continuación, utilizar la mezcla de herramientas de autoría para editar la plantilla. Figura 15 muestra el marcado para ListView simple con una plantilla de datos que se muestra en la figura 16.

Figura 15 ListView con una plantilla de datos

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

Figura 16 ListView usando la plantilla de datos

Un div define el ListView y otro div, marcado como un control de plantilla, proporciona la raíz para la plantilla de datos. El contenido de este div (en este caso, el div con la clase cityItem) se crea una instancia para cada elemento de datos que hace que el control ListView. El control de la plantilla adjunto al div plantilla también asegura que la plantilla no está realmente visible en la página.

Esto supone un poco de un problema de edición visual porque para editar una plantilla de datos, usted necesita editar el contenido de la plantilla. Sin embargo, el control de la plantilla de datos oculta el contenido de la plantilla — para mantenerlo fuera del camino del contenido de la página «real» — así que usted no puede ver nada para editar. Pero incluso si el contenido de la plantilla eran visibles, lo que realmente quiere ver y editar la plantilla de datos en el contexto de ListView, no fuera de ella.

Figura 17 ilustra lo que usted necesita hacer para editar una plantilla de datos. Seleccione un elemento en el control ListView, directamente sobre la superficie de diseño [1]. Puedes ver en el panel de DOM en vivo que el elemento seleccionado (imagen) es un elemento generado dinámicamente dentro ListView [2]. El control ListView también se muestra en el panel de DOM Live [3].

Figura 17 edición un ListView y una plantilla de datos

En la vista de código, se resalta la etiqueta img dentro de la plantilla de datos [4]. En la parte superior de la superficie de diseño, información indica que el contenido seleccionado se origina a partir de una plantilla de datos [5].

Al seleccionar el elemento en el control ListView, restos de mezcla los orígenes del elemento aparece. Mezcla identifica este elemento como proveniente de una plantilla de datos y muestra esta información. Ahora, como editar el elemento, mezcla automáticamente hace las modificaciones pertinentes en el marcado y los estilos de la plantilla de datos, actualización de todos los elementos que se muestran en el ListView como vas. No hay actualizaciones manuales son necesarios.

La capacidad de ver a través de un control ListView en una plantilla de datos es una de mis características favoritas de mezcla. Esto también funciona con fragmentos. Un fragmento es una página HTML que se carga dinámicamente en otra página usando una función de utilidad de WinJS o un HTMLControl (un control especial de WinJS). Al igual que con plantillas, mezcla detecta fragmentos de una página y proporciona el mismo nivel de edición en el lugar. Puedes ver los fragmentos en su lugar y contexto (figura 18) la forma en que se supone para ser utilizado y editarlos completamente, sin restricción alguna y sin tener que abrir otro documento.

Figura 18 edición un fragmento HTML

Modo interactivo

Modo interactivo es una de las características más útiles y mejores en la mezcla. Como dije antes, mezcla siempre ejecuta su código en la superficie de diseño. En modo de edición normal, le impide interactuar con la aplicación, por lo que sólo puede seleccionar, manipular y editar elementos que son visibles en la mesa de trabajo. Modo interactivo le quita esta capa protectora, por lo que se puede interactuar con la aplicación que se está ejecutando.

Así que ¿por qué no simplemente ejecute la aplicación? La razón más importante es la capacidad para acumular el estado. Al ejecutar la aplicación en Windows o en el simulador, la instancia en ejecución esté completamente separada de lo que tienes en la superficie de diseño. Cualquier interacción que tiene con la aplicación de corriente cambia sólo el estado de la aplicación en ejecución. El momento que dejas de esta instancia, el estado acumulado se ha ido.

Al cambiar de modo interactivo y el modo de edición, se conserva el estado de aplicación. Si haces algo tan simple como cambiar el estado de un botón de alternar, poner en marcha, cambiar las opciones o incluso crear un dibujo sobre un lienzo, cuando regrese al modo de edición, se conserva su estado. Esto le permite editar y modificar su aplicación en los Estados que normalmente nunca volvería a ver en la superficie de diseño. Esto es increíblemente cómodo, rápido y liberador porque puede ahora editar visualmente en Estados no se puede alcanzar estáticamente en absoluto. En muchos sentidos, modo interactivo es como las herramientas para desarrolladores en un navegador, pero íntimamente ligada al proyecto de origen real y la superficie de diseño.

Figura 19 muestra dos vistas de una aplicación de reloj mundial simple. Para ver la segunda vista, algún código necesita para ejecutarse, que es accionado por la palanca del interruptor de modo. En modo de edición, no hay forma que este código ejecutar, pero tan pronto como cambio a modo interactivo simplemente puedo Deslice la palanca analógica o Digital y los cambios de la vista, listos para editar. Ya no me puedo imaginar trabajar sin modo interactivo.

Figura 19 cambiar el estado de aplicación de dinámica a través de modo interactivo

Diseñar para dispositivos

Apps Store de Windows se ejecutan en una amplia variedad de dispositivos, desde pequeñas tabletas para grandes monitores de escritorio. Estos dispositivos vienen en una amplia variedad de resoluciones y mostrar densidades de pixel. Además, pueden ser Windows Store apps en modos de visualización diferentes (paisaje, retrato, modo ajustado y lleno).

Al crear aplicaciones adaptables, es importante poder ver y editar la aplicación en una variedad de Estados de vista diferentes. Mezcla le permite hacer esto, mostrar con precisión los diferentes modos de escala en la superficie de diseño, controlada por el panel de dispositivos.

En resumen

Mezcla para 2012 de Visual Studio proporciona creación visual para las aplicaciones de la tienda de Windows, con soporte para XAML y HTML. La funcionalidad XAML es similar a las versiones anteriores de mezcla, por lo que si ha utilizado versiones anteriores te sentirás en casa. Además del Rico soporte para desarrollo de app Store de Windows, mezcla para Visual Studio 2012 también admite compatibilidad mejorada con el diseñador XAML en mezcla.

Soporte de mezcla para HTML representa un nuevo e innovador tipo de entorno de edición de HTML. Mezcla puede manejar no sólo marcado HTML y CSS, pero también el patrón más frecuente del contenido generado por el JavaScript. Lo más importante, mezcla para HTML hace visual de edición de HTML, CSS y WinJS productivo, rápido y divertido.

Christian Schormann es un partner program manager en el equipo de mezcla. Su pasión es crear herramientas de autoría visuales para diseñadores, artistas y desarrolladores.

Gracias a los siguientes expertos técnicos por su ayuda en la revisión de este artículo: Joanna Mason, Unni Ravindranathan, Josh pimienta y Erik Saltwell