Temi

I temi consentono di personalizzare l'aspetto di Blockly. Puoi personalizzare i colori dei blocchi, i colori delle categorie e alcuni componenti tramite la classe Themes. Se vuoi personalizzare componenti aggiuntivi, forniamo il nome del tema come classe nel div di inserimento. In questo modo, gli utenti possono modificare l'aspetto di eventuali componenti non supportati tramite CSS. Il nostro obiettivo principale nella creazione di temi è aiutare gli sviluppatori a creare esperienze Blockly più accessibili.

Proprietà del tema

Un tema è un oggetto con diverse proprietà: il tema di base da cui partire, un oggetto stile per blocchi, categorie, componenti e caratteri e l'opzione per scegliere se utilizzare o meno i cappelli per i blocchi iniziali.

Stile blocco

Uno stile di blocco è costituito da quattro campi:

  • colourPrimary (obbligatorio) - Il colore di sfondo del blocco.
  • colourSecondary (facoltativo) - Il colore di sfondo se il blocco è un blocco in ombra.
  • colourTertiary (facoltativo): il colore del bordo o dell'evidenziazione del blocco.
  • hat (facoltativo) - Aggiunge un cappello a un blocco, se il valore è impostato su cap. Scopri di più sui cappelli.

Blocco con frecce che indicano i colori primario, secondario e terziario

const listBlocks = {
   'colourPrimary': '#4a148c',
   'colourSecondary':'#AD7BE9',
   'colourTertiary':'#CDB6E9',
   'hat': 'cap'
}

Un tema includerà una mappatura del nome dello stile del blocco all'oggetto dello stile del blocco:

const blockStyles = {
   'list_blocks': {
      'colourPrimary': '#4a148c',
      'colourSecondary':'#AD7BE9',
      'colourTertiary':'#CDB6E9'
   },
   'logic_blocks': {
      'colourPrimary': '#01579b',
      'colourSecondary':'#64C7FF',
      'colourTertiary':'#C5EAFF'
   }
}

Stile della categoria

Uno stile di categoria contiene solo una proprietà di colore.

  • Colore (obbligatorio): il colore della categoria nella cassetta degli attrezzi. In genere, questi colori devono essere uguali a colourPrimary sulla maggior parte dei blocchi della categoria. In questo modo, gli utenti possono capire facilmente quali blocchi appartengono a una determinata categoria.

Screenshot della cassetta degli attrezzi con diversi colori delle categorie

const mathCategory = {
   'colour':'290'
}

Un tema includerà una mappatura del nome della categoria all'oggetto dello stile della categoria:

const categoryStyles = {
   'list_category': {
      'colour': '#4a148c'
   },
   'logic_category': {
      'colour': '#01579b',
   }
}

Stili dei componenti

Un tema può impostare il colore o il valore dei seguenti componenti:

  • workspaceBackgroundColour: il colore di sfondo dell'area di lavoro
  • toolboxBackgroundColour: colore di sfondo della cassetta degli attrezzi
  • toolboxForegroundColour: colore del testo della categoria della cassetta degli attrezzi
  • flyoutBackgroundColour: colore di sfondo del popup
  • flyoutForegroundColour: colore del testo dell'etichetta popup
  • flyoutOpacity: opacità del menu a scomparsa
  • scrollbarColour: colore della barra di scorrimento
  • scrollbarOpacity: opacità barra di scorrimento
  • insertionMarkerColour: il colore dell'indicatore di inserimento (non accetta nomi di colori)
  • insertionMarkerOpacity: l'opacità dell'indicatore di inserimento
  • markerColour: il colore dell'indicatore visualizzato in modalità di navigazione con la tastiera
  • cursorColour: il colore del cursore visualizzato in modalità di navigazione con la tastiera

La maggior parte degli altri componenti può essere modificata utilizzando il nome del tema nel CSS. Tuttavia, se vuoi modificare un componente che non fa già parte di questo elenco e non può essere modificato utilizzando il CSS, invia un problema con maggiori informazioni.

const componentStyle = {
   'workspaceBackgroundColour': '#1e1e1e',
   'toolboxBackgroundColour': '#333'
}

Stili di carattere

Uno stile di carattere è un oggetto che contiene la famiglia, lo spessore e le dimensioni di un carattere.

const fontStyle = {
   'family': 'Georgia, serif',
   'weight': 'bold',
   'size': 12
}

Cappelli da baseball

Se imposti startHats: true direttamente in un oggetto tema, un cappello verrà aggiunto a tutti i blocchi senza connessioni precedenti o di output. Se vuoi avere un maggiore controllo su quali blocchi devono avere un cappello, puoi utilizzare la proprietà block style.

Temi personalizzati

Per aggiungere un tema alla tua applicazione Blockly, devi svolgere i seguenti passaggi:

  1. Creare un tema
  2. Aggiungere i nomi degli stili
  3. Impostare il tema in uno spazio di lavoro

Creare un tema

Un tema può essere creato utilizzando il costruttore o defineTheme. L'utilizzo di defineTheme semplifica l'estensione di un tema esistente e l'impostazione di tutti i valori con un unico oggetto. Un tema ha un nome ed è un oggetto con gli stili di blocco, gli stili di categoria e altre proprietà come discusso sopra.

Un tema può avere anche un tema di base, che fornirà valori predefiniti per tutti i valori non specificati nel tema personalizzato.

const theme = Blockly.Theme.defineTheme('themeName', {
   'base': Blockly.Themes.Classic,
   'blockStyles': {
      'logic_blocks': {
         'colourPrimary': '#4a148c'
      },
      'math_blocks': {...}
   },
   'categoryStyles': {...},
   'componentStyles': {...},
   'fontStyle': {...},
   'startHats': true
});

Ecco un esempio di utilizzo di defineTheme.

Aggiungere i nomi degli stili

Ora che abbiamo creato un tema, dobbiamo aggiungere il nome degli stili alle definizioni di blocco e categoria.

Categorie

Per utilizzare uno degli stili di categoria definiti in categoryStyles del tema, aggiungilo alla definizione della categoria:

JSONXML
{
  "kind": "category",
  "name": "Logic",
  "categorystyle": "logic_category"
}

<category name="Logic" categorystyle="logic_category"></category>

Stoppate

Per utilizzare uno degli stili di blocco definiti nel blockStyles del tema, aggiungilo alla definizione del blocco:

JSONJavaScript
"style":"logic_blocks"

this.setStyle('logic_blocks');

Impostare il tema

Devi anche indicare a Blockly quale tema utilizzare. Se definisci diversi temi che utilizzano lo stesso stile di blocco e gli stessi nomi di categoria, puoi consentire all'utente di scegliere il tema più adatto alle sue esigenze e modificarlo dinamicamente senza dover modificare le definizioni dei blocchi stessi.

Tema iniziale

Il modo migliore per impostare un tema iniziale è includere options.theme nella chiamata di inserimento. Puoi fornire il tema in JSON o JavaScript.

JSONJavaScript
{
   theme: {
      "blockStyles" : {
         "list_blocks": {
            "colourPrimary": "#4a148c",
            "colourSecondary":"#AD7BE9",
            "colourTertiary":"#CDB6E9"
         }
      },
      "categoryStyles" : {
         "list_category": {
            "colour": "#4a148c"
         }
      },
      "componentStyles" : {
         "workspaceBackgroundColour": "#1e1e1e"
      }
   }
}

{
   theme: Blockly.Theme.defineTheme('themeName', {
      'blockStyles': blockStyles,
      'categoryStyles': categoryStyles,
      'componentStyles': componentStyles
   })
}

Se non viene fornito alcun tema, verrà utilizzato per impostazione predefinita il tema classico.

Temi dinamici

Se vuoi modificare il tema in modo dinamico (ad esempio nel caso in cui consenta agli utenti di scegliere un tema da un menu a discesa), puoi chiamare yourWorkspace.setTheme(theme).

Crea script per gli stili dei blocchi

Blockly fornisce uno script che prende una mappa di tonalità o valori esadecimali e calcola i colori secondari e terziari. Lo script si trova nella cartella scripts/themes.

Temi integrati

Blockly fornisce una serie di temi per l'accessibilità, in particolare per alcuni tipi di discromatopsie:

Sono inoltre disponibili: