升訊威在線客服系統客服端英文界面的技術實現方法,客戶落地巴西聖保羅

我在業餘時間開發維護了一款免費開源的升訊威在線客服系統,也收穫了許多用戶。對我來說,只要能獲得用戶的認可,就是我最大的動力。

最近收到來自巴西客戶的需求,希望爲客服端增加英文界面。

好,那就滿足這個需求吧!本文重點從技術角度介紹了客服端多國語言界面的實現方法。

在線客服客服端,支持中英文雙語界面:


在線客服訪客端,支持中文、英文、日文、韓文、葡文、印尼文、土耳其文、俄文等:


免費在線使用 & 免費私有化部署:https://kf.shengxunwei.com


視頻實拍:演示升訊威在線客服系統在網絡中斷,直接禁用網卡,拔掉網線的情況下,也不丟消息,不出異常。
https://blog.shengxunwei.com/Home/Post/fe432a51-337c-4558-b9e8-347b58cbcd53


WPF 多語言界面實現方案

對 WPF 應用程序進行本地化時,有多種選擇。 例如,可以將應用程序中的可本地化資源綁定到 XML 文件,在 resx 表中存儲可本地化文本,或者讓本地化人員使用 Extensible Application Markup Language (XAML) 文件。 本部分介紹使用 XAML 的 BAML 形式的本地化工作流,這種工作流提供以下幾個好處:

  • 可以在生成之後進行本地化。

  • 可以從較舊版本 XAML 的 BAML 形式更新到本地化的較新版本 XAML 的 BAML 形式,以便在開發的同時進行本地化。

  • 因爲 XAML 的 BAML 形式是 XAML 的已編譯形式,所以可以在編譯時驗證原始源元素和語義。

本地化生成過程

開發 WPF 應用程序時,本地化的生成過程如下:

  • 開發人員創建 WPF 應用程序並將其全球化。 在項目文件中,開發人員設置 en-US,以便在編譯應用程序時生成一箇中性語言的主程序集。 此程序集具有一個附屬 .resources.dll 文件,其中包含所有可本地化的資源。 因爲本地化 API 支持從主程序集進行提取,所以可選擇在主程序集中保留源語言。

  • 將文件編譯到生成中時,會將 XAML 轉換爲 XAML 的 BAML 形式。 將向說英語的客戶發佈非特定區域性的 MyDialog.exe 和區域性相關的(英語)MyDialog.resources.dll 文件。

本地化工作流

本地化過程在生成未本地化的 MyDialog.resources.dll 文件之後開始。 使用 System.Windows.Markup.Localizer 下的 API 將原始 XAML 中的 UI 元素和屬性從 XAML 的 BAML 形式提取爲鍵值對。 本地化人員使用鍵/值對來對應用程序進行本地化。 在本地化完成之後,可以從新值生成一個新的 .resource.dll。

鍵值對的鍵是在本地化人員開始進行本地化之後,開發人員放置在原始 UI 中的 x:Uid 值,你可以將開發更改與已完成的本地化工作進行合併,使損失的翻譯工作降至最少。

下圖顯示了一個基於 XAML 的 BAML 形式的典型本地化工作流。 此關係圖假設開發人員用英語編寫應用程序。 開發人員創建 WPF 應用程序並將其全球化。 在項目文件中,開發人員設置 en-US,以便在生成時會生成一箇中性語言的主程序集,該程序集具有一個包含所有可本地化資源的附屬 .resources.dll。 或者,因爲 WPF 本地化 API 支持從主程序集進行提取,所以還可以保留主程序集中的源語言。 生成過程結束之後,XAML 會編譯爲 BAML。 將向說英語的客戶提供非特定區域性的 MyDialog.exe.resources.dll。

自動佈局

在 Window1.xaml 中:

以前的 Window 屬性會根據內容大小自動調整窗口大小。 此屬性可以防止窗口切斷在本地化之後大小增加的內容;它還可以在內容由於本地化而大小減小時刪除不必要的空格。

<Grid x:Uid="Grid_1">

爲了使 WPF 本地化 API 正確運行,需要使用 Uid 屬性。

它們由具有較舊的 UI 本地化的 UI 使用。 通過在命令行界面中運行 msbuild -t:updateuid RunDialog.csproj,可以添加 Uid 屬性。 因爲手動添加 Uid 屬性通常比較費時並且準確性較差,所以建議使用此方法來添加這些屬性。 可以通過運行 msbuild -t:checkuid RunDialog.csproj 來檢查是否正確設置了 Uid 屬性。

使用 Grid 控件可以構造 UI,這是一個有用的控件,它可以利用位於每個單元格中的 UI 元素中的自動佈局,適應本地化過程中大小的增加和減小。

<Grid.ColumnDefinitions>
  <ColumnDefinition x:Uid="ColumnDefinition_1" />
  <ColumnDefinition x:Uid="ColumnDefinition_2" />

放置 Open: 標籤和 ComboBox 的前兩列佔據 UI 總寬度的 10%。

<ColumnDefinition x:Uid="ColumnDefinition_3" SharedSizeGroup="Buttons" />
  <ColumnDefinition x:Uid="ColumnDefinition_4" SharedSizeGroup="Buttons" />
  <ColumnDefinition x:Uid="ColumnDefinition_5" SharedSizeGroup="Buttons" />
</Grid.ColumnDefinitions>

使用 Grid 的共享調整大小功能。 最後三列通過將自身放置在相同的 SharedSizeGroup 中利用此功能。 正如屬性名稱所示,此屬性允許不同的列採用相同大小。 因此,在將“Browse…”本地化爲更長的字符串“Durchsuchen…”時,所有按鈕的寬度都會增加,而不是顯示一個小的“OK”按鈕和一個大得不相稱的“Durchsuchen…”按鈕。

放置在 UI 根元素中的 XAML 中的 xml:lang 處理。 此屬性描述給定元素及其子元素的區域性。 WPF 中的多項功能都使用此值,在本地化過程中應對此值進行相應的更改。 此值會更改在斷字以及對字詞進行拼寫檢查時所使用的字典。 它還會影響數字的顯示以及字體回退系統選擇所用字體的方式。 最後,該屬性會影響數值的顯示方式,形成在複雜腳本中編寫文本的方式。 默認值爲“en-US”。

此時多語言設置基本完成,剩下的就是翻譯工作了。


免費在線使用 & 免費私有化部署:https://kf.shengxunwei.com


視頻實拍:演示升訊威在線客服系統在網絡中斷,直接禁用網卡,拔掉網線的情況下,也不丟消息,不出異常。
https://blog.shengxunwei.com/Home/Post/fe432a51-337c-4558-b9e8-347b58cbcd53


結束~

希望對你有用,支持請點個贊吧~ 謝謝!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章