Code Generator Development to Transform IFML (Interaction Flow Modelling Language) into a React-based User Interface
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 app...
Uložené v:
| Vydané v: | Jurnal ilmu komputer dan informasi (Journal of computer science and information) (Online) Ročník 17; číslo 2; s. 109 - 120 |
|---|---|
| Hlavní autori: | , |
| Médium: | Journal Article |
| Jazyk: | English |
| Vydavateľské údaje: |
02.06.2024
|
| ISSN: | 2088-7051, 2502-9274 |
| On-line prístup: | Získať plný text |
| Tagy: |
Pridať tag
Žiadne tagy, Buďte prvý, kto otaguje tento záznam!
|
| 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. |
|---|---|
| AbstractList | 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. |
| Author | Rohma, Ilma Ainur Ade Azurat |
| Author_xml | – sequence: 1 givenname: Ilma Ainur surname: Rohma fullname: Rohma, Ilma Ainur – sequence: 2 surname: Ade Azurat fullname: Ade Azurat |
| BookMark | eNotkE1PAjEURRuDiYjsXXapi8HXzkenS4OCJENMDK4nnfYNKQ4taUcM_94BXb2bl3vu4tySkfMOCblnMOOsAPm0s192dmTC8hljorwiY54DTyQX2WjIUJaJgJzdkGmMOwDgPCtyLsekn3uDdIkOg-p9oC94xM4f9uh62nu6CcrF1oc9XS3WFX1YuX4o6t56Rxed_6HrAe8667a0Um77rbb4SK0bSEU_cCgmjYpo6GfEQC9wqzTeketWdRGn_3dCNovXzfwtqd6Xq_lzlegyLROlGwAtjZQMigYFMGFAsZwzLgoEw4TUXKJpGlWmeVsqlDkzOmPDixdZk04I_M3q4GMM2NaHYPcqnGoG9cVbffZWX7zVZ2_pL_KiZLk |
| ContentType | Journal Article |
| DBID | AAYXX CITATION |
| DOI | 10.21609/jiki.v17i2.1178 |
| DatabaseName | CrossRef |
| DatabaseTitle | CrossRef |
| DatabaseTitleList | CrossRef |
| DeliveryMethod | fulltext_linktorsrc |
| Discipline | Computer Science |
| EISSN | 2502-9274 |
| EndPage | 120 |
| ExternalDocumentID | 10_21609_jiki_v17i2_1178 |
| GroupedDBID | AAYXX ADBBV ALMA_UNASSIGNED_HOLDINGS BCNDV CITATION GROUPED_DOAJ |
| ID | FETCH-LOGICAL-c838-acb00c9d99106be7017d0a1521276e0d179c29edbba835f8ae951dc41edb264b3 |
| ISSN | 2088-7051 |
| IngestDate | Sat Nov 29 08:17:56 EST 2025 |
| IsDoiOpenAccess | false |
| IsOpenAccess | true |
| IsPeerReviewed | true |
| IsScholarly | true |
| Issue | 2 |
| Language | English |
| LinkModel | OpenURL |
| MergedId | FETCHMERGED-LOGICAL-c838-acb00c9d99106be7017d0a1521276e0d179c29edbba835f8ae951dc41edb264b3 |
| OpenAccessLink | https://jiki.cs.ui.ac.id/index.php/jiki/article/download/1178/509 |
| PageCount | 12 |
| ParticipantIDs | crossref_primary_10_21609_jiki_v17i2_1178 |
| PublicationCentury | 2000 |
| PublicationDate | 2024-06-02 |
| PublicationDateYYYYMMDD | 2024-06-02 |
| PublicationDate_xml | – month: 06 year: 2024 text: 2024-06-02 day: 02 |
| PublicationDecade | 2020 |
| PublicationTitle | Jurnal ilmu komputer dan informasi (Journal of computer science and information) (Online) |
| PublicationYear | 2024 |
| SSID | ssj0002246529 ssib044747899 |
| Score | 2.2575731 |
| Snippet | 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... |
| SourceID | crossref |
| SourceType | Index Database |
| StartPage | 109 |
| Title | Code Generator Development to Transform IFML (Interaction Flow Modelling Language) into a React-based User Interface |
| Volume | 17 |
| hasFullText | 1 |
| inHoldings | 1 |
| isFullTextHit | |
| isPrint | |
| journalDatabaseRights | – providerCode: PRVHPJ databaseName: ROAD: Directory of Open Access Scholarly Resources customDbUrl: eissn: 2502-9274 dateEnd: 99991231 omitProxy: false ssIdentifier: ssib044747899 issn: 2088-7051 databaseCode: M~E dateStart: 20160101 isFulltext: true titleUrlDefault: https://road.issn.org providerName: ISSN International Centre |
| link | http://cvtisr.summon.serialssolutions.com/2.0.0/link/0/eLvHCXMwtV09b9swECXctEOXfhf9BocODQS1Ei2L4mgEMRrACTq4QDaDJilUiS0HiewGHfor-4N6R4oMk6JAM3QRDEKmLd7D3Tvq-I6Q95k0tcmHOsVW1mmhRJ2KEROpKmWpjRSZdiKuU350VB0fiy-DwS9_Fma75G1bXV6Ks_9qahgDY-PR2VuYO0wKA_AZjA5XMDtc_8nwe2vt1aQhn46rgpBnzjxRTQ4mh1PLL3Fp-47hk-X6u22P5pS6p_1mJm4dNC18W2LRvepSjH06-QrP47YUa6mulxQ5ltssV5vktO8bkWiJVZWWJF80-MsRGVb-Jn_MyIlChaOVdvPiujBq_57o28rS34PlSibjpt2EYuMxLMP4xwZWId7ZYIWtwIo2Oxl4wJRnvSCtcWMj8OCCuc4-wYPzCKkscsd5JqLInttjd38EDZaXVnT1pDltPm5z3jB8k11dBUhfFHAjboZqRsij7BxznGFuZ0AN9eoOucv4SGC4OPy5771cUWDLgj4JPLECREU5su30wgO79-l20k83_lbEnyIiNHtEHvRGo2OHvMdkYNon5KHvDkL7YPGUdAhEGoBIIyDSbk0DECkCkX6IYEgRhjTAkHoY7lIEIZU0AiFFENIAwmdkNtmf7X1O-x4fqaog1EoFbl8JDVlKVi4Mh_igM4mckvHSZBrChWLC6MVCQqpQV9JARqBVkcMQUPnF8DnZadeteUFojRr4wPY5OBggWbmoqqEUOa9RwpAp85Ls-oWbnzkll_nfLPfqFve-JvevwPuG7HTnG_OW3FPbrrk4f2dN_xto8Zey |
| linkProvider | ISSN International Centre |
| openUrl | ctx_ver=Z39.88-2004&ctx_enc=info%3Aofi%2Fenc%3AUTF-8&rfr_id=info%3Asid%2Fsummon.serialssolutions.com&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=article&rft.atitle=Code+Generator+Development+to+Transform+IFML+%28Interaction+Flow+Modelling+Language%29+into+a+React-based+User+Interface&rft.jtitle=Jurnal+ilmu+komputer+dan+informasi+%28Journal+of+computer+science+and+information%29+%28Online%29&rft.au=Rohma%2C+Ilma+Ainur&rft.au=Ade+Azurat&rft.date=2024-06-02&rft.issn=2088-7051&rft.eissn=2502-9274&rft.volume=17&rft.issue=2&rft.spage=109&rft.epage=120&rft_id=info:doi/10.21609%2Fjiki.v17i2.1178&rft.externalDBID=n%2Fa&rft.externalDocID=10_21609_jiki_v17i2_1178 |
| thumbnail_l | http://covers-cdn.summon.serialssolutions.com/index.aspx?isbn=/lc.gif&issn=2088-7051&client=summon |
| thumbnail_m | http://covers-cdn.summon.serialssolutions.com/index.aspx?isbn=/mc.gif&issn=2088-7051&client=summon |
| thumbnail_s | http://covers-cdn.summon.serialssolutions.com/index.aspx?isbn=/sc.gif&issn=2088-7051&client=summon |