root/sandbox/mapgears/geoext.ux/ux/WMSLayerAdder/lib/GeoExt.ux/widgets/WMSLayerAdder.js

/**
 * Copyright (c) 2008-2010 The Open Source Geospatial Foundation
 * 
 * Published under the BSD license.
 * See http://svn.geoext.org/core/trunk/geoext/license.txt for the full text
 * of the license.
 */

Ext.namespace("GeoExt.ux")

/*
 * @requires GeoExt/widgets/Action.js
 */

/** api: (define)
 *  module = GeoExt.ux
 *  class = WMSLayerAdder
 */

/** api: constructor
 *  .. class:: WMSLayerAdder
 */
GeoExt.ux.WMSLayerAdder = Ext.extend(Ext.Panel, {

    layout: 'fit',

    minWidth: 300,

    minHeight: 200,

    plain:true,

    bodyStyle:'padding:5px;',

    buttonAlign:'center',

    useIcons: false,

    mapPanel: null,

    serverStore: null,

    serverStoreDisplayField: 'url',

    capabilitiesParams: {},

    defaultCapabilitiesParams: {
       'service': "WMS",
       'request': "GetCapabilities",
       'version': '1.1.1'
    },

    gridPanelOptions: {
        'height': 200
    },

    /** private: method[constructor]
     */
    constructor: function(config) {
        this.serverStore = config.serverStore || null;
        
        OpenLayers.Util.applyDefaults(
            this.capabilitiesParams, this.defaultCapabilitiesParams);

        this.initMyItems();
        this.initMyToolbar();

        arguments.callee.superclass.constructor.call(this, config);
    },

    initMyItems: function() {
        var oItems;

        oItems = [];

        // Top panel
        oTopPanel = {
            style:'padding:0px;margin:0px;',
            region: 'north',
            id: "wms_field_group",
            xtype: 'fieldset',
            layout: 'form',
            border: false,
            collapsible: false,
            autoHeight: true,
            autoWidth: true,
            defaults: {width: '100%'},
            defaultType: 'textfield',
            buttonAlign:'center',
            items: [],
            buttons: []
        };

        // URL panel
        var oURLField;
        if(this.serverStore) {
            oURLField = {
                columnWidth: 0.85,
                layout: 'fit',
                'name': 'wms_url',
                'id': 'wms_url',
                xtype: 'combo',
                store: this.serverStore,
                displayField: this.serverStoreDisplayField,
                typeAhead: true,
                mode: 'local',
                forceSelection: false,
                triggerAction: 'all',
                emptyText:OpenLayers.i18n('Select or input a server address (URL)'),
                selectOnFocus:true
            };
        } else {
            oURLField = {
                xtype: "textfield",
                columnWidth: 0.85,
                layout: 'fit',
                'name': 'wms_url',
                'id': 'wms_url',
                border: false,
                'emptyText': OpenLayers.i18n('Input the server address (URL)')
            };
        }

        // Top panel - URL and Connect
        oTopPanel.items.push({
            style:'padding:2px;margin:2px;',
            xtype: 'fieldset',
            layout: 'column',
            border: false,
            collapsible: false,
            collapsed: false,
            autoHeight: true,
            autoWidth: true,
            items: [
                oURLField,
                {
                    columnWidth: 0.15,
                    layout: 'fit',
                    border: false,
                    items: [{
                        xtype: 'button',
                        text:  OpenLayers.i18n('Connect'),
                        scope: this,
                        handler: function(b, e){this.triggerGetCapabilities();}
                    }]
                }
            ]
        });


        // Top panel - Username and Password
        oTopPanel.items.push({
            style:'padding:10px;margin:2px;',
            xtype: 'fieldset',
            title: OpenLayers.i18n('Login information (optional)'),
            layout: 'form',
            collapsible: true,
            collapsed: true,
            autoHeight: true,
            autoWidth: true,
            defaults: {width: '100%'},
            defaultType: 'textfield',
            items: [{
                name: 'wms_username',
                id: 'wms_username',
                fieldLabel: OpenLayers.i18n('Username')
            },{
                name: 'wms_password',
                id: 'wms_password',
                inputType: 'password',
                fieldLabel: OpenLayers.i18n('Password')
            }]
        });
        oItems.push(oTopPanel);


        // Center Panel
        oCenterPanel = {
          xtype: 'form',
            region: 'center',
            id: "wms_capabilities_panel",
            layout: 'column',
            border: false,
            collapsible: false,
            autoHeight: true,
            autoWidth: true,
            width: 'auto',
            height: 'auto',
            defaults: {width: '100%', hideLabel: true},
            defaultType: 'textfield',
            buttonAlign:'center',
            items: []
        };
        
        oItems.push(oCenterPanel);

        Ext.apply(this, {items: oItems});
    },

    triggerGetCapabilities: function() {
        var url = Ext.getCmp('wms_url').getValue();

        if(!url) {
            alert(OpenLayers.i18n('Please, enter an url in the textbox'));
            return;
        }

        var params = OpenLayers.Util.getParameterString(this.capabilitiesParams);        
        url = OpenLayers.Util.urlAppend(url, params);

        if (OpenLayers.ProxyHost && OpenLayers.String.startsWith(url, "http")) {
            url = OpenLayers.ProxyHost + encodeURIComponent(url);
        }

        // create a store from the url
        this.createWMSCapabilitiesStore(url);

        // remove the grid and form panels from the container and recreate them
        var panel = Ext.getCmp('wms_capabilities_panel')
        this.removeAllItemsFromObject(panel);
        panel.add(this.createGridPanel());
        panel.add(this.createFormPanel());
        panel.doLayout();
    },

    removeAllItemsFromObject: function(object){
        while(object.items.length != 0){
            var oItem = object.items.items[0];
            object.remove(oItem, true);
        }
    },

    createWMSCapabilitiesStore: function(url) {
        this.WMSCapabilitiesStore = 
            new GeoExt.data.WMSCapabilitiesStore({'url': url});
        this.WMSCapabilitiesStore.on(
            'load', this.onWMSCapabilitiesStoreLoad, this);
        this.WMSCapabilitiesStore.load();
    },

    createGridPanel: function() {
        var columns = [
            { header: OpenLayers.i18n('Add'),
              dataIndex: "srsCompatible", hidden: false,
              renderer: this.boolRenderer, width: 30},
            { header: OpenLayers.i18n('Title'), 
              dataIndex: "title", id: "title", sortable: true},
            { header: OpenLayers.i18n('Name'), 
              dataIndex: "name", sortable: true},
            { header: OpenLayers.i18n('Queryable'), 
              dataIndex: "queryable", sortable: true, hidden: true, 
              renderer: this.boolRenderer},
            { header: OpenLayers.i18n('Description'),
              dataIndex: "abstract", hidden: true}
        ];

        // In order to have a scrollbar, a GridPanel must have a 'height' set,
        // it can't be left with 'autoHeight': true...
        var options = {
            id: 'wms_capabilities_grid_panel',
            columnWidth: 0.5,
            layout: 'fit',
            store: this.WMSCapabilitiesStore,
            columns: columns,
            // SelectionModel
            sm: new Ext.grid.RowSelectionModel({
                singleSelect: true,
                listeners: {
                    rowselect: function(sm, row, rec) {
                        Ext.getCmp("wms_capabilities_panel").getForm().loadRecord(rec);
                    }
                }
            }),
            autoExpandColumn: "title",
            width: 'auto',
            autoWidth: true,
            //height: 'auto',
            //autoHeight: true,
            listeners: {
                rowdblclick: this.mapPreview
            }
        };

        options = OpenLayers.Util.applyDefaults(this.gridPanelOptions, options);

        return new Ext.grid.GridPanel(options);
    },

    createFormPanel: function() {
        var options = {
            style:'padding:0px;margin:0px;',
            columnWidth: 0.5,
            xtype: 'fieldset',
            labelWidth: 80,
            defaults: {width: '100%', border:false},
            defaultType: 'textfield',
            autoHeight: true,
            bodyStyle: Ext.isIE ? 'padding:0 0 0px 0px;' : 'padding:5px 0px;',
            border: false,
            style: {
                "margin-left": "10px",
                "margin-right": Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "0"
            },
            items: [{
                fieldLabel: OpenLayers.i18n('Title'),
                name: 'title'
            },{
                fieldLabel: OpenLayers.i18n('Name'),
                name: 'name'
            },{
                xtype: 'radiogroup',
                columns: 'auto',
                fieldLabel: OpenLayers.i18n('Queryable'),
                name: 'queryable',
                items: [{
                    inputValue: "true",
                    boxLabel: OpenLayers.i18n("Yes")
                }, {
                    inputValue: "",
                    boxLabel: OpenLayers.i18n("No")
                }]
            },{
                xtype: 'radiogroup',
                columns: 'auto',
                fieldLabel: OpenLayers.i18n('Can add ?'),
                name: 'srsCompatible',
                items: [{
                    inputValue: "true",
                    boxLabel: OpenLayers.i18n("Yes")
                }, {
                    inputValue: "false",
                    boxLabel: OpenLayers.i18n("No")
                }]
            },{
                xtype: 'textarea',
                fieldLabel: OpenLayers.i18n('Description'),
                name: 'abstract',
                anchor: '100% -30'
            }]
        };

        return options;

    },

    mapPreview: function(grid, index) {
        var record = grid.getStore().getAt(index);
        var layer = record.get("layer").clone();
        
        var win = new Ext.Window({
            title: OpenLayers.i18n('Preview') + ": " + record.get("title"),
            width: 512,
            height: 256,
            layout: "fit",
            items: [{
                xtype: "gx_mappanel",
                layers: [layer],
                extent: record.get("llbbox")
            }]
        });
        win.show();
    },

    initMyToolbar: function() {
        var items = [];

        items.push('->');

        // AddLayer action
        var actionOptions = {
            handler: this.addLayer,
            scope: this,
            tooltip: OpenLayers.i18n('Add currently selected layer')
        };

        if (this.useIcons === true) {
            actionOptions.iconCls = "gx-wmslayeradder-addlayer";
        } else {
            actionOptions.text = OpenLayers.i18n('Add Layer');
        }

        var action = new Ext.Action(actionOptions);
        items.push(action);

        // Cancel/Close action... todo


        Ext.apply(this, {bbar: new Ext.Toolbar(items)});
    },

    addLayer: function() {
        var grid = Ext.getCmp('wms_capabilities_grid_panel');
        var record = grid.getSelectionModel().getSelected();
        if(record) {
            // check the projection of the map is supported by the layer
            if (record.get("srsCompatible") === false) {
                var error = "This layer can't be added to the current map" + 
                            " because it doesn't support its projection.";
                alert(OpenLayers.i18n(error));
                return;
            }

            var copy = record.copy();

            // the following line gives "too much recursion".
            //copy.set("layer", record.get("layer"));
            copy.data.layer = record.data.layer;

            copy.get("layer").mergeNewParams({
                format: "image/png",
                transparent: "true"
            });
            this.mapPanel.layers.add(copy);

            // zoom to added layer extent
            this.mapPanel.map.zoomToExtent(
                OpenLayers.Bounds.fromArray(copy.get("llbbox"))
            );
        }
    },

    onWMSCapabilitiesStoreLoad: function(store, records, options) {
        var srs = this.mapPanel.map.getProjection();

        // loop through all records (layers) to see if they contain the current
        // map projection
        for(var i=0; i<records.length; i++) {
            var record = records[i];

            // Check if the 'srs' contains a 'key' named by the srs OR
            // Check if the 'srs' is an array and contains the srs
            if(record.get('srs')[srs] === true ||
               OpenLayers.Util.indexOf(record.get('srs'), srs) >= 0) {
                record.set("srsCompatible", true);
            } else {
                record.set("srsCompatible", false);
            }
        }

        // select the first element of the list on load end
        var grid = Ext.getCmp('wms_capabilities_grid_panel');
        if(grid.store.totalLength > 0) {
            grid.getSelectionModel().selectRow(0);
        }
    },

    boolRenderer: function(bool) {
        return (bool)
            ? '<span style="color:green;">' + OpenLayers.i18n("Yes") + '</span>'
            : '<span style="color:red;">' + OpenLayers.i18n("No") + '</span>';
    }
});