Designs

Mit Designs lässt sich 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 für das Injektions-div bereit. So können Nutzer das Erscheinungsbild nicht unterstützter Komponenten über CSS ändern. Unser Hauptziel bei der Erstellung von Designs ist es, Entwicklern die Möglichkeit zu geben, Blockly-Umgebungen zu erstellen, die besser zugänglich sind.

Designattribute

Ein Design ist ein Objekt mit mehreren Attributen: das Basisdesign, von dem es abgeleitet wird, ein Stilobjekt für Blöcke, Kategorien, Komponenten und Schriftarten sowie eine Angabe dazu, ob für Startblöcke Hüte 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): Fügt einem Block einen Hut hinzu, wenn der Wert auf cap gesetzt ist. Weitere Informationen zu Hüten.

Block mit Pfeilen, die auf Primär-, Sekundär- und Tertiärfarben 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'
   }
}

Kategoriestil

Ein Kategoriestil enthält nur ein Farbattribut.

  • Farbe (erforderlich): Die Farbe der Kategorie in der Toolbox. Diese Farben sollten in der Regel mit der Farbe colourPrimary der meisten Blöcke in 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

In einem Design kann die Farbe oder der Wert der folgenden Komponenten festgelegt werden:

  • workspaceBackgroundColour: Die Hintergrundfarbe des Arbeitsbereichs
  • toolboxBackgroundColour: Die Hintergrundfarbe der Toolbox
  • toolboxForegroundColour: Die Textfarbe der Toolbox-Kategorie
  • flyoutBackgroundColour: Die Hintergrundfarbe des Flyouts
  • flyoutForegroundColour: Die Textfarbe des Flyout-Labels
  • flyoutOpacity: Die Deckkraft des Flyouts
  • scrollbarColour: Die Farbe der Scrollleiste
  • scrollbarOpacity: Die Deckkraft der Scrollleiste
  • insertionMarkerColour: Die Farbe der Einfügemarkierung (Farbnamen werden nicht akzeptiert)
  • insertionMarkerOpacity: Die Deckkraft der Einfügemarkierung
  • 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 geändert werden, indem Sie den Designnamen in Ihrem CSS verwenden. Wenn Sie jedoch eine Komponente ändern möchten, die noch nicht a Teil dieser Liste ist und nicht mit CSS geändert werden kann, melden Sie bitte ein Problem mit weiteren Informationen.

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

Schriftstile

Ein Schriftstil ist ein Objekt, das die Schriftfamilie, die Schriftstärke und die Schriftgröße einer Schriftart enthält.

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

Start-Hüte

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 das Attribut für den Blockstil verwenden.

Benutzerdefinierte Designs

Wenn Sie Ihrer Blockly-Anwendung ein Design hinzufügen möchten, müssen Sie Folgendes tun:

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

Design erstellen

Ein Design kann mit dem Konstruktor oder mit defineTheme erstellt werden. Mit defineTheme lässt sich ein vorhandenes Design einfach erweitern und alle Werte mit einem einzigen Objekt festlegen. Ein Design hat einen Namen und ist ein Objekt mit den oben beschriebenen Blockstilen, Kategoriestilen und anderen Attributen.

Ein Design kann auch ein Basisdesign haben, das Standardwerte für alle Werte bereitstellt, die im benutzerdefinierten Design nicht 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 wir ein Design erstellt haben, müssen wir den Namen der Stile zu den Block- und Kategoriedefinitionen hinzufügen.

Kategorien

Wenn Sie einen der in categoryStyles Ihres Designs definierten Kategoriestile verwenden möchten, fügen Sie ihn Ihrer Kategoriedefinition hinzu:

JSON

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

XML

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

Blöcke

Wenn Sie einen der in blockStyles Ihres Designs definierten Blockstile verwenden möchten, fügen Sie ihn Ihrer Blockdefinition hinzu:

JSON

"style":"logic_blocks"

JavaScript

this.setStyle('logic_blocks');

Design festlegen

Sie müssen Blockly auch mitteilen, welches Design verwendet werden soll. Wenn Sie mehrere Designs definieren, die dieselben Blockstil- und Kategorienamen verwenden, können Sie dem Nutzer die Möglichkeit geben, das für ihn am besten geeignete Design auszuwählen und es dynamisch zu ändern, ohne die Blockdefinitionen selbst ändern zu müssen.

Anfangsdesign

Die beste Möglichkeit, ein Anfangsdesign festzulegen, besteht darin, die Konfigurationsoption theme in Ihren Aufruf von Blockly.inject einzufügen. Sie können das Design in JSON oder JavaScript angeben.

JSON

Blockly.inject('blocklyDiv', {
  theme: {
     "blockStyles" : {
        "list_blocks": {
           "colourPrimary": "#4a148c",
           "colourSecondary":"#AD7BE9",
           "colourTertiary":"#CDB6E9"
        }
     },
     "categoryStyles" : {
        "list_category": {
           "colour": "#4a148c"
        }
     },
     "componentStyles" : {
        "workspaceBackgroundColour": "#1e1e1e"
     }
  },
  ...
});

JavaScript

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

Wenn kein Design angegeben ist, wird standardmäßig das klassische Designverwendet.

Dynamische Designs

Wenn Sie Ihr Design dynamisch ändern möchten (z. B. wenn Nutzer ein Design aus einem Drop-down-Menü auswählen können), können Sie yourWorkspace.setTheme(theme) aufrufen.

Skript zum Erstellen von Blockstilen

Blockly bietet ein Skript, das eine Zuordnung von Farbtönen oder Hex-Werten verwendet und die sekundären und tertiären Farben dafür berechnet. Das Skript finden Sie im Ordner „scripts/themes“.

Integrierte Designs

Blockly bietet eine Reihe von Designs für die Barrierefreiheit, insbesondere für bestimmte Arten von Farbenblindheit:

Außerdem haben wir: