duces the main concepts used in our proposal; Sec-
tion 4 presents a case study; and, finally, Section 5
presents our conclusions.
2 RELATED WORK
We use mockups as input for model transformations
that allow us to generate multi-layered web informa-
tion systems. Similarly to our proposal, (Risti´c et al.,
2012) also generate mockups by means of templates.
(Rivero et al., 2012) generate MVC models in which
the View and the Controller layers are generated by
means of annotated mockups. Although both pro-
posals allow for designing pre-prototype models, they
are not aimed to be used in the whole software de-
velopment process. Unlike their proposal, we use
mockup models as input to generate not only the View
and Controller layers, but others, such as business
logic, data access object, entity/field validation, and
remote/web services.
Our methodology differs from traditional MDE-
based processes, such as those proposed by (Elk-
outbi et al., 2006; Stocq and Vanderdonckt, 2004;
Nunes and Schwabe, 2006), and (Souza et al., 2007),
since we start the process from mockups to generate
multi-layered models for web information systems.
Those authors propose the refinement of platform-
independent models (such as annotated class dia-
grams, use cases, collaboration diagrams, and activity
diagrams), to platform-specific models in a software
development process based on MDE. Those propos-
als apply a top-down approach to design web infor-
mation systems, in which input models, such as con-
ceptual models, are highly detailed before generating
a testable prototype. In our proposal, after specifying
user stories, Software Engineers design of a simple
domain class diagram without annotations, and then
uses templates to generate mockups, which are fur-
ther refined using more templates, making then do-
main models and mockups evolve together.
In addition, several MDE-based software tools
support the generation of GUI for web information
systems (Ceri et al., 2000; Kraus, 2007; Vanderdon-
ckt, 2005; Kavaldjian, 2007; Souza et al., 2007; We-
bRatio, 2013). However, those software tools require
a very detailed UML model as input to generate a
mockup. Examples of such inputs are use case dia-
grams, class diagrams, and activity diagrams, all of
them assigned with plain UML Profiles annotation.
Our proposal allows for the generation of the anno-
tations for the UML Profile using wizards, transfor-
mations, and manual configurations assisted by our
software tool.
3 METHODOLOGY OVERVIEW
An overview of our methodology is depicted in Fig-
ure 1. A complete description of the MDE tasks
and a comparison to our previous experiences is re-
ported in (Basso et al., 2014). It is important to notice
that the first MDE task is executed after specifying
user stories, when then start our contributions. These
MDE tasks are inspired on the OO-Method Presenta-
tion Model (PM) (Molina et al., 2002), a well adopted
methodology used to produce web information sys-
tems, such as Master-detail structures, Service layer
development, etc. Roughly speaking, after specifying
user stories, in this methodology, pre-prototypes are
designed and refined from step 1 to 3, as illustrated
for a single functionality in box (A). When the de-
sign of a pre-prototype is accepted by the client, then
the annotated UML model is generated as shown in
box (B) through steps 4 and 5. This model is used by
model-to-code transformations to then generate the
functional prototype in step 6 of box (C). Finally, a
working piece of software is delivered in step 7 as
a complete implemented functionality, and the client
can execute acceptance tests against it.
Similar to our related work, the model shown in
Figure 1, box (B), represents the last design stage of
a pre-prototype before it can be used to generate the
source code. Transforming a Platform-Independent
Model (PIM) to a Platform-Specific Model (PSM), as
illustrated in Figure 1, step 6, it is possible to gen-
erate a functional prototype for a web information
system. Different from related proposals that specify
the PIM manually, we generate it automatically based
on mockups constructed with the tasks shown in Fig-
ure 1, box (A). In this process a PIM 1 is transformed
into a PIM 2. Thus, a UML model (PIM 2) is gen-
erated by a model transformation using as input the
element named “Accepted Mockup Model” (PIM 1).
PIM 1 is a mockup in the final design stage be-
cause it owns GUI components strictly used in some
APIs and libraries. However, it is still a platform in-
terdependent model, since it is not yet mapped into a
specific platform as occurs in step 6. PIM 1 is also
generated by a transformation, using as input the pre-
prototype named “Preliminary Mockup Model”. This
is a Computational-Independent Model (CIM) which
represents a screen layout containing general purpose
GUI components. Finally, the “Preliminary Mockup
Model” is generated from transformation templates
taking as input a simple class diagram.
As depicted in Figure 1, box (A), steps 1 and 3,
the client interacts with the pre-prototypes in order to
find details that the functionality under specification
needs. Then, pre-prototypes are refined along steps
ICEIS2014-16thInternationalConferenceonEnterpriseInformationSystems
138