Logo TIB AV-Portal Logo TIB AV-Portal

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 Elektronischer Datenaustausch Meeting/Interview mobile 3rd applications number
Android binding Actions script code map time singularities variance web structured data mathematics modularity framework model script paradigm map mapping multi-platform Development binding Open Source Ext elements product framework input normal modularity Gates web pages Slides modes Mobile App mapping Open Source Development component mobile Content events local clustering architecture hybrid input sum experiences designs architecture web Windows Mobile App necessities response information projects Java applications maintenance component-based Computer animation functions box libraries
necessities binding views storage Content variance local clustering structured data mathematics Computer animation functions model box input Windows Gravitationsgesetz
script area Mobile App binding script division maximal energy evaluation structured data Computer animation rates functions input classes model box input resolution data types
modes directions division maximal browser part metadata fields structured data root model input Arc platforms data types Mobile App binding Amsterdam Ordnance Datum directories Types number root processes Computer animation input Routing
modes mapping directions mid dem Coloured fields variance attributes mathematics string real vector Display man descriptions and Listings Zoom's map mapping capacity binding Airy Functions bits maximal lines applications variables mining words Computer animation real vector double case Right objects Display
presentation Bootstrap Computer animation topology directions topology sum
presentation code time demo graphic designers image mathematics different real vector law framework vertices stable area link capacity mapping Development web pages binding moment bits mining Types Now input sort Slides mapping link Ionic component mid similar fields local clustering topology level organization Mobile App addition Zoom's standards Slides Tiled server projects Android Content coma applications component-based words Computer animation lies Forum
CAP map states moment sources 3rd drivers Menu versions mathematics Meeting/Interview provide Abstract
states code directions real ones 3rd part elements attributes image mathematics Meeting/Interview framework extent form response Graph mapping Ionic interfaces binding projects The list bits applications degree Peer-to-peer web applications category Computer animation Void's disk table libraries
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