Building advanced APEX 4      user interfaces        Mark Lancaster        The most comprehensive Oracle applications & te...
Who is Mark Lancaster?• Database Apps Developer   – Since 1995 Oracle 7.0, Forms, Reports..   – APEX since 2007• AUSOUG QL...
AgendaBuilding Advanced APEX 4.0 UIs:• Compare Ext JS and jQuery JavaScript frameworks• Creating a Theme• Performance tuni...
Compare Ext JS and jQuery  JavaScript frameworks         The most comprehensive Oracle applications & technology content u...
•   Core features are limited to DOM, Events, Effects, AJAX•   Other features can be added in via plugins•   Dual licensed...
• Official UI for jQuery• Event-driven architecture and a focus on web standards,  accessibility, flexible styling, and us...
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 standa...
The most comprehensive Oracle applications & technology content under one roof
Integration with other JS libraries             The most comprehensive Oracle applications & technology content under one ...
Sencha Touch  The most comprehensive Oracle applications & technology content under one roof
Pros:                                 Cons:• Open Source License                 • Limited UI elements• Light-weight      ...
Pros:                                 Cons:• Integrated theme, widgets           • GPL / Commercial licence• AJAX enabled ...
Summary   Best suited for application style websites   Professional desktop UI design   Integrates with jQuery and jQue...
DemoThe 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 ne...
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   – ...
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 & technolo...
Build a template application and                 publishTemplate Application    Publish                   Business Applica...
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-pan...
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 conte...
See http://oracleinsights.blogspot.com               The most comprehensive Oracle applications & technology content under...
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 ...
Browser specific CSS rules<html class="x-viewport"> <body id="ext-gen3" class="ext-webkit ext-chrome x-border-layout-ct"> ...
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 ...
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 confus...
Trimming the Fat – the “easy” way• Export the theme    – Use the “splitter” utility to separate out components    – Commen...
PERFORMANCE TUNING          The most comprehensive Oracle applications & technology content under one roof
YSlowThe 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 t...
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 ...
DemoThe 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
Upcoming SlideShare
Loading in …5
×

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

738 views

Published on

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
738
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. Building advanced APEX 4 user interfaces Mark Lancaster The most comprehensive Oracle applications & technology content under one roof
  2. 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. 3. AgendaBuilding 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. 4. Compare Ext JS and jQuery JavaScript frameworks The most comprehensive Oracle applications & technology content under one roof
  5. 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 popularExt 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. 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
  7. 7. The most comprehensive Oracle applications & technology content under one roof
  8. 8. The most comprehensive Oracle applications & technology content under one roof
  9. 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
  10. 10. The most comprehensive Oracle applications & technology content under one roof
  11. 11. Integration with other JS libraries The most comprehensive Oracle applications & technology content under one roof
  12. 12. Sencha Touch The most comprehensive Oracle applications & technology content under one roof
  13. 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. 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. 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
  16. 16. DemoThe most comprehensive Oracle applications & technology content under one roof
  17. 17. CREATING A THEME The most comprehensive Oracle applications & technology content under one roof
  18. 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. 19. Switchable at design time only The most comprehensive Oracle applications & technology content under one roof
  20. 20. Switching Themes – some rework? The most comprehensive Oracle applications & technology content under one roof
  21. 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. 22. TIPS FOR CREATING A THEME The most comprehensive Oracle applications & technology content under one roof
  23. 23. Tip 1 – Never edit your application templates The most comprehensive Oracle applications & technology content under one roof
  24. 24. Build a template application and publishTemplate Application Publish Business ApplicationBenefits:• 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. 25. Tip 2 – Build outside APEX The most comprehensive Oracle applications & technology content under one roof
  26. 26. Page template as Static HTML The most comprehensive Oracle applications & technology content under one roof
  27. 27. Transfer to APEX The most comprehensive Oracle applications & technology content under one roof
  28. 28. Same with Region templates The most comprehensive Oracle applications & technology content under one roof
  29. 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. 30. Tip 3 – It’s OK to fake it The most comprehensive Oracle applications & technology content under one roof
  31. 31. Standard Report template The most comprehensive Oracle applications & technology content under one roof
  32. 32. Add some user feedback for AJAX requests The most comprehensive Oracle applications & technology content under one roof
  33. 33. See http://oracleinsights.blogspot.com The most comprehensive Oracle applications & technology content under one roof
  34. 34. Tip 4 – CSS is your friend The most comprehensive Oracle applications & technology content under one roof
  35. 35. <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
  36. 36. 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
  37. 37. Tip 5 – Error messages The most comprehensive Oracle applications & technology content under one roof
  38. 38. Labels are easy The most comprehensive Oracle applications & technology content under one roof
  39. 39. Error messages can get messy The most comprehensive Oracle applications & technology content under one roof
  40. 40. Ext qTips tidies up The most comprehensive Oracle applications & technology content under one roof
  41. 41. Tip 6 – List templates are powerful The most comprehensive Oracle applications & technology content under one roof
  42. 42. The most comprehensive Oracle applications & technology content under one roof
  43. 43. Tip 7 - Trimming the Fat The most comprehensive Oracle applications & technology content under one roof
  44. 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 templatesThe “hard” way The most comprehensive Oracle applications & technology content under one roof
  45. 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. 46. PERFORMANCE TUNING The most comprehensive Oracle applications & technology content under one roof
  47. 47. YSlowThe most comprehensive Oracle applications & technology content under one roof
  48. 48. Page Speed The most comprehensive Oracle applications & technology content under one roof
  49. 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. 50. APEX Ships with Adobe PSD files The most comprehensive Oracle applications & technology content under one roof
  51. 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 APIBook: https://www.packtpub.com/oracle-application-express-4-0-with-ext-js/bookBlog: http://oracleinsights.blogspot.comDemo: http://apex.oracle.com/pls/otn/f?p=playpen The most comprehensive Oracle applications & technology content under one roof
  52. 52. DemoThe most comprehensive Oracle applications & technology content under one roof
  53. 53. The most comprehensive Oracle applications & technology content under one roof
  54. 54. The most comprehensive Oracle applications & technology content under one roof

×