netbeans.apache.org/src/old_content/content/tutorials/67/nbm-multiview-api-old.adoc

// 
//     Licensed to the Apache Software Foundation (ASF) under one
//     or more contributor license agreements.  See the NOTICE file
//     distributed with this work for additional information
//     regarding copyright ownership.  The ASF licenses this file
//     to you under the Apache License, Version 2.0 (the
//     "License"); you may not use this file except in compliance
//     with the License.  You may obtain a copy of the License at
// 
//       http://www.apache.org/licenses/LICENSE-2.0
// 
//     Unless required by applicable law or agreed to in writing,
//     software distributed under the License is distributed on an
//     "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
//     KIND, either express or implied.  See the License for the
//     specific language governing permissions and limitations
//     under the License.
//

= NetBeans Multiview Editor Module Tutorial
:jbake-type: platform_tutorial
:jbake-tags: tutorials 
:jbake-status: published
:syntax: true
:source-highlighter: pygments
:toc: left
:toc-title:
:icons: font
:experimental:
:description: NetBeans Multiview Editor Module Tutorial - Apache NetBeans
:keywords: Apache NetBeans Platform, Platform Tutorials, NetBeans Multiview Editor Module Tutorial

link:mailto:dev@netbeans.apache.org?subject=Feedback:%20NetBeans%20IDE%20Multiview%20Editor%20Module%20Tutorial[Feedback]

This tutorial walks you through an implementation of the  link:https://bits.netbeans.org/dev/javadoc/org-netbeans-core-multiview/overview-summary.html[MultiView API]. A multiview displays multiple views on data in the IDE. For example, the  ``web.xml``  file can be edited in a _source_ view as well as in a _design_ view—in the former, you work with XML tags; in the latter, you use user interface components such as drop-down lists and checkboxes.

The multiview that you create in this tutorial is an editor for a subset of the data in the JBoss deployment descriptor ( ``jboss-web.xml`` ). The multiview editor that you create in this tutorial will only be visible when an XML file with the  ``jboss-web.xml``  namespace is open in the IDE's Source Editor. (However, since the JBoss deployment descriptor does not officially have a namespace, the placeholder  ``jbosstype``  is used instead.) Specifically for these files, the user will have two views for editing, as shown below.

This is the Source view:


image::images/multiview_final_pic1.png[]

And this is the Design view:


image::images/multiview_final_pic2.png[]

When a change is made in one of the views, it is immediately synchronized with the other view. So when, for example, the value of the 'Description' field above is modified in the Design view, the Source view is changed at the same time.

The following topics are covered below:

* <<installing-software,Installing the Software>>
* <<installing-sample,Installing the Sample>>
* <<setting-up-module-project,Setting Up the Module Project>>
* <<recognizing-new-file-type,Recognizing the New File Type>>
* <<creating-design-view,Creating the Design View>>
* <<creating-window-component,Creating the Window Component>>
* <<specifying-module-dependencies,Specifying the Module's Dependencies>>
* <<designing-design-view,Designing the Design View>>
* <<adding-editor-support,Adding Editor Support>>
* <<enabling-multiview-editor,Enabling the Multiview Editor>>
* <<registering-module,Registering the Module>>
* <<building-and-installing-module,Building and Installing the Module>>
* <<installing-and-using-nodule,Installing and Using the Module>>
* <<creating-shareable-module-library,Creating a Shareable Module Binary>>

Once the software is installed, this tutorial can be completed in 45 minutes.

For more information on working with modules, see the  link:https://netbeans.apache.org/platform/index.html[ NetBeans Development Project home] on the NetBeans website. If you have questions, visit the  link:http://wiki.netbeans.org/wiki/view/NetBeansDeveloperFAQ[NetBeans Developer FAQ] or use the feedback link at the top of this page.



== Installing the Software

Before you begin, you need to install the following software on your computer:

* NetBeans IDE 5.x ( link:https://netbeans.apache.org/download/index.html[download])
* Java Standard Development Kit (JDK™) version 1.4.2 ( link:https://www.oracle.com/technetwork/java/javase/downloads/index.html[download]) or 5.0 ( link:https://www.oracle.com/technetwork/java/javase/downloads/index.html[download])



=== Installing the Sample

Take the following steps to install the sample:


[start=1]
1. Unzip the  link:https://netbeans.org/files/documents/4/657/jbossVisualEditor.zip[attached file].


[start=2]
1. In the IDE, choose File > Open Project and browse to the folder that contains the unzipped file. Open the module project. It should look as follows:


image::images/multiview_projects_window_final.png[]

In the illustration above, the two selected files provide the implementation of the  link:https://bits.netbeans.org/dev/javadoc/org-netbeans-core-multiview/overview-summary.html[MultiView API].


[start=3]
1. Right-click the project node and choose Install/Reload in Target Platform. When the new instance of the IDE opens, create a new web application, right-click it, choose New > File/Folder, and select the new  ``jboss-web.xml``  file:


image::images/multiview_newfile.png[]

Click Next. Name the file whatever you like and store it in a folder of your choice. When you complete the wizard and the new file opens in the Source Editor, notice that you now have two views on your data—a Design view and a Source view:


image::images/multiview_jboss-web-xml2.png[]

Now that you know what the end result looks like, you will create the module from scratch and learn about each part while creating it.



== Setting up the Module Project

Before you start writing the module, you have to make sure you that your project is set up correctly.  link:https://netbeans.apache.org/download/index.html[NetBeans IDE 5.x] provides a wizard that sets up all the basic files needed for a module.


[start=1]
1. Choose File > New Project (Ctrl-Shift-N). Under Categories, select NetBeans Plug-in Modules. Under projects, select Module Project and click Next.


[start=2]
1. In the Name and Location panel, type  ``jbossVisualEditor``  in Project Name. Change the Project Location to any directory on your computer. Leave the Standalone Module radio button and the Set as Main Project checkbox selected. Click Next.


[start=3]
1. In the Basic Module Configuration panel, replace  ``yourorghere``  in Code Name Base with  ``org.netbeans`` , so that the whole code name base is  ``org.netbeans.jbossvisualeditor`` . Leave the display name unchanged. Do not change the location of the localizing bundle and the location of the XML layer, so that they will be stored in a package with the name  ``org/netbeans/jbossvisualeditor`` . Click Finish.

The IDE creates the  ``jbossVisualEditor``  project. The project contains all of your sources and project metadata, such as the project's Ant build script. The project opens in the IDE. You can view its logical structure in the Projects window (Ctrl-1) and its file structure in the Files window (Ctrl-2). For example, this is what the projects window should look like right now:


image::images/multiview_projects_window_zero.png[] 


== Recognizing the New File Type

Since you are making a multiview editor for JBoss deployment descriptors, you need to make sure that the IDE knows how to recognize one. In principle, the JBoss deployment descriptor is an XML file like most other XML files—it's  ``.xml``  file extension is non-distinctive. In these cases, a distinction can be made via the file's first element, its namespace, or its doctype. In this tutorial, you will distinguish JBoss deployment descriptors via their namespace.


[start=1]
1. Right-click the project node and choose New > File Type.


[start=2]
1. In the File Recognition panel, do the following:

* Type  ``text/x-jboss+xml``  in the MIME Type edit box.
* Type  ``jbosstype``  in the by XML Root Element edit box.

The File Recognition panel should now look as follows:


image::images/multiview_filewizard1.png[]

Note the following about the fields in the File Recognition panel:

* *MIME Type.* Specifies the data object's unique MIME type.

* *by Filename Extension.* Specifies one or more file extensions that the IDE will recognize as belonging to the specified MIME type. The file extension can optionally be preceded by a dot. Separators are commas, spaces, or both. Therefore, all of the following are valid:

*  ``.abc,.def`` 
*  ``.abc .def`` 
*  ``abc def`` 
*  ``abc,.def ghi, .wow`` 

Note that manifests in JAR files are "MANIFEST.MF" and can be case-sensitive (at least on Unix). For this reason, you specify _two_ MIME types in this tutorial— ``.mf``  and  ``.MF`` .

* *by XML Root Element.* Specifies a unique namespace that distinguishes the XML file type from all other XML file types. Since many XML files have the same extension ( ``xml`` ), the IDE distinguishes between XML files via their XML root elements. More specifically, the IDE can distinguish between namespaces and the first XML element in XML files. In this tutorial, the distinction will be based on an imaginary namespace,  ``jbosstype`` .

Click Next.


[start=3]
1. In the Name and Location panel, do the following:

* In Class Name Prefix, type  ``jbossdd`` .

* In Icon, browse to any 16x16 pixel image file as the new file type's icon. Several 16x16 pixel image files are found within your NetBeans installation directory, for example, in this location:

 ``enterprise2\jakarta-tomcat-5.5.7\server\webapps\admin\images.`` 

For example, you could use the  ``Datasource.gif``  image in the above directory. This is what it looks like: 
image::images/filetype_Datasource.gif[]

* In Package, change  ``org.netbeans.jbossvisualeditor``  to  ``org.netbeans.jbossvisualeditor.dataloader`` .


[start=4]
1. Click Finish.

The Projects window should now look as follows:


image::images/multiview_projects_window_first.png[]

Each of the newly generated files (highlighted above) is briefly introduced:

* * ``jbossddDataLoader.java`` .* Recognizes the  ``text/x-jboss+xml``  MIME type. Functions as a factory for the  ``DataObject`` . For more information, see  link:https://netbeans.apache.org/wiki/devfaqdataloader[What is a DataLoader?].

* * ``jbossddResolver.xml`` .* Maps the MIME type to an  ``<xml-rule>``  that restricts the  ``DataLoader``  to only recongize XML files that match the  ``<xml-rule>`` . In this tutorial, the rule specifes that only files that have  ``jbosstype``  as their namespace will be recognized by the  ``DataLoader`` .

* * ``jbossddDataObject.java`` .* Wraps a  ``FileObject`` .  ``DataObjects``  are produced by  ``DataLoaders`` . For more information, see  link:https://netbeans.apache.org/wiki/devfaqdataobject[What is a DataObject?].

* * ``jbossddDataNode.java`` .* Provides what you _see_ in the IDE—functionality like actions, icons, and localized names.

* * ``jbossddDataLoaderBeanInfo.java`` .* Controls the appearance of the  ``DataLoader``  in the Object Types section of the Options window.

* * ``jbossddTemplate.xml`` .* Provides a dummy template that the  ``layer.xml``  file registers in the New File wizard. Change the default content of this file to the following:


[source,xml]
----

<?xml version="1.0" encoding="UTF-8"?>
<jboss-web xmlns="jbosstype">
    <context-root>/hello</context-root>
    <resource-ref>
        <description>The default DS</description>
        <res-ref-name>jdbc/DefaultDS</res-ref-name>
        <res-type>javax.sql.DataSource</res-type>
        <res-auth>Container</res-auth>
    </resource-ref>
</jboss-web>
----



== Creating the Design View

The multiview editor is actually already halfdone before you begin—the _source_ view is there by default. So, all you need to do is create the _design_ view, which is built up out of components such as  ``JTextFields``  and  ``JComboBoxes`` . Components such as these are used to set values for the JBoss deployment desciptor. Creating the _design_ view is what this section is all about.


=== Creating the Window Component


[start=1]
1. Right-click the  ``jbossVisualEditor``  project node and choose New > Window Component.


[start=2]
1. In the Basic Settings panel, choose  ``editor``  from the Window Position drop-down list. This positions the Design view in the  ``editor``  mode of the IDE, where the Source Editor, containing the Source view, is also found.

Do not select the Open on Application Start checkbox, because you want the Design view to be displayed only when the JBoss deployment descriptor is open in the Source Editor, instead of whenever the IDE opens. Click Next.


[start=3]
1. In the Name and Location panel, do the following:

* In Class Name Prefix, type  ``designView`` .

* In Icon, browse to any 16x16 pixel image file as the new file type's icon.

* In Package, change  ``org.netbeans.jbossvisualeditor``  to  ``org.netbeans.jbossvisualeditor.editor`` .


[start=4]
1. Click Finish.

The Projects window should now look as follows:


image::images/multiview_projects_window_second.png[]

Each of the newly generated files (highlighted above) is briefly introduced:

* * ``designViewTopComponent.java`` .* Implements the  link:https://bits.netbeans.org/dev/javadoc/org-openide-windows/org/openide/windows/TopComponent.html[TopComponent] class.

* * ``designViewAction.java`` .* Provides an action for opening  ``designViewTopComponent.java`` .

* * ``designViewTopComponentSettings.xml`` .* Specifies...

* * ``designViewTopComponentWstcref.xml`` .* Specifies...


=== Specifying the Module's Dependencies

You will need to subclass several classes that belong to the  link:https://bits.netbeans.org/dev/javadoc/[NetBeans APIs]. Each has to be declared as a Module dependency. Use the Project Properties dialog box for this purpose.


[start=1]
1. In the Projects window, right-click the  ``jbosswebxml``  project node and choose Properties. In the Project Properties dialog box, click Libraries.

You should see that the following libraries have been declared for you by the IDE. The IDE did this when you used the New File wizard and the New Window Component wizard. Here is what you should see:


image::images/multiview_proj_props2.png[]

Now you need to add some more for the tasks that follow.


[start=2]
1. For each of the following APIs, click "Add...", select the name from the Module list, and then click OK to confirm it:

* UI Utilities API

* Core - MultiView Windows


[start=3]
1. Click OK to exit the Project Properties dialog box.


[start=4]
1. In the Projects window, expand the Important Files node, double-click the Project Metadata node, and note that the APIs you selected have been declared as Module dependencies.


=== Designing the Design View


[start=1]
1. In the  ``org.netbeans.jbossvisualeditor.editor``  package, double-click  ``designViewTopComponent.java`` . The implementation of  `` link:https://bits.netbeans.org/dev/javadoc/org-openide-windows/org/openide/windows/TopComponent.html[TopComponent]``  opens in the Design view of the Source Editor.


[start=2]
1. Drag and drop  ``JPanels`` ,  ``JLabels`` ,  ``JTextFields`` , and  ``JComboBoxes``  onto the  `` link:https://bits.netbeans.org/dev/javadoc/org-openide-windows/org/openide/windows/TopComponent.html[TopComponent]`` . Name the  ``JLabels``  however you like.

Make sure that you change the names of the  ``JTextFields``  and  ``JComboBoxes``  as follows:

*  ``JTextField: contextroot

`` 
*  ``JTextField: description

`` 
*  ``JTextField: name

`` 
*  ``JComboBox: type

`` 
*  ``JCombobox: authority`` 

You can also add bordered titles to the  ``JPanels``  and put some values in the  ``JComboBoxes`` . At the end of this subsection, your  `` link:https://bits.netbeans.org/dev/javadoc/org-openide-windows/org/openide/windows/TopComponent.html[TopComponent]``  should look something like this:


image::images/multiview_description_being_named.png[]

In the illustration above, you see that the name of one of the  ``JTextFields``  is set to  ``description`` .


=== Coding the Design View

This is where the real work begins! Till now, you have used wizards and the GUI Builder. From now until the end of this tutorial, you are entering uncharted territory—the IDE currently does not provide specific assistance for the MultiView API in the way that, for example, the  link:https://bits.netbeans.org/dev/javadoc/org-openide-windows/org/openide/windows/TopComponent.html[TopComponent] class is supported by the Window Component wizard. However, you will be shown how to use many of the Source Editor's features while building the multiview editor for the JBoss deployment descriptor. Throughout this subsection, you will be coding  ``designViewTopComponent.java``  in the Source Editor's Source view.


[start=1]
1. By default, this is the  ``designViewTopComponent.java``  class's class declaration:


[source,java]
----

final class designViewTopComponent extends  link:https://bits.netbeans.org/dev/javadoc/org-openide-windows/org/openide/windows/TopComponent.html[TopComponent] {
----

Change it to the following in the Source Editor:


[source,java]
----

final class designViewTopComponent extends CloneableTopComponent implements MultiViewElement, Serializable {
----

Red wavy lines appear under the class declaration, indicating an error. Put the cursor in the line and press Alt-Enter. The IDE suggests a solution:


image::images/multiview_alt-enter-1.png[]

Select the suggestion. Several import statements are generated for you.

Continue pressing Alt-Enter in the class declaration. Accept any suggestions the IDE gives you, such as the following:


image::images/multiview_alt-enter-2.png[]

Now you have several new methods and import statements, all required by the NetBeans APIs that you will be using later.


[start=2]
1. The red wavy lines have not disappeared, indicating that there are still errors. When you hover your mouse over the red error icon, you see the cause of the error:


image::images/multiview_alt-enter-4.png[]

To fix this, and similar errors that follow after you fix this specific error, paste the following code into  ``designViewTopComponent.java`` , right at the end after the final method:


[source,xml]
----

// <editor-fold defaultstate="collapsed" desc=" Boilerplate code ">
public void componentActivated() {
    try {
        loadData();
    } catch (SAXException ex) {
        ex.printStackTrace();
    } catch (IOException ex) {
        ex.printStackTrace();
    } catch (ParserConfigurationException ex) {
        ex.printStackTrace();
    }
}

public void componentDeactivated() {
}

public void componentShowing() {
}

public void componentHidden() {
}// </editor-fold>
----

Notice that a red wavy line appears under  ``loadData()`` . This is because you have not defined this method yet. Press Alt-Enter in this line and the IDE displays a suggestion:


image::images/multiview_alt-enter-5.png[]

Accept the suggestion. The  ``loadData()``  method is created. (Red wavy lines will still be present, but you will solve those later.) The IDE will use this method to load the values of the XML tags into the  ``JTextFields``  and  ``JComboBoxes``  in the Design view. Doing this means, in turn, using the  ``loadData()``  method to traverse the  ``Document``  object. Before going further, declare the following variables at the top of the class:


[source,java]
----

private MultiViewElementCallback callback;
private CloseOperationState cos;
private jbossddEditorSupport support;
private Node contextrootNode;
private Node descriptionNode;
private Node nameNode;
private Node typeNode;
private Node authorityNode;
private Document xmldoc;
private NodeListener listener;
private MultiDataObject.Entry entry;
----

Right-click in the IDE and choose Fix Imports (Alt-Shift-F) to let the IDE generate the required import statements. In the Fix Imports dialog box, choose  ``org.w3c.dom.Document``  and  ``org.w3c.dom.Node`` . No imports will be found for  ``jbossddEditorSupport`` , because you have not created this class yet.

Now fill out the new  ``loadData()``  method so that its content is as follows:


[source,java]
----

private void loadData() throws IOException, ParserConfigurationException, SAXException{

    jbossddEditorSupport support = (jbossddEditorSupport) entry.getDataObject().getCookie(jbossddEditorSupport.class);

    if(null != support){
        InputStream is = support.getInputStream();
        DocumentBuilder builder = DocumentBuilderFactory.newInstance().newDocumentBuilder();
        xmldoc = builder.parse(is);
        NodeList list = xmldoc.getElementsByTagName("context-root");
        if(list.getLength() > 0){
            Node current = list.item(0);
	   
	    //Set the context-root textfield with the content of the node
            contextrootNode = current.getFirstChild();
	    this.contextroot.setText(contextrootNode.getNodeValue());

            //Set the the description textfield with the content of node
            descriptionNode = xmldoc.getElementsByTagName("description").item(0).getFirstChild();
	    this.description.setText(descriptionNode.getNodeValue());

            //Set the resource reference name textfield with the content of node
            nameNode = xmldoc.getElementsByTagName("res-ref-name").item(0).getFirstChild();
	    this.name.setText(nameNode.getNodeValue());

            //Set the resource type textfield with the content of node
            typeNode = xmldoc.getElementsByTagName("res-type").item(0).getFirstChild();
	    this.type.setSelectedItem(typeNode.getNodeValue());

            //Set the resource authority textfield with the content of node
            authorityNode = xmldoc.getElementsByTagName("res-auth").item(0).getFirstChild();
            this.authority.setSelectedItem(authorityNode.getNodeValue());
        }
        is.close();
    }

}
----

New red wavy lines appear, because your code refers to  ``jbossddEditorSupport.java`` , which you have not created yet. You will do this in the <<adding-editor-support,Adding Editor Support>> section.


[start=3]
1. Next, specify what should happen when the user types values in the Design view. For each component (in the case of this tutorial, that means for each  ``JTextField``  and  ``JComboBox`` ), add a  ``KeyListener`` , as shown below. When the  ``keyReleased``  event for each component is invoked, the content of the related component is put in a specified node in the  ``Document``  object.


[source,java]
----

private void addSupport(){

    contextroot.addKeyListener(new KeyListener() {
        public void keyPressed(KeyEvent e) {
        }
        public void keyReleased(KeyEvent e) {
            contextrootNode.setNodeValue(contextroot.getText());
            ByteArrayOutputStream os = new ByteArrayOutputStream();
            try {
                XMLUtil.write(xmldoc, os, "UTF-8");
                StyledDocument doc = support.getDocument();
                doc.remove(0, doc.getLength());
                doc.insertString(0, os.toString(), null);
                os.close();

            } catch (IOException ex) {
                ex.printStackTrace();
            }catch (BadLocationException ex) {
                ex.printStackTrace();
            }
            entry.getDataObject().setModified(true);
        }
        public void keyTyped(KeyEvent e) {
        }
    });

    description.addKeyListener(new KeyListener() {
        public void keyPressed(KeyEvent e) {
        }
        public void keyReleased(KeyEvent e) {
            descriptionNode.setNodeValue(description.getText());
            ByteArrayOutputStream os = new ByteArrayOutputStream();
            try {
                XMLUtil.write(xmldoc, os, "UTF-8");
                StyledDocument doc = support.getDocument();
                doc.remove(0, doc.getLength());
                doc.insertString(0, os.toString(), null);
                os.close();

            } catch (IOException ex) {
                ex.printStackTrace();
            }catch (BadLocationException ex) {
                ex.printStackTrace();
            }
        }
        public void keyTyped(KeyEvent e) {
        }
    });

    name.addKeyListener(new KeyListener() {
        public void keyPressed(KeyEvent e) {
        }
        public void keyReleased(KeyEvent e) {
            nameNode.setNodeValue(name.getText());
            ByteArrayOutputStream os = new ByteArrayOutputStream();
            try {
                XMLUtil.write(xmldoc, os, "UTF-8");
                StyledDocument doc = support.getDocument();
                doc.remove(0, doc.getLength());
                doc.insertString(0, os.toString(), null);
                os.close();

            } catch (IOException ex) {
                ex.printStackTrace();
            }catch (BadLocationException ex) {
                ex.printStackTrace();
            }
        }
        public void keyTyped(KeyEvent e) {
        }
    });

    type.addKeyListener(new KeyListener() {
        public void keyPressed(KeyEvent e) {
        }
        public void keyReleased(KeyEvent e) {
            typeNode.setNodeValue(type.getSelectedItem().toString());
            ByteArrayOutputStream os = new ByteArrayOutputStream();
            try {
                XMLUtil.write(xmldoc, os, "UTF-8");
                StyledDocument doc = support.getDocument();
                doc.remove(0, doc.getLength());
                doc.insertString(0, os.toString(), null);
                os.close();

            } catch (IOException ex) {
                ex.printStackTrace();
            }catch (BadLocationException ex) {
                ex.printStackTrace();
            }
        }
        public void keyTyped(KeyEvent e) {
        }
    });

    authority.addKeyListener(new KeyListener() {
        public void keyPressed(KeyEvent e) {
        }
        public void keyReleased(KeyEvent e) {
            authorityNode.setNodeValue(authority.getSelectedItem().toString());
            ByteArrayOutputStream os = new ByteArrayOutputStream();
            try {
                XMLUtil.write(xmldoc, os, "UTF-8");
                StyledDocument doc = support.getDocument();
                doc.remove(0, doc.getLength());
                doc.insertString(0, os.toString(), null);
                os.close();

            } catch (IOException ex) {
                ex.printStackTrace();
            }catch (BadLocationException ex) {
                ex.printStackTrace();
            }
        }
        public void keyTyped(KeyEvent e) {
        }
    });
}
----


[start=4]
1. Somewhere in  ``designViewTopComponent.java``  the following methods are defined:


[source,java]
----

public JComponent getVisualRepresentation() {
}

public JComponent getToolbarRepresentation() {
}

public void setMultiViewCallback(MultiViewElementCallback multiViewElementCallback) {
}

public CloseOperationState canCloseElement() {
}
----

Replace these methods with the following (and then press Alt-Shift-F to fix the import statements):


[source,java]
----

public JComponent getVisualRepresentation() {
    return this;
}

public JComponent getToolbarRepresentation() {
    return new JToolBar();
}

public void setMultiViewCallback(MultiViewElementCallback multiViewElementCallback) {
    this.callback = callback;
}

public CloseOperationState canCloseElement() {
    if (entry.getDataObject().isModified()) {
        return this.cos;
    } else {
        return CloseOperationState.STATE_OK;
    }
}
----


[start=5]
1. _Below_ the existing constructor in  ``designViewTopComponent.java`` , add the following methods:


[source,java]
----

public designViewTopComponent(MultiDataObject.Entry entry, CloseOperationState cos){
    this();
    this.entry = entry;
    this.cos = cos;
    this.support = (jbossddEditorSupport) entry.getDataObject().getCookie(jbossddEditorSupport.class);
    addSupport();

    try {
        loadData();
    } catch (SAXException ex) {
        ex.printStackTrace();
    } catch (IOException ex) {
        ex.printStackTrace();
    } catch (ParserConfigurationException ex) {
        ex.printStackTrace();
    }

    init();
}
protected void updateNameAndIcon(DataObject o, org.openide.nodes.Node n) {
    String displayName = n.getDisplayName();
    if (o.isModified()) {
        setName(NbBundle.getMessage(designViewTopComponent.class, "LBL_modified_name", displayName));
    } else {
        setName(displayName);
    }
    setIcon(n.getIcon(BeanInfo.ICON_COLOR_16x16));
}

private void init(){
    final DataObject o = entry.getDataObject();
    final org.openide.nodes.Node n = o.getNodeDelegate();
    updateNameAndIcon(o, n);
    listener = new NodeAdapter() {
        public void propertyChange(PropertyChangeEvent ev) {
            String prop = ev.getPropertyName();
            if (prop == null ||
                    prop.equals(org.openide.nodes.Node.PROP_DISPLAY_NAME) ||
                    prop.equals(org.openide.nodes.Node.PROP_ICON) ||
                    prop.equals(DataObject.PROP_MODIFIED)) {
                updateNameAndIcon(o, n);
            }
        }
    };
    n.addNodeListener(NodeOp.weakNodeListener(listener, n));
    o.addPropertyChangeListener(WeakListeners.propertyChange(listener, o));
}
----


=== Adding Editor Support


[start=1]
1. Inner class:


[source,java]
----

private class DesignView implements  link:https://bits.netbeans.org/dev/javadoc/org-netbeans-core-multiview/org/netbeans/core/spi/multiview/MultiViewDescription.html[MultiViewDescription], Serializable{
    private static final long serialVersionUID = 0L;

    private  link:https://bits.netbeans.org/dev/javadoc/org-openide-loaders/org/openide/loaders/MultiDataObject.Entry.html[MultiDataObject.Entry] entry;
    private  link:https://bits.netbeans.org/dev/javadoc/org-netbeans-core-multiview/org/netbeans/core/spi/multiview/CloseOperationState.html[CloseOperationState] cos;

    public DesignView(MultiDataObject.Entry entry, CloseOperationState cos){
        this.cos = cos;
        this.entry = entry;
    }

    public int  link:https://bits.netbeans.org/dev/javadoc/org-netbeans-core-multiview/org/netbeans/core/spi/multiview/MultiViewDescription.html#getPersistenceType()[getPersistenceType()] {
        return TopComponent.PERSISTENCE_ONLY_OPENED;
    }

    public String  link:https://bits.netbeans.org/dev/javadoc/org-netbeans-core-multiview/org/netbeans/core/spi/multiview/MultiViewDescription.html[getDisplayName()] {
        return "Design";
    }

    public Image  link:https://bits.netbeans.org/dev/javadoc/org-netbeans-core-multiview/org/netbeans/core/spi/multiview/MultiViewDescription.html#getIcon()[getIcon()] {
        return entry.getDataObject().getNodeDelegate().getIcon(BeanInfo.ICON_COLOR_16x16);
    }

    public HelpCtx  link:https://bits.netbeans.org/dev/javadoc/org-netbeans-core-multiview/org/netbeans/core/spi/multiview/MultiViewDescription.html#getHelpCtx()[getHelpCtx()] {
        return entry.getDataObject().getHelpCtx();
    }

    public String  link:https://bits.netbeans.org/dev/javadoc/org-netbeans-core-multiview/org/netbeans/core/spi/multiview/MultiViewDescription.html#preferredID()[preferredID()] {
        return ".design";
    }

    public MultiViewElement  link:https://bits.netbeans.org/dev/javadoc/org-netbeans-core-multiview/org/netbeans/core/spi/multiview/MultiViewDescription.html#createElement()[createElement()] {
        designViewTopComponent component = new designViewTopComponent(entry, cos);
        return component;
    }
}
----


[start=2]
1. Inner class:


[source,java]
----

private class SourceView implements MultiViewDescription, Serializable{
    private static final long serialVersionUID = 0L;

    private jbossddDataObject object;
    private CloseOperationState cos;

    public SourceView(jbossddDataObject object, CloseOperationState cos){
        this.cos = cos;
        this.object = object;
    }

    public int getPersistenceType() {
        return TopComponent.PERSISTENCE_ONLY_OPENED;
    }

    public String getDisplayName() {
        return "Source";
    }

    public Image getIcon() {
        return object.getNodeDelegate().getIcon(BeanInfo.ICON_COLOR_16x16);
    }

    public HelpCtx getHelpCtx() {
        return object.getHelpCtx();
    }

    public String preferredID() {
        return ".source";
    }

    public MultiViewElement createElement() {
        return new XMLElement(object, cos);
    }

    public class XMLElement extends CloneableEditor
            implements MultiViewElement, Serializable{

        private static final long serialVersionUID = 0L;

        private transient MultiViewElementCallback _multiViewObserver;

        jbossddDataObject object;
        CloseOperationState cos;

        /** Creates a new instance of MetaViewXMLElement */
        public XMLElement(jbossddDataObject object, CloseOperationState cos) {
            super((jbossddEditorSupport)object.getCookie(jbossddEditorSupport.class));
            this.cos = cos;
            this.object = object;
        }

        public JComponent getVisualRepresentation() {
            return this;
        }

        public JComponent getToolbarRepresentation() {
            return new javax.swing.JToolBar();
        }

        public void setMultiViewCallback(MultiViewElementCallback multiViewElementCallback) {
            _multiViewObserver = multiViewElementCallback;
        }

        public CloseOperationState canCloseElement() {
            if (this.object.isModified()) {
                return this.cos;
            } else {
                return CloseOperationState.STATE_OK;
            }
        }

        public void componentDeactivated() {

            super.componentDeactivated();
        }

        public void componentActivated() {

            super.componentActivated();
        }

        public void componentHidden() {

            super.componentHidden();
        }

        public void componentShowing() {

            super.componentShowing();
        }

        public void componentOpened() {

            super.componentOpened();
        }

        public void componentClosed() {

            super.componentClosed();
        }
    }
}
----


=== Enabling the Multiview Editor


[start=1]
1. a



== Registering the Module

The  ``layer.xml``  file registers everything that you want to make available to the NetBeans system. However, in this tutorial you do not need to register anything manually yourself because the New File wizard and the New Window Component wizard did that for you automatically. For example, when you created the new file type, the New File wizard added XML tags to the  ``layer.xml``  file to register the new file type's dummy template in the New File wizard. 


== Building and Installing the Module

The IDE uses an Ant build script to build and install your module. The build script is created for you when you create the module project.


=== Installing and Using the Module


[start=1]
1. In the Projects window, right-click the  ``jbossVisualEditor``  project node and choose Install/Reload in Target Platform.

The module is built and installed in the target platform. The target platform opens so that you can try out your new module. The default target platform is the installation used by the current instance of the development IDE.


[start=2]
1. Verify that the module is correctly installed by using it as shown in <<installing-sample,Installing the Sample>>.


=== Creating a Shareable Module Binary


[start=1]
1. In the Projects window, right-click the  ``jbossVisualEditor``  project and choose Create NBM.

The NBM file is created and you can view it in the Files window (Ctrl-2):


image::images/multiview_create-nbm.png[]


[start=2]
1. Make the module available to others via, for example, e-mail.


[start=3]
1. The recipient can install the module by using the Update Center. Choose Tools > Update Center from the main menu.



== Next Steps

For more information about creating and developing NetBeans modules, see the following resources:

*  link:https://netbeans.apache.org/platform/index.html[Module Developer's Resources]

*  link:https://bits.netbeans.org/dev/javadoc/[NetBeans API List (Current Development Version)]

*  link:http://apisupport.netbeans.org/new-apisupport.html[New API Support-Proposal]


== Versioning

|===
|*Version* |*Date* |*Changes* |*Open Issues* 

|1 |14 December 2005 |Initial version |

* Maybe find out and use the _real_ namespace instead of my made up one.
* Find out why the DOCTYPE resolver didn't work.
* Maybe redesign the Design view using correct Matisse approach and official u.i. specs.
* Find out why the menu-item doesn't produce the Design view with all the values filled in.
* More info needed on the  ``addSupport()``  method.
* Many more code explanations needed.
 
|===