August 29, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Building Web Applications with Oracle HTML DB, Part 2

  • August 25, 2004
  • By Michael Klaene
  • Send Email »
  • More Articles »

In last month's article, "Developing Applications with Oracle HTML DB, Part 1," we set up a rudimentary HTML DB application and deployed it to our workspace. To highlight the ease in which any developer, or non-developer with minimal SQL skills, could build something useful with this tool, we stuck to the basics. We used wizards to build the initial application based upon an employee table, then we made a few modifications. For example, we modified our report's query to display more useful information and included a pop-up list of values for form field lookups, all to improve the user's experience. In this article, we'll continue where we left off and add some additional features that real-world applications might require. If you have not read last month's article, please do so before continuing.

Improving the interface

I hinted last month how easy it was to beautify your application by adding templates, report pagination, and more. Before we start adding any new functionality, let's work on the interface. We'll start with selecting a template. HTML DB provides a repository of existing templates to choose from. Follow the steps below to add a template to a page.

  • Log into your HTML DB workspace and select your 'Emp' application from Available Applications.
  • Click on a link for a page in your application.
  • Under Shared Components -> Templates, click Create.
  • In the Region Templates section, click Create/copy.
  • Select the option 'Choose one from the HTML DB Repository'. Click Next.
  • We will select the theme 'Blue/Tan Box'. Click Next.
  • Leave the Actual Name field as is and click Create.
  • The template is created. Now, select the Pages tab to return to the Page Definition screen.
  • Under Page Rendering - > Regions, click View.
  • In the Template drop down box, select the 'Blue/Tan Box' for a page and save.

This page in our application now uses a template. Once added to the application, a template can be added to any (and probably every) page by setting its 'Region' Template property.

Now, let's add a few more display features to our employee report.

  • Navigate to your application's employee report page and click Edit Page at the bottom of the page.
  • Select the region containing your employee report. Select the Report Attributes tab.
  • Under the Heading column for each report item, change the text to something more meaningful.
  • For the 'Sal' (salary) column, check the Sum checkbox.
  • In the Show null values as textbox, type 'N/A'.
  • For Pagination Scheme, select the '1 -15 16-30' option.
  • Type '8' in the Number of Rows field.
  • Click Apply Changes, and then Run Page.

We've just made several changes to our interface. First, the report page displays more meaningful column headings. Commission is an optional field. If an employee has no designated commission, that field is displayed as 'N/A'. Adding pagination, we now display only 8 report records per page. Click on the '9-n' link to view the remainder of the report. Finally, at the bottom of our report, we have a total calculation for employee salaries.

Adding navigation buttons

In a typical business application, there is a need to navigate between different screens. There are numerous ways to accomplish simple navigation. Oracle HTML DB provides a 'breadcrumb trail' by default when it generates an application. These page links are visible in the upper left hand corner of every application page. Oracle HTML DB also provides ready-made components such as a tree menu or a docked navigation bar. However, often navigation is a little more involved. It may not be enough to simply navigate to a page, but we might want to conditionally navigate to one of several pages or naviate to a page with some data input as a parameter to this new page. In Web development, this is sometimes accomplished by attaching request parameters to the HTTP request that is made. The following steps will demonstrate how to add two buttons to our report. One will perform a simple navigation, while the other attaches request information to the button click event.

  • Navigate to your application's employee report page and click Edit Page at the bottom of the page.
  • Under Page Rendering -> Buttons, click Create.
  • In the Region drop down box, select the region containing our employee data. Click Next.
  • For Button Name, enter 'Add_Employee'. Leave the Action 'Redirect to URL' selected. Click Next.
  • Click Next, and then Next again until you reach the Branching tab.
  • In the Page text box, display its List of Values. Select the form used to insert employee records.
  • Click Create Button.
  • Repeat the first six steps of this sequence to create a second button. This time, enter 'View_Salary_Chart' for Button Name.
  • When you reach the Branching screen, stop. Display the Page LOV once again.
  • Select the analysis page of our application (that displays a pie chart for a selected field).
  • In the Set these items field, below Page, enter the item name 'P6_SHOW'.
  • In the With these values field, below Page, enter the text 'Sal'.
  • Click Create Button.
  • Run the page.

Figure 1 shows what we have accomplished. The report page has two buttons. 'Add Employee' takes us to a blank employee entry form. Quick and simple. The second button, 'View Salary Chart', goes one step further. On the employee analysis page, there is a drop down box called 'P6_SHOW' that accepts a string to tell it what data item needs to be analyzed. We told HTML DB to branch to this page, but we also added a request parameter of 'P6_SHOW' and gave it a value of 'Sal', the employee salary field. In a typical Web application, we might have added this extra information in a query string ala http://www.my_site.com/my_chart_page?P6_SHOW=Sal. HTML DB gives us a convienent way to accomplish the same task. Go ahead and try these two buttons and, if you so desire, add a few more.



Click here for a larger image.

Figure 1: Our Report Page with Buttons





Page 1 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel