Temalar

Temalar, Blockly'nin görünümünü ve tarzını özelleştirmenin bir yoludur. Themes sınıfı aracılığıyla blok renklerini, kategori renklerini ve belirli bileşenleri özelleştirebilirsiniz. Ek bileşenleri özelleştirmek istiyorsanız tema adını, yerleştirme div bölümünde bir sınıf olarak sağlarız. Bu, kullanıcıların desteklenmeyen bileşenlerin görünümünü CSS aracılığıyla değiştirmesine olanak tanır. Tema oluştururken ana hedefimiz, geliştiricileri daha erişilebilir Blockly deneyimleri oluşturma konusunda desteklemektir.

Tema Özellikleri

Tema, birkaç özelliği olan bir nesnedir: temel tema; bloklar, kategoriler, bileşenler ve yazı tipleri için bir stil nesnesi ve başlangıç blokları için şapka kullanılıp kullanılmayacağı.

Blok Tarzı

Blok stili dört alandan oluşur:

  • colourPrimary (gerekli) - Bloğun arka plan rengi.
  • colourSecondary (isteğe bağlı): Blok bir gölge blokuysa arka plan rengi.
  • colourTertiary (isteğe bağlı) - Bloğun kenarlık veya vurgu rengi.
  • hat (isteğe bağlı) - Değer cap olarak ayarlanırsa bloka şapka ekler. Şapkalar hakkında daha fazla bilgi edinin.

Birincil, ikincil ve üçüncül rengi işaret eden okların olduğu blok

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

Bir tema, blok stili nesnesi için blok stili adının eşlemesini içerir:

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

Kategori Stili

Bir kategori stili yalnızca bir renk özelliği içerir.

  • Renk (gerekli) - Araç kutusundaki kategorinin rengi. Genellikle bu renkler, kategorideki blokların çoğunda bulunan colourPrimary ile aynı olmalıdır. Bu, kullanıcıların hangi blokların belirli bir kategoriye ait olduğunu anlamalarını kolaylaştırır.

Farklı kategori renklerine sahip araç kutusu ekran görüntüsü

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

Bir tema, kategori adının kategori stili nesnesiyle eşlemesini içerir:

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

Bileşen Stilleri

Tema, aşağıdaki bileşenlerin rengini veya değerini ayarlayabilir:

  • workspaceBackgroundColour: Çalışma alanı arka plan rengi
  • toolboxBackgroundColour: Araç kutusu arka plan rengi
  • toolboxForegroundColour: Araç kutusu kategorisi metin rengi
  • flyoutBackgroundColour: Kayan arka plan rengi
  • flyoutForegroundColour: Açılır etiket metin rengi
  • flyoutOpacity: Uçuş opaklığı
  • scrollbarColour: Kaydırma çubuğu rengi
  • scrollbarOpacity: Kaydırma çubuğu opaklığı
  • insertionMarkerColour: Ekleme işaretçisi rengi (Renk adlarını kabul etmez)
  • insertionMarkerOpacity: Ekleme işaretçisinin opaklığı
  • markerColour: Klavyeyle gezinme modunda görüntülenen işaretçinin rengi
  • cursorColour: Klavyeyle gezinme modunda görüntülenen imlecin rengi

Diğer bileşenlerin çoğu, CSS'nizdeki tema adını kullanarak değiştirilebilir. Bununla birlikte, değiştirmek istediğiniz ancak halihazırda bu listede yer almayan ve CSS kullanılarak değiştirilemeyen bir bileşen varsa lütfen daha fazla bilgi vererek sorun bildiriminde bulunun.

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

Yazı Tipi Stilleri

Yazı tipi stili, yazı tipinin ailesini, ağırlığını ve boyutunu barındıran bir nesnedir.

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

Başlangıç Şapkaları

startHats: true öğesini doğrudan bir tema nesnesinde ayarlarsanız önceden veya çıkış bağlantısı olmayan tüm bloklara şapka eklenir. Tam olarak hangi blokların şapka alacağı konusunda daha fazla kontrol sahibi olmak istiyorsanız bunun yerine block style özelliğini kullanabilirsiniz.

Özel Temalar

Blockly uygulamanıza tema eklemek için aşağıdakileri yapmanız gerekir:

  1. Tema oluşturma
  2. Stil adları ekleyin
  3. Temanızı bir çalışma alanında ayarlama

Tema Oluşturun

Bir tema, oluşturucu kullanılarak veya defineTheme kullanılarak oluşturulabilir. defineTheme kullanmak, mevcut bir temayı genişletmeyi ve tüm değerleri tek bir nesneyle ayarlamayı kolaylaştırır. Temanın adı vardır ve yukarıda açıklandığı gibi blok stilleri, kategori stilleri ve diğer özelliklere sahip bir nesnedir.

Bir temanın temel teması da olabilir. Bu tema, özel temada belirtilmeyen tüm değerler için varsayılan değerler sağlar.

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

defineTheme kullanımına ilişkin bir örnek burada bulabilirsiniz.

Stil Adları Ekle

Artık bir tema oluşturduğumuza göre blok ve kategori tanımlarına stillerin adını eklememiz gerekir.

Kategoriler

Araç kutunuzu tanımlama şekliniz, stil adını nasıl eklemeniz gerektiğini belirler. Daha fazla bilgi için araç kutusu sayfasını inceleyin.

Bloklar

Bloğunuzu tanımlama şekliniz, stil adını nasıl eklemeniz gerektiğini belirler. Özel bloklar sayfamızda blok tanımları hakkında daha fazla bilgi bulabilirsiniz. Temanın blockStyles özelliğinde tanımladığınız blok stillerinden birini blokunuza atayacaksınız.

JSON

"style":"logic_blocks"

JavaScript

this.setStyle('logic_blocks');

Temanızı belirleyin

Ayrıca, Blockly'ye hangi temanın kullanılacağını bildirmeniz de gerekir. Aynı blok stilini ve kategori adlarını kullanan birkaç tema tanımlayarak kullanıcının kendisi için en uygun temayı seçmesine ve blok tanımlarını değiştirmek zorunda kalmadan dinamik olarak değiştirmesine izin verebilirsiniz.

İlk tema

Bir başlangıç teması ayarlamanın en iyi yolu, ekleme çağrınıza options.theme öğesini eklemektir. Temayı JSON veya JavaScript'te sağlayabilirsiniz.

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

Seçenekler hakkında daha fazla bilgiyi yapılandırma sayfamızda bulabilirsiniz. Tema sağlanmazsa varsayılan olarak Klasik Tema kullanılır.

Dinamik temalar

Temanızı dinamik olarak değiştirmek istiyorsanız (örneğin, kullanıcıların açılır menüden tema seçmesine izin vermek durumunda) yourWorkspace.setTheme(theme) yöntemini çağırabilirsiniz.

Blok Stilleri Komut Dosyası Oluşturma

Blockly, tonların veya onaltılık değerlerin haritasını alacak ve bunlar için ikincil ve üçüncül renkleri hesaplayacak bir komut dosyası sağlar. Komut dosyasını komut dosyaları/temalar klasöründe bulabilirsiniz.

Yerleşik temalar

Blockly, erişilebilirlik için bir dizi tema, özellikle de bazı renk körlüğü türleri sunar:

Ek bilgiler: