Motywy

Uwaga: motywy są nadal obsługiwane, ale preferowanym sposobem stylizowania aplikacji Blockly jest używanie CSS.

Motywy umożliwiają dostosowywanie wyglądu i sposobu obsługi Blockly. Możesz dostosować kolory bloków, kolory kategorii i niektóre komponenty za pomocą klasy Themes. Jeśli chcesz dostosować dodatkowe komponenty, podajemy nazwę motywu jako klasę w iniekcji div. Umożliwia to użytkownikom zmianę wyglądu dowolnych nieobsługiwanych komponentów za pomocą CSS. Głównym celem tworzenia motywów jest umożliwienie deweloperom tworzenia bardziej dostępnych funkcji Blockly.

Uwaga: jeśli chcesz kontrolować tylko główny kolor bloku, a nie mieć większej kontroli nad wyglądem, możesz ustawić kolor w definicji bloku zamiast tworzyć motyw. Jeśli zamiast koloru chcesz zmienić kształt bloku, dowiedz się więcej o programach renderujących.

Właściwości motywu

Motyw to obiekt z kilkoma właściwościami: motywem bazowym, od którego ma być rozszerzany, obiektem stylu dla bloków, kategorii, komponentów i czcionek oraz informacją, czy w przypadku bloków początkowych mają być używane kapelusze.

Ważne: kod w Blockly używa pisowni słowa colour, która nie jest stosowana w Stanach Zjednoczonych. Wszystkie właściwości koloru można zdefiniować za pomocą wartości odcienia lub wartości szesnastkowych.

Styl bloku

Styl bloku składa się z 4 pól:

• colourPrimary (wymagany) – kolor tła bloku.
• colourSecondary (opcjonalnie) – kolor tła, jeśli blok jest blokiem cienia.
• colourTertiary (opcjonalnie) – kolor obramowania lub wyróżnienia bloku.
• hat (opcjonalnie) – dodaje kapelusz do bloku, jeśli wartość jest ustawiona na cap. Dowiedz się więcej o nakryciach głowy.

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

Motyw będzie zawierać mapowanie nazwy stylu bloku na obiekt stylu bloku:

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

Styl kategorii

Styl kategorii zawiera tylko właściwość koloru.

• Kolor (wymagany) – kolor kategorii w przyborniku. Zazwyczaj te kolory powinny być takie same jak colourPrimary na większości bloków w kategorii. Ułatwia to użytkownikom rozpoznawanie, które bloki należą do danej kategorii.

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

Motyw będzie zawierać mapowanie nazwy kategorii na obiekt stylu kategorii:

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

Style komponentów

Motyw może ustawić kolor lub wartość tych komponentów:

• workspaceBackgroundColour: kolor tła obszaru roboczego.
• toolboxBackgroundColour: kolor tła Zestawu narzędzi
• toolboxForegroundColour: kolor tekstu kategorii w zestawie narzędzi
• flyoutBackgroundColour: kolor tła wysuwanego menu,
• flyoutForegroundColour: kolor tekstu etykiety wysuwanej
• flyoutOpacity: Nieprzezroczystość wysuwanego menu
• scrollbarColour: Kolor paska przewijania
• scrollbarOpacity: Nieprzezroczystość paska przewijania
• insertionMarkerColour: kolor znacznika wstawiania (nie akceptuje nazw kolorów)
• insertionMarkerOpacity: nieprzezroczystość znacznika wstawiania.
• markerColour: kolor znacznika wyświetlanego w trybie nawigacji za pomocą klawiatury.
• cursorColour: kolor kursora wyświetlanego w trybie nawigacji za pomocą klawiatury.

Większość pozostałych komponentów można zmienić, używając nazwy motywu w arkuszu CSS. Jeśli jednak chcesz zmienić komponent, którego nie ma na tej liście i którego nie można zmienić za pomocą CSS, zgłoś problem, podając więcej informacji.

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

Style czcionki

Styl czcionki to obiekt, który zawiera rodzinę, grubość i rozmiar czcionki.

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

Start Hats

Wskazówka: dowiedz się więcej o przypadkach użycia gwiazdek na naszej stronie dotyczącej projektowania aplikacji.

Jeśli ustawisz startHats: true bezpośrednio w obiekcie motywu, do wszystkich bloków bez wcześniejszych połączeń ani połączeń wyjściowych zostanie dodany kapelusz. Jeśli chcesz mieć większą kontrolę nad tym, które bloki mają otrzymać kapelusz, możesz zamiast tego użyć właściwości styl bloku.

Motywy niestandardowe

Aby dodać motyw do aplikacji Blockly, musisz wykonać te czynności:

1. Tworzenie motywu
2. Dodawanie nazw stylów
3. Ustawianie motywu w obszarze roboczym

Tworzenie motywu

Motyw można utworzyć za pomocą konstruktora lub za pomocą defineTheme. Użycie defineTheme ułatwia rozszerzenie istniejącego motywu i ustawienie wszystkich wartości za pomocą jednego obiektu. Motyw ma nazwę i jest obiektem ze stylami bloków, stylami kategorii i innymi właściwościami, o których wspomnieliśmy powyżej.

Motyw może też mieć motyw bazowy, który będzie zawierać wartości domyślne dla wszystkich wartości nieokreślonych w motywie niestandardowym.

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

Oto przykład użycia defineTheme.

Dodawanie nazw stylów

Po utworzeniu motywu musimy dodać nazwy stylów do definicji bloków i kategorii.

Kategorie

Aby użyć jednego ze stylów kategorii zdefiniowanych w pliku categoryStyles motywu, dodaj go do definicji kategorii:

JSON

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

XML

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

Bloki

Aby użyć jednego ze stylów bloku zdefiniowanych w pliku blockStyles motywu, dodaj go do definicji bloku:

JSON

"style":"logic_blocks"

JavaScript

this.setStyle('logic_blocks');

Ustawianie motywu

Musisz też poinformować Blockly, którego motywu chcesz użyć. Definiując kilka motywów, które używają tego samego stylu bloku i nazw kategorii, możesz umożliwić użytkownikowi wybór motywu, który najlepiej mu odpowiada, i dynamiczną zmianę motywu bez konieczności zmiany samych definicji bloków.

Motyw początkowy

Najlepszym sposobem na ustawienie początkowego motywu jest uwzględnienie opcji konfiguracji theme w wywołaniu funkcji Blockly.inject. Motyw możesz podać w formacie JSON lub JavaScript.

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
  }),
  ...
});

Jeśli nie podasz motywu, domyślnie używany będzie motyw klasyczny.

Motywy dynamiczne

Jeśli chcesz dynamicznie zmieniać motyw (np. w przypadku umożliwienia użytkownikom wyboru motywu z menu), możesz wywołać funkcję yourWorkspace.setTheme(theme).

Tworzenie skryptu stylów bloków

Blockly udostępnia skrypt, który przyjmuje mapę odcieni lub wartości szesnastkowych i oblicza dla nich kolory drugorzędne i trzeciorzędne. Skrypt znajdziesz w folderze scripts/themes.

Wbudowane motywy

Blockly udostępnia kilka motywów ułatwień dostępu, w tym motywy dla osób z określonymi rodzajami ślepoty barw:

• Wysoki kontrast
• Deuteranopia/Protanopia
• Tritanopia

Mamy też:

• Motyw klasyczny
• Nowoczesny
• Tryb ciemny