Two-way-databinding on mobile applications with Yaga

Video in TIB AV-Portal: Two-way-databinding on mobile applications with Yaga

Formal Metadata

Two-way-databinding on mobile applications with Yaga
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
This talk is about the Angular components of the early open source project Yaga. Angular serves an elegant and modern way to structure HTML-single-page-applications with its MV* pattern. Directives are one of the most powerful tools in Angular. Yaga provides directives for webmapping proposes, like the map itself, markers and different kind of layers. All directives are ready to use with two way data-binding. The main goal of Yaga is to harmonize it with Ionic. Ionic combine the power of Angular with the power of Cordova, a framework to create hybrid mobile Apps from HTML sources for all common mobile smart-devices. Additionally Ionic adds a UI that is close to the native look and feel of the mobile devices. With this stack you are able to create a GIS application for Android, iOS and Windows at once. In my talk I want to create a sample application and present the pros of Angulars two way data-binding and Ionics mobile UX design for mobile GIS applications with Yaga. Arne Schubert (Wheregroup GmbH & Co. KG)
Presentation of a group Electronic data interchange Mobile Web 3 (number) Cartesian coordinate system Number
Android (robot) Keyboard shortcut Group action Scripting language Code Texture mapping Multiplication sign Mathematical singularity Variance Web 2.0 Data model Mathematics Modul <Datentyp> Software framework Endliche Modelltheorie Scripting language Programming paradigm Texture mapping Mapping Cross-platform Software developer Keyboard shortcut Open source Ext functor Element (mathematics) Product (business) Software framework Normal (geometry) output Modul <Datentyp> Logic gate Web page Slide rule Asynchronous Transfer Mode Mobile app Mapping Open source Software developer Connectivity (graph theory) Mobile Web Content (media) Event horizon Local Group Architecture Hybrid computer output Summierbarkeit Design of experiments World Wide Web Consortium Window Mobile app Modal logic Dependent and independent variables Information Projective plane Java applet Cartesian coordinate system Software maintenance Component-based software engineering Function (mathematics) Cuboid Library (computing)
Modal logic Keyboard shortcut View (database) Data storage device Content (media) Variance Local Group Data model Mathematics Function (mathematics) Endliche Modelltheorie Cuboid output Window Newton's law of universal gravitation
Area Scripting language Mobile app Keyboard shortcut Scripting language Division (mathematics) Maxima and minima Food energy Performance appraisal Data model Bit rate Doubling the cube Function (mathematics) output Social class Endliche Modelltheorie Cuboid output Angular resolution Data type
Asynchronous Transfer Mode Direction (geometry) Division (mathematics) Maxima and minima Web browser Mereology Field (computer science) Metadata Data model Root Endliche Modelltheorie output Arc (geometry) Computing platform Data type Mobile app Keyboard shortcut Amsterdam Ordnance Datum Directory service Type theory Number Root Process (computing) output Routing
Asynchronous Transfer Mode Mapping Direction (geometry) MIDI Discrete element method Graph coloring Field (computer science) Variance Attribute grammar Mathematics String (computer science) Vector space Electronic visual display Metropolitan area network Descriptive statistics Boolean algebra Zoom lens Texture mapping Mapping Channel capacity Keyboard shortcut Airy function Bit Maxima and minima Line (geometry) Cartesian coordinate system Variable (mathematics) Data mining Word Doubling the cube Vector space Personal digital assistant Right angle Object (grammar) Electronic visual display
Presentation of a group Bootstrap aggregating Network topology Network topology Direction (geometry) Summierbarkeit
Presentation of a group Code Multiplication sign Demo (music) Graphic design Medical imaging Mathematics Different (Kate Ryan album) Vector space Physical law Software framework Vertex (graph theory) Stability theory Area Link (knot theory) Channel capacity Mapping Software developer Web page Moment (mathematics) Keyboard shortcut Bit Data mining Type theory Computer cluster output Quicksort Slide rule Mapping Link (knot theory) Chemical equation Connectivity (graph theory) MIDI Similarity (geometry) Field (computer science) Local Group Network topology Energy level Self-organization Mobile app Addition Zoom lens Standard deviation Slide rule Tesselation Server (computing) Projective plane Android (robot) Content (media) Coma Berenices Cartesian coordinate system Component-based software engineering Word Lie group Internet forum
Revision control Raw image format Mathematics Texture mapping State of matter Internet service provider Source code Moment (mathematics) 3 (number) Device driver Menu (computing) Abstraction
Code State of matter Direction (geometry) Real number 1 (number) 3 (number) Mereology Element (mathematics) Attribute grammar Medical imaging Mathematics Software framework Extension (kinesiology) Form (programming) Dependent and independent variables Theory of relativity Mapping Chemical equation Interface (computing) Keyboard shortcut Projective plane Electronic mailing list Bit Cartesian coordinate system Peer-to-peer Degree (graph theory) Web application Category of being Oval MiniDisc Table (information) Library (computing)
OK presentation tools to weighted by the number of of applications with young what to read it From idea locally on and 20 minutes from its questions OK so thank you so much like actually that to wait out the binding on the mobile
application with the idea of my main goal was to develop a more with application but yoga's framework this is the 1st parts from angular so you don't have to make a mobile application but I think that's but was my main goal to to the mobile application of that so the 1st time and I want to introduce shortly will where were at my employees and myself give you a little more information about the beyond project and explain what has to wait out the binding and then show you a few example how to use yogurt and the end of the project growth so where group we developed modern web mapping solutions to well known map Bender and submitted and nowadays we have also the mobile maps on or about 40 or uh this is realized yogurt the you and then myself time of the development of architects and I'm working at better the so about what's yogurt I'm 1 of the maintainers and the 2 of my kids to school friends started development with me and this the library Our main we try crime and the idea was that it should be based on an open source project and other open-source projects and it should be integrated into a well known framework and we want to release this project itself as an open source project we wanted to make a hiking at for museums and it should be enough to bridge mobile and so we want to use that cross cross-platform we want to use it on Android IOS but also on its normal web pages of course striking that we want to use a model mapping components 1 but really don't want to miss a modern architecture Model-View-Controller consisted of modularity and we want to have good testability the good testability of all software and and because we want to make a mobile app we want to fulfill the typical design paradigm's on mobile apps especially should be more well 1st responsive design and of course the user experience design the typical text on this business so then we think about what technologies we should use a libraries especially at 1st before the hybrid mobile applications so every year used to code over and for mapping components especially on mobile devices so we choose a leaflet as the well as the best and in the modern architecture we wanted to realize with angular and to do a typical design arrogance and we want to fulfill with ionic because ionic itself as in uh and and angular projects so we we can combine all the same quite easy together so but what is the role of the idea here so as at the mall at the NYU between angular to wait a binding and leaflet about it and who knows something about two-way way binding care and more or less solved the audience so I just want to show you have the draft what two-way down about and when the other scripts and then I show you a short way how you can create with angular at 1st here we have some code I can show you the example also as we have a model it's very simple at this slide and we can take the data from the model on the next a way to show you the
example so here's the data from Our model and we also with the event was have the possibility to changes but our data in the model doesn't change is still the data from the beginning
so then I show you semantically uh how would you could do something like to wait the binding short way
showed so when we make here some changes we see the text also changes in the view that also in the model so it's it doesn't have to places to store
the data binders he referred simple getter and setter so you can maybe imagine what less what has to wait out of binding about so and the angular rate was very easy you can realize this even without writing any other scripts and you just have to say that you are in an angular resolution this area and the example that and then you can make use of the energy model and the input that and say all the data should be bonded to take f the text and then you have here the paragraph and the appraisals the double bracelets with text and that's and this is then also the same like the
example above before so we can change now all the the data and everything certainly
have that other bind if you you don't have to do to make any thoughts about how you get the data into the model and back and so on so uh
another picture prolonged angular is that of directors this and I make the 2 main types of directives for the Fiat at 1st main route directive systematic director and you can create layers layer directives here kind erective WMS directive and to give Jason directive for metadata there also spatial lights director 5 traded up a spatial light is only available on native platforms or on chordal platforms not in your browser so this is not a part of the normal yogurt itself and the clock and for so here's an example for the root directory of the mad directed the the process so here we we can now use this binding so we just that the center referral latitude and longitude and we can also by the to the input fields Phantom model and so on this is what did
data mining is about we are now able to change the man and the values here and they have field changes but we can also change the value but I have to go a little bit more more I mean the so and you think you can also change here the values and the many changes so this is the two-way dotted line so
then we go to the layer directed 1st layer directives have here attribution capacity and display attribution that they had tribution let me know on leaflets on the bottom right the text and the name of just for internal proposes so you have a say a little bit easier to identify you layer and the opacity is so of course opacity of the layout and displays of Boolean values so you can add all the layers but can I choose if you want to display it on the map or not so here's an example of the style of WM layer director of here is the example itself is a book from the yacht entirely so that here I use the Croats that double quotes and promising approach is because normally angular as I expect variables but I just couldn't your text so this is why I I use these maybe cried strange-looking and we have the attributes as well as the CIA layer well normal of the palate work and we have fundamentally not soon and on the WMS layer we have the latest at tribute because we have to choose which later we want to use and again it's all and to wait out abundance so we can also changed attribution to weed out abundant and so on but even do well but which I think in most cases you don't make so much sense but it's possible then we have the vector data layer the due date if you adjacent layers and they really have quite the same but we don't use the word of course but the data we combined there In a simple Jason of pure Jason and more objects directly and JavaScript for the stream and and additionally we also you can use that attribute this style so we are able to study also the two-way Dr. bind at the style of the layer so it's quite easy to change the color of aligned string or something like that 1 and we have also the min and max 2 possibilities between 1 have a pro about this concept is that you were able to write your data your mapping application in and descriptive phrase so you in this example you don't really have to write some of the others that you just declare that you want to have and that we have to tie layers and in the adjacent layer and renewed take a look at the example
and of the Eurydice you can take it on the presentation of found a lot up on get out of there no additional JavaScript that have to use explicit here uh
younger friend itself and so then I made here of is little the moral high I ground combining the yogurt directives the later trees built with angular and bootstrap so when we take a look at
this example this is quite the same from before but here we have also the possibility to change the opacity the following this is to wait out of my notes we don't have to care much about how it works and we just have to say Peterson input field which the capacity and everything is prescribed easy it so
In the 1st few words about the road map I take a look at angular to I like a lot of this sort of features and so maybe I wanted to rewrite it the directed to angular to at there's also implementation of ionic but singular to is also in beta status of not full stable at the moment and I don't know who I should work directly led to you about of animals and and another thing is I write to my code and typescript and angular to those used successively decorators have like the decorators to so I was thinking about you to work also mortgage decorated but at the moment angular not KB fixed I don't have a lot of changes in the last year on the API about idea I don't want you to realize this is the idea that the world is changing and another thing as those other components of I like node jails lots of them so maybe I will develop but also if use components and take a look at the 10 Tangram layer refer Bechtold tiles and this is 1 of the players I wanted to implement assume into this concept of yogurt so you can get my slides on my give up accounts 1 you have time to write it down at the last slides right down there to and here a few links and I think it's the best way to get it from the year slide itself on it up and we make the following year we were able to ask questions of content we have something like that here additional things about the technologies are used in this project and last but not least when you're here next bond I make the last 2 weeks additional applications together with my friends and the other mundane so if you want you can go and I at 1 I and try all were hiking and that's the area around the airport so maybe if you have to wait for you have you can take a a little hike around to the area those thank you for your attention me and if without so this is what I mean is good so this so a question about 100 but thank you just wanted 1 of 1st 1 is then used to thinking if you should switch to angular toward link that idea anything it's definitely within and just mine the question why did you decide to work with angular made in his 1st 2 minutes of the presentation but I for example reactors and notes need I like Europe in Europe from the we have to wait out on mining and I've worked in earlier projects a little bit before and lot so so I started developing this project also with angular the question was more personalization implemented by if you don't something similar that every on topic of this talk weighted binding with the the how do you think it I have nothing special that I deserved a little bit it's kind of jazz and then in the meantime angular to came up so now also starting and getting into it that's not definitely like similar support they could also be to combining OpenLayers only isn't in this the yeah I think it's it's also much better imaging advance level then then Angular jails in definitely the features anyone how many people understood what it's all about it because I had a very hot and just observe area with all frameworks ends of the continent concepts of this and the beginning we must have development was just the user and was different types of something this is OK what this again good but that standards
that are completely to into he was so you can't change said mapping on I am making this abstraction layer but it wasn't so easy and I thought at the beginning is you work harder and more or less stable at the moment of change of about at 1st thought I will make this work also and but it wasn't so easy but I think if you take a look at the source code maybe you also able to practically as a provider for OpenLayers uh I designed that so that you are able to change but I I I don't know at the moment if I will developed also version for OpenLayers but at the beginning I wanted to look but when the state of the art that I'm sure that you write as provided so it's it's possible to add another provided the it's it's it's possible on the other side itself I have uh multiple stages I have an abstraction layer and then I realized that refer leaflets and after that I write to angular driver and you're able at the moment to change your leaflet and driver and take another driver for the angular so it's prepared to but it's it doesn't realist thank you and a
couple of questions the 1st 1 is easy is that depend on a unique or only
and and in that depends only on angular you don't have to use ion and 2nd that it exists and give it angular directive of developed enough fuel no it's already of destiny and later you decided not to use each yes good question and I have I started developing with this framework and there wasn't any and leaflets director the future-directed I think that's the name of this project and about um I don't like so much to some degree of a way of developing with the leaflet extend directive because you only have 1 directors and you can write your code for example like my 1 and a descriptive phrase uh and I think it's a much more granular due to write it before the additional directives so you have for a a lot of directives so that you can be used to provide your application and not only the ones we for all the um attributes on that I think it's a little bit easier and the using the angular directive idea even very different properties switching to Europe so that yeah it's the naming properties it this 2nd is is not easy to relate yeah that leaflet they're in the right itself and that's a good look at your 1 person from the what was your immediate another International and peer applications the and I most most of the web applications need to other cool we elements like forms for attribute tables which kind of things are you planning to incorporate that also known because of this is the part of ionic and so on they implement all the UI elements I don't want to write this again and reinvent the wheel but I just wanted to use to use of the libraries for lists so you can use yogurt with angular and 2 and if you want to have few i elements or something like that you can use ionic but you don't have to use ionic it's it's not depending on ionic a gallery set that like like if you do with the chance to request you know you can use I would think that the disk would lend itself to the to where binding this we're talking about and you will find to a from your frame you yes that's right but and just do the math part of Bible just admit part and if you want to change something like and make it clear you induce lights in earlier then you're able to use other UI elements that are integrated into the angular and you don't have to make your own so I think you can you can have you have a little bit real picture the possibility to to use of them and they're a lot only wanted to deal with responses and then put it somewhere to as interface so did the main goal of this project is to have to wait bind the State of the map what you do with the data you can choose itself worth every UI elements you will find on the angular size what is question the would be located in the image of the few


  336 ms - page object


AV-Portal 3.20.1 (bea96f1033d39fbe77f82542458e108105398441)