APEX navigation concepts
- 1. APEX navigation conceptsOut of my perspective:What was?APEX tabsAPEX navigation treeWhat is!ExtJS navigation treeWhat will come next..Iframe tabs
- 2. APEX tabs (oneleveltab)OnClick-Event: NavigatethroughtabstoreachpagesOpen page 2 - javascript:doSubmit('T_PAGE_2');
- 3. Advantages andDisadvantagesAdvantagesWell arranged menu overviewIntegrated APEX featureYou can create your own layouts through templatesAPEX security mechanism can be integratedDisadvantagesStatic dataDifficult to understand the tab logic Especially the two level tab logicAnd the switch between one and two level tabsTab name and configuration is hard coded and can’t be changed dynamically
- 4. APEX navigation treeOnClick-Event: Open page 30 - f?p=65555:30:&SESSION.::
- 5. Advantages andDisadvantagesAdvantagesDynamically created through table dataEasy to use - requires just SQL knowledgeIntegrated APEX featureYou can create your own layouts through templatesDisadvantagesEach click to open a child node requires a page refreshHTML looks a bit antiquatedLimited display options
- 6. More informationhttp://apex-at-work.blogspot.com/2008/09/how-to-build-apex-trees.html Includes source code examples
- 7. ExtJS navigation treeOnClick-Event: Open page 30 - f?p=65555:30:&SESSION.::
- 8. Advantages andDisadvantagesAdvantagesGraphical interface looks much smarter (WEB 2.0)No page refresh requiredMuch more display/configuration optionsDetailed description inside the Ext documentationPartial tree refresh through AJAXDisadvantagesMore complicated to integrateNeeds ExtJS, JavaScript and PL/SQL knowledge
- 9. More informationhttp://apex-at-work.blogspot.com/2009/06/extjs-navigation-tree.htmlhttp://apex.oracle.com/pls/otn/f?p=65555:36 Includes an example and the source codehttp://apex.oracle.com/pls/otn/f?p=65555:38 Includes two examples, the source code and more links about Ext trees
- 10. Iframetabs2. Open new tab: JavaScript function adds a new tab with page 30 inside1. 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 titlevar tabs = Ext.getCmp('center'); // get center divtabs.add({ // add tabxtype:'iframepanel‘, // type = iframe panelloadMask:true, // show loading mask until page is readytitle:v_title, // set page titledefaultSrc:'f?p=&APP_ID.:'+v_page+':&SESSION.::::', // set iframeurlcloseable:true, // tab can be closedautoScroll:true// if page size becomes to large then you can scroll }).show(); // show new tab };</script>
- 12. Advantages andDisadvantagesAdvantagesNo complete page reload is requiredPrevents the reload of: North, West, East and South panelApplication usage feels much fasterYou can jump between several open pagesSaves trafficFunctionality can be used with APEX and ExtJS treesDisadvantagesRequires a user license in commercial applications
- 13. Questions or other opinions? Please send me a mail:[email protected] visit my blog:http://apex-at-work.blogspot.comOr take a look into my example application:http://apex.oracle.com/pls/otn/f?p=65555:1