使用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观点。]
===广告分隔线===
| ||||||||||||||||||||
[训练介绍] 软件开发中，需求是解决“产品怎样好卖”的问题，设计是解决“降低生产成本”的问题。二者相辅相成，缺一不可。而且，不能相互取代。要迈向“低成本制造好卖的产品”的境界，并非喊喊口号就能达到，需要静下心来，学习和实践各种技能。 在这个强调“做减法”的时代，建模是正确帮助您“做减法”的绝佳工具。 本训练就是教授如何使用UML2.5相关的需求和设计技能来全程实例剖析一个系统的过程。 本训练对每个开发工作流，结合讲解、做练习巩固、应用到实际项目三种方式，展示使用UML2.5相关技能开发软件系统的全过程，解答实际应用中的疑难细节问题。 [学员要求] 有一年以上项目经验的需求或设计（编码）人员。不需要您有“UML基础”，只需要您有项目经验。欢迎学员携带自己的项目来听课，由专家在现场进行剖析。 [专家] UMLChina首席专家 潘加宇。在1999年还是一名程序员时，利用业余时间创建了UMLChina，潜心研究软件需求和设计技能。2002年开始对外提供UML需求和设计的技术指导和训练服务，到现在为止，已经上门为超过270家的软件组织提供服务，覆盖了国内各个领域的领袖企业，包括通信、企业管理、电子商务、房地产、网络游戏、地理信息、物流、数码设备、医疗设备、工业控制.....等领域。 [课程大纲] 1. 概论 以上时间分配会根据项目特点和训练进程调整。 |