16 UI Maps PDF

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 Copyright © 2009, Oracle. All rights reserved.

Map Zones
Map zones contain display-only Info zones contain grids of

information about a specific information related to the object
instance of a BO along with buttons being displayed in a portal
that can initiate business processes
to change the BO
We'll describe map zones in this section…

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 customer’s business

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

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 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
The <head> will contain CSS
<html>
controls and Javascript
<head> functions
</head>
<body>
The <body> will contain the
</body>
HTML elements that are visible
</html> 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> A <table> element contains rows
<tr> and cells <td>
</tr>
</table>
</body>

HTML Elements Have Attributes
(Just Like BO Elements)
• HTML elements can also have attributes
<table border=“1” cellpadding=“7” cellspacing=“7”> Notice how the first Border is 1 pixel
<tr> row in the table
spans 2 columns
<td colspan=“2”>Heading</td>
</tr>
<tr>
The Result
Cells have 7
<td>Aaa</td> pixels of space
around the data
<td>Bbb</td>
</tr>
<tr> Cells have 7
<td>Ccc</td> pixels of space
between them
<td>Ddd</td>
</tr>
</table>

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

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> Here's the placeholder that
from the element defined in the oraLabel attribute
and formats it using the standard label style (note, will be populated with the
this element's label source is controlled by the label of the approvalProfile
object whose XML is injected into the HTML at run element at run time (based
time, e.g., it probably comes from the meta-data on the user's language)
field that's been set up to hold approval profile code)

<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> The oraInput class has logic that retrieves a Here's the placeholder that will
value from the element defined in the oraField be used to display / capture with
</body>
attribute; it also has logic that populates this the value of the description
element when the user continues element at run time
There are other classes that

you'll be exposed to

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>
Here's the placeholder that will

The oraPageTitle class has logic that be populated with the label of
retrieves the label from the field defined the C1_APPR_PROF_LBL field
in oraMdLabel attribute and formats it at run time (based on the user's
using the standard title style 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>

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>
The oraSelect attribute populates the option
</select> values. In this example, it populates them
</td> using the values of a lookup value
</tr> Lookups are just one way, you can use the
tips on the UI map for other ways to
</table>
populate the options values
</body>

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
The Basic Elements
CSS

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

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>

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 { Notice that this is placed in the
background-color: #BAD2F5; <head> HTML element
mentioned earlier
color: black;
}
.boldfont {
font-weight: bold;
}
</style>
</head>

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” >

A class attribute
<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>

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>

References
• Colors - http://www.visibone.com/colorlab/big.html
• CSS - http://www.blooberry.com/indexdot/css/
• Easy Google Search is “dot css"

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>

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 There are more available to you. The most
common ones you will use normally are
• onChange onLoad and onClick
• onClick
• onKeyPress
• onBlur
• onFocus
• onUnload

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>
oraConvertToLocalDate() is a JavaScript
</head> 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>

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
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)

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
• We’ll describe the run-time rendering first…

Explicit Object Map Zone Type
If you leave the UI map

Zone Type Zone parameter blank, the system will
render the HTML by interpreting
the BO’s schema…
Parameter
Parameter
Type When you set up a map zone, you
declare
1) the type of business object that’s
Map Zone Type Customer Map Zone
displayed (bo=) and
UI Map
2) the name of BO’s unique identifier
Object Displayed bo=‘Customer’
on the client (sourceField=)
XML Parm 1 sourceField=PER_ID targetPath=customerId
3) where the BO's unique identifier
XML Parm 2
resides in the bo’s schema
XML Parm 3
(targetPath=)
XML Parm …
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.

BO Attributes Control The Formatting
- Using Field Metadata -
• The algorithm that renders the HTML at run time uses several BO schema attributes that we’ve already
discussed:
• mapField=. If you map an element to a field, the algorithm will use the field’s 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"/> This element’s label and formatting will be
<socialSecurityNumber />
derived from a field called TP_ID
<homePhone />
<birthDate />
This element’s label and formatting will be
derived from a field called EMAILID on
the CI_PER table

- 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 won’t appear in the
XML representation of the BO) and
therefore will never appear on a map

- 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
element’s value is displayed
• label= is used to override the label used for display
IndividualTaxpayer Schema IndividualTaxpayer Schema

... ...
<creditThreshold mapField="ADHOC_CHAR_VAL" <creditThreshold mapField="ADHOC_CHAR_VAL"
dataType="money" label="Threshold"> mdField="THRESHOLD">
<row mapChild="CI_PER_CHAR"> <row mapChild="CI_PER_CHAR">
<CHAR_TYPE_CD is="THRHLD" /> <CHAR_TYPE_CD is="THRHLD" />
<EFFDT default="%CurrentDate" /> <EFFDT default="%CurrentDate" />
</row> </row>
</creditThreshold> </creditThreshold>
... ...
This method is FORBIDDEN Both do the same thing - the right side means that you’ve set up a metadata
in released software; it is field with a type of "money" and a label of "Threshold"; this is more work up
meant for demo's front, but it allows for a multi-lingual and translatable application

Additional Attributes Are Sometimes Needed
• Some dataType’s 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"
<custType mapField="ADHOC_CHAR_VAL"
dataType="lookup" label="Customer Type"
mdField="CUST_TYPE" >
lookup="CUST_TYPE_FLG" >
<row mapChild="CI_PER_CHAR">
<row mapChild="CI_PER_CHAR">
<CHAR_TYPE_CD is="CUSTTYPE" />
<CHAR_TYPE_CD is="CUSTTYPE" />
<EFFDT default="%CurrentDate" />
<EFFDT default="%CurrentDate" />
</row>
</row>
</custType>
</custType>
...
...
Again, this method is Both do the same thing - the right side means that
FORBIDDEN in released you’ve set a field up front to define the lookup value
software; it is meant for demo's

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

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
IndividualTaxpayer Schema 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

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 that’s 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 object’s 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 BO’s XML
and the rendered HTML…

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

16User Interface (UI) Maps
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"
• …


• 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
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 meta-
data, this is because some UI maps are a little more interesting than
just a list of fields
The UI map contains the

UI Map 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)

Defining The HTML Rather Than Rendering It Real Time
Zone Type Zone
If you specify a "UI map", the

Parameter system uses the HTML defined
Parameter on the UI map rather than
Type rendering it real-time…
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 …

UI Map Meta Data
The UI map contains the The map’s schema defines the

predefined HTML (i.e., the HTML fields whose values are "injected"
is NOT rendered at run time) UI Map into the map at run time
This is HTML, it is NOT meta-

HTML data that constructs HTML Schema
<conservationProgram type="group">
<includeBO name="C1-ConservationProgram"/>
</conservationProgram>
Notice in this example that we’ve

just "included" the schema of the
Conservation Program BO (so if
The oraField= and oraLabel= attributes reference the you change this BO, you don’t have
element names in the associated schema and will INHERIT to change the map’s schema)
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)

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 object’s XML representation
and injects it into the retrieved HTML
• The "injected HTML" is then returned to the caller (e.g., the client’s
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 BO’s XML
and the HTML


• 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
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 Creates the input / output version of
this chapter 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
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
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

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

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
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)

• Update your map zone to sync the dashboard with the

global context data displayed in your map zone

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

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
Multiple BO’s On A Map

Elements From Multiple BO’s On A Map
• At this point, you now know how to construct a map zone

that contains a BO’s elements
• Next, you’ll learn how to construct a map zone that
contains elements from multiple BO’s
• During this section, we’ll build a zone that shows a given
account’s main person and premise information

Service Script Refresher
Invoker Web / Application Server Database
Query Zone Query Validate Service

Zone User Parms 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
zone’s parameters to indicate this script should
be invoked to validate the input values

Map Zone Refresher
Map Zone Map 1. Generate HTML Business

Zone 2. Retrieve XML Object
Earlier in this chapter, you created a map zone that

a) rendered HTML by interpreting a BO’s schema, and
b) created an XML document containing a specific
BO’s elements

Map Zones and Service Scripts
Map Zone Map 1. Generate HTML Service Business

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

single BO, you’ll set up a service script to communicate
with multiple BO’s; the superset of their XML
documents will be injected into the HTML that displays
elements from the BO’s

Refresher: A Service Script Defines Its API And Its
Logic
Script API The script’s schema
(Service) (Script defines the service’s
Schema) input and output
<includeBO name="Account"/>
<includeBO name="Person"/>
<includeBO name="Premise"/>
You’ll be using two commands: In this example, the script will return
Step 1) Read BO information about 3 BO’s (that are
2) Move coincidentally named like their MO’s –
this is just coincidence)
And the service script’s input will be an

account ID (which is passed as one of
the Account BO’s elements)

Team Walk Through (90 minutes)
• Analyze a display UI map

• Break up into teams and follow the instructions in the workbook

Review Questions


16 UI Maps PDF

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

16 UI Maps PDF

Загружено:

Авторское право:

Доступные форматы

16 UI Maps

Copyright © 2009, Oracle. All rights reserved.

• A UI map is a meta-data object that holds the HTML that

16 - 2 Copyright © 2009, Oracle. All rights reserved.

Map zones contain display-only Info zones contain grids of

We'll describe map zones in this section…

16 - 3 Copyright © 2009, Oracle. All rights reserved.

UI maps allow your implementation to create a look

16 - 4 Copyright © 2009, Oracle. All rights reserved.

Copyright © 2009, Oracle. All rights reserved.

• The next several slides provide a brief overview of key

16 - 6 Copyright © 2009, Oracle. All rights reserved.

16 - 7 Copyright © 2009, Oracle. All rights reserved.

The Basic Elements

Copyright © 2009, Oracle. All rights reserved.

• HTML is an XML document that a web browser will

16 - 9 Copyright © 2009, Oracle. All rights reserved.

• The easy way to structure information on an HTML page is

16 - 10 Copyright © 2009, Oracle. All rights reserved.

16 - 11 Copyright © 2009, Oracle. All rights reserved.

• The <input> element is used to capture data values

There are other types

16 - 12 Copyright © 2009, Oracle. All rights reserved.

• The <class> element references functions that we supply

16 - 13 Copyright © 2009, Oracle. All rights reserved.

There are other classes that

16 - 14 Copyright © 2009, Oracle. All rights reserved.

• The <span> element is used to provide a placeholder for logic that

Here's the placeholder that will

16 - 15 Copyright © 2009, Oracle. All rights reserved.

• The <select> element is used to create a drop-down; it is

16 - 16 Copyright © 2009, Oracle. All rights reserved.

16 - 17 Copyright © 2009, Oracle. All rights reserved.

16 - 18 Copyright © 2009, Oracle. All rights reserved.

Copyright © 2009, Oracle. All rights reserved.

• We finished the last section

16 - 20 Copyright © 2009, Oracle. All rights reserved.

16 - 21 Copyright © 2009, Oracle. All rights reserved.

• As styles could be used on multiple elements, it would be good to

16 - 22 Copyright © 2009, Oracle. All rights reserved.

• The same style can now be applied to many elements easily

<table border=“0" cellpadding="7" cellspacing="7“ class=“tableStyle” >

16 - 23 Copyright © 2009, Oracle. All rights reserved.

• The <style> element may be removed from the HTML

16 - 24 Copyright © 2009, Oracle. All rights reserved.

16 - 25 Copyright © 2009, Oracle. All rights reserved.

Just The Basics

Copyright © 2009, Oracle. All rights reserved.

16 - 27 Copyright © 2009, Oracle. All rights reserved.

• Javascript is an event-driven language

16 - 28 Copyright © 2009, Oracle. All rights reserved.

• A very basic JavaScript function that takes a date and converts it to

16 - 29 Copyright © 2009, Oracle. All rights reserved.

• The <body> element triggers the processing of the

<body onLoad=“initialLoad();” >

16 - 30 Copyright © 2009, Oracle. All rights reserved.

16 - 31 Copyright © 2009, Oracle. All rights reserved.

HTML and XML

Copyright © 2009, Oracle. All rights reserved.

The 1st section contains the

The 2nd section contains the XML

16 - 33 Copyright © 2009, Oracle. All rights reserved.

16 - 34 Copyright © 2009, Oracle. All rights reserved.