Figure 4 - uploaded by Samir Mbarki
Content may be subject to copyright.
Source publication
GUIs are essential components for today software. However, legacy applications do not benefit from the advantages of user interfaces new technologies that enhance the interaction and the quality of the system. Building a new system from another existing one is more requested and a very complex process. So, we opted for an ADM approach based on the...
Context in source publication
Citations
... All researchers used a hierarchical representation of the GUI in the form of a Domain Object Model (DOM) (Gotti and Mbarki 2016;Fleurey et al. 2007;Mesbah et al. 2012;Memon et al. 2003;Samir et al. 2007;Shah and Tilevich 2011;Joorabchi and Mesbah 2012;Brambilla and Fraternali 2014). Each node in the DOM tree represents a widget of the user interface. ...
... In addition to the DOM and the widgets, some authors added attributes (Gotti and Mbarki 2016;Garcés et al. 2017;Memon et al. 2003;Samir et al. 2007;Shah and Tilevich 2011;Joorabchi and Mesbah 2012) and events (Fleurey et al. 2007;Garcés et al. 2017;Samir et al. 2007;Joorabchi and Mesbah 2012;Mesbah et al. 2012). Attributes are used to customize the visual aspect of the widgets, and the events enable the representation of the navigation inside the GUI. ...
... Thus, attributes and events are important to have a detailed GUI meta-model. Gotti and Mbarki (2016) propose an approach to extract a detailed GUI representation from Java Swing code. To do so, and additionally to the DOM and the attributes, they identify different kinds of known widgets such as Button, Label, Panel, etc. ...
With the generalization of mobile devices and Web applications, GUI frameworks evolve at a fast pace: JavaFX replaced Swing, Angular 8 replaced Angular 1.4 which had replaced Google Web Toolkit (GWT). This situation forces organizations to migrate their applications to modern frameworks regularly so they do not become obsolete. There has been research in the past on automatic GUI migration. However, and concurrently, large organisations’ applications use many different technologies. For example, the IT company with which we are working, Berger-Levrault, wishes to migrate applications written in generic programming language (Java/GWT), proprietary “4th generation” languages (VisualBasic 6, PowerBuilder), or markup languages (Silverlight). Furthermore, one must expect that in a few years time, new frameworks will appear and new migrations will be required. Thus, there is a need for a language-agnostic migration approach allowing one to migrate various legacy GUI to the latest technologies. None of the existing solutions allow to deal with such a variety of GUI framework. They also typically focus on a subpart of the migration (i.e. how to extract a specific GUI framework) ignoring the re-engineering/forward-engineering part of the migration (which is straightforward for a single technology). This makes it difficult to adapt these solutions to other GUI frameworks. We propose an approach to migrate the GUI part of applications. It is based on meta-models to represent the visual element structure and layout. We detail how to create both the GUI extractors and generators, with guidelines to support new markup and programming languages. We evaluate our approach by implementing three extractors and generators for web-based or desktop-based user interfaces defined with generic programming languages (Java, Pharo, TypeScript) or markup languages (XML, HTML). We comment case studies on five applications, opened and closed source, of different sizes. The implementations of our generic approach detect 99% of the widgets and identify (i.e. determine the type of the widget) 97% of them. We give examples of the migrated GUIs, both successful and not.
... Naziha et al. [7] have discussed a number of existing model driven works and IFML modeling tools for the development of GUIs within an in-depth comparative study. Another IFML based solution has been proposed in [8] taking a different way for software modernization according to an architecture-driven modernization (ADM) [9] based approach. The point of convergence between these all previous IFML based solutions, is that they proceed through the code generation step in order to reach the source code of the corresponding GUIs design to be run later. ...
Quite recently, considerable attention has been paid to the design, implementation, and evaluation of graphical user interfaces due to the apparition of the new strategic trend of computing everywhere. Accordingly, it is necessary to adopt an abstract representation of systems front-end in order to ensure this trend. IFML (Interaction Flow Modeling Language) is a user interface description language used to describe the content and interaction behavior of applications front-end. It has been conceived with the executability aspect that is obtained via model transformations and full code generators into functional codes. however, these code generators are often accompanied by a loss of information. The main goal of this paper is to present a new virtual machine for directly executing GUIs models designed with IFML language in combination with the UML domain model; that captures the content dependency. These input models will be then run on different platforms and devices. We adopted a new model-driven approach that includes the hybrid approach of the interpretive compiler; through a set of transformation rules, for the implementation of the desired virtual machine.
... In their studies, Gotti and Mbarki [5] and Sánchez Ramón et al. [10] used the KDM meta-models. Both authors added the Attribute entity to the meta-model. ...
Developers used frameworks to create their User Interface. Those frameworks are developed in a specific version of a language and can be used until the retro-compatibility is broken. In such case, developers need to migrate their software systems to a new GUI framework. We proposed a three-step approach to migrate the front-end of an application. This approach includes an importer, a GUI meta-model and an exporter. We validate our experiment on 6 projects in Pharo. We are able to migrate 5 out of 6 projects that all conserve their widgets organization.
... Gotti and Mbarki [9] used a hybrid strategy to analyze Java applications. First they create a model from a static analysis of the source code. ...
... Gotti and Mbarki [9] and Sánchez Ramán et al. [23] proposed a meta-model inspired by the KDM models. The meta-model has the main entities defined by KDM. ...
In the context of a collaboration with Berger-Levrault, a major IT company, we are working on the migration of a GWT application to Angular. We focus on the GUI aspect of this migration which, even if both are web frameworks, is made difficult because they use different programming languages (Java for one, Typescript for the other) and different organization schemas (e.g. different XML files). Moreover, the new application must mimic closely the visual aspect of the old one so that the users of the application are not disturbed. We propose an approach in three steps that uses a meta-model to represent the GUI at a high abstraction level. We evaluated this approach on an application comprising 470 Java (GWT) classes representing 56 screens. We are able to model all the web pages of the application and 93% of the wid-gets they contain, and we successfully migrated (i.e., the result is visually equal to the original) 26 out of 39 pages (66%). We give examples of the migrated pages, both successful and not.
... IFML could be used not only in the model driven engineering, but also in the software modernization, and here we cite [8], one of the researches that proposed an architecture-driven modernization-based approach to obtain knowledge of the structure and behavior of source code by generating three independent platform combined models (KDM, IFML and TaskModel). The models capture various aspects about tasks, presentation and dialog structures and behaviors of the design knowledge, needed for the construction of the future user interface (UI). ...
Graphical user interfaces (GUIs) present a powerful part of software systems that allows a simplified assimilation and manipulation by users throw visual objects such as text, image and button. however, with the increasing complexity of GUIs and the diversity of their interaction mode required by users to access information anywhere and anytime, the need for designing efficient and more adaptive user interfaces has become a necessity. Therefore, UIs researchers have attempted to address these issues by designing user interfaces at a high level of abstraction to separate GUI’s specification from its implementation. Besides, the OMG (Object Management Group) adopted the Interaction Flow Modeling Language (IFML) as a standard in March 2013 for this purpose. In this paper, we present a new model driven development approach to efficiently execute the abstract representation of software’s front-end with focus on navigation between the views. We introduce a IFML virtual machine IFVM which executes user interfaces by passing from IFML models to be translated into an intermediate bytecode representation proposed as the instruction set of IFVM virtual machine.
... Gotti and Mbarki [5] used a hybrid strategy to analyze Java applications. The static analysis finds the widgets and attributes of a user interface and how they are structured. ...
—During the evolution of an application, it happens
that developers must change the programming language. In
the context of a collaboration with Berger-Levrault, a major
IT company, we are working on the migration of a GWT
application to Angular. We focus on the GUI aspect of this
migration which, even if both frameworks are web Graphical
User Interface (GUI) frameworks, is made difficult because they
use different programming languages and different organization
schema. Such migration is complicated by the fact that the new
application must be able to mimic closely the visual aspect of the
old one so that the users of the application are not disrupted.
We propose an approach in four steps that uses a meta-model to
represent the GUI at a high abstraction level. We evaluated this
approach on an application comprising 470 Java (GWT) classes
representing 56 pages. We are able to model all the web pages
of the application and 93% of the widgets they contain, and we
successfully migrated 26 out of 39 pages (66%). We give examples
of the migrated pages, both successful and not.
... Acerbis et al. (2015a;Bernaschina et al., 2017b;Brambilla et al., 2014;Brambilla, 2015;Umuhoza et al., 2015) focused on mobile applications. Other research works have exploited IFML in different domains, such as interactive systems (Gotti and Mbarki, 2016a), big data (Bernaschina et al., 2017a), execution models (Gotti and Mbarki, 2016b) and user behavior analysis (Bernaschina et al., 2017a). Table 1 highlights the existing works based on IFML and the case tool. ...
Modeling approaches based on standards are of paramount importance in the field of front-end design for web and mobile applications. Problems are often encountered during the selection of tools for designingapplications for developers and researchers, particularly applications that are related to time and cost in the market and academia. The Interaction Flow Modeling Language (IFML) is a recently standardized modeling language designed for managing the content expression, user interaction and behavior control of front-end applications. IFML brings several benefits to the development process of web and mobile front-end applications. Thus, several tools have been developed for the exploitation of technical artifacts offered by current specifications. In this study, we discuss the tools proposed for modeling IFML to provide a comparative analysis while considering various criteria. The result can be used as a basis of tool selection for specific aspects.
... For the reverse engineering step of Nooj GUI source code, we use a JDT parser [7] for the relevant programming language that allows the extraction of Nooj GUI knowledge and business logic that will be presented in ASTM model (according to its metamodel [11]); a model expressing the syntax of the source code; and also in GUIM model (according to its metamodel [6]); a model representing the graphical components, their interrelationships and their properties. It outlines the containers and the widgets of any main frame as well as their properties. ...
... In this present stage, we opted for a static and dynamic analysis as detailed in [6] to extract any information related to the syntax and structure of the Java source code as well as the presentation of graphical user interfaces and their behavior. ...
... There are some researches that are based on both the static and dynamic analysis to take advantages and best features of them, we cite [6], the authors proposed an ADM based approach that uses a static and dynamic analysis to obtain knowledge of the structure and behavior of source code. The approach gives a solution that generates three independent platform combined models (KDM, IFML and TaskModel) for good understanding and evolving the existing software assets. ...
The legacy of mainframe terminal applications has generally limited the complexity level in desktop applications’ user interfaces. Nevertheless the apparition of the new Internet-related technologies is driving to the migration of traditional desktop applications into the web to benefit from the internet technology services. However, GUI’s modernization is a new software engineering field that requires a thorough analysis to build and preserve the important characteristics and functionality of the user interfaces. It provides support for transforming existing system’s user interfaces to new ones that satisfy new demands. In this work, we have focused on the Architecture-driven modernization ADM approach as a best solution for the legacy system’s evolution. The OMG ADM Task Force defines a set of standards to facilitate interoperability between modernization tools. We cite the Knowledge Discovery Metamodel and Abstract Syntax Tree Metamodel. For our work, these two standards will help us to capture design knowledge needed for the construction of modern Nooj user interfaces. We present along this work a reengineering of Nooj application GUIs. We explain its migration process to transform the old desktop GUIs into modern ones respecting web technologies. The process consists of a deep analysis that affects both the structural and behavioral aspects of a GUI, and sophisticated reverse engineering algorithms that must be designed to cope with it.
Currently, the main objective of all programmers and designers is to render interactive systems usable and effective. So, users can complete their tasks and achieve their goals. To ensure that, programmers and designers require good understanding of system characteristics and functionality. This work focused on an approach to automate the process of extracting the system information. The approach is based on the ADM initiative as the best solution for system's evolution. The OMG ADM Task Force defines a set of standards to facilitate that, like Knowledge Discovery Metamodel, captures design knowledge needed for the construction of future user interfaces. Actually, KDM allows abstract structural and semantical aspect representation. However, no support exists for expressing behavior of system content, interaction, user control, and activities of the front-end applications. The authors hope to alleviate this lack by extending KDM model to fulfill the needs of complete abstract model construction.
