Tiene opciones más avanzadas para configurar el aspecto de tiempo de diseño de las vistas. Utilizando código HTML y JavaScript , las vistas pueden tener un aspecto de tiempo de diseño más parecido al aspecto de tiempo de ejecución de la vista, lo que proporciona a los desarrolladores de interfaces una idea más precisa de cómo se verán sus vistas para los usuarios de la aplicación. En algunos casos, el mismo código que se utiliza para la vista de tiempo de ejecución se puede utilizar en el lienzo del coach.
Procedimiento
- La manera más sencilla de proporcionar un aspecto de tiempo de diseño para las vistas que refleje con exactitud el aspecto del tiempo de ejecución es mediante un fragmento de código HTML. El fragmento de código HTML se carga como activo gestionado y luego se selecciona en la sección de vista previa avanzada en el editor de vista. Este archivo debe ser un archivo HTML con un fragmento de código que representa la vista.
- Cree un fragmento de código HTML.
Este archivo debe ser un archivo HTML con un fragmento de código que representa la vista. Por ejemplo:
<div>
<button class="DesignLabel"></button>
</div>
El fragmento de código HTML tiene algunas características para permitir que se coloquen correctamente los recuadros de contenido y las etiquetas.
Class: DesignLabel- Esta clase se coloca en el elemento HTML que representa la etiqueta, si la vista admite una etiqueta. El editor coloca la serie de la etiqueta en el contenido HTML interno de este elemento. Un fragmento de código puede tener varias etiquetas y la etiqueta se aplica y actualiza en todos los elementos.
Class: DesignContentBox- Esta clase se utiliza para indicar dónde se debe colocar un recuadro de contenido declarado en la vista previa. Si se utiliza esta clase, el elemento también debe tener el atributo
data-designContentBoxID definido. Este atributo se debe establecer en el ID de control del recuadro de contenido declarado. Si se declaran varios recuadros de contenido, cada uno se debe colocar de forma exclusiva en el HTML de la vista de previa. Si se declara un recuadro de contenido en el diseño de la vista, pero no existe ninguna división en la plantilla HTML con la clase DesignContentBox y un data-designContentBoxID coincidente, el editor colocará la instancia del recuadro de contenido al final de la presentación de la vista.
Nota: El editor reserva los nombres de clase de Design* . Los fragmentos de código no deben utilizar clases que coincidan con este patrón. De forma similar, se deben evitar los nombres del atributo data-design*.
Lo siguiente es un fragmento de código HTML de ejemplo:
<div>
<h2 class="DesignLabel"></h2>
<div class="DesignContentBox" data-designContentBoxID="ContentBox1">
</div>
- Añada archivos externos a la automatización de flujo de trabajo o al kit de herramientas, tal como se describe en Adición de archivos gestionados.
- Cambie a Visión general y, en Vista previa avanzada, seleccione el archivo que contiene el fragmento de código HTML.
- Si un fragmento de código HTML por sí solo no puede proporcionar la experiencia de vista previa en tiempo de diseño que desea, también puede especificar un archivo gestionado que contenga un manejador JavaScript .
Un manejador JavaScript permite la manipulación del DOM de tiempo de diseño en reacción a los cambios de modelo. El manejador JavaScript puede funcionar junto con un fragmento de código HTML o puede manejar toda la propia vista previa.
El manejador JavaScript consta de un archivo JavaScript con un mixObject definido. El mixObject puede implementar una o más funciones a las que llama el editor durante el ciclo de vida del editor. También puede definir funciones adicionales, pero los nombres deben tener el prefijo coachViewImpl, por ejemplo, coachViewImpl_calcValue(). Si desea almacenar información adicional sobre this, se debe colocar en el objeto this.context.coachViewData. Tanto la convención de denominación de la función como la ubicación de almacenamiento de la variable de instancia se utilizan para evitar conflictos en futuras versiones del producto.
A continuación se muestra un ejemplo de un manejador JavaScript simple que proporciona una etiqueta de vista previa y una imagen para un control de botón.
var mixObject = {
createPreview:function(containingDiv, labelText, callback){
require([ "dojo/dom-construct"], this.lang.hitch(this, function(domConstruct){
var buttonDiv = domConstruct.create("div");
domConstruct.place(buttonDiv, containingDiv);
var button = domConstruct.create("button");
domConstruct.place(button, buttonDiv);
this.context.coachViewData.labelTextDom = document.createTextNode(labelText);
button.appendChild(this.labelTextDom);
callback();
}));
},
propertyChanged:function(propertyName, propertyValue){
if(propertyName=="@label" && this.context.coachViewData.labelTextDom){
this.context.coachViewData.labelTextDom.data = propertyValue;
}
},
};
Para obtener más información sobre las API de previsualización de tiempo de diseño, consulte Manejadores de sucesos para la previsualización de tiempo de diseño de vista de coach.