[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�ϸ�ij����������˿�ѡ�����͡� 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)��

���������ɵIJ˵�����״̬����Angular

��Angular�������У������ɵ�MenuService״̬��������Ϊһ��Angular����״̬����Ϊһ��provider�����ӵ�YMainScreenModule��

��������Ҫ����YMainScreen�����ע����񣬲���дһЩ��ˮ����������in�¼��Ͳ����ص��������������������hookngAfterViewInit����:

34��47�У����Ƕ����˲����ص���������ΪIOperationCallback���ö���ij�Ա�ǻص���������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