XIDE - a visual component-based web

plumpbustlingInternet και Εφαρμογές Web

4 Δεκ 2013 (πριν από 3 χρόνια και 9 μήνες)

84 εμφανίσεις

University of Eastern Finland

Faculty of Science and Forestry, School of Computing

Department of Computer Science and Statistics

International Master's Degree Programme in Information Technology


Evgenia Samochadina



XIDE
-

a

visual component
-
based web
application editor


Master’s Thesis

Joensuu
, Finland,
June
, 20
10

Supervisor
s
:

Professor Petri Vuorimaa

Professor Jussi Parkkinen

Instructor:

Mikko
Pohja


ii


Abstract

Here the abstract comes



iii

Acknowledgments

HUT

Eden project
(Tekes & Nokia research center)

Joensuu

Family and friends


iv

Abbreviations and terms





v

List of figures


vi

Table of Contents


Abstract

................................
................................
................................
.........................

ii

Acknowledgments
................................
................................
................................
........

iii

Abbreviations and terms

................................
................................
...............................

iv

List of figures

................................
................................
................................
.................

v

Table of Contents

................................
................................
................................
..........

vi

1.

Introduction

................................
................................
................................
............

1

1.1.

Introduction to a problem
................................
................................
...............

1

1.2.

Research Objectives and Scope

................................
................................
.....

4

1.3.

Research questions

................................
................................
.........................

4

1.4.

Organization of the Thesis

................................
................................
.............

5

2.

Background

................................
................................
................................
............

6

2.1.

XForms and XFormsDB

................................
................................
................

6

XForms

................................
................................
................................
..................

6

XFormsDB

................................
................................
................................
.............

7

XFormsDB application

................................
................................
..........................

8

2.2.

Common user problems

................................
................................
.................

9

2.3.

Interaction design

................................
................................
...........................

9

Interaction styles

................................
................................
................................
..

10

Window design

................................
................................
................................
....

11

UI metaphors

................................
................................
................................
........

12

Web page design

................................
................................
................................
..

13

2.4.

Component
-
based development

................................
................................
...

14

3.

Review of existing tools
................................
................................
.......................

16

Web based HTML editors

................................
................................
....................

16


vii

Form builders

................................
................................
................................
.......

17

Web Mashup makers
................................
................................
............................

17

Content management systems and modern blog management systems

...............

19

Conclusions

................................
................................
................................
..........

20

4.

Requirements for the system

................................
................................
................

23

4.1.

General idea of the system

................................
................................
...........

23

4.2.

Personas

................................
................................
................................
.......

24

4.3.

Requirements

................................
................................
...............................

26

5.

Design

................................
................................
................................
..................

30

5.1.

Template language concepts design
................................
.............................

30

5.2.

UI Design

................................
................................
................................
.....

37

5.3.

XIDE Prototyping

................................
................................
........................

40

5.4.

Usability research
................................
................................
.........................

42

Procedure description
................................
................................
...........................

44

Results

................................
................................
................................
..................

44

5.5.

Discussion and Updated UI design

................................
..............................

46

6.

Implementation

................................
................................
................................
....

48

6.1.

Select technology for implementation

................................
.........................

48

6.2.

Development environment

................................
................................
...........

50

6.3.

Development process

................................
................................
...................

52

6.4.

XIDE architecture

................................
................................
........................

52

Uses view

................................
................................
................................
.............

53

Client
-
server view

................................
................................
................................

57

Deployment view

................................
................................
................................
.

58

Parsing XFormsDB code on a client

................................
................................
....

60

7.

Results

................................
................................
................................
..................

62


viii

8.

Evaluation and discussion

................................
................................
....................

63

8.1.

Sample web application

................................
................................
...............

63

News reader use case for non
-
professional user

................................
..................

64

Demo application

................................
................................
................................
.

64

News reader use case extension for professional user

................................
.........

66

Evaluation against user problems

................................
................................
........

67

Cognitive Dimensions of Notations framework

................................
..................

67

Stress testing

................................
................................
................................
........

71

9.

Conclusions

................................
................................
................................
..........

72

9.1.

Main contributions

................................
................................
.......................

73

9.2.

Future research

................................
................................
.............................

74


1


1.

Introduction

1.1.

Introduction to a problem

*First phrase?
Non professional users participate in web development, grow of Web
2.0
*

Currently non
-
professional
users

become more familiar with the idea of developing
web sites to solve their personal problems or tasks.
(Maximilien, Ranabahu and
Gomadam 2008)

These users, e.g. students, laypeople, technical people from other
areas
of computer

science and industry
,
may have need to

create a web site for their
hobby club,
combine several
online services

in one place, advertise their business,
etc. However, most of them
have never learned how to
develop

web applications
and
do not have enough kn
owledge in

corresponding

technologies.

In scope of this Thesis, web application term means an application, which is accessed
using web browser program through the Internet.


Web application utilizes client
-
server paradigm. Web browser acts as a client, w
hich connects to remote computer,
where web application is deployed (a server).
Initially web application term meant
dynamic web site, however currently these terms are often used as synonyms. Most of
current web sites are highly interactive and provide fu
nctionality comparable to a
desktop application
.
In contrast to desktop applications, there are two main
advantages of the web applications. First is the fact that web application can be
accessed from any computer, which has a browser installed and working

Internet
connection.


Generally, web applications are cross platform, what means that one web
application can be accessed from different operating systems.

Second advantage is
that web application can
be updated
only on the server, so all clients can acce
ss new
version of the application
or see new information instantly. Because of these
advantages, web applications are widely used for information sharing

by everybody,
including non
-
professional users.


As more people start using Internet to solve their
tasks, more non
-
professional users
face the problem of creating own web applications. Initially w
eb applications
were
static text pages for scientific purposes
, written in HTML language
. []
. HTML is a
markup language
,

first defined in 1991
, which

provides
means for creating structured

2

web page with paragraphs, headers and links. It is also possible to include UI controls,
such as input fields and buttons to develop a web form. Although it has been
developed further since 1991, current version of HTML allows

creating only static
pages. Client
-
side interactivity can be achieved only by having several pages showed
to user in a sequence.

Later, many different technologies appeared to support

creation of
more interactive
web applications. These technologies can
be classified into client and server
technologies.

Client te
chnology (e.g. CSS, JavaScript, XForms, Flash, Java Applets)

assumes, that the application
interactivity

is
processed

by browser
. Usi
ng server
technology

(e.g. PHP, ASP, JSP, etc.)

the application

is executed on the server and
provides results to the client browser. On practice,

client and server technologies are
usually
combined in order to create interactive user interface and implement
application logic on a server. One traditional approach is t
o have HTML and
JavaScript on clien
t
-
side and Java on the server.

Thus, in order to create interactive web application developer has to mix several client
and server technologies. This makes development process complicated and requires
more knowledge from

the developer. However, using fewer technologies or even one
programming language
could

ease the development and client
-
server communication.
(Kuuskeri and Mikkonen 2009)

Another
approach to reduce complexity of web developmen
t is simplifying the
technologies or languages being used. Generally, l
anguages can be separated into
imperative, declarative and
mixed. Imperative languages describe
how

the program
should
perform the task
, while declarative languages specify
what

task th
e program
should perform
.
[Cite ]

Although imperative languages are more powerful, declarative languages traditionally
have higher level of abstraction and thus are claimed to be more useful in case of non
-
professional users. [Cite Mikko Honkala Thesis].

Available server technologies are mainly imperative, while there are several
declarative client technologies that support development of highly interactive
applications. [Cite technologies and Markku

Laine Thesis
]
One example

of using
declarative approach

is XFormsDB technology, developed in Aalto University.
(Laine
2010)

It is an extension of XForms, W3C standardized technology for creating

3

interactive web forms. With XFormsDB it is possible to create a web application by
writing only client
-
side code using declarative languages. XFormsDB is claimed to be
useful for authoring highly interactive multi
-
user web applications by non
-
professionals
.

However, even if user develops an application using very simple language, he/she is
still
required to do the coding.

Coding is not acceptable for non
-
professionals, since it
assumes basic knowledge of software development and language syntax.

In order
to
overcome this problem, plenty of visual tools designed especially for non
-
programmers.
These tools use different
approaches
to allow user to develop the
application on higher level of abstraction and reduce coding.


Most of these tools are one
-
purpose;
for instance, there are special tools for creation
of a blog, web form, online shop, etc. [Cite] One
-
purpose tool is focused on one task
and provides simple interface with
essential features only. However, if user’s needs
go beyond the scope of the tool, i
t can be either difficult or even impossible to
complete the task.

Summarizing, there are two different approaches used

in order
to allow non
-
programmer users to create own interactive web application:
use less complex
languages
for web application develo
pment and
use

visual tool for
development on
higher abstraction level.
In this
Thesis

both of these approaches will be combined in
attempt to
make

a powerful tool for creating web applications

for
non
-
professionals
.

Researchers at Web Services Group and
m
embers of Nokia Research Centre
proposed
a
general idea of the system in scope of EDEN project
.
The main goal was to create a
visual tool, which
would

help users to create and manage XFormsDB applications. It
should focus on
those

developers,

who don’t kno
w XForms/XFormsDB technology,
or even non
-
programmers. System should provide functionality to improve the
process of creating and managing the applications in comparison with doing the
development in plain text editor or IDE.

To
simplify the

process of we
b application development,

system should use

the idea
of reusable
components
. According to that idea, system
should have

a database of
predefined components. Each of them
should provide

some smal
l functionality and
can be built

in to the web
application
.


4

In
scope of this
Thesis, visual tool described above
is

designed, implemented and
evaluated. The name of the tool is XFormsDB IDE (XIDE).

1.2.

Research Objectives and Scope

The main objective of this thesis is to develop easy to use, web
-
based visual editor fo
r
creating XFormsDB applications.
So, t
here
were

three

restrict
ions (or requirements)
came

externally: XFormsDB s
hould be

the main technology for the
resulting
a
pplications
;

the system should be web
-
based
;

there should be a predefined database
of component
s, which user can
utilize in his/her web application
.
The target group of
the system consists of non
-
professionals, however professional
users

are also
considered
.

It should be possible to create a web application without programming,
but also the system s
hould provide more advanced features for professionals.


Th
e main

objective can be divided into several small tasks, which are

system

design,
implementation and validation (
or
testing). During design different methods and
practices will be used to create
usable information structure and interface. When
comes to implementation, an appropriate technology should be selected to fulfill
design requirements. After implementation, users and experts should evaluate the
system’s usability and efficiency.

1.3.

Research
questions

Questio
n 1:
How to create a web
-
based editor, which facilitate component
-
based
development of web applications
?


XFormsDB technology is promising
in a context of
simplifying web application
developmen
t; it was designed considerin
g needs of
non
-
programmer users.

(Laine
2010)

However, development of XFormsDB applications in

text
-
based editor or IDE
does not actually suit
for

non
-
professional
users
. User is required to have
knowledge
of XFormsDB and XQuer
y/XPath syn
tax and architecture to code even simple
application. When comes to application
deployment
,
user should set up and configure
web server

and XML database. After deployment, user has to
man
age created
applications manually
.
If the user does not know XFormsDB
, or even is not
a
programmer at all, he/she can hardly develop and run XFormsDB application from
scratch.
Therefore there is a need for tool, which helps users in XFormsDB
-
based
application development. The main question of this research is how the tool c
an
facilitate the development and what features this tool should provide.
Non
-

5

professional users are considered as major target group, however professional users
are also taking into account.

In order to answer this question, XIDE will be designed, impl
em
ented and evaluated.
Design

include
s defining user functional requirements (what functionality system
should provide) and specifying user interface solutions (how t
he interaction is
organized
and what are other interface decisions
).

E
xisting tools
and approaches
review results are taken into account during design phase.
After the design has
defined, an implementation and evaluation of XIDE will be described.
Iterative

process of development: design has changed. Creation of the sample application wil
l
be described

in order to show advantages of XIDE.

Since this Thesis is focused on UI design and usability
,

several more specific research
questions can be specified.

Question 2:
What

user interface

approach should be used to increase the
usability of t
he
web page development

for the
non
-
professionals
?

There are plenty of tools designed for non
-
professional users; different approaches of
human computer interaction exists; analyzing problem and other solutions, one or
several approaches should be selected

as a main paradigm.

Question 3: What features should be provided

in order to help users with web
application development
?

Question 4
:
How to design a tool, which is suitable both for non
-
prof
essional and
professional users
?

1.4.

Organization of the Thesis

In this subchapter organization of this Thesis is described in relation to research
questions.

Background s
ection contains
general information.
Description on system concept,
d
efinition of the target users

and requirements

to the system are described in next
chapter. Next

chapter contains details about

concept and UI design process

and
results
.

After that, implementation details
combined

with
technology selection and
different usability

research

results
.

Finally, discussion

of the results and conclusions
can be founded
in the last chapter.

6


2.

Background


This chapter contains background information related to the work further described in
this Thesis. There are
several

independent p
arts.

It starts with general information
about XForms and XFormsDB technologies
. After
that, there is a subsection that describes
structure of XFormsDB application
and its
components. Difficulties and problems user can face during
XFormsDB
applic
ation
development are highlighted.

Second part

incl
udes review of

*problems, end
-
users usually
confront to and
*

approaches and paradigms used to create usable interactive UI, especially for non
-
expert users. It covers different interaction styles

and ways how to organize window.

2.1.


XForms and
XFormsDB

As it

was discussed in the introduction section, XFormsDB framework was selected
to be a core technology of
creating applications

in XIDE. XFormsDB is an extension
of XForms, so XForms will be briefly described first.

XForms

XForms
[Cite standard] is

next gener
ation of HTML
Forms
in a sense that both are
extensions of XML and used for creating web forms. However, XForms overcomes
several most common limitations of HTML Forms, such as dependency on scripting
languages and lack of tools to operate with the data on

the client.
(Dubinko 2003)

XForms introduces set of elements that simplifies Web form creation.

Unlike HTML, XForms supports
Model
-
View
-
Controller

(MVC)

design pattern,
which key idea is to separate
application’s data from
logic and presentation.

[Cite
Pattern
-
oriented software architecture: a system of patterns
]

This approach is widely
used in web development and
is useful for interactive system creation
.

(Leff and
Rayfield 2001)


Unlike HTML,
X
Forms supports asynchronous
data submissions to the server.
Because of this, user can continue interaction with XForms
-
based web page while the
submission is processed on the server.


7

Besides
features

described above, XForms has many other benefits, which
facilitate
creation of

more interactive
web forms

then a HTML forms.
(Dubinko 2003)

However
,

XForms

can be used for cre
a
ting more general applications than simple
form.
(Dubinko 2003)

XForms languag
e is more usable for highly interactive web
application development in comparison to other declarative languages.
(Pohja, et al.
2007)


But

XForms
-
based application development still requires server
-
side coding in order
to suppo
rt communication with the database
.
[Cite
Introducing the XRX Architecture:
XForms/REST/XQuery
]
XForms
-
applications

lack for high
-
level user interface
features
, such as user authentication
and access control, error handling, and passing
information between

two XForms
-
based documents.
(Laine 2010)


XFormsDB

XFormsDB extends

XForms in order to overcome the problems described above.

With XFormsDB it is possible to build interactive web application by using only
declarative languages and writing only client
-
side code. It is designed to simplify web
development for developers and even non
-
programmers.
(Laine 2010
)

Main features
of XFormsDB are data management (with or without synchronization), error
handling, session management and application and access control.

XFormsDB utilizes MVC pattern as well as XForms.
Instance data objects represent
model

part
.

Inst
ance data defines
what data will be used on the page. Each instance
data
is an XML skeleton, which specifies the structure of the information.
Additionally it can contain initial data
values
. View part

of the MVC pattern

is
represented with user interface

controls
, which are built in

XHTML and
bound

to
instance data.
Controller part

provides means for data management and
communication with the database.

It consists of
XPath and XQuery expressions and
submissions
.
[Cite xpah and xquery]

XPath

is used to ac
cess different parts of the instances. XQuery is used to query
collections of XML data from the database. Submissions are used to store data in the
database.



8

XFormsDB application

According to
(Laine 2010)
, a
uthoring XFormsDB

web pages involves using different
declarative technologies for different purposes (see
Figure
1
):

• XHTML for document structure

• XFormsDB for data access and common server
-
side tasks
and
XForms for user
interaction

• XML for data model
ing

and interchange

• CSS for visual layout and presentation

• XQuery and XPath for querying data


Different external Resources, e.g. images or
JavaScript
, that can be built into
XHTML



Figure
1

XFormsDB web page components

Practically

each web page has a so
urce file, which
defines

page structure and user
interface. Additiona
lly, there can be different components introduced, e.g. instance
data, XPath and XQuery equations, CSS, external resources. Generally, each
component can be either described in external file or specified directly in the source
code.
Using external files pr
ovides reusability and reduces complexity of the page

source code
.

However, in case of complex application there can be a mess of files.


Except
external component
files,

XFormsDB application also contains secondary files
and folders used when the applica
tion is running.
Several obligatory configuration

9

files should be set up. They cover different technical issues, for example, how the
application should be deployed on the server or how to connect to the database.


In order to run XFormsDB application, the
re should be a web servlet container and
Exist database running.

There are two possibilities to deploy XFormsDB application to the server: using
standalone and lite

versions.

If standalone version

of XFormsDB applicaiton

is
selected,
it

should

also contai
n all libraries

and compiled classes to be able to run on
any server. On the other hand, lite version does not contain those files and since

is
smaller. It is possible to r
un lite application only on the server, which supports
XFormsDB
.


2.2.

Common user proble
ms

However, XFormsDB technology is assumed to be usable for non
-
professionals, they
can face many problems during the application development. Most of these problems
can be extended into web application creation using other approaches.

The main problems a
re



Web development complexity: difficult to make changes to the code



Need to understand different technologies and how to mix them (e.g. client
-
server communication)



Need for application deployment and maintenance



Managing files and components


2.3.

Interaction

design

Why is there still a need for visual editor; overview of different UI and interaction
types (dialogs, wizards, menus, direct manipulation); direct manipulation details,
pros and cons; using of task
-
oriented design
; designing UI for users with diffe
rent
level of knowledge and computer experience (role based design, possibility of
accessing the source code)
.

Designing interaction system in very important. User
-
centric design methods help
users in achieving their tasks.


10

Interaction syste
m design is a
challenge
: there are many different aspects to take into
account, from different interaction styles to
variety

of
contexts in which people can
use the system
.
Different frameworks
can help to design and evaluate

interactive
system, such as *** and ***. For

example, *** defines different aspects into four
groups: input devices, output devises, communication and content. Each group
concentrates on one angle and thus allow to see what are different options and their
pros and cons. In case of web
-
based system,
defined in scope of work of this Thesis,
communication and content aspects are most important.
It is a difficult task for
designer to combine together several technologies and approaches in order to create
a system, which fits

different types of users and
their tasks.


Interaction style
s

Nowadays, more and more systems have [Cite Shn, p 192]. Highly interactive
systems with visible objects, manipulated by the user. Direct manipulation term was
introduced by Shneidermann in 1983 [Cite! ], and since that it

become more and
more popular, especially in case when cool, eas
y
-
learnable interface is required.
Direct manipulation is now extremely popular. However it is not applicable for some
tasks (e.g. **), generally it increase ***

[Cite Shn236]
.

It also widely used to visualize the information and
allow user to manipulate it.

Direct manipulation helps users to understand and intuitively manipulate information
structures.

Famous example is dragging file to the trash bin.


(Shneiderman and Plaisant 2010)

Both icon and trash bin are represented with icons with metaphor pictures.

One of the well
-
known examples of direct manipulation is WYSIWYG word
processors.

(Shneiderman and Plaisant 2010)

However nowadays active using of
WYSIWYG is criticized [Cite paper about it], it can brings two obvious advantages:
user can see how the developing document will look like and he/she does not required
to learn any commands or controls
to manipulate the do
cument. But it is not
appropriate to try to apply WYSIWYG to any tool being developed. However it can
facilitate user in case of having it in appropriate application.


11

There are many more examples of direct manipulation, starting from spreadsheets
and oper
ating systems and continuing with video games and
augmented reality.

(Shneiderman and Plaisant 2010)

Advantages and drawbacks of direct manipulation,
three

principals.

Successful dm application provides representation of the reality. It may be sometimes
difficult to switch to dm, but nowadays one can hardly imagine why it is necessary to
learn complex syntax while it is possible to manage things [Cite p206].

(Shneiderman and Plaisant 2010)

Besides direct
-
manipulation, there are other strategies to be used in user interface,
such as menus, forms and dialogs. If
competent
ly designed, these approaches are
effective to achieve tasks, which cannot

be solved with direct manipulation.

(Shneiderman and Plaisant 2010)

Advantages of menus. Menus are effective when there is a set of items to choose from.
Menus and forms should be properly organized; lack in organization lea
ds to
misunderstanding
. There are different types of menus, for different tasks. Embeded
menus.

When it is required to enter many fields of data, form fill
-
in interaction style becomes
appropriate solution. Depending on the task to solve, there are various types of form:
from simple ones where user can enter text and press submit button to combinatio
n of
fields, different interactive widgets and popups.

Many guidelines and set of best practices explaining how to design a good form are
developed. [Cite some of them]Generally speaking, t
o increase form usability,

designer should pay
attention on wordin
g of field label texts and structure of the form.
Field title and/or description formulated ambiguously or unclear can confuse the user
or become a reason for error. Unstructured form, where fields related to different
areas are mixed, looks complicated an
d can mislead the
user. Also validation of the
user
-
entered data and fast feedback about errors are highly recommended. [From sh]

Window design

Besides different types of interaction, there are other issues to be paid attention to.
One of them is window

or

page
design.


12

In case of complex systems, there are a lot of information displayed and a lot of
controls to manage this information. Trying to put all this content into window

leads
to overweight interfaces; it can be
almost impossible to accomplish desir
ed task.

One solution
of

this problem is
task
-
oriented
design approach.

(Shneiderman and
Plaisant 2010)
. System

scenarios or

workflow
s

are

divided into several tasks;
information and functionality, required for each task, is i
dentified. To complete the
task,
user has

to go though
sequence of several windows.
Each window should
contain only necessary information
; it should be
structured according to the task
completion flow. Hence user do not see unrelated content, he/she can

fo
cus on the
task and cannot be misled.
(Sano 1996)


Another modern approach is having several coordinative windows on the screen.
Each window has ***, they are linked to show different perspective of information.
Advantages of
cw [Cite that paper with taxonomy]

Using role management approach can also reduce complexity of interface
.
(Shneiderman and Plaisant 2010)

Different user roles are identified depending on the
tasks
users

need to perform with th
e system. Then user can
see only those UI parts
he/she really need an access to depending on the role, what means the interface is not
overloaded by details this user never needs. Level of abstraction can also change
depending on the role. That gives room
of possibilities for solution of frequent
problem professional vs. non
-
professional user support. E.g. non
-
professionals

can
see small part of system features they can start using easily, while professionals have
an access to every detail of a system.
Havi
ng
multi
-
layer

user interface can be also
useful

to support successful and errorless interaction with the system
for both
first
-
time

and expert

users
.
(Shneiderman 2003)

When
user accesses

the system for the
first time,
li
mited set of features is available.

Detailed help information, wizards,
predefined selections and properties can be used at beginner’s level.

Later on when
user
has gained

some experience in using of the system or learns more features,
he/she moves up to s
ee all hidden features or more advanced level.

UI metaphors

Another common approach to simplify complex user interface is grouping UI
elements
,

information

and related tasks and representing them as a set of
concepts
,
which are already familiar for the
user. These concepts are called metaphors
; they are

13

widely used in user interfaces
.
(Neale and Carroll 1997)

Metaphors can be taken both
from physical world and from other
existing
known systems.

Metaphor is a way how designer

can explain one thing through another. Practically it
works in a way that user does not know how to achieve the task in new system, but
he/she recognizes the metaphor being used and it gives a hint how to proceed with the
task.

In order to make metaphor
work, two main principals should be observed: metaphor
should be
well known

for the target user group and it should fit the task it represents.
(Neale and Carroll 1997)

Using unknown metaphor obviously will make user
interface

more complex. If metaphor gives wrong impression or turn user into wrong
direction, then it even makes UI more error
-
prone.

Otherwise, metaphor can bring
many benefits user interface if properly selected.
(Barr, Biddle and Noble n.d.
)

Initially using of metaphors in UI was designed to improve learnability, however now
they are also used to facilitate usability.
(Neale and Carroll 1997)

*Possibility to use
concepts, do not go into details! Correlation
with other tools and user habits.
Composition of metaphrs
*

Web page design







Besides general aspects of designing interactive system described above, there are
several issues special for web
-
based tools.

In case of complex
web suites, n
avigation

becomes

central issue.

(Benyon, Turner and

Turner 2005)

The goal of navigation is in helping users not to be confused with web
site resources. Competent
ly designed

navigation

elements

show where user is

in
relation to web site structure

and what are other options and features he
/she

can use
.

A growing standard is that web site ha
s

top banner
and navigation bar on the left
.
(Benyon, Turner and Turner 2005)

Both elements are constantly presented on each
web page, so user always knows where to reach necessary navigat
ion related
information.
This leads us to other important issue of the web site design


the
consistency.

(Sano 1996)

In addition to traditional consistency related things, such as having a
n

overall standard
of fonts, colors an
d

image sizes, for
web page
s it is important to be in line with
well
-
known
web
features
.

(Sano 1996)

Most important of these
features are
use
underline

14

decoration only for links
; show navigation elements all the time in the same place;
provide appropriate reaction for using back and forward buttons of the browser etc.
If
these
issues are left out, the web page interface goes in conflict with
user habits for
browsing the Internet
,

what will definitely lead to misunderstanding and errors
.

(Shneiderman and Plaisant 2010)

When designing for a web, technological constraints should be also taken into
account.
Most important limitations are performance, netw
ork capabilities and
different browser support, however they
are considered more during technolo
gy
selection and implementation.
(Sano 1996)

Some of th
em influence on design as well;
t
hese are
limitations related to different
d
isplay resolution
s and capabilities of web
technologies used for implementation.

2.4.

Component
-
based development

This section contains general information about component
-
based development, its
advantages and drawbacks and its usage in web development.

Switc
h with previous subchapter?

Component
-
based development and reuse are well
-
known for several decades
. [Cite
Mass
-
Produced Software Components,
Software Engineering Concepts and
Techniques (1968

NATO Science Commi
ttee,
(Gaedke and
Graef, Development and
Evolution of Web
-
Applications Using the WebComposition Process Model 2001)

)]
The reason for such popularity is that compositional reuse helps to facilitate
development process and reduce the price of the final product.
(Gaedke and Graef,
Development and Evolution of Web
-
Applications Using the WebComposition
Process Model 2001)

[Cite other paper] Instead of developing web application from
scratch, developer can reuse an existing component. Component i
s a module that
encapsulates some functionality; it is independent and substitutable. Moreover,
component can communicate with other components;
it

can be combined from other
previously created components. Using of components can improve development
proces
s by reducing implementation time and number of errors.
Drawbacks?

When creating of web applications had became popular, practices of software
engineering were applied to web development
. [Cite Towards a software engineering
approach to web site developmen
t; Coda, F. and Ghezzi, C. and Vigna, G. and

15

Garzotto, F.; Proceedings of the 9th international workshop on Software specification
and design; 1999]

Currently there are at least two different types of reuse in the area: component and
service reuse. Compone
nt reuse means adding predefined component to the
developing web page or even composing the whole page from components.
(Gaedke
and Graef, Development and Evolution of Web
-
Applications Using the
WebComposition Process Model 2001
)

Service reuse is combining existing services
to create a new valuable service. [Cite, may be Web component: A substrate for web
service reuse and composition] Service reuse is not relevant to this thesis, while
component reuse is.

Using of predefined c
omponents (or widgets) is now highly popular for web
application development. For example, WebComposition Markup Language
(WCML), developed in University of Karlsrue, allows defining components and
creating web applications as a composition of these compon
ents.
(Gaedke and Graef,
Development and Evolution of Web
-
Applications Using the WebComposition
Process Model 2001)


Less formal examples are many modern content
-
management systems allow adding
ready
-
made and customizable wid
gets in order to enrich resulting web page. [Cite
WordPress, Drupal]There are tools for visual creating web forms from UI bricks,
which can be considered as simple reusable components.
(JotForm Easiest Form
Builder 2010)


The m
ajor problem of component
-
based development is providing sufficient database
of components and search engine, so user can find the component, which fits desired
requirements.
(Gaedke and Rehse, Supporting compositional reuse in co
mponent
-
based Web engineering n.d.)


16

3.

Review of
existing tools

In this
chapter

different existing
web
-
based systems for creating web applications are
reviewed. The purpose of this review is to investigate what main paradigms and
interaction models are
used in the existing systems

and also what the main problems
are
.
Good system design can hardly be created without knowing what are modern
tendencies and common solutions and problems in the area.
(Sano 1996)


According to scop
e of work defined in section
1.2
, the review is focused on web
-
b
ased tools
, which tries to simplify web application development and hence are
suitable for non
-
progr
ammers.
The review is centered on different concepts
implemented in existing tools, not on technologies for web development.
Based on
this scope,
a lot of well
-
known or modern technologies
and frameworks are left out of
the review
, since they assume
doing
m
ost of the web application development by
writing code on some programming language
.

During the review each tool will be checked through the following criteria, which are
important to the idea of XIDE (based on review made in
(Fra
ternali 1999)
):



Reuse (D
oes the
tool

allow
s

to reuse something
?

What are reusable objects? I
s
it possible to create new reusable objects?)



UI paradigm (What is main UI paradigm used? Is it useful? What are
interesting design decisions?
)

Besides these
two

issues, other
problems and features are reviewed.

With reference to
reviews and classifications found (e.g.
(Fraternali 1999)
,
(Jazayeri
2007)
),
different types of web development tools were
detected. According to the
scope of review, several types of tools were selected. The following review is grouped
by those types; review conclusions can be found at the end of the section.

Web based HTML

editors


HTML editors natively use
WYSIWYG paradigm

to
offer
non
-
technical users
way
to
create web applications without any programming
. When creation of web applications
by non
-
experts became popular, HTML editors were probably the first online tools for
web development. Currently they offer fancy WYSIWYG
editors
, media widgets

and
support of managing and publishing of the created applications. One example of this

17

kind of tools can be Google Sites.
It permits to add media widgets by selecting them
from the list and then manage them by drag
-
n
-
drop.

HTML edi
tors are
focused on

static pages for
information representation, not on
interaction web sites;

Form builders

These web based tools offer user a way for designing web form, that will be later
published and other user can access and fill it.
Resulting web page functionality is
restricted by
a concept of web form, what means it can contain different types of
fields to fill and submit button.
Form builders are definitely targeted to non
-
expert
users and hence try to simplify form creating proces
s as much as possible. For
example, JetForm (
http://www.jotform.com
) offers drag
-
n
-
drop interface for adding

and managing

different UI elements
in

the
WYSIWYG
-
like

editor.
The editor
sketches structure of the form, however it does not show the form exactly how it will
finally look like. Special preview mode should be used to see the final appearance of
the form.
It also provides different
tab
s, where different features are g
rouped, so user
can configure different setting of UI element and whole form. When the development
has finished, user can publish the form
on the server managed by JetForm.

Another
example is Form Builder by Orbeon, which allows building XFormsDB based for
ms.
Generally it has the same functionality as JetForm. The only major difference is

that
FormBuilder gives advanced users the possibility to view and edit source code of the
form.

Hypermedia editors; that’s actually the same as the designed system: HTML
+
externally inserted content (not media in this case, but functional parts); not very
popular;

Web Mashup makers

Another modern type of web applications is
Mashu
p.
Web
Mashu
p

is a web
application generated as a combination of different data sources, servi
ces and web
APIs.

(Yu, et al. 2008)

Mashups are supposed to be created by users to make desired
services for their own purpose.

(Maximilien, Ranabahu and Gomadam 2008)

There
are plenty of

existing m
ashups and
API
s

to

use during their creation. By May, 2010

18

there are 2000

t
o
o
ls and 4800

API
(ProgrammableWeb
-

Mashups, APIs, and the Web
as Platform 2010)

Initially, creating a mashup is difficult task, which may require
knowledge of text
parsing, pattern matching, databases, web services APIs, some technology to create a
client
-
side. There are different languages and frameworks for advanced users,

who
has programming skills (
e.g. ChickenFoot,

IBM Sharable Code
, Google Mas
hup
Editor
)
(Beletski 2008)

(Maximilien, Ranabahu and Gomadam 2008)

These tools are
out of

the scope of this review.

Nowadays there are a lot of Mashup environments for non
-
professional users. Wel
l
-
known examples are Yahoo!Pipes, Microsoft Popfly, QEDWiki
, Intel MashMaker
and many more.
(Yu, et al. 2008)

However t
here is a tendency
to discontinue
some mashup tools, which were popular
several years ago (e
.g. Google Mashu
p Editor in 2009;
Microsoft Popfly

in 2009
;
QEDWiki is replaced by IBM Lotus Mashups, however the approach remains the
same
)
.

On the other hand,
new mashup editors appeared and new mashups are created
everyday, what means that the area is popular and users are interested in creating this
kind of applications
(Yu, et al. 2008)

(Ennals and Gay 2007
)

However mashups are more about combining the information, mashup tools are
highly interesting for this review because of the general task of the mashup tool: help
non
-
professional user to create a mashup by combining things without programming.

Mash
ups tools natively have reuse
-
based approach for development, since each
mashup combines existing services and content. In addition to components used to
access to services and data, some mashup makers provide other more complex
components.

Most of mashup

tools provide means for deploying the mashup on
the

server

and
maintain it
, so user does not have to worry about running a web server. Some of tools
are implemented using technologies, which require additional plug
-
in installation in
order to be able to u
se the tool.

YahooPipes

Mashup
maker

h
as an IDE
-
like

interactive AJAX editor

with module
library, canvas and debugging area
s
. To create a data mashup,
user
should select

modules from the library, drag
-
n
-
dro
p

them on the canvas, wir
e them with the mouse
,
c
onfigur
e

module
s’ settings to make them fit the task and publish the pipe.

It uses

19

pipe metaphor and dataflow model.
Users are required to have basic programming
skills and understanding of data structures.

Microsoft Popfly use
s

the same paradigm.
It has
one interesting design solution that
should be noted. When
creating an mashup, user can switch between two zoom levels.
When configuring the component, user can zoom
in
to see only necessary component.
When editing has finished, user can
zoom out to see th
e overall structure of the
system.

Component models are extensible.


Intel Mash Maker is a browser extension, which allows to create a mashup using
point
-
and
-
click

paradigm.
It has a library of widgets, which are rated, and user can
use these widgets in the mashup.

QEDWiki also provide
d

predefined
widgets to

create a mashup.
It

has several views
to perform different actions in order not to overload the interface. When comes t
o
page creation, user has to define a page layout first. After that, a canvas for widgets is
generated. User can drag
-
n
-
drop widgets into places, defined by page layout. Widgets
can be with or without user interface, depending on functionality.
Widgets

can

automatically interconnect with each other to work together.

Content management systems and modern blog management systems

CMS or blog environment becomes quite popular. Initially these systems were
focused on content presentation and blogging

(Douglass, Little and Smith 2005)
.

N
ow
they are developing to provide wider modern functionality (managing multiple users,
events and error handling) and is said to allow users to create general
-
purpose web
site

[Cite e.g. wordpress web

page]
.

However it is not native to make static pages in
those systems, so it requires some workarounds to implement those
, which is suitable
for non
-
expert users
.


According to reviews of the market distribution,
three systems dominate the market:
Joomla
, Drupal and WordPress.
D
epending on the
point of
evaluation (e.g.
average

download rate, current usage, brand strength measurement

etc.
) the leader product can
be different.
(2009 Open Source CMS Market Share Report 2009,

Browser market
share 2010)



20

A
ll three systems uses quite same UI paradigm,
and the basic workflow is generally
the same. T
here

are detailed Drupal usability research results
published
, so the UI
approach can be reviewed against user experience as wel
l
.

The interface is based on the menus and settings sections. The content has to be
created and managed using lists and wizard
-
based forms
, and users complained about
lack of intuitive user interface
.

(Scollan, et al. 2008)

Sy
stems has terminology
metaphors (pages, stories, blocks, panels), which are widely used during the site
development, however they are not obvious to user since there is no graphical
representation of these terms.

(Scollan, et al. 20
08)

W
ordPress is quite similar

to Drupal
, despite the fact that it is a bit
easier

and the
functionality
is restricted

more to create a blog

web page
.

It also has sections and
lists
that

should be used
for

web site
creation and maintaining
.

However
the latest version
of WordPress allows some drag
-
n
-
drop includes, direct manipulation is not presented
widely
.

Drupal (as well as Joomla and WordPress) is extendable (modules, widgets), however
it requires quite high level of technology knowledge from the
extension developer. It
is a common practice that developer
community, not simple users, implements
these
additional
items
.

Conclusions

This review shows tendencies and common solutions in the area of simplifying web
application development. However there

are a lot of tools

and approaches
, none is all
-
purpose
: each tool has a target type of web applications.

As it was decided at the beginning of this section, most important aspects of the
review were
used interface and reuse paradigms.

The interface para
digm is the most important aspect of this review. Most of mashup
tools uses drag
-
n
-
drop paradigm for adding and managing components. However,
there is usually a combination of drag
-
n
-
drop, form
-
filling and sometimes text editing.
WYSIWYG paradigm is highly

used for creating simple HTML web pages. Non
-
WYSIWYG HTML editors and Form builders use drag
-
n
-
drop. However, some
builders work so that user selects the component from the library and then specifies
the place it should be placed with mouse without drag
-
n
-
drop. Content
-
management

21

systems usually support old style of interaction: user can add component by visiting
special page, where he/she can add/remove components by using standard UI
elements like input fields, check boxes and buttons.

It is important to

note that many tools use special mental metaphors: either for
organizing the internal system data, like content
-
management systems or for
representing system parts. Metaphors are also modern style of designing user
interfaces, and it is reasonable to use
them to simplify the interface and help user to
learn it faster. [Cite metaphors from book]But it should be clearly checked, that
selected metaphor increases interface usability, since sometimes using of metaphor is
not understandable for users.

Some of t
he tools offer a possibility to go under visual editing and view and edit
source code of the application directly. This feature can be reasonable for advanced
users.

It is common for such tools to provide a hosting for created applications. However,
some
content
-
management systems assumes, that user will maintain the application.

Generally reuse paradigm is represented in most of the tools; however the style of
reuse differs depending on the type of the tool.
Yu et al. proposes to consider Mashup
makers as

tools for components (or widgets) integration based on some composition
logic.
(Yu, et al. 2008)

This classification can be
extended
over all tools in this
review. Accordin
g to that, the type of component

can be different
, dep
ending on how
does it behave:
data

component only provides data for the application;

application

logic
components are used to construct the application functionality;
user

interface

component

provides UI
). Mashups
makers
often
have

only data and application logic
components, while HTML
editors

and
content
-
management systems usually have UI
components and sometimes
application logic

components.

One important aspect of
component reuse is whether system allows
creating of new component
s or extending
existing ones. Content
-
management systems often provide such opportunity, as well

as some Mashup makers. However, the way in which the system can be expanded
with the new component is usually not suitable for not non
-
professional user. Usual
ly
members of developer community make extensions.
Other issue is whether the
component is customizable.


22

According Yu et al., another
aspect
of comparison is compositional model, which
defines how components are integrated

and how they communicate
.
The ap
proach can
be flow
-
based, event
-
based or layout
-
based. There can be also different data
-
passing
styles: dataflow and background approaches. Mashup makers represent different
combinations of these approaches. For the other reviewed types of tools, there is
nearly no communication between components.

As a conclusion, both interface and reuse paradigms should be selected with attention
to the needs of end user.


23

4.

R
equirements

for the system

This chapter contains information related to requirements to the syste
m.
It starts with
the description of system general idea, continues with persona study to
understand
possible users needs and finishes with
high level requirement list
.

4.1.

General idea of the system

As it was stated in the
Introduction to a problem

section, XIDE should be a tool for
creating web application based on XFormsDB. It should be based on component

reuse
paradigm a
nd help non
-
professional users.

Discussing
the general
idea above
,
possible

main workflow
was
described
.

User has
an idea of the
web application (o
r web page) he/she wants to have.
User
logs into the
system and looks through existing
components

and finds
the one

(or several)
, which
suits the idea of the service.

The complexity of the component can
vary
: it can be a
simple clock, which shows current time of the corresponding time zone; it can be a
complex photo gallery or featured map.
Then user adds the se
rvice
(s)

to the
page
,

configure it or add some minor changes according to his idea. User can modify
existing
component

to add/remove some functionality or create a totally new service.

And

finally user makes the page available in the Web so other people ca
n access it.

This approach fits both simple users and experts. The system can be designed so that
the whole work of creating new page can be done just by reusing services and without
entering a single line of code. On the other hand, experts can go deeply

into the
source of the service or page and edit everything manually. In addition, both simple
users and experts will benefit from application management part and other general
features of the system.

Looking from more technical point of view,
w
eb applicat
ion consists of one or more
web pages. In case of plain XFormsDB, each page
is written on XFormsDB, which is
a
combination of
X
HTML, XForms and XFormdDB tags.

(Laine 2010)

XIDE uses
the idea of

reusable components

(see
Figure
2

XIDE reusable components
)
.

Each
component

provides some functionality, which is implemented
using XFormsDB
technology
. One or several components
can be buil
t

in

a
web page
.
Finally,
web page
can contain mixed XFormsDB code and components.

Later on, it will be probably
possible to include components based on technology other
than

XFormsDB.


24


Figure
2

XIDE reusable components


After general idea of the system ha
d been specified, it was time to start to define the
requirements for the system. Since there is no existing target group and no users,
which can be observed or asked, the requirements should be defined without external
users. This includes review of exist
ing systems of the same kind

which was made in
Section
3

and internal user profiling (Section
4.2
)
.

4.2.

Personas

There is no need to make a completely generic

system.
Trying to imagine system’s
users and what are their tasks and problems will help to understand better what
requirements the system has. Research based on User profiles technique can help to
transfer developer’s ideas and thoughts about the users i
nto
official form and check if
these ideas are realistic. It
can be performed at the real beginning of the development.
(Kuniavsky 2003)

To describe in a nutshell, using this technique, developers
think about future system
users and
create User Profiles (or Personas) of the fictitious users, which will use the

25

system. Each profile includes user’s background, knowledge, tasks and problems and
shows
the functionality th
is user expects from the system
.

(Kuniavsky 2003)
,

Before the work has started, there was no idea who

future system’s users

are
.
A
s a
result, there were created three

user profiles.

Briefly they are non
-
programmer,
programmer and expert.
In order to avoid
drawing attention to unnecessary details,
there was no much personal information in the personas at the beginning.

[Cite
Personas manual]

User profiles were focused on
different background skills and
knowledge, different tasks to perform in the system and
different way of performing
those tasks. However later on during the work they got some details.
Since deep
detailing and persona cards are needed to share personas between big development
teem, it was decided to skip those details.
(Long May 2009)

Specific demographic
details were added later on to make personas more descriptive and real.

Here is brief description of the user profiles:


non
-
programmer
”: Mike
,
Male
,
3
0,
car
repairman,

owner of a garage.

Usage of computer and

web
:

He uses computer for surfing the Internet and paying
bills. He has never developed any program or web site; he has a strong believe that it
is very difficult and he would never do it.

Tasks: He wants to create a page for his garage, so it can be fou
nd using search
engines. He has some content to add (static info, type of work he does, prices), wants
to have some features like online
-
booking and responses.


programmer
”:
Tom, Male, 23, student of computer science.

Usage of computer and web
:

He is on c
lose with computer, spends a lot of time
behind it in the university and at home, does programming for study projects (Java,
C#, HTML, CSS ), has general knowledge about XML and HTML. He has never tried
XFormsDB.

Tasks: He wants to make a web site about t
he open source project he did during one
of the courses (static content, styling, person counter, news feeds, responses,
questions). Also he wants to become familiar with the.


expert
”: John, Male, 30, administrator of the system

Usage of computer and web
:

He is on close with computer, knows
XForms&XFormsDB (has an experience in developing XFormsDB based web sites)


26

Tasks: He wants to create and update components for the system, wants to test them
in the applications

4.3.

Requirements

Requirements described in th
is section are very high
-
level. They summarize general
idea of the system and personas and discussions about XIDE workflow and users
tasks.

Add requirement about non
-
professional and professional users and their needs (e.g.
being able to use source code
)

Add non
-
critical requirement about page samples and other non
-
critical
requirements.

Application management requirements

FR1.


It should be possible to create application and add page(s) to it. It should be possible
to create application/
page from scratch or based on sample application/page (e.g. can
include draft functionality or ready layout solutions).

FR2.


It should be possible to see all application and pages user has created before and edit
any of them.

FR3.


Each application/page should have descriptive information, telling when and what
for this application/page was created for.

FR4.


It should be possible to publish the application; after that it should become available
online.



27

Page management requirements


A
fter user profiles and
functional requirements have

been defined, requir
ements
related to system implementation could be defined. These requirements are technical
issues, although they are very important for the system and its usability in general.
Later on, during implementati
on part, these requirements will be used for
implementation technology selection.

TR0: should allow early prototyping?

TR1:

The system should be web
-
based

Though this requirement was defined in the scope of work, it is native to have this
system web
-
based.

It should be possible to access the system from any computer. Non
-
programmers can
even do not have their own computer and access the system in public places and
FR5.


Page content should be displayed in a WYSIWYG

style
. It should be possible to
see what is going to be the final result while developing a page (at least in
schematic manner). However, it should be possible to view and edit source of page
directly.

FR6.


There should be a database of predefined component’s template. There should be a
search engine to search for available component’s templates
.

f琠獨潵汤⁢攠l潳獩扬攠
瑯⁳敡牣栠h牯洠r潭灯湥o琠慮搠瑲y⁩ 畴⁷楴桯畴⁤h浡m楮g⁴桥⁷e戠灡来
.


co㜮


Components should
be reusable (which means one component template can be used
on many pages or several times on one page) and customizable (which means there
should be a way how user can change appearance/behavior of component without
editing it’s source.

co㠮


It should be pos
sible to see component’s source. It should be possible to edit this
獯畲se⁩映畳 爠楳⁡渠n畴桯爠潦⁴桩猠s潭灯湥湴o


f湴畩瑩癥⁤ ag
J
n
J
摲潰da灰牯rc栠獨潵h搠扥⁵ e搠d
o implement component’s
a摤楮dL
chang楮g牤 爠⽲e浯癩湧.



28

cannot install any application there. System does require neither time
-
consuming data
processin
g on a client nor sending a lot of information to the server so there is no
strict reason why it cannot be implemented as a web
-
based
.
[Cite
Link required
]

TR2:

System should
support direct manipulation interaction style

(most
important

features
are drag
-
n
-
drop

and tree structure)


Since the direct manipulation in decided to be the main concept of the
system, it
should be possible to implement drag
-
n
-
drop using selected technology. Tree
structure is a native metaphor for application and containing pages.

TR3:

UI sho
uld be asynchronous

That means that extra data should be requested from the server and loaded in the
background without interfering with the display and behavior of the existing page

Using of asynchronous interface should make the usage of system more inte
ractive
and usable
.
(Garrett 2005)

[Cite Shn, p 474]

(# ^ Moore, John (2008
-
07
-
07). "What is
Ajax?". RIAspot.com. http://www.rianspot.com/articles/entry/What
-
is
-
Ajax
-
.
Retrieved 2008
-
07
-
07. # ^ Hope, Paco; Walther, Ben (2008), Web Security Testing
Cookbook, O'Reilly Media, Inc., ISBN 978
-
0
-
596
-
51483
-
9)

TR4:

Usin
g of the system by ordinary users should not require downloading
and installation additional plug
-
ins and libraries.

For non
-
programmer, need of downloading and installing extra software can hardly
decrease system’s usability and even prevent user from us
ing the system. Moreover
user can try to access to the system from public computers, where they are not
allowed to install any software.

TR5:

Normal using of system should be possible mostly in all browsers

Since users of the system are not restricted to use a
ny concrete browser it should be
possible to use

system properly at least from four

most popular browsers: Internet
Explorer, Mozilla Firefox, Safari, Google Chrome
(Browser market share 2010)

TR6:

It should be possible to access
to the system mostly from all operating
systems


29

It should be possible to use the system at least from
five

most
widespread

operating
systems, which are Windows XP, Windows Vista, Mac OS X, Windows 7, Linux

(W3Counter 4, 2010)


30

5.

Design

5.1.

Template language
concepts
design

Author of this thesis did template language design in close cooperation with Markku
Laine and with support of Nokia Research Centre people.
The information
,

which can
be found

in this subchapter
,

is highly important to follow the XIDE design flow. So it
was decided to include it in the thesis, despite
the fact author did o
nly a part of work
described.

The main idea of XIDE is that the web application is created based
on reusable
customizable compo
nents
. Thus
,

there should be an intermediate declarative language
to support using of these components on the page. Before this language is designed,
main XIDE concepts and their behavior should be discussed and described.

Some of the system concepts are
almost obvious. So,
Application

is a web site
-

a set
of Web Pages developed by the user that represents some functionality (home page,
internet shop…).

Creating of the application mostly consist of creating of web pages
it is formed of. When the applicat
ion is ready, it can become
available

online.
Additionally, it can be exported as a service to be used in some service composer tool.

Web Page

is an entire page, one of the application’s pages. Web page has a header
section that represents properties spec
ific for the web pages.

Web page can have
external
files, defined for plain XFormsDB page (CSS, data instances, queries,
resources).

Web page
source code (main XML file)
is formed from plain XformsDB
code and reusable elements.


31


Figure
3
: Customizable components in XIDE



According to the main design idea, a
C
omponent

is

an
element, which

represents a
piece of functionality.

It is made based on XFormsDB technology.

There can be
components with different complexity
.
Since component
is customizable, it

should
have properties and parameters, which can change its
appearance or behavior

or set
up a link between two components (see
Figure
3
: Customizable components in
XIDE
)
.
It should also be reusable.
To speak in programming language, component is
a function. You can define a function once in the program, and then call it from
everywhere with different parameters. That means there is only one instance

of the
function in the system, but you can call it from several places. The same idea is used
in XIDE

components
. Component is defined once in the system’s database, but it can
be called from any web page.
In addition to component’s source code (XFormsDB)
, it
can have its own external files, which can be used by XFormsDB application (CSS,
queries, data instances).

Finally
, c
omponent object can
have

meta
-
information
(component general information
and description, tags, settings, parameters),

component
’s

sou
rce

code

and other files
.

Components should be added to the page
, or, according to above discussion, called
from the page source
.
The place from where component is called should be

exactly

32

specified.
There was a long discussion about adding components dir
ectly to the page
or
having

special container element. Finally it was decided to have a container, and
the arguments
will be discussed
subsequently
.

So,
Container

(or slot) is a place where

components can be positioned on the page.
Container has graphical interface so it is easy to see where components can be added.
Container can have a
embedded

validation mechanism, so it can check whether the
component can be added inside this container. Additionally, c
ontainer
is a grouping
elemen
t, which can share
files(data instances, queries and CSS)

between its children
components

and manage group access rights
. File sharing means that the children
components can refer to container’s file in their source code. Access rights can be
set
to contai
ner and after that they will be automatically probagated to the children
components.

Using of containers gives the following advantages to the page development:



User can see where to add a component; container can provide visual
information about componen
t’s compatibility.



In the page source code containers can be organized to provide different page
layouts. Containers can be grouped via
XFormsDB
; when user will drag a
components, it will be automatically placed into correct place on the page (e.g.
sidebar
s or header/footer).



When user drops a component on the page, it is added to the container, which
has only component’s calls inside. Thus user cannot break the page source
code by adding a component

into
inappropriate

place (e.f. under incorrect
HTML node)
.



Since a container has only independent component’s calls inside, these calls
can be added, moved or removed easily without any damage to the final web
page output. That means user can freely manage components between
containers by drag
-
n
-
drop.


Web page
concept is now more clear .
Web page can contain plain XformsDB and one
or more containers.
Containers are hardcoded in the page’s source code. Page’s files
can be shared

between all
container
s and components on the page
.



33

Except the concept definition,
there were several important issues, which had a big
influence on the final design. These issues will be described briefly

below
.


Web page is actually a component?

Looking on Web Page and Component concepts
, it appears that the Web Page can be
represented

a
s a

special case of Component.

Both consist of plain XML and
containers
;

both can have external files
and share them between children; both can
have
access rights settings. Howewer, web page has additional specific properties.

Add a paragraph
explaining that the above is about web page source and component
source, their body and external files.


Can container include
plain XFormsDB
?

There is a use case, when user wants to insert an XML between
two

components

(e.g.
layout issue)
.

However, a
cco
rding to idea of container
, it should have independent
elements inside. These elements can be moved or deleted. Moving or deleting plain
XML can cause page syntax errors, which can
confuse user
.

So, including XML
inside container should not be allowed.
To accomplish a task described in use case,
either a component can be modified or a container can be separated into
two

containers, which can be wrapped with XML.



34


Figure
4

Save page as new component in XIDE

Saving page (o
r cont
ainer) as a new component

This is one of the conceptual ideas of the XIDE

(see
Figure
4
)
. When user has
developed the page that provides some functionality, he/she may

convert it to the
component and add it to the system database. It can be a page combined from other
components as well as a page made by expert user from scratch. Page becomes a
reusable element and available for all system users. For example, user can cr
eate a
small survey page, which asks user’s name, age and sex. After that he/she thinks that
this survey can be usable for other users. Moreover, he/she thinks that it would be
nice to add such kind of survey to the other application he/she made before. Us
ing
XIDE user can save the survey page as a component and then easily reuse it on any
other page.

Being able to save a container as a new component is also useful. Since container is a
grouping element, which can have common information shared between it
s children,
it can represent sufficient piece of functionality. In this case user is not strictly
required to convert the whole page to component, he/she can save only single
container.



35

After concepts have
been
discussed, it
becomes

possible to draw a cla
ss diagram,
which shows a relationship between concepts

(
Figure
5
)
.
According to
it, Component
consist
s

of XML and container(s). Web page has the same options like a Component
has

and some additional properties specific for Web Page. Application consist
s

of
Web Pages.


Figure
5

Concept class diagram

Visual representation of the co
ncept
s

can be found on the diagram

(
see
Figure
6
)
.

A
web page
has containers for components

(Slot 1 and Slot 2) and plain XformsDB
parts
.
Each container can have comp
onents inside.
Each of Web Page, Container and
Component can have its own external files, which are shared between its children.