Temi

Un tema è costituito da una serie di definizioni di temi, fogli di stile dinamici e CSS generati che è possibile applicare a automazione del workflow o toolkit.

Una definizione di tema è una serie di variabili di tema e i rispettivi valori. Ad esempio, una definizione di tema può avere una variabile background e un valore white. Una vista può avere un foglio di stile dinamico che utilizza le variabili dalla definizione del tema. Quando un certo numero di viste utilizzano la stessa definizione di tema, è possibile avere una serie di viste che hanno un aspetto visivo congruente. Inoltre, è facile apportare una modifica visiva globale a queste viste modificando i valori delle variabili del tema senza toccare le definizioni della vista. Le definizioni dei temi e i fogli di stile dinamici supportano il linguaggio Meno fogli di stile in modo che sia possibile utilizzarne la sintassi e le funzioni per migliorare le viste personalizzate.

Una vista utilizza la definizione del tema del contesto in esecuzione, ovvero l' automazione del flusso di lavoro o il toolkit che sta attualmente utilizzando la vista. È possibile utilizzare questa funzione per avere viste in una automazione del flusso di lavoro con uno stile e le stesse viste in una automazione del flusso di lavoro con uno stile diverso. Mentre le due serie di viste hanno gli stessi fogli di stile dinamici, i fogli di stile utilizzano definizioni di temi che hanno valori differenti.
Diagramma di un tema che consiste in un insieme di definizioni di temi, fogli di stile dinamici e CSS generati che è possibile applicare a un'automazione del flusso di lavoro o a un toolkit

Le definizioni dei temi e i fogli di stile dinamici vengono combinati per generare automaticamente una serie di file .CSS. Quando una automazione flusso di lavoro visualizza una pagina, utilizza questi file CSS per creare lo stile delle viste contenute nella pagina. La creazione del CSS richiede del tempo, quindi se si sta visualizzando l' automazione del flusso di lavoro nel designer, è possibile che le viste nella pagina utilizzeranno i valori del tema predefiniti o precedenti fino a quando il nuovo CSS non sarà disponibile. In fase di runtime, il CSS è già generato per le automazioni del flusso di lavoro distribuite e non si verifica un ritardo.

Quando il designer visualizza una vista, utilizza il tema dell' automazione del workflow o del toolkit attualmente aperto per le viste di stile nel layout. Questa funzione indica che la stessa vista può essere diversa nel designer a seconda dell' automazione del flusso di lavoro o del toolkit aperto. Il tema Carbon nel toolkit System Data è il tema predefinito per l' automazione del flusso di lavoropiù recente, che fornisce le definizioni del tema per le viste. Il tema Carbon fornisce le risorse visive (colori, icone, caratteri e così via) che allineano le interazioni e l'aspetto delle automazioni e delle visualizzazioni del flusso di lavoro con le linee guida di IBM® Design System. Per ulteriori informazioni, vedere Carbon Design System Il link esterno apre una nuova finestra o scheda.

È anche possibile applicare un tema da un toolkit personalizzato. Ad esempio, si crea un tipo di vista pulsante in un toolkit personalizzato. Nel toolkit del designer, il tema applicato al toolkit definisce lo stile del pulsante su blu. Un' automazione del flusso di lavoro ha il toolkit come dipendenza. Tuttavia, l' automazione del flusso di lavoro ha un tema che definisce lo stile del pulsante arancione. Il contesto in cui si visualizza il pulsante determina il colore del pulsante:
  • Se si apre il toolkit nel designer e si aggiunge il pulsante a una pagina o a una vista, il layout mostra il pulsante come blu.
  • Se si apre l' automazione del workflow nel designer e si aggiunge il pulsante a una pagina o a una vista, il layout mostra il pulsante come arancione.
  • Se si esegue l' automazione del flusso di lavoro, il browser mostra il pulsante come arancione.
Oltre allo stile che è possibile applicare tramite un tema, è anche possibile applicare lo stile in altri modi nel designer. Il seguente elenco contiene i vari modi in cui è possibile definire lo stile di una vista con gli elementi più in alto nell'elenco che sovrascrivono i valori impostati più in basso nell'elenco:
  1. Classi e attributi aggiunti nella pagina Attributi HTML delle proprietà di layout della vista.
  2. Stile incluso nel CSS in linea del comportamento della vista. Per evitare conflitti di nomi di classe, utilizzare CSS in linea per sviluppare temporaneamente gli stili CSS. Dopo aver sviluppato gli stili, inserirli in uno script incluso.
  3. CSS negli script inclusi del comportamento della vista.
  4. Definizioni di stile impostate nello stile dinamico del comportamento della vista.
  5. Definizioni CSS impostate dal tema dell' automazione del flusso di lavoro o del toolkit.
Esiste anche una gerarchia che è possibile utilizzare per stilare singole viste. I valori di stile di una visualizzazione in un contenitore sovrascrivono i valori di stile impostati dal contenitore stesso. Ad esempio, un' automazione del flusso di lavoro ha un tema che definisce lo stile di tutte le viste per utilizzare il colore primario (blu). Tuttavia, se si esegue lo stile di un'istanza pulsante in una pagina in tale automazione del flusso di lavoro per utilizzare il colore di esito positivo (verde), tale pulsante è verde. I controlli nel toolkit dell'IU forniscono questo modo di stilare le istanze tramite opzioni di configurazione.