Developed at the

ODRA – Object Database for Rapid Application development

Description and Programmer Manual

by Jacek Bekier, Mariusz Trzaska and the ODRA team

16. ODRA Web Components

ODRA Web Components is a library of user interface components parameterized by SBQL queries (see Fig.16-1). Currently the library provides five distinct components:

· Bar-Line Chart Component - bar/line chart.

· News Component - list of articles.

· Poll Component - poll/survey component.

· Table Component - table.

· Text Label Component - line of text.

16‑1. ODRA Web library in action

Fig.16-2 presents a simplified Java class diagram of the implemented components. Notice that almost each of them is connected with appropriate style definition. Such a solution guarantees a separation between business logic and visual appearance of the data.

16-2. Simplified class diagram of the implemented components

Beside abstract types (SBQL Web Component, SBQL Web Component Style), every item of the object model could be utilized as a tag inside JSP page. Table 16-1 show tags names for every item of the object model.

Table 16-1. JSP tags for items of the object model

Object’s name	Tag name
SBQL Web Page	sw:page
SBQL Data Source	sw:dataSource
Bar-Line Chart Component	sw:chart
News Component	sw:news
Poll Component	sw:poll
Table Component	sw:table
Text Label Component	sw:textLabel
Bar-Line Chart Component Style	sw:chartStyle
News Component Style	sw:newsStyle
Poll Component Style	sw:pollStyle
Table Component Style	sw:tableStyle

Each of the components is associated with at least one SBQL query. The SBQL queries are used to retrieve the data presented in the component, or to save the information entered by the user. The system is designed to be used in conjunction with Java Server PagesÔ technology.

The system is distributed as 3 Java archive files:

· sbqlweb.jar - contains the custom tag library.

· demo.war - a sample web application designed with SBQL Web Components.

· demoapp-installer.jar - a helper tool. Connects to an ODRA server and adds the modules required to run the sample application.

The following steps are required to run the sample application "demo.war":

· Deploy demo.war to a J2EE web application server, e.g. Apache Tomcat 5.5.17 (copy "demo.war" to TOMCAT\webapps).

· Run ODRA server.

· Run demoapp-installer.jar ("java -jar demoapp-installer.jar").

· The sample application should be available at http://HOSTNAME:PORT/demo.

The next subchapters describe each of the components with more details.

16.1 Page Definition

Every JSP page using ODRA Web Components needs SBQL Web Page item. The SBQL Web Page object corresponds to the sw:page tag. The functionality of the tag (tag handler class) is implemented in the odra.web.tags.PageTag class. The only parameter is „id”, which is a unique identifier of the page. Fig.16-3 shows sample utilization inside JSP page.

16-3. Sample utilization of the SBQL Web Page

16.2 Data Source Definition

A definition of an SBQL Web Page could contains any number of SBQL Data Source objects responsible for a connection with an external instance of the ODRA server.

A counterpart of the SBQL Data Source object in the custom tags library is sw:dataSource, which functionality is implemented in odra.web.tags.DataSourceTag class. Table 16-2 presents the list of tag’s parameters.

Table 16-2 . Tag sw:dataSource parameters

Parameter’s name	Description
id	Unique identifier of the object which is utilized in the connection with a data source.
host	Name of the machine where the ODRA Server is running.
port	Number of the port utilized in the connection.
user	Nam of the database user.
pass	Password of the user
module	Name of the module where the queries will be evaluated.

Fig.16-4 shows a sample utilization of the component.

16-4. Sample utilization of the SBQL Data Source object

16.3 Bar-Line Chart Component

16-5. Sample utilization of the Bar-Line Chart Component

The Bar-Line Chart component allows for embedding a bar-line chart inside a JSP page. The presented data is retrieved from an ODRA database using an SBQL query. Both line and a bars collection are optional. Thus it is possible to create a simple line chart or a simple bar chart. Implementation details are the following:

· tag handler class: odra.web.tags.components.ChartTag

· Tag’s name: chart.

Table 16-3 describes component’s parameters.

Table 16-3. Chart component parameters

Parameter’s name	Descriptions
id	Unique identifier of the object.
displayName	Presented name of the component.
dataSourceId	Identifier of the component’s data source.
width	Width of the component (in pixels). „auto” means automatic resizing according to the data width.
height	Height of the component (in pixels). „auto” means automatic resizing according to the data height..
styleId	Id of the component’s style.
query	SBQL query. The result of the query will be visualized on his chart.
collectionName	Query result parameter. Describes the name of a collection which is a source of data for this chart.
categoryFieldName	Query result parameter. Describes the name of an attribute which values are presented on x axis.
barFactFieldName	Query result parameter. Describes the name of an attribute which values are presented on bar chart. If there will be no value, the bar chart will not be shown.
lineFactFieldName	Query result parameter. Describes the name of an attribute which values are presented on line chart. If there will be no value, the line chart will not be shown

Figures from 16-6 to 16-9 present sample utilizations of charts together with the results.

16-6. Sample utilization of chart – source code for case 1

16-7. Sample utilization of chart – result for case 1

16-8. Sample utilization of chart – source code for case 2

16-9. Sample utilization of chart – result for case 2

16.4 News Component

The News component allowing creating lists of articles or news. The current version is able to publish following information:

· Title of the news/article

· Creation date

· Content of the article or news

Implementation details:

· tag handler class: odra.web.tags.components.NewsTag

· Tag’s name: news.

Table 16-4 describes component’s parameters.

Table 16-4. News component parameters

Parameter’s name	Description
id	Unique identifier of the object.
displayName	Presented name of the component.
dataSourceId	Identifier of the component’s data source.
width	Width of the component (in pixels). „auto” means automatic resizing according to the data width.
height	Height of the component (in pixels). „auto” means automatic resizing according to the data height..
styleId	Id of the component’s style.
query	SBQL query. The result contains titles, dates and the contents of Publisher articles or news.
collectionName	Query result parameter. Describes the name of a collection which is a source of data for the component.
titleFieldName	Query result parameter. Points to a field containing titles of the articles/news.
dateFieldName	Query result parameter. Points to a field containing dates of the articles/news.
textFieldName	Query result parameter. Points to a field containing content of the articles/news.

Fig.16-10 and Fig.16-11 show a sample code and a corresponding www result page.

16-10. Sample code illustrating utilization of the news component

16-11. Sample web page with the news component

16.5 Poll Component

The Poll component supports creating polls or surveys. There are two modes of working:

· Question; The question and possible answers are presented.

· Answer: The mode is activated after a user’s answer and show the current results of the poll.

The poll component is the only one from the library which utilizes SBQL queries to send information from a client to a server. Query defined in parameter „submitVoteQuery” is used in case of Whiting user’s answer in a database.

Implementation details:

· tag handler class: odra.web.tags.components.PollTag

· Tag’s name: poll.

Table 16-5 describes component’s parameters.

Table 16-5. Poll component parameters

Parameter’s name	Description
id	Unique identifier of the object.
displayName	Presented name of the component.
dataSourceId	Identifier of the component’s data source.
width	Width of the component (in pixels). „auto” means automatic resizing according to the data width.
height	Height of the component (in pixels). „auto” means automatic resizing according to the data height..
styleId	Id of the component’s style.
answersQuery	SBQL query which retrieves information about available answers.
collectionName	Query result parameter. Describes the name of a collection which is a source of answers for the component.
idFieldName	Query result parameter. Points to a filed containing id of the answer.
textFieldName	Query result parameter. Points to a filed containing text of the answer.
countFieldName	Query result parameter. Points to a filed containing number of answers voted on the particular answer.
questionTextQuery	SBQL query which retrieves text presented as a question in a poll.
submitVoteQuery	SBQL query which writes user’s answer in a database. Question Mark is replaced by id of the answer.

Figures 16-12, 16-13 and 16-14 show a sample code and a corresponding www result page.

16-12. Sample code illustrating utilization of the poll component

16-13. Web page containing the result of running sample code illustrating utilization of the poll component – question mode

16-14. Web page containing the result of running sample code illustrating utilization of the poll component – answer mode

16.6 Table Component

The Table component shows a data in a table form. The source of the data is a SBQL query. The number and column’s name are configured using special parameter. Implementation details:

· tag handler class: odra.web.tags.components.TableTag

· Tag’s name: table.

Table 16-6 describes component’s parameters.

Table 16-6. Table component parameters

Parameter’s name	Description
id	Unique identifier of the object.
displayName	Presented name of the component.
dataSourceId	Identifier of the component’s data source.
width	Width of the component (in pixels). „auto” means automatic resizing according to the data width.
height	Height of the component (in pixels). „auto” means automatic resizing according to the data height..
styleId	Id of the component’s style.
query	SBQL query. The result contains data presented in the table.
collectionName	Query result parameter. Determines the name of a collection which is a source for data presented in the table.
fieldNames	Comma separated names of fields which values will be presented in the table. The number of fields corresponds to the number of table’s columns.

Fig.16-15 and Fig.16-16 show a sample code and a corresponding www result page.

16-15. Sample code describing table component

16-16. A table created using sample code

16.7 Text Label Component

Text label component shows single value read from a database, i.e. a text or a number. On contrary to others component, visual properties of the Text Label object are not defined using separate style tag. The way of presenting information depends only on the location inside other HTML items, which describes visual format.

Implementation details:

· tag handler class: odra.web.tags.components.TextLabelTag

· Tag’s name: textLabel.

Table 16-7 describes component’s parameters.

Table 16-7. Text Label component parameters

Parameter’s name	Description
id	Unique identifier of the object.
dataSourceId	Identifier of the component’s data source.
query	SBQL query which retrieves value show by the component. The result Has to be a single value.

Fig.16-17 and Fig.16-18 show a sample code and the corresponding www result page.

16-17. Sample code showing utilization of the Text Label component

16-18. Web page containing sample Text Label component

ODRA Web API Specification, including the Java documentation, is presented as a MS Word document.

Last modified: July 9, 2008