--- title: "移动应用程序设计模板" date: "2020-07-28" categories: - "app-development" - "mobile-development" - "mobiletogether" - "tools" tags: - "app-design" - "cross-platform-app-development" - "mobile-development-tools" - "mobiletogether" description: 使用 Altova MobileTogether 提供的设计模板来构建移动应用程序，可以显著提高开发速度和效率。 --- Status: #blog Tags: #app-design #cross-platform-app-development #mobile-development-tools #mobiletogether Categories: [mobile-development](/blog/zh/category/mobile-development.md) | [low-code+no-code](/blog/zh/category/low-codeno-code.md) # 移动应用程序设计模板 在之前的文章中，我们讨论了如何使用[软件设计模板](/blog/zh/2020/01/software-design-templates-in-mobile-development-projects.md)来开发移动应用程序，以促进设计复用，并轻松构建适用于各种应用需求的、高效且灵活的解决方案。我们描述了一个控制模板的示例，该模板旨在根据用户在运行时选择，呈现多层级的层次结构数据。 我们的示例项目是使用Altova的RMAD（快速移动应用开发）工具MobileTogether构建的，旨在帮助开发者[构建跨平台应用](https://www.altova.com/zh/mobiletogether)，从而提供动态、高级的应用性能，为最终用户带来卓越的体验。 您还可以通过将多个控件组合成一个更大的单元，来创建跨平台的移动应用控制模板，就像用多个零件组装而成的复杂子组件。这样可以创建移动应用的界面设计模板，这些模板可以轻松地应用到任何地方，从而加快开发速度并确保界面的一致性。 ![](/blog/images/Blog_MT_control_templates_1.jpg) MobileTogether Designer是Altova的一款跨平台移动应用开发工具，它将拖放式可视化布局工具与函数式编程技术相结合。该工具包含一些示例应用，用于展示其各种功能。例如，"公司销售"应用会查询订单数据库，从而生成实时移动端的高级销售报告，针对一家虚构的公司，提供总体销售额、按产品、区域或单个销售代表的销售额报告。用户可以选择报告的日期，并将其与之前的时期进行比较。 以下展示了两个页面：一个是总览页面，显示了2月15日的实时销售数据；另一个是“按产品分类”的销售页面，详细列出了该日各项产品的销售情况。 [![来自 MobileTogether 示例应用程序“公司销售”的几个页面](/blog/images/designer-overview.png)](designer-overview.png) 该应用程序的每个页面都包含日期选择功能，用户可以通过此功能浏览到任何过去的日期，以查看历史销售数据。 在主要的设计器布局窗口中，我们可以看到日期选择功能是通过组合三个按钮控件和一个日期选择控件来实现的 [![将多种日期选择控件组合起来，从而创建适用于移动应用程序的设计模板](/blog/images/super-datepicker-1.png)](super-datepicker-1.png) 日期选择控件会显示报告的日期，并允许用户选择任何过去的日期。左箭头和右箭头按钮分别用于向前或向后导航一天，而“今天”按钮则会选择当前日期。 当报告的日期设置为当前日期时，"今天"按钮和右箭头按钮都会被禁用。 ### 移动应用程序的设计模板 在创建上述控件之前，首先需要在“页面助手”窗口中添加一个“控件模板”。 要添加新的页面和“控件模板”，请点击位于左上角的绿色加号按钮： [![为移动应用程序添加控件模板](/blog/images/pages-helper-window.png)](pages-helper-window.png) 或者，您可以创建控件模板，方法是选择页面上的现有控件，然后在右键单击的上下文菜单中进行选择 [![将现有的控件转换为移动应用程序的设计模板](/blog/images/template-from-selection.png)](template-from-selection.png) 在增强型日期选择器中，"今天"按钮、箭头按钮以及日期选择器控件所执行的操作，也都定义在控件模板中。以下展示了“今天”按钮和左箭头按钮的操作： [![控制模板中的“今天”按钮上的操作](/blog/images/today-action.png)](today-action.png) [![控制模板中左箭头按钮执行的操作](/blog/images/arrow-action.png)](arrow-action.png) 我们希望“今天”按钮在选择的日期为当前日期时处于禁用状态，并且我们也不希望用户能够选择未来的日期。 可以在“样式与属性”辅助窗口中定义这些按钮的启用条件。 以下是“今天”按钮设置的其中一部分： [![增强型日期选择器设计模板中，“今天”按钮的样式和属性 ](/blog/images/button-enable.png)](button-enable.png) 当选择的报告日期设置为当前日期时，“今天”按钮将被禁用。我们还定义了不同的颜色，用于指示该按钮是否可点击。 颜色定义是可选的。公司销售应用程序的一个要求是，在所有设备上呈现相同的颜色，以模拟企业形象的统一。如果您不填写颜色定义，MobileTogether 会自动为每个平台（例如：Android、iOS、Windows 10等）使用默认颜色。 ### 将控制模板添加到页面 增强型日期选择控件模板被应用于应用程序的“高级销售报告”页面以及四个子页面中的三个。我们只需将增强型日期选择控件从“页面助手”窗口拖动到需要使用它的每个页面上。这样可以节省几个步骤，因为它会自动在“占位符控件”中实例化该模板，就像这里展示的： [![移动应用程序的设计模板，如在应用程序页面布局中看到的](/blog/images/placeholder-control-1.png)](placeholder-control-1.png) ### 移动应用设计模板的操作修改 我们还有一件事需要考虑。当用户选择新的报告日期时，我们希望应用程序能够自动查询销售数据库，并在每个页面上显示独特的报告和图表。目前，增强型日期选择器中定义的动作仅用于选择日期。 对于任何控制模板，我们有三种进一步处理方式：一是仅执行控制模板中定义的动作；二是使用占位符中定义的所有新动作，覆盖控制模板中的动作；或者三是将控制模板中的动作与占位符中定义的附加动作相结合。 我们的公司销售应用程序使用了第三种方案。增强型日期选择器允许用户选择日期。每个页面上的占位符区域会添加独特的动作，用于执行数据库查询和更新图表，这些操作与该页面相关。 我们通过在每个页面的模板控件上，通过右键菜单添加了事件覆盖设置 [![修改移动应用设计模板的操作](/blog/images/event-overrides.png)](event-overrides.png) 这会打开“操作”对话框。以下展示的是“按产品分类销售”页面的操作选项。 [![](/blog/images/action-dialog-1.png)](action-dialog-1.png) 第一项操作是一个名为“模板事件回调”的特殊内置操作组。包含“模板事件回调”意味着，首先会执行增强型日期选择器控件模板中定义的所有操作，然后才会执行占位符中定义的附加操作。 在上面的图片中，最后一个动作组被展开，以显示用于更新“按产品分类的销售额”报告的“重新加载”动作。前两个“重新加载”动作会执行数据库查询，而后两个“重新加载”动作则会根据查询结果重新绘制图表。 ### 亲自体验一下 您可以下载免费的 [MobileTogether Designer](https://www.altova.com/zh/mobiletogether/download) 软件，并打开名为“CompanySales”的示例应用程序，以便更深入地了解该销售报告演示工具中的移动应用程序设计模板。或者，您可以 [下载移动应用程序](https://www.altova.com/zh/mobiletogether/download)，并在您自己的移动设备上运行“CompanySales”应用程序。 移动应用程序中的设计模板支持只是 MobileTogether 众多功能之一，它旨在帮助开发者以一种快速且简便的低代码方式构建 [复杂的原生应用程序](https://www.altova.com/zh/mobiletogether/app-development)。