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'applicazione. Per informazioni sul linguaggio Less, vedere http://lesscss.org/ . La combinazione del foglio di stile Meno e della definizione di stile genera i file CSS di runtime. I file CSS di runtime vengono utilizzati per visualizzare le istanze della vista nell'applicazione. Impostando i valori di definizione a livello di contenitore, le istanze della vista 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 un 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 impacchettano un file .css in un file .zip e si impacchettano le immagini a cui fa riferimento in un file .zip diverso.

  Se si aggiungono i file .css come singoli file Web, è possibile modificarli nel designer con codice basso. Non è possibile modificare i .css file che sono inclusi in un file .zip nel designer. Invece, è necessario modificarli esternamente, ricrearli e quindi sostituire il file web .zip con il file .zip aggiornato.

• Prototipo del CSS necessario per impostare 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 il CSS in linea come luogo temporaneo per sviluppare gli stili CSS per la vista.

  Se si punta a un file immagine in un .zip file, utilizzare il seguente formato per l' 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 a basso codice, gli stili della vista specificati nei file .css e CSS in linea vengono applicati alla vista nel pannello Layout , consentendo di vedere come 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 le istruzioni di query del supporto nel proprio 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 della fase 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)

  • Se si utilizza Internet Explorer 9 (obsoleto), lo stile in fase di progettazione viene applicato solo per le prime 25 viste o applicazioni aperte. Le viste o le pagine successive all'interno delle applicazioni non avranno lo stile in fase di progettazione applicato.
  • 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 un CSS inline che include l'istruzione @import url('File1.css'), il css all'interno di File1 viene riflesso in fase di progettazione, ma qualsiasi istruzione di importazione all'interno di File1 non viene riflessa in fase di progettazione.

  Se si dispone di pagine e viste grandi o complesse, lo stile del tempo 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 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 di disegno 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 sostituisce 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 della dimensione dello schermo o uno specifico del browser a un file .css .
     Ad esempio, è possibile aggiungere stili per i 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 Supporto magnetico , 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.
  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 inserire codice come tag <meta> nell'intestazione della vista, utilizzare HTML intestazione.
• Se necessario, definire le funzioni utilizzate dalla vista nei gestori eventi appropriati.
  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.