16-UI Maps

16
UI Maps
Copyright 2009, Oracle. All rights reserved.
UI Map Overview
A UI map is a meta-data object that holds the HTML that
appears in map zones to provide a more aesthetically
pleasing user experience
Foreshadowing:
BPA scripts (which will only be covered in the next chapter) make
extensive use of UI maps to capture data during update-oriented
business processes
This section describes the various UI map features and

design patterns
16 - 2
Map Zones
Map zones contain display-only

information about a specific
instance of a BO along with buttons
that can initiate business processes
to change the BO
Info zones contain grids of

information related to the object
being displayed in a portal
We'll describe map zones in this section
16 - 3
Base Package = Object Maintenance

Implementation = Portal Display and BPA Maintenance
The object maintenance pages are intentionally generic
so they can be used in many verticals and locales
UI maps allow your implementation to create a look

and feel that matches the customers business
16 - 4
16
HTML Primer
But Before We Start On UI Maps

The next several slides provide a brief overview of key
concepts that are employed to construct UI maps
When this section is complete, we'll describe how these
concepts are used in UI maps
16 - 6
What Are the Pieces?

HTML
HyperText Markup Language
Used to define the structure of the page
Traditionally used to store the contents of the page as well. Not so
true in modern applications
CSS
Cascading Style Sheets
Used to define the look of the page
May be embedded in the HTML page or stored in a separate file
(both methods can be used)
Javascript
Used to enable actions against HTML elements or data on the page
May be embedded in the HTML page or stored in a separate file
(both methods can be used)
Is NOT Java (although there are some similarities)
16 - 7
16
HTML
The Basic Elements
HTML Skeleton
HTML is an XML document that a web browser will
understand
It contains a <head> element and a <body> element
<html>
<head>
The <head> will contain CSS

controls and Javascript
functions
</head>
<body>
</body>
</html>
16 - 9
The <body> will contain the

HTML elements that are visible
on the page. May also contain
CSS and Javascript
Tables Allow For Easy Alignment

The easy way to structure information on an HTML page is
with the <table> element within the <body>
<body>
<table>
<tr>
<td>Aaa</td>
<td>Bbb</td>
</tr>
<tr>
<td>Ccc</td>
<td>Ddd</td>
</tr>
A <table> element contains rows

<tr> and cells <td>
</table>
</body>
16 - 10
HTML Elements Have Attributes

(Just Like BO Elements)
HTML elements can also have attributes
<table border=1 cellpadding=7 cellspacing=7>
<tr>
<td colspan=2>Heading</td>
</tr>
<tr>
Notice how the first

row in the table
spans 2 columns
Border is 1 pixel
The Result
Cells have 7
pixels of space
around the data
<td>Aaa</td>
<td>Bbb</td>
</tr>
<tr>
Cells have 7
pixels of space
between them
<td>Ccc</td>
<td>Ddd</td>
</tr>
</table>
16 - 11
Other Elements - <input>

The <input> element is used to capture data values
<body>
<input type=text/>
<input type=checkbox/>
<input type=button value=Press/>
</body>
There are other types

of <input> but these
three get a lot done
16 - 12
Other Elements - <class>

The <class> element references functions that we supply
that perform dynamic processing at run time on the HTML
<body>
<table>
<tr>
<td class="oraLabel" oraLabel="approvalProfileBO/approvalProfile"> </td>
</tr>
</table>
The oraLabel class has logic that retrieves the label
</body>
from the element defined in the oraLabel attribute
and formats it using the standard label style (note,
this element's label source is controlled by the
object whose XML is injected into the HTML at run
time, e.g., it probably comes from the meta-data
field that's been set up to hold approval profile code)
16 - 13
Here's the placeholder that

will be populated with the
label of the approvalProfile
element at run time (based
on the user's language)
<class> (continued)
Another <class>
<body>
<table>
<tr>
<td class="oraLabel" oraLabel="approvalProfileBO/approvalProfile"> </td>
<td><input type="text" class="oraInput" oraField="approvalProfileBO/description"> </td>
</tr>
</table>
</body>
The oraInput class has logic that retrieves a

value from the element defined in the oraField
attribute; it also has logic that populates this
element when the user continues
Here's the placeholder that will

be used to display / capture with
the value of the description
element at run time
There are other classes that
you'll be exposed to
16 - 14
Other Elements - <span>

The <span> element is used to provide a placeholder for logic that
dynamically populates a value
Note, if there's a table declared, you rarely need a span as the td's are the
placeholders
For example, we have a function (oraPageTitle) that dynamically

retrieves a map's title from the field meta-data; this function needs a
span to know where to place the title's value as it's not in a table:
<body>
<span class="oraPageTitle" oraMdLabel="C1_APPR_PROF_LBL"> </span>
</body>
The oraPageTitle class has logic that

retrieves the label from the field defined
in oraMdLabel attribute and formats it
using the standard title style
16 - 15
Here's the placeholder that will

be populated with the label of
the C1_APPR_PROF_LBL field
at run time (based on the user's
language)
Other Elements - <select>

The <select> element is used to create a drop-down; it is
the container for the <option> element
An empty option is provided by <option value=" "> </option>
<select>
<option value=" "> </option>
<option value=CA>California</option>
<option value=IL>Illinois</option>
<option value=NY>New York</option>
</select>
16 - 16
Dropdowns Aren't Frequently Hard-Coded

Most dropdowns are derived at run time rather than being hard coded
(in English); there's a cool attribute called oraSelect that populates a
dropdown using several methods
<body>
<table>
<tr>
<td>
<select class="oraInput"
oraField="approvalProfileBO/approvalInfo/transferAdjustmentPrecedence"
oraSelect="lookup:C1_XFER_ADJ_PRECEDENCE_FLG;" >
<option value=' '> </option>
</select>
</td>
</tr>
</table>
The oraSelect attribute populates the option

values. In this example, it populates them
using the values of a lookup value
Lookups are just one way, you can use the
tips on the UI map for other ways to
populate the options values
</body>
16 - 17
Putting It Together
<table border="1" cellpadding="7" cellspacing="7">
<tr>
<td colspan="2">A Quick Person</td>
</tr>
<tr>
<td>Name</td>
<td><input type="text"></td>
</tr>
<tr>
<td>State</td>
<td>
<select>
<option value="CA">California</option>
<option value="IL">Illinois</option>
<option value="NY">New York</option>
</select>
</td>
</tr>
</table>
16 - 18
16
CSS
The Basic Elements
Why CSS?
We finished the last section

with this panel
Functional but very bland
CSS will allow us to spice up

the panel with colors and fonts
16 - 20
Element CSS
<table border=0" cellpadding="7" cellspacing="7 style="background-color:#BAD2F5; color:black;" >
<tr>
<td colspan="2 style=font-weight:bold>A Quick Person</td>
</tr>
A style attribute
<tr>
<td>Name</td>
<td style=background-color:red;><input type="text></td>
</tr>
<tr>
<td>State</td>
<td>
<select>
</select>
</td>
</tr>
</table>
16 - 21
Extracting The CSS

As styles could be used on multiple elements, it would be good to
define them somewhere common
To do this, they need to be taken out of the HTML element and placed
into a <style> element
<head>
<style>
.tableStyle {
background-color: #BAD2F5;
color: black;
Notice that this is placed in the

<head> HTML element
mentioned earlier
}
.boldfont {
font-weight: bold;
}
</style>
</head>
16 - 22
The New HTML

The same style can now be applied to many elements easily
And a single change to the style will affect ALL elements that use that style
<table border=0" cellpadding="7" cellspacing="7 class=tableStyle >
<tr>
<td colspan="2 class=fontBold>A Quick Person</td>
</tr>
<tr>
<td class=fontBold>Name</td>
<td style=background-color:red;><input type="text"></td>
</tr>
<tr>
<td class=fontBold>State</td>
<td>
<select> </select>
</td>
</tr>
</table>
16 - 23
A class attribute
Application Common CSS
The <style> element may be removed from the HTML

completely and placed in a separate file (normally a .css
file)
This file can be referenced by your HTML page
Having a single CSS file for your application means that a

change to the external file will affect the entire system
WITHOUT needing to visit each individual HTML page
In fact, you have no choice as this is how the product is delivered
<head>
<link rel="stylesheet" type="text/css" href="../cm/myStyle.css">
</head>
16 - 24
References
Colors - http://www.visibone.com/colorlab/big.html
CSS - http://www.blooberry.com/indexdot/css/
Easy Google Search is dot css"
16 - 25
16
Javascript
Just The Basics
Another HTML Attribute

The addition of the id attribute allows JavaScript to easily
reference HTML elements
<tr>
<td style=background-color:red;><input type="text id=name ></td>
</tr>
<tr>
<td>
<select id=state >
</select>
</td>
</tr>
</table>
16 - 27
Basic Javascript Events

Javascript is an event-driven language
This means that something needs to happen in order to trigger a process
When using a browser, you are triggering MANY events every second
with even the smallest use
Some of the basic events are:
onMouseOver
onMouseOut
onLoad
onChange
onClick
onKeyPress
onBlur
onFocus
onUnload
16 - 28
There are more available to you. The most

common ones you will use normally are
onLoad and onClick
A Basic JavaScript Function - 1

A very basic JavaScript function that takes a date and converts it to
local (User) format
Note, this is not a great example because, if you capture an element that's
defined as a date (in its schema or on the field meta-data), this function is
automatically applied)
<head>
<script type=text/javascript>
function initialLoad() {
var inDate = document.getElementById(inDate).innerText;
document.getElementById(date).innerText = oraConvertToLocalDate(inDate);
}
</script>
</head>
16 - 29
oraConvertToLocalDate() is a JavaScript
function that is made available through the
UI Map Framework
A Basic Javascript Function - 2

The <body> element triggers the processing of the
initialLoad function by use of the onLoad event
The end result is the population of the second <span> with
a converted date
<body onLoad=initialLoad(); >
<span id=inDate>2007-05-01</span>
<br/>
<span id=date></span>
</body>
16 - 30
Completing Our Panel

<tr>
<td colspan="2 class=fontBold>A Quick Person</td>
</tr>
<tr>
<td style=background-color:red><input type="text></td>
</tr>
<tr>
<td>
<select>
</select>
</td>
</tr>
<tr>
<td colspan="2>
<input type=button value=Submit style=width:100% onClick=oraSubmitMap(OK) />
</td>
</tr>
</table>
16 - 31
16
User Interface (UI) Maps
HTML and XML
HTML (for formatting) + XML (for data values)

If you were to View Source on a map zone, you'd see two
logical sections
The 1st section contains the

HTML that controls how the
object is visually laid out
The 2nd section contains the XML

representation of the data
injected into the HTML (in this
example, it contains a BO)
16 - 33
The Source Of The HTML

The HTML behind a map zone can come from one of the
following sources:
The system can render the HTML at run-time using attributes in a
schema (and this can be a BO, service script or business service
schema), OR
You can set up the HTML in the meta-data by creating a user
interface map (UI map) and then tell the system to retrieve the
HTML from the meta-data
Well describe the run-time rendering first
16 - 34
Explicit Object Map Zone Type
Zone Type
Zone
Parameter
Type
Parameter
Map Zone Type
If you leave the UI map

parameter blank, the system will
render the HTML by interpreting
the BOs schema
Customer Map Zone
UI Map
Object Displayed
bo=Customer
XML Parm 1
sourceField=PER_ID targetPath=customerId
XML Parm 2
XML Parm 3
XML Parm
When you set up a map zone, you

declare
1) the type of business object thats
displayed (bo=) and
2) the name of BOs unique identifier
on the client (sourceField=)
3) where the BO's unique identifier
resides in the bos schema
(targetPath=)
You can also define where the value of sourceField

resides (you have the choice of the "global context"
or "portal context"). If you don't specify
sourceLoc=, the system looks in both places.
16 - 35
BO Attributes Control The Formatting

- Using Field Metadata The algorithm that renders the HTML at run time uses several BO schema attributes that weve already
discussed:
mapField=. If you map an element to a field, the algorithm will use the fields data type and label (e.g., date, string,
money, lookup) to construct the HTML
mdField=. If an element references the optional mdField= attribute, the algorithm uses this field instead
IndividualTaxpayer Schema
<taxpayerId mapField="PER_ID" mdField="TP_ID"/>
<name />
<email mapField="EMAILID"/>
<socialSecurityNumber />
<homePhone />
<birthDate />
This elements label and formatting will be

derived from a field called TP_ID
This elements label and formatting will be

derived from a field called EMAILID on
the CI_PER table
16 - 36

- Suppressing Elements The algorithm that renders the HTML will ignore elements
marked as either private=true or suppress=true
The base-package algorithm ignores
elements marked as suppress=true"
<taxpayerId mapField="PER_ID" mdField="TP_ID"/>
<email mapField="EMAILID"/>
<version mapField="VERSION" suppress=true" />
<perBusFlag mapfield="PER_OR_BUS_FLG" default="P" private=true" />
...
Private fields are not accessible by any

service (in fact, they wont appear in the
XML representation of the BO) and
therefore will never appear on a map
16 - 37

- Overriding Field Metadata If you have a demo and want to avoid setting up field meta data, several other attributes can be used to control
formatting
As described in the BO chapter, dataType= overrides how the element value is validated; it also controls how the
elements value is displayed
label= is used to override the label used for display
...
<creditThreshold mapField="ADHOC_CHAR_VAL"
dataType="money" label="Threshold">
<row mapChild="CI_PER_CHAR">
<CHAR_TYPE_CD is="THRHLD" />
<EFFDT default="%CurrentDate" />
</row>
</creditThreshold>
...
This method is FORBIDDEN

in released software; it is
meant for demo's
16 - 38
...
<creditThreshold mapField="ADHOC_CHAR_VAL"
mdField="THRESHOLD">
<CHAR_TYPE_CD is="THRHLD" />
</row>
</creditThreshold>
...
Both do the same thing - the right side means that youve set up a metadata
field with a type of "money" and a label of "Threshold"; this is more work up
front, but it allows for a multi-lingual and translatable application
Additional Attributes Are Sometimes Needed

Some dataTypes require additional attributes, for example:
dataType="lookup" requires lookup="LOOKUP_FIELD"
dataType="money" can optionally support currencyRef="elementName"; if currencyRef is not specified the currency
defined on the installation record is used
Again, for base-package software, the mdField is the way to go
...
<custType mapField="ADHOC_CHAR_VAL"
dataType="lookup" label="Customer Type"
lookup="CUST_TYPE_FLG" >
<CHAR_TYPE_CD is="CUSTTYPE" />
</row>
</custType>
...
Again, this method is

FORBIDDEN in released
software; it is meant for demo's
16 - 39
...
<custType mapField="ADHOC_CHAR_VAL"
mdField="CUST_TYPE" >
<CHAR_TYPE_CD is="CUSTTYPE" />
</row>
</custType>
...
Both do the same thing - the right side means that

youve set a field up front to define the lookup value
fkRef=
If the element is a foreign key to another table and you
want the FK's context menu and info string to be
displayed, you can add the attribute fkRef="FK Reference
Code"
...
<obligationId mapXML="BO_DEFN_AREA" label="Obligation" fkRef="SA" />
...
This will cause the SA's context menu and info string
to be displayed
16 - 40
Inserting Section Headers

If you place a label on a group or list element a section
header will be displayed
Everyone knows that product developers must
use an mdField= rather than label=
<header type="group" label="Individual Taxpayer"/>
<taxpayerId />
<name />
<socialSecurityNumber />
<birthDate />
<contactInformation
type="group" label="Contact Information"/>
<email />
<homePhone />
</contactInfo
The label on the group element causes the section

header to be rendered
The style
"oraSectionHeader"
formats the HTML
16 - 41
How This Works At Runtime

When the server gets a request to build a map zone:
It renders the HTML that controls the layout of the zone
This rendering is performed by an XSL thats defined on the zone type
This XSL uses attributes on the BO schema to create the appropriate
HTML to show the elements in their appropriate format
It then retrieves the identified business objects XML representation

and injects it into the rendered HTML
The "injected HTML" is then returned to the caller for presentation
The browser merges the XML elements into the

appropriate place in the HTML and the zone is ready for
display
If you click "View source" you can see both the BOs XML
and the rendered HTML
16 - 42
Team Walk Through (45 Minutes)

During this exercise, you will use the following:
Admin Zone
User Preferences Portal Preferences
Please note, your workbook has detailed instructions for

this one; we might suggest that you try to write down what
you think you'd have to do to add this zone before you
peak at the answer
16 - 43
16
Suppressing Zones Using Service Scripts
Use Service Scripts To Suppress A Zone

The query, info and map zones can be configured to call a
service script before they are displayed on a portal
This script will return a value of true (meaning to show the
zone on the portal) or false (meaning to suppress the zone
on the portal)
You'd use this feature if a zone should only be displayed if
some condition is true, for example:
Only display a display-only map zone that contains the details of a
bill if the user has broadcast a bill ID from another zone
Only display a "cancellation zone" if the state of the object that was
broadcast is "cancelled"

16 - 45

Admin Zone
Admin Script

you think you'd have to do to introduce this script before
you peek at the answer
Hint, there's a parameter on the map zone (and you don't have to
write this script the framework has one for you)
16 - 46
16
UI Maps Contain Pre-specified HTML
Some Base-Package UI Maps Are Not Generated At

Run-Time
If you need something special in your HTML (e.g., some event driven
logic or a button), you cannot use the dynamic rendering feature
described in the prior section (at least for now)
Rather, the HTML is entered by a developer and resides in the metadata, this is because some UI maps are a little more interesting than
just a list of fields
UI Map
The UI map contains the

predefined HTML (i.e., the HTML
is NOT rendered at run time)
This map zone contains buttons

these require specific HTML
(at least for 2.2)
16 - 48
Defining The HTML Rather Than Rendering It Real Time
Zone Type
Parameter
Type
Zone
Parameter
Map Zone Type
Customer Map Zone
UI Map
map=CustomerMap
Object Displayed
bo=Customer
XML Parm 1
sourceField=PER_ID targetPath=customerId
XML Parm 2
XML Parm 3
XML Parm
16 - 49
If you specify a "UI map", the

system uses the HTML defined
on the UI map rather than
rendering it real-time
UI Map Meta Data

The UI map contains the
predefined HTML (i.e., the HTML
is NOT rendered at run time)
HTML
The maps schema defines the

fields whose values are "injected"
into the map at run time
UI Map
This is HTML, it is NOT metadata that constructs HTML
Schema
<conservationProgram type="group">
<includeBO name="C1-ConservationProgram"/>
</conservationProgram>
The oraField= and oraLabel= attributes reference the

element names in the associated schema and will INHERIT
ALL OF THE ELEMENT'S FORMATTING FROM THE
RELATED SCHEMA (and this is why you don't have to
define oraType's in this UI map)
16 - 50
Notice in this example that weve

just "included" the schema of the
Conservation Program BO (so if
you change this BO, you dont have
to change the maps schema)
Runtime Logic Is Almost Identical

When the server gets a request to build a map zone that
references a UI map:
It retrieves the HTML defined for the map
It then retrieves the identified business objects XML representation
and injects it into the retrieved HTML
The "injected HTML" is then returned to the caller (e.g., the clients
browser) for presentation
The browser merges the XML elements into the

appropriate place in the HTML and the zone is ready for
display
If you click "View source" you can see both the BOs XML
and the HTML
16 - 51

Admin UI Map
Admin Zone
In this walk-thru, each team will:

Create a UI map to gain more control over how the information is
displayed in your map zone
Change your map zone to reference your UI map

you think you'd have to do to add this zone before you
peak at the answer
16 - 52
16
It's Not That Painful
You Don't Have To Write HTML From Scratch

You may have noticed on the UI map page a dashboard
zone called Generate HTML
Clicking one of these buttons will invoke the XSL that is
used to dynamically render a UI map at run time except, in
this case, it updates the UI map's HTML with the results
And you can subsequently change the HTML as desired
To take advantage of this feature:

Create a UI map and include the necessary objects in its schema
Save the UI map
Press the desired button
Creates the display-only version of
the HTML that you've been using in
this chapter
16 - 54
Creates the input / output version of

the HTML that you'll be using in the
next chapter
But It's Not A Magic Wand

After generating the HTML, you will frequently have to
update it to handle idiosyncratic JavaScript or anything
else special
16 - 55
16
HTML Fragments
HTML Fragments Allow Reuse

Let's say you have many UI maps that share a common
look (e.g., you might have many maps with OK and Cancel
buttons)
Rather than repeat the HTML / JavaScript in all of your UI
maps, you can do the following:
Create a UI map and indicate it's an HTML Fragment (rather than a
Complete HTML Document)
In this UI map, just define the common HTML / JavaScript
In your "real" UI maps, include the fragment UI map

This is a real-time include so any changes to the UI map fragment will
instantly apply to all UI maps that include it
This technique can drastically decrease redundant HTML /

JavaScript in your UI maps (and decreasing redundancy
increases maintainability)
16 - 57
16
Help Text
The Help Icon Appears When There's Help For A

Section Or A Field
If the field that's behind this section label has
Help Text (defined on Field Main), the
framework will show the help icon
If the user clicks it, the help text appears
16 - 59
Help Text Lives In The Field Meta Data

This is the HTML behind the section with the
help icon shown on the previous slide
If there's a field behind an element on a UI

map and that field has help text, the
framework will show the help icon and
present the help text if the user clicks the icon
16 - 60
We Typically Put Help On Sections Rather Than

Individual Fields
You'll notice that the help text is defined on
the section rather than the individual fields
This is a convention as you can put help
text on a field on the map and the help
icon will appear after the field's label
16 - 61
16
Populating The Dashboard
Syncing The Dashboard

The map zone type can be configured to broadcast fields
to the dashboard (so the dashboard reflect the information
displayed in the portal)
16 - 63

Update your map zone to sync the dashboard with the
global context data displayed in your map zone
16 - 64
16
Consistency
Enforcing Consistency
We ship a sample style sheet so your HTML can inherit the
look and feel from a single spot
We also ship a library of JavaScript functions to handle
things like monetary formatting, date formatting,
defaulting, etc.
It's important that your UI maps include these so users are
presented with a consistent look and feel
16 - 66
Use The Tips

The UI Map "tips" describe good ways to produce simple
HTML that looks consistent with the rest of the system
The tips are not an HTML reference
You should pursue other avenues for more sophisticated HTML
And that does NOT include asking product development to write this for
you
Another good source of HTML are the UI maps that are

supplied with the base-package
We've include many different examples just so you'd have
something to copy from
16 - 67
16
Multiple BOs On A Map
Elements From Multiple BOs On A Map

At this point, you now know how to construct a map zone
that contains a BOs elements
Next, youll learn how to construct a map zone that
contains elements from multiple BOs
During this section, well build a zone that shows a given
accounts main person and premise information
16 - 69
Service Script Refresher

Invoker
Query Zone
Web / Application Server
Query
Zone
Validate
User Parms
Service
Script
In the Query Zone chapter, you created a service

script to validate the fields entered by the user on
the query zone; you then updated your query
zones parameters to indicate this script should
be invoked to validate the input values
16 - 70
Database
Map Zone Refresher

Invoker
Map Zone
Map
Zone
1. Generate HTML
2. Retrieve XML
Business
Object
Earlier in this chapter, you created a map zone that

a) rendered HTML by interpreting a BOs schema, and
b) created an XML document containing a specific
BOs elements
16 - 71
Database
Map Zones and Service Scripts

Invoker
Map Zone
Map 1. Generate HTML

Zone 2. Retrieve XML
Service
Script
Database
Business
Object
In this section, rather than communicate directly with a

single BO, youll set up a service script to communicate
with multiple BOs; the superset of their XML
documents will be injected into the HTML that displays
elements from the BOs
16 - 72
Refresher: A Service Script Defines Its API And Its

Logic
Script
(Service)
API
(Script
Schema)
The scripts schema

defines the services
input and output
<includeBO name="Account"/>
<includeBO name="Person"/>
<includeBO name="Premise"/>
Step
Youll be using two commands:

1) Read BO
2) Move
In this example, the script will return

information about 3 BOs (that are
coincidentally named like their MOs
this is just coincidence)
And the service scripts input will be an
account ID (which is passed as one of
the Account BOs elements)
16 - 73
Team Walk Through (90 minutes)

Analyze a display UI map
Break up into teams and follow the instructions in the workbook
16 - 74
Review Questions
16 - 75
16 - 76

16-UI Maps

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

16-UI Maps

Uploaded by

Copyright:

Available Formats

16

Copyright 2009, Oracle. All rights reserved.

This section describes the various UI map features and

Copyright 2009, Oracle. All rights reserved.

Map zones contain display-only

Info zones contain grids of

We'll describe map zones in this section

Copyright 2009, Oracle. All rights reserved.

Base Package = Object Maintenance

UI maps allow your implementation to create a look

Copyright 2009, Oracle. All rights reserved.

Copyright 2009, Oracle. All rights reserved.

But Before We Start On UI Maps

Copyright 2009, Oracle. All rights reserved.

What Are the Pieces?

Copyright 2009, Oracle. All rights reserved.

The Basic Elements

Copyright 2009, Oracle. All rights reserved.

The <head> will contain CSS

The <body> will contain the

Copyright 2009, Oracle. All rights reserved.

Tables Allow For Easy Alignment

A <table> element contains rows

Copyright 2009, Oracle. All rights reserved.

HTML Elements Have Attributes

Notice how the first

Copyright 2009, Oracle. All rights reserved.

Other Elements - <input>

There are other types

Copyright 2009, Oracle. All rights reserved.

Other Elements - <class>

Here's the placeholder that

Copyright 2009, Oracle. All rights reserved.

The oraInput class has logic that retrieves a

Here's the placeholder that will

Copyright 2009, Oracle. All rights reserved.

Other Elements - <span>

For example, we have a function (oraPageTitle) that dynamically

The oraPageTitle class has logic that

Here's the placeholder that will

Copyright 2009, Oracle. All rights reserved.

Other Elements - <select>

Copyright 2009, Oracle. All rights reserved.

Dropdowns Aren't Frequently Hard-Coded

The oraSelect attribute populates the option

Copyright 2009, Oracle. All rights reserved.

Copyright 2009, Oracle. All rights reserved.

The Basic Elements

Copyright 2009, Oracle. All rights reserved.

We finished the last section

CSS will allow us to spice up

Copyright 2009, Oracle. All rights reserved.

Copyright 2009, Oracle. All rights reserved.

Extracting The CSS

Notice that this is placed in the

Copyright 2009, Oracle. All rights reserved.

The New HTML

Copyright 2009, Oracle. All rights reserved.

Application Common CSS

The <style> element may be removed from the HTML

Having a single CSS file for your application means that a

Copyright 2009, Oracle. All rights reserved.

Copyright 2009, Oracle. All rights reserved.

Just The Basics