Morten,
Thanks for the reply. I have tried that approach. The problem with this
is that it only validates components on the active tab. Components on
the other tabs will not be validated. I would like to validate all
components on all tabs when I pres the 'Submit' button.
Regards,
Win Pe
________________________________
From: Morten Egelund Rasmussen [mailto:MER_at_Brunata.dk]
Sent: Friday, 17 August 2007 3:57 PM
To: dev_at_woodstock.dev.java.net
Cc: Pe, Win {PI}
Subject: RE: Tabset and validation
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
<
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/
<
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