Creating TABs in RASD

[Domen Dolar]

You have two solutions to create tabs in RASD. Both have some pros and cons.
Each PAGE is one tab. Each tab can be represented by many blocks.

Solution 1:
In one page you prepare all tabs. And when they are prepared chosen one is visible others are hidden.
Pros:
- Actions on changing tabs on browser is faster. You have no interaction with server (only ajax calls).
Cons:
- Slower loading of the page, because all tabs should be filed with data.
- When changing data on hidden tabs can happen that the data is changed in the server meanvile. You have to use data locking that this will not happen.

Solution 2:
You divide tabs on pages. So each tab is different page. Here you don't have to hide tabs because they are not send to browser you just have to show links in hidden tabs menu.
Pros:
- Faster loading of the data
- Small chance to change old data
Cons:
- Little slower feeling when changing tabs.

Samples:

Solution 1:

Create custom tabs function where each block is its own tab. If you have more blocks in one tab it is better to take solution 2. In example blocks are named B1, B2, .... Here all blocks are on one page (default is 0).

  function myTabs(page varchar2 ) return varchar2 is
  begin
    return( '
<div id="tabs">
  <ul>
    <li><a href="#B1_DIV">Name block</a></li>
    <li><a href="#B2_DIV">Address block</a></li>
    <li><a href="#B3_DIV">Data block</a></li>
    <li><a href="#B4_DIV">Other data block</a></li>
  </ul>
</div>
' );
  end;

Create block (first on page like B0) and call tabs function in Block name.

<%= myTabs(page )%>

Add javascript into FORM_JS. Where DEMO_TABLS is the name of your program.

  $(function() {
    $( "#DEMO_TABS_DIV" ).tabs();
  });

Sample is DEMO_TABS

Solution 2:

Create custom tabs function where you have all your tabs and links. Don't forget to add blocks on different pages. In example we have 4 pages...

  function myTabs(page varchar2 ) return varchar2 is
    v_tabs varchar2(32000);
  begin
    v_tabs := '
  <ul>
    <li><a href='; if page= 1 then v_tabs := v_tabs ||'"#selected"'; else v_tabs := v_tabs ||'"#x"'; end if; v_tabs := v_tabs ||' onclick="javascript: location=encodeURI(''?page=1'');">Name block</a></li>
    <li><a href='; if page= 2 then v_tabs := v_tabs ||'"#selected"'; else v_tabs := v_tabs ||'"#x"'; end if; v_tabs := v_tabs ||' onclick="javascript: location=encodeURI(''?page=2'');" >Address block</a></li>
    <li><a href='; if page= 3 then v_tabs := v_tabs ||'"#selected"'; else v_tabs := v_tabs ||'"#x"'; end if; v_tabs := v_tabs ||' onclick="javascript: location=encodeURI(''?page=3'');" >Data block</a></li>
    <li><a href='; if page= 4 then v_tabs := v_tabs ||'"#selected"'; else v_tabs := v_tabs ||'"#x"'; end if; v_tabs := v_tabs ||' onclick="javascript: location=encodeURI(''?page=4'');" >Other data block</a></li>
  </ul>
' ;

   return v_tabs;
  end;

Call tab function in front PRE_UI BLOCK trigger on your first block in program. This will show the tabs.

htp.p('<div id="tabs">');

htp.p( myTabs(page) );

htp.p('<div id="selected">  
<script>
$(function() {    
  $( "#tabs" ).tabs({active:'||(page-1)||'});
});   
</script>     
      ');

In last presented block POST_UI you must close the tabs.

htp.p('</div></div>');

Sample is DEMO_TABS_PAGES

You can find samples on http://bit.ly/RasdNo1 in samples.