教程：将 Kanzi Studio 项目合并为一个 Kanzi 应用程序。

在本教程中，您将学习如何组合多个 Kanzi Studio 项目以创建一个单一的 Kanzi 应用程序。

图像显示教程的结果。

../../_images/completed.png

本教程假定您了解使用 Kanzi Studio 的基础知识。熟悉 Kanzi Studio 的最佳入门点是：

获取教程

要获取本教程，请在 Kanzi Studio Quick Start 窗口中点击 Examples。在 Multi-project 教程旁，点击 下载。

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

  • 位于 <KanziWorkspace>/Tutorials/Multi-project/Assets 目录中的教程起点工程。

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

起点工程的内容

本教程的资产包括这些已准备好的 Kanzi Studio 项目，您可以将其合并到一个 Kanzi 应用程序中：

  • Stats 项目包含一个汽车统计应用程序。

    ../../_images/stats.png

  • Weather 项目包含一个天气信息应用程序。

    ../../_images/weather.png

  • Music 项目包含一个音乐播放器应用程序。

    ../../_images/music.png

  • Resources 项目仅包含本教程中各项目共享的资源。

    ../../_images/resources-library.png

创建一个解决方案并使用另一个工程的内容

在本节中，您将创建一个 Kanzi Studio 解决方案，其中您结合 Kanzi Studio 项目并使用来自另一个项目的预设。

要创建一个工程并使用另一个工程的内容：

  1. 在 Kanzi Studio Quick Start 窗口中，点击 New Project，并将工程命名为 Center stack。

    在本教程中，您使用此项目将其他 Kanzi Studio 项目合并为一个 Kanzi 应用程序。

    ../../_images/multi-project-new-project.png

  2. 在 Node Tree 中选择 Screen 节点，并在 Properties 中将 Screen Resolution 属性设置为 1280x480 - UWVGA。

    您可以这样设置应用程序屏幕的大小。

    ../../_images/screen.png ../../_images/screen-resolution1.png

  3. 设置应用程序背景：

    1. 在 Assets 中点击 Import Assets，进入 <KanziWorkspace>/Tutorials/Multi-project/Assets/Images 目录，选择 Background.png 图像，然后点击 Open。

      ../../_images/cluster-stack-assets.png

    2. 在 Node Tree 中选择 RootPage 节点，在 Properties 中将 Background Brush 属性设置为 + Texture Brush，命名画笔，点击属性名称旁边的 image0，并将画笔的 Brush Texture 属性设置为 Background 纹理。

      ../../_images/background-texture-brush.png

  4. 在 Node Tree 中，右键单击 Viewport 2D 节点并选择 Delete。

    您可以删除 Viewport 2D 节点，因为在本教程中您不会创建任何 3D 内容。

    ../../_images/delete-viewport-2d.png

  5. 在 Library 按 Alt 并右键单击 Project References 中，选择 Existing Project，并选择 <KanziWorkspace>/Tutorials/Multi-project/Assets/Stats/Stats.kzproj 项目。

    Kanzi Studio 加载：

    • Stats 项目 Stats 项目包含一个汽车统计应用程序。您将其放置在最终 Kanzi 应用程序的主要部分。

    • Resources 项目 Kanzi Studio 加载 Resources 项目，因为 Stats 项目包含指向 Resources 项目的项目引用。

    在项目选项卡中，Preview 图标 active 标记在 Preview 中处于活动状态的项目。

    ../../_images/project-reference-create-existing-project.png ../../_images/stats-and-resources-project-tabs.png

    小技巧

    当 Kanzi Studio 在 Preview 中显示的项目或任何引用的项目包含您尚未导出到项目的 kzb 文件的更改时，在 Preview 中，Restart 按钮为橙色。

    要查看其内容在 Preview 中已过时的项目，请将鼠标悬停在按钮上。

    ../../_images/preview-content-outdated-tooltip.png

  6. 在 Preview 中，单击 Restart，并在 Kzb export 对话框中单击 Yes 以导出引用项目的 kzb 文件。

    Kanzi Studio 从 Stats 和 Resources 项目创建 kzb 和配置文件。Kanzi Studio 将导出的文件存储在 Stats 和 Resources 项目的 Binary 目录中。

    通过这种方式，您可以将 Stats 项目的内容提供给 Center stack 项目的 Preview。

    ../../_images/preview-restart-button-orange-in-context.png

  7. 在项目选项卡中，右键单击 Stats 项目的选项卡，然后选择 Show in Preview。

    您现在可以在 Preview 窗口中看到 Stats 项目的内容。

    ../../_images/stats-show-in-preview.png ../../_images/stats-project-in-preview.png

  8. 在项目选项卡中选择 Stats 项目，在 Prefabs 中选择 Stats 预设，并在 Properties 中将 Visibility Across Projects 属性设置为 Public。

    Visibility Across Projects 属性控制引用项目的下拉菜单中资源的可用性。

    在 Prefabs 和 Library 中，左上角的绿色图标标记了公共项目。

    ../../_images/stats-project-selected.png ../../_images/stats-in-prefabs.png ../../_images/stats-visibility-across-projects-public.png ../../_images/stats-marked-public.png

    小技巧

    要直接在 Library 或 Prefabs 中公开项目，请右键单击该项目并选择 Make Public。

    ../../_images/make-public.png

  9. 在工程选项卡栏中双击 Center stack 工程。

    这样，您既选择了 Center stack 项目，又在 Preview 中看到了它。

    ../../_images/select-center-stack-project.png

  10. 在 Node Tree 按 Alt 并右键单击 中，选择 RootPage 节点，选择 Prefab Placeholder 2D，并将其命名为 Stats。

    您使用此 Prefab Placeholder 节点从 Stats 项目实例化 Stats 预设。

    ../../_images/stats-prefab-placeholder.png

  11. 在 Properties 中，将 Prefab Template 属性设置为 Stats 项目的 Stats 预设。

    Kanzi Studio 将 Prefab Template 设置为 Stats 预设的 kzb URL，您在此过程的早期步骤中已将其设置为对引用项目可见。

    ../../_images/stats-prefab-template-select-stats.png ../../_images/stats-properties.png

  12. 在 Properties 中添加并设置：

    • Layout Width 到 880。

    • Layout Height 到 480。

    使用这些属性设置来自 Stats 项目中的预设在 Center stack 项目中的大小。

    ../../_images/stats-properties-width-height.png ../../_images/stats-in-preview.png

从其他工程添加预设件

在本节中，您将从 Weather 和 Music 项目中添加到 Center stack 项目的预设。

要从其他工程添加预设件：

  1. 在 Library 按 Alt 并右键单击 Project References 中，选择 Existing Project，并选择 <KanziWorkspace>/Tutorials/Multi-project/Assets/Weather/Weather.kzproj 项目。

    Weather 项目包含一个天气信息应用程序。您将其放置在 Center stack 项目的右上角。

    ../../_images/project-references-weather.png

    小技巧

    在 Library > Project References 中的项目引用顺序决定了当您运行应用程序时，Kanzi 加载项目的 kzb 文件的顺序。

  2. 在 Preview 中，点击 restart-orange 以重新启动 Preview 并导出 Weather 工程的 kzb 文件。

    这样就让 Weather 工程的内容对 Center stack 工程的 Preview 可用。

  3. 在项目选项卡中选择 Weather 项目，在 Prefabs 中选择 Weather 预设，并在 Properties 中将 Visibility Across Projects 属性设置为 Public。

    ../../_images/select-weather-project.png ../../_images/weather-in-prefabs.png ../../_images/weather-visibility-across-projects-public.png

  4. 在项目选项卡中选择 Center stack 项目，在 Node Tree 中选择 RootPage 节点，创建一个 Prefab Placeholder 2D 节点，将其命名为 Weather，并在 Properties 中添加并设置：

    • Prefab Template 到 Weather 项目的 Weather 预设。

    • Layout Width 到 400

    • Layout Height 到 240。

    • Horizontal Alignment 到 Right

    ../../_images/weather-prefab-placeholder.png ../../_images/weather-properties.png

  5. 重复本节中的步骤以从 <KanziWorkspace>/Tutorials/Multi-project/Assets/Music/Music.kzproj Kanzi Studio 中添加 Music 预设：

    1. 在 Music 项目中，将 Music 预设的 Visibility Across Projects 属性设置为 Public。

    2. 在 Center stack 项目中，将 Prefab Placeholder 2D 节点命名为 Music，并在 Properties 中添加并设置：

      • Prefab Template 到 Music 项目的 Music 预设。

      • Layout Width 到 400

      • Layout Height 到 240。

      • Horizontal Alignment 到 Right

      • Vertical Alignment 到 Bottom

    ../../_images/music-prefab-placeholder.png ../../_images/music-properties.png ../../_images/stats-weather-and-music-in-preview.png

  6. 在主菜单中选择 File > Save All。

    这样，您可以保存对 Center stack、Stats、Weather 和 Music 项目所做的更改。

    ../../_images/save-all.png

使用其他工程中的资源

当您的 Kanzi 应用程序由多个 Kanzi Studio 项目组成时，使用一个专门的项目，该项目仅包含在这些项目中使用的资源。 例如，在这样的资源项目中，您可以存储字体、画笔、样式和图像，这些资源您希望在 Kanzi 应用程序的多个 Kanzi Studio 项目中使用。

在本节中，您将 Music 项目中的常用资源替换为来自 Resources 项目的资源。

要使用其他工程中的资源：

  1. 在项目选项卡中，选择 Music 项目，在 Library 按 Alt 并右键单击 Project References 中，选择 Existing Project，并选择 <KanziWorkspace>/Tutorials/Multi-project/Assets/Resources/Resources.kzproj 项目。

    Resources 项目仅包含本教程中各项目共享的资源。

    ../../_images/select-music-project.png ../../_images/music-library-existing-project.png ../../_images/music-project-references-resources.png

    小技巧

    当您想要创建一个项目以存储您希望在 Kanzi 解决方案中的项目之间共享的公共资源时，按 Alt 并右键单击 Library > Project References，并选择 New Resource Project。

    资源项目在节点树中仅包含 Screen 节点，并且不包含默认的 Kanzi Studio 项目资源，例如 Default Texture 和 DefaultBackground 纹理。

    ../../_images/new-resource-project.png

  2. 在项目选项卡栏中，右键单击 Resources 项目的选项卡，然后选择 Make Public。

    通过这种方式，您将 Resources 项目的 Resource Visibility Across Projects 属性设置为 Public。

    当您将项目的 Resource Visibility Across Projects 属性设置为 Public 时，您可以在引用项目的下拉菜单中使用该项目的所有资源。

    Kanzi Studio 在项目选项卡的左上角用绿色标记标记公共项目。

    ../../_images/resources-make-public.png ../../_images/resources-resource-visibility-across-project-public.png ../../_images/resources-project-tab-public-icon.png

  3. 在项目选项卡中选择 Music 项目，在 Prefabs 中选择 Music 预设，并在 Properties 中将 Background Brush 属性设置为 Resources 项目的 White alpha 2 颜色画笔。

    ../../_images/music-prefab.png ../../_images/music-properties-background-brush.png

  4. 在 Prefabs > Music 中选择 Artist 节点，并在 Properties 中将 Foreground Brush 属性设置为 Resources 项目的 White alpha 64 颜色画笔。

    ../../_images/music-artist.png ../../_images/music-properties-foreground-brush.png

  5. 在 Prefabs 中选择 Song 和 Artist 节点，并在 Properties 中将 Font Family 属性设置为 Resources 项目的 Exo 2 字体系列。

    ../../_images/music-song-artist.png ../../_images/music-properties-font.png

  6. 在 Library 中选择 Font Families 和 Materials and Textures 库，右键单击 Materials and Textures，然后选择 Delete Unreferenced Items。

    您可以从 Music 项目中删除 Exo 2 字体系列，以及 White alpha 64 和 White alpha 2 画笔，因为您已将 Music 项目设置为使用 Resources 项目的这些资源。

    ../../_images/music-delete-unreferenced-items.png

  7. 在 Library > Resource Files 中，右键单击 Fonts 并选择 Delete Unreferenced Items。您可以从 Music 项目中删除 Exo 2 Medium 字体，因为该项目不再使用它。

    ../../_images/music-fonts-delete-unreferenced-items.png

  8. 在 Preview 中，点击 restart-orange 以重新启动 Preview 并导出 Music 工程的 kzb 文件。

编辑其他工程的预设件

在本节中，您将为 Center stack 项目添加在 Music 项目中控制音乐播放器进度条位置的功能。

要编辑其他工程的预设件：

  1. 在项目选项卡中选择 Music 项目，在 Prefabs > Music 预设中选择 Progress Bar 预设占位符，在 Properties 中，Progress 属性旁边点击 image3，并在 Publish Property 对话框中点击 OK。

    Kanzi Studio 从该属性创建一个自定义属性，将其添加到该预设的根节点，并在该预设的根节点中创建一个到该属性的 ##Template 绑定。

    这使您可以从预设的根编辑预设的外观。在本教程中，这使您可以使用 Progress 属性编辑 Music 预设的 Progress Bar 的外观。

    ../../_images/music-progress-bar.png ../../_images/music-progress-bar-properties.png

  2. 在 Preview 中，点击 restart-orange 以重新启动 Preview 并导出 Music 工程的 kzb 文件。

    Kanzi Studio 从 Music 项目创建 kzb 文件和配置文件。kzb 文件包含您在上一步中创建的自定义属性。

  3. 在工程标签栏中，双击 Center stack 工程，使其显示在 Preview 中。在 Node Tree 中，选择 Music 预设件占位符。在 Properties 中，添加 Music.Music.ProgressBarProgress 属性。

    现在您可以使用 Center stack 工程中的 Music.Music.ProgressBarProgress 属性来控制 Music 工程中的音乐播放器进度条。

    ../../_images/music-prefab-placeholder.png ../../_images/music-properties-progress.png

接下来该做什么？

在本教程中，您学习了如何将 Kanzi Studio 项目合并为一个 Kanzi 应用程序。现在您可以：

另请参阅

要详细了解组合多个 Kanzi Studio 项目时可用的选项，请参阅 将 Kanzi Studio 项目合并到 Kanzi 应用程序中。。

要详细了解有关如何使用预设件的信息，请参阅 使用节点预设。