DCreating Web 2.0 applications made easy

Oracle since v5, Forms 2.3, Case*Designer etc

Presenter at UKOUG (4x), OOW (3x), Collab (1x), ODTUG (2x), OBUG, OGH, etc..

Oracle ACE Director [DB Dev]

Co-author of Expert Oracle Application Express

What about me?

APEX 4.0 - What do you like best?

WHY ?

Declarative definition of client-side behaviour

without needing to know JavaScript

Just specify

When

Action

What

Specification 1

The application should disable the Alternate Number field until the Phone Number field is filled in.

When: Phone Number is null

Action : Disable

What : Alternate Phone

( False: Enable Alternate Phone )

Specification 2

The application should hide the List Price and Product Image if the Product Available is No.

When: Product Available = N

Action : Hide

What :

List Price

Product Image region

Opposite :

Show List Price

Show Product Image region

Specification 3

The application should have a button that allows users to increase all customers credit limit.

When: Button clicked

Action : Update credit limit

What : [none]

Specification 4

The application should set Credit Limits color according to the amount (green if < 5000, red if > 5000).

When : Credit Limit changes

Action : Change color

What : Credit Limit itself

Switch on Debug

Check the Console

Debugging

Switch on Debug

Check the Console

Use console.log(this);

Debugging

Switch on Debug

Check the Console

Use console.log(this);

Check your AJAX processes

Debugging

Downloads and executes additional code

Increases page size

Performance

Learn about HTML and the DOM

What is the DOM? Document Object Model

How your browser sees a web page

Allows access /manipulation of content

Methods Select elements

Traverse the hierarchy

Manipulate elements

Events User actions fire events in DOM

We can attach code to these events

Like triggers in the DB

Learn JavaScript (jQuery)

What is JavaScript? Well its not Java!

Client side (browser) scripting language

Allows us to make HTML applications interactive

jQuery & jQuery UI built in JavaScript libraries that make things easier

Dynamic Actions are generating JavaScript

Learn CSS

What is CSS? Cascading Style Sheets

Rules that are applied to element

Pertain to visual aspects: location, fonts, colors, etc.

Closest rule wins (almost always)

Selectors Used to target which elements rules are applied to

Common selectors include

HTML tag: input

HTML ID: #the_elements_id

Class: .the_elements_class

Pseudo-class: a:hover

Specification 5

Edit customer in popup window and reflect the changes immediately in the report.

Bu

yth

isB

oo

k

Questions

To Do List

21

Logica is a business and technology service company, employing 39,000 people. It provides business consulting, systems integration and outsourcing to clients around the world, including many of Europe's largest businesses. Logica creates value for clients by successfully integrating people, business and technology. It is committed to long term collaboration, applying insight to create innovative answers to clients business needs. Logica is listed on both the London Stock Exchange and Euronext (Amsterdam) (LSE: LOG; Euronext: LOG). More information is available at www.logica.com

Thank you

Logica | Meander 901 P.O. Box 7015 | 6801 HA Arnhem | The Netherlands | www.logica.com

Contact: Roel Hartman - Lead Technical Architect Oracle: +31 (0) 26 3765 000 M: +31 (0) 6 2954 3729 E: roel.hartman@logica.com

All slides 2011 Logica