Wednesday, 20 June 2012

Using Cascading Style Sheets in Oracle Application Express

Create Sales Order Application in Oracle Application Express

In order to keep the practice momentum of this practical Oracle APEX book (Create Rapid Web Applications Using Oracle Application Express) and to leave something for users to think over, I intentionally left aside the explanation area that is a crucial part of any technology book to provide details about how things actually work.
The purpose of this blog is to bridge that gap by providing explanations of each section of the book. I’ll try to guide you on every aspect that I feel necessary, but, will be grateful to receive your opinion as well about any area that you deem requires enlightenment.
To start with, I’ve chosen Chapter 6 (Place Orders) first, because, it is the lengthiest chapter among all others and has some advance topics that the intended audience of this book (novices) would be eager to learn.

Chapter’s Recap:

You create professional looking web pages to take orders from customers and create seven pages to complete this process in a sequence through a wizard-like approach. The first form will allow user to select an existing customer or create a new one. In the second step, user will select products to order and the last step will show summary of the placed order. Once an order is created, you can view, modify, and delete it through the Order Details page using the edit icon in the orders’ main page. Couple of other pages will be created as well to create a new customer, if one does not exist, and to display product information such as Description, Category and Price. Following are the details of pages that are created in this chapter:

Page No.
Page Name
Main page to display all existing orders
Order Details
Display complete order with details
New Order – Identify Customer (Step 1a)
Select an existing customer
New Order – Create Customer (Step 1b)
If customer does not exist, create his/her account
New Order – Select Items (Step 2)
Add products to the order
Product Info
Show details of a product in a popup window
Order Summary (Step 3)
Show summary of the placed order

Before starting the proceedings, let’s acquaint ourselves with the following terms used in this chapter:

As a developer, you add content to a page by creating a region. A region is an area of a page that serves as a container for content. Each region contains a different type of content such as HTML, a report, a form, a chart, a list, a breadcrumb, PL/SQL, a tree, a URL, or a calendar. You position a region either relative to other regions (that is, based on its sequence number and column), or by using a region position defined in the page template. The style of the region is also controlled by the region template. Like the page template, the region template defines the structure of the area that the region takes up on a page. It defines if the region title is displayed and where it is displayed relative to the main content or the body. A region can also define absolute positions for buttons.
htp and htf Packages
htp  (hypertext procedures) and htf (hypertext functions) packages generate HTML tags. These packages translate PL/SQL into HTML that is understood by a Web browser. For instance, the htp.anchor procedure generates the HTML anchor tag, <A>. The following commands generate a simple HTML document:

Create or replace procedure hello AS
    htp.htmlopen;             -- generates <HTML>
    htp.headopen;             -- generates <HEAD>
    htp.title('Hello');         -- generates <TITLE>Hello</TITLE>
    htp.headclose;             -- generates </HEAD>
    htp.bodyopen;             -- generates <BODY>
    htp.header(1, 'Hello'); -- generates <H1>Hello</H1>
    htp.bodyclose;            -- generates </BODY>
    htp.htmlclose;             -- generates </HTML>

Oracle provided the htp.p tag to allow you to override any PL/SQL-HTML procedure or even a tag that did not exist. If a developer wishes to use a new HTML tag or simply is unaware of the PL/SQL analog to the html tag, he/she can use the htp.p procedure.
For every htp procedure that generates HTML tags, there is a corresponding htf function with identical parameters. The function versions do not directly generate output in your web page. Instead, they pass their output as return values to the statements that invoked them. See the use of these packages on page 113 of the book.  
htp.p / htp.print
Generates the specified parameter as a string
Indicates that the text that comes after the tag is to be formatted as a paragraph
Renders the text they surround in bold
Escape_sc is a function which replaces characters that have special meaning in HTML with their escape sequence.
converts occurrence of & to &amp
converts occurrence of to &quot
converts occurrence of < to &lt
converts occurrence of > to &gt

To prevent XSS (Cross Site Scripting) attacks, you must call SYS.HTF.ESCAPE_SC to prevent embedded javascript code from being executed when you inject the string into the HTML page.
The SYS prefix is used to signify Oracle’s SYS schema. The HTP and HTF packages normally exist in the SYS schema and APEX relies on them.
An HTML table contains three elements
<thead> is used to group header content
<tbody> is used to group body content
<tfood> is used to group footer content
The <tr> (table row) tag defines a row in an HTML table. It contains one or more <th> or <td> elements. 
<th> Header Cell – defines a header cell in an HTML table
<td> Standard Cell – contains data
It is a function provided by APEX which opens a page in a popup (see page # 111)
Collection enables you to temporarily capture one or more non-scalar values. You can use collections to store rows a columns currently in session state so they can be accessed, manipulated, or processed during a use’s specific session. You can think of a collection as a bucket in which you temporarily store and name rows of information.
Every collection contains a named list of data elements (or members) which can have up to 50 character attributes (varchar2 (4000)), 5 number, 5 date, 1 XML type, 1 BLOB, and 1 CLOB attribute. You insert, update, and delete collection information using the PL/SQL API APEX_COLLECTION.

You can access the members of a collection by querying the database view APEX_COLLECTIONS.
<style type="text/css">
(Page # 112)
<style> is an HTML tag and is used to define style information for an HTML document. Inside the <style> element you specify how HTML elements should render in a browser. The required type attribute defines the content of the <style> element. The only possible value is "text/css". The <style> element always goes inside the head section.
(Page # 112)
Media Types allow you to specify how documents will be presented in different media. The document can be displayed differently on the screen, on the paper, with an aural browser, etc. In this example media attribute is set to all, specifying that this style sheet is intended for all devices. Media types include print, screen, projection, aural, braille, projection, embossed, handheld, tty, and tv.
The CSS padding properties define the space between the element border and the element content. The top, right, bottom, and left padding can be changed independently using separate properties.
The value of REQUEST is the name of the button the user clicks, or the name of the tab the user selects. For example, suppose you have a button with a name of CHANGE, and a label Apply Change. When a user clicks the button, the value of REQUEST is CHANGE.
A character entity called no-break space and is used in the following two situations:

1. Keep elements together
For example, you want to write this Customer’s Name :
You would want to keep the ":" attached to the line and not let the browser render it on a separate line when there's no free space on the line. Without a no-break space it could show up like this:

Customer’s Name

Replace the space before the semicolon with &nbsp; and the ":" will stick to the preceding word, so it will always look like this:

Customer’s Name :

2. Create multiple spaces
See the example below where you want to show multiple spaces in a text.

These      spaces      will collapse,
but these&nbsp;&&nbsp;&nbsp;&nbsp;are&nbsp;&&sbsp;&nbsp;&nbsp;shown.

These spaces will collapse,    but these     are     shown.
You can also use this character to create space between other elements e.g. images.
Firefox requires the prefix -moz- for border-image
Chrome and Safari requires the prefix -webkit- for border-image

About Cascading Style Sheets (CSS)

A cascading style sheet (CSS) provides a way to control the style of a Web page without changing its structure. When used properly, a CSS separates visual attributes such as color, margins, and fonts from the structure of the HTML document. Go through free CSS tutorials on .

In this chapter, we used CSS on page 112 to style Page-12 (Select Items-Figure 6-19). In this page we used class attributes in PL/SQL code and referenced them in CSS in HTML Header section. Before moving on to understand the actual functionality, let’s first take a look at a simple example on how to use class attribute in an HTML document. The class attribute is mostly used to point to a class in a style sheet. The syntax is <element class="classname">.

            <style type="text/css">
      h1.header {color:blue;}
                  p.styledpara {color:red;}

            <h1 class="header">Class Referenced in CSS</h1>
            <p>A normal paragraph.</p>
            <p class="styledpara">Note that this is an important paragraph.</p>

The body of this page contains three sections:

  1. <h1 class="header">Class Referenced in CSS</h1>. The text, “Class Referenced in CSS”, is enclosed in h1 html tag. It is called level 1 heading and is the most important header in a document; it is usually used to indicate the title of the document. The text is preceded by a class, named “header”. Considering the above class syntax, here, h1 is the element and header is the classname. Combined together (element.classname), this class is referenced in the style section using a CSS rule – h1.header {color:blue;} to present the heading in blue color. A CSS rule has two main parts: a selector, and one or more declarations. The selector is normally the HTML element you want to style. Each declaration consists of a property and a value. The property is the style attribute you want to change. Each property has a value. In the above h1.header {color:blue;} rule, h1 is the selector followed by the classname and {color:blue;} is the declaration.
  2. <p>A normal paragraph.</p> – A plain paragraph without any style applied to it. HTML documents are divided into paragraphs and paragraphs are defined with the <p> tag. <p> is called the start tag or opening tag while </p> is called the end or closing tag.
  3. <p class="styledpara">Note that this is an important paragraph.</p>. A paragraph with a class named “styledpara”.  In the style section, the selector “p” followed by the classname “styledpara” having declaration{ color:red;} is referencing this section to present the paragraph text in red color.        
Now that you have understood how CSS are used in web pages, let’s get back to figure out how we used it in Page-12. Turn to page 113. There is a class named demoCustomerInfo defined in the PL/SQL Dynamic Content on this page. Here is the listing:

Line 1. <div class="demoCustomerInfo">
Line 2.          <strong>Customer:</strong>
Line 3.          <p>
Line 4.              cust_first_name + cust_last_name)
Line 5.              cust_street_address1
Line 6.               cust_street_address2)
Line 7.               cust_city + cust_state
Line 8.               cust_postal_code
Line 9.          </p>
Line 10.</div>
This code displays the heading “Customer:” along with details of the selected customer as shown in Figure 6-19.

Figure 6-19 (A:sideCartItem  B:sideCartTotal  C:demoCustomerInfo  D:demoProducts  E:demoCurrentOrder  F:demoTitle  G:demoAddtoCart)

Now check the corresponding CSS code in the HTML Header section on page 112.
div.demoCustomerInfo strong{font:bold 12px/16px Arial,sansserif;display:block;float:left;width:120px;}
div.demoCustomerInfo p{display:block;float:left;margin:0; font: normal 12px/16px Arial,sans-serif;}

The first rule has the selector strong which styles the title “Customer:” on Line 2 whereas the second one with the p selector is used to style the values between tags <p></p> - Line 4 through Line 8.

Let’s play with the above two CSS rules and note the effect on our web page. In this exercise you will move customer’s information on the far right side. 
1.      Login to the application
2.      Click the Orders tab
3.      Click Enter New Order button
4.      Select an Existing customer
5.      On Select Items page, click button Edit Page 12 at the bottom of your screen
6.      Click Edit in the Page section
7.      Scroll down to HTML Header and Body Attribute section, locate the above two rules and change/add the properties shown in bold:
div.demoCustomerInfo strong{font:bold 18px/16px Arial,sans-serif;display:block;float:left;width:0px;padding-left:480px;}
div.demoCustomerInfo p{display:block;float:right;margin:0; font: normal 12px/16px Arial, sans-serif;}
8.      Apply changes and click Run. The Customer font increased from 12px to 18px. We added a property padding-left with a value of 480px. This will create a space of 480px from the left side and will show the title on the far right. Similarly, to show customer’s details on the right location we changed the float property from left to right. The width property in the previous rule was set to 120px to create a space between the title “Customer:” and the name of the customer. We set it to zero because we do not need that space now.

Using Cascading Style Sheet (CSS) in Oracle Application Express

This section explains CSS used in chapter 6, page 112. As mentioned earlier, CSS provides a way to control the style of a Web page without changing its structure. We used it in Page 12 of our application to present the page’s contents in a desired format. In Page 12, you select items for your order and is the second step in order processing wizard. Following are the CSS rules – explained individually.  

<style type="text/css" media="all">
The <style></style> tag is used to define style information for an HTML document. Inside the <style> element you specify how HTML elements should render in a browser. The required type attribute defines the content of the <style> element. The only possible value is "text/css". The <style> element always goes inside the head section.

Media Types allow you to specify how documents will be presented in different media. The document can be displayed differently on the screen, on the paper, with an aural browser, etc. In this example media attribute is set to all, specifying that this style sheet is intended for all devices. Media types include print, screen, projection, aural, braille, projection, embossed, handheld, tty, and tv.


div.sideCartItem{padding:8px 8px 0 8px;font:normal 11px/14px Arial,sans-serif;}

The div element represents the corresponding <div> html tag on page 114 <div class=”sideCartItem”>. The .class selector styles all elements with the specified class. This rule styles all <div> elements with class="sideCartItem". You can read the text as style the div elements of the class sideCartItem by setting values to the properties mentioned within the braces. Styling parameters are passed within braces. The first property you set here is padding. You set top, right, bottom, and left values as 8px, 8px, 0px, and 8px respectively.

To understand the function of padding, change all the values to 50px, save the modifications and run the page. The result, similar to the right pane in the above figure will be shown. A padding of 50px has been applied to all four sides. The main difference between Padding and Margin is: Padding is the space inside the border between the border and the actual image or cell contents while Margins are the spaces outside the border, between the border and the other elements next to this object.

In the next parameter, you set font size, weight, and family properties in one declaration.

div.sideCartItem a{color:#000;}

This rule is applied to set the color of Product Name in the Current Order section. The letter [a] before the opening brace corresponds to the html link tag <a> on page 114 – <a href="javascript:productPopup('''||||''');">'||c1.i||'</a>.  Change the value #000 to #0050C0 and see the following result. See for more details on HTML colors.

div.sideCartItem span{display:block;text-align:right;padding:4px 0 0 0;}
div.sideCartItem span.subtotal{font-weight:bold;}

These rules are created to show Price, Quantity, and Subtotal in the desired format. Span elements refer to the <span> tags on page 114 and are used to group inline-elements in a document.

    <span>Quantity: '||c1.q||'</span>
    <span class="subtotal">Subtotal: '||trim(to_char(c1.ep,'$999G999G999D00'))||'</span>

The display property defines how a certain HTML element should be displayed. We used the block value in which element is displayed as a block element (like paragraphs and headers). The top value of padding property is set to 4px to define height among Price, Quantity, and Subtotal. Change this value to 8px and note the difference as shown in the following figure.

The second rule has a sub-class named subtotal to show all sub-total labels and values in bold.

Comment out the first rule using -- at the beginning. Apply changes and run the order form. You’ll see the following output. Here the values are shown as inline elements (default) without any line break. Deactivate the other rule to show the subtotal label and value in normal weight.

Rule 1 deactivated

Both rules deactivated


div.sideCartTotal{margin-top:8px;padding:8px;border-top:1px dotted #AAA;}

This rule draws a separating line under the subtotal section using border-top property. Top margin of 8px specifies the height between subtotal and the separating line while padding sets the height between the separating line and the number of items as shown in the following figure.

div.sideCartTotal p{padding:0;margin:0;font:normal 11px/14px Arial,sans-serif;position:relative;}

If disabled, Item and Total values will not appear. The [p] element points towards the <p> tag in the PL/SQL code. The rule applies to both values, since both are enclosed in the <p> tag:

<p>Items: <span>'||c||'</span></p>
<p class="sideCartTotal">Total: <span>'||trim(to_char(t,'$999G999G999D00'))||'</span></p>

div.sideCartTotal p.sideCartTotal{font:bold 12px/14px Arial,sans-serif;padding:8px 0 0 0;}

This rule applies to the label “Total:” which is enclosed in the <p> tag followed by the class sideCartTotal - <p class="sideCartTotal">Total:

div.sideCartTotal p.sideCartTotal span{font:bold 12px/14px Arial,sans-serif;padding:8px 0 0 0;}

Formats the <span> tag part in the PL/SQL code (as shown below) which contains total order value. <span>'||trim(to_char(t,'$999G999G999D00'))||'</span>

div.sideCartTotal p span{padding:0;position:absolute;right:0;top:0;}

The rule applied to position Items and Total values. Please note that both these values are enclosed in the <span> tag in PL/SQL code - <span>'||c||'</span> and <span>'||trim(to_char(t,'$999G999G999D00'))||'</span>. With absolute positioning, an element can be placed anywhere on a page. Let’s see a small demo to understand absolute positioning. Suppose you want to show both these values immediately after the corresponding captions as shown in the following figure. To do this, replace the right:0 property with left:30px; as shown here: position:absolute;left:30px;top:0; The values will be placed 30px from the left.




div.demoCustomerInfo strong{font:bold 12px/16px Arial,sans-serif;display:block;float:left;width:120px;}

This rule refers to the PL/SQL code <strong>Customer:</strong> to display the label “Customer:” in bold. The width property, which is set to 120px, determines the distance between the label Customer: and the name of the customer selected for the order. Set this value to 60px to have the name appear adjacent to the label as shown here:

div.demoCustomerInfo p{display:block;float:left;margin:0; font: normal 12px/16px Arial, sans-serif;}

This rule applies to the <p> tag and displays all column values within the tag in a block as shown in the above figure.
htp.p(htf.escape_sc(x.cust_first_name) || ' ' || htf.escape_sc(x.cust_last_name) || '<br />');
htp.p(sys.htf.escape_sc(x.cust_street_address1) || '<br />');
if x.cust_street_address2 is not null then
      sys.htp.p(sys.htf.escape_sc(x.cust_street_address2) || '<br />');
end if;
htp.p(sys.htf.escape_sc(x.cust_city) || ', ' || x.cust_state || '  ' || htf.escape_sc(x.cust_postal_code) || '<br />');


div.demoProducts{clear:both;float:left;width:58%;margin:16px 0 0 0;padding:0 8px 0 0;}

The clear property specifies which sides of an element where other floating elements are not allowed. We used the value BOTH which means no floating elements allowed on the left or the right side. Let’s do some experiment with this property. Change the value of the clear property to the default none to allow floating. Apply changes and run the application. This is what you’ll see:

The width property sets the width of an element. In this case it is the table comprising Product Name, Price, and Add to Cart button. Change the value from 58% to 40% and then to 70% and note the changes. When you set the width value to 40% the table shrinks and expands when the value is set to 70%. The 16px top margin sets the distance between cust_postal_code and table headings while the 8px right margin is used to create a space between the table and the vertical bar separating Products and Current Order sections. Set both these values to 0px and observe the change.

div.demoProducts table{border:1px solid #CCC;border-bottom:none;}

This rule sets the top, left and right borders of the table leaving the bottom. To see the effect, change the border value to 3px.

div.demoProducts table th{background-color:#DDD;color:#000;font:bold 12px/16px Arial,sans-serif;padding:4px 10px;text-align:right;border-bottom:1px solid #CCC;}

This rule is created to format table’s header cells <th> (Product, Price, and Add to Cart).
<th class=”left”> Product</th><th>Price</th><th>Add to Cart</th>
Note that we declared class=”left” for the title Product to left-align it. In the above rule, we set text-align:right for all <th> values. We used the class=”left” declaration to specifically align the Product heading towards the left side (the rule for .left is coming ahead). The padding value of 4px determines the heading row height, while the 10px value sets the left/right margins. Set both the values to 10px and 0px respectively and see the effect.

div.demoProducts table td{border-bottom:1px solid #CCC;font:normal 12px/16px Arial,sans-serif;padding:4px 10px;text-align:right;}

This rule is created for Standard Cell <td> of the table which contains data. The first property border-bottom:1px creates a horizontal line between the two rows in the table. Set this value to 0px to remove the bottom border.

<td class="left">'||c1.product_name||'</td>
<td><a href="f?p=&APP_ID.:12:'||:app_session||':ADD:::P12_PRODUCT_ID:'||c1.product_id||'"class="demoAddtoCart">Add &gt;</a></td>

div.demoProducts table td a{color:#000;}

Sets font color of anchored element in table data i.e. Product and Add>.

div.demoProducts .left{text-align:left;}

A sub-class to left-align corresponding text. Used in the following PL/SQL code.
<th class=”left”> Product</th><th>Price</th><th>Add to Cart</th>
<td class="left">'||c1.product_name||'</td>

div.demoCurrentOrder{float:left;width:38%;margin:16px 0 0 0; border-left: 1px solid #CCC; padding: 0 0 0 8px}

Similar to Product section, you’re assigning 38% width to the Current Order section. Border-left property creates a vertical bar to the left of this section acting as a separator.

strong.demoTitle{font:bold 12px/16px Arial,sans-serif;display:block;padding: 4px 10px; background-color:
#DDD; border: 1px solid #CCC}
This rule applies to the PL/SQL code htp.p('<strong class="demoTitle">P R O D U C T S</strong>') to display the title “PRODUCTS” on top of table headings. 

a.demoAddtoCart {
display: block;
float: right;
padding: 2px 6px;
background-color: #CCC;
color: #FFF;
text-decoration: none;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;}

This rule is pointing towards the anchor tag in the PL/SQL code and applies rounded borders to the element.

<a href="f?p=&APP_ID.:12:'||:app_session||':ADD:::P12_PRODUCT_ID:'||c1.product_id||'" class="demoAddtoCart">Add &gt;</a>

The -moz- prefix is used by Firefox while Chrome and Safari requires the prefix -webkit-. Change the border-radius value to 2 and then to 5 according to your browser and see the reflection on the Add > element.

a.demoAddtoCart:hover {background-color: #80A2BB; color: #FFF}

The :hover is a CSS selector and is used to select elements when you mouse over them. The :hover selector can be used on all elements, not only on links. In CSS, selectors are patterns used to select the element(s) you want to style. Change the background-color property to green, move your mouse pointer over the Add> element. You should see the following result.

This is the closing style tag.

In this tutorial, we learned how CSS is used in Oracle Application Express to position page elements. I left out some unnecessary rules mentioned in the book that were there for experimentation purposes.

The New Oracle APEX Book