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

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


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: Cons:
• Open Source License • Limited UI elements
• Light-weight • Most functionality from 3rd
• Big community party plugins (untrusted)
• Well documented • Plugins not integrated
• Easy to learn • Plugins require tweaking
• Included with APEX • Lack of commercial support


Pros: Cons:
• Integrated theme, widgets • GPL / Commercial licence
• AJAX enabled widgets • Heavy footprint (200K)
• Designed to be extended (before removing unused
• Good code components)
quality/readability • Larger learning curve
• Big community
• Well documented
• Commercial development
and support


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

Template Application Publish Business Application

Benefits:
• Version control, can release with rollback
• Self documenting UI, use cases for components
• Useful resource for new team members


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


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


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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

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

Similar to Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf (20)

More from InSync2011

More from InSync2011 (20)

Recently uploaded

Recently uploaded (20)

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