Combining AJAX with Tab Pages for Improved Performance

1. AJAX Tab Page Example These slides walk you through the process of combining AJAX functionality with Tab Pages, in order to speed overall page loading and performance of large, complex JSP tab pages with multiple dataTables

2.  Optional Workshop – Combining AJAX With Tab Pages (To Control JSF Component Rendering) • In some large and complex pages, where you have multiple tab panels, each of which contains one or more dataTables, you may wish improve the overall page’s loading speed and performance, by using AJAX and hiding/rendering selected panel components. This workshop will show you how to create a tab page, with panels that: • Hide and render dataTables programmatically (events fired when users click a panel tab) • Use AJAX to improve dataTable and page U.I. performance

3. Optional Workshop – Combining AJAX With Tab Pages – 1 of 6 • Create a new page, named (precisely): ajaxTabPage.jsp. Using the screen capture and notes, add the following JSF components to the page: • Customize the page’s boiler-plate heading text • Add a Panels – Tabbed control. For this component, • Customize the size to be 100% of the page’s width, and 250 pixels high • From Panel List, add a third bfpanel as shown below – named Tab3 • Inside each panel, drag and drop a Panel – Group Box (they will be named: group1, group2, and group 3 successively) • Below the tab control, add: • Two Button – Command components. From the Properties view, make them: Type: Plain • A hidden input control Panel – Group Box Plain Command Buttons and Hidden Input control

4. Optional Workshop – Combining AJAX With Tab Pages – 2 of 6 • Edit the your EGL page code, and replace the boiler-plate text with the code from the slide notes. • Read the comments – note that there is little new in this logic • Ctrl/S – save your code Populate the dynamic arrays From the database Inspect a variable (that will be bound to the Hidden Input control) And use Render/Hide to programmatically Display the dataTable for the clicked tab panel

5. Optional Workshop – Combining AJAX With Tab Pages – 3 of 6 (From Page Designer) do the following: • Select a (set focus inside a ) bfpanel – (Tab1, Tab2, Tab3 – you will do one tab at a time) • (From Page Data) – drag and drop one of the customers array variables on top of the Panel Group Box inside the tab panel • For each dataTable – (Select the entire dataTable, and from All Attributes), specify a rendered property bound to one of the boolean variables (vis1, vis2, vis3). • (From Page Data) drag and drop the whichTab variable on top of the hidden input control

6. Optional Workshop – Combining AJAX With Tab Pages – 4 of 6 (From Page Designer) do the following: • Select a (set focus inside a ) bfpanel – (Tab2, Tab3 – you will do one tab at a time) • (From Quick Edit) – in the onenter event add the statements shown in the screen capture below: • Tab2: • Tab3: document.getElementById('form1:hidden1').value = "tab2"; document.getElementById('form1:button1').click(); document.getElementById('form1:hidden1').value = "tab3"; document.getElementById('form1:button2').click(); See ***Notes

7. Optional Workshop – Combining AJAX With Tab Pages – 5 of 6 • Select a (Command Button ) – (you will do one button at a time) • (From Quick Edit): • Check Use pre-defined behavior. • From Action: select Invoke Ajax behavior on the specified tag • For button1 – specify: Target: group2 • For button2 – specify: Target: group3

8. Optional Workshop – Combining AJAX With Tab Pages – 6 of 6 • Run the page on the server • Only the first dataTable will render (you can do a View Source in the HTML and see for yourself) • Click Tab2 or Tab3 • There will be a slight pause – as AJAX invokes your server side logic to render the dataTable in the clicked tab – through the onenter event