The document discusses different navigation concepts in APEX including APEX tabs, the APEX navigation tree, ExtJS navigation tree, and iframe tabs. APEX tabs provide a well-arranged menu overview but have static data and hard-coded configurations. The APEX navigation tree is dynamically created through table data but requires a page refresh with each click. The ExtJS navigation tree has enhanced graphical interfaces and functionality but is more complicated to integrate. Iframe tabs prevent full page reloads, saving traffic, and allow jumping between open pages using JavaScript.

1. 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

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

3. 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

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

5. Advantages andDisadvantages 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

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

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

8. Advantages andDisadvantages 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

9. 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

10. 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’);”

11. 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>

12. Advantages andDisadvantages 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

13. 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