OpenLayers 3: Invest in the web mapping future !

OpenLayers Community has initiated a call for funding in order to develop a brand new release based on the latest technogies: OpenLayers 3. If this becomes a reality, than GeoExt will also benefit of these new possibilities and would allow to develop awesome applications.
Please get in touch at ol3-funding@googlegroups.com if you’re interesting in being involved.

GeoExt 2 - more technical details

This blog post provides more details on GeoExt 2 and Ext JS 4, focusing on technical aspects

So GeoExt 2 is a port of GeoExt 1 to Ext JS 4. The GeoExt 2 code sprint was really about porting the existing code base to Ext JS 4, redesigning, and rewriting code, only when simple adaptations were not possible.

GeoExt 2 works with Ext JS 4 only. Ext JS 3 and lower aren't supported, and won't be, obviously.

Note also that GeoExt 2 doesn't work with Sencha Touch. Sencha Touch and Ext JS 4 have similarities but their APIs are too different to write code that works with both libs. We actually did attempt to make map panel work with both Ext JS 4 and Sencha Touch, but failed.

The class system

The class system of Ext JS 4 is quite different from that of Ext JS 3. Ext JS 3 had no specific mechanism for defining classes, and had Ext.extend to define child classes. With Ext JS 4 classes are defined using Ext.define. Defining a parent class is done as follows:

Ext.define('P', {
    // prototype object
});

Defining a child class is done as follows:

Ext.define('C', {
    extend: 'P',
    // prototype object
});

In the above examples the P and C constructors are added to the window namespace. To create a class without adding a reference to it in the global namespace Ext.Class can be used. Ext.define actually uses Ext.Class internally, and most of the time you should not need to use Ext.Class.

So porting GeoExt to Ext JS 4 has required using Ext.define for every class definition – the easy part of the porting work really.

Another major change in Ext JS 4 is the way classes should be instantiated. Although using the new keyword still works (thank god!) using Ext.create is recommended. For example:

    var c = Ext.create('C');

Using Ext.create Ext JS will actually load the script containing the class if the class is not defined yet. This is called "synchronous loading" in the Ext JS 4 jargon, which means "load the class at the time it is actually needed".

The autoloader also supports "asynchronous loading". When relying on asynchronous loading, scripts are loaded earlier, in fact as soon as Ext.require is called or when classes with specific requirements (defined with "requires" in the class) are defined. Synchronous loading works with XHR while asynchronous loading works by dynamically adding script tags to the page.

The data components

The data types/components in Ext JS 4 work differently from Ext JS 3. Ext JS 4 has introduced the notion of “model”. A model, which is a class, defines a data schema. For example:

Ext.define('my.Model', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'text', type: 'string'
    }, {
        name: 'code', type: 'int'
    }]
});

This defines a data model with two fields/columns: "text" and "code". The defined model class can then be used in a store. For example:

var store = Ext.create('Ext.data.Store', {
    model: 'my.Model'
});

GeoExt 2 defines its own data models. To name a few: LayerModel, WmsCapabilitiesLayerModel, WmsDescribeLayerModel to name a few.

GeoExt 2 also defines preconfigured stores. For example GeoExt 2 includes WmsDescribeLayerStore which is preconfigured with WmsDescribeLayerModel.

As GeoExt 1, the goal of GeoExt 2's data components is to ease working with geo data and metadata in Ext JS applications. But we had to rethink and redesign things in GeoExt 2, to adapt to Ext JS 4's new architecture and concepts.

The tree components

(paragraph contributed by Andreas Hocevar) Trees have seen a complete overhaul in Ext JS 4. Instead of loaders, every node in a tree now has a store for its child nodes. While the Ext JS 4 tree is more flexible than the Ext JS 3 one when it comes to columns (the tree is a grid), there are less extension points for customizations on the node level. And GeoExt 1 did a lot of customizations on the node level. But despite these difficulties, we were able to come up with a nice API for configuring trees. Let's have a look at a tree configuration for including a WMS GetLegendGraphic image for each layer in GeoExt 1:

// custom layer node UI class
var LayerNodeUI = Ext.extend(
    GeoExt.tree.LayerNodeUI,
    new GeoExt.tree.TreeNodeUIEventMixin()
);
var tree = new Ext.tree.TreePanel({
    // apply the tree node component plugin to layer nodes
    plugins: [{
        ptype: "gx_treenodecomponent"
    }],
    loader: {
        applyLoader: false,
        uiProviders: {
            custom_ui: LayerNodeUI
        }
    },
    root: {
        nodeType: "gx_layercontainer",
        loader: {
            baseAttrs: {
                uiProvider: "custom_ui"
            },
            createNode: function(attr) {
                // add a WMS legend to each node created
                attr.component = {
                    xtype: "gx_wmslegend",
                    layerRecord: mapPanel.layers.getByLayer(attr.layer),
                    showTitle: false,
                    // custom class for css positioning
                    // see tree-legend.html
                    cls: "legend"
                };
                return GeoExt.tree.LayerLoader.prototype.createNode.call
                           (this, attr);
            }
        }
    },
    rootVisible: false,
    lines: false
});

Obviously the configuration of a custom TreeNodeUI to get additional events on the tree, which are needed by the gx_treenodecomponent plugin is a bit cumbersome. With GeoExt 2, the same tree can be achieved with a much nicer configuration:

var store = Ext.create('Ext.data.TreeStore', {
    model: 'GeoExt.data.LayerTreeModel',
    root: {
        plugins: [{
            ptype: "gx_layercontainer",
            loader: {
                createNode: function(attr) {
                    // add a WMS legend to each node created
                    attr.component = {
                        xtype: "gx_wmslegend",
                        layerRecord: mapPanel.layers.getByLayer(
                                          attr.layer),
                        showTitle: false,
                        // custom class for css positioning
                        // see tree-legend.html
                        cls: "legend"
                    };
                    return GeoExt.tree.LayerLoader.prototype.createNode.call
                              (this, attr);
                }
            }
        }]
    }
});
var tree = new GeoExt.tree.Panel({
    store: store,
    rootVisible: false,
    lines: false
});

The node (here: the root node) can be configured with plugins. Note that this is not an Ext JS 4 extension point, but one that we created in GeoExt 2. As long as your tree is a GeoExt.tree.TreePanel instead of an Ext.tree.TreePanel, and its store is configured with a GeoExt.tree.LayerTreeModel instead of the default model, there are no special configuration options needed to make the already built-in component rendering available.

Instead of having this built into our default tree view (the one the GeoExt.tree.TreePanel is configured with), we could also move it into a plugin before the final release. This decision depends on how much code the other plugins (like the ActionPlugin and RadioButtonPlugin) require, and our architecture allows us to create an extension point here any time.

GeoExt2 Sprint Results

Today was the final day of the sprint, and we are proud to announce that GeoExt2 is ready for an early alpha release. Most of the key features that our sponsors were interested in could be ported from GeoExt1. Examples matching previous examples are available for most of the ported components, so it should be easy for application developers to port their applications to Ext4/GeoExt2.

To continue our tradition of giving credit to the developers who put an incredible amount of energy into making GeoExt2 a reality, here is the list of today's achievements:

• Alexandre finished a MVC demo application that shows the power of Ext4 and GeoExt2, and fixed many tests and examples.
• Andreas and Julien were able to finish big portions of the tree functionality, just in time before the end of the sprint, and just before going crazy over the complexity of the internals of Ext4. In addition to the synchronization between map and tree, all the loaders (except for the LayerParamsLoader) and the TreeNodeComponent plugin were implemented. Because the Ext4 architecture of trees is too much different from Ext3, a new (and nicer) API for building tree configurations was introduced.
• Bart and Matt and Frédéric wrapped up their work on data components - even the not so famous ones like the SymbolizerColumn or the GeocoderCombo. A nice improvement, which also received contributions from other sprinters, is the common OwsStore base class for OGC data sources. Bart also brought basic i18n to GeoExt2.
• Christian, Marc and Johannes made all print components work with Ext4. They also made huge improvements to many of the examples.
• Éric gave the new MapPanel a big overhaul, so it is more lightweight and feature complete than the initial port. Together with François, he finished the AttributeReader and all components from the form namespace. They also took care of dependency management and made improvements to the build story.
• Stéphane did a great job reviewing many of the pull requests that had piled up during the week, and helped to keep the pile of open tickets small. He also contributed to the MVC demo application mentioned above.

Next Steps

Over the weekend, we will be trying to brush up the API documentation and create an official alpha release. At this point, some components still need unit tests, and there may be some loose ends that are best encountered by using GeoExt2 in real life applications.

This means: we invite everyone to test the upcoming alpha release, or get the latest code from github. Bug reports, and - more than ever - code contributions and bugfix pull requests on github are welcome. Getting out a final 2.0 release soon is a goal that can only be reached with help from the community. For talented developers, a reward for repeated quality code contributions is the nomination for GeoExt2 core committer status.

Thanks again to all our sponsors, and to terrestris for the organization of the sprint and the perfect venue. And of course to all my fellow sprinters for all the good and hard work.

Happy coding, and may the odds be ever in your favor!

GeoExt2 Code Sprint - Day 4

The fourth day of the GeoExt 2 codesprint has been as intensive as the other days, things are really coming together, but tomorrow is gonna be a crucial day. But sometimes we wish Ed Spencer from Sencha would be here to explain a few things to us.

Andreas Hocevar from OpenGeo and Julien Samuel-Lacroix from MapGears kept working on their unicorn, the tree components. They can now turn layers on and off through checkboxes, and are currently figuring out more advanced UIs like radio buttons (which they just did as I am writing this blog post). On the data side, they are digging into implementing the remaining loaders - currently they only have the plain LayerLoader.

Alexandre Dube from MapGears worked on an Ext-oriented application using their MVC architecture. Stéphane Brunner from CampToCamp made a build for it. You can see the current built version using a FeatureStore at: http://dev8.mapgears.com/geoext/git/2.0-12051017/examples/app/simple/simple.html

Stéphane also combined his efforts with Frederic Junod from CampToCamp to finish off the FeatureStore. Frederic also ported the grid.SymbolizerColumn (now in master with test and example) and worked with Alexandre on the app example.

Matt Priour of OpenGeo debugged data model inheritance issues and crafted an OwsStore to act as a base class for all of the OWS data stores.

François van der Biest and Eric Lemoine from CampToCamp completed the work on the Attribute model, reader and store and on the Form.toFilter and Form.recordToField functions. Two pull requests are ready for review. Next step for them is the SearchAction.

Marc Jansen, Christian Mayer and Johannes Weskamm from Terrestris worked very hard on the print components. Marc also did several reviews.

I myself worked on porting more of the data components (WfsCapabilities, WmsDescribeLayer, CswRecords, Wmc and ScaleStore) and started porting the ProtocolProxy but the differences are very big here between Ext 3 and Ext 4, so this needs more work.

Some links to the German music that inspired some of us today (new versus old), and a big thank you again to Terrestris for hosting us in their fantastic office:

http://www.universal-music.de/deichkind/videos/detail/video:270107/bueck-dich-hoch
http://www.youtube.com/watch?v=KhihBMG4oMs

Tonight we will have a social activity at KleinsPeterBerg (a restaurant alongside the river Rhine): http://www.kleinpetersberg.de/

Bart van den Eijden

Another big day today at the GeoExt 2 Code Sprint

After a three days of around twelve hours of work, things are really coming together. Today started more quiet as people worked in pairs to complete core functionalities. A lot of effort was put to port the main GeoExt features to ExtJS 4. Here are the main aspects of the work our tireless sprinters accomplish today:

* Documentation (http://geoext.github.com/geoext2/docs/index.html) was worked on by Andreas Schmitz and Markus Schneider, who joined us today, from Occam Labs. All functions are now automatically generated from the code without error. The new documentation framework (JSDuck) is really easy to use for developers and produce really nice docs à la ExtJS.

* Print forms work started today with efforts from Marc, Christian and Johannes. Not only did the Terristris team provide all the sprinters with good food and a great network connection, they also built essential data components for the printing capabilities of GeoExt.

* Tests (http://geoext.github.com/geoext2/tests/) are now nearly completed as they all pass in Chrome and Firefox. Thanks to Alexandre who also worked really hard to make everything work in IE8+. This helped to not only get all functionalities out by the end of the week, but also to have a very robust library.

* FeatureStore, one of the most important data components of GeoExt, was completed by Frédéric and Stéphane. The examples are still in a Pull Request at the time of writing this, but be sure it's amazing. From now on we'll be able to not only consult our features but also get to interact with them with all the ExtJS potential.

* Forms have been addressed by Eric and François. AttributeModel, AttributeReader, AttributeStore + form components (for editing and search) are all in the pipeline. Combined with the FeatureStore feature, this will provide us interesting applications to consult and edit feature data.

* WMSCapabilities (http://geoext.github.com/geoext2/examples/wmscapabilities/wmscapabilities.html) support was added by Bart and Matt. This key feature needed the model, reader and store to be addressed. They got it working and combined with the LayerStore effort of the previous days, the example is now working just like before.

* Layer Tree architecture design was addressed by Andreas and Julien. This work could have its own blog post. Let us just say that everything is different in ExtJS 4. They finally found a really clean way to configure the Layer Tree using the latest functionalities of ExtJS 4. After a day of design and test, let's hope they we will be able to show us something working tomorrow.

Feel free to download the code on GitHub (http://github.com/geoext/geoext2).

The live documentation is here (http://geoext.github.com/geoext2/docs/index.html)

And after 3 days, here are the examples and tests:

* Tests
* action
* layeropacityslider
* legendpanel
* mappanel
* permalink
* popup
* wmscapabilities
* zoomslider

Thanks Julien-Samuel for this great summary !

GeoExt 2 Day 2

Day 1 was about getting organized, getting up to speed with Ext JS 4, and starting some work based on what the Terrestris guys did in a previous code sprint. We also started designing the data components, with an initial focus on the Layer Store.

Today we've been essentially consolidating things, focusing on what we started yesterday. To avoid too much dispersion we've essentially worked in pairs.

Here's a brief list of today's achievements:

• We have added tests and docs for the Map Panel, Action, Popup. These components are now in good shape.
• We have agreed on policies regarding setters and getters. The basic rule is to use getters and setters where it makes sense only, as opposed to defining every property in the config object.
• We have ported a number of components from GeoExt 1, including the Zoom Slider, the Slider Tip.
• We have been developing data components for handling features and layers. This work will serve as the base for feature grids and layer trees.
• The test suite is now available online. We still have failing tests, they should be taken care of in the coming days.
• We have attempted to create a Sencha Touch 2 app based on the new Map Panel. Our goal was to determine if the Map Panel could work seamlessly with both Sencha Touch 2 and Ext JS 4.
  It turns out that the Sencha Touch API is very different (or at least too different) from the Ext JS 4 API. Having a Map Panel that works with both libraries is out of reach for the time being.
• We have investigated creating builds using the Sencha build tool. The good news is that it works with GeoExt. But there are still things to sort out in order to include OpenLayers code in the builds.

The GeoExt 2 code base is available on GitHub. And here's what the new API docs look like:

Hello GeoExt 2 - GeoExt meets Ext JS 4

GeoExt 2 Code Sprint

This week is an important week in the history of GeoExt: Developers from Austria, Canada, France, Germany, The Netherlands, Switzerland and the United States have gathered in Bonn (Germany) for a code sprint to work on GeoExt Version 2, which will be based Sencha's Ext JS 4 framework.

The sprint is a joint effort of terrestris, Mapgears, Camptocamp and OpenGeo, and is accompanied by developers from Occam Labs and m-click.

Other than with many code sprints where only the sprint venue and food are covered by sponsors, the following sponsors generously provided enough funds to cover travel, accommodation and a significant share of the development costs:

• University of Bern, Centre for Development and Environment
• Swisstopo
• David Bitner, Metropolitan Airports Commission
• The U.S. Army Corps of Engineers
• Jacob Westfall
• SYNCADD
• Mettenmeier GmbH Utility Solutions
• FOSSGIS e.V.
• Felix Reichert und Partner
• landplan Büro für Landschaftsgestaltung

Day 1 - Getting Started

14 developers participated today, one of them remotely via IRC. The goal was to get up to speed with Ext JS 4, and to port some of the existing examples to the new GeoExt 2 code and GeoExt 4.

Hello World in GeoExt 2

The above live example shows a basic MapPanel - one of the achievements of efforts. In particular, the following tasks were worked on by the developers:

• Alexandre Dubé, Mapgears: work on the testing framework; updated unit tests; various small fixes.
• Andreas Hocevar, OpenGeo: set up live examples and API docs; investigated how the tree components can be ported.
• Andreas Schmitz, Occam Labs: used JSDuck to parse the API doc comments, and achieved a nice result.
• Bart van den Eijnden, OpenGeo: ported the LegendPanel.
• Christian Mayer, terrestris: ported the Popup.
• Éric Lemoine, Camptocamp: worked with Marc on the MapPanel; paired with Alexandre on the test framework.
• François Van Der Biest, Camptocamp: shared an Ext 4 tutorial; work on the examples; Ext autoloading in examples
• Frédéric Junod, Camptocamp: Ext autloading for GeoExt 2; started on the FeatureGrid and an improved FeatureStore architecture.
• Johannes Weskamm: ported the Action component.
• Julien-Samuel Lacroix, Mapgears: set up the sprint wiki and a wrote a git tutorial; work on the improving the LayerStore architecture.
• Marc Jansen, terrestris: shared an initial set of GeoExt 2 components from a previous code sprint; provided advice on Ext 4 to newbies.
• Matt Priour: LayerStore architecture improvements; provided guidance on Ext 4.
• Stéphane Brunner, Camptocamp: example improvements, work on the PrintPanel.
• Volker Grabsch: our contributor from Berlin, helped with autoloading.