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

www.sagecomputing.com.auwww.sagecomputing.com.au

Application Express Application Express –– a a Development Environment for the Development Environment for the

MassesMasses

Penny Cookson – Managing Director

SAGE Computing ServicesSAGE Computing ServicesCustomised Oracle Training WorkshopsCustomised Oracle Training Workshopsand Consultingand Consultingwww.sagecomputing.com.auwww.sagecomputing.com.au


Why Apex?Embarking on an Apex developmentBest practicesApex development techniquesDeveloping Apex for PDAUsing Apex in Oracle XEWhat’s new in version 3.0

AgendaAgenda


Why Apex?Why Apex?Wizard driven development environmentEntirely within the Oracle databaseDeclarative approachMeta data generated HTML pagesTargeted at hosted small-medium systems developmentUses traditional skillsRapid developmentIndependent workspaceData 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?


EnvironmentsWorkspace rulesThemes and templatesInheritanceStandards

Embarking on an Apex Embarking 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

applicationsor 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 areaEach workspace can have multiple applicationsApex administrator allocates workspace managerWorkspace manager creates developers and usersObjects cannot easily be shared across workspacesUsers are not shared across workspacesIts 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 themeImport as new themeSwitch to new theme and change name to sageDelete old themeExport the application to a fileReplace all style names (t10 with sage)Replace all template names (theme_10 with sagetheme)Reimport the applicationMake any modifications to the templates and theme file


Replace Theme and Style Replace Theme and Style NamesNames


Replace Theme and Style Replace Theme and Style NamesNames


Custom filesCustom filesCreate a custom .cssand custom.jsfileLoad them into ApexReference them from your templates


Best Practices


Inheritance Inheritance –– What we wantWhat we want

STANDARD_APP

Standard Workspace

APP1

Workspace 1

Subscribe

APP2 APP3

Workspace 2

APP4

Subscribe

APP5

Workspace 3

APP6Subscribe


Inheritance Inheritance -- RealisticallyRealistically

For one WorkspaceSTANDARD_APPcontains common objects:

Navigation barsLOVsTheme / Templates

TEMPLATE_APP subscribes to the STANDARD_APP applicationCopy 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 keyGenerate using triggerApex allows for two part primary key>2 parts require hand craftingIf primary key items are enterable you will need to disable them on update


Images Images

Images can be located in /i/ Referenced using #IMAGE_PREFIX#Images can be loaded into Apex repository as a shared objectReference using #WORKSPACE_IMAGES#filenameExample: Application Logo


Page URLSPage URLS

f is a PL/SQL wrapper for wwv_flow.showf?p=App:Page:Session:Request:Debug:ClearCache:itemNames:itemValues:PrinterFriendlyDo not use hard coded APP_IDf?p=100:1:&SESSION. = WRONGf?p=&APP_ID.:1:&SESSION. = RIGHT


UI DefaultsUI Defaults

Specify normal display characteristics


UI DefaultsUI Defaults

Create for each table before building pagesSet Report sequenceSet Display As type for forms, tabular forms

and reportsSet Default ValueSet Format Masks for datesSet Labels


UI Defaults UI Defaults -- DetailDetail

Specify display characteristicsReportsFormsTabular Forms


UI Defaults UI Defaults -- LOVLOV

Named LOV created when a wizard is used to create a form for the tableLOV is named for the page that has been created e.g. P17_PARTIES_PAR_TYPEMultiple named LOV createdDo not record LOV’s in UI DefaultsCreate a named LOV for each foreign key


Page 0 Page 0

Page 0 items appear on all pagesConditionally suppress when not requiredUse for objects common to multiple pagesNavigation Task listsContact details (so they call you next time they

want some development)Copyright/Privacy text


Page 0 Page 0 –– Navigation Navigation Mechanisms Mechanisms


Page 0 Page 0 –– Navigation Navigation Mechanisms Mechanisms


Development Techniques


Query ScreensQuery Screens

Update/insert screens can be used for query onlyCreate a database function to return user role or application contextSet an application item based on the functionSet item read only display dependent on item


Query Screens Query 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


Using Using JavascriptJavascript

Client side manipulationSetting field valuesHiding/displaying fieldsDisabling fieldsStandard 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 filesIf you are over 30 get a graduate to write it – too many curly bracketsAlways steal someone else’s code if possible


Custom Custom JavascriptJavascript File File

Core.js is in application server directoryNot accessible to most developersUse for corporate level Javascript onlyCreate custom Javascript file for each workspaceLoad into the Apex repositoryReference 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 caseHTML Form Element AttributesonKeyUp="javascript:this.value = this.value.toUpperCase( );"


Disable items dependent on Disable items dependent on another itemanother item

Common routines in custom.js fileDisable 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 headerCall the enable or disable routine


Disable items dependent on Disable items dependent on 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 Like Using Ajax for Forms Like BehaviourBehaviour

Populate on change








Dependent LOV Dependent LOV

Four approachesJavascriptSelect list with Submit Popup LOVAjax


Mobile Apex


Project Progress Application Project Progress Application

Run on PDAWireless or dial in connectionStrip out template contentsMinimise typing


Increment a DateIncrement a Date

Click here to increment the Actual Start Date by 1 day


Increment a DateIncrement a DateFunction in custom Javascript filefunction 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;}}


Increment a DateIncrement a DateCall the function in the Query’s Select list


What’s new in version 3.0


Repository levelWorkspace levelExpiry timeFormatChange on first useLock account

Password ControlsPassword Controls


Define workspace sizeEmail your workspace namesView login attemptsTask list on App Builder home page

Workspace ManagementWorkspace Management


AgendaAgenda

Application Definition is under Shared

Components

Supporting Objects enhanced


AgendaAgenda


AgendaAgenda


AgendaAgenda


AgendaAgenda


AgendaAgenda


AgendaAgenda


AgendaAgenda


AgendaAgenda


AgendaAgenda


AgendaAgenda


Zero as session id on public pages



Shared Component link on each page



Date picker using default format maskImproved Web servicesPage Type displayed in Application pageAdditions to item finder (css, images)Developer toolbar has Home and Workspace Activity linksPre element item attributeDML locking with WAIT/NOWAIT

Other New FeaturesOther New Features


Thank YouFor Your Attention

[email protected]

SAGE Computing ServicesSAGE Computing ServicesCustomised Oracle Training WorkshopsCustomised Oracle Training Workshops

and Consultingand Consultingwww.sagecomputing.com.auwww.sagecomputing.com.au

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

Software

apex developmentdevelopment

past data

organisations data

individual access data

multiple users access

production environment

thedevelopment environment

major corporate applications