Integration of GXP Viewer/Composer and other ready-apps into Heron core

More and more GXP components are now integrated into Heron like now the Catalog 
widgets in issue 324.
Although this enriches Heron significantly, integration is also a bit ad-hoc.

At the same time users may want to just use GXP apps like the GXP Viewer, maybe 
embellished with some Heron widgets, so basically an integration the other way 
around but still with the ease of using a configuration according to Heron 
conventions. 

Also we may supply ready-to-use Heron-based viewer apps, like the KadViewer, 
http://kadviewer.kademo.nl for direct use with just some local settings  like 
map layers, projection and such.

Luckily Heron's internal bootstrap-design based on a configuration-tree 
starting at Heron.layout allows for easy extension into 'apps'. For example a 
GXP Viewer also requires a configuration, so we could extend the current Heron 
configuration convention with app-specific configuration trees. The convention 
could be that next to Heron.layout we could have Heron.app.gxpviewer, 
Heron.app.kadviewer etc, each denoting a main app-class like gxp.Viewer to be 
instantiated. The configuration tree is then the app-specific configuration 
context, like for gxp.Viewer:

      Heron.app.gxpviewer = {
        proxy: "/geoserver/rest/proxy?url=",
        portalConfig: {
            renderTo: document.body,
            layout: "border",
            width: 650,
            height: 465,

            // by configuring items here, we don't need to configure portalItems
            // and save a wrapping container
            items: [{
                // a TabPanel with the map and a dummy tab
                id: "centerpanel",
                xtype: "tabpanel",
                region: "center",
                activeTab: 0, // map needs to be visible on initialization
                border: true,
                items: ["mymap", {title: "Dummy Tab"}]
            }, {
                // container for the FeatureGrid
                id: "south",
                xtype: "container",
                layout: "fit",
                region: "south",
                height: 150
            }, {
                // container for the queryform
                id: "west",
                xtype: "container",
                layout: "fit",
                region: "west",
                width: 200
            }],
            bbar: {id: "mybbar"}
        },

        // configuration of all tool plugins for this application
        tools: [{
            ptype: "gxp_layertree",
            outputConfig: {
                id: "tree",
                border: true,
                tbar: [] // we will add buttons to "tree.bbar" later
            },
            outputTarget: "west"
        }, {
            ptype: "gxp_addlayers",
            actionTarget: "tree.tbar",
            search: {selectedSource: "pycsw"}
             .
             .
        }, {
            // not a useful tool - just a demo for additional items
            actionTarget: "mybbar", // ".bbar" would also work
            actions: [{text: "Click me - I'm a tool on the portal's bbar"}]
        }],

        // layer sources
        defaultSourceType: "gxp_wmssource",
        sources: {
            local: {
                url: "/geoserver/wms",
                version: "1.1.1"
            },
            google: {
                ptype: "gxp_googlesource"
            },
            pycsw: {
                ptype: "gxp_cataloguesource",
                url: "http://gxp.opengeo.org/pycsw",
                title: "pycsw"
            }
        },

        // map and layers
        map: {
            id: "mymap", // id needed to reference map in portalConfig above
            title: "Map",
            projection: "EPSG:900913",
            units: "m",
            maxResolution: 156543.0339,
            maxExtent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34],
            center: [-10764594.758211, 4523072.3184791],
            zoom: 3,
            layers: [{
                source: "google",
                name: "TERRAIN",
                group: "background"
            }, {
                source: "local",
                name: "usa:states",
                title: "States, USA - Population",
                bbox: [-13884991.404203, 2870341.1822503, -7455066.2973878, 6338219.3590349],
                selected: true
            }],
            items: [{
                xtype: "gx_zoomslider",
                vertical: true,
                height: 100
            }]
        }
      }

The 'items' could then also contain Heron/GeoExt-widgets. At least for now this 
issue can cover gxp.VIewer and a general app-extension mechanism, i.e. the 
Heron.app.<appname>.<appconfig> convention.

Original issue reported on code.google.com by jus...@gmail.com on 13 Mar 2014 at 12:45

This enhancement was even more trivial then thought: the ExtJS 
xtype/Ext.create() mechanism can be used i.s.o. some Heron-specific syntax. So 
the first example also is working (apart from authorization with Boundless 
GeoServer). See

http://lib.heron-mc.org/heron/latest/examples/appgxpviewer

Basically 2 things are needed:

* register an App class, this has been done for gxp.Viewer already i.e. 
Ext.reg('gxp_viewer', gxp.Viewer);
* create a Config for your app according to the App class convention

In the above example this is 
http://lib.heron-mc.org/heron/latest/examples/appgxpviewer/Config.js
The convention is simply:

    Heron.app = {
       // The app type, ExtJS class, some registered in Heron already via
       // for example Ext.reg('gxp_viewer', gxp.Viewer);
       xtype: <your_app_xtype>

       // your app's config, as will be passed to your app's constructor
    };

Will add some more examples and documentation before closing, as it should also 
be made more clear.

Original comment by jus...@gmail.com on 13 Mar 2014 at 2:22

Changed state: Started

smas1 / geoext-viewer

Integration of GXP Viewer/Composer and other ready-apps into Heron core #348