APEX navigation concepts

APEX navigation concepts
Out of my perspective:
What was?
APEX tabs
APEX navigation tree
What is!
ExtJS navigation tree
What will come next..
Iframe tabs

APEX tabs (oneleveltab)
OnClick-Event:
Navigatethroughtabstoreachpages
Open page 2 - javascript:doSubmit('T_PAGE_2');

Advantages andDisadvantages
Advantages
Well arranged menu overview
Integrated APEX feature
You can create your own layouts through templates
APEX security mechanism can be integrated
Disadvantages
Static data
Difficult to understand the tab logic
Especially the two level tab logic
And the switch between one and two level tabs
Tab name and configuration is hard coded and can’t be changed dynamically

APEX navigation tree
OnClick-Event:
Open page 30 - f?p=65555:30:&SESSION.::

Advantages
Dynamically created through table data
Easy to use - requires just SQL knowledge
Integrated APEX feature
You can create your own layouts through templates
Disadvantages
Each click to open a child node requires a page refresh
HTML looks a bit antiquated
Limited display options

More information
http://apex-at-work.blogspot.com/2008/09/how-to-build-apex-trees.html
Includes source code examples

ExtJS navigation tree
OnClick-Event:
Open page 30 - f?p=65555:30:&SESSION.::

Advantages
Graphical interface looks much smarter (WEB 2.0)
No page refresh required
Much more display/configuration options
Detailed description inside the Ext documentation
Partial tree refresh through AJAX
Disadvantages
More complicated to integrate
Needs ExtJS, JavaScript and PL/SQL knowledge

More information
http://apex-at-work.blogspot.com/2009/06/extjs-navigation-tree.html
http://apex.oracle.com/pls/otn/f?p=65555:36
Includes an example and the source code
Includes two examples, the source code and more links about Ext trees

Iframetabs
2. Open new tab:
JavaScript function adds a new tab with page 30 inside
1. OnClick-Event:
Run JavaScript: “javascript:fnc_tabAddPage(30,’Column width in report’);”

Source code
<script type="text/javascript">
// Source code could look like this:
// add this script in the page header text
// requires the ExtJS user extension: ux.ManagedIFrame/Panel
// http://extjs.com/forum/showthread.php?t=40961
// add new page tab
function fnc_tabAddPage(v_page,v_title){ // v_page = page id and v_title = tab title
var tabs = Ext.getCmp('center'); // get center div
tabs.add({ // add tab
xtype:'iframepanel‘, // type = iframe panel
loadMask:true, // show loading mask until page is ready
title:v_title, // set page title
defaultSrc:'f?p=&APP_ID.:'+v_page+':&SESSION.::::', // set iframeurl
closeable:true, // tab can be closed
autoScroll:true// if page size becomes to large then you can scroll
}).show(); // show new tab
};
</script>

Advantages
No complete page reload is required
Prevents the reload of: North, West, East and South panel
Application usage feels much faster
You can jump between several open pages
Saves traffic
Functionality can be used with APEX and ExtJS trees
Disadvantages
Requires a user license in commercial applications

Questions or other opinions? Please send me a mail:
tobias-arnhold@hotmail.de
Or visit my blog:
http://apex-at-work.blogspot.com
Or take a look into my example application:

http://apex-at-work.blogspot.com	853
http://www.apex-at-work.com	308
http://www.apexblogs.info	85
http://www.slideshare.net	46
http://apexblogs.info	43
http://itnewscast.com	2
http://74.125.93.132	1
http://webcache.googleusercontent.com	1
http://cc.bingj.com	1
http://131.253.14.250	1

APEX navigation concepts

by TobiasArnhold

Accessibility

Categories

Upload Details

Usage Rights

10 Embeds 1,341

Statistics

APEX navigation concepts Presentation Transcript