Hi again!
In order to be able to cycle through a tabset without forcing validation, you add the "immediate" property to each tab in the tabSet. I.e.:
<webuijsf:tabSet>
<webuijsf:tab immediate="true" text="Details">
Name, age, sex, etc....
</webuijsf:tab>
<webuijsf:tab immediate="true" text="Address">
Address fields go here...
</webuijsf:tab>
<!-- TODO: Add more tabs here -->
</webuijsf:tabSet>
In addition, you put a "Submit" button on the page with a regular action method. As long as you don't put the "immediate" property on the button, it will trigger form validation. You might consider placing the validation error messages outsite the tabSet, since the user cannot not see them if it's on a tab in the background (not currently selected).
Hope you get it to work.
Cheers,
~Morten :-)
>>> Win.Pe_at_pepsico.com.au 17-08-2007 01:53 >>>
Hi All,
I have posted the below to Netbean forums and Chris Kutler has suggested me to post our conversation to the Woodstock community.
First Question was
-----------------------------
I had a question regarding the usage of tabset for managing record with a large set of information. I would like to use the tabset to solve the problem and can you let me know if it is an appropriate way to use the tabset. An example of what I would like to do is
Main form
--------------
Employee Id
Employee status
Etc a the top
Tab set underneath above attributes
(part of the form)
Tab 1
-------
Employee details such as name, age, sex etc
Tab 2
-------
Employee address details
Tab 3
--------
Table with list of past job history
Tab 4, Tab 5
-----------------
Others,
Underneath the tab set, I will have command buttons. Save, Cancel, etc.
You got my point!!!
It would be nice way of managing the user interface with tabs as information is logically group together. Additionally, I would like to set required and other validation checks etc on attributes on all tab sets. The run time behaviour I am expecting is
- User should be able to jump from one tab to another without going through validation cycle.
- When user 'save' the record by pressing the Save button, all validations would be enforced regardless of whether they are on active tab or not.
The problem I am facing is unless fields are on the active tab set, they are not going through the validation cycle. I am not sure I did something wrong or don't know what I need to do. Is there a way to design the above layout and set up validations? Another problem is, when I switch from one tab to another, the active (source) tab is going through the validation process. I don't want that as validation should be triggered only by Save button action.
What's your thoughts on this? I have done research on tutorials, blog, etc. However, tabsets were not mentioned to manage for this kind of situation. I could use third party javascript/css tabs to organise it.
But I would like to use the VWP tabset/tabs. I stumble into an example in Apache myFaces. Example is
http://www.irian.at/myfaces/tabbedPane.jsf
(client side tab switching). Is that similar to what I can do with VWP component? Appreciated your reply.
My follow up was (work around)
--------------------------------------------
I found some kind of way around this using third party java script. I
thought you might be interested. Here is step by step what I have done
- Download tab pane components from WebFX into project
directory\download.
http://webfx.eae.net/
- copy tab.css, tab.webfx.css and tab.winclassic.css to web\stylesheets
directory.
- copy tabpane.js to web\stylesheets directory.
- copy luna directory to web\stylesheets directory.
- drop a script and link components under advanced in palette to the
page.
- set the url property of link to /stylesheets/tab.webfx.css.
- set the url property of script to /stylesheets/tabpane.js.
- add
<div class="tab-pane" id="tab-pane-1">
<div class="tab-page">
<h2 class="tab">General</h2>
...... here is the components under tab 1
</div>
<div class="tab-page">
<h2 class="tab">Privacy</h2>
...... here is the components under tab 2
</div>
</div>
<script type="text/javascript">
setupAllTabs();
</script>
Now components are organised through tab. All validations are working as
I would like to.
Hopefully, in the future, Woodstock would incorporate this.
Regards,
Win Pe
THIS ELECTRONIC MAIL MESSAGE AND ITS CONTENTS ARE INTENDED ONLY FOR THE USE OF THE ADDRESSED RECIPIENT(S) AND MAY CONTAIN INFORMATION THAT IS PRIVILEGED, CONFIDENTIAL, AND EXEMPT FROM DISCLOSURE UNDER APPLICABLE LAW. IF YOU ARE NOT AN INTENDED RECIPIENT, OR THE AGENT RESPONSIBLE FOR DELIVERING THIS EMAIL TO THE INTENDED RECIPIENT(S), YOU ARE HEREBY NOTIFIED THAT ANY USE, DISSEMINATION, DISTRIBUTION, OR COPYING OF THIS COMMUNICATION IS STRICTLY PROHIBITED AND MAY BE UNLAWFUL. IF YOU RECEIVED THIS EMAIL IN ERROR, PLEASE NOTIFY THE SENDER IMMEDIATELY BY REPLYING TO THIS EMAIL OR BY TELEPHONE, AND DELETE THE EMAIL SENT IN ERROR