Upload
insync2011
View
770
Download
0
Embed Size (px)
DESCRIPTION
Citation preview
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
The most comprehensive Oracle applications & technology content under one roof
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
The most comprehensive Oracle applications & technology content under one roof
• 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
The most comprehensive Oracle applications & technology content under one roof
• 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
The most comprehensive Oracle applications & technology content under one roof
The most comprehensive Oracle applications & technology content under one roof
The most comprehensive Oracle applications & technology content under one roof
• 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
The most comprehensive Oracle applications & technology content under one roof
The most comprehensive Oracle applications & technology content under one roof
Integration with other JS libraries
The most comprehensive Oracle applications & technology content under one roof
Sencha Touch
The most comprehensive Oracle applications & technology content under one roof
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
The most comprehensive Oracle applications & technology content under one roof
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
The most comprehensive Oracle applications & technology content under one roof
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
The most comprehensive Oracle applications & technology content under one roof
Demo
The most comprehensive Oracle applications & technology content under one roof
CREATING A THEME
The most comprehensive Oracle applications & technology content under one roof
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
The most comprehensive Oracle applications & technology content under one roof
Switchable at design time only
The most comprehensive Oracle applications & technology content under one roof
Switching Themes – some rework?
The most comprehensive Oracle applications & technology content under one roof
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
The most comprehensive Oracle applications & technology content under one roof
TIPS FOR CREATING A THEME
The most comprehensive Oracle applications & technology content under one roof
Tip 1 – Never edit your application templates
The most comprehensive Oracle applications & technology content under one roof
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
The most comprehensive Oracle applications & technology content under one roof
Tip 2 – Build outside APEX
The most comprehensive Oracle applications & technology content under one roof
Page template as Static HTML
The most comprehensive Oracle applications & technology content under one roof
Transfer to APEX
The most comprehensive Oracle applications & technology content under one roof
Same with Region templates
The most comprehensive Oracle applications & technology content under one roof
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>
The most comprehensive Oracle applications & technology content under one roof
Tip 3 – It’s OK to fake it
The most comprehensive Oracle applications & technology content under one roof
Standard Report template
The most comprehensive Oracle applications & technology content under one roof
Add some user feedback for AJAX requests
The most comprehensive Oracle applications & technology content under one roof
See http://oracleinsights.blogspot.com
The most comprehensive Oracle applications & technology content under one roof
Tip 4 – CSS is your friend
The most comprehensive Oracle applications & technology content under one roof
<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"...>
The most comprehensive Oracle applications & technology content under one roof
Browser specific CSS rules <html class="x-viewport"> <body id="ext-gen3" class="ext-webkit ext-chrome x-border-layout-ct"> ... </body> </html>
The most comprehensive Oracle applications & technology content under one roof
Tip 5 – Error messages
The most comprehensive Oracle applications & technology content under one roof
Labels are easy
The most comprehensive Oracle applications & technology content under one roof
Error messages can get messy
The most comprehensive Oracle applications & technology content under one roof
Ext qTips tidies up
The most comprehensive Oracle applications & technology content under one roof
Tip 6 – List templates are powerful
The most comprehensive Oracle applications & technology content under one roof
The most comprehensive Oracle applications & technology content under one roof
Tip 7 - Trimming the Fat
The most comprehensive Oracle applications & technology content under one roof
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
The most comprehensive Oracle applications & technology content under one roof
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!
The most comprehensive Oracle applications & technology content under one roof
PERFORMANCE TUNING
The most comprehensive Oracle applications & technology content under one roof
YSlow
The most comprehensive Oracle applications & technology content under one roof
Page Speed
The most comprehensive Oracle applications & technology content under one roof
Sprites
• One image file that contains multiple states of an UI element.
• Saves space, allows reusing.
• Fewer requests to server.
The most comprehensive Oracle applications & technology content under one roof
APEX Ships with Adobe PSD files
The most comprehensive Oracle applications & technology content under one roof
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
The most comprehensive Oracle applications & technology content under one roof
Demo
The most comprehensive Oracle applications & technology content under one roof
The most comprehensive Oracle applications & technology content under one roof