An Approach to Include Web-based Interaction Into Systems of Systems

M. A. Barcelona

1,2

, G. L

opez-Nicol

1,2

, E. Mel

endez

and F. Callao

ITAINNOVA, Arag

on Institute of Technology, c/ Mar

ıa de Luna 7, Zaragoza, Spain

IWT2 Research Group, Universidad de Sevilla, Av. Reina Mercedes s/n, 41012 Sevilla, Spain

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 ﬁrst monolithic programs, based on pre-

deﬁned 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 ﬁrst 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 scientiﬁc, 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 speciﬁc 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

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-

conﬁgure a deployment or redesign to improve per-

formance, even dinamically.

Since its deﬁnition, 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

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 speciﬁc 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 ﬁrst 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 speciﬁc 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-speciﬁc language to deﬁne 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 speciﬁcation 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 Proﬁles in order to create model editors based

on these metamodels, namely the IFML Proﬁle (Fi-

gure 2) and the CERVANTES Proﬁle (Figure 3).

Figure 2: IFML Proﬁle.

Figure 3: CERVANTES Proﬁle.

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 Ofﬁce

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

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-

ciﬁc 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 speciﬁc 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 ﬁrst version of the

product did not contain a pure SoS architecture, some-

thing that may be included in future increments.

This way, the ﬁrst step was to deﬁne 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 ﬂow between dif-

ferent connectors were included and redeﬁned 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 ﬂow 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 ﬁnal 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-

ciﬁc IFML Proﬁle 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 speciﬁc platform technologies (i.e. desktop,

Web, mobile). The ﬁrst 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 ﬂow between dif-

ferent connectors were included and redeﬁned 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

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 ﬂow 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

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-speciﬁc 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 ﬂow 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