# Automatic Generation of Web Applications from Visual High-Level Functional Web Components

Authors: Quan Liang Chen; Takao Shimomura
Journal: Advances in Software Engineering
 (2009)

---

## Abstract

This paper presents high-level functional Web components such as frames, framesets, and pivot tables, which conventional development environments for Web applications have not yet supported. Frameset Web components provide several editing facilities such as adding, deleting, changing, and nesting of framesets to make it easier to develop Web applications that use frame facilities. Pivot table Web components sum up various kinds of data in two dimensions. They reduce the amount of code to be written by developers greatly. The paper also describes the system that implements these high-level functional components as visual Web components. This system assists designers in the development of Web applications based on the page-transition framework that models a Web application as a set of Web page transitions, and by using visual Web components, makes it easier to write processes to be executed when a Web page transfers to another.


---

## Body

## 1. Introduction

To develop a
Web application, we need to write a lot of codes to
perform processes such as display of Web pages, receipt of requests, execution of actions, session
operations, database accesses, and business logic. On the other hand, before we
develop a Web application, we have some images of
the application (i.e., what it will be like or what it will look like) in
our mind. The objective of our research is to make it possible to develop Web
applications with less code by making full use of such image. Conventional
development environments for Web applications only provide fundamental Web
components such as text fields, buttons, checkboxes, anchors, and tables. They
have not yet supported high-level functional Web components. This paper
presents the automatic generation of Web applications that makes use of
customizable visual high-level functional Web components such as frames,
framesets, and pivot tables, which are close to our image and make it possible
to develop Web applications with less code.Web applications that need to show a lot of
information on one Web page at a time often use inline frames, exchange
displayed elements using their tabs, or enable users to see a hidden part of
the page using the scroll bars of a Web browser. On the other hand, if Web
applications use an HTML frame facility, they can display a lot of information
on one Web page at a time and show it to users [1]. The users can easily grasp
the outline of the provided information, and at the same time, they can see the
contents of the frame of interest in detail by extending the frame to the whole
page if they need to. Therefore, some Web applications that need to display a
lot of information at a time such as computer-assisted instruction systems,
Web-based chat systems, and the Help windows of various kinds of Web
applications often use the HTML frame facility [2, 3].The pivot tables sum up various kinds of data in two
dimensions. They reduce the amount of code to be written by developers greatly.
The paper describes how to implement high-level functional components as visual
Web components and it also presents the system, which is an example of their
implementation. This system assists designers in the development of Web
applications based on the page-transition framework. This framework models a
Web application as a set of Web page transitions, and by using visual Web
components, makes it easier to write processes to be executed when a Web page
transfers to another Web page.


## 2. Image-Oriented Design

### 2.1. Design Example of A Web Application

In the system, we design a Web application by copying
our image of each Web page into a Web page window. Like home page building
tools [4], we choose
Web components such as hyperlinks, HTML tables, text fields, text areas, submit
buttons, framesets, and pivot tables from menus (or buttons), and paste them
into a Web page window that corresponds to each Web page. In this section, we
consider a simple Web application favoriteCake that obtains the
information of favorite cakes by means of questionnaires. This application
consists of three Web pages, entryCake, chooseCake, and loveCake.(1)
Customers
first enter their names in theentryCake page.(2)
They choose their favorite cake from a menu in thechooseCake page.(3)
TheloveCake page shows the cumulative
result and the history of their answers.Figure1(b) illustrates the design of this
application, which consists of entryCake page, chooseCake page, loveCake page, cake DB table, and favoriteCake DB table.
Figure 1(a) shows
an example of its execution.Figure 1
Questionnaire programfavoriteCake.We store the names and the images of a variety of
cakes in a database table (hereafter, described as a DB table)cake,
which is shown in the top right corner of Figure 1(b). The DB table favoriteCake,
which is shown in the bottom right corner of Figure 1(b), stores the history of
customers' answers. It stores the customer's name in the name field, and
the customer's favorite cake in the cake field. For each kind of cake,
the loveCake page displays the number of the customers who like it by
using a pivot table (described in detail in Section 4).We drag and drop each field of these DB tables into
the Web pages. By this, the system inserts field references such ascake.name, cake.image, favoriteCake.name, and favoriteCake.cake at
the dropped positions. At the execution of the application, these field
references display the values of the corresponding fields in various forms such
as text, images, buttons, and checkboxes. In addition to DB tables that are
stored persistently, the system introduces the Program tables that are only
used during the execution of the program. Developers can use these Program
tables as visual components [5]. By dragging some fields of a Program table into a
Web page, their values can be displayed when the application is executed. The
Program table can be joined to other Program tables and DB tables. For example,
a Program table can be used to store the contents of a shopping cart in online
shopping applications, which is only used in a session of the application.


### 2.2. Mvc Architecture

In the system, we develop Web applications based on
the Model-View-Controller (MVC) architecture [6] as shown in
Figure 2.
The MVC architecture isolates business logic from user interface, resulting in an
application where it is easier to modify either the visual appearance of the
application or the underlying business rules without affecting the other. The
model represents the data of the application and the business rules used to
manipulate the data; the view corresponds to elements of the user interface;
and the controller manages details involving the communication of user actions
to the model.Figure 2
MVC architecture.We first design DB tables and Program tables. If
database tables have already been created by some DBMS tools, we have only to
recall them in the DB table windows of the design workspace. Next, we drag some
of the fields of these tables into Web pages to display. Finally, we write
business processes in the Web source windows. The system automatically
generates methods necessary for accessing the Program table data. In summary,
we design the data access layer (model) of the application using DB tables and
Program tables, design its presentation layer (view) using Web page windows,
and write its business-logic layer (controller) using Web source windows.In any phase of the development, developers can verify
their applications by displaying Web page previews, Web page transitions, Web
frame references, and various kinds of field references. As shown in
Figure1(b),
the system displays references between components as arrows whose colors
indicate the types of the references.


## 2.1. Design Example of A Web Application

In the system, we design a Web application by copying
our image of each Web page into a Web page window. Like home page building
tools [4], we choose
Web components such as hyperlinks, HTML tables, text fields, text areas, submit
buttons, framesets, and pivot tables from menus (or buttons), and paste them
into a Web page window that corresponds to each Web page. In this section, we
consider a simple Web application favoriteCake that obtains the
information of favorite cakes by means of questionnaires. This application
consists of three Web pages, entryCake, chooseCake, and loveCake.(1)
Customers
first enter their names in theentryCake page.(2)
They choose their favorite cake from a menu in thechooseCake page.(3)
TheloveCake page shows the cumulative
result and the history of their answers.Figure1(b) illustrates the design of this
application, which consists of entryCake page, chooseCake page, loveCake page, cake DB table, and favoriteCake DB table.
Figure 1(a) shows
an example of its execution.Figure 1
Questionnaire programfavoriteCake.We store the names and the images of a variety of
cakes in a database table (hereafter, described as a DB table)cake,
which is shown in the top right corner of Figure 1(b). The DB table favoriteCake,
which is shown in the bottom right corner of Figure 1(b), stores the history of
customers' answers. It stores the customer's name in the name field, and
the customer's favorite cake in the cake field. For each kind of cake,
the loveCake page displays the number of the customers who like it by
using a pivot table (described in detail in Section 4).We drag and drop each field of these DB tables into
the Web pages. By this, the system inserts field references such ascake.name, cake.image, favoriteCake.name, and favoriteCake.cake at
the dropped positions. At the execution of the application, these field
references display the values of the corresponding fields in various forms such
as text, images, buttons, and checkboxes. In addition to DB tables that are
stored persistently, the system introduces the Program tables that are only
used during the execution of the program. Developers can use these Program
tables as visual components [5]. By dragging some fields of a Program table into a
Web page, their values can be displayed when the application is executed. The
Program table can be joined to other Program tables and DB tables. For example,
a Program table can be used to store the contents of a shopping cart in online
shopping applications, which is only used in a session of the application.


## 2.2. Mvc Architecture

In the system, we develop Web applications based on
the Model-View-Controller (MVC) architecture [6] as shown in
Figure 2.
The MVC architecture isolates business logic from user interface, resulting in an
application where it is easier to modify either the visual appearance of the
application or the underlying business rules without affecting the other. The
model represents the data of the application and the business rules used to
manipulate the data; the view corresponds to elements of the user interface;
and the controller manages details involving the communication of user actions
to the model.Figure 2
MVC architecture.We first design DB tables and Program tables. If
database tables have already been created by some DBMS tools, we have only to
recall them in the DB table windows of the design workspace. Next, we drag some
of the fields of these tables into Web pages to display. Finally, we write
business processes in the Web source windows. The system automatically
generates methods necessary for accessing the Program table data. In summary,
we design the data access layer (model) of the application using DB tables and
Program tables, design its presentation layer (view) using Web page windows,
and write its business-logic layer (controller) using Web source windows.In any phase of the development, developers can verify
their applications by displaying Web page previews, Web page transitions, Web
frame references, and various kinds of field references. As shown in
Figure1(b),
the system displays references between components as arrows whose colors
indicate the types of the references.


## 3. Frame and Frameset Components

### 3.1. Requirements for Frames and Framesets

Web pages can contain framesets, and framesets contain
frames. Moreover, the Web page that is displayed in a frame can also contain
framesets. Because this relationship ranges among multiple pages, it is
difficult to grasp with the conventional development environments. To make it
easier to develop Web applications that use frame facilities, we take into
account the following requirements.(1)
We can nest frames in a frameset more than
once, and we can create a frame pointing to another Web page that contains
framesets.(2)
We can easily understand the relationship
between the frames and the Web pages that are displayed in the corresponding
frames.(3)
We can easily change the hierarchical
structure of framesets (i.e., which frameset should contain which frames and
framesets), easily add and delete frames, and easily change the Web pages that
will be displayed inside frames by using the mouse dragging (see
Figure3(c)).Frameset page design windows created by the BioPro system.
(a)
Example of page design for framesets(b)
Frameset page design windows for (a)(c)
Example of nested frames in framesets


### 3.2. Introduction of Frameset Page Design Windows

We introduceFrameset page design windows as
root Web pages that represent framesets, and link each frame included in those
windows to an ordinary Web page design window. For example, in
Figure 3(a), Frameset page design window Y has two frames, and its upper frame
is linked to Web page design window C, and its lower frame is linked to Web
page design window D. We make it possible to link each frame included in a Frameset
page design window to not only an ordinary Web page design window, but also another Frameset page design window. This enables frames to be
nested in a frameset more than once.Figure3(b) shows two Frameset page design windows and four Web page design windows created by a programmer using the
BioPro system, as illustrated in Figure 3(a). Each frame of the Frameset
page design window is linked with a line to the Web page design window that is displayed in it.As shown in Figure3(a), the Frameset page design
window X has two frames, where its upper frame is divided into two other
frames, left and right frames, each of which is linked to Web page design
windows A and B, respectively. Its lower frame is linked to another Frameset
page design window Y. When we execute the Web application that contains
these pages, the Frameset page design window X is displayed as a root
Web page that includes four Web pages A, B, C, and D as shown in Figure 3(a).
In a Frameset page design window, we can easily divide, delete, and
exchange frames by clicking or drag-and-dropping the mouse. Figure 3(c) shows
an example of nested frames in Frameset page design windows.


### 3.3. Visual Programming for Frames and Framesets

As an example of a Web application that uses frames,
let us consider a simple Web-based chat system. As shown in Figure4(b), this Web
page consists of two frames. The upper frame has a text field to enter a name,
and buttons to enter and exit a chat room. Below them, it has an area to
display the contents of chatting and its status. The lower frame has a text
field to enter a chat message, and a button to send the message. To update the
contents of chatting that vary any minute, the upper frame keeps being
refreshed at a certain period of time. Because this Web page is divided into
these two frames, the lower frame is not affected by refreshing the upper frame
even when a user is entering a message.Figure 4
Visual programming usingframeset pages.Figure4(a) shows an example of visual programming of
this Web-based chat system. The window (A) in the top left corner of Figure
4(a) is a Frameset page, which corresponds to the Frameset page Y
in Figure 3(a). The upper frame is linked to chatFrame Web page to
display chatFrame Web page. The lower frame is linked to utterFrame Web page to display utterFrame Web page. Windows (B) and (C)
of Figure 4(a) show the Web
pages of chatFrame and utterFrame, respectively.


## 3.1. Requirements for Frames and Framesets

Web pages can contain framesets, and framesets contain
frames. Moreover, the Web page that is displayed in a frame can also contain
framesets. Because this relationship ranges among multiple pages, it is
difficult to grasp with the conventional development environments. To make it
easier to develop Web applications that use frame facilities, we take into
account the following requirements.(1)
We can nest frames in a frameset more than
once, and we can create a frame pointing to another Web page that contains
framesets.(2)
We can easily understand the relationship
between the frames and the Web pages that are displayed in the corresponding
frames.(3)
We can easily change the hierarchical
structure of framesets (i.e., which frameset should contain which frames and
framesets), easily add and delete frames, and easily change the Web pages that
will be displayed inside frames by using the mouse dragging (see
Figure3(c)).Frameset page design windows created by the BioPro system.
(a)
Example of page design for framesets(b)
Frameset page design windows for (a)(c)
Example of nested frames in framesets


## 3.2. Introduction of Frameset Page Design Windows

We introduceFrameset page design windows as
root Web pages that represent framesets, and link each frame included in those
windows to an ordinary Web page design window. For example, in
Figure 3(a), Frameset page design window Y has two frames, and its upper frame
is linked to Web page design window C, and its lower frame is linked to Web
page design window D. We make it possible to link each frame included in a Frameset
page design window to not only an ordinary Web page design window, but also another Frameset page design window. This enables frames to be
nested in a frameset more than once.Figure3(b) shows two Frameset page design windows and four Web page design windows created by a programmer using the
BioPro system, as illustrated in Figure 3(a). Each frame of the Frameset
page design window is linked with a line to the Web page design window that is displayed in it.As shown in Figure3(a), the Frameset page design
window X has two frames, where its upper frame is divided into two other
frames, left and right frames, each of which is linked to Web page design
windows A and B, respectively. Its lower frame is linked to another Frameset
page design window Y. When we execute the Web application that contains
these pages, the Frameset page design window X is displayed as a root
Web page that includes four Web pages A, B, C, and D as shown in Figure 3(a).
In a Frameset page design window, we can easily divide, delete, and
exchange frames by clicking or drag-and-dropping the mouse. Figure 3(c) shows
an example of nested frames in Frameset page design windows.


## 3.3. Visual Programming for Frames and Framesets

As an example of a Web application that uses frames,
let us consider a simple Web-based chat system. As shown in Figure4(b), this Web
page consists of two frames. The upper frame has a text field to enter a name,
and buttons to enter and exit a chat room. Below them, it has an area to
display the contents of chatting and its status. The lower frame has a text
field to enter a chat message, and a button to send the message. To update the
contents of chatting that vary any minute, the upper frame keeps being
refreshed at a certain period of time. Because this Web page is divided into
these two frames, the lower frame is not affected by refreshing the upper frame
even when a user is entering a message.Figure 4
Visual programming usingframeset pages.Figure4(a) shows an example of visual programming of
this Web-based chat system. The window (A) in the top left corner of Figure
4(a) is a Frameset page, which corresponds to the Frameset page Y
in Figure 3(a). The upper frame is linked to chatFrame Web page to
display chatFrame Web page. The lower frame is linked to utterFrame Web page to display utterFrame Web page. Windows (B) and (C)
of Figure 4(a) show the Web
pages of chatFrame and utterFrame, respectively.


## 4. Pivot Table Components

### 4.1. Visual Programming for Pivot Tables

This section introduces a pivot table that sums up
various kinds of data in two dimensions and describes how we use this table as
a visual Web component. The pivot table consists of three cells, row, column,
and data. Into each cell of the pivot table, a field of either a DB table or a
Program table is dragged. At the execution time of the application, the row and
column cells of the pivot table are dynamically expanded to display the values
of the corresponding field of the DB table or the Program table. The data cells
of the expanded pivot table display the corresponding field values for each row
and each column in a specified form.Figure5 illustrates how the pivot table is expanded
at the execution time of the application. The way of expanding the pivot table
changes depending on whether or not a field of a DB table (or a Program table)
is assigned to each cell of the pivot table. Let {dij} be a set of field values in the data cell
that corresponds to each row and column. The value of the set {dij} is displayed in the data cell in a variety of
forms such as Standard (the sum of the element values), Counter (the number of the elements, that is, #{dij}), and Image (the image the first
element's value refers to). In addition, developers can customize a way of
displaying the data cell by creating a class and its methods that define how
the data cell should be displayed. For example, as shown in Figure 6(a), we can
display the name and the picture of the person whose name is the value of dij.
If we further customize it to specify the data cell's format, background color,
and component to be displayed as shown in Figure 6(b), checkboxes used in the
meeting room reservation system will be changed to buttons as shown in Figure
6(c). Customization of visual functional Web components will be described in
more detail in Section 5.Figure 5
Pivot table expansion.Figure 6
Execution of meeting room reservation system.


### 4.2. A Reservation System for Meeting Rooms

Figure7 shows an example of design for the meeting
room reservation system that uses a pivot table, and Figure 6 shows an example
of execution of this application. This meeting room reservation system works as
follows.
(1)
Customers
enter a date for making a reservation, and their names and passwords.(2)
The system displays reservations for that date
using the pictures of the people who have reservations.(3)
The customers check a vacant room off to make a
reservation or check their own pictures to cancel the reservation.Figure 7
Design of meeting room reservation system.We record reservations for meeting rooms in a
database. The DB tablemeeting (in the top right corner of
Figure 7)
records meeting rooms (room), periods of time (hour), and people
who have reservations (name). This DB table meeting is a virtual
table only used for designing the Web page, and the real database table is
dynamically determined at the execution time of the application. The pivot
table is arranged in the bottom left corner of Figure 7. We drag and drop the room field of the DB table meeting into the column cell of the pivot table to
insert a field reference meeting.room. Similarly, we insert a field
reference meeting.hour to the row cell of the pivot table, and a field
reference meeting.name to the data cell. As shown in Figure 6(a), when
this Web application is executed, this pivot table will be dynamically expanded
so that each row will display a period of time; each column will display the
name of a meeting room; and each data cell will display the name and the
picture of the person who has a reservation for the corresponding row and
column.In this example, we have displayed the data cells as
checkboxes. Instead, we can also display them in a variety of forms such as
text and buttons. If we display the data cells as submit buttons, we will not
need theReserve/Cancel button, and customers can make a reservation
immediately by clicking on a vacant button, and can cancel the reservation
immediately by clicking on their own pictures.


## 4.1. Visual Programming for Pivot Tables

This section introduces a pivot table that sums up
various kinds of data in two dimensions and describes how we use this table as
a visual Web component. The pivot table consists of three cells, row, column,
and data. Into each cell of the pivot table, a field of either a DB table or a
Program table is dragged. At the execution time of the application, the row and
column cells of the pivot table are dynamically expanded to display the values
of the corresponding field of the DB table or the Program table. The data cells
of the expanded pivot table display the corresponding field values for each row
and each column in a specified form.Figure5 illustrates how the pivot table is expanded
at the execution time of the application. The way of expanding the pivot table
changes depending on whether or not a field of a DB table (or a Program table)
is assigned to each cell of the pivot table. Let {dij} be a set of field values in the data cell
that corresponds to each row and column. The value of the set {dij} is displayed in the data cell in a variety of
forms such as Standard (the sum of the element values), Counter (the number of the elements, that is, #{dij}), and Image (the image the first
element's value refers to). In addition, developers can customize a way of
displaying the data cell by creating a class and its methods that define how
the data cell should be displayed. For example, as shown in Figure 6(a), we can
display the name and the picture of the person whose name is the value of dij.
If we further customize it to specify the data cell's format, background color,
and component to be displayed as shown in Figure 6(b), checkboxes used in the
meeting room reservation system will be changed to buttons as shown in Figure
6(c). Customization of visual functional Web components will be described in
more detail in Section 5.Figure 5
Pivot table expansion.Figure 6
Execution of meeting room reservation system.


## 4.2. A Reservation System for Meeting Rooms

Figure7 shows an example of design for the meeting
room reservation system that uses a pivot table, and Figure 6 shows an example
of execution of this application. This meeting room reservation system works as
follows.
(1)
Customers
enter a date for making a reservation, and their names and passwords.(2)
The system displays reservations for that date
using the pictures of the people who have reservations.(3)
The customers check a vacant room off to make a
reservation or check their own pictures to cancel the reservation.Figure 7
Design of meeting room reservation system.We record reservations for meeting rooms in a
database. The DB tablemeeting (in the top right corner of
Figure 7)
records meeting rooms (room), periods of time (hour), and people
who have reservations (name). This DB table meeting is a virtual
table only used for designing the Web page, and the real database table is
dynamically determined at the execution time of the application. The pivot
table is arranged in the bottom left corner of Figure 7. We drag and drop the room field of the DB table meeting into the column cell of the pivot table to
insert a field reference meeting.room. Similarly, we insert a field
reference meeting.hour to the row cell of the pivot table, and a field
reference meeting.name to the data cell. As shown in Figure 6(a), when
this Web application is executed, this pivot table will be dynamically expanded
so that each row will display a period of time; each column will display the
name of a meeting room; and each data cell will display the name and the
picture of the person who has a reservation for the corresponding row and
column.In this example, we have displayed the data cells as
checkboxes. Instead, we can also display them in a variety of forms such as
text and buttons. If we display the data cells as submit buttons, we will not
need theReserve/Cancel button, and customers can make a reservation
immediately by clicking on a vacant button, and can cancel the reservation
immediately by clicking on their own pictures.


## 5. Customization of Visual Functional  Web Components

### 5.1. Definition of Web Components

In the proposed
system, we can create a new Web component and add it to the system. When we
design a Web application, we can use these created Web components as visual
components in the same way as we use other components such as pivot tables, DB
tables, and Program tables. To create a new component, we define a class that
extends WebComp class. We have only to define several methods to override those
defined in the super WebComp class. Table1 shows some methods the super
WebComp class provides. We define a component name, write code to create a
visual component (a JComponent object in Java), and specify how to change the
component's properties. For the verification of relationships between
components, we write the code that obtains the relationships of the new
component with other components. For code generation, we define HTML/JSP code
to display this component in a Web page, and so on.Table 1
Definition of customizable visual Web components.
MethodsDescriptionCreationString getMenuName( )Define a component nameJComponent createWebComp( )Create a visual componentvoid changeProperties(JComponent comp)Display a dialog to change the properties of a component compVerificationvoid addRefers(ArrayList refers)Check and add a relationship of this component with other componentsCode generationvoid addParameterNames(HashMap pageToParams)Add the names of parameters this page sendsvoid addInitializeParameterCode(HashMap pageToCode)Define code that will be executed to analyze received parameters if necessaryvoid addJSP(JSP jsp)Define HTML/JSP code to display a component in a Web pageFor example, we here create a new Web component
“Autograph”. When we choose this component, a dialog will open to enter
an autograph. Then, this component will be inserted into a Web page design
window. When this Web application is executed, the entered autograph will be
shown in italic. Figure8 shows an Autograph class for this component. This
class extends a WebCompAdapter class, which extends the WebComp class a part of
whose methods have been shown in Table 1. The Autograph class defines
getMenuName( ) method to specify its component name “Autograph”, which
will be displayed as the name of a menu item that corresponds to this
component. CreateWebComp( ) method creates a JLabel object to display this
visual component in a Web page design window. ChangeProperties( ) method invokes
specifyProperties( ) method, which displays a dialog to enter this component's
properties. AddJSP( ) method defines how to display this component in a Web page
when this Web application is executed. This addJSP( ) method defines a <h2 style=“font-style:italic”> tag to display the specified autograph in
italic.Figure 8
Definition of Web component “Autograph”.


### 5.2. Customization of Pivot Tables

A pivot table
is one of visual functional Web components. High-level functional Web
components are easy to use, and they can easily produce even complicated
display of Web pages. However, the higher level they are on, the less flexible
they will be. Therefore, it is important to provide a mechanism to customize
those components. To customize the display of data cells in a pivot table, we
can specify the name of a method for customization as shown in
Figure6(b).
Figure 9 illustrates an example of such a method, pivot( ). This method makes it
possible to display a person's name and picture in the data cells of the pivot
table as shown in Figures 6(a) and 6(c). Pivot( ) method has a parameter dataList of type
ArrayList, which contains a list of data corresponding to this data cell. In this
meeting room reservation system, it contains only one value, which is the name
of the person who reserves a meeting room that corresponds to this data cell.
This pivot( ) method retrieves the person's picture from DB table
“person”, and returns HTML code that consists of an <img> tag, a <hr> tag, and the person's name.Figure 9
Definition of a method pivot( ) to customize the data cell
display of a pivot table.


## 5.1. Definition of Web Components

In the proposed
system, we can create a new Web component and add it to the system. When we
design a Web application, we can use these created Web components as visual
components in the same way as we use other components such as pivot tables, DB
tables, and Program tables. To create a new component, we define a class that
extends WebComp class. We have only to define several methods to override those
defined in the super WebComp class. Table1 shows some methods the super
WebComp class provides. We define a component name, write code to create a
visual component (a JComponent object in Java), and specify how to change the
component's properties. For the verification of relationships between
components, we write the code that obtains the relationships of the new
component with other components. For code generation, we define HTML/JSP code
to display this component in a Web page, and so on.Table 1
Definition of customizable visual Web components.
MethodsDescriptionCreationString getMenuName( )Define a component nameJComponent createWebComp( )Create a visual componentvoid changeProperties(JComponent comp)Display a dialog to change the properties of a component compVerificationvoid addRefers(ArrayList refers)Check and add a relationship of this component with other componentsCode generationvoid addParameterNames(HashMap pageToParams)Add the names of parameters this page sendsvoid addInitializeParameterCode(HashMap pageToCode)Define code that will be executed to analyze received parameters if necessaryvoid addJSP(JSP jsp)Define HTML/JSP code to display a component in a Web pageFor example, we here create a new Web component
“Autograph”. When we choose this component, a dialog will open to enter
an autograph. Then, this component will be inserted into a Web page design
window. When this Web application is executed, the entered autograph will be
shown in italic. Figure8 shows an Autograph class for this component. This
class extends a WebCompAdapter class, which extends the WebComp class a part of
whose methods have been shown in Table 1. The Autograph class defines
getMenuName( ) method to specify its component name “Autograph”, which
will be displayed as the name of a menu item that corresponds to this
component. CreateWebComp( ) method creates a JLabel object to display this
visual component in a Web page design window. ChangeProperties( ) method invokes
specifyProperties( ) method, which displays a dialog to enter this component's
properties. AddJSP( ) method defines how to display this component in a Web page
when this Web application is executed. This addJSP( ) method defines a <h2 style=“font-style:italic”> tag to display the specified autograph in
italic.Figure 8
Definition of Web component “Autograph”.


## 5.2. Customization of Pivot Tables

A pivot table
is one of visual functional Web components. High-level functional Web
components are easy to use, and they can easily produce even complicated
display of Web pages. However, the higher level they are on, the less flexible
they will be. Therefore, it is important to provide a mechanism to customize
those components. To customize the display of data cells in a pivot table, we
can specify the name of a method for customization as shown in
Figure6(b).
Figure 9 illustrates an example of such a method, pivot( ). This method makes it
possible to display a person's name and picture in the data cells of the pivot
table as shown in Figures 6(a) and 6(c). Pivot( ) method has a parameter dataList of type
ArrayList, which contains a list of data corresponding to this data cell. In this
meeting room reservation system, it contains only one value, which is the name
of the person who reserves a meeting room that corresponds to this data cell.
This pivot( ) method retrieves the person's picture from DB table
“person”, and returns HTML code that consists of an <img> tag, a <hr> tag, and the person's name.Figure 9
Definition of a method pivot( ) to customize the data cell
display of a pivot table.


## 6. Implementation of Visual Functional Web Components

### 6.1. Implementation of Frameset Hierarchy

To developFrameset page design windows, we
define FrameSet class and Frame class. As shown in
Figure 10, both of FrameSet
class and Frame class extend abstract class FrameOrSet. In FrameOrSet class,
variable parent refers to its parent frameset or frame. GetComponent( ) method
returns JComponent that displays its frameset or frame. A frameset is displayed
as JPanel that contains a JSplitPane, and a frame is displayed as a button in a Frameset page design window. GetHtml( ) method returns the HTML code that
represents its frameset or frame. In FrameSet class, frameset array points
to its child frameset or frame. In Frame class, variable srcPage points to a Web
page or a Frameset page. Drop( ) method enables a user to drag and
drop a frame to another frame to exchange them.Figure 10
FrameSet and Frame that extend abstract FrameOrSet.Figure11 illustrates the frameset hierarchy of the
two Frameset pages shown in Figure 3(b), where Frame and FrameSet
instances also have a pointer that refers to their parent frame or frameset
because they extend the abstract FrameOrSet class shown in Figure 10.Figure 11
Frameset hierarchy.


### 6.2. Page-Transition Framework

Each Web page
is designed using visual Web components. The reference relationships of Web
components inside the same Web pages or between Web pages are created by the
drag and drop operations of the components, and represented by the arrows whose
colors show the types of the references. When a request is submitted from a Web
page S, as a result, if a Web page T is displayed, we call page S a source
page, and page T a target page. When a source page transfers to a target page,
some of the Web components in the source page automatically submit some data
with the request. The target page automatically analyzes those submitted data,
generates some variables, and stores the analyzed results in the generated
variables. In this target page, by using those generated variables, developers
can easily write actions to be executed when the target page comes from each
one of its source pages.As indicated in the Struts framework [7], the Web application
controlled by JavaServlet containers is composed of a sequence of display of a
JSP page, receipt of a request, execution of an action, and forwarding the
request to the next JSP page. The system provides the page-transition framework
for Web applications, where form data can be automatically submitted and
analyzed, and actions to be executed in a target page can be written for each
one of the source pages of the target page. Figure 12 illustrates how form data
are automatically submitted and analyzed. In the system, Web pages are composed
of a variety of Web components such as text fields, field references from
program and DB tables, submit buttons, HTML tables, and pivot tables. When a
request is submitted from a source page A to a target page B, some of Web
components included in source page A automatically submit their data. Target
page B automatically receives these submitted data, analyzes the contents of
the data, transforms them into appropriate values, and generates some variables
to store those values. For example, a text field
Web component whose name is “name” submits the text that is input in this
field, and the target page receives this submitted text,
generates a variable whose name is “name”, and stores the text in this
variable.Figure 12
Automatic generation of variables.For example, in the Web-based chat system shown in
Figure4, a text field Web component whose name is “user” submits the text
that is input in this field, and the target page receives this submitted text,
generates a variable whose name is “user”, and stores the text in this
variable. In the Web source window of chatFrame Web page, we can
refer to variables user, enter, exit, and textarea as predefined variables,
which are generated from the visual design of the Web pages by the system. For
example, variable user has the value of the name text field. We do not need to
care about the inconsistency between the parameter names of a sender and a receiver.
Using these predefined variables, we write necessary actions for the processes
of entering and exiting the room. In the Web source window of utterFrame Web page, we write the process for adding the submitted message by
referring to the contents of the message as a predefined variable.The pivot table Web component that sums up data in two
dimensions (shown in Figure7) submits the data that identify which data cells
are selected or clicked. The target page automatically receives these submitted
data and analyzes the contents of the data. When the data cells of the pivot
table are displayed as buttons, as shown in Figure 13, the pivot table Web
component assigns the row value (hour) that corresponds to the selected
cell to parameter meetingHour, and the column value (room) that
corresponds to the selected cell to parameter meetingRoom, and sends
these parameters. The target page receives these parameters and automatically
generates variables “int meetingHour” and “String
meetingRoom” to store them. When the data cells of the pivot table are displayed as
checkboxes, the pivot table Web component assigns the selected cell number (col
+ columns.length * row) to parameter meetingName, and sends this
parameter. The target page receives a sequence of the selected cell numbers,
obtains the number of the selected cells, and automatically generates two
variables “int  meetingHour” and “String  meetingRoom”. Then, from the
selected cell numbers, it obtains the row numbers and the column numbers of the
selected cells, and stores their row and column field values in meetingHour[i] and meetingRoom[i], respectively. When no fields are assigned to the row
and column cells of the pivot table, the pivot-table Web component generates
variable “boolean meetingName” that indicates whether or not the data cell is
selected. This mechanism enables the target page to know the cells of the pivot
table selected in its source page.Figure 13
Automatic interpretation of submitted data for pivot tables.The automatically generated variables consist of not
only the variables that are generated by analyzing received requests. In
addition to these variables, the target page automatically generates the
variables that refer to Program tables and DB tables when the target page
refers to some fields of those tables. When the target page refers to a field
of a Program tableCart, it generates the variable cart that
refers to the Cart object taken out of the session. When the target page
refers to a field of a DB table meeting, it generates the variable meeting whose initial value is also “meeting”. When the database table to be dealt
with is dynamically changed at the execution time of the application (see
Figure 6(a)), we have only to assign the real database table's name to this
variable meeting. The field references of the DB table display their
field values according to the database table variable meeting points to.


### 6.3. Actions Defined in The Web-Based Chat System

In theWeb source window that corresponds to
chatFrame Web page, we can here define actions to be executed when
control transfers to this page. The “Predefined vars:” column of the Web
source window shows some variables that contain submitted data and these
are automatically generated by the system. Figure 14 shows the Web source
window that corresponds to utterFrame Web page. Although a typical
page transition (a default transition) is specified as an arc from one Web
page to another Web page, the other transitions (as when a failure
occurs) can be specified in this Web source window as an action. The
actions defined here will be synthesized with designed Web components to
generate the program code of the Web application (see Figure 17).Figure 14
Web source window for utterFrame page.Figure15 illustrates how predefined variables are
generated for chatFrame and utterFrame Web source windows. When we click
on “enter” or “exit” button in chatFrame Web page, a request is submitted
to chatFrame Web page itself. Therefore, variables enter, exit, textarea, user
are generated as predefined variables in chatFrame Web source window.
When we click on “utter” button in utterFrame Web page, a request is
submitted to utterFrame Web page itself. Therefore, variable utter for the text
field, whose name attribute is “utter”, is generated as a predefined
variable in utterFrame Web source window as shown in “Predefined
vars:” column of Figure 14. Although utterFrame Web page contains “utter”
button, no variable for that button is generated because this button's name
attribute has not been specified in this Web application.Figure 15
Predefined variables for chatFrame and utterFrameWeb source windows.


### 6.4. Actions Defined in The Reservation System

As shown in
Figure7, the reservation system for meeting rooms consists of three Web pages,
the reserveCheckbox page that displays the reservation, the inputName page that prompts customers to enter their names, and the doubleBooking page that refuses their requests.
Figure 16 illustrates an example of action
code written in the Web source window that corresponds to the reserveCheckbox page. The reserveCheckbox page is accessed directly and it also comes
from the reserveCheckbox page itself.
(1)
When this
page is accessed directly, we do nothing, that is, no action needs to be
written. In this case, the text fields for entering the date and the customer's
name and password are displayed.(2)
When thereserveCheckbox page comes from
itself, we have the following two cases:
(2-1)
the customer enters the date and his or her name
and then clicks on theApply button;(2-2)
the customer selects some of the checkboxes
displayed and then clicks on theReserve/Cancel button.Figure 16
Actions for thereserveCheckbox page.Figure 17
Automatic generation of Web application program code.In the case of (2-1), the date and the customer's name
are sent, and variablesyear, month, day, and name are automatically generated. Variable meeting that points to the DB
table, which is used in the pivot table, is also generated. We construct a real
DB table name from variables year, month, and day, and
assign the real DB table name to variable meeting. To display the
reservation for that date, the system dynamically expands the pivot table by
retrieving the DB table this variable meeting points to.In the case of (2-2), parametermeetingName that indicates which checkboxes are selected is sent, and variables meetingHour and meetingRoom are automatically generated that store the field
values corresponding to the selected cells. In this case, the condition that meetingHour.length is greater than zero becomes true. We write some code to update the database.
First, when the customer's name has not yet been entered, we display the inputName page as shown in
Figure 7. Next, we retrieve the database using the values of
variables meetingHour[i] and meetingRoom[i]. When the customer
tries to cancel others' reservations, we display the doubleBooking page.
Finally, we execute delete SQL statements for cancellations and insert SQL statements for reservations to update the database.From aWeb page, code for displaying the
corresponding Web page will be automatically generated. If it refers to some
fields of a DB table, code for retrieving records from the corresponding
DB table will be automatically generated. Submitted data can be automatically
received and analyzed, and then the variables that contain received data will
be automatically generated. The other logic such as updating a DB table needs
to be written manually as an action in a Web source window.


### 6.5. System Configuration

The system exists on a client machine, and a Web server/Servlet container and a database
server exist on server machines. The system generates JSP pages and Java class
files from designed Web pages, Program tables, DB tables, and Web page source
files. It then uploads them to the Web server. To run a Web application, the
system invokes a Web browser so that it will display the first JSP page, which
is either automatically determined or chosen by a user. To display the preview
of a Web page, it generates a JSP page for preview, and uploads the JSP page to
the Web server. Then, the system itself accesses the JSP page, and shows its
output result in a Web preview window.The BioPro system is not based on any of the existing
frameworks. It proposes a visual programming framework, where a generated
application only uses Servlets and JSPs. To connect to a
PostgreSQL database server, the generated
application uses JDBC. The system generates Web application program code from
the visual design of a Web application. As shown in
Figure2, we first visually
design the contents of each of Web pages in their Web page design windows.
When we use database tables, we first visually design those database tables in DB
table design windows. Instead, we may specify the names of existing
database tables to display them in DB table design windows. We drag and
drop the fields of a database table from a DB table design window to a Web
page design window so that these fields will be displayed in the
corresponding Web page. When we use a table in the program that exists only
during the execution of the program, we visually design the contents of this
table in a Program table design window. For example, we design a table
of an online shop cart in this Program table design window. The system
automatically generates JavaBeans code from these Program tables. We
next write the actions that are executed when control transfers to a Web page
in the Web source window that corresponds to the Web page. Control may
transfer to one Web page from multiple Web pages. In the Web source window of a Web page, for each Web page control transfers from, we can write a
necessary action, which is executed when control transfers from the Web page to
this Web page. From these resources, the BioPro system automatically generates
Servlets, JSP pages [8], and Java classes that compose a Web application in a
client side, and uploads them to the Web server together with other resources
such as image files, and customized Java classes. To start the Web application,
the system then runs a Web browser to make it send a request to the entry Web
page of the Web application.The system generates code for connecting a database
server, retrieving records, receiving submitted data, and displaying Web
components designed in aWeb page. These processes will be run as
threads. After these threads complete, it will start a Web browser to access
the entry Web page of the Web application. The entry Web page is automatically
determined as a Web page that does not have its preceding page.Figure17 shows a method to automatically generate the
program code of the Web-based chat system from the visual design created in Section
3.3 “Visual programming for frames and framesets”. The part of the
program code printed in italics in Figure 17 represents the code that was
automatically generated by the BioPro system. We first designed a Frameset page
chat in the Frameset page design window, and designed two Web pages that
are displayed inside its frames in the Web page design windows. In the Web
source windows of the corresponding Web pages, we then wrote the necessary
actions that would be executed when control transfers to each of the Web pages
by referring to predefined variables (e.g., “utter” as shown in
Figure 14) that were automatically generated by the BioPro system.The BioPro system generates the program code that
composes the Web application from these pieces of design information. It
generates a JSP page “chat.jsp” from theFrameset page chat, and as
shown in Figure 17, it generates a JSP page “utterFrame.jsp” by synthesizing
the utterFrame Web page and its Web source.


## 6.1. Implementation of Frameset Hierarchy

To developFrameset page design windows, we
define FrameSet class and Frame class. As shown in
Figure 10, both of FrameSet
class and Frame class extend abstract class FrameOrSet. In FrameOrSet class,
variable parent refers to its parent frameset or frame. GetComponent( ) method
returns JComponent that displays its frameset or frame. A frameset is displayed
as JPanel that contains a JSplitPane, and a frame is displayed as a button in a Frameset page design window. GetHtml( ) method returns the HTML code that
represents its frameset or frame. In FrameSet class, frameset array points
to its child frameset or frame. In Frame class, variable srcPage points to a Web
page or a Frameset page. Drop( ) method enables a user to drag and
drop a frame to another frame to exchange them.Figure 10
FrameSet and Frame that extend abstract FrameOrSet.Figure11 illustrates the frameset hierarchy of the
two Frameset pages shown in Figure 3(b), where Frame and FrameSet
instances also have a pointer that refers to their parent frame or frameset
because they extend the abstract FrameOrSet class shown in Figure 10.Figure 11
Frameset hierarchy.


## 6.2. Page-Transition Framework

Each Web page
is designed using visual Web components. The reference relationships of Web
components inside the same Web pages or between Web pages are created by the
drag and drop operations of the components, and represented by the arrows whose
colors show the types of the references. When a request is submitted from a Web
page S, as a result, if a Web page T is displayed, we call page S a source
page, and page T a target page. When a source page transfers to a target page,
some of the Web components in the source page automatically submit some data
with the request. The target page automatically analyzes those submitted data,
generates some variables, and stores the analyzed results in the generated
variables. In this target page, by using those generated variables, developers
can easily write actions to be executed when the target page comes from each
one of its source pages.As indicated in the Struts framework [7], the Web application
controlled by JavaServlet containers is composed of a sequence of display of a
JSP page, receipt of a request, execution of an action, and forwarding the
request to the next JSP page. The system provides the page-transition framework
for Web applications, where form data can be automatically submitted and
analyzed, and actions to be executed in a target page can be written for each
one of the source pages of the target page. Figure 12 illustrates how form data
are automatically submitted and analyzed. In the system, Web pages are composed
of a variety of Web components such as text fields, field references from
program and DB tables, submit buttons, HTML tables, and pivot tables. When a
request is submitted from a source page A to a target page B, some of Web
components included in source page A automatically submit their data. Target
page B automatically receives these submitted data, analyzes the contents of
the data, transforms them into appropriate values, and generates some variables
to store those values. For example, a text field
Web component whose name is “name” submits the text that is input in this
field, and the target page receives this submitted text,
generates a variable whose name is “name”, and stores the text in this
variable.Figure 12
Automatic generation of variables.For example, in the Web-based chat system shown in
Figure4, a text field Web component whose name is “user” submits the text
that is input in this field, and the target page receives this submitted text,
generates a variable whose name is “user”, and stores the text in this
variable. In the Web source window of chatFrame Web page, we can
refer to variables user, enter, exit, and textarea as predefined variables,
which are generated from the visual design of the Web pages by the system. For
example, variable user has the value of the name text field. We do not need to
care about the inconsistency between the parameter names of a sender and a receiver.
Using these predefined variables, we write necessary actions for the processes
of entering and exiting the room. In the Web source window of utterFrame Web page, we write the process for adding the submitted message by
referring to the contents of the message as a predefined variable.The pivot table Web component that sums up data in two
dimensions (shown in Figure7) submits the data that identify which data cells
are selected or clicked. The target page automatically receives these submitted
data and analyzes the contents of the data. When the data cells of the pivot
table are displayed as buttons, as shown in Figure 13, the pivot table Web
component assigns the row value (hour) that corresponds to the selected
cell to parameter meetingHour, and the column value (room) that
corresponds to the selected cell to parameter meetingRoom, and sends
these parameters. The target page receives these parameters and automatically
generates variables “int meetingHour” and “String
meetingRoom” to store them. When the data cells of the pivot table are displayed as
checkboxes, the pivot table Web component assigns the selected cell number (col
+ columns.length * row) to parameter meetingName, and sends this
parameter. The target page receives a sequence of the selected cell numbers,
obtains the number of the selected cells, and automatically generates two
variables “int  meetingHour” and “String  meetingRoom”. Then, from the
selected cell numbers, it obtains the row numbers and the column numbers of the
selected cells, and stores their row and column field values in meetingHour[i] and meetingRoom[i], respectively. When no fields are assigned to the row
and column cells of the pivot table, the pivot-table Web component generates
variable “boolean meetingName” that indicates whether or not the data cell is
selected. This mechanism enables the target page to know the cells of the pivot
table selected in its source page.Figure 13
Automatic interpretation of submitted data for pivot tables.The automatically generated variables consist of not
only the variables that are generated by analyzing received requests. In
addition to these variables, the target page automatically generates the
variables that refer to Program tables and DB tables when the target page
refers to some fields of those tables. When the target page refers to a field
of a Program tableCart, it generates the variable cart that
refers to the Cart object taken out of the session. When the target page
refers to a field of a DB table meeting, it generates the variable meeting whose initial value is also “meeting”. When the database table to be dealt
with is dynamically changed at the execution time of the application (see
Figure 6(a)), we have only to assign the real database table's name to this
variable meeting. The field references of the DB table display their
field values according to the database table variable meeting points to.


## 6.3. Actions Defined in The Web-Based Chat System

In theWeb source window that corresponds to
chatFrame Web page, we can here define actions to be executed when
control transfers to this page. The “Predefined vars:” column of the Web
source window shows some variables that contain submitted data and these
are automatically generated by the system. Figure 14 shows the Web source
window that corresponds to utterFrame Web page. Although a typical
page transition (a default transition) is specified as an arc from one Web
page to another Web page, the other transitions (as when a failure
occurs) can be specified in this Web source window as an action. The
actions defined here will be synthesized with designed Web components to
generate the program code of the Web application (see Figure 17).Figure 14
Web source window for utterFrame page.Figure15 illustrates how predefined variables are
generated for chatFrame and utterFrame Web source windows. When we click
on “enter” or “exit” button in chatFrame Web page, a request is submitted
to chatFrame Web page itself. Therefore, variables enter, exit, textarea, user
are generated as predefined variables in chatFrame Web source window.
When we click on “utter” button in utterFrame Web page, a request is
submitted to utterFrame Web page itself. Therefore, variable utter for the text
field, whose name attribute is “utter”, is generated as a predefined
variable in utterFrame Web source window as shown in “Predefined
vars:” column of Figure 14. Although utterFrame Web page contains “utter”
button, no variable for that button is generated because this button's name
attribute has not been specified in this Web application.Figure 15
Predefined variables for chatFrame and utterFrameWeb source windows.


## 6.4. Actions Defined in The Reservation System

As shown in
Figure7, the reservation system for meeting rooms consists of three Web pages,
the reserveCheckbox page that displays the reservation, the inputName page that prompts customers to enter their names, and the doubleBooking page that refuses their requests.
Figure 16 illustrates an example of action
code written in the Web source window that corresponds to the reserveCheckbox page. The reserveCheckbox page is accessed directly and it also comes
from the reserveCheckbox page itself.
(1)
When this
page is accessed directly, we do nothing, that is, no action needs to be
written. In this case, the text fields for entering the date and the customer's
name and password are displayed.(2)
When thereserveCheckbox page comes from
itself, we have the following two cases:
(2-1)
the customer enters the date and his or her name
and then clicks on theApply button;(2-2)
the customer selects some of the checkboxes
displayed and then clicks on theReserve/Cancel button.Figure 16
Actions for thereserveCheckbox page.Figure 17
Automatic generation of Web application program code.In the case of (2-1), the date and the customer's name
are sent, and variablesyear, month, day, and name are automatically generated. Variable meeting that points to the DB
table, which is used in the pivot table, is also generated. We construct a real
DB table name from variables year, month, and day, and
assign the real DB table name to variable meeting. To display the
reservation for that date, the system dynamically expands the pivot table by
retrieving the DB table this variable meeting points to.In the case of (2-2), parametermeetingName that indicates which checkboxes are selected is sent, and variables meetingHour and meetingRoom are automatically generated that store the field
values corresponding to the selected cells. In this case, the condition that meetingHour.length is greater than zero becomes true. We write some code to update the database.
First, when the customer's name has not yet been entered, we display the inputName page as shown in
Figure 7. Next, we retrieve the database using the values of
variables meetingHour[i] and meetingRoom[i]. When the customer
tries to cancel others' reservations, we display the doubleBooking page.
Finally, we execute delete SQL statements for cancellations and insert SQL statements for reservations to update the database.From aWeb page, code for displaying the
corresponding Web page will be automatically generated. If it refers to some
fields of a DB table, code for retrieving records from the corresponding
DB table will be automatically generated. Submitted data can be automatically
received and analyzed, and then the variables that contain received data will
be automatically generated. The other logic such as updating a DB table needs
to be written manually as an action in a Web source window.


## 6.5. System Configuration

The system exists on a client machine, and a Web server/Servlet container and a database
server exist on server machines. The system generates JSP pages and Java class
files from designed Web pages, Program tables, DB tables, and Web page source
files. It then uploads them to the Web server. To run a Web application, the
system invokes a Web browser so that it will display the first JSP page, which
is either automatically determined or chosen by a user. To display the preview
of a Web page, it generates a JSP page for preview, and uploads the JSP page to
the Web server. Then, the system itself accesses the JSP page, and shows its
output result in a Web preview window.The BioPro system is not based on any of the existing
frameworks. It proposes a visual programming framework, where a generated
application only uses Servlets and JSPs. To connect to a
PostgreSQL database server, the generated
application uses JDBC. The system generates Web application program code from
the visual design of a Web application. As shown in
Figure2, we first visually
design the contents of each of Web pages in their Web page design windows.
When we use database tables, we first visually design those database tables in DB
table design windows. Instead, we may specify the names of existing
database tables to display them in DB table design windows. We drag and
drop the fields of a database table from a DB table design window to a Web
page design window so that these fields will be displayed in the
corresponding Web page. When we use a table in the program that exists only
during the execution of the program, we visually design the contents of this
table in a Program table design window. For example, we design a table
of an online shop cart in this Program table design window. The system
automatically generates JavaBeans code from these Program tables. We
next write the actions that are executed when control transfers to a Web page
in the Web source window that corresponds to the Web page. Control may
transfer to one Web page from multiple Web pages. In the Web source window of a Web page, for each Web page control transfers from, we can write a
necessary action, which is executed when control transfers from the Web page to
this Web page. From these resources, the BioPro system automatically generates
Servlets, JSP pages [8], and Java classes that compose a Web application in a
client side, and uploads them to the Web server together with other resources
such as image files, and customized Java classes. To start the Web application,
the system then runs a Web browser to make it send a request to the entry Web
page of the Web application.The system generates code for connecting a database
server, retrieving records, receiving submitted data, and displaying Web
components designed in aWeb page. These processes will be run as
threads. After these threads complete, it will start a Web browser to access
the entry Web page of the Web application. The entry Web page is automatically
determined as a Web page that does not have its preceding page.Figure17 shows a method to automatically generate the
program code of the Web-based chat system from the visual design created in Section
3.3 “Visual programming for frames and framesets”. The part of the
program code printed in italics in Figure 17 represents the code that was
automatically generated by the BioPro system. We first designed a Frameset page
chat in the Frameset page design window, and designed two Web pages that
are displayed inside its frames in the Web page design windows. In the Web
source windows of the corresponding Web pages, we then wrote the necessary
actions that would be executed when control transfers to each of the Web pages
by referring to predefined variables (e.g., “utter” as shown in
Figure 14) that were automatically generated by the BioPro system.The BioPro system generates the program code that
composes the Web application from these pieces of design information. It
generates a JSP page “chat.jsp” from theFrameset page chat, and as
shown in Figure 17, it generates a JSP page “utterFrame.jsp” by synthesizing
the utterFrame Web page and its Web source.


## 7. Observations on the Proposed System

### 7.1. Applications of Functional Web Components

As shown in
Figure4, the structure of the Web application is displayed visually, and this
makes it easier to understand the program and efficient to modify and debug the
program. When we design framesets and the frames that the framesets contain, we
can easily create them, and divide, delete, and exchange frames by clicking or
drag-and-dropping the mouse. In addition, we can create another frameset in a
different Frameset page design window, and make the parent frame refer
to the created child frameset. This simplifies the design of framesets and the
frames that the framesets contain. We can also easily see the hierarchy of the
frames in the Frameset page design windows, and see the contents of the
frames in the Web page design windows that are pointed at from the
corresponding frames in the Frameset page design windows.The pivot tables can sum up a various kinds of data in
two dimensions. Developers can customize the form for displaying the summed up
data that correspond to each row and column. The information of selected cells
in the pivot table is automatically sent to a target page, and in the target
page, developers can easily obtain this information through automatically
generated variables. We think that the pivot tables can be applied to various
Web applications. The applicationfavoriteCake that has been shown in
Figure 1 is also one example of the applications that use pivot tables. Using a
pivot table, the loveCake page displays the number of the customers who
like each kind of cake. This application only uses two of the three cells in
the pivot table. The column cell is expanded to display the images of the cakes
that are stored in the DB table cake. The data cell is expanded to
display the number of the customers who like each kind of cake using the
display form Counter (see Section 4.1 “Visual programming for pivot
tables”). To do this, we click on the Join button of the pivot table and
enter a condition “cake.name = favoriteCake.cake” to join two DB tables cake and favoriteCake. The system automatically executes the following SQL
statement to expand the pivot table:
select cake.image, favoriteCake.cake fromcake, favoriteCake where cake.name =
favorite-Cake.cake.
For each kind of cake (cake.image), the number of the values the field favoriteCake.cake has is equivalent to the number of the customers who like that cake.Web source windows show some automatically generated variables in their predefined variable
column. These automatically generated variables that have the values of the query
data submitted to the server enable developers to easily write actions in the
fields/methods columns and the page transfers columns of the Web source
windows. This avoids a mismatch problem between variable names that are
written in the form tags of JSP pages and in the methods of Servlets.


### 7.2. Comparison of Facilities with Other Tools

Web application
development tools are broadly classified into two groups, text-oriented and
visual-oriented. BioPro is a kind of visual-oriented tool with high-level functional
Web components. For example, NetBeans [9] is a text-oriented tool, and Sun Java Studio Creator
[10] is a
visual-oriented tool. When we choose a Web component from a palette, NetBeans
will generate and display its corresponding HTML code in a source window while
Sun Java Studio Creator will paste its corresponding visual component in a form
window. Table 2 shows the comparison of the BioPro system with a conventional
text-oriented IDE, NetBeans [9] and a conventional visual-oriented IDE, Sun Java
Studio Creator [10]
concerning the facilities that assist in the development of Web applications.
IDEs are integrated development environments that include editors, compilers,
debuggers, project management, various kinds of source code templates,
refactoring facilities, and application servers. On the other hand, unlike
commercial software tools, the proposed system BioPro is not a comprehensive
Web development tool. It has been developed to evaluate visual programming for
high-level functional Web components. These high-level functional Web
components can reduce the amount of codes required
to display the components in Web pages, and perform actions. We think that it
will be much easier to develop Web applications if such customizable high-level
functional Web components are available even in any type of software
development environment.Table 2
Comparison with other tools.
FacilitiesIDEVisual IDEBioProCode-based HTML components◯◯◯Visual HTML components—◯◯Customizable visual high-level Web components——◯Visual DB tables—◯◯Visual Program tables——◯Assist in writing actions——◯Form data generation——◯Test/Preview Web pages◯◯◯Debugging support◯◯—Refactoring support◯◯—


### 7.3. Code Generation Efficiency of Functional Web Components

To evaluate the efficiency and the ease of the
development with the system, we developed several typical Web applications
using the system, and compared it with the development using an existing
integrated development environment IDE [11] and Struts [7]. Each of four programmers developed several sample
programs with IDE, BioPro, and Struts in this order. Those sample programs
include Web applications (1) selectFruit (selection of fruits), (2) onlineShop
(online shopping using a Program table), (3) reserveRoom (reservation for
meeting rooms using one pivot and two DB tables), (4) favoriteCake (a
questionnaire program about favorite cakes using a pivot table), and (5)
webChat (Web-based chatting using a frameset).
Figure 18 shows the time and the
lines of code required to develop these applications on average. The time
indicates how many hours it took to make an application, test it, and make sure
of its execution result. The lines of code indicate the total lines of JSP and
Java code required to develop each application. Because of the learning bias,
the time required might have been advantageous to the subsequent tools, BioPro
and Struts. However, by using visual programming of functional Web components,
we were able to greatly reduce the code that was required to develop Web
applications.Figure 18
Time and lines of code required.The application “webChat” is a Web-based chatting
program that uses a frame set. In the Web-based chat system which is a typical
example of conventional development, it required 212 lines of code (10 for
chat.jsp, 118 for chatFrame.jsp, and 84 for utterFrame.jsp). This method
reduced it to 63 lines of code, which is about one-third. Talking about the
efficiency, it only took about fifteen minutes to design the chat Frameset,
chatFrame Web page, and utterFrame Web page, which are shown in
Figure4(a).The application “reserveRoom” is a meeting-room
reservation system that makes use of a pivot table, where the data cells are
displayed as either of checkboxes and buttons. The application “favoriteCake”
shown in Figure1 is a questionnaire program of favorite cakes that also uses a
pivot table.The applications that used pivot tables reduced the
amount of code greatly. Pivot table components automatically retrieve the
database to expand the pivot tables, and submit the information of selected cells.
Target pages can automatically receive and interpret this information and
generate some variables to store it.


## 7.1. Applications of Functional Web Components

As shown in
Figure4, the structure of the Web application is displayed visually, and this
makes it easier to understand the program and efficient to modify and debug the
program. When we design framesets and the frames that the framesets contain, we
can easily create them, and divide, delete, and exchange frames by clicking or
drag-and-dropping the mouse. In addition, we can create another frameset in a
different Frameset page design window, and make the parent frame refer
to the created child frameset. This simplifies the design of framesets and the
frames that the framesets contain. We can also easily see the hierarchy of the
frames in the Frameset page design windows, and see the contents of the
frames in the Web page design windows that are pointed at from the
corresponding frames in the Frameset page design windows.The pivot tables can sum up a various kinds of data in
two dimensions. Developers can customize the form for displaying the summed up
data that correspond to each row and column. The information of selected cells
in the pivot table is automatically sent to a target page, and in the target
page, developers can easily obtain this information through automatically
generated variables. We think that the pivot tables can be applied to various
Web applications. The applicationfavoriteCake that has been shown in
Figure 1 is also one example of the applications that use pivot tables. Using a
pivot table, the loveCake page displays the number of the customers who
like each kind of cake. This application only uses two of the three cells in
the pivot table. The column cell is expanded to display the images of the cakes
that are stored in the DB table cake. The data cell is expanded to
display the number of the customers who like each kind of cake using the
display form Counter (see Section 4.1 “Visual programming for pivot
tables”). To do this, we click on the Join button of the pivot table and
enter a condition “cake.name = favoriteCake.cake” to join two DB tables cake and favoriteCake. The system automatically executes the following SQL
statement to expand the pivot table:
select cake.image, favoriteCake.cake fromcake, favoriteCake where cake.name =
favorite-Cake.cake.
For each kind of cake (cake.image), the number of the values the field favoriteCake.cake has is equivalent to the number of the customers who like that cake.Web source windows show some automatically generated variables in their predefined variable
column. These automatically generated variables that have the values of the query
data submitted to the server enable developers to easily write actions in the
fields/methods columns and the page transfers columns of the Web source
windows. This avoids a mismatch problem between variable names that are
written in the form tags of JSP pages and in the methods of Servlets.


## 7.2. Comparison of Facilities with Other Tools

Web application
development tools are broadly classified into two groups, text-oriented and
visual-oriented. BioPro is a kind of visual-oriented tool with high-level functional
Web components. For example, NetBeans [9] is a text-oriented tool, and Sun Java Studio Creator
[10] is a
visual-oriented tool. When we choose a Web component from a palette, NetBeans
will generate and display its corresponding HTML code in a source window while
Sun Java Studio Creator will paste its corresponding visual component in a form
window. Table 2 shows the comparison of the BioPro system with a conventional
text-oriented IDE, NetBeans [9] and a conventional visual-oriented IDE, Sun Java
Studio Creator [10]
concerning the facilities that assist in the development of Web applications.
IDEs are integrated development environments that include editors, compilers,
debuggers, project management, various kinds of source code templates,
refactoring facilities, and application servers. On the other hand, unlike
commercial software tools, the proposed system BioPro is not a comprehensive
Web development tool. It has been developed to evaluate visual programming for
high-level functional Web components. These high-level functional Web
components can reduce the amount of codes required
to display the components in Web pages, and perform actions. We think that it
will be much easier to develop Web applications if such customizable high-level
functional Web components are available even in any type of software
development environment.Table 2
Comparison with other tools.
FacilitiesIDEVisual IDEBioProCode-based HTML components◯◯◯Visual HTML components—◯◯Customizable visual high-level Web components——◯Visual DB tables—◯◯Visual Program tables——◯Assist in writing actions——◯Form data generation——◯Test/Preview Web pages◯◯◯Debugging support◯◯—Refactoring support◯◯—


## 7.3. Code Generation Efficiency of Functional Web Components

To evaluate the efficiency and the ease of the
development with the system, we developed several typical Web applications
using the system, and compared it with the development using an existing
integrated development environment IDE [11] and Struts [7]. Each of four programmers developed several sample
programs with IDE, BioPro, and Struts in this order. Those sample programs
include Web applications (1) selectFruit (selection of fruits), (2) onlineShop
(online shopping using a Program table), (3) reserveRoom (reservation for
meeting rooms using one pivot and two DB tables), (4) favoriteCake (a
questionnaire program about favorite cakes using a pivot table), and (5)
webChat (Web-based chatting using a frameset).
Figure 18 shows the time and the
lines of code required to develop these applications on average. The time
indicates how many hours it took to make an application, test it, and make sure
of its execution result. The lines of code indicate the total lines of JSP and
Java code required to develop each application. Because of the learning bias,
the time required might have been advantageous to the subsequent tools, BioPro
and Struts. However, by using visual programming of functional Web components,
we were able to greatly reduce the code that was required to develop Web
applications.Figure 18
Time and lines of code required.The application “webChat” is a Web-based chatting
program that uses a frame set. In the Web-based chat system which is a typical
example of conventional development, it required 212 lines of code (10 for
chat.jsp, 118 for chatFrame.jsp, and 84 for utterFrame.jsp). This method
reduced it to 63 lines of code, which is about one-third. Talking about the
efficiency, it only took about fifteen minutes to design the chat Frameset,
chatFrame Web page, and utterFrame Web page, which are shown in
Figure4(a).The application “reserveRoom” is a meeting-room
reservation system that makes use of a pivot table, where the data cells are
displayed as either of checkboxes and buttons. The application “favoriteCake”
shown in Figure1 is a questionnaire program of favorite cakes that also uses a
pivot table.The applications that used pivot tables reduced the
amount of code greatly. Pivot table components automatically retrieve the
database to expand the pivot tables, and submit the information of selected cells.
Target pages can automatically receive and interpret this information and
generate some variables to store it.


## 8. Related Work

This section
gives the outlines and brief discussions of text-oriented
IDEs,
Web application development frameworks, visual development environments for
client programs, visual-oriented IDEs, and model-based approaches.


### 8.1. Text-Oriented Ides

As for world-widely used systems that assist in the
development of Web applications, there are several IDEs such as Sun One
Studio [11], IntelliJ IDEA [12],
CodeWarrior [13], Eclipse [14],
NetBeans [9]. IDE is an integrated development environment that includes editors, compilers, debuggers,
project managements, various source code templates, and application servers. It
assists in the development of software using object-oriented programming
languages like Java. Besides these systems, Zope [15] is an application server with which users can easily
develop Web applications using a Web browser that is connected to a Zope
server. FAR [16] is an
end-user visual language to assist in the development of the Web applications
that use spreadsheets. DENIM [17] is a sketch-based visual language to assist in the
early stages of Web site design using the graph representation that consists of
Web pages as nodes and the dependencies between the Web pages as arcs.
JWIG [18] provides a
session model and a flexible mechanism for dynamic construction of XHTML
documents. With JWIG, a Web application can be written as a single thread using
an extension of Java. PageGen [19] provides a scheme for dynamic generation of Web pages.These text-oriented IDEs have a variety of functions.
However, they only provide fundamental Web components such as textfields,
buttons, checkboxes, anchors, and tables, and Web applications are developed
using text-based languages such as XHTML, JSP, JSP tag libraries, and Java. On
the other hand, the proposed system provides visual high-level functional Web
components, and this paper has also presented how to implement and customize
these components in a flexible manner.


### 8.2. Web Application Development Frameworks

Several frameworks for efficiently developing Web
applications have been proposed. Struts [7] provides a framework for building Web applications
that consists of such components as views, controllers, and actions. Separately
from business processes, users can easily write code for verifying form data
and can specify target actions to which requests are forwarded. Tiles is a
framework for creating Web pages that separates Web page layouts and their
contents. It is used together with the Struts framework to create JSP pages to
which requests are forwarded. Tiles makes it easier to change the look and feel
of a Web site. JavaServer Faces [20] simplifies building user interfaces for Web
applications. It wires client-generated events to server-side event handlers.
Tapestry [21] is a
framework for creating Web applications in Java, where a Web application is
composed of a combination of a specification file in XML, an XHTML template and
a Java class. The template defines the XHTML document that includes dynamic
contents, and the page components written in Java define the representation of
the dynamic contents.These Web application development frameworks make it
easier to develop Web applications because they standardize various processes
such as the receipt of requests, the validation of form data, and Web page
transfers, and these processes become independent from the others. The BioPro
system does not use these frameworks. However, it is based on the MVC
architecture, where data access layer (model), presentation layer (view), and
business-logic layer (controller) can be independent from the other.


### 8.3. Visual Development Environments for Client Programs

In the development of client programs, a variety of
graphical components have been used to create their graphical user interfaces.
This has made the software development easier [11]. There are several
researches on software development that makes use of graphics, which include
rapid development of visual applications [22], the visualization of software requirements using
multimedia [23–25], assistance for object-oriented programming using UML [26, 27], the development of
language processors using the graphical representation of their behaviors
[28, 29], automatic form generation
by the combination of graphical components [30, 31],
and visual software development environments [32, 33]. To assist in database
accesses using graphics, visual retrieval of structured Web information [34], and the
visualization of the contents of a database [35] have been researched.In the BioPro system, we can design database tables in
the same way as visual programming tools, and the fields of the tables can be
pasted in appropriate places of Web pages by mouse dragging.


### 8.4. Visual-Oriented Ide's

As for the development of server-side programs using
graphics, there are some Web design tools such as IronSpeed [36], Sun Java Studio Creator
[10], Visual Studio.NET [37], Web Sphere
Studio [38], and Dreamweaver [39].
With these tools,
users can design the contents of Web pages using a variety of graphical
components. By connecting the pages to databases, they can create the dynamic
contents of the pages as well. These tools make it easy to design Web pages,
and program code is generated from those designed Web pages.However, to develop a complete Web application, users
need to write code to define business processes and add it to the generated
code. On the other hand, the system this paper presents provides some
high-level functional Web components such as frames and framesets [40], pivot tables [41], and customizable visual
Web components. The pivot tables sum up various kinds of data in two dimensions
as in Microsoft Excel. The differences between Microsoft Excel and this system
is as follows:
(1)
this system
generates some Web components such as radio buttons and checkboxes in the data
cells of a pivot table to send a request to the server;(2)
this system generates some variables that record
the values indicating which radio button or checkboxes are checked to
automatically receive those values on the sever side.


### 8.5. Model-Based Approaches

The Object-Oriented Hypermedia Design Method
(OOHDM) [42–46] is a model-based approach
for building hypermedia applications. It comprises four different activities:
conceptual design, navigational design, abstract interface design, and
implementation. It models a Web application so that the navigation model can be
separated from the conceptual model. UWAT+  [47, 48] makes it possible to design Web application
transactions according to the user's perspective and to integrate the Web
transaction design with the information and navigation design of the Web
application. Web Modeling Language (WebML) [49] is a visual notation for specifying complex Web sites
at the conceptual level. WebML enables the high-level description of a Web site
under distinct orthogonal dimensions: its data content (structural model), the
pages that compose it (composition model), the topology of links between pages
(navigation model), the layout and graphic requirements for page rendering
(presentation model), and the customization features for one-to-one content
delivery (personalization model). Comprehension of Web applications is a complex
task, since several concerns coexist in their implementation, among which the
business logic, the navigation structure (as supported by hyperlinks and form
submission), and persistent data storage. Conallen's stereotypes [50] are a set of UML
stereotypes designed with Web applications in mind. They add information on
such things as navigation structure, page generation, and form submission that
UML diagrams do not normally contain explicitly. OPM/Web [51] introduces hierarchical state expressing and
suppressing to model both structure and dynamics of Web applications. WAST
[52] specifies a
navigational structure of Web applications and detects the inconsistency of
parameter names between JSP pages and actions during the test execution.Model-based approaches mainly support the conceptual
design of Web applications. The BioPro system can assist in their
implementation based on the conceptual design. In addition, the inconsistency
problem of parameter names as described above will hardly occur. When users
need to write code, the BioPro system shows these parameter names as
automatically generated variables in Web source windows. Even if they use a
wrong parameter name, this error can be detected during the compilation time
because that wrong variable is not declared.


## 8.1. Text-Oriented Ides

As for world-widely used systems that assist in the
development of Web applications, there are several IDEs such as Sun One
Studio [11], IntelliJ IDEA [12],
CodeWarrior [13], Eclipse [14],
NetBeans [9]. IDE is an integrated development environment that includes editors, compilers, debuggers,
project managements, various source code templates, and application servers. It
assists in the development of software using object-oriented programming
languages like Java. Besides these systems, Zope [15] is an application server with which users can easily
develop Web applications using a Web browser that is connected to a Zope
server. FAR [16] is an
end-user visual language to assist in the development of the Web applications
that use spreadsheets. DENIM [17] is a sketch-based visual language to assist in the
early stages of Web site design using the graph representation that consists of
Web pages as nodes and the dependencies between the Web pages as arcs.
JWIG [18] provides a
session model and a flexible mechanism for dynamic construction of XHTML
documents. With JWIG, a Web application can be written as a single thread using
an extension of Java. PageGen [19] provides a scheme for dynamic generation of Web pages.These text-oriented IDEs have a variety of functions.
However, they only provide fundamental Web components such as textfields,
buttons, checkboxes, anchors, and tables, and Web applications are developed
using text-based languages such as XHTML, JSP, JSP tag libraries, and Java. On
the other hand, the proposed system provides visual high-level functional Web
components, and this paper has also presented how to implement and customize
these components in a flexible manner.


## 8.2. Web Application Development Frameworks

Several frameworks for efficiently developing Web
applications have been proposed. Struts [7] provides a framework for building Web applications
that consists of such components as views, controllers, and actions. Separately
from business processes, users can easily write code for verifying form data
and can specify target actions to which requests are forwarded. Tiles is a
framework for creating Web pages that separates Web page layouts and their
contents. It is used together with the Struts framework to create JSP pages to
which requests are forwarded. Tiles makes it easier to change the look and feel
of a Web site. JavaServer Faces [20] simplifies building user interfaces for Web
applications. It wires client-generated events to server-side event handlers.
Tapestry [21] is a
framework for creating Web applications in Java, where a Web application is
composed of a combination of a specification file in XML, an XHTML template and
a Java class. The template defines the XHTML document that includes dynamic
contents, and the page components written in Java define the representation of
the dynamic contents.These Web application development frameworks make it
easier to develop Web applications because they standardize various processes
such as the receipt of requests, the validation of form data, and Web page
transfers, and these processes become independent from the others. The BioPro
system does not use these frameworks. However, it is based on the MVC
architecture, where data access layer (model), presentation layer (view), and
business-logic layer (controller) can be independent from the other.


## 8.3. Visual Development Environments for Client Programs

In the development of client programs, a variety of
graphical components have been used to create their graphical user interfaces.
This has made the software development easier [11]. There are several
researches on software development that makes use of graphics, which include
rapid development of visual applications [22], the visualization of software requirements using
multimedia [23–25], assistance for object-oriented programming using UML [26, 27], the development of
language processors using the graphical representation of their behaviors
[28, 29], automatic form generation
by the combination of graphical components [30, 31],
and visual software development environments [32, 33]. To assist in database
accesses using graphics, visual retrieval of structured Web information [34], and the
visualization of the contents of a database [35] have been researched.In the BioPro system, we can design database tables in
the same way as visual programming tools, and the fields of the tables can be
pasted in appropriate places of Web pages by mouse dragging.


## 8.4. Visual-Oriented Ide's

As for the development of server-side programs using
graphics, there are some Web design tools such as IronSpeed [36], Sun Java Studio Creator
[10], Visual Studio.NET [37], Web Sphere
Studio [38], and Dreamweaver [39].
With these tools,
users can design the contents of Web pages using a variety of graphical
components. By connecting the pages to databases, they can create the dynamic
contents of the pages as well. These tools make it easy to design Web pages,
and program code is generated from those designed Web pages.However, to develop a complete Web application, users
need to write code to define business processes and add it to the generated
code. On the other hand, the system this paper presents provides some
high-level functional Web components such as frames and framesets [40], pivot tables [41], and customizable visual
Web components. The pivot tables sum up various kinds of data in two dimensions
as in Microsoft Excel. The differences between Microsoft Excel and this system
is as follows:
(1)
this system
generates some Web components such as radio buttons and checkboxes in the data
cells of a pivot table to send a request to the server;(2)
this system generates some variables that record
the values indicating which radio button or checkboxes are checked to
automatically receive those values on the sever side.


## 8.5. Model-Based Approaches

The Object-Oriented Hypermedia Design Method
(OOHDM) [42–46] is a model-based approach
for building hypermedia applications. It comprises four different activities:
conceptual design, navigational design, abstract interface design, and
implementation. It models a Web application so that the navigation model can be
separated from the conceptual model. UWAT+  [47, 48] makes it possible to design Web application
transactions according to the user's perspective and to integrate the Web
transaction design with the information and navigation design of the Web
application. Web Modeling Language (WebML) [49] is a visual notation for specifying complex Web sites
at the conceptual level. WebML enables the high-level description of a Web site
under distinct orthogonal dimensions: its data content (structural model), the
pages that compose it (composition model), the topology of links between pages
(navigation model), the layout and graphic requirements for page rendering
(presentation model), and the customization features for one-to-one content
delivery (personalization model). Comprehension of Web applications is a complex
task, since several concerns coexist in their implementation, among which the
business logic, the navigation structure (as supported by hyperlinks and form
submission), and persistent data storage. Conallen's stereotypes [50] are a set of UML
stereotypes designed with Web applications in mind. They add information on
such things as navigation structure, page generation, and form submission that
UML diagrams do not normally contain explicitly. OPM/Web [51] introduces hierarchical state expressing and
suppressing to model both structure and dynamics of Web applications. WAST
[52] specifies a
navigational structure of Web applications and detects the inconsistency of
parameter names between JSP pages and actions during the test execution.Model-based approaches mainly support the conceptual
design of Web applications. The BioPro system can assist in their
implementation based on the conceptual design. In addition, the inconsistency
problem of parameter names as described above will hardly occur. When users
need to write code, the BioPro system shows these parameter names as
automatically generated variables in Web source windows. Even if they use a
wrong parameter name, this error can be detected during the compilation time
because that wrong variable is not declared.


## 9. Conclusion

This paper has
presented a method that makes it possible to visually design and program Web
applications that use frame facilities and pivot tables. Image-oriented design
using such graphical Web components and action writing for each source page of
a target page, which is based on automatic interpretation of submitted data,
have important roles to develop Web applications. They have made the development
of Web applications easy, especially in the design of the presentation layer
and action writing of the business-logic layer.Existing tools such as Homepage Builder [4], and Dreamweaver &
Fireworks [39] provide
a variety of GUI components and have sufficient facilities for editing Web
pages. On the other hand, the proposed system has facilitated the development
of Web applications by providing Web components such as Frameset pages, Web
pages, pivot tables, DB tables, Program tables, and Web
source windows, where each Web component can easily refer to the
definitions of the other components. As the next step, we are going to
investigate how to visually incorporate rich components such as Flex, Flash,
JavaScript, and Applets in the design phase. In the future, we intend to
develop an end-user programming environment based on the BioPro system, where
typical business patterns will be shown by using a sequence of functional
components, and users will be guided and taught what to do next to develop a
Web application they have in mind.



---

*Source: 879725-2009-02-25.xml*