Knowledge base

Volver a la descripción general del soporte

Hasta ahora solo hemos discutido cómo implementar el comportamiento de la aplicación, pero no cómo se ve. En este capítulo, nos centraremos en este tema.

Estructura y conceptos básicos del diseño

Al igual que el flujo de trabajo, el diseño de la aplicación también se define en XML. Los diseños consisten en un LayoutPage que define un marco reutilizable para varias pantallas y un LayoutModel que se utiliza para diseñar los detalles de una pantalla en particular. Además, podemos definir Style para aplicar a múltiples elementos de diseño y PartTemplate que hacen que partes específicas del diseño sean reutilizables.

Todos estos elementos estructurales se definen en sus archivos separados. Por supuesto, todavía tienen que llenarse con contenido como texto, botones o imágenes. Puede echar un vistazo a la lista de elementos de la interfaz de usuario para obtener una descripción general.

La página de diseño de nuestro componente "Elección" solo incluye la barra de estado, un título y una sección de contenido usando la <ContentPlaceHolder> etiqueta, que será rellenada por el "LayoutModel".

<LayoutPage Name="DefaultMaster">
  <Part Template="STATUS_BAR" Weight="0.1"/>
  <Text Name="Topic" Weight=".15" Style="TitleStyle" content="Pick a fruit"/>
  <Panel Weight="0.75">
    <ContentPlaceHolder Name="Content"/>
  </Panel>
</LayoutPage>

El "LayoutModel" tiene el siguiente aspecto:

<LayoutModel Name="ChoiceScreen" page="DefaultMaster" orientation="Vertical">
  <Content placeHolder="Content" weight="1" orientation="horizontal">
    <Button name="Apple" focusOrder="0" weight="0.5" style="ImageButtonStyle">
      <Nombre del texto="LEFT_TEXT" Style="FooterButtonTextStyle" weight="1" MaxSize="30" content="Apple"/>
      <Events/>
    </button>
    <Button name="Pera" focusOrder="1" Weight="0.5" style="ImageButtonStyle">
      <Text name="RIGHT_TEXT" style="FooterButtonTextStyle" weight="1" MaxSize="30" content="Pera"/>
      <Eventos/>
    </Botón>
  </Contenido>
</ModeloDeDiseño>

"LayoutModel" es el elemento que conectamos con el flujo de trabajo. Esto se hace al definir un paso del flujo de trabajo: <step id="choose" descriptor="the user selects between two options" uitemplate="ChoiceScreen">. Como puede ver arriba, el "LayoutModel" se refiere a la Page="DefaultMaster para obtener su marco exterior. Desde "LayoutPage", hace referencia al <ContentPlaceHolder Name="Content"/> archivo . <Content PlaceHolder="Content"...

Dimensionamiento y orientación

Dependiendo del tipo de elemento de la interfaz de usuario, puede usar una variedad de atributos para diseñar la interfaz de usuario a su gusto. Los dos atributos que debes tener en cuenta primero son weight y orientation, ya que te ayudan a diseñar la estructura general de tu interfaz de usuario.

  • Weight Define el tamaño de un elemento en un rango entre 0 y 1, donde 1 es el 100% del tamaño del elemento principal.
  • Orientation se aplica a un elemento primario y determina si los elementos secundarios están horizontal (uno al lado del otro) o vertical (uno encima del otro) dentro del elemento primario.

En nuestro "LayoutModel" anterior, el Content elemento tiene Horizontal orientación, por lo que los botones se mostrarán uno al lado del otro. Cada uno de ellos puede usar Weight="0.5" (es decir, el 50%) del tamaño disponible para el Content elemento. Los elementos de texto dentro de los botones, por otro lado, usan todo el espacio disponible para su elemento principal (el botón) con Weight="1".

A menudo, al configurar el tamaño y la orientación de sus elementos, es útil hacer uso de Panel los elementos. Estos elementos son puramente estructurales y se pueden utilizar para cambiar fácilmente la orientación dentro de un elemento principal o subdividir su espacio.

Botones y orden de enfoque

Cuando se trabaja con botones, un atributo es especialmente importante: FocusOrder. Este atributo define el orden en el que se centrarán los botones si se desplaza por ellos con botones de hardware. También define qué botón se preseleccionará, es decir, el botón con FocusOrder="0". Cada botón de tu diseño debe tener un FocusOrderarchivo . Incluso si algunos botones están en un PartTemplate y, por lo tanto, en un archivo diferente, aún deben estar en este orden general del diseño.

Consejos y trucos: El orden de enfoque de tu diseño debe comenzar en 0 y ser secuencial sin espacios ni duplicados. Si este no es el caso, es probable que la aplicación se bloquee al intentar cargar el diseño. Si alguna vez experimenta bloqueos repentinos de la aplicación durante el desarrollo, debería pensar inmediatamente en verificar su FocusOrder.

Formato de texto

Es posible formatear los textos que se muestran en las gafas inteligentes con .html etiquetas. Puede agregar el formato a una plantilla de interfaz de usuario, en un archivo de diseño o a un componente mientras crea un nuevo texto dentro del código.

<Text Name="LEFT_TEXT" Style="FooterButtonTextStyle" weight="1" MaxSize="30" content="<h1>Las manzanas rojas son las que mejor saben</h1> las manzanas verdes<br>no son tan <sub>sabrosas</sub>"/>

El resultado del formateo puede variar según el componente de diseño al que se asigne y la configuración del componente en particular.

Para obtener más información al respecto, consulte Formato de texto en la sección Referencia del motor de flujo de trabajo.

Cambios en el diseño

Lo que se muestra al usuario rara vez es estático. Por lo general, cualquier interacción del usuario también dará lugar a algún cambio en la interfaz de usuario. Por supuesto, no queremos crear un nuevo diseño y paso cada vez que cambia el contenido de un campo de texto. Hay dos formas de adaptar la interfaz de usuario dinámicamente: crear un <mapping> en el flujo de trabajo y usar la ui_update acción.

Cartografía

La asignación le permite asociar permanentemente un valor o variable con un atributo de un elemento de la interfaz de usuario. Si asigna una variable, el atributo del elemento de la interfaz de usuario cambiará automáticamente cada vez que cambie el valor de la variable.

           <paso ... >
             <estados>... </states>
             <mapping>
                 <ui_element name="LEFT_TEXT">
                     <param name="content">#{left_option}</param>
                     <param name="text_color">#{option_color}</param>
                 </ui_element>
             </mapping>
         </step>

El ejemplo anterior muestra que la asignación se agrega como un elemento secundario de la etiqueta step. Aquí puede agregar cualquier número de etiquetas ui_element que hagan referencia a un elemento de la interfaz de usuario de su diseño. En este caso name="LEFT_TEXT, el texto del botón representa nuestra primera opción. Cada vez que se cambia la variable #{left_option} en el flujo de trabajo, la interfaz de usuario mostrará un texto diferente en ese botón.

La acción ui_update

Otra opción para realizar cambios dinámicos en el diseño es la ui_update acción. Esta acción realiza un cambio único en el diseño:

<ui_update id="change_left_button_text">
   <widget_params><ui_element
      name="LEFT_TEXT">
         <param name="content">#{left_option}</param>
         <param name="text_color">#{option_color}</param>
      </ui_element>
   </widget_params>
</ui_update>

En la mayoría de los casos de uso, es preferible simplemente configurar una asignación en lugar de usar esta acción. Sin embargo, hay un caso de uso en el que la asignación no funciona y se le pide que utilice la ui_updateacción:

JavaScript dentro de una asignación solo se ejecuta una vez, por lo que si necesita usar JS y el valor cambia durante el ciclo de vida del paso, deberá actualizar manualmente la interfaz de usuario mediante la ui_update acción.

📌Asignación

Hasta ahora hemos elegido entre dos opciones textuales. Ahora queremos añadir imágenes a la mezcla:

  • Agregue un elemento de interfaz de usuario de imagen a los botones.
  • Agregue las siguientes imágenes a los recursos de su flujo de trabajo (desde el editor avanzado).
  • Simplemente puede arrastrar y soltar las imágenes de la lista de recursos en el contentatributo de la etiqueta de imagen.

 Descargar componente (pre-asignación)

Ayuda y recursos

Descargue las imágenes de dos elementos.

Solución

A continuación se muestra una solución ejemplar:

    <Button Name="Apple" FocusOrder="0" Weight="0.5" Style="ImageButtonStyle">
      <Image Name="LEFT_IMAGE" Weight="0.8" margin="0,0,0,0" content="§{apple.jpg}§" scaleType="CenterCrop"/>
      <Text Name="LEFT_TEXT" style="FooterButtonTextStyle" weight=".2" MaxSize="30" content="Apple"/>
      <Events/>
    </Botón>
    <Nombre del botón="Pera" FocusOrder="1" Peso="0.5" Estilo="EstiloBotónImagen">
      <Nombre de la imagen="RIGHT_IMAGE" Peso="0.8" Margen="0,0,0,0" Contenido="§{pear.jpg}§" ScaleType="CenterCrop"/>
      <Text Name="RIGHT_TEXT" Style="FooterButtonTextStyle" Weight=".2" MaxSize="30" content="Pera"/ >
      <Eventos/>
    </Botón>

 Descargar componente (posterior a la asignación)

En la siguiente lección, aprenderá a hacer que el componente sea configurable para que sea reutilizable.