Xamarin Forms for Android and iOS Native Development | Eduardo Rosas | Skillshare

Xamarin Forms for Android and iOS Native Development

Eduardo Rosas, Software Engineer & Entrepreneur

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
26 Lessons (2h 38m) View My Notes
    • 1. Welcome

    • 2. What Is Xamarin

    • 3. Why Xamarin

    • 4. How Xamarin Works

    • 5. Installing Xamarin on a Mac

    • 6. Installing Xamarin on Windows

    • 7. Creating a Project on Mac

    • 8. Creating a Project on Windows

    • 9. Adding XAML Elements

    • 10. The StackLayout

    • 11. Creating Event Handlers

    • 12. Creating Event Handlers Programatically

    • 13. Changing the MainPage

    • 14. Toolbar and ToolbarItems

    • 15. Navigation in Xamarin Forms

    • 16. Testing on an Android Simulator

    • 17. Testing on an iOS Simulator

    • 18. Testing on iOS from Windows

    • 19. Adding NuGet Packages

    • 20. Setting SQLite up on Android

    • 21. Setting SQLite Up on iOS

    • 22. The Model (Classes)

    • 23. Inserting to a SQLite Table

    • 24. Reading from a SQLite Table

    • 25. Defining a ListView

    • 26. Using DataBinding


About This Class

Build your First Entirely Native Mobile Apps for Android and iOS using Xamarin Forms, C#, and XAML. Then include SQLite!


1. Welcome: Hello, My name, Mrs or the process. And I want to teach you how to build and road and iris abs using salmon. So welcome to the summary form stores before anything. I want to tell you a story. So a few years ago, I wanted to start developing mobile applications back then for some reason for the Windows phone seven operating system. And I didn't understand what I was fighting on Google. It was just too advanced for a newbie like me. I just felt overwhelmed. Even though I did have some very light programming programming experience, these just seemed too complicated. And I thought to myself that maybe that was why it waas one of the last subjects in college . And I was barely starting out. And then I had about this event that nooky awas having for developers. Two full days of learning to build Windows, phone seven and as 40 applications. So, yeah, a few years ago now and we would start with windows phone. So my mom, without with what I'm sure waas, a ton of effort gave me just enough money for one day to travel to the big city. Get to the band maybe have something to eat and return home. So I skipped school that day and went to the event and locally that they it would be about windows from seven. And I say luckily, because literally in just a few minutes, the instructor that they had completely changed my life and I mean this in every sense of the word. It literally just about 30 minutes. These guy perfectly explained how to build windows, phone seven APS and a walled of opportunities open for me. I would then go ahead and build Dawson's of APS for Windows. Phone seven for Windows, phone eight for Windows eight and Windows April 1 things to that single quake lecture. Now the reason I'm telling you these stories because I wanted to have the same opportunity that I did back then So you two can start building abs and with no need from your loving parents to sacrifice anything because these curse is entirely free. I really hope that this kers does to your professional career, but those 30 minutes did for me all those years ago. If you're a complete beginner and have development, I made these curves with you in mind. So After just a few minutes, you look a world of possibilities with the app that you can build and even better, some reforms unlocks more doors today by itself than Windows. Phone seven date back then when I learned about it. So several reforms allows you to build native applications for both Android and IOS re. You see 100% of one single code base. So, Eve, you're a complete beginner. These girls really used for you. And at the end you will know how to build iris abs and built android APS by 100%. Reusing C Sharman sample code and add sequel line Local databases to your absence. Well, so I want to help you to Young start your mobile, Abda Belman career. I don't want you to wait for the university to teach you in the last semester's. So now, one start building IOS and Android ABS Today 2. What Is Xamarin: So what's the summary? That is something that you have to do before anything else. Before we started coding and creating something applications that were wrong on both Android and IOS with a single code base. You should know Ward Samah in this Now, of course, summary is a company, and it's a company that was a few years ago, acquired by Microsoft and Summary in focuses on creating tools for developers. Many different sorts of tools, of course, the most famous off its tools, either one that allows us to create mobile applications. And it actually has a couple of different versions. Submarine, classic and summary fours. Now the one that we're going to be focusing on and the one that seems to be getting more and more traction East, Samarie informs some reforms allows you to create mobile applications for android IOS, anything windows and more platforms using Samel and C sharp and in the next few lectures were going to dig a bit deeper about how it allows you to do that. But in these lecture wanted to me clear that some reforms east a tool that will allow you to create entirely native applications. Now, how does it achieve it? We're going to take a look at that in a further lecture from now. Just keep in mind that what it will do ease gravel of that code that you're going to be creating one single time and compelling it for Android and IOS in an entirely needed way. So this wasa breathe overlook about what someone is it. Release just a tool that will allow you to create and road and iris abs using one single Kobe's in the next. Lectures were going to learn why you should use Sam Marin. Why is it good to you, Sam Marin? And how is it that summering truly achieves needed functionality with shared code? 3. Why Xamarin: So why someone? Why should you consider you seen Sam Marine over many other different options that are in the market for you to develop mobile applications, including native, entirely native applications. So here is why. First, let's compare it to Native Native Development requires you to code once for Android, another one for IOS, another one for Windows and so on and so forth. So it truly takes a lot of research is an hour of time from teams on from developers and just freelancers and companies in general. What Summering allows you to do is have one single code base. Sure, it's 100% throughout all of the operating systems that you want to support and be done with it. And the best thing is that it is truly native, which breaks me to the comparison to other cross platform tools. There are other cross platform tools allow you to share some code base and deploy two different platforms. However, summer in is one that allows you to do so at the same time that it allows you to build entirely native applications with one single Kobe's. So it's the best of both worlds entirely native, great functionality. Great use of the research says that the phones, tablets and laptops have and, on the other hand, fewer code, easier to maintain, easier to scale, want single code bays. You going be called ones, not a lot of time or research test. And one single developer can actually do applications for both Android and IOS, which are simply the most use platforms out there. You could also employed to Windows. But let's be honest. Not a lot of Windows APS from the APP store. I mean, I really will used body of you have to support Windows. You can do so with the same single copays. So this is a brief over local off why you should consider Sam Marine over native development on and overall, the gross Platt from Development Alternatives. 4. How Xamarin Works: how the Semmering work. I have mentioned how summer in order to build for Android, IOS and even other platforms if you wish to support them with one single code base and that it creates in Tallinn native applications on top of that. So how does summary a chip is? Well, this has being a work of years. I remember a lot of years ago. Well, maybe six years ago, when Sabirin was starting out, that he wants a bit rough in the edges, like it allowed you to do these things that you it allows you to do now. But there were a lot of balls and they're wearing the very good integrations with some over the platforms that were out. There may be a new version of I, Andrew waas out the new version of Why us and there were really some issues. However, somebody has really improved in recent years, and what it does is grabbed the single code base that is critical to see shop and samel and compile it for you to eventually be Java code that wrong, so natural and objective Seiko that runs in the US So these is truly very efficient code that runs entirely native in the H black firm and the same for Windows if you want to support Windows. So basically what some Marine does is that it grabs these code that you create on C. Sharman Samel and the entire library is going to compile these down into native code. So it wrongs as if it were a native application, because he'd actually, he's a native application. I'll give you a quick example that you're going to take a look at in the coming section when we started finding elements. If, in summary informs you define a porton that is just called bottom when some Marine builds the application free to be ran on Android. What it does is that it turns Theis Borchin into an android Porton, a national widget that will run on Android, that the android ecosystem has always used the same kind of fortune that you would define if you were developing entirely native android applications and these same Bolton that you define on some reforms. When compiled to run on IOS, it will be translated into a U I bottom abortion in Tallinn, native for IOS, the one the same one that you would create, even were developing the next code. So these is eventually what someone does with your code, which means that you end up with an entirely native application, which of course translates into the application being more efficient and having better access to research says, and just working so much better than alternatives. I would say that 99% as good as an intelligent native application now off course, there still some rough and just here and there, barely noticeable, really, you start to notice, and only when you start making crazy things with your application over Roll Zaman East a great tool for you to learn, and that will easily allow you to deploy your applications for both Android and IOS without spending a lot of time out of their fort and the resources into it. 5. Installing Xamarin on a Mac: Let's get ride into working with Sam Marin. Now, of course, the first thing that you will have to do to be able to work with summer in this well to install seven. And for those of you who have Mac these these electric for you. If you're working on Windows, you can just skip this lecture and go over to the other one the next one. Now, in the case of mind, you do need to do a couple of things. The 1st 1 nationally has very little to do with Sam Marine and more to do with Apple and the fact that if you want to develop iris abs, you near the IOS as a k and all of the emulators and that can only be obtained by installing X Code. This is something that you don't have to do it all. In the case of Android, if you're not going to be developing for IOS, but if you are, you will have to install X code. Now, if you're going to be working with Windows, you will also have to install there's and visual studio, which I'm about to take a look at. In just a few seconds Because these after all, these what is going to be installing all of the IRS tools on your computer? So, for example, right now I have a knob. The progression T Temple zero accurately have their version nine point something which now includes and the ability for us to develop for IOS 12. So I m. S 12 has been out for a while for developers, but actually just today in the moon of recording these lecture on the Seven things off September it waas leased to the public along with Ex Code, so I would want to go ahead of the X Code. But we just need to come here to the Mac App store search for exclude and install it right after installing it, you will be able to navigate divisional studio that Microsoft that com forward slash z marin and down lewd Zama rain for Mac. And here you have many options and I find that there's no real reason to select anyone in here. You can just select anyone who wants after roll. The difference between community professional renter price is going to be based on your email account. So if you download the community edition and then you looking with one account that has purchased enterprise Visual studio is automatically going to be updated to enter price and actually, maybe just don't locks some functionality because it really does nothing. It doesn't even reload the just go ahead and download one of these options. I suggest you start with the community right away, which is going to be more than enough and launch day in Star that is going to be downloaded or you will have to do is double click and these download bottom. And when it opens, you will see that the first thing story is going to go ahead and evaluate what you have installed. And what do you do not having spooled in my case? Because I already have installed something's previously, it says. Officials here for magazines told some version of IOS development core and Android development with Summer informs the salt screens told optionally Eat is telling me that I can install something. War books and inspector and tools for Macro is these are not going to be used in the curse so we can and the select them. I see some orbit dates available to my android sdk so I could go ahead and select these one Basically what? You have to make sure that you doing here either usedto and rude I us and the dot net core . This is going to be absolutely necessary for you to continue with occurs. So go ahead and select that and heat on install. Of course, depending on how much you're going to be installing anger, Internet B, this is going to take a few minutes. But after that is done, you can still like to open visions to immediately after, which I am going to do so. I can get started right away with some marine development. Have to read the download. These successful, you will see right here that you get visuals to the open right away. And like I said, if you go ahead and log in, you are going to see a small tab here off the version of visual studio that you have on your account. You notice how I downloaded the community edition yet after looking and I see enterprise. So there you have it. Like I said in the next lecture, we're going to take a look at how you can install on windows. But if you are not going to be using windows, you are entirely good to go in the next lecture after the next lecture there, and we're going to be starting right away by creating a new project here on Mac. 6. Installing Xamarin on Windows: Okay, So what? We're going to doing this lecture? Ease. Go ahead, install visual studio tools for Sam Marine on our windows computer. Now, just that you are not confused by what we're seeing here. I actually have windows running on parallels on my Mac. So that is why you see these being on my Mac. But this is actually windows. You can see that this is a makeshift edge. You see the clothes bottoms of here, Teoh right corners of DC's windows. Just I am running it right here on my mag with pearls. But basically, you're going to have to do something very similar. We are going to be never getting to visual studio. Did Microsoft the con four slash zimmer in. And here you're going to find a download for windows bottoms. So these same pay she's going to identify whether you're Windows on Mac and prompt you to download the version for that specific operating system. So again, you can select the community of issued download and astronaut cities downloaded Run Dane Stoller, and you will see something very similar to these. Now, Edie, seen here where you can to make sure that you select the correct things that have to be installed and what you will have to go ahead and search for ease The mobile and gaming section. And so, like the mobile development, we don't net option, which actually has the summary Aiken in And that element Lee staying here now, actually, what you can doing here optionally e select the universal Windows Platform development option. Ive you want to create windows application with some reforms were not going to be covering that in that in these kers, however, that is something that you could do. I am not going to be selecting is But it is important that you know that you can do that. Other than that you can just go ahead and make sure that you select Andrew Java ghoul android emulators the Intel High Works liberated execution manager hacks, um, is very important that you select this one and again. If you want to develop for Windows thing against the universal we noose platform tools for Sam Marin Other than that you are good to go. You larger is going to need to hit on install notice that the installation is quite big at 15 gigabytes, basically because some other tools are going to be installed. I do recommend that you leave those selected and just make sure that you have enough space available and heat on install. Of course, this is going to take a bit more time than on mag Gaunt. After a few minutes, you should also see visual studio start right after the installation, just like we saw on Mac in the previous lecture. Now, while the insulation finishes, let me just mention that while decent stories going to install pretty much everything that you need if you want to develop for Iris as well, which say assume is going to be your case, you would absolutely need a Mac computer. So what you would have to do ease. And we're going to take a look at this in the lecture where we test our your supplications directly from Windows. He's to connect somehow to my computer. I do recommend here a couple of things, one that if you didn't do not own a Mac computer, you borrow one from a friend once in a while for you to test your application again. I'm going to talk a little bit more about this in a specific lecture onto if you do not own a computer and none of your friends owns a computer or your university cannot lend you a computer or your work can lend you a computer. Mackin cloud Easy option. So making cloud is thes service that allows you to rent, and I'm actually navigate over to mak ing clouded comb. So making clouded com will allow you to rent a Mac in the cloud and you could I? I think it's $1 per hour. So maybe at the big meeting, simple $1 per hour didn't even have to buy a plan. A complete plan. Maybe just use it for one or two hours once in the wild, and that's going to be no. In fact, you can see how it is tailored for salmon as well. Eventually, you could also pay $20 per month. If you need more so you can see you can set up A S. You go subscription wonder a per hour or a managed server for $20 per hour, which gives you pretty much the same thing. Except I think you have a limited hours, so you would have to come here and figure out which he said that you won't use both. That is the best option that I think you have available. In case you cannot get your hands on a Mac computer. So what, You can see the insulation he's about to finish all be here. So we should see visual studio open in just a few seconds. And here we go. After just a few seconds. Visions to you asked me to again. And after I did here I am in visual studio 2017 for windows. So this is how you install for windows again. Just make sure that if you're going to be developing for IOS as well, you get a Mac somehow. And once we have a manual, have to follow the steps that I detailed in the previous lecture. So you get your Maghrabi former severing development as well? No. In the next week, you're going to greed our first summering project. 7. Creating a Project on Mac: all right. So in the previous section, we already went ahead and installed visual studio for Mac as well as visual studio in our windows PC. Now, I am mostly going to be working in visual studio for Mac, But anything that I know that is quite different in visuals to your 2017. That is some Windows. I am going to do it on Windows as well. You will notice that the difference is pretty much only in the u I. Maybe some menus aren't going to be a little bit different eventually. This is Sam Marin. This is C Sharp. This is going to be Zamel for the U I. It is going to be identical. So let's get started right away. I'm going to go ahead and create a new project here in visual studio for Mac. You can do it from the new Project Bolton that I have right here. Or you could also go to file and click new solution here. The first thing and that will have to do is navigate over to the moulder platform section, something app, and I am going to start with a blank forms application. Now you will notice that there are some other options in here, and this is going to vary on windows in the next lecture, I'm going to do this for Windows as well. But notice that you could also greet a master details form application. This is simply, ah, least of options that navigate over to the details. So the Master Rees at least the detail is the option that you selected, similar to what you may see on the settings application, the re social Attacked forms application. This is the one that has many different tabs, and each tab has a different detail page associated to it, maybe similar to what you would see on the music application on the Spotify application. The Facebook application I'm talking about I racing here on Android. There are also some applications that are tapped, and then you see some options for in native Now we briefly talked about the difference between native and summer informs. We are going to be focusing on summary forms, however, because it's just I find it, it's easier, it's more efficient, and it's generally the option that you are going to be selecting. So let's go ahead and click next and give our application and name. This is going to be a simple contacts application. The organization that fire you will likely want to change this because these may be something that makes no sense to you. So I have changed this to reverse your l that I have here for my website, which is Laroche says don't come. So now this is going to become daughter Letter assess and eventually noticed. This is going to be translated into these organization. Identify your applause, your abs name. So just make sure that you said this correctly. Now I'm going to leave. Both Andrew and Iris is the target platforms and use .net standard as a shared code. The difference between .net standard and shared libraries as a share library is basically going to move everything that we creating that share code over to Android and IOS entirely while you sing that in standard will create a package and the package will be referenced to android and IOS. So I find again the generally it is Dalton a standard the one that you want to select. So we're going to go ahead and click on next and finally just setting something here whether we want a different name for the project. That for the solution is generally not the case. Whether you want the location of the project to be somewhere else. If you want to add version control with get for now, let's Joe's he didn't create and the project is going to be created with actually the solution with three projects. So the solution is going to be one file that is going to have an S L an extension, and these notice over here to the left is going to contain the other three projects. And this is going to be the same on windows as well. So now that I have made these text larger, you can differently notice over here in solution that is containing in the dot net standard project or the share project engages elected that which I hope you didn't then the contacts Grand route project, which, of course, is going to be the Android Project and the IOS project. So you're going to learn what each of these projects is going to eventually do As we progressed, it occurs for now. Let's just notice that we're going to be focusing on the Dalton and standard project. Like I said, it is going to be in here where we're going to be working entirely with our code. Eventually from these Project Bully and Road and the iris projects are going to be building the application per platform. You can notice that both of these Platt firms in the references reference that contact don't understand our project. So this is how the code is going to be reused between the platforms and that instead of the contacts doesn't stand their project. We're going to be working with pages. So by default we're going to have the main page, that it's divided into files that samel file that is going to be the one used to define and the uru for application and the C sharp file, which is going to be used to define the logic, the functionality of the application. We're going to be working with these do files as well as some other fires that were going to be creating. There are going to be pages for now. You have already created your project and by the way, notice that if you never get over to the samel file your main page that Samel file. The reviewer doesn't really work. This is because you have to rebuild your projects for the first time you project is created . You CAFTA rebuilt it and you can use simply click here on the rebuild Project Bolton. Or you can go ahead and write Glick on the solution. Select glean contacts. I do recommend that you first clean up the solution and then the he didn't rebuild contacts , which is the name of the entire solution. And once that project has being rebuilt, the preview where he's going to be reloaded, we will see how the render is going to be initialized. In this case, I I'm with IRA selected, and after a few seconds we see these up and running now, Like I said, right now, I'm noise. But I can also take a look at the same resource on Android. And here's where you started. Notice how that the exact same code is going to be working for both platforms Now in the next Electra, actually, the next lecture. We're going to be doing this for Windows Sink Asia on Windows, both the lecture. After that, we're going to be working with new controls. So you're going to familiarize yourself with? What the hell does go these about how it is going to be working on both Android and IOS, By the way, Notice I have some updates in here. For now. Let's just go ahead and move over to the next lecture in case you need to know how to create the project on Windows. If not, feel free to escape that lecture and go over right away to buying some controls to these contacts application that we're going to be building throughout occurs. 8. Creating a Project on Windows: so we have already installed visual studio on Windows on a Mac. If you're using that of rating system, it is time for us to greet a new project. Now greeting at Project on Windows for summering forms is a bit different and doing it from a Mac. So let me explain how to do that. Here on Windows, I have here a visual studio opened and noticed. That's immediately you have in the new project section, where you can select one of the most use templates or simply heating creating project. You can always if for some reason you don't see these as start page, go to file, select new and select Project. So let's go ahead and do so from these window ease from where you will be able to find the cross platform option. And here is very straightforward. You actually only see one option the mobile app for some reforms. Here all you kept do ease, set some name. Let's call this contacts. You can optionally initialize that get repository greed, a directory for the solution, maybe name different location where these project is going to be created. They just go ahead and click on OK for now. And here is the interesting part. These ease we're creating this. This is slightly different than doing it from Mac. Here is where you would have to select the template just like a magic. You will be able to see master detail and tapped options. And just like a Mac, we're going to stick through a black template. Now, in here, you also have the ability to select whether you're going to use .net standard or share project again, we're going to be selecting dot and standard. However, in here you haven't beaten more control. You can select whether to create an Andrew on in Iowa s application. Both should be selected now, in addition, because when installing my visual studio I installed the windows tools. I have windows listed in here. Yes, If you use Sabirin forms you can not only create for android and IOS, you can also create for Windows. I am not going to leave the selected because I am not going to be creating any Windows application. We're going to focus on android and IOS, and that's it. We can now just simply click on OK and three projects are going to be created jewels like a Mac. We're going to have the Iris project, the Andrew Project and the shirt project in the form of a dog net. Standard project. After a few seconds, then you are going to see here the solution just like a Mack. A solution is going to be created again. There are some differences between Mac and Windows in the main news in the templates, both. Eventually this is the same summer informs project, going to see exactly the same. And it is going to be exactly the same. From now on, I will add maybe a few seconds on how to do something on Windows. If it is different and doing it on Mac, apart from that, everything is going to be exactly the same. You may see that the templates greed, a slightly different thing here and there. But eventually we see the exact same thing. Now, before moving forward, I do want to mention that here on the samel file by de Volta, you are not going to see any designer as you do on Mac. In the next next year, we're going to be focused on creating new controls on matter your countries that the designer immediately here on Windows, you will have to navigate over to the bottom right corner off these part of the window where we have the samel file and click undies a little double iro Borchin that says expand pain. If you do so here, you will be able to see that the signer and you will also have the ability to see For Android and for IOS now, doing so for us is going to be slightly more complicated than on Mac on market works immediately in the section about testing. We're going to talk about how we are going to be able to see this for now. Just a rest assured that what ever you soon and road is going to be exactly the same on IOS . So this is how you said signer. And in fact, you have either more control here in visual Studio 2017 and Windows you have. This is more I can the's Bolton that allows you to change from having the designer on the left to the right and you have some opportunities in here to change from a vertical to a horizontal splits. This may not be that good unless you have a vertical set up your vertical monitor. But it is here now that you have created the project either on Windows or a Mac, let's jump over to the next lecture and start adding some control. 9. Adding XAML Elements: We haven't really created these new project either All Mac or a Windows. And we see that the recess align difference on what Windows and my greed waking the content page. But mainly we should be able to see the identical the same thing on both Android and IOS. Now, during this section, presently, we're going to focus on the salmon files. But I do want to start right from the beginning, So I am going to delete anything that is here instead of the content page. So me just do that again is that instead of the content page, we see some element that in the case of Mac, this is attack layout. And inside the recent label, now you don't have to worry about what these are yet. Let's just go ahead and delete them and all. We're going to see now either definition of this XML file or, you know, diversion, the encoding and the content page. The content page is important here because these ease exactly Wall defines the page inside of summary forms. You can see that the important thing in here is the definition off the class. So instead of the content page, we said. The definition of a class that happens to be exactly the main page that we have in contacts . The C Sharp filed a C sharp class that we have here now. We're eventually going to learn a bit more about how these two files communicated this semillon, the C sharp file. For now, you should just keep in mind that these is going to be important, the definition off what class these content page is going to be representing. I also noticed that the main page inherits from Contin Page, which, which means that main page he's accounting page, which is exactly the same type of the element that is being the finding here. Now there are many different types of pages. One could be that halved page, which actually has sometimes means, have you. Why the content page ease the regular most common page. So now that we understand a bit more about these Canton beige, let's go ahead and define things inside of it. For example, we can define things like injuries and thes ease. How would define an element? We start. We've an open angle bracket, the name of the elements, then forward slash and and then the closing angle bracket. So these is actually going to define an injury, and it's hard to notice because it currently is using the entire the entire page. It is probably easier to notice financial notice that all the way to the bottom there is thes line that defines the entry in and roared when I always we really see no difference. Maybe if you get really close, you see a small curved line in the edges. The finding precisely Walt the entry is going to look like, but this is probably not what we're looking for now. In the next lecture, we're going to learn how to make things look better. For now, let's just focus on the notation of how we are defining the salmon elements. Notice that the way to find the entry is different from the way the content page is find. Now, the content page is defining these way because it needs elements inside of it. We could definitely just to find the content pace like this. Notice that I changed the way the content page is defined simply by changing how I closed the definition instead of closing it in another tack and closing it directly right here, just like I defined first the entry. Now, if I go back to what I had before, these is the other way in which you can close the definition of an element and we could do the same with an entry. We could have the opening tack and then the closing tax like this. So this is going to result in the exact same thing. Just were there have been more off code. Let's say that in hearings have the entry. I want to define its text so we could do it similar to a witches did by the finding it like this and inside of these two brackets, or instead of these two tanks defying that sex, Let's say hello I know is that it is immediately applied instead of the designer. Now, these is the entire definition, like the complete samel definition off the text of the entry. However, this is just way too much instead of defining and the variable or the text property value like this, I could define it right here in the definition of the entry like this, and you see that the result east exactly the same. So we see a little bit less code and the same with the entry. I could define it just in the same line by closing its like these instead of with the entire tax, and we see that the result is exactly the same. So these is pretty much in the syntax that we're going to be using every single time. Now there are going to be some elements. One of them we're going to take a look at in the next lecture. That definitely requires to use in thes syntax, the one that is used for the content page because we need to define some elements inside of it. In the case of most of the elements, though, the ones that are not containers are going to be defined like base very quickly. So this is how you define elements now, before moving forward to the next lecture, let me just try to define another eliminating here. Let's say that we're going to define at Bolton and notice that the entry these a beard now it is not really that it disappeared as much as the Bolton is now on top of it. It sat, for example, some text to the Porton that is going to be. Click me. You can see that we see the porch in. We see it's text. It's now that the bottom is using the entire available pays with no regard off the entry, and the same happens with 100 as well. So what? We're going to learn the next lecture Ease how to use one of the containers that will allow us to make these You. I actually work that contain Aries. Theis Stackley out, and he's going to help with the Stanleys elements together in the next lecture. Then we're going to learn how dad statically outworks. 10. The StackLayout: so in the previous lecture would define an entry and a Borten instead of a continent beige . We learned a bit about how we're going to be defining thes samel elements, and we'll learn a couple of different ways in which we can have the syntax. Now. We also know is that when we created the pattern, the entry disappeared and I mentioned that is not as much as he disappears as it's being covered by the Porton. During these lecture, we're going to take a look at one container, the Stackley out container that will help us solve this quite easily. So let's just get started. They think that we're going to be doing in here is defining a new element that is going to be a container that is going to be called Stackley out now because this is that contain there. You may remember that I mentioned it is going to be defined like this. It's going to have a new opening tack and closing tack because inside of it, we're going to be defining things and precisely things that were going to be fine. E are these two elements that we can now notice that immediately and images. Move these or indented these two elements in here. Notice that immediately we see now that these two elements are stacked together and in find their heights are changed. Now the hides are the regular heights for the entry or for the Bolton, we no longer see using the entire available space age instead of the content beige. And this is going to be stacked. Of course, the first element findings have these container is going to be the war all the way to the top of the container and next one at the bottom of that and so on and so forth. Now, right now, the container is the one that is going to be using the entire Del's base. This could change. For example, instead of the content page, we had more elements. So, for example, if this exactly out where inside of another Stackley out, let me just defined Stackley out like these and in Dende and these stacked layout and instead of the first is technically out. I had another entry. We can see that now This is Stackley out is different eighties no longer using the entire global space it is using the available space after these entry has been added to the U I. So hopefully this is starts to make a bit more sends, you can start to define elements, and it's tackling out is going to help you stack elements together. Now. There were East another thing that I want to doing here before moving forward and let me just kick back to the definition that I had before with his entry and the fortune. Right now, we do see that the U I in both on Android and IOS does look the way it's supposed to for both off the platforms. But I don't like the fact that there is no margin through the sides of these elements, like the yard to find all the way to the science into the top off the U. ID's doesn't look particularly good to me. So to Stackley out, I am simply going to add some margin now you would when defining the margin, I said simply, one volume, let's say 20. These margin is going to be applied to all four sides to the left, to the right, do the top and to the bottom. I good, however, also defined two volumes that say 20 and 10 separated by a coma. The 20 will be used to set the margin for left and for the right, and the 10 is going to be used to define the marching for the top and for the bottom. And finally, I could also define all four sides. For example, let's just define 24 the left 20 for the top 24 the right and zero for the bottom. Now this is going to look very much the same as if I had just 1 20 Except for the bottom margin, which is going to be zero. This is how I want to leave the margin here and noticed that these marginal supply to the stack layout and because it is applied to the stack layout now that the elements defined inside. If it are going to respect that margin, I could also add some extra margin to the elements instead of the Stackley out. Let's say, for example, that I want some additional top margin for the bottom, so it's a bit more separated from the entry. I could do it like this, but mainly I believe he's in the containers where you want to set these margins and have the elements inside of these containers respect those margins and maybe eventually appliance from margins on themselves, but more for separating them vertically, not horizontally. So we have now defined staggolee out in the next lecture. We're going to complete these definition of these main beige that eventually, by the way, is going to help us have new contacts. These eventually will actually them. You just change the value already, visitors gold is safe. But we will need a few more entries. And more importantly, we're going to have to know when thes Borton is clicked. That is what we're going to learn in the next lecture. Do you know when one bottom is going to be pressed so eventually We know that in that moment we have to save these new contact that may be created from these main Bache 11. Creating Event Handlers: we have already started to define these main base. That will eventually be the page from where the user is going to save new contacts. We do need some other things for these main page to who be now for us to save contacts, studying with more entries because right now we only have one. I do want to make a couple of changes. He here the entry. First of all, he's no longer going to have a tanks, but it is going to have a place holder letting the user know wants these entries going to be about the 1st 1 is going to be the name. The second change that I want to make is more like an addition. I want more entries in here. A few more entries in here. Off course. Each of these sentries is going to have a different place holder. Let's say that this is going to be for the last name. We're also going to have police holder for the email. Let's add one for the phone number and maybe one for the address, and eventually we do have these safe bottom. And now these looks more like a page from where we would add new contacts and you can see how the result for android is pretty much the same, of course, with native controls. But the more important thing here is that we need to know when these save botany is breast . So in these lecture, I'm going to be creating an event handler in a summary. And events are going to be triggered when a certain action is performed. And in the case of the Parton, the clicked event is going to be triggered when the user presses. The importance of these is exactly the event that we need to handle. Now, notice that as I grow, I clicked in here. There is a small helper from visual studio that is telling me, Do you want to create an event handler and it s actually going to go ahead and name this event handler for us. It is going to be called handle. Underscore. Collect. Now, if I had in many bulletins, these really doesn't tell me that much. So I do recommend that before doing anything you name your bottom what I'm going to doing here and let me just make these definition correctly because I removed the forward slash He's name my bulge in and We Can Do It by grating X colon name and my Bolton at Do recommend. It always starts with what this button is come to do and say that this is going to be the safe, and they're always contains the name or the type off the element in this case Botton. So now my safe bulletin, well hit school, the safe pot, and it makes entire sense for us to gold abortion that is going to be saving a contact save button. This could even be called safe contact bottom if we have many different safe Parton's all over application. But safe botany is going to be enough for these particular case. And so now, when we want to greet the clicked event, we can create the even handler and notice that immediately before doing anything else, you can navigate it over to the main page. The seats sharp filed to be a bit more specific. Here, notice the blue indication in here it is telling us to use the arrow keys to position our event handler, then to press enter to select the location or press escape to cancel this operation. I recommend that everything every method, every event handler that you define instead of a class in general goes below their constructor. So we in this case I'm going to be positioning my event handler below the main based structure. And when I want you to doing here, ease change the name because again, this is handle clicked, which makes no real sense. I recommend that you change this to the name off. Your important This is safe. Borten, underscore. Collect. So these makes there have been more sense you can understand what these method is about. This is the event handler for the klieg off the safe Borten. Now, if you change the name of a hearing C sharp, you want to do the same thing over here in Sammo. So the clicked event is pointing to exactly the same event handler that we have over in C sharp. If you want to create this event handler from Windows, by the way, you will have to do something very similar on the bottom. You will have to access the clicked event handler and from here noticed that you have also they knew even handler option now, before doing you know, Windows. Let me actually show you that on Windows, we have a slight advantage to our mark counterpart. If we said the name before creating the even handler, let's say that this is going to be the safe port to we can simply right Glick again. And when the new event handler is created, notice that first we don't have to go ahead and select where this is going to be created. And second, the name is already said to that name that we care for the portion we didn't have to change it automatically. It is safe, Porton underscore cleat. And that is that Also, the CHR file was opened over here and automatically these even 100 was positioned below and deconstruct er so as you can see, it's a little bit faster doing in windows Eventually, though, you do see exactly the same result. These is how you will be able to handle your clicks. Anything that you want to do when the save button is pressed is going to be executed inside of these two curly brackets. So or functionality that you want to execute for saving is going to be in here just this is , he's how you can do this. Now we have these. You are pretty much ready. We have learned how to define elements. And, of course, we have only used three of them a Stackley out. It's a container and then entry and a fortune. There are many other elements that you could add, like labels, least switches, date and time selectors, etcetera. From now, this is going to be enough roles to create contact. Of course, we're not yet able to save anything because our safe Bolton even Handra doesn't really do anything yet. But in next section, we're going to start to work out with more with the functionality of our obligation. Particularly, we're going to finish up the navigation. So we have another page where eventually the contacts are going to be listed and this page where the contacts are going to be created. For now, you should be more familiar with Samel how to define the you are you of your summer and applications. Now in the next lecture is going to be quite clear how it is that you're going to be working with the functionality 12. Creating Event Handlers Programatically: So in the previous section, we went ahead and learned a little bit more about Samel. We learn how we can define elements we learn to use the Stackley Ouch is a container. And we even went ahead and created and even handler for the clicked event off the bottom. Precisely when we created this event, handler were never gated over to the C sharp file corresponding to these page, which is Main Page told Sam about C s file to select where we wanted this even handled to be created after we selected that. And Windows might have been a little bit different. We saw these methods being created. So during the section where we're going to do is focus on the c sharp part of our application. We are going to be doing a bit of work with Samel, but we're going to be focusing on making some changes to the application and its functionality. So we have it pretty much ready in the way it's going to look like and how it is going to navigate from one place to another. So the first thing that I want to show you East that d c even Hander could have been created from C Sharp. And this is starts over in the Sammo file by also naming department as soon as we name our elements were going to be able to access them from the sea. Sharp file. These means that seems our bottom already has a name. We could go ahead, let's say here in the constructor and dried safe Bolton and notice that it is right there. We can find it right during the lace because visual studio is going to help us do that and now we'll start working with it now. Just Elikann sama. We were able to access the clicked event by Great. In one of the attributes for the Bolton O. C. Sharp, we can write a dot and search for the exact same event in front. You see, at least off all of the events, all of the properties and all of the methods that are precisely right here inside of the bottom. As we progress through, the Kurds were going to take a look at some of these properties for some of the elements in the bottom. Most of the time, you're going to just one to work with a leaked event. Now, also sharp greeting and even Hadary said, a bit different here. Where you have to do is grind. Space blows equal space again and known as the visual studio is again going to help us create D seven hander Bond is slightly different to what it did with Sammo. First, it actually least a bit more options for Rose to greet these. Even Handler. The 1st 1 is to create a new method, which is exactly what we did with Samel. But with each are we have a few more options. We can create a Lambda expression or an ace ing limbed expression, even an Ace Inc delegate. Now we are not going to be focusing on what each never one of these things are, or even what lambda or a sing or delegate means. Let's just for now, focus on the fact that you can create a method, and that is that the rest is going to be exactly the same. You will have to select where that method is going to be located, and these is going to be created. So here is how you create that even handle human see shower. I do recommend that as long as you can do so you stick to creating Avi's even handlers from Samel. So that is what we are going to be living in here. I just wanted to mention that you can do this on C sharp as well. Now, let me also mention something very important in here. You may be wondering, how s it that just bike writing a name of non Ellemann here in Samuel magically, they are available right here on the chr file. And in fact, if you notice they are available as fields for these particular glass, that means that they are somehow defined inside of these same class. So he's urges some magic happening that allows Samel to certainly create variables or fields inside of the CHR file. Well, yes, but it's not as much closure may thing there is, um, automation going on. But there is definitely an explanation. So what I wanted to do is go ahead and select your contacts project, not dissolution. By the way, the project, the one that is the shared one right leg and select reveal in finder so we can take a look at the entire project now in here you're going to find some files that are not least in visual studio. They are heading now. By the way to do something on Windows, you could just navigate over to your file Explorer and find your project. Typically, it is going to be on documents Visual Studio 2017 and projects mine is not here, but this is typically where you will have it. Mine east already on my repose holder. However, if you're only news Aries, a faster way rifle visual studio against Elect your contacts project from the Solution Explorer and find these Eigen that he schooled show all files. If you selected, you are going to find here those finals that are not displayed by default, including the RBG folder that we're about to talk about. So let's jump back over to Mike Mac, because from here now it's just the same thing. The only difference is how do you jump over to these files? But notice that in here you have, for example, the Bane folder that is not listed. The O. B G folder is not listed. The others are simply the app dot sammo and the main page of sample and main patient similar to see is that we do have access to now. What I wanted to do is go ahead and open the O B G folder in here. Open the debug folder and the nets standard two points. Your folder. Notice that here there are some files that are complementary to the abbot class and do the main page glass. So they're sexually a main base. That samel g dot CS filing here and the same for the AP class. But I want you to focus on these main page glass or see chart file. These is actually defining a little bit more about the same main page class that we have been working with. Let me actually go ahead and open days with visuals to then Actually the images go ahead and use any tool that I have here to take a look at it. These notice is also defining the main page glass on. I will talk a little bit more about this in just a second notice that he d c here where the safe Bolton he's being defined. So he turns out that as we add names to the elements instead of for Osama file automatically Sam Marin is generating these fields. These safe bottom waas added automatically without us having to do anything as soon as we said the name over in this ammo file, These is how we are able to go ahead and from the main base that Sam old RCs file. Use these safe bottom so a little bit more about the explanation. Notice that these collapses main pH. He's a partial class. The fact that these classes to find this partial ease, the thing that enable says or through C sharp enables the compiler to define one class in many different files. And the same thing would happen, by the way, with methods we could define partial methods that are the find in many different places. Right now, Summering is using these feature of C sharp to be able to define one part off the main page in here. He them from the user and the other one. Let me just navigate over here, here, just in the main base of Samuel dot CS. As you can see, these marked partial here as well. So that is why, by having to files for the main page class, we can have these save button definition kind of hidden, but being able to use it without in problem from the main patient. Samel dot CS. So hopefully you now understand a bit better about what kind of magic what's going on in here. The main thing that I want to mention is that now you should understand that if we want to access the properties for these entries but say that a text that the user growth down so eventually we save the contact, we would need to add their names. We don't need to name these entries yet, but we will have to do so eventually. For now. In the next lecture, we're going to be working on changing what the first page is going to be by creating a new page instead of for project. 13. Changing the MainPage: we have a definition of a main page since we created the project. These main patients greeted immediately. When we create this Andrew, deny US projects. So that means that if we run this application, the sees the only page that will appear on the first page. That will appear, of course, now these doesn't make a lot of sense if we think about it. If we run an application to have new contacts, the first thing that should appear is not the of new contact page now. I didn't start to define this in the main dish. I could have created a different one. But that means that we should create another page that eventually will least these elements on in fact change the first page to be that new beige. So let's take this a step by step, and that's first greet and your page. So here in the Contacts project, I am going to right click select add Select New File and in here I have the option to select from forms some different files for guns on pages. In fact, you see two of them for content beiges and two of them for content views. Let's focus on the content based for now. Here I am going to see that two options are pretty much identical, except for one that says Samel. So what is it? Difference? The difference is that if we select the foreigners content page option, we are going to be creating a page bought that page will not have Osama file. The page will have to be defined entirely. Own C sharp. It is the other one, the one that we want the one that greets boat Osama. And that's a sure fire. So that's why I had and select that one and said the name too contacts beige. Now I'm gonna show you how to do these ex sensing thing on Windows disagreed. These new patient windows, Then you would also have to go to your contact project, right click in it. Select, add And in these gays select new item. The templates and windows are going to be a bit different, but you can also find salmon forms here to the left and see that the results show accounted page and a content based C sharp. These are the same that we have just found on summering forms over on Mac the count in beige Easy one that is going to greet both assemble and the CHR file and you can see that the extension is actually assemble ive you select the seizure file. This is the one that will make you to find the page through c sharp entirely. So just make sure that you selected content page and that you name this contact space Anglican ad. Now let's jump back over to Mac on their windows and Mac, now that you have the name of the file Let's years ago, Hank Lee canoe, and we will now be able to see these session file with a new contact space that he carrots from the content based just like the main page as well s eat Zamel file. So we now have these entire new page. However, even if we have greeted these new page, we still don't have any way to never gate to it. And in fact, we shouldn't navigate to it as much of CDs. The first page that he's displayed to the user to How do we change that? Because right now, by default, it is the main page, the one that he's showed first we'll change. Days will have to navigate over to the other application files that were already here the moment we created thes project. And there is the ab dot sammo dot CS file The reason these older ab kal as instead of my project that was created by default that will be very useful for us in a couple of scenarios. For now, let's just notice that in the in its constructor there is a definition off the main page. The main beige is a property off the AP class that defines what page he's the first to be displayed in these cases. It, he said to the default main page, What we can do is change it to another page now in here. We could simply said this to a new contact space, which is the one that we have just created. However, if we need some navigation intended for application, we should do something slightly different now. The next explanation is going to make more sense if you have experience with Ohio s. So if you have experience with us, you can just very easily grasp the 80 year that I'm able to explain, if not just bear with me and be a little bit patient. So what we need to do here is set the main page first to a navigation beige. These doesn't mean that we need another base that the navigation patients going to be. This played bought that the navigation page is going to help us manage older navigation. Similar to what happens with IOS. With some marine we're going to need can't like the navigation manager in IRS. It is called an avocation controller and the navigation control can have a root beige the one that is actually displayed at the beginning. And the root beige in our case should be the contacts page. So let me go hand to find that instead of setting these to a new main page, I am going to set this toe on a vacation page. I noticed that the constructor has an option or an override that he's going to be receiving the page that is going to be that route. Here is where I can say this to a new contacts page. What this means is that the navigation page is going to be created and assigned to the main base, the main page that is the appropriately of the app. However, the navigation page again is not something that we see. As much as it's something that is going to rain is the navigation we are setting the root based that ease the first place that is going to be displayed now. What the navigation page will help us do is that as we navigate to other pages, we automatically will see. For example, in the case of us that are back. Bolton East added that a title bar East added to everything east on Pharrell's by just setting the main page to a new unification base. Now these, of course, is going to be way, way clear when we start testing application. For now, just bear in mind that the navigation page is not something that we are going to see. It's route is the one that we're going to see, and these is how you change the first page that he's going to be displayed to the user. Now. It is not longer going to be the main page. Now it is going to be the contacts base through the navigation beige, which will now enables to perform the navigation quite easily now in the next nature. Let's go ahead and start adding that navigation. What we're going to do is to start working with the toolbar. 14. Toolbar and ToolbarItems: in the previously drew, it created a new page, the contact space. These is the one that is going to be displayed the very first time the application he's opened. So every time the application is opened, these ease the one that is going to be displayed, that means that from thes page, we're going to need, uh, on add bortin or a newborn turn or a new contact Bolton that eventually never gates is to the main page. So that is why we're going to have in these elector now before doing anything. Limit. Go ahead and build my contacts project. So the Cemal file ease identified, and eventually an can see these designers working. There we go. Now, what I want to do in here is not simply at the Botton the way we have done it earlier in the other page, what I want to do is make use off a toolbar you may notice in many applications on both Android and IOS, there is a bar at the top, or maybe sometimes at the bottom of the page and in these bars, where we find some of the bottoms are going to be executing some functionality very rarely and have Bolton in the main section of the page. It is on those bars, so let's go ahead and add one of these bars with one of those buttons. These bars and those both ins are actually defined outside of the content of the content beige. So the content is the one that we have been working with. Now, if I never get to main page, I don't see the contact page that content. As I said here in the pressure was created. You may not even see this on some templates, maybe in Windows, maybe on some other versions. Official. The studio. This is not created, but actually this is not necessary because the content ease the default property to be set from the content page, Which means that these that we have right here, he's being automatically without us having to specify it defined as the content off the content beige, which means that having these is the same thing as having Contin paged content right here as having V's and let me just change the indentation here. So this is going to have the exact same result, but we don't need to do this our definition could be simplified by simply not including the definition of the content. And now my interpretation is wrong in here. There we go. So we didn't need the definition off the content in here we do need in this case is the definition off the toolbar items to the Tober items is a different property similar to the content off the content page releasing here where we are going to be defining two more items now. As you can see, these are not particularly well displayed in the designer. We don't see anything at it, the designer, because this is outside of the content. For us to see these, we would have to run the application. We will learn how to test it in the next section. For now, let's just focus on just adding some text in here on the text is going to be, Let's say new now. You could also add some I can see here you would have to have. Of course, the ankle on the projects were not going to be focusing on that. For now, we are just also going to be creating a collect event handler like this just as we did with abortion that we have on the main page only just remove these line So my even hander is completely empty and changed its name. Let's say that this is going to be the new go intact toolbar item kill leaked, even hander, which now help me understand very well what these method ease abound. So this he sees how you agreed a Tober item like I mentioned, you know, something that we can see on either Andrew or Iris yet bring the next section. We're going to take a look at how it works, what we're going to be able to do now ease navigate from these methods to the other page. Because precisely when you click these new contact two of our item you want to be navigated over to the main page, which should actually be called New Contact Page. But whatever. So we add new contacts. That is exactly what we're going to do in the next lecture. Now that we have in these new button we can from the main page to which we will eventually navigate at new contacts. So in the next that sure the navigation and the you are for application is going to be pretty much ready. We already have these new content page that he's going to be displaying that new Barton and of course we have the main page that is going to be helping us or the users at new contacts either Next election were simply going to complete the navigation so we can later focus on adding the functionality. 15. Navigation in Xamarin Forms: So we already defying the contacts page and you're the contacts page. We're going to have the Stober item that is going to be used to navigate over to the main beige. It is the new or the new contact Bolton. The users will prayers when they want to add a new contact, and it is from the main base from where they will be able to do so. They well, we have already to find here the entries and the Bolton to do so. In fact, the navigation is now going to be quite easy because we have a ready to find the main page off her app to be an education beige that it starts through the contacts page now because we have these navigation page. When we from the contact space navigate over to the main page, the navigation page is going to do all the heavy lifting. It's going to have ah, history of navigation, so we eventually can navigate back. It's actually going to add the backboard and automatically, and it's actually going to handle that back navigation as well. When the user presses on that fortune, all we have to do a school one single line of code, which is why we will have to add in the even handler for the click of the new contact to more item that we have to find that line of code is actually going to be coming from the navigation property of the Contacts page. So any page, because it inherits from a content page or a different kind of page, will have a navigation property. This is coming directly from the parent is not something that is defined inside the contacts page itself. Actually, it's not something that is defined in the content beige. It is something that is defined in the page, which the content page inherits from, and the navigation property is going to contain some and different methods. But the one that we're looking for right now is the push a sing method. The Bush facing method is the one that in eats arguments is going to ask for the page to which we're going to be navigating to now. We could also set the navigation to be animated. That is not going to be necessary. Really. Everything that we have to do here is create a new main page, just like this and again, all of the heavy lifting is going to be performed by the navigation beige. Now our navigation is ready literally. All we had to do was add that line of code now the main page off the entire application. Ease a navigation beige and the navigation page has a route page that he's going to be the one to be displayed first the contacts page and from the contact page. We already never getting over to the Main Bache. And like I said, with the help of the navigation page, the main page will now have a back porch in which allows navigation back do the contact space. This is going to be much clearer in the next section when we start testing these functionality. For now, rest assured that our navigation and are you I eas pretty much 100% all we have to do. Now he's start working with saving contacts, reading them and eventually adding some more. You high. By listing those contacts these east how easy Edie's to perform navigation on some reforms 16. Testing on an Android Simulator: So he'll ready to find the Contacts page as well as the main dish, of course, but so for at least in the contact speech, were not able to see anything because we're working with the toolbar and the tool. Glorious, actually, Only going to be this blade instead of tile bar that gets sided because off the navigation beige. So during the section where we're going to be doing is testing our application. Drink this next year, we're going to start by testing it on Android. So far, you remember all we really have is the navigation we are pushing over to the main page from the contacts page through the new contact toolbar item. This would mean that, by the way, from the application the class we're setting the main page to be, well, actually a navigation page. But the navigation page has the contacts page as its root, which means that the Contacts page is going to be the first page we never gave to. So let's go ahead and test these AB own A simulator is starting with android here to the top official studio. You're going to find a feat options and during these on windows. He's going to very slightly. We're going to take a look at that. You one of the lectures in the section, But mainly you can select what project we're going to be testing. Let's select Android. How are we going to be testing this on Android? Actually, here I also see iPhone and Afrin simulator options, which make no sense at all. But let's go ahead and select Debo, and you are very likely going to see an option in Kier listed. At least one option here, least ID or virtual devices Andhra Mutual devices that you can use to test your application . If you don't, which I find very unlikely, you will see these manage Andrew devices Option again on Windows is going to be slightly different. We'll take a look at that, and in these base you will be able to create new devices. Now in here, you will have to select Maybe what device is going to be the race of these virtual device that you're creating? As you can see, you can select from in a different templates. Let's call them that processors, the operating system that you will use and many different options in here regarding Ram recording INGE EBU regarding cameras Body ary, etcetera. Just go ahead and create one. And once it is created, each shoot appear in the least in here. So I'm going to go ahead and select any of the options that I have Anglican grown then where we made installation. And by the way, I do have an error because I changed the name off my conflict even handler on such are. But I didn't. And Samels let me go ahead and do so. So I was running this application and telling you how when we installed this application we served for I'm sorry, visual studio. When we installed everything we search for hacks, um or the hardware accelerated options for Andrew Emulation and IV. You were able dreams told that the android emulator is going to launch quite quickly. So here you see the android emulator that he's already opened running after very few seconds. Now we should wait for the application to be installed. We see visual studio working on it and after a few seconds we should see the application launching with the application of eroding. We see these navigation bar that I was talking about these title bar that the navigation page ads. And here we see that new toolbar item that we have added from do the contact space. And if we click on it, the vin handler is going to be executed. The one that we have up here, which precisely has the push a zing to the main page. And we saw how we get navigated over here. Ah, here is an interesting thing one, by the way, my emulator is very, very small agency. This is usually not that big. And as you can see, the safe botany is barely visible there. But the important thing here is that the navigation page also added these back parts in Now , on Android, we always have the software or the hardware Porton in their denial as this is actually crucial. And we're going to see that bank fortune as well. So we can see how we have these You I ready? We see all of the entries, the ball, turn, the new contact, Bolton and we see the navigation happening very easily. In the next lecture, we're going to take a look at the same thing on IOS and you will notice how these same code has created the very same re sold in the U. S. As well, of course, adapted to native control. 17. Testing on an iOS Simulator: Now that we have just Erin Andrews, it's time for us. To Chester Ni Us. Now just in Iowa is when you're on Mac is going to be, yes, a straightforward after getting on on board. Or we have to do ease, change the project that we're going to be running to the Iris project. Also selected Debo and select one of the many simulators that get installed when you install X Code. I am going to be selecting the iPhone Chance simulator. Of course, the newer the simulator, the more resources is going to use. Eve. You are trying to save researchers on your computer. Maybe don't have that much ram. You could select the iPhone five as which is the oldest of the simulators. It should use the least. Resource is you can simply go ahead and select iPhone 10. And he didn't run. Now on Windows, it is going to be societally more complicated. We're going to talk about it extensively in the next lecture. So if your own windows you will have to jump over to the next lecture and learn how to test in the U. S. And meanwhile, here it is the simulator launching and after a few seconds CDs quite quickly as well. We see the application over running in here, and we also see these new bulletin. And if we click on it, we get navigated over here where we see all of the same text fields. In the case off IRAs, they're called text Feels won't they are just entries on Sam Marin. We see the border and in Iowa is very important. We could not do this application without it the bank bottom. As you can see, it, is exactly the same functionality. The same navigation, except that summary informs, is built to precisely use entirely native controls, as we have already seen by the waiting to the signer. The difference by running these applications already in the simulator is that we can see the title bar, for instance. And that's the actual functionality, something that we can do with the designer alone. Now. It is very important for you to notice how native this looks because eventually eat ease. In Tallinn native, I make a big emphasis and days because people sometimes confuse or mis interpreted functionality from Sam Marine, especially with sovereign forms, because we're defining the you I with Samel. But these Dawson, that'll mean that thes doesn't end up as an entirely native application with entirely native controls. So now that we have taken a look at the application, how it looks off course in the next lecture, we're going to take a look at how to run this and Windows. But in the next section, we're going to start to other actual functionality. Now that we have to navigation and the u I, we're going to start to, ah functionality for us to save new contacts on a local database starting in the next leg. Sure, in the first lecture off the next section, after we talk about how to test on Windows, we're going to learn how to our new packages to our project so we don't have to co the entire functionality. We can import functionality that other developers have created 18. Testing on iOS from Windows: to be able to test your IOS applications and window, you'll have to do a bit more than on mag and for the case of Android for the case of Android, just like on magic. And just make sure that the android Project E selected from this drop down that you have selected Debo and certainly one of the emulators. At least you should have one by d folding here but for you as you will have to do a bit more things like a mention in the provision lecture what you actually need, ese, for your a visual studio on your Windows computer to connect to a Mac host. So that is why you need a Mac computer. I briefly mentioned that you could use mak ing cloud that come ive You do not have access to any Mac computer whatsoever that where you congeals test your i us applications. So let's go ahead and test this out. I will have to navigate over to tools first and foremost go to options and he here find the summary options on the IOS and things notice that in here you have the ability to pare it to about computer. So I will. Go ahead, Emperor Toe on my computer. By the way, by default, you my computer is now ready for you to do this. So you will have to do these three steps and in fact, in some of mine computer right here. I can search for remote logging here on the sharing folder. And once I am here, let me actually take a look at this second step, which is for you to go over to remote log in which I have right here and enable it so I can see that in his own. And right now I'm allowing these tool users. You could also restrict who can remote looking and your seat on next. And where is that He I find my Mac computer. I can He didn't connect. And I can grind the user name and password that I use to log in to my my computer, and my visual studio is going to go ahead and make a connection to her. My computer hosed, which, by the way, can only happen because my my computer already installed all of my samarie in tools. So because my man computer already installed visual studio in the my computer. These connection can happen. Ive you haven't installed visual studio on the mantle you want to connect to you have to let first. But notice that now that I am connected Ankan just close this. Notice that back here in the options I see colorful I coming here, which means that we're connected. And now what I can do e select IOS. And because I am connected, I will now be able to find all of these simulators. And in fact, I could also now from Windows. Take a look at the signer for Iris as well, because now my Windows computer or visual studio and Windows is connected to the Mac. And over, by the way back in the tools options, I set things you could remote the simulator toe windows, which I'm going to leave selected for you to notice a bit of a difference in here. So I am going to run this this case I'm going to be using the iPhone aid simulator, but I want you to notice a small difference in here. By the way, if you do not select that option too remote a similar toe windows. This simulator would open on the Mac computer. Josta, See if we were running it from visual studio on Mac. But because I selected these to be re moated to Windows after a few seconds, we should see the simulators start on my windows computer. The simulator is is still fully running on the Mac. We absolutely need the mat for this. This is not actually running on Windows Born officials to have the stool notice that will allow the simulator to be displayed here on windows. Some very interesting wizard is going on here because the simulator now opens in here and you can see that it is quite different to the one that we see. I mean, it's exactly the same. It just looks a bit different. But eventually you will see the same IRA simulator pop up in here. Start right here. We see the application launching, and after the application launches, we see the exact same interface. Of course, in here I selected the iPhone eight. In the previous lectures, I used the I from 10 simulator, but you can see how we see the newborn turn we see in the same you. Why that we just saw and we see the same back Borchin that is absolutely necessary on IOS. So there you have it. The seas, how or the steps that you have to perform to be able to test for IOS directly from a Windows computer. 19. Adding NuGet Packages: we already have the main functionality for navigation and the you lie for what? He's going to business. Plato, the user we retested How we see that new silver item at the top right of her applications for both Android and IOS. And we see the main page, of course, least ing all of these, Andris, that we're going to need along with the same bottom during this section we're going to are the functionality to save new contacts on a local database. Particularly, we're going to be working with sequel lights. This is going to be a very light form off database, and we're going to be able to work with it entirely locally, which means one that the data is only going to exist inside of the phone where this application is running, and two that it is going to requite light to work with it. So to be able to do so, we do not have to co the entire functionality. There have been developers that have created two packages for us, do work with sickle light and made it very e c. For rules. To start working with it or we have to do is make sure that we import the packages that those developers have made available to the public into our projects. So let's learn how to do swing these lecture on Windows. All you have to do is right. Click in the solution and select Manage new J packages for solution and do something very similar to what we are about to do on visual studio for Matic. Unfortunately, you have to do this project by project again in visual studio windows. You can do it for the entire solution. In one single step on Mac, you will have to do it once for every project that you have so on that, then we're going to be able to find the dependencies and find the new Jeff older. Here in the neutral folder, you will have to right click and select add packages and you will be navigated to this on Windows. You should now see something very similar after right clicking and selecting manage energy packages for solution. Make sure, by the way, in windows that you are on the surge or the Explorer a tab not on the installed or updates tab and in here we're going to search for a particular package that will allow us to use egalite. This is going to be the sickle light. That's net that B C ale package and we're going to find someone very important. There are many results in here. Find the one that East Gold Exactly. That Seek light dash Nanda Spcl the one that in fact has its on of downloads. The one with the most downloads over a 1,000,000. Now the one by a Frank eight Kruger And the wonder has. And these cute I can hear very important that you select this one. There is another one that is similar, but he has very few downloads and has an easy peed name at the end. Do not select at this one. Selected the latest version available, and Heaton at package windows is going to be quite similar. You're going to go hand stole it. Maybe some pop ups are going to appear for you to accept the license terms Something like that. Here it is already successfully added, We can see that visuals to do is letting us know and we induce again. You're probably good to go on. Mac will have to repeat these same step on Andrew it as well. From the Packages folder Select Add packages and now you should see sequel Lightly sedated Top because we have just used it so selected in select Add package and again repeat this on IOS in the Packages folder, select at packages and as the Sequelae Baggage. This is how you add this baggage is to your project. Now your projects are ready to start using the functionality that Frank Krueger added to the package, as you will be able to see the functionality or the code has made it super easy for us to start working with sickle light. So starting in the next lecture, we're going to make some configurations Land Road and Renee OS. So we know where is these database going to be stored? I'm going to talk a little bit more about that in the next lecture. For now, you just have to keep in mind. That and road anti us have different directories. The operating systems worked likely different, so we will have to count like work twice for ones in summer informs. Maybe the only time that you will have to code is likely different functionality for each platform, but That is the reason because Andrew tonight us work so differently with files that we will have to do something slightly different. So starting in the next lecture, let's do so on Android. 20. Setting SQLite up on Android: So we're going to be working with sickle light. And then a previously actuary went ahead and install the packages in all for projects and windows. We had to do it from the solution just once on Matt. We had to do it once per platform. But her project should be already good to go now. I briefly mentioned in the previous lecture that because our US and Andrew works slightly different with their files and their directories are different, we will have to code a different functionality. Your different set up in each platform again on submarine, especially on summary informs you're aiming for almost 100% code reuse. There are going to be some scenarios. Where there has to be as like difference I see is the case that we're working with right now because we're going to be working with a sickle it file for the database that has to be stored on the phone, and Andrew and the US are going to be slightly different. We do have to make that distinction now. Actually, Samarie has been very good at minimizing the changes that are required and IV Apple didn't have a small restriction that I will talk about in the next lecture. This could actually be identical, bones. I do want to mention that you could always add specific functionality for each platform. So let me go ahead and close these files that we have in the share project that we're not going to be using right now. Never get over to the Android project and find the main activity. If you have ever worked with Andrew Development with Java just native under development in general, you should know that we were with activities or not. Drawers activities have their own. You I and this is exactly the same layout off a traditional native 100 project because it actually is Onley using C sharp in this case. And that is why we see, I mean activity. Would you see some changes? For example, DC's inheriting from a forms ab combat activity that summer in created more of a role. This is going to be quite the same thing, except, of course, that we're not going to be defining that you are on XML because we already defining it through with a hell of summer informs we've Zamel and C sharp. So the thing is that here. Notice that we are loading the application and we see here on AP class. That should be very familiar to you because we saw it over here in our contacts Shared project. We see the ab glass right here. And these were wood to find the main page to be unification beige. These ease how the and replication is using our shirt Project Sam reforms to initialize that you are through the load application method and initializing it to a new app. Now, when we will have to doing here is leverage the fact that we can connect somehow to the main project or the ab glass in these cases to pass to that project where, in the case of Android, ese are sequel light database going to be located. So right before calling the load application I want to define where is these file going to be located? Let me start with finding as drink for the file name simply how my database is going to be cold and the final name is going to be contact underscored the b dot db tree. The extension is not that important. This grief and b txt or something. Let's just call this at the re tree file ready and store these on the filing. Now. Now that we have the file name, we should get the folder bath. Where is thes file going to be stored? And here is where the difference with IOS is going to be important on Andrew. There really no restrictions in here, But I do want to get a specific folder path, so let's go ahead and search for the environment glass. Now, as you can see, there is one environment class in Andhra Ward daughter O s. These he's not the environment glass that we need. The environment clatter. We need this inside system. It's assistant the environment. Very important that we specify these then, because there are two environment classes available, so we have to specify their names bases. So a system that environment is going to contain a get folder path methods and they get folder path Method is going to require the name of the special folder for which we want to get a path on special folder. We can receive it or search for it by grating system, their environment that a special folder and in these cases haven't going to be searching for the personal folder. This is a full already exists and that Sam Marine can't map to a specific path inside of the Android eco system, the Android operating system. And so it's pad would already be inside of the folder path variable. The last thing that we have to get ease the complete path, which is going to combine the folder path with the file name. Now it's not a ccs just combining them as you will combine any two strings, their visas, small science going on with the paths that you have to establish. So for us to not complicate things that's just used one very easy way. There is a path class that we have access to, not immediately, but notice that if I grow rights or type on my key word on Mac out enter. I see options of how to resolve this error that I have here because immediately Path is not recognised. Noticed that it says that the name path does not exist in the current context. So I have to do on Mac East, type out, enter or on Windows Control dots and see that I can solve this by adding a using statement or here on notice that using system radio has been added. And now path is recognized and PAD is going to have a combined method that is going to receive as many strings as we need. In his case, we can pass the folder path and the file name, and now complete path is going to have the entire path to the new file that we're creating here. Order is left for us to do East past these to the app. But of course, right now the AB doesn't receive anything. If we never get over to the AB class cities instead of the shared project, we see that it receives nothing. We can actually create a new override of thes constructor and tell this constructor that it is going to be requesting the final path. This is going to do the exact same thing. It's going to call the initialized component is going to set the main page, but he's also going to receive a file path, and it should assign it to a viable that we're going to be creating. So variables, by the way, should always be defined before the constructors or it's not absolutely necessary, but it's a good practice. And what I'm going to do either find a public static string that is going to be the file path. It is going to be static because we shouldn't look need to instant. She ate the APP ical as to be able to access it, and we're going to assign its value from the second override of the constructor to the file pad that is being received through the argument. So eventually we will be able to access the file path from any other page, the finding it here in the class and because the AP classes the first thing to be created when we're on the application, right. Hearing that load application coal, the file bad will be established and we will be able to access it from the contacts page and from the main page. All there is left for us to do then is here when calling the new app constructor usually constructed that we have just created and passed a complete bath. Here we have established at least one android so far, where is the file for the database going to be located? And we have sent it already to the AB. So Andrew, it is already good to go for us to start saving and reading from thes database. Now in the next lecture, let's go ahead and do the same thing for us. 21. Setting SQLite Up on iOS: so we have a ready to find where e's are filed for the database going to be located on Android. Let's now go hand do the same thing for IOS now This sexually going to be quite identical. In fact, I have to do is copy these three lines of code that I added to the main activity and based them over on the AB delegate that we have on IOS similar to always. Just so, With the main activity here in the AB delicate, we see that a load application method is being cold, and the AB constructor is being called as well. And just like the main patient, Andrew, the AM delegate is going to be the first class to being Stan Shih ated with When the iris have launches and the finish launching method. Ease the one and the other doors that as well. So we know that the load application is being used to load the IRS application from this summary forms functionality that we're coding over in the shirt project. So let's just go ahead and paste the functionality or the set up of the finally mean here off course. We will have to also add the using and directive to system Abdullah. I go to use the path class, and in this case, we don't need to establish system the environment because in the case of us, the recently one environment glass available now I did mention that Apple has a small restriction as to where these finals can be located. Each your cell that these files have to be in a specific location. We cannot have them here inside the personal folder. We have to have them in a folder that he said, the same level off personal, which means that we will have to get out off personal. So let's say that personal e seeing folder name, example. So we have a folder name, example and inside of the example full that we have the personal folder. We have to go back to the example folder, and from the example folder entered the library folder. So do you do that? What we're going to do East combined. Ah, a couple of paths in here. So from the path, I am also going to call the combined method, and the combined method is first going to receive the path to the personal folder my way removed the environment here. Don't get folder. But there we go. And so we're going to combine the path to the personal folder with two dots which, if you have ever used command at the command, prompt. You know, this is how you get out off a folder. And after we get out of a folder back to the other directory, I am going to enter the library folder. So this is basically how we can get out off the personal folder to the example folder and enter the library folder. So this is everything that we had to change hero. Now us. The name for the final is going to remain the same. We have to steal, combined the folder pad with a file name and eventually send this to the constructor, which we already defined in the previous lecture. Now the city of Ferrara is east complete as well. Starting the next lecture, we can go ahead and start inserting new elements in secret light off course. We're going to be doing that from the main page where we have these form where we can't greet a new contact off course before, in the next lecture we have to do some other things. Let's just for now, know that seek light is pretty much ready. We have already added the packages and we already establishing for both IOS and Android where the database is going to be located. 22. The Model (Classes): so our signal light functionality ease set up. We have added the packages that are required two over projects, and we have now from both Android and IOS said. Where in each of those platforms is the database file eventually going to be located? Now we should be ready to start saving new elements bone. Of course, before doing that, we have to somehow to find the tables and just want table in this case. But we should also defined the combs for that table now. Like I said, the functionality that the packages come with is going to set up that very easily. But we do have to said, How easy is going to be translated into C sharp? Basically, we need to define a C sharp class that will eventually be used by the package that we imported to create a table and create its columns. And this is actually going to be the class that we used to create objects from it that eventually are going to be entries in the table. So that's what hand do that in these lecture, and we're going to be basing that class in the entries that we have here, so Each of the entries that we have in the main page is going to be eventually one of the columns, So these is going to be pretty much the model off our contact. So let me just right click on the contacts project they wanted assured. And at first at a new folder, Let me just have some structure here with my folders and call this colossus. And instead of the glasses folder, I am going to add a new file, and I am going to search for the empty class template is going to be This is, of course, going to be a C sharp class on windows. By the way, you have the ability to add a class right away by right clicking on the folder selecting ad . And there you have a class option. Either way, we are going to be calling this contact and a new contact glass. He's going to be quickly created. All we have to do here on the contact class is defying its properties again. One property for each of the entries that we're going to have. So, for example, we're going to have a name, property and by the way to quickly create properties. All we have to do is great group notice that you see a template for a showed property being listed in here. Simply type top twice, and you will have these property very quickly created. We first need to set the type of the property. This is going to be string and it's name which is going to be name. And we're going to do the same thing for the last name. For the email, for the phone number and for the address of five elements. We are going to be meeting one for each of them. And the fact that we're going to be using databases requires an i d. So we need to establish an i. D. In the case of sequel Light that I d will have to be an integer So I'm going to be the finding and into elementary is going to be I d. These is how we're going to be defining the model off the contact. Basically, it's going to require one property for each of the elements that we need for the contact. And of course, eventually, each of these are going to be translated into a column inside of it contact table. It is also going to be requiring the i d for it to be the primary key, which, by the way, we should establish with a secret light attributes. So secret attributes are going to help the sequelae package understand how hard he's going to be created when we define the table or where when the package creates the table. For example, it would find the idea that primary key, which, by the way, requires us to are the using directive to the sequel Light name Space. The table, when it is created, will know that the 80 has to always be unique. And in fact, we can said this to aural increment itself. So maybe the first time wins or something. It is going to be a zero, and the next time it is going to be one and so on and so forth. And there are many attributes that you could use. For example, for the phone number, you could use something like the max linked and in parentheses. That was the value. Let's say that for a phone number, the max length is going to be 10 and you know there are many other attributes that you could use. Let's, for example, you could in in case you want a table to be named different than the name of the class you could use and agitate for the class in tackle, as as well, which would be the table attributes and in parenthesis you could establish the name I think is you wanted the name of the table to be different than the name of the class. You would establish it here on the name of the class would be ignored. The name that you establish here is the one to be used and the same with properties. If you wanted, he do not be last name you would use in the colon attributes and inside of the double quotes said the actually that you want instead of the table for the column instead of the name of the property. I am not going to be focusing a lot on all of the attributes you can set. These are the ones that we're going to need. Nothing else is really necessary now. We actually have the model, how the table is going to look like. So that means that we are good to go to start creating new contact objects from that class with the help of whatever is greeting inside of these entries and insured them into the database. 23. Inserting to a SQLite Table: Now that we have set up everything that we really need, including the continent class, it is time for us to actually start using the sequelae database. So far, we haven't done anything with it more than adding the Pantages that we're going to be adding. So during these lecture, we're going to be coding some functionality inside of the same Bolton collect event handler suing There we are saving any contact inside off a new table. So what is it that we have to doing here? Well, first of all, we're going to need to agreed the contact that we're going to be saving. Thankfully, we already have a lot of these entries where the user can ride the name of the contact, the last name, the email devil number and the address. Unfortunately, open till now, we really don't have a way to read whatever you seen the centuries and you may already know the answer to these one, but we have to do something very similar to what we did with the bottom and that he used to assign a name, do these injuries. So later on, we can actually access them through the main page. Remember that we saw that samarie automatically when we set a name to an element in Cemal eat, it creates the actual property instead of the main base class. Not in any of these two files that we have available, but in one that is actually hidden by default. So what, I'm going to do it simply assigned some names to these entries. The 1st 1 is going to be the name injury. And I do recommend that you come up with some naming convention that is going to make it easy for you to identify one entry from another. In my case, all I do is grind What? The centers of our, for example, last name and of these East and entry indeed similar to what we have with the party here, then save part name is very easy to assume that this is about and that is used to save something. So these older is going to be the email entry. I will also have the phone entry and finally the address entry. And so now the 1,000,000 trees have names. So I have to do is come back to the main page. That sample that's years where I have these even hander for the click of the platoon and create a new contact. Now, contact is a class that I have in a different name space because I have it on a different folder. So we'll need to are using directive to that name space, which is contact dot classes different to the name space where these main page is located on. And I am going to be creating a new contact. Now, I can use these notation and see shop to be able to create these new contact immediately with some values. Freaking assign the initial value for the name property, which in fact, is going to be the text that is greeting instead of the name entry. Just like this, Wigan axes that text, whatever tax the use for high scrutiny here and show the name of these new contact would already have that Texas sign at creation. And we can do the same thing for the last name. The same thing for the email, the same thing. What's next? A phone number and finally the address. Now, of course, I cannot do this for the i d. Remember that I also have an I d property instead of the contact. But that, if you remember, is going to be said to order increment things do these secret light attributes. So I have a contact that needs to be inserted Now the next parties, the actually important Barnes the one where we're going to be inserting this into the database, and there's going to be very straightforward. But I do want you to notice the notation that we're going to be using here. The syntax. What I'm going to do is use using a statement. These is going to be different from my using and directive, and in fact, it's entirely referring in its functionality. But instead of these using statement, I am going to be creating a new, sick allied connection. Now the sequelae connection class is inside of the sequel Lightning Piece. So I can either ride sickle light, that sickle like connection or at using directive, which is different from a using statement again to a single light. So I don't need to grind it down, and I can just great sequelae connection. This is going to be the connection, and it's going to be equal to a new sequelae connection. Now notice in here that the constructor for the sequelae connection requires a database path, and it so happens we already have that instead of the AB class s a static property that we can access immediately. So just like this, we have initialized a new sequel like next Shin, connecting to a specific file that we're receiving through a specific path that you remember. We said to something different from and road and from IOS. And so no matter want project is running this this is going to work because both from Andrew and IRS were sending these value. Okay, so we have this using is statement different from using directive, which simply tells these file that is shooed used as specific names based to search for types or their things. The using statement, what he's going to do He's make a specific element exist on Lee inside of eats context in these cases, a connection. Now, what this means is that as soon as the using state men is executed and the execution leaves these block of gold, the connection is going to be this post. Now we can only do this use by using a statement with glasses that implement the I disposable interface. These interface right here because that interface makes the classes I had, uh, method that is called these pose notice that essentially the sequelae connection contains a dispose method. These these pose method is here because the connection to seek, like, connection class implements the high disposable. And so these using statement is going to automatically call that these pose method for us and what that is going to do. He's actually going to close the connection to these sequel. I'd database now. We could always close it by going the clothes method born. I do. I greatly recommend that you use in these syntax so you don't have to remember to close a connection every time because you can always have one connection to the database at a time . So if you were in closing the connection in here, you wouldn't label later, be able to connect again and maybe read from the database. So that is why we're going to be using these notation now. The important thing here, let's go ahead and insert into the database, of course, to be able to insert into the database, we need a table, so let's first go ahead and create a table newness and that the create table we exists inside of the connection. And in fact, there are a couple of create table methods. The one that I want to use ease the generic one, which is going to be requesting inside of these angle brackets what table we're going to be creating. And that is going to be the contact table. And we don't need to pass anything today method. And that's it. Just like this, I told you, was going to be easy, just like these things to have package that we imported. We have greeted the table that is going to be cold in the same way that this glass is, and it's going to have one colon for each of the properties of these glass. Things precisely to Dad, a pack is that we imported. And so now that we have the table, we can make sure that we can insert into it. Now there is an answer method again. I told you these rules weren't to be very easy. The same sequelae connection class couldn't contains an instrumented that will receive any kind of object so we can pass the contact. And of course, these method is going to be smart enough to know that this object is of time contact, so it should be inserted to the contact table now. E there waas No table that corresponds to these type. These would throw an exception, so it's very important that you create a table before inserting. Now the insert method is actually going to return an integer with the amount of rose that where modified or in this case added. So let's take a look at the Rose added, a viable that is going to be equal to conduct insert. So I'm going to set a break point in here to run this because so far we are not really reading from the database. So the only way to know if these were successful ease to inspect the value of roast at it. If we in set a new contact after clicking the safe Bolton and if it was successful Rose at , it should be one. If it is not one. If it is zero, we are going to have to take a look at what we are doing wrong. But I think everything is correctly correctly set up. Now let's just run this on the simulator. I'm going to use the IRA simulator. Of course, this is going to work in the exact same way for Android. Let me just test in Iris in this case and take a look at the Rose added. If the rows added is one again, that would mean that we have inserted successfully one item inside of the database. And so in the next lecture, we will be able to read for now. Let's just go ahead and navigate to the new contact page, said a name. This is going to be me. So describe some things in here not going to be writing, especially my email, you hear, nor my phone number and all my addresses, some texting here for testing. Click on Save. We heed the break point and we see that Rose added east one. So that means that we have successfully saved one new contact. That, by the way, has all of that information that I just Britain in those text fields, as you can see for those entries in the case, examining forms their text fields in the US As you can see the I D s also said to one This is going to auto incremental. The next one would be to So there you have it. We have successfully inserted items into the table in the next lecture, we're going to be reading them. 24. Reading from a SQLite Table: So we already inserting into a new contact table that we created inside off our sequelae database. The next thing that we have to do, he's reef from the contacts page because, of course, eventually we're going to do. He's every single time we are hearing the contacts page displayed to the user all of their contacts now the best way or the best blazed through start to re than these database. He's when we navigate to these contacts page. So this would be, of course, the first time the app is open because if you remember, the contacts, Page is going to be the first page to where we navigate thanks to also setting Dad Page as the root of the navigation page. So that's the first time when we opened the application, but also if we from the contacts page navigate to the main page and then never get back, we want to read the debates again in case we added new contacts from remain beige, which means that we have to figure out a way to know whenever we're navigating to the contacts page and there is actually one very useful method coming directly from the content page. So the contacts page is inheriting and rear tool method that we can override that is gold own. Appearing as its name suggests on appearing is going to be executed every single time. The application he's displaying this page. So when these page ease up hearing to the user, it is he here. We want to reach the table now very similarly to war. We d that to insured. We're going to need a secret like connection, and it is very important that we use are using statements that we don't have to manually call the close method every time. So I create a new connection here that is going to be connecting to the same file path or using the same file path that we have in AB and through the connection, we will be able to read. No, we already created the table from the main page. However, I want you to think about it the first time we navigate here to the application. It is a contacts page, the one that is going to be displayed before the main page. And so the first time, at least the own appearing. He's going to be called way before we could leak the safe bulletin where the contact table is being created, which means the first time there is no table to be read, which means that we should actually greed date the table in here. So we're going to be creating it in the same and way this is a contact table and I need a using directive in here, and I'm just going to create table here as well, which means that I will now be able to read from it. So I will just get of are able call contact to be from Kong and call the table methods. The table method is also going to tell me which table I want to read or ask me which they will want to read. I can tell it instead of these angle brackets and just like this noticed the contact is going to be a table query. Now what I can do e school and the two least methods. And for me to be able to use that to lease matter that will explain about in just a second , I will first need ah using directive to system the link and so system that link is going to provide me with a two least method that what the's to lease method is going to do is grab the query that I'm making to the table and turn it into a list. And so notice contacts is now at least of contacts. So very easy. Juries from the table, our contacts variable is now going to contain all of the contacts that we have instead of the table now, before moving forward to the next section and start to display these contacts on when you to know something. Yes, we are creating the table kind of like twice in here, one when we want to reform it and another one every single time we want to insert to it. Now we don't worry. Ive sequel Light sees that we are trying to greet a table that already exists. It is simply going to ignore the execution and is going to be very efficiently done. So this is no really having any impact in the efficiency off application. It is a good practice to do. The creation of the table after role even already exists. It's not going to be created again or deleted or anything, and it's not really going to impact how application works, so we are now reading for the table. Let's go ahead and test this out. I am going to add a break point in here, which means that the first time these Brickman is heat. If I don't add any more elements, any more contact, these least of contacts should have one content inside. So the time of the truth. Let's go ahead and test this out. And if everything goes correctly very quickly, right at the beginning of the application, we should hit the break point, inspect the contacts variable and see that indeed, there is one element in here off type contact. And if we expanded, we see the exact same tanks that I enjoy most in centered in the previous lecture. And of course, if I were to keep running this and create a new one, let's read a test one here, just right test in everything. After I'm not going to be making any evaluation to receive this is actually an email or not . So just save this. Of course, I had a break point. I see that this is correctly saved, so let's just remove that break point now. Now notice that as soon as I head back to the U. N appearing he's executed again. And now the contacts variable has to contacts. The new one that I have just inserted notice has an idea of two. So the auto increment works and it is right hearing set of these least, which means that we are also successfully reading from the table, which means that we're ready to start displaying the elements inside of these interface. We don't have the functionality yet, So starting in the next lecture, we're going to be taking a look at least views and how the least views are going to easily allow us to display lists like the one we have right here in the form of the contacts variable instead of the interface. 25. Defining a ListView: we're already both in setting and reading from a new contact table we created inside this sequelae database we have to do now is figure out a way to this blade these contents leased inside of the wine. So during this section, we're going to be instead of the contacts, Pasion working with a least view so so far content patients out of the contacts page on Lee had a definition of one Tober item which is currently never getting on to the main page. However, what? We're really needing wearisome content so we can actually start least ing the had leased. He s actually going to be quite straightforward. And I have to do easy. Find some accountant in here. So, like a previously said, we can't have the toolbar items definition, but this is really not the content off the page. This is something that goes, instead of the toolbar, the title bar, that we see things to a navigation page. However, it is the content there, one that it's actually going to contain whatever is going to be displayed inside of their page in here is where we need to define the least view that we're going to be working with now. Currently, I am actually going to be defending it in Joe's one line. Eventually. I do need to make some changes to this definition right now. Let me just the find it in one lying and notice that immediately you see, least of cells, least of the inside of the designer. And what we're going to do is having these Elise view use it in a very similar way to the way we have been using Other elements were going to be assigning a name to it. And this is going to be the contest least view and what we're going to do. Ease, set, eats. I am sores. It is precisely the item sores, property of the least beauty. Want that? Well, he's going to set in the least views, sores. What is the lead if you're going to be using to display many elements? So let's go ahead and do that right after reading the contacts. So we have these contacts variable on all I have to do. He sacked, says the contacts lease view and said the items sores do these contacts now. These conditionally happen because the contact is already a list, and the item source needs to be an innumerable noticed that of the type of the item sores, isn't I? Innumerable now? A disease, an interface, but it turns sound, at least actually in some way implements the innumerable interface. So the C's compatible. We can assign at least doing I innumerable, which is exactly what we're doing here. So basically right after reading the content table and making these query be transformed in tray leased with the help of Link, we're going to be assigning these least of contents to the least view. Now. I hope it was that easy. But let's go ahead and run days and take a look at what the least view is going to be displaying so far. Now, if you remember in the previews to lectures, I have already inserted two elements. I have no doubt it any other element. I have the deleted nothing. Still, I see nothing in here as you can see. Even though the least view is here, it is quite empty. Now you do want you to notice that if I click on the first, sell it he selected, so is the second cell and the 3rd 1 is nod That would make you think that something is working here. Because maybe these two cells are already displaying whatever is in those contacts. Onley they are no really displaying anything. But we see that two elements are here on only two. If I click somewhere else in the least be and nothing happens only for the 1st 2 cells. So something most be working here. Now what we're going to take a look at in the next lecture is exactly how are we going to change? One is being displayed in here because currently, because we defined the least be just like this entirely empty. It has no idea how we want to display elements on DSO. While it is least ing the two elements because we are setting the item sores, it doesn't know how these items should be displayed. So in the next lecture another, we see that at least views very quickly working at least somehow working by setting the anthem sores. How are we going to be displaying astral tanks? There's something inside of these cells 26. Using DataBinding: So we're really learned that by sitting the item source of Farley's view to some I in Maribel, we are able to start least ing elements inside of it. However, we have said the item sores bond, we haven't tell the least view. Yeah, we said supposed to display the items. That is why the items appear entirely empty. To be able to tell the least, view how it should display the items, we should create the item template. So the least view is going to contain on item template property that we need to set we touted the least has no idea at all How do we want to display the items? So we need to define the template for its items like this and inside the item template, we're going to need to define a data template. Now, I don't want to get too deep into water data template, and they're binding and bindings are yet for now, let's just say that the data template is how these items employees going to show data to the user. And now that we have in these and data then bled, the next thing that we have to do in these case, he said. What type of cell we're going to be displaying and when I want to do, he's just use a text cell simply a text sale. Now in the text sale, we happen to have a text, the text property that is going to allow us to display something. Now I again don't want to get to dip into what we're doing here. For now. Let's just go ahead and dried, Binding for now, a listers and living like this. Now these ese what is happening by default if we don't change anything Ive we don't adul of these that we just added the seas What all these views doing by default well, we have to do is tell it that it doesn't have to bind to the entire object. So this is what what's happening When the lease view gets the sores in the form of the least of contacts, each contact is going to be inside of a text cell and more particularly instead of its text . So because the contact is not a string, these getting will be displayed. So all we have to do is actually Greider the name of one. All the contact properties after the binding. So let's say that we want the text of the Texel to display the name or we do is grind binding space and name and the magical Lee. We run this on the simulator. Now the tech cells should know how to display the name because the name is a text. He's a string, and you can see immediately how. Okay, The text cell now knows how to use a stream to this place during weeks. Of course, bright. So these easy. These for us to start, is playing those items here on the military's hard to grab, by the way. But this easy is how you can start displaying the for mation in those contacts. Now, of course, we have a lot more information that we have and that we're not displaying. And you could always greed your own costume cell instead of a text cell. That would be a view cell, by the way. But that is something that I cover in a different curse. While you can do, however eased use in the detail, the detail ease another textron, a little label that can be displayed instead of the tech sell and what I can do, he said. A binding to a different property. Let's say that I want to buying the email and to make this have been more phone, it's actually changed the text cooler. And I don't know, let's use use one of the pre defined one. Of course, you can always define your own coloring here, but now if we run this, we should not only see the text bond, which would see the detail with the email and the tax, there should be a different color, as you can see here. Now we see that small and detail label below the name or, in this case, a text label bind to whatever easing the email. And, of course, just as we have access to the text hope cooler, we can access to the detail cooler who we wanted this to be blue or any color again. You can set whatever Corey warned you can and do so. So there you have. This is pretty much everything that we needed to do with these application and the inside of these kers off course. This he's very easy introduction to occurs. I do encourage you to take a look at the next lecture where I talk about what else we can learn with Zama Rain because you pretty much can do anything with some Marine. Thank you so much for watching these curs. I hope that you have learned the basics. I think I talked about why I wanted to greet this curse in the first place. I really hope that this has been useful for at least one person out there again. Congratulations for completing this curse. And I will see you in the next lecture, which is the last lecture of this curse.