使用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观点。]

===广告分隔线===

主题: 软件需求设计UML全程实例剖析 开课时间: 2018年10月13-14日(周六、周日)（9:00-12:00，13:30-17:30） 上课地点: 深圳 费用： 每人2400元，含午餐。交通、住宿费请自理。可以开增值税专用发票和增值税普通发票。 微信报名： 18758097122 QQ报名： 1493943028 Email报名： umlchinacourse@163.com 咨询电话： 18758097122 报名交费： 步骤一、报名 教室座位有限，需要先报名。请通过以上任何联系方式告知我们您的姓名和单位，以便我们预留座位。 步骤二、交费 按以下方法办理交费，将交费凭证（截屏或照片）、发票单位名称（如果要开）通过以上任何方式告知我们。我们收到费用后会给您发听课证，听课证是一个pdf文件，上有详细听课地点和您的座位号。听课证上有详细地址和座位细节。 不方便现场交费，因为需按交费顺序安排座位，而且现场只有老师，无人收款。 如果您交费后因故未能参加，您的名额和上课时间将会一直保留。 交费方法： （1）支付宝支付到talk@umlchina.com，手机扫描二维码或PC上点击付款图标即可付款 （2）微信支付到18758097122 （3）如果是公司财务汇，可以汇到负责UMLChina商务事宜的以下公司账号: 户名：杭州先思软件技术有限公司 帐号：3310 6594 0018 0100 29896 开户行：交通银行杭州滨江支行 课前准备： 请下载以下资料： （1）最新版本的本次课程训练幻灯 http://www.umlchina.com/training/slide.htm （2）建模软件EA30天试用版 http://www.sparxsystems.com/products/ea/trial/request.html （3）UMLChina模型模板 http://www.umlchina.com/training/myproject.rar （4）《软件方法（上）》第2版，自行到书店购买 （5）《软件方法（下）》目前公开内容，请在http://www.umlchina.com/book/softmeth0809.pdf下载 （6）课上可以专门以学员的项目作为主要讨论项目。如果您希望在课上讨论您的项目，麻烦下载http://www.umlchina.com/training/project.doc 填好后发给我们，以便老师针对您的项目相关领域事先做准备。

[训练介绍] 软件开发中，需求是解决“产品怎样好卖”的问题，设计是解决“降低生产成本”的问题。二者相辅相成，缺一不可。而且，不能相互取代。要迈向“低成本制造好卖的产品”的境界，并非喊喊口号就能达到，需要静下心来，学习和实践各种技能。 在这个强调“做减法”的时代，建模是正确帮助您“做减法”的绝佳工具。 本训练就是教授如何使用UML2.5相关的需求和设计技能来全程实例剖析一个系统的过程。 本训练对每个开发工作流，结合讲解、做练习巩固、应用到实际项目三种方式，展示使用UML2.5相关技能开发软件系统的全过程，解答实际应用中的疑难细节问题。 [学员要求] 有一年以上项目经验的需求或设计（编码）人员。不需要您有“UML基础”，只需要您有项目经验。欢迎学员携带自己的项目来听课，由专家在现场进行剖析。 [专家] UMLChina首席专家 潘加宇。在1999年还是一名程序员时，利用业余时间创建了UMLChina，潜心研究软件需求和设计技能。2002年开始对外提供UML需求和设计的技术指导和训练服务，到现在为止，已经上门为超过270家的软件组织提供服务，覆盖了国内各个领域的领袖企业，包括通信、企业管理、电子商务、房地产、网络游戏、地理信息、物流、数码设备、医疗设备、工业控制.....等领域。 [课程大纲] 1. 概论 --需求和设计的关键区别 --核心工作流 --UML的统一 --使用UML开发过程、工具、资料介绍 2. 愿景 --愿景的要点 --如何揣摩愿景 --项目实作：愿景  3. 业务建模 --组织的外观和内观 --选取合适的建模业务单元 --业务执行者和业务用例 --业务序列图 --改进业务序列图 --项目实作：绘制业务用例图、业务序列图  4. 需求 --系统执行者要点剖析 --系统用例要点剖析 --从业务序列图映射到系统用例图 --项目实作：绘制系统用例图  --书写用例规约 --项目实作：书写用例规约  --通过关系整理用例 --需求启发技术 5. 结构分析之类图 --抽象和封装 --识别类及其属性 --识别类之间的泛化 --识别类之间的关联 --项目实作：绘制类图  --彩色建模技术 --典型分析模式 6. 行为分析之序列图 --序列图精要 --用例、类图、序列图的互动 --专家原则和单一责任原则 --老板原则和聚合根 --可视原则 --项目实作：绘制序列图  7. 行为分析之状态图 --状态图、类图、序列图的映射 --状态 --事件、动作和转换 --层次状态、历史状态 --转换执行序列 --分层和细化 --状态图和代码的映射 --项目实作：绘制状态机图  8. 架构和设计 --存储层的映射 --数据源层的映射 --业务层的映射 --界面层的映射 --领域驱动设计 9. 改进指南 --根据团队情况改进 --小步前进 --正确的改进心态 以上时间分配会根据项目特点和训练进程调整。