Oracle APEX 如何在APEX中使用CSS
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
|
Purpose
|
|
4
|
Orders
|
Main page to display all existing orders
|
|
29
|
Order Details
|
Display complete order with details
|
|
11
|
New Order – Identify Customer (Step 1a)
|
Select an existing customer
|
|
18
|
New Order – Create Customer (Step 1b)
|
If customer does not exist, create his/her account
|
|
12
|
New Order – Select Items (Step 2)
|
Add products to the order
|
|
20
|
Product Info
|
Show details of a product in a popup window
|
|
14
|
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:
|
Term
|
Details
|
||||||||||||||
|
Region
|
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 i s 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, . The following commands generate a simple HTML document: Create or replace procedure hello AS
BEGIN
htp.htmlopen; -- generates
htp.headopen; -- generates
htp.title('Hello'); -- generates
htp.headclose; -- generates
htp.bodyopen; -- generates
htp.header(1, 'Hello'); -- generates
Hello
htp.bodyclose; -- generates
htp.htmlclose; -- generates
END;
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
|
||||||||||||||
|
htp.p(‘ ’) |
Indicates that the text that comes after the tag is to be formatted as a paragraph
|
||||||||||||||
|
Customer:
|
Renders the text they surround in bold
|
||||||||||||||
|
htf.escape_sc
|
Escape_sc is a function which replaces characters that have special meaning in HTML with their escape sequence.
converts occurrence of
& to
&
converts occurrence of
“ to
"
converts occurrence of
< to
<
converts occurrence of
> to
>
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. |
||||||||||||||
|
sys.htf.escape_sc
|
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
is used to group header content
is used to group body content
|
|
The or | elements.
| Header Cell – defines a header cell in an HTML table
| Standard Cell – contains data
|
|
html_PopUp
|
It is a function provided by APEX which opens a page in a popup (see page # 111)
|
Collection
|
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.
|
APEX_COLLECTION
|
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)
| Class Referenced in CSSA normal paragraph. Note that this is an important paragraph. |