Definizione della modalità di funzionamento della vista

Passare a Funzionamento per definire la funzione e l'aspetto della vista:

• Aggiungere lo stile dinamico per controllare l'aspetto della vista
  Lo stile dinamico combina un foglio di stile Minore con le definizioni di stile impostate nel parent, che di solito è l' automazione del workflow. Per informazioni sul linguaggio Less, vedere http://lesscss.org/ . La combinazione del foglio di stile Meno e della definizione di stile genera file CSS di runtime. I file CSS di runtime vengono utilizzati per visualizzare le istanze di vista nell' automazione del flusso di lavoro. Impostando i valori di definizione a livello di contenitore, le istanze della visualizzazione all'interno di tale contenitore possono avere uno stile congruente. Inoltre, è possibile apportare modifiche globali a tale stile da un'ubicazione.
• Aggiungere script e fogli di stile esistenti dalla libreria utilizzando gli script inclusi.
  Generalmente, questi file sono riutilizzabili .js e .css . È possibile aggiungere questi file alla libreria come singoli file Web o impacchettarli in un file .zip e aggiungere tale file come file Web. L'impacchettamento dei file in un file .zip significa che essi mantengono le relazioni relative. Ad esempio, se si impacchetta un file .css e si includono le immagini a cui fa riferimento utilizzando i collegamenti relativi, il sistema trova le immagini. Tuttavia, il sistema non trova le immagini se si comprimi un file .css in un file .zip e si impacchettano le immagini a cui fa riferimento in un file .zip diverso.

  Se si aggiungono .css file come singoli file Web, è possibile modificarli nel designer. Tuttavia, non è possibile modificare i file .css inseriti in un file .zip . Invece, è necessario modificarli esternamente, ricrearli e quindi sostituire il file web .zip con il file .zip aggiornato.

• Prototipo del CSS necessario per lo stile della vista utilizzando il CSS in linea. Una volta sviluppato il CSS, copiarlo in un file .css e importarlo come script incluso.
  Poiché i nomi delle classi CSS in linea sono globali, potrebbero verificarsi conflitti di nomi che determinano l'applicazione solo dell'ultima definizione di stile. Per questo motivo, utilizzare CSS in linea come luogo temporaneo per sviluppare gli stili CSS per la vista.

  Se si sta puntando a un file immagine in un file .zip, utilizzare il seguente formato per URL : file.zip! percorso / file. estensione.

  Nota: la notazione '!' per fare riferimento a un file all'interno di un'archivio è supportata solo nel comportamento CSS in linea.

  Quando si utilizza il designer, gli stili di vista specificati nei file .css e nel CSS in linea vengono applicati alla vista nelle proprietà Layout , consentendo di visualizzare il modo in cui la vista verrà visualizzata al runtime senza dover eseguire o verificare la vista. Ci sono alcune restrizioni su questo supporto di stile in fase di progettazione:

  • Se si utilizzano istruzioni di query del supporto nel CSS, vengono analizzate solo le query del supporto con un tipo di supporto screen e solo le specifiche max-width e min-width vengono applicate in fase di progettazione. Questo stile di progettazione supporta solo la sintassi semplice, ad esempio, le seguenti istruzioni del tipo di supporto vengono elaborate in fase di progettazione:

    @media screen ….
    	@media all
    	@media (min-width: 520 px ) 

    Tuttavia, le seguenti istruzioni non vengono elaborate in fase di progettazione:

    @media not screen
    @media not print
    @media not (tty and screen)

  • Le importazioni all'interno degli script inclusi e del CSS in linea verranno elaborate solo ad un livello di integrazione. Ad esempio, se si dispone di CSS inline che include l'istruzione @import url('File1.css'), il css all'interno di File1 si riflette in fase di progettazione, ma qualsiasi istruzione di importazione all'interno di File1 non si riflette in fase di progettazione.

  Se si dispone di coach e viste grandi o complesse, l'applicazione degli stili in fase di progettazione potrebbe causare alcuni problemi di prestazioni. Per disattivare lo stile della fase di progettazione per la sessione corrente, passare a Layout, fare clic con il pulsante destro del mouse in un punto qualsiasi dell'area di disegno e selezionare Disabilita stile della fase di progettazione. Per il resto della sessione, gli stili di vista specificati non vengono applicati. Per riattivare lo stile di progettazione per la sessione, fare clic con il pulsante destro del mouse sull'area e selezionare Abilita stile in fase di progettazione.

• Aggiungere uno stile condizionale per gestire le differenze tra browser e tipi di supporti.
  Lo stile condizionale sovrascrive gli stili predefiniti quando si applica la condizione.
  Ad esempio, è possibile applicare un file .css per Microsoft Internet Explorer e un file .css diverso per altri browser. Utilizzare lo stile condizionale per applicare il file appropriato.
  Per aggiungere lo stile condizionale:
  1. Aggiungere uno stile specifico per la dimensione dello schermo o per il browser a un file .css .
     Ad esempio, è possibile aggiungere stili per tablet per utilizzare un carattere più piccolo per le etichette e ridurre il riempimento.
  2. Aggiungere il file .css come script incluso.
  3. Nei campi Condizione IE o Supporti , aggiungere la condizione che applica gli stili nel file .css .
     Ad esempio, se il file .css contiene gli stili per una presentazione tablet, aggiungere una condizione come screen and (max-width: 600px) al campo Supporto . Se lo schermo dell'utente è di 600 pixel o meno in larghezza, la vista utilizza gli stili nel file .css invece dei valori predefiniti.
  È inoltre possibile aggiungere lo stile condizionale aggiungendo JavaScript in linea e CSS in linea.

  Nota: qualsiasi stile JavaScript in linea e qualsiasi condizione di stile immessa nei campi Condizione IE e Supporto vengono elaborati solo in fase di runtime e non vengono riflessi in fase di progettazione.
• Definire le variabili e funzioni comuni per i gestori eventi della vista utilizzando JavaScriptin linea.
  Per informazioni sull'accesso a parti del DOM, consultare Accesso a una vista child utilizzando un ID controllo. L'editor contiene un frammento di codice. L'editor non mostra i messaggi di convalida per i frammenti di codice.
• Definire le variabili che identificano i gestori eventi definiti dall'utente. Per ulteriori informazioni, consultare l'argomento Eventi definiti dall'utente.
• Per inserire codice come tag <meta> nell'intestazione della vista, utilizzare HTML intestazione.
• Se necessario, definire le funzioni utilizzate dalla vista nei gestori eventi appropriati.
  Per ulteriori informazioni, consultare Gestori eventi per l'oggetto vista. Se è stato selezionato Può attivare un evento di limite nelle proprietà Panoramica , aggiungere il codice per attivare gli eventi di limite. Per attivare l'evento, codificare il JavaScript per richiamare this.context.trigger(callback) al momento appropriato.