使用YAKINDU STATECHART TOOLS的TypeScript代码生成

原文链接：https://blogs.itemis.com/en/typescript-code-generation-with-yakindu-statechart-tools

作者 Dennis van der Vlugt

现代web应用越来越复杂, 模型驱动开发有助于应对复杂性。我们可以使用状态机建模web应用的 行为，然后直接转换为TypeScript代码。所生成的代码很容易集成到现代web开发框架，例如Angular或Ionic。

单页web应用

TypeScript是一门免费和开源的编程语言，由Microsoft开发和维护。在语法上，TypeScript是JavaScript严格的超集，添加了可选的类型。 Angular 2+或Ionic 2+等web框架都是基于TypeScript。这些框架利用了TypeScript的优势来建造可扩展的单页web应用。

随着更多逻辑被移到前端，单页web应用很容易变得复杂，特别是交互逻辑。通过状态机建模生成代码是一个好的解决方案。我们来看一个汽车车载娱乐应用的例子。 在这个例子中，有一个简单的HMI（人机界面），共两个屏幕：

• 欢迎屏幕: 显示欢迎动画 • 主屏幕: 包含若干组件(时速表、灯组件、信息娱乐…).

信息娱乐组件是一个容器，里面有进一步的组件，例如infotainment menu, weather, music player和phone。 在图片的右侧，可以看到三个菜单项。如果点击菜单项，相应的特性将会显示。

展示的行为可以用YAKINDU STATECHART TOOLS建模如下：

在定义部分，我们定义了一个menuState变量，类型为string。menuState用来决定要进入哪个状态。然后，定义in event onMenuChanged来响应用户交互。最后，定义4个回调操作显示相应的特性。

生成TypeScript工件

为了配置代码生成过程，YAKINDU STATECHART TOOLS使用一个文本生成器模型，称为SGen。它描述什么东西应该在哪里以什么样的选项生成。生成器模型可以通过已有的YAKINDU 状态图 Generator Model 向导创建，也可以创建扩展名为.sgen的文本文件。

使用Outlet 特性，我们制定目标项目为ycar_app。所生成的工件放在ycar_app项目的src/app/gen/statemachine目录下。所生成的状态机要依赖的库，也生成在目标文件夹的src/app/gen/stateutils下。

GeneratorFeatures指定状态图应该创建为一个Angular服务(useAngular = true) ，带有一个事件驱动行为(useEventQueue = true)。

集成所生成的菜单服务状态机到Angular

在Angular上下文中，所生成的MenuService状态机被创建为一个Angular服务。状态机作为一个provider被添加到YMainScreenModule。

接下来需要定制YMainScreen组件来注入服务，并编写一些胶水代码来设置in事件和操作回调。我们在组件生命周期hookngAfterViewInit里做:

34到47行，我们定义了操作回调对象，类型为IOperationCallback。该对象的成员是回调函数，从menuService调用。 48行menuOperationCallback对象作为参数传递给setdefaultScopeOperationCallback函数。 订阅了mainScreenService.menuChanged observable后，menuService.menuState会根据menuState的值设置。

完整例子请在 example wizard of YAKINDU STATECHART TOOLS下载。TypeScript生成器目前仍是β测试阶段，没有打包在YAKINDU STATECHART TOOLS中，需要手工安装。选择菜单Help → Install New Software，选择YAKINDU Typescript Generator。

安装生成器后，可以导入Web-based YCar App项目，File → New → Example… → YAKINDU Statechart Examples

[UMLChinaSicilia 摘译，转载请注明出处。文章观点不代表UMLChina观点。]