Geertjan's Blog

  • December 6, 2006

Convert your TopComponent to a MultiViewElement

Geertjan Wielenga
Product Manager
A brief overview of how to convert a TopComponent to a visual page in a multiview editor. First we recognize a new file type, then we change the Open menu item to open a TopComponent instead of a data editor, and then we change the TopComponent to a multi view element.

  1. Use File Type wizard to let IDE recognize your new file type.

  2. Use Window Component wizard to create new TopComponent implementation.

  3. Create an OpenSupport class, extending OpenSupport and implementing OpenCookie and CloseCookie. Content of methods:

    public MyOpenSupport(MyDataObject.Entry entry) {
    protected CloneableTopComponent createCloneableTopComponent() {
    MyDataObject dobj = (MyDataObject)entry.getDataObject();
    MyTopComponent tc = new MyTopComponent(dobj);
    return tc;

    In the data object, replace the DataEditorSupport's addition to the CookieSet by adding the OpenSupport class to the CookieSet:

    cookies.add((Node.Cookie) new MyOpenSupport(getPrimaryEntry()));

  4. Change the TopComponent's extension class to CloneableTopComponent and receive the data object in the constructor (not doing anything with it here, but useful later). Return null in the getDefault() method.

  5. Install the module and when you double-click (or choose Open from the menu) on the file type, your TopComponent will open.

Now we'll convert the TopComponent to an element in a multiview editor.

  1. Add dependency on "Core - MultiView Windows".

  2. For each page in the multiview editor, create classes that implement MultiViewDescription and Serializable. The method createElement() returns a MultiViewElement. What you want to return here is your TopComponent, which means you must modify the TopComponent to extend JPanel and implement MultiViewElement.

  3. Repeat the last step for each page in the multiview editor.

  4. Change the createCloneableTopComponent method in the OpenSupport class to open your multiview elements (here we have two):

    protected CloneableTopComponent createCloneableTopComponent() {
    // Create an array of multiview descriptors:
    MyPanelMultiViewDescriptor main1 = new MyPanelMultiViewDescriptor();
    MyPanelMultiViewDescriptor2 main2 = new MyPanelMultiViewDescriptor2();
    MultiViewDescription[] descArry = { main1, main2 };
    // Create the multiview:
    CloneableTopComponent tc = MultiViewFactory.createCloneableMultiView(descArry, main1, null);
    return tc;

  5. Install and open the file again. Now you have a multiview editor (without a source view, currently). The second argument in MultiViewFactory.createCloneableMultiView determines which of the pages is open by default. Here it is "main1", the page defined by MyPanelMultiViewDescriptor1:

A lot more needs to be done (for example, with the above instructions you won't even be able to close the multiview editor), but the above is a start. Thanks Rich, as you can see I'm learning a lot from reviewing your document.

Join the discussion

Comments ( 7 )
  • Rich Unger Wednesday, December 6, 2006
    Nice :)
    Note that your MultiViewElement _can_ extend TopComponent, but I think stylistically it's better to make it extend JPanel. Eliminates some confusion about methods in TC that will no longer be relevant, like preferredID() and the persistence type.
    I'm not entirely sure that my sample code deals with close handlers correctly, so beware as you continue...
    I should finish up with the code tomorrow or friday.
  • Gabriele Bulfon Tuesday, December 19, 2006
    Probably there is a lot of missing code that is necessary to a beginner.
    For example, turning my TopComponent into a JPanel involves a lot of code deletion, and implementing the needed interfaces requires knoweledge about how to implement the various methods.
    But more important: the first 2 steps about running the File Type wizard and the Window wizard, will actually create an Action associated with the file open.
    This action by default has an actionPerformed that will find the TopComponent instance, open it and make it active.
    After changing the code as you suggested for the multiview, I no more have that TopComponent, because I changed it into a JPanel.
    How do I have to change the actionPerformed to let it open my multiview?
  • Gabriele Bulfon Tuesday, December 19, 2006
    Where can I find the complete source of your example? This would be much valuable!
  • Gabriele Bulfon Tuesday, December 19, 2006
    ...I forgot one...my aim would be to have my designer come up as a second view of an XML view.
    So, I would end up with the normal xml view available, and my deigner view to visually change the xml file.
    How can I easily achieve this? And once achieved, how do I get the xml structure used by the xml editor, to be able to modify it and have it reflected in the source (and vice-versa)?
  • Geertjan Tuesday, December 19, 2006
    Doesn't have to be a JPanel. You can keep the TopComponent, and then the Action will continue to work. In the NetBeans sources, you'll find contrib/manifesteditor, an example. Doesn't have everything you need, but should help.
  • uf Wednesday, September 17, 2008

    But there is nowhere shown how to synchronize FileObject, Editor panel and Visual panel. In ManifestSupport example is it not finished

  • Dushan Thursday, November 6, 2008

    Thanks for these great tech bits Geertjan! I tried this and works great but getting into trouble when trying to update the title of the TopComponent of the MultiViewElements :( any where I can get more info on this?

Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.