Plugin with output only¶

This example will create a new plugin that will display the perimeter and area of all the boxes that are drawn on the map.

Creating a basic panel¶

The first step is to create a plugin that outputs some static text. Create a file called BoxInfo.js in the plugins directory.

Open this file in a text editor and add the following:

Ext.ns("myapp.plugins");

myapp.plugins.BoxInfo = Ext.extend(gxp.plugins.Tool, {

  ptype: "myapp_boxinfo",

  addOutput: function(config) {
    return myapp.plugins.BoxInfo.superclass.addOutput.call(this, Ext.apply({
      title: "Box info",
      html: "This is where the box info will be shown"
    }, config));
  }

});

Ext.preg(myapp.plugins.BoxInfo.prototype.ptype, myapp.plugins.BoxInfo);

This plugin will only implement the addOutput function to create a panel with a title and some content.

Connecting to the application¶

To add the BoxInfo plugin to the application, edit src/app/app.js and include the dependency at the top of the file:
```
 * @require plugins/BoxInfo.js
```

Add a container for the output to the items section of the portalConfig definition in src/app/app.js:

        }, {
            id: "southpanel",
            xtype: "container",
            layout: "fit",
            region: "south",
            height: 100
        }],

In the tools section, add an entry for the “boxinfo” tool and direct its output to the south panel:

    }, {
        ptype: "myapp_boxinfo",
        outputTarget: "southpanel"
    }],

Restart the SDK and reload the application in the browser to see the results:

Adding an information box to the application

Adding dynamic content¶

To connect this panel to dynamic content, it needs a reference to the vector boxLayer that is created by the DrawBox tool. This reference is established by attaching an id to the DrawBox tool in app.js. The BoxInfo tool will then reference this id value. Add the id to app.js after ptype: "myapp_drawbox" and before actiontarget: "map.tbar".
```
    }, {
        ptype: "myapp_drawbox",
        id: "drawbox",
        actionTarget: "map.tbar"
    }, {
```

Add the reference to the boxinfo config, between ptype: "myapp_boxinfo" and outputTarget: "southpanel":

    }, {
        ptype: "myapp_boxinfo",
        boxTool: "drawbox",
        outputTarget: "southpanel"
    }],

Now, switching back over to BoxInfo.js, replace the addOutput function of the BoxInfo tool with the following code. With this change, the application will depict information about the box that has been drawn.

  boxTool: null,

  tplText: 'Area: {area}, Perimeter: {length}',

  title: "Box info",

  addOutput: function(config) {
    if (this.boxTool !== null) {
      var layer = this.target.tools[this.boxTool].boxLayer;
      layer.events.on({
        featureadded: this.addFeature,
        scope: this
      });
      this.tpl = new Ext.Template(this.tplText);
    }
    return myapp.plugins.BoxInfo.superclass.addOutput.call(this, Ext.apply({
      title: this.title,
      autoScroll: true
    }, config));
  },

In the above code, the boxTool string identifier finds the DrawBox tool so that it can get a reference to its boxLayer property.

Add the following code below the code added in the previous step:

  addFeature: function(evt) {
    var geom = evt.feature.geometry,
      output = this.output[0];
    output.add({html: this.tpl.applyTemplate({area: geom.getArea(), length: geom.getLength()})});
    output.doLayout();
  }

When a feature is added to the boxLayer, the code adds a panel to the output container. The content is generated using an Ext.Template.

Reload the application as before. Draw a few boxes on the map and verify that the container at the bottom will display information about the boxes:

Box info showing area and perimeter
Note

To adjust the output, use the tplText parameter and the outputConfig section of the tool in src/app/app.js. For example, the following code would display only the area and turn off autoscrolling:
```
ptype: "myapp_boxinfo",
boxTool: "drawbox",
tplText: "AREA: {area}",
outputTarget: "southpanel",
outputConfig: {
  title: "Box info",
  autoScroll: false
}
```

Download the BoxInfo.js and app.js files created in this section.