Developed at the

Polish-Japanese Institute of Information Technology

Chair of Software Engineering

SBA and SBQL home pages

© Copyright by ODRA team, © Copyright by PJIIT

 

 

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