Plantillas de extensión Client-Side del Portal de administración de módulos de Azure Windows

 

Se aplica a: Windows Azure Pack

Hola mundo Rutas de acceso de Visual Studio Project de ejemplo: Microsoft.WAP.Samples.HelloWorld.TenantExtension\Templates y Microsoft.WAP.Samples.HelloWorld.AdminExtension\Templates

Html requerido por la extensión debe colocarse en plantillas y definirse en el manifiesto. Esto cargará la plantilla en el explorador cuando se cargue el Windows Azure Pack para Windows Server Management Portal.

El motor de plantillas jsRender procesa HTML en una extensión (consulte http://borismoore.github.com/jsviews/demos/index.html y las entradas de blog pertinentes en http://www.borismoore.com/ ). Si no usa ninguna de las etiquetas de plantilla ({{ y }}), el CÓDIGO HTML de la plantilla se genera tal y como está.

Las plantillas se representan dentro de elementos contenedores (normalmente un div). Asegúrese de tener fragmentos de código HTML válidos que residan en un elemento contenedor. El procesamiento de plantillas se produce dentro del contexto de un objeto de datos que se usa al buscar valores para sustituirlos en la plantilla. A continuación se muestra un ejemplo de marcado de plantilla dentro de un elemento div:

<div class="aux-readonlyvalue">
  {{if domain.hasExpiry == true}}
    <span>Expiration data</span>
    <div>{{>domain.ExpiryDate}}</div>
  {{/if}}
</div>

Plantillas de representación

El atributo name del manifiesto de plantilla hace referencia a las plantillas de una extensión. El objeto de contexto puede ser explícito o implícito. Por ejemplo, definir las pestañas de una extensión implica la configuración de una matriz de definiciones de pestañas, como en lo siguiente:

navigation = {
  tabs: [
    {
      id: "domains",
      displayName: "domains",
      template: "domainsTab",
      activated: loadDomainsTab
    }
  ]
}

Anote el parámetro "template", que coincide con un valor de atributo de nombre en el manifiesto de plantilla. El marco de trabajo del lado cliente establecerá implícitamente el objeto de contexto para que sea un objeto vacío si es una pestaña de nivel superior, es decir, no se explora en profundidad en un elemento o será el elemento seleccionado previamente si es una pestaña de obtención de detalles.

Algunas funciones pueden tomar un objeto de contexto explícito con el que representar. Por ejemplo, para crear un sencillo asistente de 1 paso:

cdm.stepWizard({
    extension: "DomainTenantExtension",
    steps: [{
      template: "createStep1",
      data: data,
      onStepCreated: function () {
        wizard = this;
      },
      onStepActivate: step1Activate,
      onNextStep: function () {
        return Shell.UI.Validation.validateContainer("#dm-create-step1");
      }
    }]
  },
  { size: "mediumplus" });

El parámetro de datos se usa como objeto de contexto para la plantilla "createStep1". Esto da como resultado jsRender examinando las propiedades del objeto de datos al resolver variables.

Consulte también

Windows extensiones de interfaz de usuario del Portal de administración de módulos de Azure