Forschungsumfrage: Feedback zu Blockly geben

Diese Seite wurde von der Cloud Translation API übersetzt.

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.

Designeigenschaften

Ein Design ist ein Objekt mit mehreren Eigenschaften: dem Basisdesign, das erweitert werden soll, einem Stilobjekt für Blöcke, Kategorien, Komponenten und Schriftarten sowie der Angabe, 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ügen Sie einem Block einen Hut hinzu, wenn der Wert auf cap festgelegt ist. Weitere Informationen zu Rollen

Block mit Pfeilen, die auf die 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 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. In der Regel sollten diese Farben der colourPrimary der meisten Blöcke in der Kategorie entsprechen. So können Nutzer leichter erkennen, welche Blöcke zu einer bestimmten Kategorie gehören.

Screenshot der Toolbox mit verschiedenen Kategorienfarben

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: Flyout-Deckkraft
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 Supportanfrage mit weiteren Informationen.

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

Schriftstile

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

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

Starthüte

Wenn Sie startHats: true direkt in einem Designobjekt 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:

Design erstellen
Stilnamen hinzufügen
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 den Namen der Stile hinzufügen.

Kategorien

Wie Sie die Toolbox definieren, bestimmt, wie Sie den Stilnamen hinzufügen müssen. Weitere Informationen finden Sie auf der Toolbox-Seite.

Blocks

Wie Sie den Block definieren, bestimmt, wie Sie den Stilnamen hinzufügen müssen. Weitere Informationen zu Blockdefinitionen finden Sie auf unserer Seite zu benutzerdefinierten Blöcken. Weisen Sie Ihrem Block einen der Blockstile zu, die Sie in der blockStyles-Eigenschaft des Themas definiert haben.

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 Design

Am besten legen Sie ein Startthema fest, indem Sie options.theme in Ihren Inject-Aufruf aufnehmen. 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
   })
}

Weitere Informationen zu den Optionen finden Sie auf unserer Konfigurationsseite. Wenn Sie kein Design angeben, 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 die Barrierefreiheit, insbesondere bestimmte Arten von Farbblindheit:

Außerdem haben wir:

Klassisches Design
Modern
Dunkler Modus