Designs

Mit Designs kannst du das Erscheinungsbild von Blockly anpassen. Über die Klasse Themes können Sie Blockfarben, Kategoriefarben und bestimmte Komponenten anpassen. Wenn Sie zusätzliche Komponenten anpassen möchten, stellen wir den Designnamen als Klasse im Injection-Div bereit. So können Nutzer das Aussehen nicht unterstützter Komponenten über CSS ändern. Unser Hauptziel bei der Erstellung von Themes ist es, Entwickler in die Lage zu versetzen, barrierefreie Blockly-Erlebnisse zu erstellen.

Designeigenschaften

Ein Design ist ein Objekt mit mehreren Eigenschaften: das zu erweiternde Basisthema, ein Stilobjekt für Blöcke, Kategorien, Komponenten und Schriftarten sowie die Angabe, ob Hüte für Startblöcke verwendet werden sollen.

Blockstil

Ein Blockstil besteht aus vier Feldern:

  • colourPrimary (erforderlich): die Hintergrundfarbe des Blocks.
  • colourSecondary (optional): Die Hintergrundfarbe, wenn der Block ein Schattenblock ist.
  • colourTertiary (optional): Die Rahmen- oder Hervorhebungsfarbe des Blocks.
  • hat (optional): Wenn der Wert auf cap gesetzt ist, wird dem Block ein Hut hinzugefügt. Weitere Informationen zu Hüten

Block mit Pfeilen, die auf Primär-, Sekundär- und Tertiärfarbe zeigen

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

Ein Design enthält eine Zuordnung des Blockstilnamens zum Blockstilobjekt:

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

Stil der Kategorie

Ein Kategoriestil umfasst nur eine Farbeigenschaft.

  • Farbe (erforderlich): Die Farbe der Kategorie in der Toolbox. In der Regel sollten diese Farben mit den Farben für colourPrimary in den meisten Blöcken der Kategorie übereinstimmen. So können Nutzer leicht erkennen, welche Blöcke zu einer bestimmten Kategorie gehören.

Screenshot der Toolbox mit verschiedenen Kategoriefarben

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

Ein Design enthält eine Zuordnung des Kategorienamens zum Kategoriestilobjekt:

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

Komponentenstile

Ein Design kann die Farbe oder den Wert der folgenden Komponenten festlegen:

  • workspaceBackgroundColour: Hintergrundfarbe des Arbeitsbereichs
  • toolboxBackgroundColour: Toolbox-Hintergrundfarbe
  • toolboxForegroundColour: Textfarbe der Toolbox-Kategorie
  • flyoutBackgroundColour: Flyout-Hintergrundfarbe
  • flyoutForegroundColour: Farbe des Flyout-Labels
  • flyoutOpacity: Flyout-Deckkraft
  • scrollbarColour: Farbe der Bildlaufleiste
  • scrollbarOpacity: Deckkraft der Bildlaufleiste
  • insertionMarkerColour: die Farbe der Einfügungsmarkierung. Farbnamen sind nicht zulässig.
  • insertionMarkerOpacity: die Deckkraft der Einfügungsmarkierung
  • markerColour: Die Farbe der Markierung, die im Tastaturnavigationsmodus angezeigt wird
  • cursorColour: Die Farbe des Cursors, der im Tastaturnavigationsmodus angezeigt wird

Die meisten anderen Komponenten können über den Designnamen im CSS-Code geändert werden. Wenn Sie jedoch eine Komponente ändern möchten, die noch nicht in dieser Liste enthalten ist und nicht mit CSS geändert werden kann, reichen Sie bitte ein Problem mit weiteren Informationen ein.

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

Schriftstile

Ein Schriftstil ist ein Objekt, das die Familie, die Stärke und die Größe einer Schriftart enthält.

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

Hüte starten

Wenn Sie startHats: true direkt in einem Designobjekt festlegen, wird allen Blöcken ohne vorherige oder Ausgabeverbindungen ein Hut hinzugefügt. Wenn Sie genauer steuern möchten, welche Blöcke einen Hut erhalten, können Sie stattdessen die Eigenschaft block style verwenden.

Benutzerdefinierte Designs

So fügen Sie Ihrer Blockly-Anwendung ein Design hinzu:

  1. Design erstellen
  2. Stilnamen hinzufügen
  3. Design für einen Arbeitsbereich festlegen

Design erstellen

Ein Design kann mit dem Konstruktor oder mithilfe von defineTheme erstellt werden. Mit defineTheme können Sie ganz einfach ein vorhandenes Design erweitern und alle Werte mit einem einzigen Objekt festlegen. Ein Design hat einen Namen und ist ein Objekt mit Blockstile, Kategoriestile und anderen Eigenschaften, wie oben beschrieben.

Ein Design kann auch ein Basisdesign haben, das Standardwerte für alle Werte bereitstellt, die nicht im benutzerdefinierten Design angegeben sind.

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

Hier ist ein Beispiel für die Verwendung von defineTheme.

Stilnamen hinzufügen

Nachdem Sie nun ein Design erstellt haben, müssen Sie den Namen der Stile zu den Block- und Kategoriedefinitionen hinzufügen.

Kategorien

Wie Sie den Stilnamen hinzufügen, hängt von der Definition Ihrer Toolbox ab. Weitere Informationen finden Sie auf der Toolbox-Seite.

Blocks

Durch die Definition des Blocks wird festgelegt, wie der Stilname hinzugefügt wird. Weitere Informationen zu Blockdefinitionen finden Sie auf der Seite Benutzerdefinierte Blockierungen. Sie weisen Ihrem Block einen der Blockstile zu, die Sie in der Eigenschaft blockStyles des Designs definiert haben.

JSON

"style":"logic_blocks"

JavaScript

this.setStyle('logic_blocks');

Design festlegen

Außerdem müssen Sie Blockly mitteilen, welches Design verwendet werden soll. Wenn Sie mehrere Themen mit demselben Blockstil und denselben Kategorienamen definieren, kann der Nutzer das Design auswählen, das für ihn am besten geeignet ist, und es dynamisch ändern, ohne die Blockdefinitionen selbst ändern zu müssen.

Ursprüngliches Design

Die beste Methode zum Festlegen eines Anfangsdesigns besteht darin, options.theme in Ihren Injection-Aufruf aufzunehmen. Sie können das Design im JSON- oder JavaScript-Format zur Verfügung stellen.

JSON

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

JavaScript

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

Weitere Informationen zu den Optionen finden Sie auf unserer Konfigurationsseite. Wenn kein Design angegeben ist, wird standardmäßig das Klassische Design verwendet.

Dynamische Designs

Wenn Sie das Design dynamisch ändern möchten, z. B. wenn Nutzern die Möglichkeit gegeben wird, ein Design aus einem Drop-down-Menü auszuwählen, können Sie yourWorkspace.setTheme(theme) aufrufen.

Script für Blockstile erstellen

Blockly stellt ein Skript zur Verfügung, das eine Zuordnung von Farb- oder Hexadezimalwerten annimmt und die Sekundär- und Tertiärfarben für sie berechnet. Das Skript befindet sich im Ordner scripts/themes.

Integrierte Designs

Blockly bietet eine Reihe von Themen für die Barrierefreiheit, insbesondere bestimmte Arten von Farbblindheit:

Außerdem gibt es: