GWT: Reloading a single tab in a tab panel

Question

I have a GWT tab panel and would like to reload a single tab when a certain event (e.g. button click) happens in another tab. Is there a way to do that? Another possibility would be executing some code (e.g. adding a new element to a tab) when that tab is selected. Any help would be really appreciated, I am stuck with this for a while already.

To make the question more specific I am providing some code below.

I have my code organized in screens, there is a home screen that initiates the tab panel. And there are separate screens for initiation of each tab.

The simplified code for the home screen:

    public class HomeScreen extends Composite{

  public HomeScreen()    {

    TabPanel tabPanel = new TabPanel();
    FlowPanel flowpanel;

    flowpanel = new FlowPanel();
    ProfileTabScreen profileTabScreen = new ProfileTabScreen();
    flowpanel.add(profileTabScreen);
    tabPanel.add(flowpanel, "Profile");

    flowpanel = new FlowPanel();
    GroupsTabScreen groupsTabScreen = new GroupsTabScreen();
    flowpanel.add(groupsTabScreen);
    tabPanel.add(flowpanel, "Groups");

    initWidget(tabPanel);
  }
    }

Code for the tab screen from which I want to initiate the reload:

    private VerticalPanel groupPanel = new VerticalPanel();
private Button newGroupButton = new Button("New group");

    public GroupsTabScreen()    {       

    newGroupButton.addClickHandler(new ClickHandler(){
        public void onClick(ClickEvent event) { 
            createNewGroup();
        }
    });

            groupPanel.add(newGroupButton);

    initWidget(groupPanel);
}

Code for the tab screen that has to be reloaded:

    private VerticalPanel profilePanel = new VerticalPanel();
private Label label = new Label("No groups yet.");

    public ProfileTabScreen()    {      

            profilePanel.add(label);
    initWidget(profilePanel);
}

So let's imagine I just want to change text of a label in profileTab (while in reality it will be ListBox and other elements), when the newGroupButton is clicked in groupTab.

As I said, reloading the whole profileTab each time is is selected would be acceptable as well.

Corsair · Answer 1 · 2012-06-06T10:37:06.823

For the Button Click you could use a mouse or a key listener. Add such a listener to the tab panel and let it call a function, let us call it "rebuild".

The rebuild function should be able to access the elements in the tab you wan to update and recalculate the values.

Thanks for the code example. If the home screen has it's own class, you should define the elements used by it already before you initialize it. Just a quick example:

public class HomeScreen extends Composite{

    private TabPanel tabPanel;
    private FlowPanel profileTabScreenPanel;
    private FlowPanel groupsTabScreenPanel;

    public HomeScreen()    {         

        tabPanel = new TabPanel();

        profileTabScreenPanel = new FlowPanel();
        ProfileTabScreen profileTabScreen = new ProfileTabScreen();
        profileTabScreenPanel.add(profileTabScreen);
        tabPanel.add(flowpanel, "Profile");

        groupsTabScreenPanel = new FlowPanel();
        GroupsTabScreen groupsTabScreen = new GroupsTabScreen();
        groupsTabScreenPanel.add(groupsTabScreen);
        tabPanel.add(flowpanel, "Groups");

        initWidget(tabPanel);
    }
}

The advantage is that every Handler you implement is able to directly access the specific elements, which means you can access the eleements or reset them.

Also you should ad Getters and setters to your TabsScreen-Elements so you cann acess a label for example.

For example you could do this in your createNewGroup()-function then:

profileTabScreenPanel.getLabel().setText("New Text");

I am not sure how to add a click listener to the tab panel and how to access elements in tabs from a tab panel. To make my question more specific I have added some simplified code of my program. — april, Jun 06 '12 at 10:17
Thanks for your reply. The idea to define elements before using them and to use getters and setters was very helpful. But I could not get it to work with the example that you have suggested: profileTabScreenPanel.getLabel().setText("New Text"); On the other hand, it worked with this: HomeScreen.getProfileTabScreen().getLabel().setText("some text"); I have added two getter methods, one in HomeScreen class and one in ProfileTabScreen class. — april, Jun 07 '12 at 19:36
My only doubt is whether it is a good practice to do it this way. Especially that now the profileTabScreen variable has to be static and I have a static method: public static HomeTabScreen getHomeTabScreen() { return homeTabScreen; } — april, Jun 07 '12 at 20:03
Every varible you use in a static function has to be static as well. The question is, do you need your getHomeTabScreen() method to be static? Also consider that you can create new instances of objects in a static method and return them to the caller. — Corsair, Jun 11 '12 at 06:18

score 0 · Answer 2 · edited May 23 '17 at 11:49

Dirty answer would be to build the Label you want to update on the Home screen and pass it to both of your tabs, like this :

public class HomeScreen extends Composite {
    public HomeScreen()    {
        TabPanel tabPanel = new TabPanel();
        FlowPanel flowpanel;
        Label labelToUpdate = new Label("No Groups yet");

        flowpanel = new FlowPanel();
        ProfileTabScreen profileTabScreen = new ProfileTabScreen(labelToUpdate);
        flowpanel.add(profileTabScreen);
        tabPanel.add(flowpanel, "Profile");

        flowpanel = new FlowPanel();
        GroupsTabScreen groupsTabScreen = new GroupsTabScreen(labelToUpdate);
        flowpanel.add(groupsTabScreen);
        tabPanel.add(flowpanel, "Groups");

        initWidget(tabPanel);
    }
}

public class GroupsTabScreen {
    private VerticalPanel groupPanel = new VerticalPanel();
    private Button newGroupButton = new Button("New group");
    private final Label labelToUpdate;

    public GroupsTabScreen(Label label)    {
         this.labelToUpdate = label;       

         newGroupButton.addClickHandler(new ClickHandler(){
              public void onClick(ClickEvent event) { 
                  createNewGroup();
                  labelToUpdate.setText("A group has been created");
              }
         });

        groupPanel.add(newGroupButton);

        initWidget(groupPanel);
     }
}

 public class ProfileTabScreen {
     private VerticalPanel profilePanel = new VerticalPanel();
     private final Label labelToUpdate;

     public ProfileTabScreen(Label label)    {      
        this.labelToUpdate = label;
        profilePanel.add(labelToUpdate);
        initWidget(profilePanel);
     }
 }

Prettier solution would be to use an event bus between your classes, to fire and detect event changes. See How to use the GWT EventBus

thanks jonas, I think event bus could be a solution to this problem as well! — april, Jun 07 '12 at 19:44

GWT: Reloading a single tab in a tab panel

2 Answers2