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 (one level tab)

OnClick-Event: Navigate through tabs to reach pages Open page 2 - javascript:doSubmit('T_PAGE_2');

Advantages and Disadvantages
 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 and Disadvantages
 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 and Disadvantages
 Advantages  Graphical interface looks much smarter (WEB 2.0)

No page refresh required
Detailed description inside the Ext documentation

 Much more display/configuration options

 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 http://apex.oracle.com/pls/otn/f?p=65555:38 Includes two examples, the source code and more links about Ext trees

Iframe tabs

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 iframe url closeable:true, // tab can be closed autoScroll:true // if page size becomes to large then you can scroll }).show(); // show new tab }; </script>

Advantages and Disadvantages
 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.oracle.com/pls/otn/f?p=65555:1

Sign up to vote on this title
UsefulNot useful