تصميم موقع متعدد اللغات MultiLingual WebSite

 عند دخولك للكثير من المواقع العالمية تجدها توفر لك خيار تصفح الموقع بعدة لغات
فما هي الطريقة المستخدمة لتصميم موقع متعد للغات.

في هذه المقالة سأذكر الخطوات الإساسية لتصميم موقع متعدد اللغات و في المثال الذي سأشرحه سنضيف اللغة العربية و اللإنجليزية.

قم بفتح برنامج  Micrsoft Visual Stdio قم بإنشاء موقع جديد بالضغط على Shift+Alt+N  بعد إنشأه
الآن قم بإضافة ملف class  عن طريق الضغط على Ctrrl+Shift+A  و إختر Class  وسميه BasePage
ستظهر لك رسالة تنبهك إلا انه سيتم إضافته في مجلد App_Code وفق
 ثم قم بإستدعاء المكتبات التالية:

Imports System.Threading
Imports System.Globalization

و أضف الكود التالي :

Protected Overloads Sub InitializeCulture()
Thread.CurrentThread.CurrentUICulture =New CultureInfo(Sessio("MyCulture").ToString)
Thread.CurrentThread.CurrentCulture =CultureInfo.CreateSpecificCulture(Session("MyCulture").ToString)
End Sub

بعدها إذهب إلى ملف Global.asax و أضف في Session_Start الكود التالي:

If Not Request.Cookies("yourCookie") Is Nothing Then

Session("MyCulture") = Server.HtmlEncode(Request.Cookies("yourCookie")("languagePref"))

Else

Session("MyCulture") = "en"

Dim aCookie As New HttpCookie("yourCookie")

aCookie.Values("languagePref") = Session("MyCulture")

aCookie.Expires = System.DateTime.Now.AddDays(21)

Response.Cookies.Add(aCookie)

End If

احفظ التغير و بعدها أضف ملف  ماستر بيج  Master Page و أضف  أضف زران Button لتغيراللغة أحدهما للعربية و الأخرى للإنجلزية
إضغط على Button  الأول و أكتب الكود التالي:

If Not Session( "MyCulture" ) = "ar" Then

Session( "MyCulture" ) = "ar"

Dim aCookie As New HttpCookie( "yourCookie" )

aCookie.Values( "languagePref" ) = Session( "MyCulture" )

aCookie.Expires = System.DateTime.Now.AddDays(21)

Response.Cookies.Add(aCookie)

End If

Response.Redirect(Request.Url.ToString)

وفي الزر الآخر إنسخ نفس الكود السابق فقط غير ar إلى en

If Not Session( "MyCulture" ) = "en" Then

Session( "MyCulture" ) = "en"

Dim aCookie As New HttpCookie( "yourCookie" )

aCookie.Values( "languagePref" ) = Session( "MyCulture" )

aCookie.Expires = System.DateTime.Now.AddDays(21)

Response.Cookies.Add(aCookie)

End If

Response.Redirect(Request.Url.ToString)

و انت في صفحة Master Page إذهب لوضع Design و إذهب إلى Body وإضف الخاصية التالية

سنستفيد من هذه الخاصية لاحقاً في تغير إتجاه الصفحة من اليمين لليسار ومن اليسار لليمين
قم الآن بإضافة صفحة  جديدة و فعل الخيار كما في الصورة التالي: select MasterPage 

إضغط على الصورة لتراها بشكل أوضح.
 

بعدها إضغط على موافق و إختر صفحة Master Page التي إضفنا لها الكود السابق .

بعدها قم بفتح الصفحة التي أضفنها في وضع محرر الكود
 و إستبدل  Inherits System.Web.UI.Page ب Inherits BasePage
قم بإضافة بعض الإدوات للصفحة  Labale,Button ,Calander ,TextBox ,Image
إذهب إلى حدث Load Page  وضع القيمة التالية لل TextBox

 TextBox1.Text = FormatCurrency(23000)

حتى هذه الخطوة نكون قد أعددنا الموقع ليكون متعدد اللغات .

إذهب لصفحة master Page  وإنت في وضع Design إذهب إلى قائمة  Tool  و إختر الخيار Generat Local Resource
سيتم إنشاء ملف resx
قم بنسخ نفس الملف وإلصقه في نفس المجلد و إعد تسميته و إضف ar للدلالة على اللغة العربية كما في الصورة التالية

و هنا طريقة إختيار اللغة تكون كتالي (المنطقة , اللغة)  أو فقط اللغة  مثلاً ar.sa او ar أو fr للفرنسية أو  fr-CA للغة الفرنسية في كندا و هكذا على باقي اللغات

وكما ترى في الصورة قمت بإعادة التسمية للعربية و أبقيت الملف الأولى الإنجلزية كما هو بدون تسمية .

عند فتح الملف سيكون بشكل التالي إضغط على الصورة لتراها بشكل أوضح

عندما تقو م بإنشاء هذا الملف يتم إعطاء إسم لكل كنترول كمفتاح تستطيع تغير عن طريقه خصائص الكنترول

 كما ترى في لصورة Name  يكون فيه المفتاح الخاص بالكنترول مع الخاصية المطلوبة و Value  قيمة هذه الخاصية.

 و كما تذكر قمنا سابقاً بإضافة مفتاح لل body لتغير الإتجاه

 و ما يجعل هذه الخاصية تعمل في أدوات Html  هي إضافة  خاصية runat="Server"

قم الآن بإضافة body.DIR  لل ملف و ضع القيمة المقابلة LTR

وقم بتغير القيمة لأدوات الآخرى إذا كنت قد أضفت لصفحة الماستر بيج أدوات أخرى و هنا في مثالي أضفنا زرين لتغير اللغة

قم بتغير القيمة المقابلة لخاصية text

 

و قم بتكرار نفس الخطوات في ملف الخاص بلغة العربية ولا تنسى إضافة body.DIR لل ملف و ضع القيمة المقابلة RTL

بعد الإنتهاء من الماستر بيج إذهب الآن للصفحة التي أضفناها و أعمل نفس الخطوات لإضافة ملف اللغة
و غير القيم للأدوات في كل من الملف العربي و الإنجليزي.

الآن و بعد الإنتهاء قم بتشغيل الموقع  وستكون انتيجة كتالي
لترى الصورة بشكل أوضح إضغط على الصورة

لاحظ كيف يتغير كل من التقويم و العملة بحسب تغير الللغة.

الان بفرض بعد ان أضفنا ملفات اللغة و قمنا بإضافة أداة أخرى للصفحة ماذا يجب أن نفعل؟
السبب في هذه السؤال هو إن عند إضافة ملف اللغة سيضيف المفتاح الخاص بكل أداة للأدوات الموجودة فقط اما الأدوات التي نضيفها لاحقأ نحتاج لأن نضيف هذه الخاصية بشكل يدوي.
الطريقة:
أشر على الداة التي قمت بإضافتها في وضع design  ثم أختر وضع Source  و أضف الخاصية التالية

meta : resourcekey="btn"

ثم إذهب و أضفها لملفات اللغة مع الخاصية التي تريد و مع القيمة المقابلة.

ماذا لو كان لدينا نص يتكرر في أكثر من صقحة مثلاً كلمة موافق تتكرر في صفحات كثيرة ألا يمكن عمل مفتاح لهم جميعاً موحد؟
الجواب نعم يمكن ذلك اتبع الخطوات التالية:
 من قائمة website أختر Add Asp.net Fplder و أختر App_GlobalResources
ثم من ADD New Item  أختر Resurce file  و لتسميه مثلاً GlobeR.resx أنسخه وأضف ملف اللغة العربية المقابل له GlobeR.ar.resx
أفتح الملف و اضف مفتاح و ليكن BtnOk   من دون أي خاصية و القيمة المقابلة OK و في ملف اللغة العربية اضف نفس المفتاح و مقابلة موافق
الآن أذهب للأداة التي تريد إستخدام هذا المفتاح العام معها و من نافذة الخصائص اختر Expressions و من النافذة التي تظهر اختر Text ومن القائمة المسدلة Expression Type  أختر Resources   أكتب في Class Key  اسم الملف GlobeR و ResourceKey  أختر من القائمة المسدلة المفتاح BtnOk

و بهذا نكون قد أنتهينا و كل الأدوات التي لها المفتاح GlobeR  ستكون لها القيمة تكست المقابلة في العربي موافق و في الإنجليزي Ok
 لو مثلاً أردنا لكل هذه الأدوات أن يتغير لون الخط للون معين بنفس الطريقة أذهب للملف اللغة و أضف المفتاح و القيمة المقابلة له و من نفس نافذة  Expressions اختر FontColor وهكذا لبقية الخصائص.

بالنسبة ل Site map :
أولاً قم بإضافة الخاصية

enableLocalization="true"

في نود siteMap

أما في siteMapNode أضف الخاصية resourceKey و إسم المفتاح المقابل لها مثلاً هنا home

 resourceKey="home"

 بعد الإنتها من إعداد siteMap إذهب لمجلد App_GlobalResources و أضف ملف Resurce و سميه بإسم siteMap و إعمل نسخة منه للغة العربية

الآن أستخدم المفتاح كتالي: في name أضف home.title و في المقابل الخاصية المقابلة له و أضف home.description

و القيمة المقابلة لها و هكذا لبقية الخصائص.

مثال حي  انقر هنا

و بهذا نكون قد إنتهينا من تصميم موقع متعدد اللغات

مرفقات:

مثال تطبقي يتضمن كل ما تم شرحه حمله من هنا