Windows portail d’administration Azure Pack Client-Side modèles d’extension

 

S’applique à : Windows Azure Pack

Hello World exemples de chemins d’accès Visual Studio Project : Microsoft.WAP.Samples.HelloWorld.TenantExtension\Templates et Microsoft.WAP.Samples.HelloWorld.AdminExtension\Templates

Le code HTML requis par votre extension doit être placé dans des modèles et défini dans le manifeste. Cela charge le modèle dans le navigateur lorsque le Windows Azure Pack pour Windows portail d’administration de serveur se charge.

Le code HTML dans une extension est traité par le moteur de création de modèles jsRender (voir http://borismoore.github.com/jsviews/demos/index.html et les billets de blog pertinents sur http://www.borismoore.com/ ). Si vous n’utilisez aucune des balises de modèle ({{ et }}), le code HTML dans le modèle est généré tel quel.

Les modèles sont rendus dans des éléments contenants (généralement un div). Veillez à disposer d’extraits de code HTML valides résidant dans un élément conteneur. Le traitement des modèles se produit dans le contexte d’un objet de données utilisé lors de la recherche de valeurs à remplacer dans le modèle. Voici un exemple de balisage de modèle dans un élément div :

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

Modèles de rendu

Les modèles d’une extension sont référencés par l’attribut de nom dans le manifeste du modèle. L’objet de contexte peut être explicite ou implicite. Par exemple, la définition des onglets d’une extension implique la configuration d’un tableau de définitions d’onglets, comme dans les éléments suivants :

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

Notez le paramètre « template », qui correspond à une valeur d’attribut de nom dans le manifeste du modèle. L’objet de contexte est défini implicitement par l’infrastructure côté client pour qu’il s’agit d’un objet vide s’il s’agit d’un onglet de niveau supérieur, c’est-à-dire qu’il n’est pas extrait à un élément, ou qu’il s’agit de l’élément précédemment sélectionné s’il s’agit d’un onglet d’extraction.

Certaines fonctions peuvent prendre un objet de contexte explicite avec lequel effectuer le rendu. Par exemple, pour créer un Assistant simple en 1 étape :

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" });

Le paramètre de données est utilisé comme objet de contexte pour le modèle « createStep1 ». Ainsi, jsRender examine les propriétés de l’objet de données lors de la résolution des variables.

Voir aussi

Windows extensions de l’interface utilisateur du portail d’administration Azure Pack