Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf

The most comprehensive Oracle applications & technology content under one roof The most comprehensive Oracle applications & technology content under one roof

Building advanced APEX 4 user interfaces

Mark Lancaster

The most comprehensive Oracle applications & technology content under one roof

Who is Mark Lancaster?

• Database Apps Developer

– Since 1995 Oracle 7.0, Forms, Reports..

– APEX since 2007

• AUSOUG QLD Branch President

– Presenter at AUSOUG, ODTUG, OpenWorld

– Articles, Blogs and Book

• Blog: http://oracleinsights.blogspot.com

• Demo: http://apex.oracle.com/pls/otn/f?p=playpen

Agenda

Building Advanced APEX 4.0 UIs:

• Compare Ext JS and jQuery JavaScript frameworks

• Creating a Theme

• Performance tuning

The most comprehensive Oracle applications & technology content under one roof The most comprehensive Oracle applications & technology content under one roof

Compare Ext JS and jQuery JavaScript frameworks

• Core features are limited to DOM, Events, Effects, AJAX

• Other features can be added in via plugins

• Dual licensed under the MIT or GPL Version 2 licenses

• Fast, light-weight (24.1K), very popular

Ext Core

• DOM, AJAX, Events, Animations, Templating, OO mechanisms

• Other features upgrade to Ext JS

• MIT Licensed

• Fast, light-weight (29.4K), relatively unknown

• Official UI for jQuery

• Event-driven architecture and a focus on web standards, accessibility, flexible styling, and user-friendly design

• Accordion, Autocomplete, Button, Datepicker, Dialog, Progressbar, Slider, Tabs

• Skinnable CSS framework

• Support community based

• Cross-browser JS library for building rich internet applications

• Originally built as a YUI extension

• Used standalone or YUI / jQuery / Prototype extension

• GPL 3.0 license or low cost commercial license

• Commercially developed and supported

• Community 1 million developers

• Lots and lots of widgets, many AJAX enabled

Integration with other JS libraries

Sencha Touch

• Open Source License

• Light-weight

• Big community

• Well documented

• Easy to learn

• Included with APEX

• Limited UI elements

• Most functionality from 3rd party plugins (untrusted)

• Plugins not integrated

• Plugins require tweaking

• Lack of commercial support

• Integrated theme, widgets

• AJAX enabled widgets

• Designed to be extended

• Good code quality/readability

• Big community

• Well documented

• Commercial development and support

• GPL / Commercial licence

• Heavy footprint (200K) (before removing unused components)

• Larger learning curve

Summary

Best suited for application style websites

Professional desktop UI design

Integrates with jQuery and jQuery plugins

AJAX enabled widgets can be integrated using APEX plugins

Very suitable for typical APEX applications

CREATING A THEME

A Theme is

• Collections of templates that define the layout of an application

• Accommodate many UI patterns that may be needed for different kinds of applications

• Organized by type (breadcrumb, button, calendar, label, list, page, popup list of values, region, and report)

• Template classes identify the purpose of the each template within a type

• Quickly change entire look and feel of an application

Switchable at design time only

Switching Themes – some rework?

Themes can be Published • You can “publish” custom themes in APEX 3.1+

– Within Workspace by Workspace Administrator

– Whole APEX Instance by Internal Workspace Administrator

• Ensures consistency across applications

– Update as needed by re-applying theme

TIPS FOR CREATING A THEME

Tip 1 – Never edit your application templates

Build a template application and publish

Benefits:

• Version control, can release with rollback

• Self documenting UI, use cases for components

• Useful resource for new team members

Template Application Business Application Publish

Tip 2 – Build outside APEX

Page template as Static HTML

Transfer to APEX

Same with Region templates

Can include JS in templates <div id="#REGION_STATIC_ID#" class="x-panel ux-panel" #REGION_ATTRIBUTES#>

<span class="x-panel-header-text">#TITLE#</span>

</div>

<div class="x-panel-tbar" align="right">#PREVIOUS##NEXT##DELETE##COPY##CHANGE#</div>

</div>

Ext.onReady(function(){

new Ext.Panel({

allowDomMove: false,

animCollapse: false,

applyTo: '#REGION_STATIC_ID#',

autoHeight: true,

autoScroll: true,

collapsible: true,

titleCollapse: true

</script>

Tip 3 – It’s OK to fake it

Standard Report template

Add some user feedback for AJAX requests

See http://oracleinsights.blogspot.com

Tip 4 – CSS is your friend

Browser specific CSS rules <html class="x-viewport"> <body id="ext-gen3" class="ext-webkit ext-chrome x-border-layout-ct"> ... </body> </html>

Tip 5 – Error messages

Labels are easy

Error messages can get messy

Ext qTips tidies up

Tip 6 – List templates are powerful

Tip 7 - Trimming the Fat

Trimming the Fat • APEX themes have many alternatives of each template

– Too many choices leads to Developer/User confusion

– Start with minimal set, and grow

– Delete unused templates

The “hard” way

Trimming the Fat – the “easy” way • Export the theme

– Use the “splitter” utility to separate out components

– Comment out the unwanted

– Run to update

• Can be iterative!

PERFORMANCE TUNING

Page Speed

Sprites

• One image file that contains multiple states of an UI element.

• Saves space, allows reusing.

• Fewer requests to server.

APEX Ships with Adobe PSD files

Summary • Create a rich desktop styled application

easily with Ext JS

• Extend the native APEX functionality using Ext JS Widgets and Components through Plug-ins and Dynamic Actions

• Integrates well with the APEX jQuery API

Book: https://www.packtpub.com/oracle-application-express-4-0-with-ext-js/book

Blog: http://oracleinsights.blogspot.com

Demo: http://apex.oracle.com/pls/otn/f?p=playpen

Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf

Technology

Middleware Middleware Java 2 Enterprise Edition Enterprise.....

Internet2 Middleware in ? Minutes - Drinking Kool-Aid...

Internet2 Middleware and the NSF Middleware Initiative:...

Human Services Transportation Plan Lancaster County… ·.....

PH.D.-THESIS - Lancaster EPrints - Lancaster University

About the City of Lancaster - Lancaster, California

CHAPTER 2 Introduction To Middleware … and PPTs/CHAPTER 2....

Central record (Lancaster, Ky.). (Lancaster, Ky.) 1902-11...

Robot Middleware Standard “RT Middleware” Geoffrey...

Strain mapping along Al–Pb interfaces.pdf

Lancaster...

Introduction to Middleware and Web Services · PDF...

Lancaster City, Lancaster County For Lease

Introduction to software architecture - Télécom...

Middleware deﬁnitions and overvie · Middleware...

Department of Physics, Lancaster University, Lancaster, LA1....