Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf
-
Upload
insync2011 -
Category
Technology
-
view
769 -
download
0
description
Transcript of Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf
![Page 1: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/1.jpg)
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
![Page 2: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/2.jpg)
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
![Page 3: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/3.jpg)
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
![Page 4: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/4.jpg)
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
![Page 5: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/5.jpg)
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
![Page 6: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/6.jpg)
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
![Page 7: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/7.jpg)
The most comprehensive Oracle applications & technology content under one roof
![Page 8: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/8.jpg)
The most comprehensive Oracle applications & technology content under one roof
![Page 9: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/9.jpg)
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
![Page 10: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/10.jpg)
The most comprehensive Oracle applications & technology content under one roof
![Page 11: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/11.jpg)
The most comprehensive Oracle applications & technology content under one roof
Integration with other JS libraries
![Page 12: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/12.jpg)
The most comprehensive Oracle applications & technology content under one roof
Sencha Touch
![Page 13: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/13.jpg)
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
![Page 14: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/14.jpg)
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
![Page 15: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/15.jpg)
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
![Page 16: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/16.jpg)
The most comprehensive Oracle applications & technology content under one roof
Demo
![Page 17: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/17.jpg)
The most comprehensive Oracle applications & technology content under one roof
CREATING A THEME
![Page 18: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/18.jpg)
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
![Page 19: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/19.jpg)
The most comprehensive Oracle applications & technology content under one roof
Switchable at design time only
![Page 20: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/20.jpg)
The most comprehensive Oracle applications & technology content under one roof
Switching Themes – some rework?
![Page 21: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/21.jpg)
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
![Page 22: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/22.jpg)
The most comprehensive Oracle applications & technology content under one roof
TIPS FOR CREATING A THEME
![Page 23: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/23.jpg)
The most comprehensive Oracle applications & technology content under one roof
Tip 1 – Never edit your application templates
![Page 24: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/24.jpg)
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
![Page 25: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/25.jpg)
The most comprehensive Oracle applications & technology content under one roof
Tip 2 – Build outside APEX
![Page 26: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/26.jpg)
The most comprehensive Oracle applications & technology content under one roof
Page template as Static HTML
![Page 27: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/27.jpg)
The most comprehensive Oracle applications & technology content under one roof
Transfer to APEX
![Page 28: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/28.jpg)
The most comprehensive Oracle applications & technology content under one roof
Same with Region templates
![Page 29: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/29.jpg)
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>
![Page 30: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/30.jpg)
The most comprehensive Oracle applications & technology content under one roof
Tip 3 – It’s OK to fake it
![Page 31: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/31.jpg)
The most comprehensive Oracle applications & technology content under one roof
Standard Report template
![Page 32: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/32.jpg)
The most comprehensive Oracle applications & technology content under one roof
Add some user feedback for AJAX requests
![Page 33: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/33.jpg)
The most comprehensive Oracle applications & technology content under one roof
See http://oracleinsights.blogspot.com
![Page 34: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/34.jpg)
The most comprehensive Oracle applications & technology content under one roof
Tip 4 – CSS is your friend
![Page 35: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/35.jpg)
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"...>
![Page 36: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/36.jpg)
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>
![Page 37: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/37.jpg)
The most comprehensive Oracle applications & technology content under one roof
Tip 5 – Error messages
![Page 38: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/38.jpg)
The most comprehensive Oracle applications & technology content under one roof
Labels are easy
![Page 39: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/39.jpg)
The most comprehensive Oracle applications & technology content under one roof
Error messages can get messy
![Page 40: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/40.jpg)
The most comprehensive Oracle applications & technology content under one roof
Ext qTips tidies up
![Page 41: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/41.jpg)
The most comprehensive Oracle applications & technology content under one roof
Tip 6 – List templates are powerful
![Page 42: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/42.jpg)
The most comprehensive Oracle applications & technology content under one roof
![Page 43: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/43.jpg)
The most comprehensive Oracle applications & technology content under one roof
Tip 7 - Trimming the Fat
![Page 44: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/44.jpg)
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
![Page 45: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/45.jpg)
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!
![Page 46: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/46.jpg)
The most comprehensive Oracle applications & technology content under one roof
PERFORMANCE TUNING
![Page 47: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/47.jpg)
The most comprehensive Oracle applications & technology content under one roof
YSlow
![Page 48: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/48.jpg)
The most comprehensive Oracle applications & technology content under one roof
Page Speed
![Page 49: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/49.jpg)
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.
![Page 50: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/50.jpg)
The most comprehensive Oracle applications & technology content under one roof
APEX Ships with Adobe PSD files
![Page 51: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/51.jpg)
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
![Page 52: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/52.jpg)
The most comprehensive Oracle applications & technology content under one roof
Demo
![Page 53: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/53.jpg)
The most comprehensive Oracle applications & technology content under one roof
![Page 54: Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4 user interfaces.pdf](https://reader033.fdocuments.in/reader033/viewer/2022051609/546fa449b4af9f260b8b4617/html5/thumbnails/54.jpg)
The most comprehensive Oracle applications & technology content under one roof