Code Generator Development to Transform IFML (Interaction Flow Modelling Language) into a React-based User Interface

Jurnal Ilmu Komputer dan Informasi Pub Date : 2024-06-02 DOI:10.21609/jiki.v17i2.1178

Ilma Ainur Rohma, Ade Azurat

{"title":"Code Generator Development to Transform IFML (Interaction Flow Modelling Language) into a React-based User Interface","authors":"Ilma Ainur Rohma, Ade Azurat","doi":"10.21609/jiki.v17i2.1178","DOIUrl":null,"url":null,"abstract":"Model-Driven Software Engineering (MDSE) is a software development approach that uses the Model to be the main actor of the development. MDSE can be applied to User Interface (UI) Development so that a model for the UI can be built, and then a transformation can be made to turn it into a running application. In this research, we develop UI Generator to support UI Development with the MDSE approach. This UI Generator can also support UI Development in Software Product Line Engineering (SPLE) paradigm. The UI is modeled with Interaction Flow Modeling Language (IFML) diagram. Then The IFML diagram is transformed into React-Based UI by the UI Generator. The UI Generator is developed with Acceleo on Eclipse IDE to transform IFML into React Code with the transformation rules defined in this research. The UI generator is also enriched with display settings and static page management to address user customization needs. The experimental results show that the UI Generator can generate a functional website. Besides evaluating the working product, UI Generator is evaluated qualitatively well based on six quality criteria as an SPLE supporting tool.","PeriodicalId":31392,"journal":{"name":"Jurnal Ilmu Komputer dan Informasi","volume":"17 7","pages":""},"PeriodicalIF":0.0000,"publicationDate":"2024-06-02","publicationTypes":"Journal Article","fieldsOfStudy":null,"isOpenAccess":false,"openAccessPdf":"","citationCount":"0","resultStr":null,"platform":"Semanticscholar","paperid":null,"PeriodicalName":"Jurnal Ilmu Komputer dan Informasi","FirstCategoryId":"1085","ListUrlMain":"https://doi.org/10.21609/jiki.v17i2.1178","RegionNum":0,"RegionCategory":null,"ArticlePicture":[],"TitleCN":null,"AbstractTextCN":null,"PMCID":null,"EPubDate":"","PubModel":"","JCR":"","JCRName":"","Score":null,"Total":0}

引用次数: 0

Abstract

Model-Driven Software Engineering (MDSE) is a software development approach that uses the Model to be the main actor of the development. MDSE can be applied to User Interface (UI) Development so that a model for the UI can be built, and then a transformation can be made to turn it into a running application. In this research, we develop UI Generator to support UI Development with the MDSE approach. This UI Generator can also support UI Development in Software Product Line Engineering (SPLE) paradigm. The UI is modeled with Interaction Flow Modeling Language (IFML) diagram. Then The IFML diagram is transformed into React-Based UI by the UI Generator. The UI Generator is developed with Acceleo on Eclipse IDE to transform IFML into React Code with the transformation rules defined in this research. The UI generator is also enriched with display settings and static page management to address user customization needs. The experimental results show that the UI Generator can generate a functional website. Besides evaluating the working product, UI Generator is evaluated qualitatively well based on six quality criteria as an SPLE supporting tool.

查看原文本刊更多论文

开发代码生成器，将 IFML（交互流建模语言）转化为基于 React 的用户界面

模型驱动软件工程（MDSE）是一种软件开发方法，它将模型作为开发的主角。模型驱动软件工程可应用于用户界面（UI）开发，这样就可以建立用户界面模型，然后进行转换，将其转化为运行中的应用程序。在这项研究中，我们利用 MDSE 方法开发了用户界面生成器，以支持用户界面开发。该用户界面生成器还可支持软件产品线工程（SPLE）范例中的用户界面开发。用户界面使用交互流建模语言（IFML）图建模。然后，用户界面生成器将 IFML 图转化为基于 React 的用户界面。用户界面生成器是在 Eclipse IDE 上使用 Acceleo 开发的，可根据本研究中定义的转换规则将 IFML 转换为 React 代码。用户界面生成器还丰富了显示设置和静态页面管理功能，以满足用户的定制需求。实验结果表明，用户界面生成器可以生成一个功能完善的网站。除了对工作产品进行评估外，UI 生成器作为 SPLE 支持工具还根据六项质量标准进行了定性评估。

本文章由计算机程序翻译，如有差异，请以英文原文为准。

求助全文

约1分钟内获得全文求助全文

来源期刊

Jurnal Ilmu Komputer dan Informasi

自引率

0.00%

发文量

审稿时长

4 weeks