dev@woodstock.java.net

Tabset and validation

From: Pe, Win {PI} <Win.Pe_at_pepsico.com.au>
Date: Fri, 17 Aug 2007 09:53:06 +1000

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