Temalar

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

Tema Özellikleri

Tema, çeşitli özelliklere sahip bir nesnedir: genişletilecek 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 Stili

Blok stili dört alandan oluşur:

  • colourPrimary (zorunlu) - Bloğun arka plan rengi.
  • colourSecondary (isteğe bağlı): Gölge bloğuysa 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 bir bloğa şapka ekler. Şapkalar hakkında daha fazla bilgi edinin.

Birincil, ikincil ve üçüncül rengi gösteren oklarla blok

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

Bir tema, blok stili nesnesini engellemek 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

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

  • Renk (gerekli) - Araç kutusundaki kategorinin rengi. Genellikle bu renkler, kategorideki çoğu blokta colourPrimary ile aynı olmalıdır. Bu sayede kullanıcılar, hangi blokların belirli bir kategoriye ait olduğunu kolayca anlayabilir.

Farklı kategori renklerinin gösterildiği araç kutusunun ekran görüntüsü

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

Tema, kategori adının kategori stili nesnesi ile eşlemesini içerir:

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

Bileşen stilleri

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

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

Diğer çoğu bileşen, CSS'nizdeki tema adı kullanılarak değiştirilebilir. Ancak, bu listede yer almayan ve CSS kullanılarak değiştirilemeyen bir bileşeni değiştirmek istiyorsanız lütfen daha fazla bilgi içeren bir sorun kaydı oluşturun.

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

Yazı Tipi Stilleri

Yazı tipi stili, bir yazı tipinin ailesini, ağırlığını ve boyutunu içeren bir nesnedir.

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

Start Şapkaları

startHats: true değerini doğrudan bir tema nesnesinde ayarlarsanız önceki veya çıkış bağlantısı olmayan tüm bloklara bir şapka eklenir. Tam olarak hangi blokların şapka alacağına dair daha fazla kontrole sahip olmak istiyorsanız bunun yerine blok stili ö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ı ekleme
  3. Çalışma alanında temanızı ayarlama

Tema oluşturma

Tema, kurucu kullanılarak veya defineTheme kullanılarak oluşturulabilir. defineTheme kullanmak, önceden var olan bir temayı genişletmeyi ve tüm değerleri tek bir nesneyle ayarlamayı kolaylaştırır. Bir temanın adı vardır ve yukarıda açıklanan blok stilleri, kategori stilleri ve diğer özelliklere sahip bir nesnedir.

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

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

defineTheme kullanan bir örnek aşağıda verilmiştir.

Stil adları ekleyin

Bir tema oluşturduğumuza göre, stillerin adını blok ve kategori tanımlarına eklememiz gerekiyor.

Kategoriler

Araç kutunuzu nasıl tanımladığınız, stil adını nasıl eklemeniz gerektiğini belirler. Daha fazla bilgi için araç kutusu sayfasına bakın.

Bloklar

Stil adını nasıl eklemeniz gerektiği, bloğunuzu nasıl tanımladığınıza bağlıdır. Özel bloklar sayfamızda blok tanımları hakkında daha fazla bilgi edinebilirsiniz. Temanın blockStyles özelliğinde tanımladığınız engelleme stillerinden birini engellemenize atarsınız.

JSON

"style":"logic_blocks"

JavaScript

this.setStyle('logic_blocks');

Temanızı ayarlama

Ayrıca Blockly'ye hangi temayı kullanacağını da belirtmeniz 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

İlk temayı ayarlamanın en iyi yolu, options.theme öğesini ekleme çağrınıza dahil etmektir. Temayı JSON veya JavaScript biçiminde 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 belirtilmezse 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 veriyorsanız) yourWorkspace.setTheme(theme) işlevini çağırabilirsiniz.

Blok Stili Komut Dosyası Oluşturma

Blockly, tonlar veya onaltılık değerlerden oluşan bir harita alıp bunlar için ikincil ve üçüncül renkleri hesaplayan bir komut dosyası sağlar. Komut dosyasını komut dosyaları/temalar klasöründe bulabilirsiniz.

Yerleşik temalar

Blockly, özellikle de belirli renk körlüğü türleri olmak üzere erişilebilirlikle ilgili bir dizi tema sunar:

Ayrıca: