Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf
1. Building advanced APEX 4
user interfaces
Mark Lancaster
The most comprehensive Oracle applications & technology content under one roof
2. 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
3. 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
4. Compare Ext JS and jQuery
JavaScript frameworks
The most comprehensive Oracle applications & technology content under one roof
5. • 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
6. • 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
9. • 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
11. Integration with other JS libraries
The most comprehensive Oracle applications & technology content under one roof
12. Sencha Touch
The most comprehensive Oracle applications & technology content under one roof
13. 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
The most comprehensive Oracle applications & technology content under one roof
14. 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
The most comprehensive Oracle applications & technology content under one roof
15. 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
17. CREATING A THEME
The most comprehensive Oracle applications & technology content under one roof
18. 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
19. Switchable at design time only
The most comprehensive Oracle applications & technology content under one roof
20. Switching Themes – some rework?
The most comprehensive Oracle applications & technology content under one roof
21. 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
22. TIPS FOR CREATING A THEME
The most comprehensive Oracle applications & technology content under one roof
23. Tip 1 – Never edit your application
templates
The most comprehensive Oracle applications & technology content under one roof
24. 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
The most comprehensive Oracle applications & technology content under one roof
25. Tip 2 – Build outside APEX
The most comprehensive Oracle applications & technology content under one roof
26. Page template as Static HTML
The most comprehensive Oracle applications & technology content under one roof
27. Transfer to APEX
The most comprehensive Oracle applications & technology content under one roof
28. Same with Region templates
The most comprehensive Oracle applications & technology content under one roof
29. 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
30. Tip 3 – It’s OK to fake it
The most comprehensive Oracle applications & technology content under one roof
31. Standard Report template
The most comprehensive Oracle applications & technology content under one roof
32. Add some user feedback for AJAX
requests
The most comprehensive Oracle applications & technology content under one roof
43. Tip 7 - Trimming the Fat
The most comprehensive Oracle applications & technology content under one roof
44. 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
45. 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
46. PERFORMANCE TUNING
The most comprehensive Oracle applications & technology content under one roof
48. Page Speed
The most comprehensive Oracle applications & technology content under one roof
49. 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
50. APEX Ships with Adobe PSD files
The most comprehensive Oracle applications & technology content under one roof
51. 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