GWT：重新加载选项卡面板中的单个选项卡

Question

我有一个 GWT 选项卡面板，并且希望在另一个选项卡中发生某个事件（例如按钮单击）时重新加载单个选项卡。有没有办法做到这一点？ 另一种可能性是在选择该选项卡时执行一些代码（例如，向选项卡添加新元素）。 任何帮助将不胜感激，我已经坚持了一段时间。

为了让问题更具体，我在下面提供了一些代码。

我将代码组织在屏幕中，有一个启动选项卡面板的主屏幕。每个选项卡的启动都有单独的屏幕。

主屏幕的简化代码：

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

我要从中启动重新加载的选项卡屏幕的代码：

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

必须重新加载的标签屏幕代码：

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

    public ProfileTabScreen()    {      

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

让我们想象一下，当在 groupTab 中单击 newGroupButton 时，我只想更改 profileTab 中标签的文本（而实际上它将是 ListBox 和其他元素）。

正如我所说，每次选择时重新加载整个 profileTab 也是可以接受的。

Answer 1

肮脏的答案是在主屏幕上构建您要更新的标签并将其传递给您的两个选项卡，如下所示：

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

更漂亮的解决方案是在您的类之间使用事件总线来触发和检测事件更改。见How to use the GWT EventBus

Answer 2

对于按钮单击，您可以使用鼠标或按键侦听器。在标签面板中添加这样一个监听器，让它调用一个函数，我们称之为“重建”。

重建功能应该能够访问您想要更新和重新计算值的选项卡中的元素。

感谢代码示例。如果主屏幕有它自己的类，你应该在初始化它之前定义它使用的元素。只是一个简单的例子：

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

优点是您实现的每个 Handler 都可以直接访问特定元素，这意味着您可以访问元素或重置它们。

您还应该在 TabsScreen-Elements 中添加 Getter 和 setter，以便您可以访问例如标签。

例如，您可以在 createNewGroup() 函数中执行此操作：

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