所在位置:UML新闻 - 内容 论坛精华    
使用YAKINDU STATECHART TOOLS的TypeScript代码生成

[2017/8/29]

原文链接: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(微信:UMLChinaSicilia)摘译,转载请注明出处。文章观点不代表UMLChina观点。]