3.1 View and edit the page content visually in a schematic manner on the Design tab, so all UI elements of the page and components are displayed.
3.2 View the page in a full-functional preview mode on the Preview tab, which shows final version of the page with all functionality.
3.3 Modify the source code of the page and see the results on the Design tab and Preview tab instantly.
supports highlighting of XFormsDB syntax and structure of the element.
3.5 View and manage the hierarchy of the page elements (containers and components) in a tree structure on the Navigation tab.
3.6 View and manage the hierarchy of component and page files and folders on the
File tab. Edit the content of different source files on the corresponding tabs (e.g., CSS tab, Queries tab, Data Instances tab).
3.7 Search for a component in the database using different search criteria, such as text string, tags.
3.8 Add, manage and remove components to the page by drag-n-drop or by manual coding.
3.9 Configure component parameters in visual interface, using wizard or by manual coding.
3.10 Modify the component source and contribute a new component to the database.
3.11 Save the Web page as a new complex component to the database.
The Table 10 shows how XIDE functionality covers the requirements defined in previous chapter.
Table 10 Relation of XIDE functional requirements and XIDE features
XIDE features 1.1 1.2 1.3 1.4 2.1 2.2 2.3 3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8 3.9 3.10 3.11 3.12 1.1 X X 1.2 X X 1.3 X X X 1.4 X X X 2.1 X X 2.2 X X 3.1 X 4.1 X 5.1 X 5.2 X 5.3 X 5.4 X X 6.1 X X X 7.1 X 7.2 X X X 8.1 X 8.2 X X 8.3 X X X 9.1 X 9.2 X 9.3 X X X 9.4 X X 10.1 X X 10.2 X 10.3 X X X
XIDE functional requirements
11.1 X
N;N;
V<LI(&%'@7$/'$9%/(
Documenting software architecture is useful during all steps of project development.(Bass, Clements, & Kazman, 2003) Descriptive documenting is important to further comprehension and maintenance of the system. Also, architecture documentation helps to introduce the system to new users. (Clements, Garlan, Little, Nord, & Stafford, 2003) System architecture should be described with appropriate level of details and well organized, so the reader can easily understand the system on the required level. (Bass, Clements, & Kazman, 2003)
IEEE Recommended practices for architectural description claims, that it is highly important to identify target stakeholders, their roles and the purpose of the documentation. (IEEE Standard 1471-2000, 2000) In this Thesis, the aim of documentation is to present XIDE architecture to provide a general understanding of how the system works. There is no need to include detailed system architecture here, since it is not supposed to use this Thesis as a reference document for further development or maintenance of XIDE.
More detailed description of XIDE architecture and implementation can be found at XIDE project page20
.
Since the standard does not define exact language for architecture description, there are many frameworks used for documenting the architecture. (Bass, Clements, & Kazman, 2003) They specify the set of views that should be used. View is a representation of the system from some perspective, e.g., how the source code is organized or how the system is distributed among computers in the network. However, the frameworks assume too detailed level of documentation. Finally, it was decided to utilize general practices, described in (Clements, Garlan, Little, Nord, & Stafford, 2003). According to that, there is no fixed set of views, which should be used for system architecture description. (Clements, Garlan, Little, Nord, & Stafford, 2003) provide a classification of views and recommendations, how to choose appropriate set of them.
There are three general points of view (viewtypes) on the system architecture: Module viewtype shows the structure of the system; Component-to-connector describes how does system behaves in runtime; Allocation viewtype shows the relation between software elements and external environment. Each viewtype can contain several views. IEEE standard recommends that the view should correspond only to one viewtype in order to reduce details and simplify the perception of the view. (IEEE Standard 1471-2000, 2000)
In this Thesis, each of the three viewtypes will be represented with one view.
N;N;:;
J#/#(67/-(
Module viewtype is represented by Uses module view. It shows logical structure of the system and dependencies between modules. Elements of the view are modules, which are units of implementation.
In this Thesis, modules are created based on implementation packages. For reader’s convenience, the module diagram is separated into two parts: client- and server-side.
First, client-side uses view is depicted on Figure 15. Client part of XIDE is responsible for UI representation and managing user actions. It sends requests to the server in response to user activity and processes server response.
Figure 15 Uses view of the client-side of XIDE
Table 11 Uses view of the client-side of XIDE: modules description
Main Main class takes care about XIDE client-side initialization process. After that, it manages different application views, switching to corresponding view according to both XIDE user actions and browser back and forward events. It is also responsible for corresponding header links management. Finally, it handles events, which are sent by different elements and needs
to be propagated.
Views Contains set of Views classes. Each of them is responsible for one view (Welcome page, Application List, Application, Page). Common functionality is event propagation management. Each view initiates the tabs it consists of and displays them on the screen accordingly.
Tabs Tabs package contains set of different tabs. Their common functionality is possibility to update the displayed information according to received event. Each tab is responsible for rendering the information it contains and update it according to the events received.
UI Widgets UI widgets package contains different custom UI objects to be used on the Tabs (e.g., Panels, styled buttons, etc.).
Page Elements Page elements are Component, Container and Web Page. Each element is UI representation of corresponding Template Language abstraction and takes care about both logic and graphical representation of the object.
D-n-d D-n-D package contains classes responsible for drag-n-drop process. It is utilized by several tabs, which have drag-n-drop functionality.
File Structure File structure’s main responsibility is to provide abstractions, which represent physical files and folders in XIDE. It is utilized by File Structure Tab, which shows physical file structure of the object at the server (e.g., application or component).
XML parsing XML parsing takes care about parsing and rendering XFormsDB on the client-side.
Popups Popups package contains custom popup windows with different styles and purposes. There are general popups (e.g., Error Popup or Notification popup), which are widely used in the system. There are also custom forms and wizards; they are used in special cases, e.g., New Application Wizard
or Tag Search popup.
RPC +
Authentication
RPC is responsible for communication with the server by means of Remote Procedure Call; authentication process is integrated with RPC.
Server-side implementation consists of three servlets, which are responsible for the communication with the client, and several supporting modules (see Figure 16). Main server part responsibilities are communication with the database, managing file structure, publishing the application, etc.
Figure 16 Uses view of the server-side of XIDE
Table 12 Uses view of the server-side of XIDE: modules description
Main Servlet Main Servlet is responsible for communication with client based on RPC calls. It process requests to the database and forwards requests to other modules.
File Structure This module is responsible for creating and parsing file structure on the server. It is used when new application is created or when page is requested from the client.
ASI The module takes care about communication with ASI server to perform authentication-related tasks.
Validation This module validates pages and components syntax. It is used when page or component is saved.
Publish & Preview
Publish & Preview module is responsible for application publishing and preview. It manages transformation, copies necessary files, initializes Exist database and deploys the application.
TL
transformation
This module takes care about transformation from internal Template Language into XFormsDB. This includes substitution of parameters and component’s calls with valuable source code.
Export Servlet This Servlet handles client requests to download files from server. It is used to export the application as a widget.
Widget Maker This module is responsible for creating archive with the published application. This archive can be used to deploy the application on the external server.
Upload Servlet
This Servlet processes client requests to save a new file to the server.
N;N;>;
5.7/+$X#/%6/%(67/-(
Component-to-container viewtype is represented by client-server view (see Figure 17). It illustrates how client and server communicate in the runtime. Elements in this view are client and server components and protocol connectors.
Figure 17 Client-server view of XIDE
Table 13 Client-server view of XIDE: elements description
Client Client part of application running on user’s Web browser on user’s computer.
Server Server part of the application running on the external server. Three servlets are responsible for communication with the client.
RPC +
Authentication
This module is responsible for communication with the server by means of RPC. All other modules use this module in order to send an RPC request to server and receive a response.
Main Servlet This Servlet manages all RPC requests, received from the client.
Export Servlet This Servlet processes client HTTP requests to download a file.
Upload Servlet
This Servlet processes client HTTP POST request to save a file.
RPC RPC is a communication technology used for remote invocation. In XIDE it is used to implement asynchronous AJAX request to the server to perform some server-side action. Often it includes communication with the database and/or managing file system.
HTTP A standard HTTP request.
N;N;D;
L/=.,P2/+$(67/-(
Allocation viewtype is represented by deployment view (see Figure 18). It shows how the system is distributed among the network during deployment. According to (Clements, Garlan, Little, Nord, & Stafford, 2003), it should be used for performance evaluation and improving. In this Thesis, it is more high-level and only describes how the XIDE tool is deployed and its environment.
Figure 18 Deployment view of XIDE
Table 14 Deployment view of XIDE: elements description
Client Web browser
User accesses XIDE from a browser on user’s computer. Also, user can access a published XFormsDB application directly.
However, it is not obligatory to have both applications running on the same server.
XIDE XIDE is deployed as a Web Application archive (WAR). It contains Web pages, related pictures, JavaScript scripts, and servlets to process server- side functionality. It communicates with XIDE database (MySQL) and XIDE files (File system). While XIDE processes user action, it may require communicating with XFormsDB engine. This happens when user requests to view the page, written in Template Language, i.e., when user requests to preview the page.
MySQL MySQL relational database contains information about components, users, Web pages and applications. It also supports tags; currently tag can be assigned only to a component.
Files system XIDE physical files include components’ and application sources and published and previewed applications. They are organized and stored on the server.
XFormsDB This part represents XFormsDB related part of the system.
XFormsDB engine
XFormsDB engine is a Web application deployed on the server. It takes care about processing XFormsDB applications. (Laine, 2010) Its main responsibilities are processing of XFormsDB into XForms transformation, communication with Exist database and processing requests to display XForms applications.
XFormsDB applications
XFormsDB applications are deployed to the server and can be accessed both by XIDE and user’s browser. In order to be displayed in the browser, each application should be processed by XFormsDB engine. (Laine, 2010)
eXist eXist XML database is used by XFormsDB applications to store the data. XQuery and XPath can be used to manipulate the data.
Y;
I6&.9&$7,+(&+0(07#'9##7,+(
This section contains evaluation of the XIDE prototype tool. The evaluation starts with the presentation of the sample application and discussion whether XIDE facilitates end user development and provides a gentle slope of complexity. After that, a description of usability testing study and its results are presented and discussed. Finally, the results of expert evaluation of XIDE are presented.
Y;:;
C&2=./(K/"(&==.7'&$7,+(
In this section, XIDE is evaluated by the mean of detailed inspection of the creation process of sample application. The goal is to analyze whether XIDE provides a gentle slope of complexity and facilitates end users during the development. The inspection focuses on the most important steps of the development of sample Web application in XIDE. Finally, the estimated slope of complexity for XIDE is discussed.
This section describes the process of creating a Web application by Alice, one of XIDE personas, defined in Section 5.1. A use case for the demo application is the following. Alice is a volunteer at university radio station and her responsibility is to create a list of the latest news headers and to read them during a short morning broadcast. Previously she used to look through different news Web sites stored as bookmarks in her browser and write down all interesting news headers on the paper. Now, she is going to create a Web application, which allows her to combine together all required news Web sites and an electronic notebook, where she can store the headers. She will be able to see all news feeds on one page and store an interesting header in a second; when finished browsing, she can read the resulting list of headers from the same application.
During the application development using the XIDE tool, Alice performs several actions described below.
Understanding the possibilities of the XIDE tool
Besides help information, XIDE provides demo applications, that can be viewed in order understand the possibilities of the tool and imagine what kind of applications it is possible to create with the technology. Any XIDE user can access demo applications from the
Application List view, described in Section 6.5. A user can view, modify and preview the changes, however it is not possible to save the changes.
Getting started
XIDE does not require any installation or additional configuration before a user can start using it. It also does not require installing any plugins to the Web browser. It is available online and Alice can used from any computer.
Create the application
XIDE provides a form-based wizard that allows to create a new application without any manual actions, such as creating folder structure, creating configuration files and code writing (see Figure 19). Alice does not need any knowledge about the structure of the XFormsDB application.
Figure 19 XIDE: Create new application wizard
Create the page
XIDE also provides a similar form-based wizard for creating a new page. The wizard provides different options, including creating an empty page, creating a page with XFormsDB skeleton, and creating a page with a container for adding components right away. Alice
decides to select the third option, because she wants to try XIDE and does not want to do any manual coding yet.
Alice creates a page and opens it in the Page view, described in Section 6.5.
Choose components
Alice looks for appropriate components in the component database. She tries to search for “news”, “feeds” and “notes”. Alice checks the descriptions and sees that some components are marked with “self-sufficient” tag. That means that they do not need any other components or configurations to work. She decides to use this tag in search as well. She drags some components that fit her search criteria to the page to see how they look like (see Figure 20).
Figure 20 XIDE: Adding new component to the page
Finally, she decides to use two components: RSS reader and Notes components. She drags two RSS readers and one Notes component to the page. The page she created does not have any layout, so the news feeds and the note components are displayed vertically one after another.
RSS reader
Displays RSS feed as a list of clickable headers. Feed link to display is a parameter that can be edited by user.
Notes
Allows you to enter your notes and see and delete previously entered notes. Number of notes and notebook title are parameters.
Customizing components
Alice configures the RSS reader components by setting the RSS feed URLs of Web sites, which she previously used for gathering the news.
She tries the application in Preview tab, checks that it works as she planned and proceeds to publishing. Alice publishes the application by pressing a single button and finally gets the working application online.
Edit the page source code
Alice uses the application for several days and finally decided to modify it. She does not like that the components are placed vertically, because it is inconvenient to scroll the page to reach her notes.
She logs into XIDE and looks for the application she created previously. She decides to create a table layout for the developing page, so that several components could be places in a row. In order to achieve this task, she needs to make changes to the source code of the page. She selects the page visually and opens the tab with the source code. The tab provides advanced code editing features, such as highlighting of XFormsDB and TL syntax and error checking on the fly.
Preview the page and page hierarchy
In order to see the final result of her coding, Alice decides to open the Preview tab while she does the code editing (see Figure 21). When she changes the source code, the changes immediately appear on the preview of the page. She also checks the structure of the page on the Page Hierarchy tab.
Figure 21 XIDE: Preview of the page and hierarchy of the page
Finally Alice gets the improved application published.
Edit the component
Alice showed her application to her group mate, who argued that the style of components is not good. Alice decides to try to change the style. She thinks she became more familiar with the XFormsDB while she was creating the application.
She logs into XIDE and finds her application. She selects the RSS component and changes its CSS file. She uses the Preview tab again in order to see the effect of her changes.
When Alice succeeds in CSS editing, she also decides to modify the functionality of