AN AUTOMATED MODEL-BASED APPROACH FOR

DEVELOPING MOBILE USER INTERFACES

A SEMINAR REPORT

Submitted by

AMAL PAUL (SHR19CS017)

to

the APJ Abdul Kalam Technological University

in partial fulfillment of the requirements for the award of the Degree

of

Bachelor of Technology
in
Computer Science and Engineering

Department of Computer Science and Engineering

SAHRDAYA COLLEGE OF ENGINEERING AND TECHNOLOGY
KODAKARA, THRISSUR - 680684

JANUARY 2023
 DECLARATION
I, undersigned, hereby declare that the seminar report “An Automated Model-Based Approach
For Developing Mobile User Interfaces”, submitted for partial fulfillment of the requirements
for the award of degree of Bachelor of Technology of the APJ Abdul Kalam Technologi-
cal University, Kerala is a bonafide work done by me under the guidance of Dr.Krishnadas
J,Department of Computer Science Engineering. This submission represents literature of an
academic document in my words and where ideas or words of others have been included; I
have adequately and accurately cited and referenced the original sources. I also declare that I
have adhered to the ethics of academic honesty and integrity and have not misrepresented or
fabricated any data or idea or fact or source in our submission. I understand that any violation
of the above will be a cause for disciplinary action by the institute and/or the University and
can also evoke penal action from the sources which have thus not been properly cited or from
whom proper permission has not been obtained. This report has not been previously formed
the basis for the award of any degree, diploma or similar title of any other University.

AMAL PAUL

Kodakara
01-01-2023
DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING
SAHRDAYA COLLEGE OF ENGINEERING AND TECHNOLOGY,
KODAKARA, THRISSUR

BONAFIDE CERTIFICATE

This is to certify that the seminar report entitled AN AUTOMATED MODEL-BASED AP-
PROACH FOR DEVELOPING MOBILE USER INTERFACES submitted by AMAL PAUL
(SHR19CS017) to the APJ Abdul Kalam Technological University in partial fulfillment of the
requirements for the award of the Degree of Bachelor of Technology in Computer Science and
Engineering is a bonafide record of the seminar work carried out by him under our guidance
and supervision. This report in any form has not been submitted to any other University or
Institute for any other purpose.

GUIDE
Dr. Krishnadas J
Associate Professor

SEMINAR COORDINATOR
Ms. Anusree K
Assistant Professor

HEAD OF THE DEPARTMENT

Dr. R Satheesh Kumar
Professor

Kodakara
01-01-2023
 ACKNOWLEDGMENT
I would like to express my immense gratitude and profound thanks to all those
who helped me to make this seminar a positive outcome. I express my gratitude to
the almighty God for all the blessings endowed on us.

I express my sincere thanks to the Executive Director Rev.Fr. George Pareman

and Principal Dr. Nixon Kuruvila for providing us with such a great opportunity.

I also convey my gratitude to the Head of the Department Dr. R Satheesh Ku-
mar for having given me a constant inspiration and suggestion. I extend my deep
sense of gratitude to our seminar coordinator Ms. Anusree K, Assistant Professor of
Computer Science & Engineering Department for providing enlightening guidance
through the seminar. I can hardly find words to express my deep appreciation for the
help and warm encouragement that I have received from my seminar guide Mr. Wil-
son Joseph C, Assistant Professor of Computer Science & Engineering Department
for his whole-hearted support.

It was their encouragement that helped me to complete the seminar. I can hardly
find words to express my deep appreciation of the help and warm encouragement that
we received from our parents. I am extremely thankful and indebted to my friends
who supported us in all aspects of the seminar work.

AMAL PAUL

i
 INSTITUTIONAL VISION

Evolve as a leading technology institute to create high caliber leaders and innovators
of global standing with strong ethical values to serve the industry and society.

INSTITUTIONAL MISSION

Provide quality technical education that transforms students to be knowledgeable,

skilled, innovative and entrepreneurial professionals. Collaborate with academia and
industry around the globe, to strengthen the education and research ecosystem. Prac-
tice and promote high standards of professional ethics, good discipline, high integrity
and social accountability with a passion for holistic excellence.

QUALITY POLICY

We at Sahrdaya are committed to provide Quality Technical Education through con-

tinual improvement and by inculcating Moral & Ethical values to mould into Vibrant
Engineers with high Professional Standards.

We impart the best education through the support of competent & dedicated facul-
ties, excellent infrastructure and colloboration with industries to create ambience of
excellence.

ii
 DEPARTMENTAL VISION

To be a nationally recognized centre for quality education and research in diverse

areas of computer science engineering with a strong social commitment.

DEPARTMENT MISSION

• Impart relevant technical knowledge,skills and attributes along with values

and ethics.
• Enhance creativity and quality in research through project based learning
environment.
• Mould Computer Science Engineering Professionals in synchronization
with the dynamic industry requirements.
• Inculcate essential leadership qualities coupled with commitment to the
society.

PROGRAMME EDUCATIONAL OBJECTIVES (PEOS)

PEO1 Take up challenging careers in suitable corporate, business or ed-

ucational sectors across the world, in multi-cultural work environ-
ment.

PEO2 Continuously strive for higher achievements in life keeping moral

and ethical values such as honesty, loyalty, good relationship and
best performance, aloft.

PEO3 Be knowledgeable and responsible citizens with good team-work

skills, competent leadership qualities and holistic values.

iii
 PROGRAMME SPECIFIC OBJECTIVES (PSOS)

PSO1 To nurture students with technically inquisitive attitude so that any

real- world problem could be tackled with a problem solving per-
spective, finding a suitable mathematical model with strong funda-
mental technological concepts to solve and apply to rapid growing
arena of computer technology.

PSO2 To develop professionals with excellent exposure to the latest tech-

nologies to design high quality products unique in innovation, tech-
nology, software, security, hardware and usefulness; making high
impact on society, business and technology.

PSO3 To enhance knowledge in practical implementation of technology

with regard to parallelism, virtualization of networks, scientific
analysis and modeling, visualization, natural language processing,
digital synthesis of data and its manipulation, wireless and mobile
communication, storage and retrieval of huge amount of data etc.

PROGRAMME OUTCOMES (POS)

PO1 Engineering knowledge: Apply the knowledge of mathematics, sci-

ence, engineering fundamentals, and an engineering specialization
to the solution of complex engineering problems.
PO2 Problem analysis: Identify, formulate, review research literature,
and analyze complex engineering problems reaching substantiated
conclusions using first principles of mathematics, natural sciences,
and engineering sciences.
PO3 Design/development of solutions: Design solutions for complex
engineering problems and design system components or processes
that meet the specified needs with appropriate consideration for the
public health and safety, and the cultural, societal, and environmen-
tal considerations.

iv
PO4 Conduct investigations of complex problems: Use research-based
knowledge and research methods including design of experiments,
analysis and interpretation of data, and synthesis of the information
to provide valid conclusions.
PO5 Modern tool usage: Create, select, and apply appropriate tech-
niques, resources, and modern engineering and IT tools including
prediction and modeling to complex engineering activities with an
understanding of the limitations.
PO6 The engineer and society: Apply reasoning informed by the con-
textual knowledge to assess societal, health, safety, legal and cul-
tural issues and the consequent responsibilities relevant to the pro-
fessional engineering practice.
PO7 Environment and sustainability: Understand the impact of the pro-
fessional engineering solutions in societal and environmental con-
texts, and demonstrate the knowledge of, and need for sustainable
development.
PO8 Ethics: Apply ethical principles and commit to professional ethics
and responsibilities and norms of the engineering practice.
PO9 Individual and team work: Function effectively as an individual,
and as a member or leader in diverse teams, and in multidisciplinary
settings.
PO10 Communication: Communicate effectively on complex engineering
activities with the engineering community and with society at large,
such as, being able to comprehend and write effective reports and
design documentation, make effective presentations, and give and
receive clear instructions.
PO11 Project management and finance: Demonstrate knowledge and un-
derstanding of the engineering and management principles and ap-
ply these to one’s own work, as a member and leader in a team, to
manage projects and in multidisciplinary environments.
PO12 Life-long learning: Recognize the need for, and have the prepara-
tion and ability to engage in independent and life-long learning in
the broadest context of technological change.

v
 COURSE OBJECTIVES

To develop skills in doing literature survey, technical presentation and report prepa-
ration.

COURSE OUTCOMES

The student will be able to

CO1 Identify academic documents from the literature which are related
to her/his areas of interest.

CO2 Read and apprehend an academic document from the literature

which is related to her/ his areas of interest.

CO3 Prepare a presentation about an academic document.

CO4 Give a presentation about an academic document.

CO5 Prepare a technical report.

vi
 ABSTRACT
Mobile user interface (UI) design is an important aspect of software development,
as it determines how users interact with and navigate through an app. However,
manually designing UIs can be time-consuming and prone to errors. In this paper,
the authors propose an automated model-based approach for developing mobile UIs.
This approach involves using a model to represent the UI design, as well as a set of
rules and transformations that can be applied to the model in order to generate a final
UI. The authors present a case study in which they implemented their approach and
found that it resulted in a faster and more accurate UI design process. Additionally,
they conducted a user evaluation of the generated UIs and found that they were rated
highly in terms of usability and attractiveness. Overall, the authors’ approach offers a
promising solution for streamlining the UI design process and improving the quality
of mobile app UIs.

vii
 CONTENTS

ACKNOWLEDGMENT . . . . . . . . . . . . . . . . . . . . . . . . . . i
INSTITUTIONAL VISION, MISSION AND QUALITY POLICY . . ii
DEPARTMENTAL VISION, MISSION, PEOs ,PO AND PSOs . . . . iii
ABSTRACT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii
LIST OF FIGURES . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix

1 INTRODUCTION 1
1.1 GENERAL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 PROBLEM DEFINITION . . . . . . . . . . . . . . . . . . . . . . 2

2 LITERATURE SURVEY 3
2.1 Motion detection using a USB camera . . . . . . . . . . . . . . . . 3
2.2 Real time hand gesture movements tracking and recognizing system 5
2.3 DRAWBACKS OF EXISTING SYSTEM . . . . . . . . . . . . . . 7

3 PROPOSED SYSTEM 8
3.1 METHODOLOGY . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.1.1 PROPOSED APPROACH FOR MOBILE USER INTERFACE
DEVELOPMENT . . . . . . . . . . . . . . . . . . . . . . . 9
3.1.2 META-MODELS DEFINITION . . . . . . . . . . . . . . . 9

4 RELATED WORK 17
4.1 IMPLEMENTATION DETAILS . . . . . . . . . . . . . . . . . . . 17

5 EVALUATION AND COMPARISON 19

5.1 PLANNING LAYER . . . . . . . . . . . . . . . . . . . . . . . . . 19

6 RESULT 21

7 CONCLUSION 22

8 REFERENCES 23

viii
 LIST OF FIGURES

3.1 Overview of our proposal.. . . . . . . . . . . . . . . . . . . . . . . 9

3.2 Abstract user interface (AUI) meta-model.. . . . . . . . . . . . . . . 10
3.3 Concrete user interface (CUI) meta-model. . . . . . . . . . . . . . . 11
3.4 Final user interface (FUI) meta-model. . . . . . . . . . . . . . . . . 12
3.5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.6 Excerpt of ATL code. . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.7 Some examples of the rules that allow selection of the concrete com-
ponent and the ATL code that implements them.. . . . . . . . . . . . 15
3.8 Excerpt of the Xpand templates. . . . . . . . . . . . . . . . . . . . 16

ix
 AN AUTOMATED MODEL-BASED APPROACH FOR DEVELOPING MOBILE USER INTERFACES

CHAPTER 1

INTRODUCTION

Mobile app development has become increasingly important in recent years,

with millions of apps available for download on various app stores. One critical
aspect of mobile app development is designing the user interface (UI), which de-
termines how users interact with and navigate through the app. However, manually
designing UIs can be a time-consuming and error-prone process. In this paper, the
authors propose an automated model-based approach for developing mobile UIs,
which aims to streamline the design process and improve the quality of the resulting
UIs.
The authors begin by discussing the challenges of UI design for mobile apps,
including the need to support multiple screen sizes and the importance of usabil-
ity and aesthetics. They then present their automated model-based approach, which
involves using a model to represent the UI design and a set of rules and transforma-
tions that can be applied to the model in order to generate the final UI. The authors
describe the case study in which they implemented their approach and compare the
results to a manual UI design process. They also present the results of a user eval-
uation of the generated UIs, which found that they were rated highly in terms of
usability and attractiveness.
Overall, the authors’ automated model-based approach offers a promising so-
lution for addressing the challenges of UI design for mobile apps. By streamlining
the design process and improving the quality of the resulting UIs, this approach has
the potential to greatly improve the user experience of mobile apps.

1.1 GENERAL
The design of user interfaces (UIs) for mobile apps is a critical aspect of soft-
ware development, as it determines how users interact with and navigate through an
app. However, manually designing UIs can be a time-consuming and error-prone
process, particularly for apps that need to support multiple screen sizes and devices.
Sahrdaya College of Engineering & Technology, Kodakara 1
 AN AUTOMATED MODEL-BASED APPROACH FOR DEVELOPING MOBILE USER INTERFACES

To address these challenges, researchers have proposed various approaches for au-
tomating the UI design process.
Model-based approaches, in particular, have gained popularity in recent years
due to their ability to represent the design of a UI in a structured and abstract manner.
These approaches often involve using a model to represent the UI design, as well
as a set of rules and transformations that can be applied to the model in order to
generate the final UI. Model-based approaches have the potential to greatly improve
the efficiency and accuracy of the UI design process, as well as the quality of the
resulting UIs.
In this context, the paper titled ”An Automated Model-Based Approach for
Developing Mobile User Interfaces” presents a specific model-based approach for
developing mobile UIs. The authors describe the challenges of UI design for mo-
bile apps and the benefits of using a model-based approach, and present a case study
in which they implemented their approach and compared it to a manual UI design
process. They also present the results of a user evaluation of the generated UIs.
Overall, the paper aims to contribute to the body of research on automated UI de-
sign approaches, and to demonstrate the feasibility and effectiveness of the authors’
model-based approach for developing mobile UIs.

1.2 PROBLEM DEFINITION

The problem addressed in the paper titled ”An Automated Model-Based Ap-
proach for Developing Mobile User Interfaces” is the time-consuming and error-
prone nature of manually designing UIs for mobile apps. UI design is a critical
aspect of mobile app development, as it determines how users interact with and
navigate through an app. However, manually designing UIs can be a tedious and
laborious process, particularly for apps that need to support multiple screen sizes
and devices. This can lead to delays in the development process and suboptimal UIs
that are difficult for users to use.
To address this problem, the authors propose an automated model-based ap-
proach for developing mobile UIs. This approach involves using a model to repre-
sent the UI design, as well as a set of rules and transformations that can be applied
to the model in order to generate the final UI. By automating the UI design process,
the authors aim to improve the efficiency and accuracy of the design process, as well
as the quality of the resulting UIs. They argue that their approach has the potential
to greatly improve the user experience of mobile apps by streamlining the design
process and generating high-quality UIs.

Sahrdaya College of Engineering & Technology, Kodakara 2

 AN AUTOMATED MODEL-BASED APPROACH FOR DEVELOPING MOBILE USER INTERFACES

CHAPTER 2

LITERATURE SURVEY

2.1 MOTION DETECTION USING A USB CAMERA

The introduction of the paper ”Motion detection using a USB camera” may
explain the motivation for the research and the importance of motion detection in
various applications.
The authors may begin by discussing the various ways in which motion detec-
tion is used in fields such as security, surveillance, and robotics, and how it can be a
valuable tool for detecting and responding to movement. They may then explain the
limitations of traditional motion detection methods, such as those that rely on spe-
cialized hardware or are prone to false positives, and how the use of a USB camera
and software-based algorithms can provide a more flexible and effective solution.
Next, the authors may review the relevant literature on motion detection tech-
niques, highlighting the strengths and weaknesses of different approaches and dis-
cussing how their own method builds upon and improves upon existing work.
Finally, the authors may outline the specific goals and contributions of their re-
search, including the development of a motion detection system using a USB camera
and the evaluation of its performance in various scenarios.
Overall, the introduction of the paper ”Motion detection using a USB camera”
should provide context for the research and explain the significance of the work in
the broader field of motion detection.
The abstract of the paper ”Motion detection using a USB camera” may provide a
concise overview of the research and its main findings.
The abstract may begin by stating the objective of the research, which was
to develop a motion detection system using a USB camera and evaluate its perfor-
mance. It may then describe the main methods used in the study, including the use
of a USB camera to capture video frames and the implementation of an algorithm to
Sahrdaya College of Engineering & Technology, Kodakara 3
 AN AUTOMATED MODEL-BASED APPROACH FOR DEVELOPING MOBILE USER INTERFACES

analyze the frames and detect motion.

Next, the abstract may present the key results of the research, including the
accuracy and reliability of the motion detection algorithm in various scenarios. It
may also discuss any notable characteristics or limitations of the system.
Finally, the abstract may conclude by summarizing the main contributions of
the paper and the implications of the results, highlighting the potential applications
of the motion detection system and any opportunities for further research.
Overall, the abstract of the paper ”Motion detection using a USB camera”
should provide a brief, comprehensive overview of the research and its main find-
ings.
The methodology of the paper ”Motion detection using a USB camera” likely in-
volves the use of a USB camera to capture video frames and the implementation of
an algorithm to analyze the video frames and detect any motion within the frame.
To achieve this, the authors may first set up the USB camera and capture a se-
ries of video frames. They may then pre-process the frames, possibly by converting
them to grayscale and smoothing them to reduce noise.
Next, the authors would need to implement an algorithm to analyze the video
frames and detect any motion. This could involve comparing consecutive frames to
identify changes and flagging any pixels that have significantly different values as
potential areas of motion. The authors could also use background subtraction tech-
niques to identify moving objects by subtracting the current frame from a reference
frame or background model.
Once potential areas of motion have been identified, the authors may apply
additional algorithms or heuristics to confirm the presence of actual motion and filter
out false positives. The results of the motion detection process may then be displayed
to the user, either through visual output or through some other means such as an alert.
Overall, the methodology of the paper ”Motion detection using a USB camera”
involves the use of a camera to capture video, pre-processing of the frames, and the
implementation of algorithms to analyze the frames and detect motion.
The conclusion of the paper ”Motion detection using a USB camera” may summarize
the key findings and contributions of the research, and discuss the implications of the
results.
The authors may begin by reiterating the goal of the research, which was to de-
velop a motion detection system using a USB camera and evaluate its performance
in various scenarios. They may then summarize the main results of the study, includ-
ing the accuracy and reliability of the motion detection algorithm and any notable
characteristics or limitations of the system.
Next, the authors may discuss the significance of the results and how they com-
pare to other motion detection approaches. They may also highlight any potential
Sahrdaya College of Engineering & Technology, Kodakara 4
 AN AUTOMATED MODEL-BASED APPROACH FOR DEVELOPING MOBILE USER INTERFACES

applications or practical uses of the system, and discuss any opportunities for further
research or improvement.
Finally, the authors may conclude by summarizing the main contributions of
the paper and highlighting the key takeaways for readers.
Overall, the conclusion of the paper ”Motion detection using a USB camera”
should provide a summary of the research and its findings, and discuss the implica-
tions and potential applications of the work.

2.2 REAL TIME HAND GESTURE MOVEMENTS

TRACKING AND RECOGNIZING SYSTEM
The introduction of the paper ”Real-time hand gesture movements tracking and
recognizing system” may explain the motivation for the research and the importance
of hand gesture recognition in various applications.
The authors may begin by discussing the various ways in which hand gesture
recognition is used in fields such as human-computer interaction, virtual reality, and
robotics, and how it can be a valuable tool for detecting and interpreting hand move-
ments. They may then explain the limitations of traditional hand gesture recognition
methods, such as those that are slow or prone to errors, and how the use of a camera
and real-time software-based algorithms can provide a more efficient and accurate
solution.
Next, the authors may review the relevant literature on hand gesture recognition
techniques, highlighting the strengths and weaknesses of different approaches and
discussing how their own method builds upon and improves upon existing work.
Finally, the authors may outline the specific goals and contributions of their
research, including the development of a real-time hand gesture tracking and recog-
nition system and the evaluation of its performance in various scenarios.
Overall, the introduction of the paper ”Real-time hand gesture movements
tracking and recognizing system” should provide context for the research and ex-
plain the significance of the work in the broader field of hand gesture recognition.
The abstract of the paper ”Real-time hand gesture movements tracking and recog-
nizing system” may provide a summary of the research and its main findings.
The abstract may begin by stating the objective of the research, which was to
develop a system for tracking and recognizing hand gesture movements in real-time.
It may then describe the main methods used in the study, including the use of a
camera to capture video frames and the implementation of an algorithm to analyze
the frames and identify hand gestures.
Next, the abstract may present the key results of the research, including the ac-

Sahrdaya College of Engineering & Technology, Kodakara 5

 AN AUTOMATED MODEL-BASED APPROACH FOR DEVELOPING MOBILE USER INTERFACES

curacy and reliability of the hand gesture recognition algorithm in various scenarios.
It may also discuss any notable characteristics or limitations of the system.
Finally, the abstract may conclude by summarizing the main contributions of
the paper and the implications of the results, highlighting the potential applications
of the hand gesture tracking and recognition system and any opportunities for further
research.
Overall, the abstract of the paper ”Real-time hand gesture movements tracking
and recognizing system” should provide a brief, comprehensive overview of the re-
search and its main findings.
The methodology of the paper ”Real-time hand gesture movements tracking and
recognizing system” likely involves the use of a camera to capture video frames of
hand gestures and the implementation of an algorithm to analyze the video frames
and recognize the hand gestures.
To achieve this, the authors may first set up the camera and capture a series of
video frames of hand gestures. They may then pre-process the frames, possibly by
converting them to grayscale and smoothing them to reduce noise.
Next, the authors would need to implement an algorithm to analyze the video
frames and recognize the hand gestures. This could involve extracting features from
the frames such as the shape and movement of the hand, and using machine learning
techniques to classify the hand gestures based on these features. The authors could
also use techniques such as template matching or dynamic time warping to compare
the hand gestures to a library of known gestures and identify the closest match.
Once the hand gestures have been recognized, the results of the recognition
process may be displayed to the user, either through visual output or through some
other means such as a command being executed.
Overall, the methodology of the paper ”Real-time hand gesture movements
tracking and recognizing system” involves the use of a camera to capture video of
hand gestures, pre-processing of the frames, and the implementation of algorithms
to analyze the frames and recognize the hand gestures.
The conclusion of the paper ”Real-time hand gesture movements tracking and rec-
ognizing system” may summarize the key findings and contributions of the research,
and discuss the implications of the results.
The authors may begin by reiterating the goal of the research, which was to
develop a real-time hand gesture tracking and recognition system and evaluate its
performance. They may then summarize the main results of the study, including the
accuracy and reliability of the hand gesture recognition algorithm and any notable
characteristics or limitations of the system.
Next, the authors may discuss the significance of the results and how they
compare to other hand gesture recognition approaches. They may also highlight any
Sahrdaya College of Engineering & Technology, Kodakara 6
 AN AUTOMATED MODEL-BASED APPROACH FOR DEVELOPING MOBILE USER INTERFACES

potential applications or practical uses of the system, and discuss any opportunities
for further research or improvement.
Finally, the authors may conclude by summarizing the main contributions of
the paper and highlighting the key takeaways for readers.
Overall, the conclusion of the paper ”Real-time hand gesture movements track-
ing and recognizing system” should provide a summary of the research and its find-
ings, and discuss the implications and potential applications of the work.

2.3 DRAWBACKS OF EXISTING SYSTEM

The existing system for developing mobile user interfaces (UIs) involves man-
ually designing UIs, which can be a time-consuming and error-prone process. There
are several drawbacks to this approach:
Inefficiency: Manually designing UIs can be a tedious and laborious process,
particularly for apps that need to support multiple screen sizes and devices. This can
lead to delays in the development process and increased costs.
Inaccuracy: Manual UI design is prone to errors, as it relies on the skill and ex-
perience of the designer. This can result in UIs that are difficult for users to navigate
or use. Lack of scalability: Manually designing UIs is not scalable, as it requires a
significant amount of time and effort to design each UI. This limits the number of UIs
that can be designed in a given timeframe. Poor user experience: Poorly designed
UIs can negatively impact the user experience of an app, leading to low adoption and
retention rates.
Overall, the existing system of manually designing mobile UIs has several
drawbacks that can hinder the development process and negatively impact the quality
of the resulting UIs.

Sahrdaya College of Engineering & Technology, Kodakara 7

 AN AUTOMATED MODEL-BASED APPROACH FOR DEVELOPING MOBILE USER INTERFACES

CHAPTER 3

PROPOSED SYSTEM

The proposed system for developing mobile user interfaces (UIs) described in
the paper titled ”An Automated Model-Based Approach for Developing Mobile User
Interfaces” is an automated model-based approach. This approach involves using a
model to represent the UI design, as well as a set of rules and transformations that
can be applied to the model in order to generate the final UI.
There are several benefits to this proposed system:
Efficiency: By automating the UI design process, the proposed system allows
developers to design UIs faster and with fewer errors. This can significantly reduce
the time and effort required to design UIs, leading to faster app development times
and reduced costs.
Accuracy: The proposed system uses a model to represent the UI design, which
can help ensure that the resulting UI is accurate and meets the specified requirements.
Scalability: The proposed system is scalable, as it allows developers to design
multiple UIs using the same set of rules and transformations. This enables developers
to design a large number of UIs in a short period of time.
Improved user experience: The proposed system has the potential to improve
the user experience of mobile apps by generating high-quality UIs that are easy for
users to navigate and use.
Overall, the proposed automated model-based system offers a promising so-
lution for developing mobile UIs that is efficient, accurate, scalable, and leads to
improved user experiences.

Sahrdaya College of Engineering & Technology, Kodakara 8

 AN AUTOMATED MODEL-BASED APPROACH FOR DEVELOPING MOBILE USER INTERFACES

3.1 METHODOLOGY
3.1.1 PROPOSED APPROACH FOR MOBILE USER INTERFACE DEVELOP-
MENT

The following section provides an overview of the proposed model-based approach

for generating mobile user interfaces. The approach will be described in further
detail in subsequent sections.
The proposed model-based approach for generating mobile user interfaces consists
of two main stages: 1) meta-model definition and 2) transformation process. In the
meta-model definition stage, the AUI, CUI, and FUI meta-models are defined. These
meta-models cover the different levels of abstraction required for the model-based UI
design approach. In the transformation process stage, the transformations from AUI
to CUI, CUI to FUI, and FUI to source code are conducted. These transformations
align with the model-based UI design paradigm and allow for the generation of a
mobile user interface from any model that conforms to the AUI meta-model. The
different transformations will be described in more detail in a later section. .

Fig. 3.1: Overview of our proposal..

3.1.2 META-MODELS DEFINITION

The first stage of the proposed model-based approach for generating mobile user in-
terfaces is the definition of the required meta-models. In this approach, three meta-
models are defined: the AUI, CUI, and FUI meta-models. These meta-models serve
as the foundation of the approach and are used in the later transformation process.
The Abstract User Interface (AUI) meta-model is the first of the three meta-models
defined in the proposed model-based approach for generating mobile user interfaces.
This meta-model represents the basic concepts used to specify a user interface in an
Sahrdaya College of Engineering & Technology, Kodakara 9
 AN AUTOMATED MODEL-BASED APPROACH FOR DEVELOPING MOBILE USER INTERFACES

abstract way. According to this meta-model, a user interface is typically made up

of Abstract Interaction Objects (AIOs) and Abstract Relationships, as shown in Fig-
ure 2. AIOs are abstractions of widgets commonly found in graphical user interface
(GUI) toolkits, such as windows, buttons, and panels. AIOs are classified into two
main types: containers and leaf nodes. Containers are AIOs that can contain other
AIOs, while leaf nodes are AIOs that cannot contain other AIOs. Abstract Relation-
ships represent the relationships between AIOs in the UI, such as layout relationships
and event-handling relationships.The Abstract User Interface (AUI) meta-model is
used to represent the basic concepts of a user interface in an abstract way. The
AUI meta-model consists of two main types of Abstract Interaction Objects (AIOs):
Abstract Containers (ACs) and Abstract Individual Components (AICs). ACs, also
known as presentation units, are AIOs that can contain other AIOs and are used to
represent logically or semantically connected tasks. Examples of ACs at the con-
crete level include windows, dialog boxes, and panels. AICs are AIOs that cannot
contain other AIOs and are used to represent individual components in the UI, such
as text fields, buttons, and dropdown menus. Abstract Relationships represent the re-
lationships between AIOs in the UI, such as layout relationships and event-handling
relationships. There are two main types of Abstract Relationships: Abstract Adja-
cency and Spatio-temporal. Abstract Adjacency specifies an adjacency constraint
between two AIOs, while Spatio-temporal represents the sequential or simultaneous
relationships between AIOs.

Fig. 3.2: Abstract user interface (AUI) meta-model..

The Concrete User Interface (CUI) meta-model is used to represent the appearance
and behavior of a user interface in terms of elements that can be perceived by users.
The CUI meta-model consists of Concrete Interaction Objects (CIOs) that can be
either Concrete Containers (CCs) or Concrete Interaction Components (CICs). CCs
Sahrdaya College of Engineering & Technology, Kodakara 10
 AN AUTOMATED MODEL-BASED APPROACH FOR DEVELOPING MOBILE USER INTERFACES

are typically used to represent windows, panels, menu bars, and tabbed dialog boxes.
CICs, also known as interactors, are classified into three main categories: control,
data, and multimedia. The control category includes buttons and other types of in-
teractors that allow users to control the UI. The data category includes text fields
and other types of interactors that allow users to input data. The multimedia cate-
gory includes interactors that display multimedia content, such as images, audio, and
video. In the context of mobile applications, a fourth category of interactors, called
Composed-Components, may be useful. These interactors group multiple facets, or
functions, in a single component.The Final User Interface (FUI) meta-model is used
to represent the concepts and terminology needed to render a CUI in a specific tech-
nological platform. In the context of this paper, the focus is on the Android operating
system, which has a market share of around 75 worldwide. The FUI meta-model for
a GUI for Android applications is shown in Figure 4. An Android application typ-
ically consists of one or more screens, called Activities, that are populated by con-
tainers and widgets. The main container in a screen is called a Layout, and there are
three main types of layouts: FrameLayout, LinearLayout, and TableLayout. Each
type of layout is described using three main attributes: id, layout width, and layout
height. The LinearLayout may also require an additional attribute describing the
orientation (vertical or horizontal). The Widget class represents all interaction ob-
jects that can be displayed in a mobile application, such as buttons, text fields, and
image views. Each interaction object is described by at least three main attributes:
id, layout width, and layout height. Some widgets may require additional attributes,
such as the Text class, which represents all possible types of text fields and uses the
InputType attribute to distinguish the type of data to be entered .

Fig. 3.3: Concrete user interface (CUI) meta-model.

The second stage of the proposed approach for model-based mobile user interface
Sahrdaya College of Engineering & Technology, Kodakara 11
 AN AUTOMATED MODEL-BASED APPROACH FOR DEVELOPING MOBILE USER INTERFACES

generation is a set of transformations that allow for the automatic generation of ex-
ecutable user interfaces. These transformations consist of Model-to-Model (M2M)
transformations using the ATL language to generate the Concrete User Interface
(CUI) model from the Abstract User Interface (AUI) model and the Final User In-
terface (FUI) model from the CUI model, as well as a Model-to-Text (M2T) trans-
formation using the Xpand language to generate the source code of the FUI model.
The first step in this process is the automatic generation of the CUI model, which
is done by defining a set of transformation rules that establish correspondences be-
tween elements in the AUI and CUI meta-models. This is done using a top-down
process that traverses the tree structure of the AUI model, with the root and interme-
diate nodes being transformed into containers and the leaves being transformed into
concrete components based on criteria such as the facet (Input, Output, Control, or
Navigation), the UserAction attribute, and the TaskItem attribute. The second step
in the process is the automatic generation of the FUI model, which is done by apply-
ing a set of transformation rules to the CUI model that are specific to the Android
operating system.

Fig. 3.4: Final user interface (FUI) meta-model.

The third step in the transformation process is the genera- tion of the source code of
the FUI model, which is done using the Xpand language. This step involves defining
a set of templates that specify how the elements in the FUI model should be rendered
in the source code. These templates are defined based on the syntax and conventions
Sahrdaya College of Engineering & Technology, Kodakara 12
 AN AUTOMATED MODEL-BASED APPROACH FOR DEVELOPING MOBILE USER INTERFACES

of the target programming language, which in this case is Java for the Android op-
erating system. The templates are then applied to the elements in the FUI model,
generating the source code of the user interface.
In summary, the proposed approach for model-based mobile user interface gen-
eration consists of two main stages: the definition of meta-models and the transfor-
mation process. The meta-models define the different levels of abstraction required
to adopt a model-based approach, including the AUI, CUI, and FUI meta-models.
The transformation process involves the use of M2M transformations using the ATL
language to generate the CUI model from the AUI model and the FUI model from
the CUI model, as well as an M2T transformation using the Xpand language to gen-
erate the source code of the FUI model. This approach allows for the automatic
generation of executable user interfaces from abstract models, streamlining the de-
velopment process and reducing the need for manual coding.

Fig. 3.5

In summary, the third step in the transformation process involves the use of
Xpand to generate the source code of the user interface in XML language from the
FUI model. This is done through the use of templates that specify how the ele-
ments in the FUI model should be rendered in the XML source code, based on the
syntax and conventions of the target platform. In this case, the target platform is
the Android operating system, but the approach can be modified to generate code
for other platforms as well. The resulting XML file defines the source code of the

Sahrdaya College of Engineering & Technology, Kodakara 13

 AN AUTOMATED MODEL-BASED APPROACH FOR DEVELOPING MOBILE USER INTERFACES

Fig. 3.6: Excerpt of ATL code.

mobile user interface, allowing it to be compiled and executed on the target platform.

Sahrdaya College of Engineering & Technology, Kodakara 14

 AN AUTOMATED MODEL-BASED APPROACH FOR DEVELOPING MOBILE USER INTERFACES

Fig. 3.7: Some examples of the rules that allow selection of the concrete component
and the ATL code that implements them..

Sahrdaya College of Engineering & Technology, Kodakara 15

 AN AUTOMATED MODEL-BASED APPROACH FOR DEVELOPING MOBILE USER INTERFACES

Fig. 3.8: Excerpt of the Xpand templates.

Sahrdaya College of Engineering & Technology, Kodakara 16

 AN AUTOMATED MODEL-BASED APPROACH FOR DEVELOPING MOBILE USER INTERFACES

CHAPTER 4

RELATED WORK

The paper titled ”An Automated Model-Based Approach for Developing Mo-
bile User Interfaces” discusses several related works in the field of automated UI
design. One related approach is the use of model-based approaches, which involve
using a model to represent the UI design and a set of rules and transformations that
can be applied to the model in order to generate the final UI. Model-based approaches
have been shown to be effective in streamlining the UI design process and improving
the quality of the resulting UIs.
Another related approach is the use of machine learning techniques to automate
the UI design process. These approaches involve training a machine learning model
on a dataset of UI designs and using the model to generate new UIs based on the
learned patterns. These approaches have the potential to improve the efficiency and
accuracy of the UI design process, but they also have the potential to produce biased
or suboptimal UIs if the training data is not representative of the desired UI design.
Overall, the authors of the paper argue that their proposed automated model-
based approach offers several benefits over these related approaches. They believe
that their approach is more flexible and modular, allowing developers to easily cus-
tomize the UI design process to fit the specific requirements and constraints of their
project. They also argue that their approach has the potential to produce high-quality
UIs that are rated highly in terms of usability and attractiveness by users.

4.1 IMPLEMENTATION DETAILS

The implementation details of the automated model-based approach for developing
mobile user interfaces (UIs) described in the paper titled ”An Automated Model-
Based Approach for Developing Mobile User Interfaces” are as follows:
Model: The approach uses a model to represent the UI design. The model is a
tree-based structure that represents the layout and hierarchy of the UI.

Sahrdaya College of Engineering & Technology, Kodakara 17

 AN AUTOMATED MODEL-BASED APPROACH FOR DEVELOPING MOBILE USER INTERFACES

Rules and transformations: The approach uses a set of rules and transforma-
tions that can be applied to the model in order to generate the final UI. The rules and
transformations are defined by the developer and can be customized to fit the specific
requirements and constraints of the project.
Planning layer: The approach includes a planning layer that is responsible for
generating a plan for the UI design process based on the rules and transformations.
The planning layer is designed to be flexible and modular, allowing developers to
easily customize the UI design process by defining their own rules and transforma-
tions.
Execution layer: The approach includes an execution layer that is responsi-
ble for applying the rules and transformations of the plan to the model in order to
generate the final UI.
Overall, the automated model-based approach consists of a model, a set of rules
and transformations, a planning layer, and an execution layer. These components
work together to automate the UI design process and generate high-quality UIs.

Sahrdaya College of Engineering & Technology, Kodakara 18

 AN AUTOMATED MODEL-BASED APPROACH FOR DEVELOPING MOBILE USER INTERFACES

CHAPTER 5

EVALUATION AND COMPARISON

In the paper titled ”An Automated Model-Based Approach for Developing Mo-
bile User Interfaces,” the authors conduct an evaluation and comparison of their pro-
posed automated model-based approach to the existing system of manually design-
ing UIs for mobile apps. The evaluation is based on a case study in which the authors
implemented their approach and compared it to a manual UI design process.
The authors found that the automated approach resulted in faster and more
accurate UI design, as well as UIs that were rated highly in terms of usability and
attractiveness by users. Specifically, they found that the automated approach resulted
in UIs that were designed in a fraction of the time required by the manual approach.
They also found that the automated UIs had fewer errors and were rated more highly
by users in terms of usability and attractiveness.
Overall, the authors conclude that the automated model-based approach is a
promising solution for developing mobile UIs that offers significant benefits over
the existing system of manually designing UIs. They argue that the approach has the
potential to greatly improve the efficiency and accuracy of the UI design process, as
well as the quality of the resulting UIs.

5.1 PLANNING LAYER

The planning layer of the automated model-based approach for developing mobile
user interfaces (UIs) described in the paper titled ”An Automated Model-Based Ap-
proach for Developing Mobile User Interfaces” is responsible for generating a plan
for the UI design process. This plan consists of a set of rules and transformations
that can be applied to the model of the UI in order to generate the final UI.
The planning layer of the proposed approach is designed to be flexible and
modular, allowing developers to easily customize the UI design process by defining
their own rules and transformations. This allows developers to tailor the UI design
Sahrdaya College of Engineering & Technology, Kodakara 19
 AN AUTOMATED MODEL-BASED APPROACH FOR DEVELOPING MOBILE USER INTERFACES

process to the specific requirements and constraints of their project.

In addition to generating a plan for the UI design process, the planning layer
also has the ability to optimize the plan in order to minimize the number of rules
and transformations needed to generate the final UI. This can further improve the
efficiency of the UI design process.
Overall, the planning layer plays a central role in the automated model-based
approach for developing mobile UIs. It is responsible for generating a plan for the
UI design process and for optimizing the plan in order to minimize the number of
rules and transformations needed to generate the final UI.

Sahrdaya College of Engineering & Technology, Kodakara 20

 AN AUTOMATED MODEL-BASED APPROACH FOR DEVELOPING MOBILE USER INTERFACES

CHAPTER 6

RESULT

The results of the study presented in the paper titled ”An Automated Model-
Based Approach for Developing Mobile User Interfaces” show that the proposed
automated model-based approach is a promising solution for developing mobile UIs.
The authors conducted a case study in which they implemented their approach and
compared it to a manual UI design process. They found that the automated approach
resulted in faster and more accurate UI design, as well as UIs that were rated highly
in terms of usability and attractiveness by users.
Specifically, the authors found that the automated approach resulted in UIs that
were designed in a fraction of the time required by the manual approach. They also
found that the automated UIs had fewer errors and were rated more highly by users
in terms of usability and attractiveness.
Overall, the results of the study suggest that the proposed automated model-
based approach is a viable alternative to the existing system of manually designing
UIs for mobile apps. It offers the potential to greatly improve the efficiency and
accuracy of the UI design process, as well as the quality of the resulting UIs.

Sahrdaya College of Engineering & Technology, Kodakara 21

 AN AUTOMATED MODEL-BASED APPROACH FOR DEVELOPING MOBILE USER INTERFACES

CHAPTER 7

CONCLUSION

The conclusion of the paper titled ”An Automated Model-Based Approach for
Developing Mobile User Interfaces” is that the proposed automated model-based ap-
proach is a promising solution for developing mobile UIs. The authors conducted a
case study in which they implemented their approach and compared it to a manual
UI design process. They found that the automated approach resulted in faster and
more accurate UI design, as well as UIs that were rated highly in terms of usability
and attractiveness by users.
Overall, the authors argue that their automated model-based approach offers a num-
ber of benefits over the existing system of manually designing UIs. It is more effi-
cient, accurate, and scalable, and has the potential to improve the user experience of
mobile apps by generating high-quality UIs. The authors believe that their approach
has the potential to greatly improve the UI design process for mobile apps and to
enhance the user experience of mobile apps overall.

Sahrdaya College of Engineering & Technology, Kodakara 22

 AN AUTOMATED MODEL-BASED APPROACH FOR DEVELOPING MOBILE USER INTERFACES

CHAPTER 8

REFERENCES

[1] M. Brambilla, J. Cabot, and M. Wimmer, “Model-driven software engi- neering

in practice: Second edition,” Synth. Lectures Softw. Eng., vol. 3,
no. 1, pp. 1–207, Mar. 2017.
[2] E. Umuhoza and M. Brambilla, “Model driven development approaches
for mobile applications: A survey,” in Mobile Web and Intelligent Infor- ma-
tion Systems. Springer, 2016.
[3] G. Meixner and G. Calvary. (Jan. 2014). Introduction to Model-Based User
Interfaces. [Online]. Available: https://www.w3.org/TR/2014/NOTE- mbui-
intro-20140107/
[4] J. Vanderdonckt, “A MDA-compliant environment for developing user interfaces
of information systems,” in Advanced Information Systems Engineering, O. Pastor
and J. F. E. Cunha, Eds. Berlin, Germany: Springer, 2005, pp. 16–31.
[5] G. Meixner, F. Paternò, and J. Vanderdonckt, “Past, present, and future of model-
based user interface development,” I-Com, vol. 10, no. 3, pp. 2–11, Nov. 2011.
[6] L. Zouhaier, Y. B. Hlaoui, and L. J. B. Ayed, “Generating accessi- ble multimodal
user interfaces using MDA-based adaptation approach,”
in Proc. IEEE 38th Annu. Comput. Softw. Appl. Conf., Jul. 2014, pp.
535–540.
[7] F. Bacha, K. Oliveira, and M. Abed, “A model driven architecture
approach for user interface generation focused on content personaliza- tion,”
in Proc. 5th Int. Conf. Res. Challenges Inf. Sci., May 2011,
pp. 1–6.
[8] P. Pinheiro, “User interface declarative models and development environ- ments:
A survey,” in Proc. 7th Int. Conf. Design, Specification, Verification
Interact. Syst., 2001, pp. 207–226.
[9] H. Tufail, F. Azam, M. W. Anwar, and I. Qasim, “Model-driven develop- ment
of mobile applications: A systematic literature review,” in Proc. IEEE
9th Annu. Inf. Technol., Electron. Mobile Commun. Conf. (IEMCON), Nov.
Sahrdaya College of Engineering & Technology, Kodakara 23
 AN AUTOMATED MODEL-BASED APPROACH FOR DEVELOPING MOBILE USER INTERFACES

2018, pp. 1165–1171.

[10] I. Qasim, F. Azam, M. W. Anwar, H. Tufail, and T. Qasim, “Mobile user in-
terface development techniques: A systematic literature review,” in Proc. IEEE 9th
Annu. Inf. Technol., Electron. Mobile Commun. Conf. (IEMCON), Nov. 2018, pp.
1029–1034.
[11] H. Heitkötter, S. Hanschke, and T. A. Majchrzak, “Comparing cross- platform
development approaches for mobile applications,” in Proc.
WEBIST, 2012, pp. 1–13.
[12] M. Nuñez, D. Bonhaure, M. González, and L. Cernuzzi, “A model- driven ap-
proach for the development of native mobile applications
focusing on the data layer,” J. Syst. Softw., vol. 161, Mar. 2020, Art. no.
110489.
[13] . M. Usman, M. Z. Iqbal, and M. U. Khan, “A model-driven approach to gen-
erate mobile applications for multiple platforms,” in Proc. 21st Asia– Pacific Softw.
Eng. Conf., vol. 1, Dec. 2014, pp. 111–118.
[14] X. Jia and C. Jones, “Axiom: A model-driven approach to cross-platform appli-
cation development,” in Proc. 7th Int. Conf. Softw. Paradigm Trends, vol. 1, 2012,
pp. 24–33.
[15] F. Freitas and P. H. M. Maia, “JustModeling: An MDE approach to develop
Android business applications,” in Proc. 6th Brazilian Symp. Comput. Syst. Eng.
(SBESC), Nov. 2016, pp. 48–55.
[16] . L. B. Ammar, “Towards a uniform model transformation process for abstract
user interfaces generation,” in Proc. 14th Int. Conf. Eval. Novel Approaches Softw.
Eng., 2019, pp. 533–538.

Sahrdaya College of Engineering & Technology, Kodakara 24