步骤 1 - 本地化文本和纹理内容

在本教程的此步骤中,您将学习如何将资源添加到本地化表中,如何为翻译人员准备您的 Kanzi 应用程序中的文本内容,以及如何将翻译后的文本内容添加到您的 Kanzi 应用程序中。您还将学习如何创建一个触发器来更改语言环境,以及如何在应用程序中本地化纹理。

获取教程

要获取该教程,请在 Kanzi Studio 的 Quick Start 窗口中点击 Projects 并选择 Tutorials 选项卡。在 Localization 教程旁点击 下载。

Kanzi Studio 会将教程下载到 <KanziWorkspace>/Tutorials 目录。您可以找到:

  • 位于 <KanziWorkspace>/Tutorials/Localization/Start/Tool_project 目录中的教程起点工程。

  • 位于 <KanziWorkspace>/Tutorials/Localization/Assets 目录中的教程资产:

    • Fonts 目录包含包括 Japanese、Chinese 和 Korean 字形的字体。

    • Images 目录包含您用于这些区域设置的图像。

    • Text 目录包含项目的翻译文本,格式为 PO 文件。

  • 位于 <KanziWorkspace>/Tutorials/Localization/Completed 目录中的已完成教程。

起始项目的内容

起点工程包含您完成本教程所需的内容:

  • 在本教程中您本地化的模拟应用程序的布局。

    ../../_images/start---ivi-grid.png
  • 您本地化的文本内容。

    ../../_images/text-block-nodes.png
  • 您本地化的纹理。

    ../../_images/image01-in-library.png ../../_images/image01.png
  • 您添加用于设置应用程序区域设置的切换按钮的 Toggle Button Group 节点。

    ../../_images/locales-toggle-button-group.png
  • 您用来显示当前选择的区域设置的状态管理器。

    ../../_images/languageselected-state-manager-in-library.png

将资源添加到本地化表并导入翻译

要将资源添加到本地化表并导入翻译:

  1. 在 Kanzi Studio 的 Quick Start 窗口中,点击 Projects 并选择 Tutorials 选项卡。在 Localization 教程旁,点击 Open 并选择 Start project。

  2. 在 Node Tree 中,右键单击 Screen 节点并选择 Add Resources to a Localization Table。

    使用 Add Resources to a Localization Table 命令在 Screen 节点上时,Kanzi Studio 使您能够将项目中的所有资源添加到本地化表并对其进行本地化。

    要仅为选定节点及其树添加资源到本地化表中,请右键单击该节点并选择 Add Resources to a Localization Table。Kanzi Studio 仅在 Add Resources to a Localization Table 窗口中显示该节点树中使用的资源。

    ../../_images/enable-localization.png
  3. 在 Add Resources to a Localization Table 窗口中:

    1. 将 Localization Table 设置为您要添加资源的本地化表。如果您还没有本地化表,请选择 <Create New>。

      本地化表包含有关哪些地区使用哪些资源的信息。

      在本教程的这一步骤中,您将只学习本地化文本资源。在下一步骤中,您将本地化其他类型的资源。

    2. 单击 Select All 以选择所有列出的资源。

      使用每个资源旁边的复选框来选择该资源。要选择或取消选择所有资源,请使用窗口左下角的按钮。

    3. 单击 Add。

    Kanzi Studio 从您选择的所有资源类型创建资源和资源 ID,并将它们添加到您选择的本地化表中。您可以在 Library > Localization 中找到本地化表。您现在可以本地化资源,并在本地化表中将资源分配给语言环境。

    小技巧

    在窗口右上角,您可以选择要在窗口中显示哪些类型的资源。

    默认情况下,Kanzi 在项目中显示文本资源 image0。

    ../../_images/create-new-localization-table.png
  4. 在 Library > Localization 中,右键单击本地化表 Localization Table (Main) 并选择 Export Localization Table。

    Kanzi Studio 将本地化表模板以 POT 文件格式导出到 <ProjectName>/Tool_project/Localization/<LocalizationTableName> 目录。

    当您第一次为您的 Kanzi 应用程序进行本地化时,将该 POT 文件发送给翻译人员。这个模板文件包含了本地化表中每个文本资源的字符串及其上下文。

    译者使用 POT 模板文件来翻译每个语言环境的文本内容。他们的翻译结果是每个语言环境一个 PO 文件。在本教程中,您可以在 <KanziWorkspace>/Tutorials/Localization/Assets/Text 目录中找到芬兰语 (fi-FI locale) 和西班牙语 (es-ES locale) 的翻译 PO 文件。在那里,您还可以找到 Japanese、Chinese 和 Korean 语言环境的 PO 文件,您将在本教程的最后一步中将其添加为语言环境包。

    ../../_images/export-localization-table.png
  5. 在 Library > Localization 中,右键单击您导出的本地化表,然后选择 Import Localization Table Manually。转到 <KanziWorkspace>/Tutorials/Localization/Assets/Text 目录并导入 fi-FI 和 es-ES 语言环境的 PO 文件。

    ../../_images/import-localization-table-manually.png

    Kanzi Studio 创建每个 PO 文件中指定的语言环境,并将 PO 文件中的翻译添加到本地化表中。Kanzi 使用本地化表来存储本地化文本资源以及关于哪个语言环境使用哪个项目资源的信息。

    在 Library > Localization 中,双击本地化表以打开它,并查看本地化表中的资源。

    ../../_images/localization-editor-localization-table.png
  6. (可选) 要在 Kanzi Studio 中预览语言环境,请在 Node Tree 中选择 Screen 节点,并在 Properties 中将 Locale 属性设置为您希望在 Preview 中查看的语言环境。

    ../../_images/optional-set-locale-property.png

创建触发器更改地区

您可以通过在 Screen 节点中设置 Locale 属性的值来更改 Kanzi 应用程序的区域设置。在本节中,您将创建控件并使用触发器来更改应用程序的区域设置。您还将创建一个选择栏以突出显示所选的区域设置。

  1. 为语言环境选择切换按钮创建预设件:

    1. 在 Prefabs 中,点击 image1,选择 Toggle Button 2D,并将其命名为 LocaleButton。在 Toggle Button 2D 预设中,创建一个 Text Block 2D 节点。

      您在 Toggle Button 2D 节点中使用触发器来设置区域设置,并在 Text Block 2D 节点中显示应用程序界面中的区域设置名称。

      ../../_images/create-prefab1.png
    2. 选择 LocaleButton 预设,并在 Properties 中,添加 Horizontal Alignment 属性并将其设置为 Stretch。

      通过这种方式,您可以将区域按钮设置为跨越其父 Stack Layout 2D 节点 LocaleSelector 的宽度。您可以在本节后面通过实例化 LocaleButton 预设来创建区域按钮。

      ../../_images/localebutton-in-prefabs.png ../../_images/horizontal-alignment-stretch.png
    3. 在 Prefabs 中,选择 LocaleButton > Text Block 2D 节点,并在 Properties 中添加并设置:

      • 将 Horizontal Margin 属性 Left 属性字段设置为 30。

      • 将 Horizontal Margin 属性 Right 属性字段设置为 30。

      • 将 Vertical Margin 属性 Top 属性字段设置为 10。

      • 将 Vertical Margin 属性 Bottom 属性字段设置为 10。

      您设置 Text Block 2D 节点的边距以在应用程序界面中定位本地按钮。

      ../../_images/create-prefab1.png ../../_images/text-block-2d-properties2.png
    4. 选择 LocaleButton > Text Block 2D 节点,并在 Text 属性旁边的 Properties 中,单击 image2。在 Publish Property 对话框中,将属性命名为 Localization.LocaleName,然后单击 OK。

      这样您可以为预设件的每个实例显示不同的文本。

      当您单击 image3 时,Kanzi Studio 从该属性创建一个自定义属性,将其添加到该预设的根节点,并在该预设的根节点中创建一个到该属性的 ##Template 绑定。

      这样,您可以在预设件实例的根目录中设置要让 Text Block 2D 节点显示的文本。

      一个节点预设可以包含一个节点树,每个节点都有其自己的属性。当您在项目中编辑预设或其任何实例中的节点时,您会更改该预设的所有实例中的那些节点。您可以通过覆盖预设的属性值来自定义预设的每个实例,使其具有自己的属性值。例如,当您为通讯录条目创建一个预设时,您希望为每个通讯录条目显示不同的姓名、号码和照片。

      ../../_images/create-prefab1.png ../../_images/publish-text-property1.png ../../_images/localization.localename-property-type.png
  2. 从 Prefabs 中将三个 LocaleButton 预设件拖到 Node Tree 中的 RootNode > IVI Grid > Locales > LocaleSelector 节点,每个区域设置一个。

    ../../_images/drag-localebutton-prefabs.png
  3. 在 Node Tree 中,选择 LocaleSelector 节点中 LocaleButton 预设的每个实例,按 F2,并根据该按钮设置的区域命名每个节点。

    ../../_images/name-the-toggle-buttons.png
  4. 当用户切换第一个 LocaleButton 预设实例时,将应用程序设置为更改语言环境:

    1. 在 LocaleSelector 节点中的 Node Tree 中,选择 LocaleButton 预设的第一个实例。在 Properties 中添加 Localization.LocaleName 属性,并将其值设置为此预设实例所代表的区域设置。

      您在此处输入的区域设置名称将显示在您的 Kanzi 应用程序中。

      例如,默认的地区将值设为 English。

      ../../_images/english-localebutton.png ../../_images/add-localename-property.png
    2. 在 Node Components 中,按 Alt 并右键单击 Triggers 并选择 Message Trigger > Toggle Button > Toggled On。

      ../../_images/add-toggled-on-trigger.png ../../_images/toggled-on.png
    3. 在 Node Components > Triggers 中,按 Alt 并右键单击 Toggle Button: Toggled On 触发并选择 Set Property。在 Set Property 操作集中:

      • Target Item 到 Screen

      • Target Property 到 Locale

      • Value From 到 Fixed value

      • Fixed Value 到您想要通过此按钮设置的语言环境。例如,要设置为默认语言环境,在这种情况下为 English,请选择 Invariant Language (Invariant Country) () 值。

      当用户点击按钮时,Set Property 操作会将 Screen 节点中的 Locale 属性设置为您在此处选择的语言环境。

      ../../_images/add-set-property-value-action.png ../../_images/set-property-value-action-settings.png
  5. 为其他两个 LocaleButton 预设件实例重复上一步骤:

    • 对于 Finnish 区域设置:

      • 将 Localization.LocaleName 属性设置为 suomi。

      • 在 Set Property 操作中的 Toggle Button: Toggled On 触发器中,将 Fixed Value 设置为 Finnish (Finland) (fi-FI)。

    • 对于 Spanish 区域设置:

      • 将 Localization.LocaleName 属性设置为 español。

      • 在 Set Property 操作中的 Toggle Button: Toggled On 触发器中,将 Fixed Value 设置为 Spanish (Spain) (es-ES)。

    小技巧

    当您需要在多个节点中创建相同的触发器时,可以复制该触发器。

    要将触发器复制到节点:

    1. 在 Node Tree 中,选择具有您要复制的触发器的节点。在 Node Components 中,右键单击触发器并选择 Copy。

      ../../_images/copy-toggled-on-trigger.png
    2. 在 Node Tree 中,选择您要复制触发器的节点。在 Node Components 中,右键单击 Triggers 并选择 Paste。

      ../../_images/paste-trigger.png
    ../../_images/select-language-buttons-ready.png
  6. 创建显示选定地区的选择栏:

    1. 在 LocaleButton 预设中的 Prefabs 中,创建一个 Empty Node 2D 节点,将其命名为 SelectionBar,并在 Properties 中添加并设置:

      • Background Brush 到 Color Brush

      • Layout Width 到 5

      • Layout Height 到 70。

      ../../_images/create-selectionbar.png ../../_images/selectionbar-properties1.png ../../_images/selection-bar-initial-in-preview.png
    2. 在 Prefabs 中,选择 LocaleButton 预设。在 Properties 中,添加 State Manager 属性并将其设置为 LanguageSelected。

      使用状态机在不同地区之间切换时控制选择栏的可见性。

      ../../_images/localebutton-in-prefabs-2.png ../../_images/set-state-manager.png
  7. 在 Node Tree 中,选择设置 English 语言环境的 LocaleButton 预设实例。在 Properties 中,添加 Toggle State 属性并将其设置为 1。

    通过这种方式,您可以在启动应用程序时默认将 English 语言环境按钮设置为选中状态。

    ../../_images/english-localebutton.png ../../_images/toggle-state-1.png

在 Preview 中,当您单击一个语言环境名称时,Kanzi Studio 会将应用程序中的文本更改为该语言环境,并在所选按钮的左侧显示选择栏。

../../_images/localization-step-1-1.gif

为每个地区使用不同的纹理

应用程序包含一个纹理,您将其本地化以对每个地区使用不同的图像。

要本地化图像:

  1. 在 Assets 中,点击 Import Assets,进入 <KanziWorkspace>/Tutorials/Localization/Assets/Images 目录,并将所有图像导入到项目中。

    ../../_images/import-assets1.png ../../_images/imported-image-assets.png
  2. 在 Node Tree 的 RootNode > IVI Grid > LocationInformation 中,右键单击 Image 节点并选择 Add Resources to a Localization Table。

    要仅为选定节点及其树添加资源到本地化表中,请右键单击该节点并选择 Add Resources to a Localization Table。Kanzi Studio 仅在 Add Resources to a Localization Table 窗口中显示该节点树中使用的资源。

    ../../_images/add-image-to-localization-table.png
  3. 在 Add Resources to a Localization Table 窗口中:

    1. 将 Localization Table 设置为 Localization Table。

      选择您早前在本教程的这一步骤中创建的相同的本地化表。

    2. 选择 image4 以显示所选节点中的纹理资源。

    3. 选择 Image。

    4. 单击 Add。

      ../../_images/add-image-in-localization-editor.png
  4. 在 Library > Localization 中,双击 Localization Table (Main) 本地化表以在 Localization Editor 中打开该表。在每个语言环境的列中,选择要用于该语言环境的图像。

    例如:对于 Spanish 区域设置,使用 Image02,对于 Finnish 区域设置,使用 Image03。

    如果您未为某个区域选择资源或值,Kanzi 将使用该区域的默认资源或值。默认值列在 Default Value 列中。

    ../../_images/set-images-in-localization-editor.png

在 Preview 中,当您单击一个语言环境名称时,Kanzi Studio 会将应用程序中的图像更改为您为该语言环境设置的图像。

../../_images/localization-step-1-2.gif

另请参阅

本地化应用程序

使用 locales

使用 Button 节点

使用状态机