Is there SelectedTabChangingEvent

Vaadin 6 / 7 / 8 Framework UI
1

Hi there,

SelectedTabChangeEvent is fired after the tab is changed, is there any tabchanging event so that it is fired before the selected tab is changed? Eg, the Selecting and Selected event in C# TabControl. Thanks for your time!

BR,
Xuan

2

Hi again,

I do need this event. My use case is, if user modified the content on the tab whithout saving, when the user continue browsing other tabs, I want to show a message asking if user would like to stay on the tab or discard changes and move to the next tab.

“stay on the tab” is hard, because it already moved to the newly selected tab. I need to call the method setSelectedTab to move back to the previous tab, then the SelectedTabChange event got fired again, and the message box is shown again. Even if this problem gets solved, it looks bad.

Br,
Xuan

3

It seems to be easy to revert back to the previously selected tab. I tried it
here
 (I may change the example back later).

The tab change event didn’t seem to fire when I call setSelectedTab() in the handler.

tab.addComponent(new CheckBox("OK to go ahead"));
...
    
// Handling tab changes
tabsheet.addListener(new TabSheet.SelectedTabChangeListener() {
    Component selected = tabsheet.getSelectedTab();

    public void selectedTabChange(SelectedTabChangeEvent event) {
        // Check the previous tab
        VerticalLayout tab = (VerticalLayout) selected;
        CheckBox mayChange = (CheckBox) tab.getComponent(1);
        if (!mayChange.booleanValue()) {
            // Revert the tab change
            tabsheet.setSelectedTab(selected);
            getWindow().showNotification("Must check!");
        } else {
            selected = tabsheet.getSelectedTab();
            getWindow().showNotification("Changed!");
        }
    }
});

Another and probably a nicer solution is to disable all other tabs but the current and enable them when the current tab is OK. This might be a better solution, as the enabling of the other tabs also gives user some feedback that “this step is OK and you’re good to go ahead”.

4

Hi,

First of ALL, MANY THANKs for the example! We have slightly difference in the code. My component implements the SelectedTabChangeListener. The tabsheet instance is a class variable and calls addListener(this). Then I have a selectedTabChange(SelectedTabChangeEvent event) method in the class.

I tried remove listener in the beginning of the selectedTabChange event and add it back in the end of the method, it still gets fired twice. Check the source code for setSelectedTab() in tabsheet.class. It calls the fireselectchangevent() in the middle of the method. I guess a quick way to test is change you notification type into ERROR notification where user has to click once on the ERROR.

However it look bad when user moved to another tab, in which the content is not loaded and a message box saying do you want to stay on the old tab, yes or no. It looks indeed bad. (old tab->new tab->old tab)

Disable the tabs makes things too complicated. Imaging user changes a select box, then the rest tabs get locked? I have approximately 50 controls on each tab, and 10 tabs. Oh my! How to catch the onclick event of the tabs?

BR,
Xuan

5

Ah yes, a second event is fired but it doesn’t have much effect. You can prevent it (well not prevent but block) easily with:

tabsheet.addListener(new TabSheet.SelectedTabChangeListener() {
    ...
    boolean   preventEvent = false;

    public void selectedTabChange(SelectedTabChangeEvent event) {
        if (preventEvent) {
            preventEvent = false;
            return;
        }
        ...
        if (...change is not ok...) {
            // Revert the tab change
            preventEvent = true; // Prevent secondary change event
            tabsheet.setSelectedTab(selected);
            getWindow().showNotification("Must check!");
        } else {
        ...

The two solutions both have their benefits. Disabling the tabs is more informative. Validation of a tab would either require an “OK” button inside each tab or that the components are validated immediately when changed - in your solution it’s not needed.

I don’t think the disabling tabs is much more complicated. You anyhow need validation of the tab contents, it’s just a question of how the validation is done - immediately, when clicking OK inside a tab, or when changing the tab.

6

Hi again,

Is there a third alternative, which is catching the TAB button click event? I can overwrite the TabSheet class and make my own tabSheet, but the problem is that I don’t fully understand how the tab is moved/clicked. It seems the variable is “selected” and fired by response, however I need to catch the request and decide what to do next. Can anyone give me a clue?

Both two solutions you provided has major fault, my picky end users would not accept any of these two. We are converting a existing project into Vaadin, user will complain it was working this way, how come you cannot do it with new technology as you promised faster, better and nicer, (“you” means us IT team)? I already tried solution #1, you would see how stupid the GUI is when it is waiting for you to click yes/no and move backwards. Solution #2 I will try tomorrow. Validation is not a major problem. The major problem is the GUI right now.

The reason why I was trying to tell you solution #1 fire twice is not because I don’t know how to solve it. The problem is how come even if I remove listener, it still gets fired! That is way from acceptable control. For example, in a select, if you do

cbxCustomer.removelistener(this);

// change the selected item

cbxCustomer.addlistener(this);

Do you expect the valueChange event is fired again in side the block?

BR,
Xuan

7

I can’t think of a good third solution. One solution is a kind of kludge - have two TabSheets with only the tab row visible in the upper one, and then below it a TabSheet with the tab row hidden. This way you can separate the tab logic from the view logic of the TabSheet.

How, exactly, do you get it fired again between removing and re-adding the listener?

8

Hi,

Yes, the tab change event is fired again in the block even I remove the listener. I tried to describe this behavior on the third of my post in this thread. It is weird. The combobox works fine, BTW, just use it as an example to tell the situation.

I am not near my working computer right now, so I can only tell based on my memory. I was thinking one solution so that the selected style is set by my own event, not by the tabSheet, but I need hint from someone who knows the TabSheet class well.

BR,
Xuan

9

Hi,

  2. I have
    three tabs
     and in First Tab we have one form to capture the user input.
  3. In second tab we have one
    PI CHART.


  4. My Requirement is how to pass the values from first tab to second tab
     by clicking the submit button in the 1st tab it displays the 2

    nd TAB and accepts values of 1st tab

  5. Please help me

22921.png

10

Please help me how to call one tab from another tab

11

There still doesn’t seem to be a solution to this problem?