Hiding and Showing Page Elements

A powerful UI technique is to hide and show elements to the user as needed.

Any individual elements can be hidden or shown by calling the "hide()" or "show()" methods.

But instead of hiding and showing various blocks of elements individually, in many cases it is much simpler to put them inside DIV tags, and then to hide/show entire DIVs.

Using this technique, even an entire web application can be placed on a single HTML page without requiring any navigation -- instead of navigation, just show the DIV containing the next block of input!

We have a very rudimentary application involving Name, Address, a Message and a Summary page.

The exercise in this page is to pack them in a single page MyApplication.html.

Though one may not want to pack an entire application in one page for aesthetics and/or manageability reasons, the choice is there! And this exercise will show you the capabilities available.

Note that the AutoSessionData continues to work.

Exercise:

1. Create an HTML file MyApplication.html, with the Jaxcent JavaScript include statement in it. Add four DIV elements in it, with ids "nameDiv", "addrDiv", "messageDiv" and "summaryDiv". In these DIVs, copy the HTML forms and tables from the earlier Name.html, Address.html, Message.html and Summary.html files, but not the "Reset" or "Next" buttons.
2. On all the DIVs, set the attribute style="display: none;" to start them off hidden at first.
3. After all the DIVs, add a single Reset and a single Next button.
4. Write the Java file for the HTML. In the constructor, show the "nameDiv" DIV. When connecting to the HTML file, don't forget to set the AutoSessionData!
5. Add a Reset handler as earlier.
6. Maintain a "currentPage" variable. Add a handler for the Next button. Because the user is not leaving the page, session data will not be automatically saved on the Next button. The saving must be done manually. In the handler, call the method "getAllSessionData( true )" to save the form data into the session (you can ignore the result of the method.) Then hide the current DIV being shown, and show the next DIV. If the next DIV is the summary DIV, also populate the summary table, and hide the Reset and Next buttons.
7. Similarly, add a Back button. Use the "setEnabled" method in the constructor to start it off disabled. Enable it in the Next button's handler. Hide it when the user gets to the summary. Add code to show the previous DIV, and if on the first DIV, to disable itself.