GeoExt3 — Universal WebGIS applications with OpenLayers 3 und ExtJS 6

Video thumbnail (Frame 0) Video thumbnail (Frame 1067) Video thumbnail (Frame 8636) Video thumbnail (Frame 16670) Video thumbnail (Frame 25590) Video thumbnail (Frame 32106) Video thumbnail (Frame 38575)
Video in TIB AV-Portal: GeoExt3 — Universal WebGIS applications with OpenLayers 3 und ExtJS 6

Formal Metadata

GeoExt3 — Universal WebGIS applications with OpenLayers 3 und ExtJS 6
Title of Series
Part Number
Number of Parts
CC Attribution 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 purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Release Date

Content Metadata

Subject Area
Web 2.0 Computer animation Dedekind cut Meeting/Interview Term (mathematics) Universe (mathematics) Projective plane Mikroblog Computer font Cartesian coordinate system Arc (geometry)
Polar coordinate system Mountain pass Source code Tap (transformer) Software maintenance Neuroinformatik Data model Medical imaging Insertion loss Different (Kate Ryan album) Electronic meeting system Row (database) Office suite Mapping View (database) Software developer GUI widget Shared memory Electronic mailing list Bit Process (computing) Telecommunication Order (biology) Software framework Endliche Modelltheorie Open source Connectivity (graph theory) Mobile Web Online help Declarative programming Element (mathematics) Term (mathematics) Implementation Computing platform Form (programming) World Wide Web Consortium Game controller Mobile app Code Core dump Extreme programming Cartesian coordinate system System call Web browser Word Software Integrated development environment Network topology Universe (mathematics) Revision control Library (computing) Code Texture mapping Multiplication sign Direction (geometry) View (database) Insertion loss Function (mathematics) Mereology Web 2.0 Geometry Order (biology) Bit rate Logic Endliche Modelltheorie Library (computing) Overlay-Netz Service (economics) Open source Data storage device Ext functor Tablet computer Data model Touch typing Right angle Sinc function Reverse engineering Classical physics Laptop Ocean current Implementation Statistics Game controller Model View Controller Service (economics) Software developer Electronic mailing list Web browser Modulare Programmierung Graph coloring Revision control Network topology Software Touch typing Software development kit User interface Mobile Web Projective plane Information technology consulting Planning Component-based software engineering Computer animation Logic
Complex (psychology) Web crawler Euclidean vector Code View (database) Multiplication sign Source code Price index Open set Client (computing) Mereology Replication (computing) Disk read-and-write head Neuroinformatik Data model Geometry Mathematics Different (Kate Ryan album) Single-precision floating-point format Electronic meeting system Core dump Software framework Endliche Modelltheorie Extension (kinesiology) Social class Exception handling Theory of relativity Mapping Block (periodic table) Software developer Moment (mathematics) Data storage device Electronic mailing list Shared memory Ext functor Bit User profile Type theory Web application Category of being Vector space Order (biology) Chain Software framework Website Endliche Modelltheorie Summierbarkeit Right angle Quicksort Data structure Modem Genetic programming Point (geometry) Trail Game controller Inheritance (object-oriented programming) Mapping Computer file Software developer Connectivity (graph theory) MIDI Collaborationism Online help Web browser Mass Vector potential Code Product (business) Revision control Network topology Hierarchy Energy level Utility software Data structure Mobile app Inheritance (object-oriented programming) Information Projective plane Database Line (geometry) Extreme programming Cartesian coordinate system Vector potential CAN bus Component-based software engineering Word Computer animation Logic Network topology Universe (mathematics) Social class Object (grammar) Service-oriented architecture Library (computing)
Point (geometry) Open source Drag (physics) Multiplication sign Connectivity (graph theory) 1 (number) 3 (number) Code Revision control Meeting/Interview Different (Kate Ryan album) Data structure Extension (kinesiology) Arm Mapping Moment (mathematics) Computer simulation Planning Bit Line (geometry) Word Computer animation Logic Network topology Freeware Row (database)
who yeah welcome to this talk on
GHT 3 it's
subtitled universal web Jess applications with OpenLayers 3 and TGS 6 so this is the outline that we both have made up to introduce you to this topic so 1st we'll have a short introduction of ourselves and about this talk and then will give a short status status updates about the tunics to project and then will explain what our universal applications or what do we mean by this term and what does it mean that if
you want to do universal applications with GHT so often what's there will be some examples and since and the and this would be a conclusion so my name is mark on him and developer the German company terrestris we have moved over there and term yeah we love to talk to you and I'm accord available of both OpenLayers and you 60 thousand in reduced the amounts in the approved project Steering Committee I wrote a German book about overlayers which is quite dated now but used it can still buy it you know and and associated was due Foundation charter member so the company terrestris provides top-notch Georgescul solutions and built using open source software so basically all the software packages that you are going to hear over 3 days here at this conference and we're using and so we are quite well known in this community and we know many of the developers or help developing the software ourselves so we do consulting implementation planning but also you know like help you with everything basically so everybody my name is concerned my mama Germanic engineer and I'm also according of the GHT projects and also a member of the project Steering committee and then this smog I'm and also assume Foundation charter member I'm also running geometric office in the south west of Germany we offer all-around service services on around the open source GIS and SDI STI solutions so now during 60 what's the current status Jason generally you might know might might heard already is a JavaScript library for uh to to create rich web mapping applications and it's based on 2 other JavaScript libraries OpenLayers needs TJs and to sum it up in 1 sentence you can say Jure C is extending teachers by spatial components so he suggests is a library of providing a rich in a package of user interfaces and data components and OpenLayers is a is a very powerful jobs for mapping library and GAC combines them both to get a toolkit for that say the rich when having implications it's of course open source otherwise we wouldn't be here and the copyrights the copyright is so that was you and it's a quite old projects we already started to do this in 2009 9 which is more than 7 years from now here we have an example for a classical GHT application you might have seen in the past it's like it's the best like GIS application which runs in the browser they're all those elements you have in a classical which would have a desktop GIS layer tree with mentions in the map with different maps the data sources and then you create some pops whatever you want you can do sophisticated stuff was GHT to run your GIS and browsers the learns a bit of history as as I said was started in 2009 with due east keywords and 1 of which was based on the stages words and 3 and output layers to the 10 then we migrated to each teachers for which was called the duty to that we upgraded to exchanges of fire which 1 and 2 . 1 and in the meantime there was a complete rewrite of the OpenLayers library so and another word all of these 2 Jesse just 6 and so we decided to do a complete rewrite of GHG to make version 3 of it based on the statistics and OpenLayers 3 so it's not finished yet but you cannot already use it you just have to check out the master and communicative Kentucky project yeah so this talk will only deal with the version 3 of the G exceed and so 1st of we have a short look at the innovations that only has brought with it when it upgraded to its motion 3 which is the version used by Geary xt 3 so that's OpenLayers it's a high-performance feature-packed library for him at the needs some pretty sure that you have heard about it from that was always a 3 was also a complete rewrite it is more well from start over layers and yeah you basically independent of the device and browser and also other libraries so you can use OpenLayers basically anywhere and so on so this is how we asthma may look on it's an image of a laptop computer so in like a desktop computer so it might look like this but you can also
use it on your mobile phone of course so it's not from start so this is what we call then universal so it's it's running like everywhere now 1 of the innovations on the extreme said JSI exchanges 6 well basically exchange as well as in the past time also considered to you know create rich user interfaces but also basically targeted at desktop PCs because there was another library call touch that was targeted at some yeah mobile devices like tablets or mobile phones and now version 6 is basically merging these 2 libraries together to know like so for both of these worlds out of 1 code it does this by providing different toolkits they're called classical model and you can configure your applications you better right with CGS um using build profile so that you can generate dedicated builds formal wild or 1 that is targeted at desktop computers so with each suggest 6 6 of them feeling of each the application of applications also became very much easier so there's something called fashion that can help you to you know like dynamically update colors of forms of direct applications and you cannot recognize them anymore as it was in the past always the time so you know you could basically tell very easily if somebody was using EEG or not by because they were looking basically the same and now with this improved the feeding it's a bit harder you know it's a bit harder to you know like recognize it seeks TJs at all so you can create wonderful applications the so also there's some yeah version 6 of oxygen is also brought some new ways of know like organizing your cold it's the Model-View-Controller paradigma or the modern view view model paradigma so this is just 1 way of the dividing your code into different parts so that it's easier to you have yet to solve the problem in a way that is understandable to everybody even you in and for half a year year time of the year of time OK so this is what makes the JRC can look like 6 on a desktop PC so this is 1 of the official examples you can see many of these user interface like rates were left side there is a list you can scroll and yeah and stuff is also taps and yet shots it has all these included from start so you know full-fledged library and this is all the same application looks like if it's opened up from 0 otherwise that's and was here and I just clicked on the on the right and so it's not like darkening out the rest and so you can alter scholars left side so it's working also on both of these things so 1 could call this he as well as universal so now what i universal applications yeah during reversal application this introduced by by JRC which means as we already said that it's running on on every device so you have to write 1 codebase and the application can be compiled to run on every devices that's what I said yeah by reusing the code and you will you get less frictional losses that the only 1 you have to consider is to implement a that the user interfaces for data for the target device but the other components like data stores and so all the all the the control is the business logic can be shared between the applications yeah that's from essentially constant the company behind the CJS and say I leave the universal aspects of the of the of Europe occasion will contain data models view multisectoral you can also share control of developers may need to be creative in order to produce logic that can spend toolkits so that's an experience we also made sometimes you have to be creative to to get this running it's not that easy as it seems in the in the 1st part it's absolutely doable but you need some experience in that that you can share all those cold stuff on the on the different tool kits this is an a part of that Jason and which is describing your universal application is introduced by essential and here we see but different declarations like classic and model which is gripe that there will be 2 to build of your application 1 for the desktop browsers and 1 for mobile browsers but these these terms you can freely choose it do not have to name them classical wherever you also could say this is best so and this is small while and with central command another tool by by of the exterior of the 60 years from environment you can easily build your application for for your platform for a target platform
yeah this is how such so if you open if you create such an application with a fixed interest has also commands to create such a folder structure is how it looks like we call the top level for the meiji up and then there's two fold as we marked here like classical model in which you will find the views so what is visible on the screen and in the folder that there's going to be the shared logic and that's basically it is also these things like not controller and that model this is the thing that I was talking earlier about the paradigmatic of Model-View-Controller all model you you model and there's a convention of naming these classes like the view that they are controlling or they Overview model so now now that we have to build so we have done all that and we're happy with the application we have a nice build sold the 1 thing that is missing is that you know if users come to your website you have to decide whether to give them the mobile version of the of the classical build 1 of the 1 targeted mainly at some browsers so antiques suggests that just makes you present it gives you this in the in dexation so you don't have to write this yourself this is basically sum and product detection code that's the exchanges uses to decide whether the modern built is better suited here and you can interact here so you can change this of course but you would this this method will be called and it will receive a an object of texts and these texts are like you know text of phones may be true or false of text not called about what might be true or false that this when you have created a a a real application out of the nation file it and that but not but have you can install these nations and yes that's true so now let's have a look at the heart of the universe applications reviewed unique steam now that you understand what I what is the universal application so the most important thing for the project was to correctly inherit from the right classes that you know are shared between those toolkits because we didn't want to develop 2 different types of Matthews 1 4 the modern toolkit and 1 for the class toolkit so that meant that we had to check whether all our inheritance chain of our classes was you know like basin of the right classes so while for 1 example is the GHT component map that's a class of 3 and previous versions had a extreme panel of map so you might know the map money knowledge but there is no penalty in the modern to so we decided to those liminality bit so now it's a component because speaks the component is shared in both of these toolkits so we can use but all the classes and you exceed we can use on but on both modern and classical toolkits except for 1 thing which is the GHT grid common symbolizes but to be honest Chris just yesterday or the day before that he removed that class and we change some codes so now we're we're proud to say that basically all classes can be used in modern and in classic there is 1 block pending of course as there is always that we need to have a look into it but I'm pretty sure that we might released version 3 0 where we can then say OK it's simply usable everywhere so when we say we can reuse everything that means all the components like all the parts that we have all the data packages like there is a story you can use to get a store of all the features of a vector layer of openness for example and all the models like where we I have a model of an OpenLayers layer and how to use it in sort of to component and you can also create wonderful tree structures like the tree we saw in the 1st example of the application and the list of audit trail of orderly out your application you can also do do that models and why is this is a single bullet point on this thing because it is because trees in the past have room yeah have got all the developers lots of had a headache because of because trees are very hard well at least for us they were and now we took until slightly different approaching that we simply say so In there is a you can also have hierarchies of layers and you can group based together and we simply copy over that concept and so you have just a hierarchical structure and it's it's not very easy to get a nice looking tree with version 3 and it's also very easy for us to maintain the cold because it's like only 100 lines of code so currently there is the concept of having packages in 60 JS so you can there are besides so the core library of chance you can have a package extensions which you can easily integrate new replication by giving the package name in you're at adjacent and currently because of the thing with symbolizes column which is gone now and yet you could not use ght is a full package which you would do normally just doing required yet to acquire single components which were able to to share both toolkits but they're not really sure what's the slaves were created before the code sprint so so there are a bit outdated let's say and now to work just to require a due senior actually and it's and so you're able to use it to new words let all those 2 kids so now
some examples Mark provided some screenshots of the of a larger application and his colleagues are developing at the moment and you see it might it might seem to be like the the the application we introduced in the 1st but looks a bit more fresh but the more modern a bit Moria it up to date so stylish I would say but we also have all those standard components you would expect in a GIS applications like that of the later treaty on the left you have some pop up so I think this is a kind of W mass uploaded you have those sliding you eyes you have an overview map the map itself with the with the different data sources and then just remember on the top right we have those buttons not that spectacular prosimians him out that way of telling you the same application runs on a mobile phone and those components you see here on the top left right are exactly the same components as time as they were on the best of so they're completely share even if there you so sometimes it might you have to implement the change should rise for your target device but if there are not that complex we just can reuse it it works quite well when I add something to the application so just just another example that's for another client that we have so this is 1 of those trees that I mentioned earlier so this is a so this is running on a mobile device and we have lots of customers them that have very complicated data structures that they want to have in the Web applications and I'm pretty sure you also know these from things and so these are the different topics and so it's Iraq at the structure that their information and you can quite easily like crawl in this thing and then you can expand the collapse something and it also gives us some hints of this layer is visible right now and inside this folder and this this is the full right so you see it's slightly greater out so that you while you scrolling through its use is so there is 1 layer in its activated and it's only in here because the tree on the modern devices was was used to be hard but now it's not that hard anymore to to do this using GXT and classes OK so we arrive at the conclusion so just say some some of so we see a huge potential in the way he exchanges handles this With the help of its utilities and use different profiles and but we are honest it also sometimes means that you have to be quick you here you have to figure out some corpus if you want to have it working on both of them so it's not like I will say it's just you can just would enable work you have to think a little bit and we had to do that in the framework but you know you don't have to break your head over that because that's done and you have to do it in your applications that you do there was some unexpected pitfalls I think there is no air in previous relations for example we had tooltips for like zooming in and out but the tooltip property of such a button so that you when you're on a desktop computer and although we are that the pointing device all the thing would say click this button to zoom in that would break on modern and it would really break loudly on application because they cannot have a over something and that was an unexpected thing and we have to get to something and so on yeah but the outcome is quite attractive you wanna continue with the point yeah yeah I think you something about the well we shouldn't be afraid because if you program an application by the universal application not that hot our parties to to create the library matching for both toolkits on 1 database so just give it a chance to try it out it's it's very cool stuff you can do cool things with it and we would love to see some of you are opening pull requests or just collaborate to the broker to the project are we looking for sponsors to to enhance the library and yeah that's what I can yes and that's it thank you I hope you have many questions and thank you
for your entire questions please is based in the back of the our time on not repeat the question again I think the question was there is the suggests 7 is up to come soon and if we plan to upgrade to 2 weeks to just 7 so to to be honest there are no concrete plans to do that because we are at the moment we try to settle 3 ght of 3 notes 0 to do it out but in the former times the last update of suggests where where where it moves the do did not break many things so to go from 5 to 6 wasn't that hard so I would suppose ones we have 3 saddled with the exchanges 6 would be the next the next topic that we really go on so there's always a lot to do it knows that you you get this we the question was if there is still a and future in needs just 6 as far as I can tell if you mean the normal plants you can use in the new coach you yeah there still there for example we have we we use those truly drag and drop applied in somehow called that you can for example of Dracula simulated tree to to reorder your map that's what we're using them for this so yeah very glad that you ask because that's actually a very cool usage of cheeks 3 because we did in previous versions of 260 we would have to invent all this dragging and dropping ourselves and all the logic behind it right now because we decided to just use their arms data structures that seeks to provide some quizzes and a plug-in that allows us to drag and drop it's all working out well we didn't even have to do a lot to get it working so that so thank you for question and word thousands of lines of codes in the past 2 years in a row and 0 now all questions in a similar way the in OK so it suggests this dual licensed by what a thing that is also common well it's not so uncommon in the open source businesses so it's the same basically as my that's so there's a big company behind the exchanges which is called censure and you its commercial versions of each stage but you can also download the free GPL license version so you don't have to but you can do if you want and you get some additional support by them and you also get so the extent to new point updates on but you don't need to question answering that what assuming that you think what do you think about like that of the other things you can do is you don't like it you no no no no if I get so the question was whether there is a big functional difference between the commercial version of the GPL 1 no there's not accept what you can use every component there's no new components usually available only for and paying customers but it's just that you know there's a version of the current version of 6 of its suggests 6 is 6 . 0 3 I guess but the 1 in GPL is G 6 . 0 1 or or point 2 so you have to wait a little bit longer but there is no functional difference that I know what the yeah thank you