Yerelleştirme

Blockly, ipuçları, içerik menüleri ve bloklardaki metinler gibi bir uygulamadaki metni yerelleştirmek için bir sistem sağlar. Bu sistemi kendi metnini yerelleştirmek için kullanır. Siz de uygulamanıza özgü metni yerelleştirmek için bu sistemi kullanabilirsiniz.

Not: Yerelleştirme, çeviriyle aynıdır. Tek farkı, çevirilerin farklı ülkelerde farklı olmasına izin vermesidir (ör. Portekiz ve Brezilya'da Portekizce için farklı çeviriler).

Yerelleştirme sisteminin işleyiş şekli

Yerelleştirme sistemi, yerelleştirme jetonlarından, yerelleştirme tablolarından ve jetonları yerelleştirilmiş dizelerle değiştirmek için tabloları kullanan işlevlerden oluşur.

Yerelleştirme jetonları

Yerelleştirme jetonu, yerelleştirilmesi gereken metni temsil eden kısa bir dizedir. Örneğin, özel bir tarih bloğundaki ipucu MY_DATE_TOOLTIP jetonunu kullanabilir. Yerelleştirme jetonları, kodda metin yerine kullanılır. Blockly, çalışma zamanında bu jetonları yerelleştirilmiş dizelerle değiştirir.

Yerelleştirme tabloları

Dize tablosu veya mesaj tablosu olarak da bilinen yerelleştirme tablosu, yerelleştirme jetonlarını yerelleştirilmiş dizelerle eşleyen bir nesnedir. Her yerel ayar için farklı bir tabloya ihtiyacınız vardır. Örneğin, İngilizce ve İspanyolcayı desteklemek istiyorsanız İngilizce tablonuz şunları içerebilir:

enTable.MY_DATE_TOOLTIP = 'Enter a date.';

İspanyolca tablonuz şunu içerebilir:

esTable.MY_DATE_TOOLTIP = 'Introduzca una fecha.';

Blockly, kendi metni için yerelleştirme tabloları içerir. Bunlar, Blockly dağıtımında blockly/msg/xx.js adlı dosyalar olarak bulunur. Burada xx yerel ayar kodudur.

Kendi metniniz için yerelleştirme tabloları oluşturmanız gerekir. Çalışma zamanında, seçilen yerel ayar için yerelleştirme tablolarını (Blockly'nin ve sizinki) Blockly'nin dahili olarak kullandığı yerelleştirme tablosu olan Blockly.Msg içine yüklersiniz.

Yerelleştirme sistemini kullanma

Yerelleştirme sistemini kullanmadan önce, kaç yerel dili desteklemek istediğinize ve gelecekte daha fazla yerel dili desteklemeyi planlayıp planlamadığınıza karar vermeniz gerekir.

Yerelleştirme jetonlarını tanımlama ve kullanma

Birden fazla yerel ayarı desteklerken tüm özel metinlerinizde yerelleştirme jetonlarını tanımlamanız ve kullanmanız gerekir.

Yerelleştirme jetonlarını tanımlama

Yerelleştirilmesi gereken her dize için bir jeton tanımlayın. Blockly'nin gelecekte ekleyeceği jetonlarla çakışmayı önlemek için jetonlarınızda özel bir ön ek kullanmak isteyebilirsiniz.

Örneğin, tek bir özel blok ve tek bir özel kategoriniz varsa aşağıdaki jetonları tanımlayabilirsiniz:

MY_DATE_BLOCK_TEXT
MY_DATE_TOOLTIP
MY_DATE_HELPURL
MY_DATE_CATEGORY

Yerelleştirme tablolarını tanımlama

Desteklemek istediğiniz her yerel ayar için bir yerelleştirme tablosu tanımlayın. Örneğin:

// English localization table: my_tokens_en.js
export const myEnTable = {
  MY_DATE_BLOCK_TEXT: 'Date %1',
  MY_DATE_TOOLTIP: 'Enter a date.',
  MY_DATE_HELPURL: 'https://myownpersonaldomain.com/help/en/dateblock'
  MY_DATE_CATEGORY: 'Dates',
}

// Spanish localization table: my_tokens_es.js
export const myEsTable = {
  MY_DATE_BLOCK_TEXT: 'Fecha %1',
  MY_DATE_TOOLTIP: 'Introduzca una fecha.',
  MY_DATE_HELPURL: 'https://myownpersonaldomain.com/help/es/dateblock'
  MY_DATE_CATEGORY: 'Fechas',
}

JSON'da yerelleştirme jetonlarını kullanma

JSON'da yerelleştirme jetonlarını kullanmak için yerelleştirilecek dizeyi jeton referansıyla değiştirin. Jeton referansı %{BKY_TOKEN} biçimindedir. Örneğin:

Blockly.common.defineBlocksWithJsonArray([{
  type: 'my_date',
  message0: '%{BKY_MY_DATE_BLOCK_TEXT}',
  args0: [
    {
      type: 'field_input',
      name: 'DATE',
    }
  ],
  output: 'Date',
  colour: '%{BKY_MY_DATE_COLOUR}',
  tooltip: '%{BKY_MY_DATE_TOOLTIP}',
  helpUrl: '%{BKY_MY_DATE_HELPURL}',
  extensions: ['validate_date'],
}]);

JSON işlenirken (bu durumda, blok oluşturulurken) Blockly, Blockly.Msg içindeki jetonları arar ve bunları yerelleştirilmiş dizelerle değiştirir. Jeton bulunamazsa referans yerinde bırakılır ve bir uyarı gösterilir.

Jeton referanslarının kullanılabileceği yerlerin tam listesi için ek bölümüne bakın.

JSON mesajı kesme

JSON blok tanımındaki message anahtarları, bir bloktaki girişleri ve alanları (etiketler dahil) tanımlar. Bu anahtarlarda jeton referanslarının kullanılması, tek bir blok tanımının birden fazla yerel ayarın kelime dağarcığına, kelime sıralamasına ve yönüne uyum sağlamasına olanak tanır. Örneğin, Blockly'nin lists_repeat bloğu dört farklı dilde aşağıda verilmiştir:

lists_repeat bloğu İngilizce
lists_repeat bloğu İspanyolca
lists_repeat bloğu Korece
Sağdan sola Arapça dilindeki lists_repeat bloğu

Bu blokların tümü aynı blok tanımını paylaşır. Bu tanımın message0 anahtarı şunlardır:

message0: %{BKY_LISTS_REPEAT_TITLE},

Bu jetonun İngilizce yerelleştirme tablosundaki değeri:

Blockly.Msg['LISTS_REPEAT_TITLE'] = 'create list with item %1 repeated %2 times';

Aralıklarla yerleştirme işaretçileri (%1 ve %2), bloğun tanımlanmış girişlerine ve alanlarına karşılık gelir. İşaretçiler arasındaki metin, adlandırılmamış etiket alanlarına dönüştürülür. message0 metni, blok tanımında değil yerelleştirme tablolarında depolandığından JSON'daki tek bir blok tanımı, girişlerin ve alanların farklı sıralamalarını destekleyebilir:

// In Spanish: label, input, label, input, label
Blockly.Msg['LISTS_REPEAT_TITLE'] = "crear lista con el elemento %1 repetido %2 veces";
// In Korean: input, label, input, label, input (dummy)
Blockly.Msg['LISTS_REPEAT_TITLE'] = "%1을 %2번 넣어, 리스트 생성";

Bu, JavaScript'teki blok tanımları için mümkün değildir. Burada, giriş ve alanların farklı sıralanmaları farklı işlev çağrısı sıraları gerektirir.

Sağdan sola yazılan dilleri kullanırken mesaj dizesini görsel sırayla yazın ve Unicode yön komutları eklemeyin:

// In Arabic. Note how %2 is left of %1, since it reads right to left.
Blockly.Msg['LISTS_REPEAT_TITLE'] = "إنشئ قائمة مع العنصر  %1 %2 مرات";

Blockly'nin message anahtarlarını girişlere ve alanlara nasıl dönüştürdüğü hakkında daha fazla bilgi için JSON'da blok yapısını tanımlama başlıklı makaleyi inceleyin.

JavaScript'te yerelleştirme jetonlarını kullanma

JavaScript'te yerelleştirme jetonlarını kullanmak için yerelleştirilecek dizeyi Blockly.Msg['TOKEN'] ile değiştirin. Örneğin:

// Return the text for a localized context menu item.
displayText: () => Blockly.Msg['MY_CONTEXT_MENU_ITEM'];

Blockly, ek bölümünde belirtilmeyen durumlar dışında JavaScript'teki jeton referanslarını ayrıştırmaz:

// Doesn't work. Returns '%{BKY_MY_CONTEXT_MENU_ITEM}'.
displayText: () => '%{BKY_MY_CONTEXT_MENU_ITEM}';

Yerel ayar seçin

Yerel ayar seçimi uygulamaya özeldir ve Blockly'nin kapsamı dışındadır. Örneğin, uygulamanız her zaman aynı yerel ayarı kullanabilir, yerel ayarı URL'den veya URL parametrelerinden belirleyebilir ya da kullanıcıların bir listeden yerel ayar seçmesine izin verebilir.

Genel kural olarak, çalışma alanı oluşturmadan önce bir yerel ayar seçmeniz ve ilgili yerelleştirme tablolarını yüklemeniz gerekir. Bir çalışma alanı oluşturduktan sonra farklı bir yerel ayar seçip yeni tablolar yüklerseniz çalışma alanını yeniden oluşturmanız gerekir: Blockly, mevcut araç kutusunu veya blokları yeni yerel ayarı otomatik olarak kullanacak şekilde güncellemez. Kullanıcının çalışmalarını (varsa) korumak için çalışma alanını yeniden oluşturmadan önce durumu kaydedin ve ardından yeniden yükleyin.

Blockly yerelleştirme tablosu yükleme

Blockly, yerleşik bloklardaki metinler gibi kendi metninin tamamı için yerelleştirme tabloları sağlar. Varsayılan olarak yüklenen en yerel ayarını kullanmıyorsanız yerel ayarınız için Blockly yerelleştirme tablosunu yüklemeniz gerekir.

Blockly'nin yerelleştirme tabloları, xx yerel ayar kodu olan blockly/msg/xx.js adlı dosyalarda depolanır. Desteklenen yerel ayarların listesi için blockly/msg/json içindeki dosyaları inceleyin.

npm ile Blockly yerelleştirme tablosu yükleme

Blockly'yi import * as Blockly from 'blockly'; ile içe aktardığınızda varsayılan modülleri alırsınız: Blockly çekirdeği, Blockly yerleşik blokları, JavaScript oluşturucu ve İngilizce (en) yerel ayarı için Blockly yerelleştirme tablosu.

npm kullanarak farklı bir yerel ayar için Blockly yerelleştirme tablosunu yüklemek üzere:

  1. Blockly varsayılan modüllerini içe aktarma:

    import * as Blockly from 'blockly/core';
    import 'blockly/blocks';
    import 'blockly/javascript'; // Or the generator of your choice
    
  2. Yerel ayarınız için Blockly yerelleştirme tablosunu içe aktarın. Örneğin, İspanyolca (es) yerel ayarı için tabloyu içe aktarmak istiyorsanız:

    import * as Es from 'blockly/msg/es';
    
  3. Tabloyu Blockly.setLocale ile yükleyin. Bu işlev, tabloyu Blockly.Msg nesnesine kopyalar.

    Blockly.setLocale(Es);
    

    setLocale yalnızca Blockly'nin npm sürümüne dahildir.

npm olmadan Blockly yerelleştirme tablosu yükleme

npm kullanmadan bir Blockly yerelleştirme tablosu yüklemek için tabloyu msg dizininden yüklemek üzere <script> etiketi kullanın. Örneğin:

<script src="../../blockly_compressed.js"></script>
<script src="../../blocks_compressed.js"></script>
<script src="../../msg/es.js"></script>

Yerelleştirme tablosu otomatik olarak yüklenir.

Kendi yerelleştirme tablonuzu yükleme

Kendi yerelleştirme tablolarınızı tanımlarsanız seçtiğiniz yerel ayar için tabloyu yüklemeniz gerekir.

  • npm kullanıyorsanız bunu Blockly.setLocale ile yapabilirsiniz:

    import * as Es from 'blockly/msg/es';
    import {myEsTable} from '../my_tokens_es';
    Blockly.setLocale(Es);
    Blockly.setLocale(myEsTable);
    

    setLocale, giriş nesnesinden her anahtar/değer çiftini Blockly.Msg içine kopyalar. Farklı anahtarlarla birden çok kez çağırabilirsiniz ancak aynı anahtarla ikinci kez çağırdığınızda ilk çağrının üzerine yazılır.

  • npm kullanmıyorsanız tablonuzu Blockly.Msg'e manuel olarak kopyalamanız gerekir. (setLocale yalnızca Blockly'nin npm sürümüne dahildir.) Bunu yapmanın en kolay yolu, setLocale için kendi sürümünüzü tanımlamaktır.

    function mySetLocale(locale) {
      Object.keys(locale).forEach(function (k) {
        Blockly.Msg[k] = locale[k];
      }
    }
    
    mySetLocale(myEsTable);
    

Jeton referanslarını çözen işlevler

Blockly, jeton referanslarını çözmek için iki işlev sağlar: Blockly.utils.parsing.replaceMessageReferences (genellikle kullanılır) ve Blockly.utils.parsing.tokenizeInterpolation (nadiren kullanılır). Çoğu durumda bu işlevlerden herhangi birini çağırmanız gerekmez. Bunun nedeni, Blockly'nin token referanslarını desteklediği yerlerde bunları zaten çağırmasıdır. Örneğin, Blockly, JSON blok tanımındaki messageN, tooltip ve helpUrl anahtarlarındaki jeton referanslarını çözmek için bu işlevleri kullanır.

replaceMessageReferences değerini kullanmanız gerekebilecek yerlerden biri özel alanlardır. Özel alanınız, seçeneklerinden herhangi birinde jeton referanslarını kabul ediyorsa bunları çözmek için replaceMessageReferences simgesini kullanın. Daha fazla bilgi için JSON ve kayıt başlıklı makaleyi inceleyin.

  • Sağdan sola doğru yazılan diller: RTL demosuna bakın.
  • Blockly'nin metnini yerelleştirmeye yardımcı olun: Blockly'ye katkıda bulunmayla ilgili bölümde Çeviri'ye bakın.

Ek: Jeton referanslarına izin verilen yerler

Aşağıdaki JSON anahtarlarında jeton referansları kullanabilirsiniz:

  • Kategori araç kutusu tanımlarında:
    • name
    • colour
  • Blok tanımlarında:
    • messageN
    • tooltip
    • helpUrl
    • colour
  • Tüm alanlara iletilen seçeneklerde:
    • tooltip
  • field_dropdown içinde options'ye iletilen iç içe yerleştirilmiş dizilerde:
    • İlk öğe bir dize olduğunda ilk öğe
    • İlk öğe bir resmi tanımlayan bir nesne olduğunda alt değerini
  • field_variable parametresine iletilen seçeneklerde:
    • variable
  • field_label ve field_label_serializable'a iletilen seçeneklerde:
    • text
  • field_image parametresine iletilen seçeneklerde:
    • height
    • width
    • src
    • alt
  • Temalarda:
    • colour kategori stillerinde
    • Blok stillerinde colourPrimary, colourSecondary ve colourTertiary

Ayrıca aşağıdaki yöntemlerde bağımsız değişken değerleri olarak:

  • Block.setColour
  • Blockly.utils.extensions.buildTooltipForDropDown
  • Blockly.utils.extensions.buildTooltipWithFieldText
  • Blockly.utils.parsing.parseBlockColour

Araç kutusunun XML tanımında, <category> aşağıdaki özelliklerinde:

  • name
  • colour

Renk değeri olarak jeton referansları kullanma hakkında daha fazla bilgi için Renk referansları bölümüne bakın.