An Approach to Include Web-based Interaction Into Systems of Systems
M. A. Barcelona
1,2
, G. L
´
opez-Nicol
´
as
1,2
, E. Mel
´
endez
1
and F. Callao
3
1
ITAINNOVA, Arag
´
on Institute of Technology, c/ Mar
´
ıa de Luna 7, Zaragoza, Spain
2
IWT2 Research Group, Universidad de Sevilla, Av. Reina Mercedes s/n, 41012 Sevilla, Spain
3
MEDITERRANEO ENVIRONMENTAL GROUP, c/ Botiguers 3 Of. 1-J, Valencia, Spain
Keywords:
Web Engineering, Model-driven Engineering, Interaction Flow Modeling Language, Systems of Systems.
Abstract:
Emerging applications are composed by (semi)autonomous subsystems in a decentralized, distributed and het-
erogeneous environment, known as Systems of Systems (SoS). In this paper, we present a Web Engineering
approach in order to include Web-based interaction into SoS. To this end, a model-based paradigm is used,
by the analysis and integration of an interaction modeling language and the generation of Web-based run-
time components. The feasibility of the approach is analyzed by a real-world case study in the design and
development of a selective collection of waste tool.
1 INTRODUCTION
From the first monolithic programs, based on pre-
defined functions and autonomous behavior, the de-
velopment of systems have had a great evolution in
the latest years. Emerging applications are not just
large-scale and complex. They are also character-
ized by decentralized, distributed, networked compo-
sitions of heterogeneous and (semi)autonomous ele-
ments (Samad and Parisini, 2011). These new sys-
tems are, in fact, Systems of Systems (SoS) (Johnson,
2009). Although most of first SoS were developed
in the context of embedded solutions with no human
interaction, Web-based technologies have evolved as
the facto standard to add human interaction into exist-
ing SoS.
Web Engineering is concerned with establishment
and use of sound scientific, engineering and man-
agement principles and disciplined and systematic a-
pproaches to the successful development, deployment
and maintenance of high quality Web-based systems
and applications (Murugesan et al., 2001).
In the area of distributed systems, Service-
Oriented Computing (SOC) is the computing
paradigm that utilizes services as elements to support
the development of rapid, low-cost and easy composi-
tion of distributed applications even in heterogeneous
environments (Papazoglou, 2003). SOC is currently
the most-used paradigm for distributed and SoS
development.
Model-Driven Software Engineering (MDE) is a
software development paradigm which focuses on
creating and exploiting domain models, abstract rep-
resentations of knowledge and activities that govern
a specific domain application, as a means of allevi-
ating the complexity and express domain concepts e-
ffectively (Schmidt, 2006).
In this paper, we present a Web Engineering a-
pproach in order to include Web-based interaction
into SoS. To this end, a model-based paradigm is
used, by the analysis and integration of an interaction
modeling language and the generation of Web-based
runtime components. The feasibility of the approach
is analyzed by a real-world case study in the design
and development of a Web-based tool for selective
collecting waste domain.
This paper is structured as follows. Section 2
presents the background, namely the existing CER-
VANTES approach as well as the motivation of cur-
rent study. Section 3 exposes the steps done in order
to integrate the Web-based interaction into the frame-
work. A real-world case study is detailed in Section 4.
Finally, Section 5 concludes and outlines future work.
2 BACKGROUND AND
MOTIVATION
In 2001 we set out to create a methodological ap-
proach, named CERVANTES (Barcelona et al., 2014),
for the design and development of distributed SoS
336
Barcelona, M., López-Nicolás, G., Meléndez, E. and Callao, F.
An Approach to Include Web-based Interaction Into Systems of Systems.
In Proceedings of the 12th International Conference on Web Information Systems and Technologies (WEBIST 2016) - Volume 1, pages 336-341
ISBN: 978-989-758-186-1
Copyright
c
2016 by SCITEPRESS Science and Technology Publications, Lda. All rights reserved
based on these assumptions: i) it was an architecture-
driven development so that current and future func-
tionalities should be considered in the architectural
design; ii) the design of the subsystems should
be independent of technology, platforms, program-
ming languages or communication protocols; iii)
the internal behavior of each subsystem must be
(semi)formally described giving rise to subsequent
validation, and; iv) runtime logs will have valuable
information about usage of the system in order to re-
configure a deployment or redesign to improve per-
formance, even dinamically.
Since its definition, CERVANTES has been widely
used for the systems design and development within
the group, being present in many solutions, which are
currently deployed in different domains and real en-
vironments. In 2014 we evolved the proposal by us-
ing a MDE approach (Garc
´
ıa-Borgo
˜
n
´
on et al., 2014).
Nowadays it’s composed by three elements: i) an
architecture-driven methodology for the development
of SoS; ii) a metamodel (which is shown in Figure
1) and a design-time tool in order to model SoS and
performs automatic code generation, and; iii) a Run-
time Framework, developed in different specific plat-
forms and languages (namely C#.NET, Java and C++)
to support the deployment and execution of generated
code.
Figure 1: CERVANTES metamodel.
In the application of the proposal in practice we
have evidenced the need to include human interac-
tion into different subsystems, issue that has been
solved by the development of graphical-user inter-
faces (GUI) components from scratch, by using se-
veral technologies as desktop, mobile or Web-based
applications.
This way the motivation of this study is to try to
solve the lack of an integrated model-based approach
that covers, not only the modeling and generation of
different SoS but also the human interaction. In par-
ticular, our purpose is to include Web-based interac-
tion into CERVANTES based SoS.
3 METHODOLOGY
This section shows the methodological approach fo-
llowed to solve the described problem which consists
of three issues: i) the analysis and integration of an
interaction modeling language; ii) the development of
the Web-based interaction elements, and; iii) the inte-
gration of new Web widgets into the existing Runtime
Framework. Each issue is shown in the following sub-
sections.
3.1 Interaction Modeling
The first need was to use, extend or create a inte-
raction modeling language in order to, following a
model-based approach, model the Web-based inte-
ractions of a SoS. Our motivation was not to create
a new proposal but to try to identify a language that
may be adopted by industry in practice. Although the
initial purpose was to model Web-based interaction,
in future work desktop or mobile based interactions
will be required, so that a platform independent model
would be better than a specific one.
A review of the state-of-the art was performed in
order to identify potential proposals to be adopted
by our approach. Some initiatives have been created
regarding conceptual modeling of sofware applica-
tions, as: i) The Web Modelling Language (WebML)
(Ceri et al., 2007) for data-intensive Web applica-
tions; ii) Web Application Extension for UML (WAE)
(Conallen, 2002), a UML extension for describing
Web application interfaces and teh client-server inter-
actions; iii) WebDSL (Groenewegen et al., 2008), a
domain-specific language to define entities, pages and
business logic.
A summary of related work is presented by Bram-
billa et al. (Brambilla et al., 2014) who cited more
proposals focused on Web interfaces as well as some
approaches that apply model-driven techniques for
multi-device user interaction modeling as TERESA
(Berti et al., 2004), MARIA (Paterno et al., 2009),
MBUE(Meixner et al., 2011), UsiXML (Vanderdon-
ckt, 2005) and UCP (Raneburger et al., 2011).
The Interaction Flow Modeling Language (IFML)
supports the specification of the front end of appli-
cations independently of the technological details of
their realization. It addresses the composition and
context of the view, the commands, actions, effects
of interaction and parameter binding (Brambilla and
Fraternali, 2014). The Object Management Group
(OMG) (OMG, 2016) adopted the IFML (OMG,
2015) as a standard in July 2014.
IFML supports all requirements for our purpose
and, as it is a standard supported by OMG, we have
An Approach to Include Web-based Interaction Into Systems of Systems
337
selected as modeling language to be included into our
approach. The CERVANTES methodology uses En-
terprise Architect as Integrated Development Envi-
ronment (IDE), so that we have developed a set of
UML Profiles in order to create model editors based
on these metamodels, namely the IFML Profile (Fi-
gure 2) and the CERVANTES Profile (Figure 3).
Figure 2: IFML Profile.
Figure 3: CERVANTES Profile.
3.2 Web-based Interaction
The second step was related to the execution of Web-
based components. For this purpose, a Web Run-
time Framework known as Avempacejs has been de-
veloped and integrated in the CERVANTES approach.
This Framework is based on main Web standards
as HTML5 and CSS3 and it’s been implemented by
Javascript language. With this Framework a sin-
gle page is created and contents are change depend-
ing on the user interaction over the widgets and
Web-components, by using AJAX communications in
JSON or REST protocols. It’s composed by a set of
Web widgets designed to perform the Web interaction
with the end-user of a system. These components are
divided into three categories: i) Web containers: their
purpose is to composite other components, like pan-
els, blocks, divisors or tables; ii) Web contents and
interactions: they manage the way data are exposed
to the end-user and handle the interaction by events
or actions, like buttons, inputs, selects, trees, menus,
tables, graphics or multimedia, and; iii) Hidden ele-
ments: used to handle events or actions among sev-
eral components. Some of the Web-components de-
veloped in this Framework are exposed in Table 1.
Table 1: Some of the widgets included in the Avempacejs
Framework.
Buttons Carousels
Charts Editors
Headings Forms
Images Maps
Navigation Trees Office
Tables Tabs
Trees Videos
APMDWE 2016 - International Workshop on Avanced practices in Model-Driven Web Engineering
338
3.3 Runtime Integration
The CERVANTES approach includes a Runtime
Framework (Garc
´
ıa-Borgo
˜
n
´
on et al., 2014), a basic
infrastructure that supports the SoS execution. As
this framework did not contain any human interaction
module, we have extended this component with a set
of classes to handle interaction, by using IFML con-
cepts at platform independent level. Figure 4 shows
the list of new elements added into the infrastructure,
that handle requests and responses to different spe-
cific platform technologies (i.e. desktop, Web, mo-
bile).
Figure 4: Extension into the CERVANTES Runtime Frame-
work to include Web-based interaction.
The Web-based integration is achieved by using
JSON message interchanges, as it’s shown in Fig-
ure 5. Once a message is received, a specific JSON
endpoint handles the request and it’s translated into
the common message system, as it was incoming
from any other subsystem. When it’s processed,
the response message is formatted into the JSON
and sent to the Web client. The serialization and
de-serialization process is done automatically by the
CERVANTES system, and may be extended to cover
different interaction technologies and communication
protocols.
Figure 5: Runtime integration of CERVANTES and Web-
based components.
4 CASE STUDY
The feasibility of the approach has been analyzed by
a real-world case study in order to design and de-
velop a selective collection of waste (SECOWA) tool
(ITAINNOVA and MEDENGROUP, 2015). We have
followed the CERVANTES approach in the modeling
of the subsystem even when the first version of the
product did not contain a pure SoS architecture, some-
thing that may be included in future increments.
This way, the first step was to define the sub-
systems model according to our approach, as it is
shown in Figure 6, where a main SECOWA subsys-
tem interacts with a Web-client by the interchange
of a set of Messages according to the request and
response pattern. By using a Model-To-Text trans-
formation included in the CERVANTES IDE, cor-
responding C#.NET code was automatically gener-
ated, regarding Entities, Messages and State Ma-
chines (Barcelona et al., 2014).
Figure 6: Case Study CERVANTES subsystems model.
An Approach to Include Web-based Interaction Into Systems of Systems
339
As the SECOWA subsystem requires Web-based
interaction, according to our proposal to make use of
IFML standard, the next step was to create the IFML
model, as Figure 7 shows. Main forms or windows,
controls, events and the interaction flow between dif-
ferent connectors were included and redefined with
the end-user, before generating any line of code. As
the Model-To-Text transformation from IFML model
was not available, this task was performed in order
to get the practical experience of modeling the in-
teraction flow by using IFML with the end-user, and
make sure that all information included in the model
is enough to develop the transformation to achieve
code generation. Then all GUIElements component
according to the concepts described in Section 3.3
were coded manually.
Figure 7: Case Study IFML model.
As a result of the case study a complete Web-
based solution was developed by using the approach
exposed in this paper. A screenshot of the final ver-
sion is shown in Figure 8.
Figure 8: Case Study Screenshot.
5 CONCLUSIONS AND FUTURE
WORK
This paper presents a Web Engineering approach in
order to include Web-based interaction into SoS. Ta-
king the CERVANTES methodology for SoS develop-
ment, the purpose of this study was to try to solve
the lack of an integrated model-based approach that
covers, not only the modeling and generation of dif-
ferent SoS but also the human interaction. In particu-
lar, our purpose was to include Web-based interaction
into CERVANTES based SoS.
To solve this problem we have covered three areas:
i) the analysis and integration of an interaction mod-
eling language; ii) the development of the Web-based
interaction elements, and; iii) the integration of new
Web widgets into the existing Runtime Framework.
After a review of related work regarding interac-
tion modeling languages, as IFML supports all re-
quirements for our purpose and, as it is a standard
supported by OMG, it’s been selected as modeling
language to be included into our approach. A spe-
cific IFML Profile has been developed and integrated
in the CERVANTES IDE.
The Web-based interaction was achieved by the
development of a set of widgets and plugins inte-
grated in the Avempacejs Runtime Framework, based
on main Web standards as HTML5 and CSS3 and im-
plemented by Javascript language. With this Frame-
work a single page is created and contents are change
depending on the user interaction over the widgets
and Web-components, by using AJAX communica-
tions in JSON or REST protocols.
The CERVANTES Runtime Framework has been
extended by a human interaction module that con-
tains IFML concepts at platform independent model.
These elements handle requests and responses to dif-
ferent specific platform technologies (i.e. desktop,
Web, mobile). The first implementation covers Web-
based interaction which is achieved by using JSON
message interchanges.
Finally, The feasibility of the approach has been
analyzed by a real-world case study in order to de-
sign and develop a selective collection of waste tool.
A CERVANTES subsystem model has been created as
well as the IFML model. Main forms or windows,
controls, events and the interaction flow between dif-
ferent connectors were included and redefined with
the end-user, before generating any line of code. By
using a Model-To-Text transformation included in the
CERVANTES IDE, corresponding C#.NET code was
automatically generated. As this transformation does
not cover the new interaction module, all GUIEle-
ments components were coded manually.
APMDWE 2016 - International Workshop on Avanced practices in Model-Driven Web Engineering
340
In conclusion, we have proposed and analyzed
the application of an approach that uses IFML to in-
clude Web-based interaction into CERVANTES based
SoS. Some features are going to be added in new
increments and are included as future work as fol-
lows. Firstly, the Model-To-Text transformation in or-
der to generate automatically the GUIElements from
the IFML model. Secondly, as IFML model is plat-
form independent, these transformations will be im-
proved to cover not only Web-based interaction but
also mobile and desktop applications. Finally we plan
to create a basic IFML model from each subsystem
according to its interface, by using a Model-to-Model
transformation, so that each CERVANTES component
may be emulated by user interaction.
ACKNOWLEDGEMENTS
This research has been supported by: the Me-
GUS project (TIN2013-46928-C3-3-R), the SoftPLM
Network (TIN2015-71938-REDT) of the Spanish
Ministry of Economy and Competitiveness and the
Arag
´
on Region European Social Fund.
REFERENCES
Barcelona, M. A., Garc
´
ıa-Borgo
˜
n
´
on, L., Calvo, J. I., and
Escalona, M. J. (2014). CERVANTES: Un frame-
work para el diseo y desarrollo de sistemas distribui-
dos. In Jornadas de Ingeniera del Software y Bases
de Datos (JISBD), Cadiz, Spain, Croatia, September
16-19, 2014.
Berti, S., Correani, F., Mori, G., Patern
`
o, F., and Santoro,
C. (2004). Teresa: a transformation-based environ-
ment for designing and developing multi-device inter-
faces. In CHI’04 extended abstracts on Human factors
in computing systems, pages 793–794. ACM.
Brambilla, M. and Fraternali, P. (2014). Interaction Flow
Modeling Language: Model-Driven UI Engineering
of Web and Mobile Apps with IFML. Morgan Kauf-
mann.
Brambilla, M., Mauri, A., and Umuhoza, E. (2014). Ex-
tending the interaction flow modeling language (ifml)
for model driven development of mobile applications
front end. In Mobile Web Information Systems, pages
176–191. Springer.
Ceri, S., Matera, M., Rizzo, F., and Demald
´
e, V. (2007).
Designing data-intensive web applications for content
accessibility using web marts. Communications of the
ACM, 50(4):55–61.
Conallen, J. (2002). Building Web applications with UML.
Addison-Wesley Longman Publishing Co., Inc.
Garc
´
ıa-Borgo
˜
n
´
on, L., Barcelona, M. A., Calvo, J. I.,
Ramos, I. M., and Escalona, M. J. (2014). CER-
VANTES: A model-based approach for service-
oriented systems development. In Information Sys-
tems Development: Transforming Organisations and
Society through Information Systems - Proceedings
of the 23rd International Conference on Information
Systems Development, ISD 2014, Vara
ˇ
zdin, Croatia,
September 2-4, 2014.
Groenewegen, D. M., Hemel, Z., Kats, L. C., and Visser, E.
(2008). Webdsl: a domain-specific language for dy-
namic web applications. In Companion to the 23rd
ACM SIGPLAN conference on Object-oriented pro-
gramming systems languages and applications, pages
779–780. ACM.
ITAINNOVA and MEDENGROUP (2015). Secowa tool,
http://www.ita.es/secowa/.
Johnson, M. (2009). System of systems standards. sys-
tems of systems engineering-principles and applica-
tions. m. jamshidi.
Meixner, G., Seissler, M., and Breiner, K. (2011). Model-
driven useware engineering. In Model-Driven De-
velopment of Advanced User Interfaces, pages 1–26.
Springer.
Murugesan, S., Deshpande, Y., Hansen, S., and Ginige, A.
(2001). Web engineering: A new discipline for devel-
opment of web-based systems. In Web Engineering,
pages 3–13. Springer.
OMG (2015). Interaction flow modeling language 1.0,
http:// www.omg.org/spec/ifml/.
OMG (2016). Object management group,
http://www.omg.org.
Papazoglou, M. P. (2003). Service-oriented computing:
Concepts, characteristics and directions. In Web Infor-
mation Systems Engineering, 2003. WISE 2003. Pro-
ceedings of the Fourth International Conference on,
pages 3–12. IEEE.
Paterno, F., Santoro, C., and Spano, L. D. (2009). Maria:
A universal, declarative, multiple abstraction-level
language for service-oriented applications in ubiqui-
tous environments. ACM Transactions on Computer-
Human Interaction (TOCHI), 16(4):19.
Raneburger, D., Popp, R., Kavaldjian, S., Kaindl, H., and
Falb, J. (2011). Optimized GUI generation for small
screens. Springer.
Samad, T. and Parisini, T. (2011). Systems of systems. The
Impact of Control Technology, pages 175–183.
Schmidt, D. C. (2006). Model-driven engineer-
ing. COMPUTER-IEEE COMPUTER SOCIETY-,
39(2):25.
Vanderdonckt, J. (2005). A mda-compliant environment
for developing user interfaces of information systems.
In Advanced Information Systems Engineering, pages
16–31. Springer.
An Approach to Include Web-based Interaction Into Systems of Systems
341