Designs

Mithilfe von Designs lässt sich das Erscheinungsbild von Blockly anpassen. Sie können Blockfarben, Kategoriefarben und bestimmte Komponenten über die Klasse Themes anpassen. Wenn Sie zusätzliche Komponenten anpassen möchten, stellen wir den Namen des Designs als Klasse im Injection-Div bereit. So können Nutzer das Aussehen nicht unterstützter Komponenten über CSS ändern. Unser Hauptziel beim Erstellen von Themen besteht darin, Entwicklern die Möglichkeit zu geben, Blockly-Umgebungen zu erstellen, die barrierefreier sind.

Hinweis :Wenn Sie nur die Hauptfarbe eines Blocks steuern möchten, anstatt die Darstellung detaillierter zu steuern, können Sie die Farbe in der Blockdefinition festlegen, anstatt ein Design zu erstellen. Wenn Sie die Form eines Blocks anstelle seiner Farbe ändern möchten, erfahren Sie hier mehr über Renderer.

Designeigenschaften

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

Wichtig: Im Blockly-Code wird die nicht US-amerikanische Schreibweise von colour verwendet. Alle Farbeigenschaften können entweder in Farbton oder in Hexadezimalwerten definiert werden.

Blockstil

Ein Blockstil besteht aus vier Feldern:

• colourPrimary (erforderlich): Die Hintergrundfarbe des Blocks.
• colourSecondary (optional): Die Hintergrundfarbe, wenn es sich um einen Schattenblock handelt.
• colourTertiary (optional): Die Rahmen- oder Hervorhebungsfarbe des Blocks.
• hat (optional): Fügen Sie einem Block einen Hut hinzu, wenn der Wert auf cap festgelegt ist. Weitere Informationen zu Hüte

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

Ein Design enthält eine Zuordnung des Namens des Blockstils 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. Normalerweise sollten diese Farben mit der colourPrimary auf der Mehrheit der Blöcke in der Kategorie übereinstimmen. So können Nutzer leicht erkennen, welche Blöcke zu einer bestimmten Kategorie gehören.

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

Mit einem Design können Sie die Farbe oder den Wert der folgenden Komponenten festlegen:

• workspaceBackgroundColour: Die Hintergrundfarbe des Arbeitsbereichs
• toolboxBackgroundColour: Hintergrundfarbe des Tool-Kits
• toolboxForegroundColour: Textfarbe der Toolbox-Kategorie
• flyoutBackgroundColour: Hintergrundfarbe des Flyouts
• flyoutForegroundColour: Farbe des Texts im Ausklappmenü
• flyoutOpacity: Deckkraft des Flyouts
• scrollbarColour: Farbe der Bildlaufleiste
• scrollbarOpacity: Deckkraft der Bildlaufleiste
• insertionMarkerColour: Farbe der Einfügemarke (Farbennamen werden nicht akzeptiert)
• insertionMarkerOpacity: Deckkraft der Einfügungsmarkierung
• markerColour: Die Farbe der Markierung, die im Modus für die Tastaturnavigation angezeigt wird
• cursorColour: Die Farbe des Cursors, der im Modus für die Tastaturnavigation angezeigt wird

Die meisten anderen Komponenten können Sie ändern, indem Sie den Namen des Designs in Ihrem CSS verwenden. Wenn Sie jedoch eine Komponente ändern möchten, die nicht bereits in dieser Liste enthalten ist und nicht mithilfe von CSS geändert werden kann, erstellen Sie bitte eine Anfrage 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 enthält.

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

Starthüte

Tipp :Weitere Informationen zu den Anwendungsfällen von Start-Hüten finden Sie auf unserer Seite zum App-Design.

Wenn Sie startHats: true direkt in einem Themenobjekt festlegen, wird allen Blöcken ohne vorherige oder Ausgabeverbindungen ein Hut hinzugefügt. Wenn Sie genau festlegen möchten, welche Blöcke einen Hut erhalten, können Sie stattdessen die Eigenschaft Blockstil 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 mit defineTheme erstellt werden. Mit defineTheme können Sie ein vorhandenes Design ganz einfach erweitern und alle Werte mit einem einzigen Objekt festlegen. Ein Design hat einen Namen und ist ein Objekt mit den oben beschriebenen Block- und Kategoriestilen sowie anderen Properties.

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 ein Beispiel für die Verwendung von defineTheme.

Stilnamen hinzufügen

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

Kategorien

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

JSON

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

XML

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

Blocks

Wenn Sie einen der Blockstile verwenden möchten, der im blockStyles Ihres Designs definiert ist, 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 Themen mit demselben Blockstil und denselben Kategoriennamen definieren, können Nutzer das für sie am besten geeignete Thema auswählen und es dynamisch ändern, ohne die Blockdefinitionen selbst ändern zu müssen.

Ursprüngliches Thema

Am besten legen Sie ein Startthema fest, indem Sie options.theme in Ihren Inject-Aufruf einfügen. Sie können das Design in JSON oder JavaScript angeben.

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
   })
}

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

Dynamische Designs

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

Script für Blockstil erstellen

Blockly bietet ein Script, das eine Zuordnung von Farbtönen oder Hexadezimalwerten annimmt und die Sekundär- und Tertiärfarben daraus berechnet. Das Script befindet sich im Ordner scripts/themes.

Integrierte Designs

Blockly bietet eine Reihe von Themen für Barrierefreiheit, insbesondere für bestimmte Arten von Farbsehschwäche:

• Hoher Kontrast
• Deuteranopie/Protanopie
• Tritanopia

Außerdem haben wir:

• Klassisches Design
• Modern
• Dunkler Modus