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

 Technology

 31 views
of 54

Please download to get full document.

View again

All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Description
1. Building advanced APEX 4 user interfaces Mark Lancaster The most comprehensive Oracle applications & technology content under one roof 2. Who is Mark Lancaster?ã…
Share
Transcript
  • 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. 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. 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 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. • 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. The most comprehensive Oracle applications & technology content under one roof
  • 8. 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
  • 10. 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
  • 16. DemoThe 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 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. 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
  • 33. See http://oracleinsights.blogspot.com The most comprehensive Oracle applications & technology content under one roof
  • 34. Tip 4 – CSS is your friend The most comprehensive Oracle applications & technology content under one roof
  • 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. 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. Tip 5 – Error messages The most comprehensive Oracle applications & technology content under one roof
  • 38. Labels are easy The most comprehensive Oracle applications & technology content under one roof
  • 39. Error messages can get messy The most comprehensive Oracle applications & technology content under one roof
  • 40. Ext qTips tidies up The most comprehensive Oracle applications & technology content under one roof
  • 41. Tip 6 – List templates are powerful The most comprehensive Oracle applications & technology content under one roof
  • 42. 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 templatesThe “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
  • 47. YSlowThe 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 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. DemoThe most comprehensive Oracle applications & technology content under one roof
  • 53. The most comprehensive Oracle applications & technology content under one roof
  • 54. The most comprehensive Oracle applications & technology content under one roof
  • Related Search
    We Need Your Support
    Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

    Thanks to everyone for your continued support.

    No, Thanks