Configurazione dell'aspetto in fase di progettazione delle viste

• Specificare un file immagine da utilizzare come icona per la vista.
• Se la vista dispone di una UI che è il risultato del codice HTML o JavaScript e non di altre viste, specificare un'immagine di layout da visualizzare nell'area in fase di progettazione.
• Se si desidera vincolare la vista a un file Web in fase di progettazione, selezionare Usa binding URL. Ad esempio, le viste immagine utilizzano questa impostazione in modo che visualizzino l'immagine a cui sono collegate nell'area.
• Se la vista supporta un'etichetta, è possibile impostare la posizione dell'etichetta sull'area di disegno specificando Posizione etichetta anteprima.
  In genere, si utilizza la posizione dell'etichetta centrale per gli elementi UI come i pulsanti.

  1. Se è stata specificata un'immagine di layout e si imposta la posizione dell'etichetta di anteprima su Center, l'immagine di layout si allunga per adattarsi al testo dell'etichetta. Per impostazione predefinita, l'intera immagine è estesa.
  2. Se si utilizza il designer di basso codice e si è specificato un file frammento HTML o il file Helper JS (o entrambi), qualsiasi codice in questi file che posiziona l'etichetta sovrascrive il valore specificato per Anteprima posizione etichetta.

Quando si creano le viste e le applicazioni aziendali, il designer con codice basso offre opzioni più avanzate per la configurazione dell'aspetto in fase di progettazione delle viste. Utilizzando il codice HTML e JavaScript , le viste possono avere un aspetto in fase di progettazione che assomiglia più strettamente all'aspetto di runtime della vista, fornendo agli sviluppatori dell'interfaccia un'idea più accurata di come le loro viste appariranno agli utenti dell'applicazione. In alcuni casi, lo stesso codice utilizzato per la vista di runtime può essere utilizzato nell'area di disegno della pagina.

• Il modo più semplice per fornire un aspetto di progettazione per le viste che riflettono in modo accurato l'aspetto di runtime è tramite un frammento HTML. Il frammento HTML viene caricato come file Web, quindi selezionato nella sezione di anteprima avanzata nell'editor della vista. Questo file deve essere un file HTML con un frammento che rappresenti la vista.
  1. Creare un frammento HTML.
     Questo file deve essere un file HTML con un frammento che rappresenti la vista. Ad esempio:

     <div>
     <button class="DesignLabel"></button>
     </div>

     Il frammento HTML dispone di alcune funzioni che abilitano le caselle di contenuto e le etichette ad essere posizionate in modo appropriato.

     Class: DesignLabel

     Questa classe viene posizionata sull'elemento HTML che rappresenta l'etichetta, se la vista supporta un'etichetta. L'editor inserisce la stringa di etichetta come contenuto HTML interno di questo elemento. Un frammento può avere più etichette e l'etichetta viene applicata e aggiornata a tutti gli elementi.

     Class: DesignContentBox

     Questa classe viene utilizzata per indicare dove deve essere ubicata una casella di contenuto dichiarato nell'anteprima. Se viene utilizzata questa classe, l'elemento deve avere anche l'attributo data-designContentBoxID definito. Questo attributo deve essere impostato sull'ID di controllo della casella del contenuto dichiarato. Se sono dichiarate più caselle di contenuto, ognuna può essere posizionata in modo univoco nell'anteprima HTML. Se una casella di contenuto viene dichiarata nel layout della vista, ma non esiste un div nel template HTML con la classe DesignContentBox e la corrispondenza data-designContentBoxID, l'editor posizionerà l'istanza della casella di contenuto alla fine del rendering della vista.

     Nota: i nomi classe Design* sono riservati dall'editor. I frammenti non devono utilizzare classi corrispondenti a questo modello. Allo stesso modo, è necessario evitare i nomi degli attributi data-design* .

     Il seguente è un frammento HTML di esempio:

     <div>
     <h2 class="DesignLabel"></h2>
     <div class="DesignContentBox" data-designContentBoxID="ContentBox1">
     </div>

  2. Aggiungere file esterni al progetto applicazione o al toolkit.
  3. Passare a Panoramica e, in Anteprima avanzata, selezionare il file che contiene il frammento HTML.
• Se un frammento HTML da solo non può fornire l'esperienza di anteprima della fase di progettazione desiderata, è possibile anche specificare un file Web contenente un handler JavaScript .

  Un gestore di JavaScript consente la manipolazione del DOM della fase di progettazione in reazione alle modifiche del modello. Il gestore JavaScript può lavorare insieme a un frammento HTML oppure può gestire l'intera anteprima.

  Il gestore JavaScript è costituito da un file JavaScript con un mixObject definito. mixObject può implementare una o più funzioni che l'editor richiama durante il ciclo di vita dell'editor. È anche possibile definire funzioni aggiuntive, ma i nomi devono essere preceduti da coachViewImpl, ad esempio coachViewImpl_calcValue(). Se si desidera archiviare ulteriori informazioni su this, è necessario posizionarle nell'oggetto this.context.coachViewData . Sia la convenzione di denominazione della funzione che l'ubicazione di memorizzazione della variabile dell'istanza vengono utilizzate per evitare conflitti nelle versioni future del prodotto.

  Il seguente è un esempio di un semplice gestore JavaScript che fornisce un'etichetta di anteprima e un'immagine per una vista pulsante.

  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;
  		}
  	},
  };