1. Language Selector Elementine Genel Bakış

Language Selector elementi, kullanıcıların uygulama arayüzünde tercih ettikleri dili seçmelerini sağlayan özel bir seçim elementidir. Çok dilli uygulamalarda kullanıcı deneyimini kişiselleştirmek ve içeriği farklı dil seçenekleriyle sunmak için kullanılır.

Language Selector elementi yalnızca web uygulamalarında desteklenmektedir.

1.1. Sık Kullanım Senaryoları

• Çok dilli web uygulamaları
• Uluslararası kullanıcı kitlesine sahip platformlar
• Yönetim panellerinde dil değiştirme seçenekleri
• Kullanıcı profiline bağlı dil tercihleri

2. Temel Özellikler

• Çoklu dil desteği: Uygulamada tanımlı olan diller arasından seçim yapılmasını sağlar.
• Anlık dil değişimi: Kullanıcı dil seçimi yaptığında arayüz dili anında güncellenebilir.
• Kullanıcı tercihine dayalı yapı: Seçilen dil, kullanıcı profiline veya state’e kaydedilerek kalıcı hale getirilebilir.

3. Language Selector Elementi Nasıl Kullanılır? 

Bu bölümde Language Selector elementinin uçtan uca kullanımını örnek senaryo üzerinden ele alacağız.

Senaryo: Dil Seçimi

Kullanıcı, uygulama arayüzünü kendi tercih ettiği dilde kullanabilmek için Language Selector elementini kullanır. UI Design bölümünde tanımlanmış olan diller bu element içerisinde liste halinde gösterilir.

Kullanıcı Language Selector üzerinden bir dil seçtiğinde, uygulamanın arayüz metinleri seçilen dile göre güncellenir. Böylece kullanıcı uygulamayı kendi tercih ettiği dilde görüntüleyebilir ve daha kolay bir kullanım deneyimi elde eder.

Senaryoda:

• Uygulama içerisinde yer alan sayfa üzerindeki Label elementinde varsayılan olarak İngilizce bir metin bulunur. UI Design bölümünde tanımlı olan dil yönetimi sayesinde bu metnin Türkçe karşılığı çeviri alanına eklenir.
• Uygulama test edilirken kullanıcı Language Selector elementi üzerinden dili değiştirdiğinde, sayfa üzerindeki Label içerisinde yer alan metin seçilen dile göre otomatik olarak güncellenir. Örneğin dil İngilizce seçildiğinde metin İngilizce olarak görüntülenirken, dil Türkçe seçildiğinde aynı metnin Türkçe çevirisi gösterilir.
• Bu senaryo ile uygulama içerisindeki metinlerin farklı diller için nasıl tanımlanabileceği ve dil değiştirildiğinde arayüzdeki yazıların dinamik olarak nasıl güncellendiği gösterilmiş olur.

Adım 1 - Language Selector Elementini Ekleme ve Metin Çevirilerini Tanımlama

Başlangıçta anasayfada: 

• Sayfaya Elements > Select Input > LanguageSelector elementini sürükleyip bırakın.
  

• Language Selector elementinin altına, çevrilecek metni görüntülemek için Elements > Display > Label elementini sürükleyip bırakın.
• Çevirilicek yazıyı Label > Properties > Value > “You can choose the language you want to use in the application. When a language is selected, all interface texts are updated according to the selected language.” ayarlayın.
  

• Sol yan paneldeki Languages alanında “Turkish” dil seçeneğini ekleyin.
  

• Turkish dili seçeneğinde Translate alanına tıklayın.

• Açılan ekranda ilgili sayfa için yazılı metnin Türkçe karşılığını (“Uygulamayı kullanmak istediğiniz dili seçebilirsiniz. Dil seçimi yapıldığında arayüzdeki tüm metinler seçilen dile göre güncellenir.”) ekleyin ve kaydedin.
  

Preview:

Bu örnekte kullanıcıların uygulama arayüzünü tercih ettikleri dilde görüntüleyebilmeleri için Language Selector elementi kullanılır. Öncelikle UI Design bölümündeki Languages alanında varsayılan olarak bulunan English diline ek olarak Turkish dili tanımlanır. Daha sonra ilgili sayfada yer alan İngilizce metinlerin Türkçe karşılıkları, Turkish dili altında sayfa bazlı çeviri olarak eklenir.

Sayfa üzerinde bulunan Label elementinde varsayılan olarak İngilizce bir metin yer almaktadır. Bu metnin Türkçe çevirisi, Turkish dili içerisinde ilgili sayfa için tanımlandıktan sonra uygulama çalıştırıldığında Language Selector üzerinden yapılan dil seçimine göre metin otomatik olarak güncellenir.

Kullanıcı dili Turkish olarak seçtiğinde Label içerisindeki metin Türkçe olarak görüntülenir, dil English olarak seçildiğinde ise metin İngilizce haliyle gösterilir. Bu yapı sayesinde uygulama içerisinde çoklu dil desteği sağlanır ve arayüz metinleri seçilen dile göre dinamik olarak güncellenir.

4. Ortak Özellikler (Properties)

Language Selector elementi üzerinde yer alan bazı alanlar tüm UI elementlerinde ortak olarak kullanılır. Bu nedenle, aşağıdaki özelliklerin detaylı açıklamaları ilgili genel kılavuz sayfalarında yer almaktadır:

• Authorization (Yetkilendirme) Ayarları
• Visibility (Görünürlük)
• Editability (Düzenlenebilirlik)
• Style Panel (Stil Ayarları)

5. Kullanım Tavsiyeleri (Best Practices)

• Dil seçeneklerini sınırlı ve anlamlı tutun. Uygulamanın gerçekten desteklediği diller sunulmalı, eksik veya yarım çevirisi olan diller listelenmemelidir.
• Varsayılan dili doğru belirleyin. Kullanıcının lokasyonuna veya tarayıcı diline göre varsayılan dil ataması yapılması önerilir.
• Dil değişimini kullanıcıya net şekilde yansıtın. Seçim sonrası arayüzün anında güncellenmesi, yapılan işlemin algılanmasını kolaylaştırır.
• Dil tercihini kalıcı hale getirin. Kullanıcının seçtiği dil state, profil veya storage üzerinden saklanarak sonraki oturumlarda da korunmalıdır.
• Dil seçimini erişilebilir bir konuma yerleştirin. Header, footer veya ayarlar ekranı gibi kolay erişilebilir alanlar tercih edilmelidir.
• Dil adlarını hedef dilde gösterin. “English”, “Türkçe”, “Deutsch” gibi gösterimler, kullanıcıların kendi dillerini daha kolay bulmasını sağlar.

6. Kısıtlamalar

• Language Selector elementi yalnızca web uygulamalarında desteklenir.
• Element, yalnızca dil seçimini sağlar; çeviri içeriklerinin yönetimi ve lokalizasyon mantığı uygulama yapılandırmasına bağlıdır.