Towards GeoExt 3 – Supporting both OpenLayers 3 and ExtJS 6
CC Attribution - NonCommercial - ShareAlike 3.0 Germany:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this
Jansen, Marc
GeoExt is Open Source and enables building desktop-like GIS applications through the web. It is a JavaScript framework that combines the GIS functionality of OpenLayers with the user interface savvy, rich data-package and architectural concepts of the ExtJS library provided by Sencha. Version 2.1 of GeoExt (currently in alpha-status) is the successor to the GeoExt 1.x-series and brought support for ExtJS 5 and is built atop the following installments of its base libraries: OpenLayers 2.13.1 and ExtJS 5.1.0 (or ExtJS 4.2.1 at your choice). The next version of GeoExt (v3.0.0?) will support OpenLayers 3 and the new and shiny ExtJS 6 (not finally released at the time of this writing). The talk will focus on the following aspects: * Introduction into GeoExt * New features in OpenLayers 3 and ExtJS 6 and how they can be used in GeoExt * The road towards GeoExt 3 * Results of the planned Code Sprint in June (see-3-Codesprint) * Remaining tasks and outlook The new features of OpenLayers (e.g. WebGL-support, rotated views, smaller build sizes, etc.) and Ext JS 6 (Unified code base for mobile and desktop while providing all functionality of ExtJS 5) and the description of the current state of this next major release will be highlighted in the talk. Online version of the presentation:-2015/Towards-GeoExt-3-Supporting-both-OpenLayers-3-and-ExtJS-6.html#/
 Okay, hi and welcome to the last talk of this session. My name is Mark and this talk is going to be about GXT. The most recent version is number three and I'm going to show you how far we are with this new version and what is still to do for us. So this is the outline of the talk of the upcoming 25 minutes roughly. I'm going to give a short introduction about myself and my colleague or friend that helped me preparing this presentation and is also very active in the GXT project. We have to have I think a short history of the GXT project and then I want to show you what actually is the version three of this GXT library and of course I will stop with a short outlook. So my name is Mark, I'm working for Terrestris which is also a sponsor of the Force for G. I'm a core developer and member of the project steering committee of this GXT project and I'm also a core developer of OpenLayers JavaScript library for you know like you should have heard it at this conference. I wrote a book about OpenLayers and all the other parts that flow around in this open source GIS cosmos and I actually love open source and everything that's spatial. So the company that sends me here is Terrestris, we're based in Bonn, Germany and we do all stuff with open source geospatial so if you have any questions or you want to do work with us just contact me or my boss till he's sitting right next to you. So this is not me, this is my friend Chris, he helped me create this presentation and he also helps a lot with creating GXT. He's a software developer and architect and he just recently found his own company Maximum so it's a very young startup but providing very great work. He's an OSGF foundation charter member and he speaks very often at national conferences and international ones but sadly he couldn't make it to South Korea. So he loves open source and spatial as well as I do. So this is the company, the most important things are the Twitter handle and the GitHub handle most probably so if you like what you see now just visit this site. Now this is what it's all about, so what is Geoxt? It is a JavaScript framework for sophisticated web GIS and it's based on open layers and EXTJS. So basically it extends EXTJS with spatial components and it allows you to for example read spatial formats like the answer of a WFS request which is oftentimes GML and you can put it into the very rich data components of EXTJS and then you can put these data components into other user interface components of EXTJS and it all works very well. So basically you create rich web mapping interfaces with it. Now copyright is assigned to the OSGEO, it's open source and this is very interesting. The first commit for this project, for the Geoxt project happened in March 2009 which means it's six years old and counting which is for a JavaScript library, you know like it's a dinosaur. So that was a lot of text on the previous slide. So Geoxt is basically the marriage of EXTJS and open layers. It is also the child of EXTJS and open layers because it inherits some of the functionality and the characteristics of its parents. Like EXTJS has a way of doing things and open layers has a way of doing things and all these characteristics of its parent libraries are inherited by Geoxt. And as I see it, it both enhances EXTJS and open layers. So it's a win-win-win situation actually. So now a short history of Geoxt. So version one, the one that started in 2009 was based on the version three of EXTJS and open layers 2.x. I think it started with 2.9 and in the end it supported basically everything until 2.11 or something. So this is how one example looks like and you can see all of the stuff that I just recently mentioned in this picture which will be now in for the future versions. We will see the same picture basically. So you see an open layers map embedded into a user interface component that we get for free from EXTJS. And also on the right side you see a list, a grid, a very rich table of the features that you see on the map. So there's everything in there which is at the core of Geoxt. It has a component, a visual part, like the map is in a container which can then live in various layouts that EXTJS gives us. And also the data is ready to be used because it's in a store of EXTJS. So as I said, it started in 2009 and back in 2009 EXTJS was hot, very hot. Right now it's not and you can see this here. This is a tweet that flowed around Twitter two weeks ago or something. It's linked in the presentation. So other EXTJS frameworks are currently hotter. Like for example AngularJS is hot since 2014 or maybe it only was hot in 2014. I'm sure you can make it up yourself. So the current hotness is ReactJS obviously. So this is just back in the days EXTJS was the one framework giving us everything. It was very mature back then even and it provided us with very rich possibilities of enhancing open layers or creating a library, getting the most out of its parents. So while the hotness has gone away obviously from EXTJS, it's still there and it's still alive, EXTJS and so is Geoxt. And I'm sure that it can be a very good choice if you want to address some of, yeah, specific problem domain. We will see which ones that could possibly be. So now Geoxt 2.0, that one was based on four, version four of EXTJS and still open layers too. This one is living on this, well, all the code is on GitHub so you will find the code to all these versions on GitHub. And as you can see, everything got a little bit more modern but there was no radical change in it even though it was very hard to implement it because there was the change between EXTJS 3 and 4 was quite of a hassle and yeah, but we managed to get more or less feature parity with the version one with this release. So it provided us with many, many functions. So basically the creation syntax was changed back then so you couldn't do, you shouldn't do no longer new my Geoxt class name but you should do EXTJS create my class name. And it brought us support for the programming model of MVC, model view controller. It was easier to theme stuff so that it wouldn't look always the same and it also brought the first compatibility to the censor tools that float around EXTJS so we could use these censor tools to detect the dependency graph of one particular component so that we would be able to build smaller builds of EXTJS which would just give those components that you actually need. Now this one is very young one. This is Geoxt 2.1X, it's still in beta. I think my friend Chris has released it a week ago or something. You see the layout has changed a little bit and the most important change here is this version 2.1 gives you the choice between EXTJS 4.2 or EXTJS 5.1 at your choice. So every one of these major versions of EXTJS comes with new features and enhanced performance probably so you can see yourself if you want to upgrade your applications to the newest one of EXTJS and then it should simply take this Geoxt version. So these are the stuff that we're coming with 2.1 so we now support two-way binding which is essentially because OpenLayers threw it away so they decided to no longer have it which is a good decision I think for OpenLayers but it's a nice thing to have if you're developing applications. And also had first steps towards responsive design of your applications so like you could dynamically reconfigure your components depending on the environment where the code would be run. So on your tablet for example it would have a different appearance than on a desktop PC. But in the meantime OpenLayers 3 and EXTJS 6 were born and so we were late again and the run began from start so we wanted of course to support both of these new versions which is why we had this Geoxt 3 code sprint that happened in June this year. It was in Bonn, a beautiful city you should definitely visit. It had 10 developers from four countries and there's a small picture down here from all of us. We had a good time and we did also a lot of work. We basically built the foundation for Geoxt 3 based on those versions that were mentioned a lot of time like OpenLayers 3 and EXTJS 6. So these are the sponsors of this particular sprint which I am very grateful that they gave us their money and their support or their standard developers. So without these entities we wouldn't be there where we are right now and there's all sorts of different entities on this slide. Some of it is German but the first one for example is a part of a church. They are also sponsoring Open Source. Very nice. So thank you. So now what is it? Geoxt 3. So the objectives when we were starting Geoxt 3 were to start from scratch and we definitely wanted to benefit from the Sencha tooling because in the version 6 they provide us with a very sophisticated build tool, the Sencha command which has been there also for a long time but they improved it over the time. And we also wanted to benefit from the OpenLayers feature galore which you may or may not have seen in the talk that was yesterday I guess from Andreas Hocheva and the other fellows like Tim and all these guys. So OpenLayers is really feature rich and we wanted to have this. We wanted to be unbiased against the medium so we wanted to work both on desktop and mobile because the most recent basic, well 2.1 doesn't actually work very well on mobile. You can open the page. It will load but it's not optimized at all and it's probably not what you want to do. We wanted to have more examples and improve tests and better documentation as always. So this is the state. It's all on GitHub. We have a little bit more than 300 commits. There are seven contributors so far from some entities, not well it's like five entities behind these committers and in their free time. The building and packaging is, I consider it done so it's all very well now. So every commit creates a new Sencha package which is a detail you may or may not know but this is the thing how you provide additional functionality into EXTJS by creating a package. It's comparable to an MPM package. It's not the same though and it's all done and it's built automatically. The same is true for the API docs. They are built automatically. Yes, we already have a test coverage of 82%. We are reaching for, well, we want to have more but I think this is already a good number and I will not try to reach 100 just because of the 100. I want to have good tests. I want to have unbiased tests, not ones that try to reach lines just for reaching them. So the API docs are looking nice and we can have probably a look at them. We have some examples and that's a very important point here on this slide. We switched the open source license from BSD to GPL version 3. So all, as I said, we started from scratch so with an empty Git repository and we only have seven contributors so that change was easy to do but we were forced to do that because in previous versions of EXTJS they would give open source projects an exception. They would allow to use a different compatible license than GPL and this exception has been removed from their website. We have been in contact with them and for now it's GPL which is a good license, I think. Okay, so what's missing then? It's a universal app example. So a universal app is one that runs on mobile with mobile optimized code and one that runs on a desktop optimized code but with one code basis. We have examples of that in projects of us that use this GXT version 3 but there is no such example on the website so we need to create one and we have zero releases which is actually a pity we need to release that stuff. So the homepage is already there. All the API docs and the latest API docs with EXTJS are linked on the homepage and also in the slides and this is what I wanted to talk about. So on the command line, so once you have the Censure environment ready to create Censure applications you install like the Censure binary, it's available for operating systems and then you have it on the command line, you simply say, hey, Censure package repo add which adds a new repo where Censure tool can check for packages and this is a link to the GitHub GH pages which is updated on every commit. And then we say, we basically tell it in the first line, hey, if someone wants to use GXT, hey, go and search for it at this location. And then in your app.js you require simply GXT and that's it. So it's nothing to download. It's easy to get started using GXTJS. It's different though than with all those other JavaScript libraries that you may or may not know where you have the dependency usually in a file called package JSON or Bower JSON or whatever. But it's very easy as well. Never try and stop to learn different ways of resolving your dependencies. Some examples. So this is the most basic example that we could think of which is just an open layers map. You might see it. That's San Francisco. Inside of a layout in XT6. This is looking a little bit of boring but this is the first component that we had actually working. And the nice thing is in GXT2 and one there was a component called GXTPanel.map or map panel in version one actually. So that was a special kind of a panel that would display an open layers map and allow the user to interact with that map. Now in GXT3 the map panel is gone which is set, which I said, you know, we started from scratch and we rethought this. So now the inheritance of the map component, so the thing that actually draws points, polygons and where you have your WMS or something is now a component. You may or may not be experts in XTJS but this actually, this small change in the hierarchy of inheritance and the inheritance change where we put our work in makes it possible to reuse the complete code that's there to resize the map in both mobile environments and also on the desktop because the panel class as I said earlier is not existing for the mobile part. This sounds like a lot of details but I just want you to get, we rethought everything that GXT was, you know, about. Like starting with the base component. So this is how you would do it. You create an open layers map just like you usually do it. Give it a view, some layers, some interaction and then you pass this map component over to, sorry, this open layers map over to this call EXT create and then you're done. So this is, well, most, as I said, the work on this is sponsored or was sponsored for a big part and one of our customers wanted to have an overview map which back at the day didn't exist in open layers and I was thinking as a member of that project that it probably also doesn't make any sense to have an overview map in the map library itself. Well now time has passed, there is an overview, there is an overview map component in, in open layers but it didn't give the functionality that we wanted. For example, we wanted to show, I can, I can even show this. I think I can do like this. That's the real one. Give me a second. So while this loads, it's a little bit different from what it shows in that the, there is these rectangles you see here and here and these are indicators of the rotation of the main map. I can show you probably now in an action. So this is a map and if I rotate this map, how do we do it? Yeah, I do it like this. You see that on the right side, the rotation isn't simply covered. Well, it's not copied over because then you would have two rotated maps and the, you know, the target, well, the, the, what an overview map wants to give you is an overview and doesn't want to confuse you anymore. That's what I guess. So what it actually does is it's showing the extent of the other map, but then rotated and also you may notice there is this small dot here and here, which is the top left corner of the map. It's just a small deviation of how we have tried to solve this problem. Excuse me. No, in this, in this example, they are not, you can actually, I can, I think I can click here, I click and then it, the map is working, is reacting on this, but it's too old to have the modify interaction. Oh no, sorry. There's an interaction now in, in open layers that you can use to drag, actually, you know, like rectangles and then this will be coming in probably some days. So we have layer trees. So this is one thing that differentiated us, I think, or to my knowledge from most other applications or, or libraries around open layers with some other nice JavaScript framework. So we can actually have trees, like with direct and drop to, to allow the user to interact with a complex hierarchical structure of layers in the map, which is a nice thing. And this is also completely rewrite from all the things that we had in previous versions. So this is just a plug-in and it's like 200 lines of code where previously we would have had probably 300 lines of code, but it stuffed over five classes and I never understood the total potential between the thing, between this implementation. So when we started from new, I started with a, or we started with a new, a thought on it. So I'm very happy with it. What's there right now. And yeah, we hope that it solves all the problems. Okay. So we have an integration with the MapFish print service. That's a component that's a part basically from another open source tool, which is called MapFish. It's basically is able to create PDFs on the fly. If you give it a spec, you pass it a spec over HTTP requests and then it creates in a very nice speed, well, high performance. It creates a nice PDF of your application. And why is this thing here? Because it's actually not so, you know, hey, you can print. Yeah, cool. But this thing is cool because the implementation of the logic behind this is very heavily inspired by the implementation that mainly came to camp. Another company you have seen here did for AngularJS. For their project AngularJS combined with OpenLayers, NGO, they call it. You probably have seen the talk about it. So they have a reference implementation of how to serialize OpenLayers so that then they that the MapFish print service can understand it. And what we took is we took all the code from them and the test suite because that's, you know, it was already tested. And yeah, we could integrate it without any hassle in this. So you can now have the same experience, hopefully, of printing maps as with NGO. So this is the created PDF. Then you see it's the same. It has schools, I think. Those are vector layers. It's a vector layer and a raster layer. So there's what I said. GXD tries to also enhance OpenLayers. So one thing that me personally always bugged was, you know, we have a lot of discussions inside the OpenLayers team. How do we name some API? Is this API or is it not? Like we do it all the time. So inside this smaller team of GXD, we have the chance of giving a little bit more user-friendly APIs. For example, what we have in nearly every application that I developed in the past 10 years, we wanted to have something like a pointer rest, which is a pop-up once your mouse rested on a certain position for a certain amount of time. And you can all do it like with setting up timers and waiting and then calculating whether the position changed in an amount that you consider enough to be a new location. Has he actually moved it or has he just slightly moved one pixel to the top of the mouse? But GXD comes with some of these nice added entities on top. So there's just a new event which is called pointer rest and pointer rest out, which is configurable. So when do you just by providing numbers, you'll wait for 500 milliseconds and then look at the deltas and then the pointer event will be fired or not. This is just easier to use this functionally like the hovering pop-up or something. So that's a small pop-up. We can render all those features that OpenLehers gives us inside of EXT components. So why is this? This is an ugly example, but it's a very technical one because it shows all the different ways of, you know, a big part of the different ways of creating and styling features in OpenLehers and embedding them inside of components of GXD. So what you can basically do is you can create maps like these or examples like these. It's a little bit light, but this is Germany, part of Europe, and Germany is in the center. And you can see blue and red dots and you see them twice actually because you see the correct, you see them on the map where OpenLehers takes care of rendering the features as you as a developer said, hey, this is a red point. And on the right side, you also see the red points, but this time they are rendered inside of an EXT component, which, you know, this case, it makes it easy to differentiate between the red and the blue points, but you may also have a classified like a vector where there are seven classes or something. So you can very easily interact, well, visually see which row belongs to which feature and also you can interact in both ways. So when you select a feature on a map, the feature is selected in the grid. When you select a value in the grid, it's also selected on the map. So this one looks a little bit crazy from the colors, but that's what it's all about. This is the map you form. Oh, sorry, that's the wrong way. Oh, sorry. So I'll do it like this. So this is basically the same example. And what you see here is some map. And on the right, it's rendered with the WebGL renderer in this case. And on the right side, you see certain properties of open layers objects represented this time as members of a form. So on top here, we see the resolution. So the resolution of the map view is 38.22. And the rotation currently in radiance is 0.4. And we see here the opacity and the brightness and the contrast and the use saturation of that one layer. So this example basically shows us this two-way binding. So if one side is being changed, the other one is updated automatically. And this works for all open layers objects inheriting from OL object, which is a very, very basic class in open layer. So you could have this with a lot of stuff. So if I change the opacity, you see it gets darker. If I change the brightness, it gets darker. Do they have developer tools here? Yeah, they probably have. So it's a bit small. Is it like this? Yes. So there should be a global variable called map. I hope you can read it a little bit. I just typed map and then I can say get view. Oh yeah, where are the braces? Yes. Opacity, for example. Oh no, sorry. I think it's the layer, right? Set rotation, that's easier. Set rotation. It's currently 0.4 and now let's give it 0.5. Yeah, very impressive. That shouldn't have happened. So map, there's obviously no component called map. I could get this. Excuse me? Yes, but whatever it is. So I can rotate the map. That was actually additional sugar on top of it, which is right now just isn't working as I wanted it to work. And life coding is actually not my thing. But whatever it is, so if I would have access right now to the map variable, which is the open layers map, and I could change it, then not only would the map be rotated, but also the values in the form, because we just saw the other way around where I manipulated the form and then the map was rotated. So for now, just believe me that. And you can try it online. This is an online example. So that was the other one. So I'm nearly, nearly done. So this is the things that we need to do, the outlook on the future. We definitely need to release this stuff. And so to make it easier that other people can actually use it outside of our very small scope, because there are some users already. But I think that could be more. We need to have a roadmap right now. A lot of it is actually guided by needs that my and Chris's company or someone else's company directly gives to us. And then we, you know, got to start implementing. We need to have a roadmap. We probably need to restructure a little bit in order to share more code. Like probably there's going to be probably, this is, you know, outlook future. There's probably going to be like three libraries of which you don't know, because you would simply use GXT, but the inheritance would be figured out for you, called GXT-Base, Modern Classic. This is a thought that I currently have, but I didn't talk it over. It's actually you are the first purple people to hear this. So it may be a good idea, but let's talk it over. Yes. And as I said, we need to actually release it. So that's it. Thank you. And I hope you have some questions or some remarks. Thank you. We are 10 minutes out of time. Yeah, just said, I was trying to tell you, but you are okay. Sorry. So, yes, if you have any questions, just contact directly, Mark, maybe Spedger, or if you want to stay a bit longer, if there is one or other question. No. Okay. Hey, honestly, you should have told me. I can, I can, I can do these talks like one hour or two hours. No, you were lucky that I was stopping now. No problem. We will. Next session is the fourth. So, yeah. Okay. So sorry to take so long. Yeah. Okay get ready.
 Okay, hi and welcome to the last talk of this session.  My name is Mark and this talk is going to be about GXT.  The most recent version is number three and I'm going to show you how far we are with  this new version and what is still to do for us.  So this is the outline of the talk of the upcoming 25 minutes roughly.  I'm going to give a short introduction about myself and my colleague or friend that helped  me preparing this presentation and is also very active in the GXT project.  We have to have I think a short history of the GXT project and then I want to show you  what actually is the version three of this GXT library and of course I will stop with  a short outlook.  So my name is Mark, I'm working for Terrestris which is also a sponsor of the Force for G.  I'm a core developer and member of the project steering committee of this GXT project and  I'm also a core developer of OpenLayers JavaScript library for you know like you should have  heard it at this conference.  I wrote a book about OpenLayers and all the other parts that flow around in this open  source GIS cosmos and I actually love open source and everything that's spatial.  So the company that sends me here is Terrestris, we're based in Bonn, Germany and we do all  stuff with open source geospatial so if you have any questions or you want to do work  with us just contact me or my boss till he's sitting right next to you.  So this is not me, this is my friend Chris, he helped me create this presentation and  he also helps a lot with creating GXT.  He's a software developer and architect and he just recently found his own company Maximum  so it's a very young startup but providing very great work.  He's an OSGF foundation charter member and he speaks very often at national conferences  and international ones but sadly he couldn't make it to South Korea.  So he loves open source and spatial as well as I do.  So this is the company, the most important things are the Twitter handle and the GitHub  handle most probably so if you like what you see now just visit this site.  Now this is what it's all about, so what is Geoxt?  It is a JavaScript framework for sophisticated web GIS and it's based on open layers and  EXTJS.  So basically it extends EXTJS with spatial components and it allows you to for example  read spatial formats like the answer of a WFS request which is oftentimes GML and you can  put it into the very rich data components of EXTJS and then you can put these data components  into other user interface components of EXTJS and it all works very well.  So basically you create rich web mapping interfaces with it.  Now copyright is assigned to the OSGEO, it's open source and this is very interesting.  The first commit for this project, for the Geoxt project happened in March 2009 which  means it's six years old and counting which is for a JavaScript library, you know like  it's a dinosaur.  So that was a lot of text on the previous slide.  So Geoxt is basically the marriage of EXTJS and open layers.  It is also the child of EXTJS and open layers because it inherits some of the functionality  and the characteristics of its parents.  Like EXTJS has a way of doing things and open layers has a way of doing things and all these  characteristics of its parent libraries are inherited by Geoxt.  And as I see it, it both enhances EXTJS and open layers.  So it's a win-win-win situation actually.  So now a short history of Geoxt.  So version one, the one that started in 2009 was based on the version three of EXTJS and  open layers 2.x.  I think it started with 2.9 and in the end it supported basically everything until 2.11  or something.  So this is how one example looks like and you can see all of the stuff that I just recently  mentioned in this picture which will be now in for the future versions.  We will see the same picture basically.  So you see an open layers map embedded into a user interface component that we get for  free from EXTJS.  And also on the right side you see a list, a grid, a very rich table of the features  that you see on the map.  So there's everything in there which is at the core of Geoxt.  It has a component, a visual part, like the map is in a container which can then live  in various layouts that EXTJS gives us.  And also the data is ready to be used because it's in a store of EXTJS.  So as I said, it started in 2009 and back in 2009 EXTJS was hot, very hot.  Right now it's not and you can see this here.  This is a tweet that flowed around Twitter two weeks ago or something.  It's linked in the presentation.  So other EXTJS frameworks are currently hotter.  Like for example AngularJS is hot since 2014 or maybe it only was hot in 2014.  I'm sure you can make it up yourself.  So the current hotness is ReactJS obviously.  So this is just back in the days EXTJS was the one framework giving us everything.  It was very mature back then even and it provided us with very rich possibilities of enhancing  open layers or creating a library, getting the most out of its parents.  So while the hotness has gone away obviously from EXTJS, it's still there and it's still  alive, EXTJS and so is Geoxt.  And I'm sure that it can be a very good choice if you want to address some of, yeah, specific  problem domain.  We will see which ones that could possibly be.  So now Geoxt 2.0, that one was based on four, version four of EXTJS and still open layers  too.  This one is living on this, well, all the code is on GitHub so you will find the code  to all these versions on GitHub.  And as you can see, everything got a little bit more modern but there was no radical change  in it even though it was very hard to implement it because there was the change between EXTJS  3 and 4 was quite of a hassle and yeah, but we managed to get more or less feature parity  with the version one with this release.  So it provided us with many, many functions.  So basically the creation syntax was changed back then so you couldn't do, you shouldn't  do no longer new my Geoxt class name but you should do EXTJS create my class name.  And it brought us support for the programming model of MVC, model view controller.  It was easier to theme stuff so that it wouldn't look always the same and it also brought the  first compatibility to the censor tools that float around EXTJS so we could use these censor  tools to detect the dependency graph of one particular component so that we would be able  to build smaller builds of EXTJS which would just give those components that you actually  need.  Now this one is very young one.  This is Geoxt 2.1X, it's still in beta.  I think my friend Chris has released it a week ago or something.  You see the layout has changed a little bit and the most important change here is this  version 2.1 gives you the choice between EXTJS 4.2 or EXTJS 5.1 at your choice.  So every one of these major versions of EXTJS comes with new features and enhanced performance  probably so you can see yourself if you want to upgrade your applications to the newest  one of EXTJS and then it should simply take this Geoxt version.  So these are the stuff that we're coming with 2.1 so we now support two-way binding  which is essentially because OpenLayers threw it away so they decided to no longer have  it which is a good decision I think for OpenLayers but it's a nice thing to have if you're developing  applications.  And also had first steps towards responsive design of your applications so like you could  dynamically reconfigure your components depending on the environment where the code would be  run.  So on your tablet for example it would have a different appearance than on a desktop PC.  But in the meantime OpenLayers 3 and EXTJS 6 were born and so we were late again and the  run began from start so we wanted of course to support both of these new versions which  is why we had this Geoxt 3 code sprint that happened in June this year.  It was in Bonn, a beautiful city you should definitely visit.  It had 10 developers from four countries and there's a small picture down here from all  of us.  We had a good time and we did also a lot of work.  We basically built the foundation for Geoxt 3 based on those versions that were mentioned  a lot of time like OpenLayers 3 and EXTJS 6.  So these are the sponsors of this particular sprint which I am very grateful that they  gave us their money and their support or their standard developers.  So without these entities we wouldn't be there where we are right now and there's all sorts  of different entities on this slide.  Some of it is German but the first one for example is a part of a church.  They are also sponsoring Open Source.  Very nice.  So thank you.  So now what is it?  Geoxt 3.  So the objectives when we were starting Geoxt 3 were to start from scratch and we definitely  wanted to benefit from the Sencha tooling because in the version 6 they provide us with  a very sophisticated build tool, the Sencha command which has been there also for a long  time but they improved it over the time.  And we also wanted to benefit from the OpenLayers feature galore which you may or may not have  seen in the talk that was yesterday I guess from Andreas Hocheva and the other fellows  like Tim and all these guys.  So OpenLayers is really feature rich and we wanted to have this.  We wanted to be unbiased against the medium so we wanted to work both on desktop and mobile  because the most recent basic, well 2.1 doesn't actually work very well on mobile.  You can open the page.  It will load but it's not optimized at all and it's probably not what you want to do.  We wanted to have more examples and improve tests and better documentation as always.  So this is the state.  It's all on GitHub.  We have a little bit more than 300 commits.  There are seven contributors so far from some entities, not well it's like five entities  behind these committers and in their free time.  The building and packaging is, I consider it done so it's all very well now.  So every commit creates a new Sencha package which is a detail you may or may not know  but this is the thing how you provide additional functionality into EXTJS by creating a package.  It's comparable to an MPM package.  It's not the same though and it's all done and it's built automatically.  The same is true for the API docs.  They are built automatically.  Yes, we already have a test coverage of 82%.  We are reaching for, well, we want to have more but I think this is already a good number  and I will not try to reach 100 just because of the 100.  I want to have good tests.  I want to have unbiased tests, not ones that try to reach lines just for reaching them.  So the API docs are looking nice and we can have probably a look at them.  We have some examples and that's a very important point here on this slide.  We switched the open source license from BSD to GPL version 3.  So all, as I said, we started from scratch so with an empty Git repository and we only  have seven contributors so that change was easy to do but we were forced to do that because  in previous versions of EXTJS they would give open source projects an exception.  They would allow to use a different compatible license than GPL and this exception has been  removed from their website.  We have been in contact with them and for now it's GPL which is a good license, I think.  Okay, so what's missing then?  It's a universal app example.  So a universal app is one that runs on mobile with mobile optimized code and one that runs  on a desktop optimized code but with one code basis.  We have examples of that in projects of us that use this GXT version 3 but there is no  such example on the website so we need to create one and we have zero releases which  is actually a pity we need to release that stuff.  So the homepage is already there.  All the API docs and the latest API docs with EXTJS are linked on the homepage and also  in the slides and this is what I wanted to talk about.  So on the command line, so once you have the Censure environment ready to create Censure  applications you install like the Censure binary, it's available for operating systems  and then you have it on the command line, you simply say, hey, Censure package repo  add which adds a new repo where Censure tool can check for packages and this is a link  to the GitHub GH pages which is updated on every commit.  And then we say, we basically tell it in the first line, hey, if someone wants to use  GXT, hey, go and search for it at this location.  And then in your app.js you require simply GXT and that's it.  So it's nothing to download.  It's easy to get started using GXTJS.  It's different though than with all those other JavaScript libraries that you may or  may not know where you have the dependency usually in a file called package JSON or Bower  JSON or whatever.  But it's very easy as well.  Never try and stop to learn different ways of resolving your dependencies.  Some examples.  So this is the most basic example that we could think of which is just an open layers  map.  You might see it.  That's San Francisco.  Inside of a layout in XT6.  This is looking a little bit of boring but this is the first component that we had actually  working.  And the nice thing is in GXT2 and one there was a component called GXTPanel.map or map  panel in version one actually.  So that was a special kind of a panel that would display an open layers map and allow  the user to interact with that map.  Now in GXT3 the map panel is gone which is set, which I said, you know, we started from  scratch and we rethought this.  So now the inheritance of the map component, so the thing that actually draws points, polygons  and where you have your WMS or something is now a component.  You may or may not be experts in XTJS but this actually, this small change in the hierarchy  of inheritance and the inheritance change where we put our work in makes it possible  to reuse the complete code that's there to resize the map in both mobile environments  and also on the desktop because the panel class as I said earlier is not existing for  the mobile part.  This sounds like a lot of details but I just want you to get, we rethought everything that  GXT was, you know, about.  Like starting with the base component.  So this is how you would do it.  You create an open layers map just like you usually do it.  Give it a view, some layers, some interaction and then you pass this map component over  to, sorry, this open layers map over to this call EXT create and then you're done.  So this is, well, most, as I said, the work on this is sponsored or was sponsored for a  big part and one of our customers wanted to have an overview map which back at the day  didn't exist in open layers and I was thinking as a member of that project that it probably  also doesn't make any sense to have an overview map in the map library itself.  Well now time has passed, there is an overview, there is an overview map component in, in  open layers but it didn't give the functionality that we wanted.  For example, we wanted to show, I can, I can even show this.  I think I can do like this.  That's the real one.  Give me a second.  So while this loads, it's a little bit different from what it shows in that the, there is these  rectangles you see here and here and these are indicators of the rotation of the main  map.  I can show you probably now in an action.  So this is a map and if I rotate this map, how do we do it?  Yeah, I do it like this.  You see that on the right side, the rotation isn't simply covered.  Well, it's not copied over because then you would have two rotated maps and the, you know,  the target, well, the, the, what an overview map wants to give you is an overview and doesn't  want to confuse you anymore.  That's what I guess.  So what it actually does is it's showing the extent of the other map, but then rotated  and also you may notice there is this small dot here and here, which is the top left corner  of the map.  It's just a small deviation of how we have tried to solve this problem.  Excuse me.  No, in this, in this example, they are not, you can actually, I can, I think I can click  here, I click and then it, the map is working, is reacting on this, but it's too old to have  the modify interaction.  Oh no, sorry.  There's an interaction now in, in open layers that you can use to drag, actually, you know,  like rectangles and then this will be coming in probably some days.  So we have layer trees.  So this is one thing that differentiated us, I think, or to my knowledge from most other  applications or, or libraries around open layers with some other nice JavaScript framework.  So we can actually have trees, like with direct and drop to, to allow the user to interact  with a complex hierarchical structure of layers in the map, which is a nice thing.  And this is also completely rewrite from all the things that we had in previous versions.  So this is just a plug-in and it's like 200 lines of code where previously we would have  had probably 300 lines of code, but it stuffed over five classes and I never understood the  total potential between the thing, between this implementation.  So when we started from new, I started with a, or we started with a new, a thought on  it.  So I'm very happy with it.  What's there right now.  And yeah, we hope that it solves all the problems.  Okay.  So we have an integration with the MapFish print service.  That's a component that's a part basically from another open source tool, which is called  MapFish.  It's basically is able to create PDFs on the fly.  If you give it a spec, you pass it a spec over HTTP requests and then it creates in a very  nice speed, well, high performance.  It creates a nice PDF of your application.  And why is this thing here?  Because it's actually not so, you know, hey, you can print.  Yeah, cool.  But this thing is cool because the implementation of the logic behind this is very heavily inspired  by the implementation that mainly came to camp.  Another company you have seen here did for AngularJS.  For their project AngularJS combined with OpenLayers, NGO, they call it.  You probably have seen the talk about it.  So they have a reference implementation of how to serialize OpenLayers so that then they  that the MapFish print service can understand it.  And what we took is we took all the code from them and the test suite because that's, you  know, it was already tested.  And yeah, we could integrate it without any hassle in this.  So you can now have the same experience, hopefully, of printing maps as with NGO.  So this is the created PDF.  Then you see it's the same.  It has schools, I think.  Those are vector layers.  It's a vector layer and a raster layer.  So there's what I said.  GXD tries to also enhance OpenLayers.  So one thing that me personally always bugged was, you know, we have a lot of discussions  inside the OpenLayers team.  How do we name some API?  Is this API or is it not?  Like we do it all the time.  So inside this smaller team of GXD, we have the chance of giving a little bit more user-friendly  APIs.  For example, what we have in nearly every application that I developed in the past 10  years, we wanted to have something like a pointer rest, which is a pop-up once your  mouse rested on a certain position for a certain amount of time.  And you can all do it like with setting up timers and waiting and then calculating whether  the position changed in an amount that you consider enough to be a new location.  Has he actually moved it or has he just slightly moved one pixel to the top of the mouse?  But GXD comes with some of these nice added entities on top.  So there's just a new event which is called pointer rest and pointer rest out, which is  configurable.  So when do you just by providing numbers, you'll wait for 500 milliseconds and then look at  the deltas and then the pointer event will be fired or not.  This is just easier to use this functionally like the hovering pop-up or something.  So that's a small pop-up.  We can render all those features that OpenLehers gives us inside of EXT components.  So why is this?  This is an ugly example, but it's a very technical one because it shows all the different ways  of, you know, a big part of the different ways of creating and styling features in OpenLehers  and embedding them inside of components of GXD.  So what you can basically do is you can create maps like these or examples like these.  It's a little bit light, but this is Germany, part of Europe, and Germany is in the center.  And you can see blue and red dots and you see them twice actually because you see the  correct, you see them on the map where OpenLehers takes care of rendering the features as you  as a developer said, hey, this is a red point.  And on the right side, you also see the red points, but this time they are rendered inside  of an EXT component, which, you know, this case, it makes it easy to differentiate between  the red and the blue points, but you may also have a classified like a vector where there  are seven classes or something.  So you can very easily interact, well, visually see which row belongs to which feature and  also you can interact in both ways.  So when you select a feature on a map, the feature is selected in the grid.  When you select a value in the grid, it's also selected on the map.  So this one looks a little bit crazy from the colors, but that's what it's all about.  This is the map you form.  Oh, sorry, that's the wrong way.  Oh, sorry.  So I'll do it like this.  So this is basically the same example.  And what you see here is some map.  And on the right, it's rendered with the WebGL renderer in this case.  And on the right side, you see certain properties of open layers objects represented this time  as members of a form.  So on top here, we see the resolution.  So the resolution of the map view is 38.22.  And the rotation currently in radiance is 0.4.  And we see here the opacity and the brightness and the contrast and the use saturation of  that one layer.  So this example basically shows us this two-way binding.  So if one side is being changed, the other one is updated automatically.  And this works for all open layers objects inheriting from OL object, which is a very,  very basic class in open layer.  So you could have this with a lot of stuff.  So if I change the opacity, you see it gets darker.  If I change the brightness, it gets darker.  Do they have developer tools here?  Yeah, they probably have.  So it's a bit small.  Is it like this?  Yes.  So there should be a global variable called map.  I hope you can read it a little bit.  I just typed map and then I can say get view.  Oh yeah, where are the braces?  Yes.  Opacity, for example.  Oh no, sorry.  I think it's the layer, right?  Set rotation, that's easier.  Set rotation.  It's currently 0.4 and now let's give it 0.5.  Yeah, very impressive.  That shouldn't have happened.  So map, there's obviously no component called map.  I could get this.  Excuse me?  Yes, but whatever it is.  So I can rotate the map.  That was actually additional sugar on top of it, which is right now just isn't working  as I wanted it to work.  And life coding is actually not my thing.  But whatever it is, so if I would have access right now to the map variable, which is the  open layers map, and I could change it, then not only would the map be rotated, but also  the values in the form, because we just saw the other way around where I manipulated the  form and then the map was rotated.  So for now, just believe me that.  And you can try it online.  This is an online example.  So that was the other one.  So I'm nearly, nearly done.  So this is the things that we need to do, the outlook on the future.  We definitely need to release this stuff.  And so to make it easier that other people can actually use it outside of our very small  scope, because there are some users already.  But I think that could be more.  We need to have a roadmap right now.  A lot of it is actually guided by needs that my and Chris's company or someone else's  company directly gives to us.  And then we, you know, got to start implementing.  We need to have a roadmap.  We probably need to restructure a little bit in order to share more code.  Like probably there's going to be probably, this is, you know, outlook future.  There's probably going to be like three libraries of which you don't know, because you would  simply use GXT, but the inheritance would be figured out for you, called GXT-Base,  Modern Classic.  This is a thought that I currently have, but I didn't talk it over.  It's actually you are the first purple people to hear this.  So it may be a good idea, but let's talk it over.  Yes.  And as I said, we need to actually release it.  So that's it.  Thank you.  And I hope you have some questions or some remarks.  Thank you.  We are 10 minutes out of time.  Yeah, just said, I was trying to tell you, but you are okay.  Sorry.  So, yes, if you have any questions, just contact directly, Mark, maybe Spedger, or if you want  to stay a bit longer, if there is one or other question.  No.  Okay.  Hey, honestly, you should have told me.  I can, I can, I can do these talks like one hour or two hours.  No, you were lucky that I was stopping now.  No problem.  We will.  Next session is the fourth.  So, yeah.  Okay.  So sorry to take so long.  Yeah.  Okay get ready.
PT8-08_0_95.png PT8-08_96_2267.png PT8-08_2268_3743.png PT8-08_3744_4067.png PT8-08_4068_6839.png PT8-08_6840_6935.png PT8-08_6936_8723.png PT8-08_8724_10907.png PT8-08_10908_14495.png PT8-08_14496_15983.png PT8-08_15984_16775.png PT8-08_16776_19211.png PT8-08_19212_27731.png PT8-08_27732_28247.png PT8-08_28248_29243.png PT8-08_29244_29291.png PT8-08_29292_29363.png PT8-08_29364_29735.png PT8-08_29736_29783.png PT8-08_29784_30887.png PT8-08_30888_31079.png PT8-08_31080_31655.png PT8-08_31656_33407.png PT8-08_33408_33455.png PT8-08_33456_35567.png PT8-08_35568_35843.png PT8-08_35844_38063.png PT8-08_38064_38819.png PT8-08_38820_40355.png PT8-08_40356_40607.png PT8-08_40608_40691.png PT8-08_40692_40751.png PT8-08_40752_42383.png PT8-08_42384_42491.png PT8-08_42492_42599.png PT8-08_42600_42659.png PT8-08_42660_42731.png PT8-08_42732_45179.png PT8-08_45180_45251.png PT8-08_45252_45335.png PT8-08_45336_47171.png PT8-08_47172_47807.png PT8-08_47808_48539.png PT8-08_48540_48690.png