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

http://oracleinsights.blogspot.com/

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


Pros:

• Open Source License

• Light-weight

• Big community

• Well documented

• Easy to learn

• Included with APEX

Cons:

• Limited UI elements

• Most functionality from 3rd party plugins (untrusted)

• Plugins not integrated

• Plugins require tweaking

• Lack of commercial support


Pros:

• Integrated theme, widgets

• AJAX enabled widgets

• Designed to be extended

• Good code quality/readability

• Big community

• Well documented

• Commercial development and support

Cons:

• 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


Demo


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

<div class="x-panel-header">

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

</div>

<div class="x-panel-bwrap">

<div class="x-panel-body">

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

<p>#BODY#</p>

</div>

</div>

</div>

<script type="text/javascript">

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


<input type="text" class="text_field" ...>

<select class="selectlist" ...>

<input class="datepicker hasDatepicker" ...>

<input type="text" class="popup_lov" ...>

<span class="display_only“ …>

<input type="password" class="password“ ...>

<textarea class="textarea"...>


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


YSlow


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

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















http://oracleinsights.blogspot.com/

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


Demo



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

Technology