Navigate from one Container to another in Codename One

Question

I have a Main Form with 4 containers (tabs). On the 1st container (MessagesContainer) I have MultiButtons. When I click a MultiButton I want to navigate to another container (DetailContainer). And I also want the information from the MultiButton that was pressed to be available in the DetailContainer.

This is my MultiButton:

  MultiButton mb = new MultiButton();
  mb.setTextLine1(messageContent);
  mb.setTextLine2(messageDate);
  mb.setName(messageId + "--MB");
  mb.setCheckBox(true);
  mb.setIcon(img);

  Command navigateToDetail = new Command("Detail") {
     public void actionPerformed(ActionEvent ev) {
        System.out.println("Get here!");

       //showContainer("DetailContainer", null, null);

       Component detailContainer = findDetailContainer(f);
       reloadContainer(detailContainer);

  }
};

 mb.setCommand(navigateToDetail);
 findMessagesContainer(f).addComponent(mb);

I have tried showContainer, f.show() but it doesn't work. I can't understand why something so silly as navigation is such a pain here?

How do I show the DetailContainer and send the MultiButton that was clicked values to the DetailContainer?

Answer 1

If you just want to switch to the other tab then use setSelectedIndex() on the tabs component.

However, if I understand your question correctly you want to navigate deeper which should work with the showContainer however for that you need to use EmbeddedContainer. Normally when navigating with Form's the functionality is pretty easy, we replace the entire UI. However, when you want to navigate with a Tab we have no way of knowing which section you are trying to replace. So you need to use an EmbeddedContainer and reference within it another container (not form) created via the GUI builder. You can then invoke showContainer() and give it a Component within the EmbeddedContainer hierarchy so we have a "root" to find the right parent (assuming 4 tabs you can have 4 EmbeddedContainer's so we need to know which one...).

You can avoid all this and use Container.replace() which is really what we do internally, but then you won't have the "automatic" navigation from the GUI builder.

This isn't trivial but we spent an inordinate amount of time thinking on how this can be simplified and still provide the same set of features and came up empty.