Application Express - A web development environment for the masses - and for serious application development

www.sagecomputing.com.auwww.sagecomputing.com.au
Application ExpressApplication Express –– aa
Development Environment for theDevelopment Environment for the
MassesMasses
Penny Cookson – Managing Director
SAGE Computing ServicesSAGE Computing Services
Customised Oracle Training WorkshopsCustomised Oracle Training Workshops
and Consultingand Consulting

Why Apex?
Embarking on an Apex development
Best practices
Apex development techniques
Developing Apex for PDA
Using Apex in Oracle XE
What’s new in version 3.0
AgendaAgenda

Why Apex?Why Apex?
Wizard driven development environment
Entirely within the Oracle database
Declarative approach
Meta data generated HTML pages
Targeted at hosted small-medium
systems development
Uses traditional skills
Rapid development
Independent workspace
Data where it belongs

Its easy (but not so easy you’ll lose your job)
Its fast (so quote fixed price not T and M)
It uses your existing skills (and you thought you
were obsolete)
You don’t have to learn Java (So you can have a
life)
It looks quite reasonable (How would I know, I’m
a developer)
You don’t need to buy App Server (So you can
afford a life)
Why Apex?Why Apex?

Environments
Workspace rules
Themes and templates
Inheritance
Standards
Embarking on an ApexEmbarking on an Apex
DevelopmentDevelopment
or maybe just dive in and build it

EnvironmentsEnvironments
Do we need a development
environment?
Should we just build in production?
What controls should we have in place?
Should we (can we?) enforce standards
on developers

Single User ApplicationsSingle User Applications
Used by one
individual
Access data for
which a single
individual is the
custodian
Tables will be
created
specifically to
support the
application
No references
or links to data
used in
corporate
applicationsDeveloped
using products
such as MS
Access in the
past
Consider
development in
production
environment
Enforce
minimum
controls

Multi User ApplicationsMulti User Applications
Used by
multiple users
Access data
which is used by
major corporate
applications
or which is of
critical
importance to the
organisation
Sufficient controls
to ensure the
integrity of the
organisation’s data
and processing
Developed
using products
such as Oracle
Forms in the
past
Data may contain
references or links
to data used in
corporate
applications
System development
methodology similar
to that used for the
development of
significant
applications
Separate
development
environment

WorkspacesWorkspaces
Create a workspace for each business area
Each workspace can have multiple
applications
Apex administrator allocates workspace
manager
Workspace manager creates developers and
users
Objects cannot easily be shared across
workspaces
Users are not shared across workspaces
Its all mine, no-one else can mess with it

Themes and TemplatesThemes and Templates
Organisation theme files/images in file system
Developers have no access and cannot apply
their poor artistic skills to it
Templates reference custom theme
files/images in Apex repository
Developers have access

Setting up ThemesSetting up Themes
Copy the
theme
directory that
most closely
matches your
requirements

Replace all theme names in theme_V2.css

Create STANDARD_APP based on the Theme that
most closely matches your requirements (theme_10
in the example)
Export theme
Import as new theme
Switch to new theme and change name to sage
Delete old theme
Export the application to a file
Replace all style names (t10 with sage)
Replace all template names (theme_10 with
sagetheme)
Reimport the application
Make any modifications to the templates and theme
file

Replace Theme and StyleReplace Theme and Style
NamesNames

Custom filesCustom files
Create a
custom .css
and custom.js
file
Load them into
Apex
Reference
them from
your templates

Best Practices

InheritanceInheritance –– What we wantWhat we want
STANDARD_APP
Standard Workspace
APP1
Workspace 1
Subscribe
APP2 APP3
Workspace 2
APP4
Subscribe
APP5
Workspace 3
APP6
Subscribe

InheritanceInheritance -- RealisticallyRealistically
For one Workspace
STANDARD_APP
contains common objects:
Navigation bars
LOVs
Theme / Templates
TEMPLATE_APP
subscribes to the
STANDARD_APP
application
Copy TEMPLATE_APP to
create new applications
STANDARD_APP
TEMPLATE_APP
Subscribe
APP1
Copy
Subscribe

Backup/Change ControlBackup/Change Control
Take an export of your application at regular
intervals (because the dba won’t replace the
whole database for a developer)
Use Lock Page when working on a page
Page 2 can
only be
changed by
ADMIN

Page LockingPage Locking
When logged on as DEV1 only Cancel
button displayed

Primary KeysPrimary Keys
Use artificial column as primary key
Generate using trigger
Apex allows for two part primary key
>2 parts require hand crafting
If primary key items are enterable you
will need to disable them on update

ImagesImages
Images can be located in /i/
Referenced using #IMAGE_PREFIX#
Images can be loaded into Apex
repository as a shared object
Reference using
#WORKSPACE_IMAGES#filename
Example: Application Logo

Page URLSPage URLS
f is a PL/SQL wrapper for wwv_flow.show
f?p=App:Page:Session:Request:Debug:C
learCache:itemNames:itemValues:
PrinterFriendly
Do not use hard coded APP_ID
f?p=100:1:&SESSION. = WRONG
f?p=&APP_ID.:1:&SESSION. = RIGHT

UI DefaultsUI Defaults
Specify normal display characteristics

UI DefaultsUI Defaults
Create for each table before building
pages
Set Report sequence
Set Display As type for forms, tabular forms
and reports
Set Default Value
Set Format Masks for dates
Set Labels

UI DefaultsUI Defaults -- DetailDetail
Specify
display
characteristics
Reports
Forms
Tabular Forms

UI DefaultsUI Defaults -- LOVLOV
Named LOV created when a wizard is
used to create a form for the table
LOV is named for the page that has been
created e.g. P17_PARTIES_PAR_TYPE
Multiple named LOV created
Do not record LOV’s in UI Defaults
Create a named LOV for each foreign key

Page 0Page 0
Page 0 items appear on all pages
Conditionally suppress when not required
Use for objects common to multiple
pages
Navigation
Task lists
Contact details (so they call you next time they
want some development)
Copyright/Privacy text

Page 0Page 0 –– NavigationNavigation
MechanismsMechanisms

Development Techniques

Query ScreensQuery Screens
Update/insert screens can be used for
query only
Create a database function to return user
role or application context
Set an application item based on the
function
Set item read only display dependent on
item

Query ScreensQuery Screens -- StepsSteps
Create database function to determine
privilege

Populate item using function from an
Application Level Process
Create Application level item

Set item properties

Make buttons conditional

UsingUsing JavascriptJavascript
Client side manipulation
Setting field values
Hiding/displaying fields
Disabling fields
Standard routines in:
/i/javascript/core.js, /i/javascript/functions.js,
/i/javascript/htmldb_data.js,
/i/javascript/htmldb_html_elements.js,
/i/javascript/htmldb_objectlist.js,
/i/javascript/htmldb_validate.js, /i/javascript/htmldb_xml.js
Can upload / include custom files
If you are over 30 get a graduate to write it – too many
curly brackets
Always steal someone else’s code if possible

CustomCustom JavascriptJavascript FileFile
Core.js is in application server directory
Not accessible to most developers
Use for corporate level Javascript only
Create custom Javascript file for each
workspace
Load into the Apex repository
Reference in the templates
<script
src="#WORKSPACE_IMAGES#custom.js"
type="text/javascript">

Set an Item from a CheckboxSet an Item from a Checkbox
Function in custom Javascript file
function setRequestDate(flag,request)
{
if(document.getElementById(flag).checked == true)
{
document.getElementById(request).value = getCurDate();
}
else
{
document.getElementById(request).value = "";
}
}

Set an Item from a CheckboxSet an Item from a Checkbox
Call the function in the Query’s
Select list

JavascriptJavascript -- ExampleExample
Convert field values to upper case
HTML Form Element Attributes
onKeyUp="javascript:this.value =
this.value.toUpperCase( );"

Disable items dependent onDisable items dependent on
another itemanother item
Common routines in custom.js file
Disable or enable items
function disableFormItems(item1,item2,item3,item4,item5,item6,item7,item8,item9,item10)
{
for(var i=1;i<10;i++){
if (arguments[i]){
disItem = document.getElementById(arguments[i]);
disItem.style.background = '#cccccc';
disItem.disabled = true; }}}
function enableFormItems(item1,item2,item3,item4,item5,item6,item7,item8,item9,item10)
{
for(var i=1;i<10;i++){
if (arguments[i]){
disItem = document.getElementById(arguments[i]);
disItem.style.background = '#ffffff';
disItem.disabled = false; }}}

Page specific routine in page header
Call the enable or disable routine

another item typeanother item type
Call routine
from the
item on
which the
others are
dependent

Call from item
onChange="javascript:setIndividualOrganisation
(document.getElementById('P3_PAR_TYPE').value);"
Call from Region Footer to initialise display
of items

Custom LOVCustom LOV
<script language="JavaScript">
function passBack(passVal1)
{
var returnTo = document.getElementById('P58_RETURN_ITEM').value ;
opener.document.getElementById(returnTo).value = passVal1;
opener.document.getElementById(returnTo).focus();
close(); }
</script>
<script language="JavaScript" type="text/javascript">
function callpartylov (returnTo,partyId) {
var partyVal = document.getElementById(partyId).value;
var url;
url = 'f?p=&APP_ID.:58:&SESSION_ID.:::58:P58_RETURN_ITEM,P58_NO_CHANGE,P58_PAR_ID:‘
+returnTo+',Y,'+partyVal;
w = open(url,"winLov","Scrollbars=1,resizable=1,width=850,height=600,top=40, left=40");
if (w.opener == null)
w.opener = self;
w.focus(); }
</script>
<a href="javascript:callpartylov('P34_VEQ_RESPONSIBLE_PAR_ID','P34_VEQ_RESPONSIBLE_PAR_ID');">
<IMG SRC="/i/list_gray.gif" width="13" height="13" alt="Popup Lov" alt="List" border="0" align="bottom"></a>
Display LOV icon
Call LOV popup
Return selected value

Using Ajax for Forms LikeUsing Ajax for Forms Like
BehaviourBehaviour
Populate on
change

Using Ajax for Forms LikeUsing Ajax for Forms Like
BehaviourBehaviour

Dependent LOVDependent LOV
Four approaches
Javascript
Select list with Submit
Popup LOV
Ajax

Mobile Apex

Project Progress ApplicationProject Progress Application
Run on PDA
Wireless or dial in
connection
Strip out template
contents
Minimise typing

Increment a DateIncrement a Date
Click here to
increment the
Actual Start
Date by 1 day

Function in custom Javascript file
function incRequestDate(request) {
var dateStr = document.getElementById(request).value;
if (dateStr != "") {
var dayStr = dateStr.substr(0,2);
var monthStr = dateStr.substr(3,3);
var yearStr = dateStr.substr(7,4);
if (yearStr.substr(0,2) != "20" )
{yearStr2 = "20" + yearStr;}
else {yearStr2 = yearStr;}
var incDateStr = monthStr + " " + dayStr + "," + yearStr2;
var d = new Date(incDateStr);
var n = d.getTime()+86400000;
var d1 = new Date(n);
var monthname=new Array
("JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC");
var newDateStr = d1.getDate()+"-"+monthname[d1.getMonth()]+"-"+d1.getYear();
document.getElementById(request).value = newDateStr;}
}

Call the function in the Query’s Select
list

What’s new in version 3.0

Repository level
Workspace level
Expiry time
Format
Change on first use
Lock account
Password ControlsPassword Controls

Define workspace size
Email your workspace names
View login attempts
Task list on App Builder home page
Workspace ManagementWorkspace Management

AgendaAgenda
Application Definition
is under Shared
Components
Supporting Objects
enhanced

AgendaAgenda

Zero as
session id on
public pages

Shared Component link
on each page

Date picker using default format mask
Improved Web services
Page Type displayed in Application
page
Additions to item finder (css, images)
Developer toolbar has Home and
Workspace Activity links
Pre element item attribute
DML locking with WAIT/NOWAIT
Other New FeaturesOther New Features

Thank You
For Your Attention
Enquiries@sagecomputing.com.au
SAGE Computing ServicesSAGE Computing Services
Customised Oracle Training WorkshopsCustomised Oracle Training Workshops
and Consultingand Consulting

Application Express - A web development environment for the masses - and for serious application development

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (12)

Ähnlich wie Application Express - A web development environment for the masses - and for serious application development

Ähnlich wie Application Express - A web development environment for the masses - and for serious application development (20)

Mehr von Sage Computing Services

Mehr von Sage Computing Services (17)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Application Express - A web development environment for the masses - and for serious application development