Motywy

Motywy to sposób na dostosowanie wyglądu i sposobu obsługi Blockly. Za pomocą klasy Themes możesz dostosować kolory bloków, kolory kategorii i niektóre komponenty. Jeśli chcesz dostosować dodatkowe komponenty, przekazujemy nazwę motywu jako klasę w elemencie div do wstrzykiwania. Dzięki temu użytkownicy mogą zmieniać wygląd nieobsługiwanych komponentów za pomocą CSS. Naszym głównym celem w tworzeniu motywów jest umożliwienie deweloperom tworzenia bardziej przystępnych funkcji Blockly.

Uwaga: jeśli chcesz mieć wpływ tylko na główny kolor bryły, a nie na bardziej szczegółową kontrolę wyglądu, możesz ustawić kolor w definicji bloku, zamiast tworzyć motyw. Jeśli chcesz zmienić kształt bloku zamiast jego koloru, dowiedz się więcej o mechanizmach renderowania.

Właściwości motywu

Motyw to obiekt z kilkoma właściwościami: motywem podstawowym, z którego można korzystać, obiekt stylu dla bloków, kategorii, komponentów i czcionek oraz informacje o tym, czy do bloków początkowych mają być używane nakrycia głowy.

Ważne: kod w Blockly używa pisowni colour spoza Stanów Zjednoczonych. Wszystkie właściwości koloru można określać za pomocą wartości barwnych lub szesnastkowych.

Styl blokowy

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

• colourPrimary (wymagany) – kolor tła bloku.
• colourSecondary (opcjonalny) – kolor tła, jeśli blok jest blokiem cienia.
• colourTertiary (opcjonalny) – kolor obramowania lub podświetlenia bloku.
• hat (opcjonalny) – dodaje kapelusz do bloku, jeśli wartość jest ustawiona na cap. Dowiedz się więcej o kapeluszach.

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

Motyw będzie obejmował przypisanie nazwy stylu bloku do obiektu stylu bloku:

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

Styl kategorii

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

• Kolor (wymagany) – kolor kategorii w zestawie narzędzi. Zwykle te kolory powinny być takie same jak colourPrimary w przypadku większości bloków w danej kategorii. Dzięki temu użytkownicy mogą łatwo rozpoznać, które bloki należą do danej kategorii.

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

Motyw będzie obejmował przypisanie nazwy kategorii do obiektu stylu kategorii:

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

Style komponentów

Motyw może określać kolor lub wartość poniższych komponentów:

• workspaceBackgroundColour: kolor tła obszaru roboczego
• toolboxBackgroundColour: kolor tła w zestawie narzędzi
• toolboxForegroundColour: kolor tekstu kategorii w zestawie narzędzi
• flyoutBackgroundColour: kolor tła rozjaśnionego tła
• flyoutForegroundColour: kolor tekstu rozwiniętej etykiety
• flyoutOpacity: przezroczystość wysunięcia
• scrollbarColour: kolor paska przewijania
• scrollbarOpacity: przezroczystość paska przewijania
• insertionMarkerColour: kolor znacznika wstawiania (nie akceptuje nazw kolorów)
• insertionMarkerOpacity: przezroczystość 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ść innych komponentów można zmienić, korzystając z nazwy motywu w kodzie CSS. Jeśli chcesz zmienić jakiś komponent, który nie znajduje się jeszcze na tej liście i nie można go zmienić za pomocą CSS, zgłoś problem, podając więcej informacji.

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

Style czcionek

Styl czcionki to obiekt przechowujący rodzinę oraz jej grubość i rozmiar.

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

Nakrycia głowy

Wskazówka: więcej informacji o przypadkach użycia kapeluszy startowych znajdziesz na stronie z paradygmatami blokowania.

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

Motywy niestandardowe

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

1. Utwórz motyw
2. Dodaj nazwy stylów
3. Ustawianie motywu dla obszaru roboczego

Utwórz motyw

Motyw można utworzyć za pomocą konstruktora lub defineTheme. Używanie defineTheme ułatwia rozszerzenie istniejącego motywu i ustawianie wszystkich wartości w jednym obiekcie. Motyw ma nazwę i jest obiektem ze stylami bloków, stylami kategorii i innymi właściwościami, jak opisano powyżej.

Motyw może też mieć motyw podstawowy, który dostarczy 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 funkcji defineTheme.

Dodaj nazwy stylów

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

Kategorie

Sposób definiowania zestawu narzędzi określa, w jaki sposób musisz dodać nazwę stylu. Więcej informacji znajdziesz na stronie Zestawu narzędzi.

Bloki

Sposób definiowania bloku określa sposób, w jaki musisz dodać nazwę stylu. Więcej definicji blokad znajdziesz na stronie blokad niestandardowych. Możesz przypisać do bloku jeden ze stylów bloków zdefiniowanych we właściwości blockStyles motywu.

JSON

"style":"logic_blocks"

JavaScript

this.setStyle('logic_blocks');

Ustaw motyw

Musisz też określić, którego motywu użyć. Zdefiniowanie kilku motywów, które używają tego samego stylu blokowania i nazw kategorii, pozwala użytkownikowi wybrać motyw, który najbardziej mu odpowiada, i dynamicznie go zmieniać bez konieczności zmiany definicji bloków.

Motyw początkowy

Najlepszym sposobem na ustawienie motywu początkowego jest umieszczenie parametru options.theme w wywołaniu wstrzykiwanym. Motyw możesz podać w formacie JSON lub JavaScript.

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

Więcej informacji o dostępnych opcjach znajdziesz na naszej stronie konfiguracji. Jeśli nie podasz żadnego motywu, domyślnie zostanie użyty motyw klasyczny.

Dynamiczne motywy

Jeśli chcesz dynamicznie zmieniać motyw (np. zezwalać użytkownikom na wybór motywu z menu), możesz wywołać yourWorkspace.setTheme(theme).

Utwórz skrypt stylów bloków

Blockly udostępnia skrypt, który tworzy mapę barw lub wartości szesnastkowych i oblicza dla nich kolory drugorzędne i trzeciorzędne. Skrypt znajdziesz w folderze skrypty/motywy.

Wbudowane motywy

Blockly udostępnia szereg motywów ułatwień dostępu, w szczególności niektórych zaburzeń rozpoznawania barw:

• Wysoki kontrast
• Deuteranopia/Protanopia
• Tritanopia

Posiadamy również:

• Motyw klasyczny
• Nowoczesny
• Tryb ciemny