Towards GeoExt 3 – Supporting both OpenLayers 3 and ExtJS 6

Video thumbnail (Frame 0) Video thumbnail (Frame 2703) Video thumbnail (Frame 8703) Video thumbnail (Frame 14489) Video thumbnail (Frame 16766) Video thumbnail (Frame 25206) Video thumbnail (Frame 29236) Video thumbnail (Frame 30880) Video thumbnail (Frame 31651) Video thumbnail (Frame 33397) Video thumbnail (Frame 35563) Video thumbnail (Frame 38804) Video thumbnail (Frame 40598) Video thumbnail (Frame 42334) Video thumbnail (Frame 45173) Video thumbnail (Frame 48536)
Video in TIB AV-Portal: Towards GeoExt 3 – Supporting both OpenLayers 3 and ExtJS 6

Formal Metadata

Towards GeoExt 3 – Supporting both OpenLayers 3 and ExtJS 6
Title of Series
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 license.
Release Date
Production Year
Production Place
Seoul, South Korea

Content Metadata

Subject Area
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 * 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:
Boss Corporation Presentation of a group Open source Software developer Forcing (mathematics) Projective plane Open set Mereology Computer font Number Revision control Computer animation Core dump Freeware
Point (geometry) Axiom of choice Slide rule Dataflow Presentation of a group Functional (mathematics) Beta function Link (knot theory) Open source Parity (mathematics) Connectivity (graph theory) Characteristic polynomial 1 (number) Open set Mereology Twitter Web 2.0 Revision control Mathematics Latent heat Core dump Software framework Damping Form (programming) Social class Overlay-Netz User interface Domain name Programming paradigm Arm Graph (mathematics) Inheritance (object-oriented programming) Mapping Software developer Projective plane Data storage device Electronic mailing list Maxima and minima Bit Extreme programming Machine code Cartesian coordinate system Functional (mathematics) Computer animation User interface Table (information)
Point (geometry) Web page Metre Slide rule Functional (mathematics) Building Link (knot theory) Open source State of matter Connectivity (graph theory) Decision theory Multiplication sign 1 (number) Open set Mereology Mathematical morphology Number Revision control Mathematics Different (Kate Ryan album) Damping Software testing Mathematical optimization Exception handling Physical system Mobile Web Home page Texture mapping Uniqueness quantification Software developer Projective plane Binary code Physical law Machine code Line (geometry) Cartesian coordinate system Tablet computer Uniform resource locator Word Computer animation Integrated development environment Website Speech synthesis Quicksort Object (grammar) Geometry
Point (geometry) Connectivity (graph theory) View (database) Multiplication sign Mass Open set Mereology Revision control Mathematics Internet forum Electronic visual display Damping Set theory Social class Area Injektivität Overlay-Netz Mapping Inheritance (object-oriented programming) Projective plane Expert system Machine code Complete metric space Functional (mathematics) Integrated development environment
Rotation Standard deviation Mapping Personal digital assistant Different (Kate Ryan album) Natural number Rectangle Extension (kinesiology)
Injektivität Multiplication sign Interactive television Rectangle
Overlay-Netz Implementation Service (economics) Mapping Open source INTEGRAL Plotter Connectivity (graph theory) Projective plane Letterpress printing Line (geometry) Machine code Cartesian coordinate system Vector potential Revision control Logic Network topology Hierarchy Software framework Software testing PRINCE2 Position operator Social class Probability density function
Point (geometry) Pixel Connectivity (graph theory) Multiplication sign Mereology Event horizon Graph coloring Rule of inference Number Endliche Modelltheorie Position operator Social class Scripting language Dot product Mapping Weight Software developer Bit Cartesian coordinate system Functional (mathematics) Dirac delta function Uniform resource locator Computer animation Vector space Personal digital assistant
Rotation Mapping Channel capacity Multiplication sign Image resolution View (database) Web 2.0 Category of being Mathematics Computer animation Personal digital assistant Volumenvisualisierung Object (grammar)
Type theory Addition Computer animation Mapping Connectivity (graph theory) Sound effect Video game Bit Machine code Form (programming) 2 (number)
Classical physics Scaling (geometry) Inheritance (object-oriented programming) Multiplication sign Order (biology) Bit Machine code Lattice (order) Set theory
OK and high and welcome to the rest of the session my name's mark and some of the stock is going to be about 2 weeks the uh the most recent version is number 3 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 gonna give a short introduction about myself and my colleague of friends that's helped me preparing this presentation is also very active in the jury CSTEE project we have to have I think a short history of the GHT project and then I want to show you what actually is divergence free of this jury extremely library and of course it will stop with a short of so my name is mark I'm working for a terrestris which is also a sponsor of force G but on core developer and member of the Project Steering Committee of this jury CSTEE project and also co-developer of OpenLayers JavaScript library for you know like you know you should have heard this conference um I wrote a book about open OpenLayers and all the other parts that throw around in this open source GIS cosmos and I actually are open source and everything that spatial so the company that sends nearest terrestris were based in Bonn Germany and do all stuff with open source geospatial so if you have any questions so you want to do work with us just contact me or my boss to use in next the so this
is not me this is my friend Chris around here the presents you help me to create this presentation and you also that helps a lot with creating due extreme on his software developers and architects and we just recently found his own company maximum so it's a very young starter but providing very great work on his and those due Foundation charter member and he speaks very often at the national conferences and international ones but said he couldn't make it to South Korea so he lost open source and spatial as well as I do so this is the company the most important things of the Twitter handle and they get that will most probably so if you like what you see now just visit a set of besides it the now this is what it's all about so what is jury xt the is a JavaScript framework for sophisticated web GIS and it's based on open layers and each teacher so basically it extends EECS TGS with spatial components and in Laos it allows you to for example read spatial form it's like the absolute of offered WFS request which is oftentimes GML and you can put it into the very rich data components of the exchange ideas and then you can put these data components into other user interface components of the exchange as and it all works very well the so basically Ukraine rich web mapping and interfaces with it the copyright is assigned to the is due on its open source and so this is very interesting the 1st Committee for this project of before the GHT project happened in March 2009 which means it's 6 years old and counting which is for a JavaScript library um you know like it's a dinosaur so that was a lot of text on the previous slide so the jury xt is basically the merits of the exchange as an open as it is also the child of links to j known as because it inherits some of the functionality and the know like the characteristics of its parents like EECS TJs has a way of doing things and OpenLayers has a way of doing things and all these characteristics of its parent libraries are inherited by the duty extinct and as I see it both enhances EEC's as an open air so it's it's a win-win-win situation actually the so now a short history of the extreme so version 1 the 1 that started in 2009 um was based on the version 3 of peaks DJs and overlayers 2 . icsi I think it started with 2 . 9 and in the end it supported so basically everything until 2 . have something so this is how 1 example looks like and you can see all of the stuff that I just recently mentioned in this picture which will be now and for the future versions we will see the same picture basically so you see an opening asthma embedded into the user interface components that we get for free from peaks TJs and also on the right side you see a list that great a very rich table of the features that you see on the map so there's everything in in there which you know is at the base at the core of GHG has a component the visual part like the map is in a container which can then you know live in various layouts that he exchanges gives us and also the data is ready to be used because it's in a store of extinctions it so as I said I
it started in 2009 and that in 2009 the exchanges lost hot very hot right now it's not uh um and you can see this year this is a tweet that flow float around Twitter 2 weeks ago something it's linked in the presentation so other peaks TJs frameworks recurrently hotter like in for example Angular JS is hot since 2014 or maybe it only was called in 2014 I'm sure you can make it up yourself so and the current Otis's reacting has obviously from so this is just back in the days he G as well as the 1 giving us everything you know its it was very major back then even and it provided us with very rich possibilities of enhancing OpenLayers all you know like creating a library getting the most of its experiments on so why the hotness got has gone away obviously from each DJs it's still there and uh it's still alive EECS TJs and so is duly xt and I'm very of and I'm sure that can be a very good choice if you want to address some of of the specific problem domain we will see which ones that could possibly be so now GHT 2 . 0 that 1 was based on 4 version 4 of links to j s and still open is to this 1 is living on this will all the code is on the top so if you could find the code to all the solutions of the and as you can see everything got a little bit more modern but uh there was no radical change in in its even though it was very hard to implement it because there was the change between geeks 3 and 4 was quite a hassle and so on yeah but we managed to you know get more feature parity with the version 1 with this with so it provide us with many many functions so basically the creations and text was changed and also he couldn't do it you shouldn't do no longer knew my the class name but you should do next create my and a part of support for the arms programming model of NBC Model-View-Controller it was easier to the and stuff so that it wouldn't look always the same I also brought some the 1st community to the essential to lose the float around the exchange TJs them so it could be some we could use the center to its to on detect the dependency graph of 1 particular component so that we would be able to build smaller bills of fixed interest which would you just give those compose such actually need now this 1 is very young 1 this is due exceed 2 . 1 yx it's in beta I think of my friend Chris has released a week ago something so you see the layout has changed little bit and the most important change here is that this version 2 . 1 of gives you the choice between Unix TGS 4 point 2 or eac suggest for 5 . 1 at your choice so every 1 of these major versions of each suggest comes with new features and enhance performance probably so you can see yourself if you want to upgrade your applications to the new was 1 of the xt S and then it should simply take this and she due extreme versions
so these are all the stuff that brought that out that become with 2 . 1 so we now support two-way binding and which is essentially because of unless there were away so they decided to no longer have its which is a good decision I think for all players but it's a nice thing to have if few developing applications it also had 1st Steps Towards responsive design of your applications so like you could dynamically reconfigure your components depending on the environment where the code would be runs along the tablet for example it would have a different appearance of them on a desktop PC but in the meantime i'll mystery and unique Steiger 6 lawn and so we were late again and the run and again from from start so we must of course to support both of these new versions which is why we had this tunics t 3 codes print that happened in June this year it wasn't born a beautiful city you should definitely wizard on it had 10 developers from 4 countries and so there's a small picture down you from all of us from here we had a good time and it is also a lot of work we basically build the foundation for Giusti 3 are based on those solutions that were mentioned a lot of time like openness 3 and teachers 6 so
the the these are the sponsors of this particular strains which I am very grateful that would they gave us their money and their supporters and that developers so without the use of some entities we wouldn't be there where we are right now and there's all sorts of different entities on this slide as some of it is German but the first one for example is a it's a part of the church you know they're also like sponsoring open-source very nice so thank you and so now what is it here x t 3 so the object is when we were starting to 63 word to start from scratch and we definitely wanted to benefit from the center to lean because they in the version 6 they provide us with a very some sophisticated built 2 with the censure commands which has been there also for a long time but they now improved over the time and so on we also want to benefit from the open their speech at law which you may or may not have seen in the talk that was yesterday from Andreas cultural and so the other fellows selecting them on discussed so openly as is really feature-rich and we want to have this the we wanted to be unbiased them against the medium so we want to work both on desktop and mobile because the most recent basic about 2 . 1 doesn't actually work very well on all but you can open the page it will vote but it's not optimized at all and it's probably not what you want to do we want to have more examples and to improve tests and better documentation has always so this is the state of its R&D on test and we have a little bit more than 300 commits there are 7 come true so far from some entities not well it's like 5 entities behind these commuters and in their free time on the building and packaging is uh I consider it done so it's all very well now so every commit creates a new sensor package which is the detail you may or may not know but this is the thing how you of provides additional functionality into each G as by creating a package it's comparable to an NPM package it's not the same though from and it's all done it's all built automatically by the same is true for the API docs Theobald automatically on yes we already have a test coverage of 82 % and we are reaching for what we want to have more and so on 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 test I want to have like unbiased tests not ones that try to reach lines just for reaching and so the API docs are looking nice so we can have probably look at them we have some examples and then we that's a very important point here on this slide we switched the open source license from B is the 2 GPL version 3 on so as I said we start from scratch so with an empty and repository and we only have 7 contributors so that change was easy to do but we were from forced to do that because in previous versions of the EEG suggest they would give open source projects on the exception they would they would allow us to use on a different compatible licence then GPL and this exception has been removed from their website we have been in contact with them and so for now it's GPL which is a good license but think OK so what's missing then it's a universal at example so universal at is 1 that runs on mobile with more optimized code and 1 of that runs on a desktop with desktop optimize code but with 1 coat bases there is we have examples of that in a project of us that he was just extreme version 3 but there is no such example on the website so and we we need to create 1 and we have 0 reasons which is actually a pity we in meters reuse that stuff so the home page is already there I all the API drugs and the latest API docs with extra has some are linked on the home page and also in this slides and this is what I was meant to talk about so on the command line so once you have the sense environment ready to create censure applications to install like the century binaries and we follow operating systems and then you have it on the command line we simply say hey censure package repro at which adds a new Reaper where censured tool can check for packages and this is a link on to the get up G. H. pages on which is updated on every commit um and then we say we basically tell in the 1st line hey if someone wants to use duty CSTEE hey go and search for it and this uh at this location and then in Eoraptor yes you require simply GEO G weeks the and that's it so it's nothing to download them it's easy to get started using tunics teachers it's different though then with all those other JavaScript libraries that you may or may not know where you have the depends usually in phi of texture morphologies in whatever but it's very easy as well never try and stop to learn in different ways of resolving the dependencies the some examples so this is the most basic
example that we could think of which is just a a an open this map you might see that San Francisco the inside of the layout and the exterior of the exceeds 6 of this is looking a little bit boring but this is the 1st component that we have had actually working and on the nice thing is dangerous 2 and 1 there was a component called to use the panel that map on that panel version 1 actually so that was a special kind of a panel that would work on display in OpenLayers map and allow the user to interact with that map now in gx 3 the map that is gone which is said that it which I said you know we start from scratch and we really thought is so now the inheritance of the map components so the thing that actually draws points politicians and the way of your w mass something is now a component the you may or may not be experts in EAX TJs but this actually this small change in the Iraqi of the inheritance and inheritance change where we put our work in that makes it possible to reuse the complete code that's there too we know resize the map in both mobile environments and also on the desktop because the Panel class as a set of earlier is not existing for the mobile this sounds like a lot of details but I just want you to and get that we we we thought everything that you 60 was but you know about the like starting with the base component so this is how you would do it I you create an overlay as map just like you usually do it I give it a view summary of some injection and so then you pass this map component over to sorry this openness map over to this called EECS create and then it down yeah so this is this well most of as a set the work on this is sponsored of was sponsored forum big part and and 1 of our customers want to have an overview map which back at the data didn't exist in OpenLayers and I was thinking as a member of the project that it probably also doesn't make any sense to have an overview map in the Map Library itself now time has passed there is an overly them there is no that component in on in open areas from but it didn't give the function that we wanted for example we wanted to show I can I can ensure this thing and it's I
don't want to give me a 2nd
the so while this nodes but it's a little bit different from a chosen that the there is this rectangles you see here in and these are some In the case of the rotation of the main lab I can show you probably know in
nature so this is a map and if I rotate this map from the road the if I do it like this you see that on the right side of the rotation isn't simply covered on all it's not copied over because then you would have to be rotated maps and the you know the bar the target of all the what a noble you might want to give you an overview and doesn't want to confuse you any more that's what I guess so what it actually does it's showing the extent of the other map but then rotated and also you may notice there's this small dot here in year which is the top left corner of on it's just a small deviation of the how we have tried to solve this
problem excuse me but no in this in this example that not you can actually I can I think I can
click here I click and then at the time that this work is reacting on this but it's too old to have the modify interaction with no sorry there's an injection now in in all the layers that you can use to drag actually you know like rectangles and then this will be coming in and you probably something is the following
it so we have a layer trees so this is 1 thing differentiated us I think to my knowledge from most other um applications of Aurora libraries around openly as with some other nice JavaScript from framework so we can actually have trees like with Reagan dropped to some but to allow the user to interact with the complex to write the hierarchical structure of layers in the map which is a nice thing and this is also a complete rewrite from all the things that we had in previous versions so this is just a plot in and it's like 200 lines of code where previously we would have had some probably 300 lines of code on but it's stuff over 5 classes and I never understood the total potential between the thing from between this implementation so when we started from new I started with the old we start with a new and thought on it and we're very happy with it so what's there right now and from there we looked at it solves all the problems the it OK so
we have an integration with the map fish Prince service that's a components of its of basically from another open-source tool which scope map fish it's basically using able to create pdfs on the fly if you give it a spec positive aspect over HTTP requests and it creates in a very nice as speed will high-performance it creates a nice PDF of Europe application and why is this thing here because it's acting not so you know hey you can print here who but this thing is cool because the implementation of the logic behind this is a very heavily inspired by the implementation that mainly camp to can another company you have seen here did for Angular JS therefore their project Angular JS so some combined with openly as and you will they call it you probably have seen the talk about it so they have a reference implementation of how to serialize overlayers uh layers uh so that day in day that the map fish prints of can understand it and what we took as we took all the code from them and uh the tests that because that's you know it was already tested and yeah we could integrated without any hassle in this so you can now have the same experience hopefully of printing that's as with G so this is the created
PDF then you see it's the same it has some schools and I think people start victories it's intellectually and and the rest of the so when I said Judy CSTEE tries to also enhance OpenLayers so 1 thing that me personally always blocked was and you know we have a lot of discussions in some really asking how do we name some API is this KPI or is it not like like all we'll be doing all the time so in such a smaller team of duty t we have the chance of giving a little bit more user-friendly API so for example what we have in nearly every application that I developed in the past 10 years we want to have like a something like a point arrest 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 in our setting up timers and waiting and then calculating whether the position changed in an amount that you consider enough to be a new location that has she actually moved it or is it just slightly moved 1 pixel to the top of the models but you take C. comes with some of these nice uh added entities on top so there's just a new event which is called point arrest and ponderous out which is configurable so when you just by providing numbers to wait for 500 ms and then look at the delta S and then the point event will be 5 this is just easier to use alarming function like the hovering pop up something so this script small the we can render all those features and that of gives us insight of xt components so why is this is this is another example but it's a very technical 1 because it shows all the different ways of you know what the big part of the different ways of creating a styling features in all layers and embedding them inside of components of G. the the yeast so what you can basically do is you can create a maps like these are examples
like these it's a little bit like but this is Germany some part of Europe and Germany's in the center and so you can see blue and red dots and you see them twice actually because you see the correct you see them on the map well today as takes care of rendering the features as you x 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 inside of India CSTEE component which in this case it makes it easy to understand to differentiate between the red and the blue points but you may also have a classifieds like vector where there are 7 classes of something so you can very easily into act what visually and see which of which rule belongs to which feature and also on you can interact in both ways so when you select a feature on the map the map the features selected in the great when you select the grapes value in a great but it's also select them so this 1 looks a little bit crazy from the colors but that's the dictionary that's what it's all about um this is the map you form
of so that's the wrong and sorry don't
do it like this it's so this is
basically the same example and what you see here is some of our own summer and on the right it's rendered with the Web TAO render in this case on the right side you see certain properties of OpenLayers objects um represent at this time as members of a fall so on top here we see the resolution and the resolution of the map view is 38 . 2 2 and the rotation currently in radians is 0 . 4 and so we see the opacity in the bright is in the Contras and the you situation of the one layer so this example basically shows us this two-way binding so if 1 side is being changed the other 1 is updated automatically and this works for all OpenLayers objects inheriting from object was a which is a very very basic class enormous so you could have this with a lot of stuff on so if I change the capacity you see it gets darker for change the in brightness if get started
and have developed to soon In the problem
special if a small effect
because it's so this should be a global variable
called map out you can read a little bit just to type map and hence they get you only yeah whereas the braces in it's the for the opacity for example in the 0 no sorry I think it's right such arbitration it's easier the intuition is currently 0 . 4 0 and let's give it full thank you for 5 year very impressive that should have happened so that there's obviously no component called earning I could get this next the the scanning the yes whatever it is so I can I can rotate a mapping from that was actually additional sugar on top of it which is right now just isn't working as I wanted to work and life coding is actually not minding my thing but whatever it is so if I would have access right now to the map variable which is the OpenLayers map and I could change it and then not only with the map irritated but also the values in the form because we just saw the other way around where I manipulate the form and then the map was taken so for now just believe me that and the you can try on and this is 1
example so that was the other 1 like
so nearly nearly done um so this is the things that we need to do that out in the future and we definitely need to release this stuff on and so to make it easier that other people can actually use it outside of our very small scale because there are some users already and but I think that could be more so we need to have a road map right now a lot of it is actually guided by a node needs that my aunt's Chris's company of someone else's company director and gives to us and a meeting about start implementing we need to have a roadmap we probably need to restructure a little bit in order to show more code like probably there's gonna be probably this is you know out of future this probably going to be like free libraries of which you don't know because you would simply use g x t but inheritance would be figured out for you on culture today's modern classic this is the thought that I currently have but I didn't talk it over exactly you are the 1st couple people 3 others so it may be a good idea but let's talk it over yes center as a set we need to actually reuse it so that's it thank you and I have some questions some remarks few thank you where 10 minutes of time this is that the like I was trying to tell you but through a market sorry uh so we have if you have any questions just contact directly mark but but if you want to stay from the uh there's 1 hour other questions the the OK honestly you should have told me if I can I can I can do these talks like 1 hour of 2 hours that you were lucky that it was something that the no prior over all the sessions of course and OK so so this is the Long Thanh