APEX navigation concepts

10,819 views

Published on

Describes old and new navigations concepts for Oracle APEX

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

APEX navigation concepts

  1. 1. APEX navigation concepts<br />Out of my perspective:<br />What was?<br />APEX tabs<br />APEX navigation tree<br />What is!<br />ExtJS navigation tree<br />What will come next..<br />Iframe tabs <br />
  2. 2. APEX tabs (oneleveltab)<br />OnClick-Event: <br />Navigatethroughtabstoreachpages<br />Open page 2 - javascript:doSubmit(&apos;T_PAGE_2&apos;);<br />
  3. 3. Advantages andDisadvantages<br />Advantages<br />Well arranged menu overview<br />Integrated APEX feature<br />You can create your own layouts through templates<br />APEX security mechanism can be integrated<br />Disadvantages<br />Static data<br />Difficult to understand the tab logic <br />Especially the two level tab logic<br />And the switch between one and two level tabs<br />Tab name and configuration is hard coded and can’t be changed dynamically<br />
  4. 4. APEX navigation tree<br />OnClick-Event: <br />Open page 30 - f?p=65555:30:&SESSION.::<br />
  5. 5. Advantages andDisadvantages<br />Advantages<br />Dynamically created through table data<br />Easy to use - requires just SQL knowledge<br />Integrated APEX feature<br />You can create your own layouts through templates<br />Disadvantages<br />Each click to open a child node requires a page refresh<br />HTML looks a bit antiquated<br />Limited display options<br />
  6. 6. More information<br />http://apex-at-work.blogspot.com/2008/09/how-to-build-apex-trees.html<br /> Includes source code examples<br />
  7. 7. ExtJS navigation tree<br />OnClick-Event: <br />Open page 30 - f?p=65555:30:&SESSION.::<br />
  8. 8. Advantages andDisadvantages<br />Advantages<br />Graphical interface looks much smarter (WEB 2.0)<br />No page refresh required<br />Much more display/configuration options<br />Detailed description inside the Ext documentation<br />Partial tree refresh through AJAX<br />Disadvantages<br />More complicated to integrate<br />Needs ExtJS, JavaScript and PL/SQL knowledge<br />
  9. 9. More information<br />http://apex-at-work.blogspot.com/2009/06/extjs-navigation-tree.html<br />http://apex.oracle.com/pls/otn/f?p=65555:36<br /> Includes an example and the source code<br />http://apex.oracle.com/pls/otn/f?p=65555:38<br /> Includes two examples, the source code and more links about Ext trees<br />
  10. 10. Iframetabs<br />2. Open new tab:<br /> JavaScript function adds a new tab with page 30 inside<br />1. OnClick-Event: <br /> Run JavaScript: “javascript:fnc_tabAddPage(30,’Column width in report’);”<br />
  11. 11. Source code<br />&lt;script type=&quot;text/javascript&quot;&gt;<br />// Source code could look like this:<br />// add this script in the page header text<br /> // requires the ExtJS user extension: ux.ManagedIFrame/Panel <br /> // http://extjs.com/forum/showthread.php?t=40961<br /> // add new page tab<br /> function fnc_tabAddPage(v_page,v_title){ // v_page = page id and v_title = tab title<br />var tabs = Ext.getCmp(&apos;center&apos;); // get center div<br />tabs.add({ // add tab<br />xtype:&apos;iframepanel‘, // type = iframe panel<br />loadMask:true, // show loading mask until page is ready<br />title:v_title, // set page title<br />defaultSrc:&apos;f?p=&APP_ID.:&apos;+v_page+&apos;:&SESSION.::::&apos;, // set iframeurl<br />closeable:true, // tab can be closed<br />autoScroll:true// if page size becomes to large then you can scroll<br /> }).show(); // show new tab<br /> };<br />&lt;/script&gt;<br />
  12. 12. Advantages andDisadvantages<br />Advantages<br />No complete page reload is required<br />Prevents the reload of: North, West, East and South panel<br />Application usage feels much faster<br />You can jump between several open pages<br />Saves traffic<br />Functionality can be used with APEX and ExtJS trees<br />Disadvantages<br />Requires a user license in commercial applications<br />
  13. 13. Questions or other opinions? Please send me a mail:<br />tobias-arnhold@hotmail.de<br />Or visit my blog:<br />http://apex-at-work.blogspot.com<br />Or take a look into my example application:<br />http://apex.oracle.com/pls/otn/f?p=65555:1<br />

×