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.

Answer 1

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

Answer 2

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");