--- title: "移动应用开发项目中的软件设计模板" date: "2020-01-21" categories: - "app-development" - "mobile" - "tools" tags: - "app-design" - "app-development" - "mobile-development" - "mobiletogether" description: 探索如何利用MobileTogether中的软件设计模板来提升移动应用开发效率，通过促进设计复用和简化更新，尤其是在处理动态用户控件方面。 --- Status: #blog Tags: #app-design #app-development #mobile-development #mobiletogether Categories: [mobile-development](/blog/zh/category/mobile-development.md) | [low-code+no-code](/blog/zh/category/low-codeno-code.md) # 移动应用开发项目中的软件设计模板 软件设计模板 [简化移动应用程序的开发流程](https://www.altova.com/zh/mobiletogether) 通过消除重复组件的实施，可以提高效率。此外，创建设计模板也有助于简化修改和升级，因为对模板的任何更改都可以自动应用于整个项目。 MobileTogether 提供了跨平台移动应用程序的用户控件设计模板，旨在促进设计复用，并简化高效、灵活的解决方案构建，以满足各种应用程序的需求。 在 MobileTogether 中，控制模板是一种设计组件，它允许开发者指定和组织用户控件，从而使其易于重复使用。控制模板支持参数，并且每个模板可以在运行时根据参数值进行定制。 我们来看一个例子。 ![](/blog/images/MT_control_templates.jpg) MobileTogether Designer 包含多个示例项目，展示了控件模板的用法。我们将详细介绍名为“Cities4-DynamicSelection”的应用程序。下图显示了该应用程序在 Android 手机上运行时的部分界面： [![安卓手机应用程序中软件设计模板的示例](/blog/images/screenshot-landscape-2-1030x286.png)](screenshot-landscape-2.png) 这个应用程序展示了一个在呈现分层数据时常见的难题。最终，该应用程序希望用户选择一个城市。为了提高效率，完整的城市列表按照大洲进行组织，并以下拉框的形式呈现。然后，在所选大洲中，城市列表会根据国家/地区进行筛选，并在一组单选按钮中显示。最后，在所选国家/地区中，城市会以另一组单选按钮的形式呈现。 在横向布局中，单选按钮会水平排列（如上图所示），而在纵向布局中，它们则会垂直排列 [![软件设计模板可以自动适应移动设备的朝向](/blog/images/screenshot-portrait-2.png)](screenshot-portrait-2.png) 如果需要为每一种用户选择组合手动创建单选按钮控件，那么开发这个应用程序将会非常繁琐。此外，国家和城市名称都存储在一个 XML 配置文件中，我们希望能够通过简单地编辑该配置文件来更新应用程序。 [![用于软件设计模板的 XML 文件中包含的层次化数据 ](/blog/images/cities-list.png)](cities-list.png) 在MobileTogether Designer中打开应用程序，我们可以在主设计窗口中看到页面的布局。 [![移动端应用设计工具 MobileTogether 中的设计模板占位符](/blog/images/page-design-1.png)](page-design-1.png) 页面顶部第一个控件是用于选择大陆的下拉框。 接下来是两个包含占位符控件的表格。 在运行时，第一个表格和占位符将生成国家列表，而第二个表格将生成城市列表。 MobileTogether Designer 包含一个辅助窗口，该窗口会显示任何应用程序中所有页面、子页面和控件模板的层级结构。在这个例子中，每个模板都接受两个参数，这些参数将在运行时由占位符传递。 [![Pages 辅助窗口，用于在 MobileTogether 中显示应用程序组件](/blog/images/pages-window-1.png)](pages-window-1.png) 选择其中一个控制模板后，其组件将在主设计区域中显示。 [![MobileTogether 中控制模板的视图](/blog/images/template-design-view.png)](template-design-view.png) 对于垂直版本，模板使用带有动态行的表格；而对于水平版本，则使用带有动态列的表格。 无论哪种情况，模板生成的表格都会嵌套在父表格的单个单元格内，该父表格定义在顶部的页面上。 这样可以垂直居中对齐排序复选框，使其位于任何单选按钮列的中心，而与行数无关。 占位符定义了页面上控件模板的位置。用于占位符的“样式与属性”辅助窗口会标识使用的控件模板，并提供参数值。用于显示国家/地区列表的占位符，其属性都以 XQuery 表达式的形式定义： [![软件设计模板中的占位符的特性](/blog/images/control-template-properties.png)](control-template-properties.png) 即使只看到一部分界面，我们也能看到，页面上使用的特定控件模板，将由运行时设备的朝向来决定。 我们可以使用 MobileTogether 模拟器在运行时检查软件设计模板，并观察占位符和控件模板的实际效果。在以下截图示例中，我们使用横向模式的 iPhone 作为预览设备。由于该应用程序不包含任何特定于设备或操作系统的功能，因此确切的预览设备并不重要。 在应用程序中，用户可以选择大洲、国家和城市，但这些选项没有预设值。因此，在程序启动时，我们只看到页面标题和一个用于选择大洲的下拉列表框，该下拉列表框为空 [![移动设备模拟器中显示的应用程序界面](/blog/images/simulation-1.png)](simulation-1.png) “消息”窗口会列出我们选择一个大洲时所执行的操作，这些操作会以绿色高亮显示，如下所示： [![在模拟器中与应用程序进行交互](/blog/images/simulation-1.5.png)](simulation-1.5.png) [![“消息”窗口会显示您从下拉列表中选择的大陆名称](/blog/images/sim-message-1.png)](sim-message-1.png) 现在，模拟窗口显示了欧洲的相应国家列表，但没有列出任何城市名称 [![在选定的洲内，软件设计模板在运行时生成相应的国家列表](/blog/images/simulation-2.png)](simulation-2.png) 此时，应用程序正在等待用户选择一个国家。与其继续下一步操作，我们可以打开模拟器中的XQuery编辑器，并评估“控制模板”中第一个占位符传递的参数。我们只需从“样式与属性”窗口中复制“模板参数”表达式，然后将其粘贴到XQuery窗口中。该表达式会计算出一个数组，其中包含欧洲国家列表以及排序状态 [![XQuery 评估器允许我们查看传递给控制模板的精确参数 ](/blog/images/sim-evaluate-1.png)](sim-evaluate-1.png) 但是，为什么这个应用程序在模拟页面上没有显示任何城市列表？我们可以评估第二个占位符传递的城市参数表达式： [![传递给第二个控制模板的参数 ](/blog/images/sim-evaluate-2.png)](sim-evaluate-2.png) 该表达式传递了一个空的城市名称列表。由于城市单选按钮位于一个具有动态列的表格中，因此没有渲染任何列！ 用于选择排序方式的复选框控件并不位于动态列中，但它也未显示。该复选框的可见性属性被定义为 "$PERSISTENT/Root/@Country != ''"，这意味着只有当用户选择了某个城市后，复选框和其对应的文本标签才会显示。 总而言之，Cities4-DynamicSelection 示例展示了如何将多个控件组合成定制化的软件设计模板，并将这些模板应用于移动应用的设计中，从而构建一个优雅的解决方案，该方案能够根据用户的实时选择或其他外部条件，呈现正确的结果。该演示应用以及相关的数据文件都包含在 MobileTogether Designer 中，因此您可以按照上述步骤进行操作，或者更进一步，自行探索。 MobileTogether Designer 是一款免费工具，可用于[快速构建跨平台移动应用程序，只需从一个设计稿即可。](https://www.altova.com/zh/mobiletogether/app-development#designer) 观看[视频演示](https://www.altova.com/zh/mobiletogether/demos)，了解 MobileTogether 用户每天构建的各种应用程序，并[下载安装程序](https://www.altova.com/zh/mobiletogether/download)，开始使用软件设计模板！