Windows Phone 7.1 Localization
18.11.2011 15:42:44 | Okunma Sayisi : 10668 | Yorum Sayisi : 1
İngilizce - Almanca
Bu uygulamada Windows Phone uygulamasında localization (yerelleştirme) nasıl yapılacağını inceleyeceğiz. Uygulamamız içerisindeki kontrollerin text' lerinin, telefonun bölge ve dil ayarına göre otomatik olarak değişmesini sağlamış olacağız.
Visual Studio 2010 ile yeni bir Windows Phone Application açalım. Örnek olarak wp_lokalizasyon ismini verdim.
Projeye sağ tıklayıp Add altından New Item seçelim ve gelen pencereden Resource File ekleyelim. Bu dosyaya isim olarak AppResource.resx verelim. Bu dosya uygulamanın varsayılan dili için kullanılacak.
Add Resource File
Eklediğimiz bu resource file' ı açalım ve içerisini aşağıdaki resimdeki gibi düzenleyelim.
Edit Resource File (Varsayılan)
İlk satıra Name için Baslik, Value için I love WP7 girelim, ikinci satıra Name için OrtaYazi ve Value için This is my first application girelim ve sağ üst köşedeki comboBox içerisinden Access Modifier olarak Public seçelim (Dilerseniz değerleri Türkçe girebilirsiniz).
Örnek olarak iki string girdim. Yerelleşmesini istediğiniz string' lerin tamamını alt alta girebilirsiniz. Yalnız dikkat etmeniz gereken, her bir Value (değer) için unique (benzersiz) bir Name (isim) girmeniz gerekir.
Projeye bir tane daha Resource File eklememiz gerekiyor. Bunun yerine az önce ekleyip düzenlediğimiz (AppResource.resx) dosyayı kopyalayıp yapıştırabiliriz.. Solution Explorer' da bu AppResource.resx dosyasına sağ tıklayıp, Copy seçelim ve Projeye sağ tıklayıp Paste seçelim. Copy of AppResources.resx isminde bir dosya kopyalanacak. Bu dosyanın ismini hangi dil için localization yapmak istiyorsanız o dilin culture' ına (kültür) göre isimlendirmelisiniz (Culture kodları). Bu örnekte ben Almanca için yapacağım bu yüzden az önce kopyaladığımız Copy of AppResources.resx isimli dosyanın ismini AppResources.de-DE.resx olarak değiştirelim. AppResources.de-DE.resx dosyasını açalım ve içerisindeki Value' ların Almanca karşılıklarını yazalım. Name' ler aynı kalmalı.
İlk satırda I love WP7 yerine Ich liebe WP7 girelim, ikinci satırda This is my first application yerine dies ist meine erste Anwendung girelim ve yine Access Modifier için Public seçelim.
Edit Resource File (Almanca)
Bu şekilde farklı dil seçenekleri için farklı Resource File' lar oluşturup, her bir Resource File' a culture kodu ile isim vererek, içerisinde değişmesini istediğimiz kelimelerin / cümlelerin o dildeki karşılıklarını yazabilirsiniz. Eklediğimiz her bir Resource File' ın Access Modifier' ını Public yapmalısınız.
Ardından uygulamamızın desteklediği ilave culture / dilleri tanımlamak için Project File' ı (proje dosyası) düzenlememiz gerekir. Bunun için projeyi build edelim (CTRL Shift B) ardından Solution Explorer' da projeye sağ tıklayıp Unload Project seçelim.
Unload Project
Solution Explorer içerisinde, projemiz gri bir görünüm alacak.
gri renkte görünen projeye sağ tıklayıp, Edit wp_lokalizasyon.csproj seçelim
Edit Project (.csproj)
Proje dosyası (bir xml dökümanı) açılacak. Bu dökümanda ilk PropertyGroup tag' i (sekme) içerisinde SupportedCultures isminde bir tag bulunmaktadır ve içerisi boş durumdadır. Bu satırı aşağıdaki gibi düzenleyelim.
<SupportedCultures>de-DE;</SupportedCultures>
Varsayılan culture için herhangi birşey eklemiyoruz. İlave culture' ları buraya eklememiz gerekir. Eğer projeye daha fazla Resource File eklediysek, her birinin culture kodunu noktalı virgüller ile ayırarak yanyana girmeliyiz.
Örnek :
<SupportedCultures>de-DE;fr-FR;es-ES</SupportedCultures>
Bu dosyayı kaydettikten (CTRL S) sonra kapatalım. Solution Explorer' ı tekrar açıp, projeye tekrar sağ tıklayıp Reload Project seçelim.
Reload Project
Proje, Solution Explorer içerisine tekrar yüklenecektir.
Proje içerisine yeni bir Class ekleyelim (Projeye sağ tıklayıp, Add --> Class seçelim). Class' a isim olarak YerelIfadeler verdim. (Yerel İfadeler, l harfi ile büyük ı harfi yanyana karışık göründü sanırım).
Bu class' ı aşağıdaki gibi düzenleyelim.
namespace wp_lokalizasyon { public class YerelIfadeler { public YerelIfadeler() { } private static AppResources yerelKaynaklar = new AppResources(); public AppResources AppResources { get { return yerelKaynaklar; } } } }
Ardından App.xaml dosyasını açalım ve aşağıdaki gibi düzenleyelim.
<Application.Resources> <local:YerelIfadeler xmlns:local="clr-namespace:wp_lokalizasyon" x:Key="YerelIfadeler" /> </Application.Resources>
Eğer bu satırda hata aldıysanız, proje isminizi ve class isminizi kontrol ediniz. Projeye isim olarak wp_lokalizasyon verdiğim için burada bu şekilde yazdım. Projeye farklı bir isim verdiyseniz, kendi proje isminizi (namespace) yazmanız gerekir aynısı class ismi için de geçerlidir.
Son adıma geldik. Uygulamanın ekran görünümünü tasarlayacağız.
Resource File' lar içerisine 2 adet Value eklemiştik. Bunlardan birini uygulamanın Başlık kısmında görüntüleyeceğiz, diğeri içinse uygulamaya yeni bir TextBlock ekleyeceğiz. Uygulamaya yeni bir TextBlock ekleyelim. Bu TextBlock' un Text' ine, Resouce File' daki Value' yu çekeceğiz. TextBlock ekledikten sonra aşağıdaki gibi düzenleyelim.
<TextBlock Name="textBlock1" Text="{Binding Path=AppResources.OrtaYazi, Source={StaticResource YerelIfadeler}}" />
Bu TextBlock' un Text özelliğine Binding (Veri Bağlama) yaparak, AppResources içerisinden OrtaYazi' nin Value' sunu eşitledik. Yani This is my first application yazacak.
Diğer Value' yu (I love WP7) Page Title isimli projeye varsayılan olarak gelen TextBlock' un Text' ine çekeceğiz. Page Title isimli TextBlock' u aşağıdaki gibi düzenleyelim.
<TextBlock x:Name="PageTitle" Style="{StaticResource PhoneTextTitle1Style}" Text="{Binding Path=AppResources.Baslik, Source={StaticResource YerelIfadeler}}" />
Uygulamamız hazır. Test edebiliriz.
Uygulamayı çalıştıralım (F5).
Emulator açılacak ve aşağıdaki gibi bir görüntü gelecektir. AppResource.resx isimli varsayılan resource' daki Value' lar çekilip, TextBlock' lara yazılacak.
İngilizce
Resimde de göründüğü gibi I Love WP7 ve This is my first application yazıları varsayılan Resource File (AppResource.resx) içerisinden çekildi.
Telefonun bölge / dil ayalarından dil olarak Almanca seçtikten sonra, diğer Resource File (AppResources.de-De.resx) içerisinden değerler çekilecek.
Telefonun dil ayarını değiştirmek için aşağıdaki adımları izleyebilirsiniz.
-
Emulator' un Back tuşuna basın
Back
-
Ardından ana ekranda sağ üst köşedeki sağ ok' a basın
Next
-
Gelen ekranda Settings' e basın
Settings
-
Gelen menude region + language' a basın
Region + Language
-
Gelen ekranda Display language' un altındaki TextBox' a basın
Display Language
-
Gelen menude Deutsch seçin
Deutsch
-
Gelen ekranda Tap here to accept changes and restart your phone yazısına tıklayın.
Accept Changes
- Emulator yeniden başlayacak. Dikkat ederseniz emulator yeniden açıldıktan sonra Settings yerine Einstellungen yazacak.
-
Gelen ekranda wp_lokalizasyon' u seçelim (Uygulamamızı açıyoruz)
wp_lokalizasyon
Uygulamamız tekrar açıldı ve içerisindeki yazılar AppResources.de-De.resx içerisinden çekildi yani Almanca olarak geldi.
Almanca
Örnek uygulamanın kaynak kodlarını buradan indirebilirsiniz.
1 Yorum