Visual Editor (Part 6)

public List iterateThroughOneLevel(Tocitem item, GridBagConstraints gbc) {
    String name = item.getText();
    String target = item.getTarget();
    if (isTopic(target)) {
        addButtToView(name, target, gbc);
        //addFieldToView(name, gbc);
    } else {
        addLabToView(name, gbc);
    }
    return item.getTocitem();
}

The method adds a link for each toc item that has a target attribute. However, the alternative is commented out. The alternative shows a text field. Let's now set things up so that both are shown. How to do this? Create a new tab in the visual pane and then show the links in one panel, with the text fields in the other.

1. In TocDataObject.getMultiViewDesc() specify that we want two panels instead of one, but send an integer along to distinguish between them:

   protected DesignMultiViewDesc[] getMultiViewDesc() {
       return new DesignMultiViewDesc[]{
           new DesignView(this, TYPE_TOOLBAR, 0),
           new DesignView(this, TYPE_TOOLBAR, 1)
       };
   }

2. Change the signature of the DesignView class and add some declarations for receiving the new integer, as shown here:

   private int type;
   private int display;
   DesignView(TocDataObject dObj, int type, int display) {
       super(dObj, "Design");
       this.type = type;
       this.display = display;
   }
   ...
   ...

3. Press Alt-Insert and choose 'Override Method'. Choose the getDisplayName() method. Then rewrite it to create two names, depending on the received integer:

   @Override
   public String getDisplayName() {
       if (display == 0) {
           return "Display";
       } else {
           return "Design";
       }
   }

4. Send the integer along, as shown below, and then receive it in the TocToolBarMVElement constructor.

   public org.netbeans.core.spi.multiview.MultiViewElement createElement() {
       TocDataObject dObj = (TocDataObject) getDataObject();
       return new TocToolBarMVElement(dObj, display);
   }

   From there, send it to the PanelFactory...

   factory = new PanelFactory(comp, dObj, display);

   ...from where you should receive it in the constructor and then send it via the PanelFactory.createInnerPanel method. From that point, now that you're in the TocPanel constructor, create a utils.setDisplay method, to set the display value in the utilities class, where you then also need a getter.

5. Now you can go back to the method with which this blog entry started and add your getDisplay() method to it, to determine what is shown on which tab:

   public List iterateThroughOneLevel(Tocitem item, GridBagConstraints gbc, SectionInnerPanel panel) {
       String name = item.getText();
       String target = item.getTarget();
       if (isTopic(target) && getDisplay() == 0) {
           addButtToView(name, target, gbc, panel);
       } else if (isTopic(target) && getDisplay() == 1) {
           addFieldToView(name, gbc, panel);
       } else {
           addLabToView(name, gbc, panel);
       }
       return item.getTocitem();
   }

   
   

Install the module again and now you have a Design and a Display view, in addition to the XML Source view:

In an earlier blog entry in this series, I showed a screenshot of tabs with the names of the top level hierarchy in the toc file. In other words, those tabs were generated on the fly, depending on whatever happens to be in the toc file. Here's the code snippet that does that:

protected DesignMultiViewDesc[] getMultiViewDesc() {
    int i = getTocitem().size();
    DesignMultiViewDesc[] desc = null;
    desc = new DesignMultiViewDesc[i];
    for (int j = 0; j < i; j++) {
        desc[j] = new DesignView(this, TYPE_TOOLBAR, j);
    }
    return desc;
}