Xamarin Forms - Make Apps in C# - Beginner to Advanced ✅ | Grant Klimaytys | Skillshare

Xamarin Forms - Make Apps in C# - Beginner to Advanced ✅

Grant Klimaytys, Software Engineer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
28 Lessons (2h 45m)
    • 1. Introduction

      3:13
    • 2. Xamarin Setup on a Mac

      5:09
    • 3. Xamarin Setup on a PC (Visual Studio)

      5:09
    • 4. Linking Xamarin on a Mac to Xamarin on a PC (optional)

      2:58
    • 5. The difference between Xamarin Studio on Mac / PC and Visual Studio

      2:42
    • 6. When to use Xamarin Forms and when not to use it

      5:12
    • 7. Understanding the Model View ViewModel (MVVM) Paradigm

      3:04
    • 8. Creating a Xamarin Forms Project "Hello World"

      7:32
    • 9. Setting up Xamarin iOS and Android simulators and running "Hello World"

      8:04
    • 10. Changing our home screen layout and elements

      6:37
    • 11. Introduction to Just Do It X 1

      0:45
    • 12. Carving out our app niche

      3:42
    • 13. Creating the XAML graphical elements of our app

      10:13
    • 14. Writing the core app code - Using user user preferences to store data

      9:44
    • 15. How to add Google Admob Ads to a Xamarin Forms App

      19:01
    • 16. Introduction to Just Do It X 10

      1:30
    • 17. Just Do It X 10 App design and first page XAML

      14:33
    • 18. What is an SQLite database and why use it?

      2:25
    • 19. Installing a Nuget component to handle database operations

      1:31
    • 20. Database access code - How to get a cross platform SQLite Database connection

      10:59
    • 21. Database access code - How to insert, delete and fetch items

      6:25
    • 22. How to Create a data model

      3:38
    • 23. How to insert database items into a list view

      9:16
    • 24. How to bind variables two ways in Xamarin Forms

      4:08
    • 25. How to open a new Page, View Controller or Activity in Xamarin Forms

      4:33
    • 26. Creating the XAML layout of the Edit Task Screen

      4:36
    • 27. Saving the Edited task to the database

      6:37
    • 28. A quick recap of everything you have learnt

      2:09

About This Class

Create fantastic apps on iOS and Android at the same time using Xamarin Forms 2.0!

Your apps will be created in a single project with shared code. That code is in C#, the easiest and most popular code around!

That means:

  • No Java to learn (Android).
  • No Swift to learn (iOS).

You will go from beginner to completely proficient in Xamarin Forms 2.0 (Released End of 2015).  

NO OTHER COURSE takes you so easily through the process and in so much detail so click ENROLL now!

b2111d30


This course is for you if you want to: 

  • Learn the Xamarin Forms 2.0 development process - from complete beginner to proficient app developer
  • Get paid $100 - $150 per hour to make apps for paying clients
  • Create your own wildly popular apps
  • See the whole development process as it really is.
  • Have a real app you can publish under your own account

What software do you need?

  • Xamarin studio (Free starter edition or Free business trial available). 
  • A PC or Mac

Do you need experience?

  • No. I assume you are a complete beginner to Xamarin development 

Transcripts

1. Introduction: hi there. And welcome to this course on creating maps with xamarin forms. Now, Sammer informs, is part of the xamarin platform and forms, takes it one step further and allows you to create APS on android windows and Mac and I us in C sharp with one single code base. And I'm going to show you just how to do that with the brand new xamarin forms. Two point. Oh, I'm recording this in 2016 when xamarin forms 2.0, has just come out. And if you're a beginner to Samrin, then this course is perfect for you. If you're a veteran off Samrin but you haven't yet used forms. Then again, this course is also perfect for you. In this course, we're going to learn how to make three APS. The 1st 1 is a simple hello world app. The 2nd 1 is the one you're looking at, which is a single to do list item app. And in there we're going to learn how to lay out things, how to create buttons, events around those buttons. And then, if you've noticed, we have this running on an iPhone and an android simulator and both of these APS have used 95% off the same code, so I've only had two code once for two completely different platforms. Then we're going to move on, and we're going to create a times 10. Just do it app. Where will create a bunch of tasks? And these tasks are stored in a list view that lightens up the further down the list you go so it places and natural importance on what's a top? And when we click one of the items, it opens up an edit screen and will also cover that in this course how to open new view controllers or activities from a list view. Then, inside these boxes, you can change the text on that text, binds toe a property in the code behind it automatically, and I'm going to show you that. And that is key for, Sammer informs. You have to know how that works to create APS, and when we hit safe that gets saved to a database an sq light one and again. Whatever app you're creating in whatever language you need to know sq light databases and I take you through it all. So join me in this course, I'm an exciting instructor. And whenever I'm teaching, I like to make sure that my students know everything that's going on, all of the background workings and why we do certain things because some instructors just say, Let's create a database. But why? Why would you want to create a database? And I take you through all of those things? So by the end of this course, you're going to have a good, solid grounding, not just Nzama informs, but also in C sharp programming. So join me today. 2. Xamarin Setup on a Mac: So let's get started with install Exam Oring on our Mac. Head over to Samarinda dot com on on that first page. If you scroll down, you should have a link to download Samarie. Go ahead, click that it will open up a new page, ask you for a few details. Fill these in and then download stammering for OS X. Go ahead and fire up your installer when it's downloaded and then double click the icon. And the Zaman installer is pretty good at holding your hand, walking through the entire process for installation. So first you have to agree to some bits and pieces, etcetera, etcetera. Andi. It detects your various android s decays and decays. Detective, we have X code on all the rest of it. It also installs hammering dot Mac. So you want to install all of these products? Click continue. It asks you where your sdk is or where would you like to install it? Puppet wherever it suggests, and then just simply click continue and everything will be installed. And whilst that in stores, I'm just going to come back to my Web browser and point out that you can start a 30 day trial for free off Samrin Business Edition. Now for these tutorials, it's probably a good idea to have this addition or at least the indie developer edition. So if you had over two developer dot zaman dot com or simply search on Google Xamarin trial , you'll come across this page and again. It's very good in walking through what you need to do in order to activate your trial. There's a bunch of stuff there and off you go. Okay. You can also have a look at the pricing on xamarin dot com. Andi It's gone down quite a bit lately because I think a software is more mature and they have more developers on board. There are more of a stable financial position. Okay, now that that's loaded, you can see you have three options. Indeed, business and enterprise. And, of course, indie is a lot cheaper some $300 a year compared to business, which is $1000 a year. And these are per platform. So you're paying I us that much per month and then add another 25 for android or Mac or other ones you want to add. Now, I would say the Indy addition is perfectly fine. If you're a soul developer because you probably won't use visual studio, the only time you'll need visual studio integration is, if simply you like using it. But the Xamarin studio is quite a good I D as it is, and you will need visual studio to integrate with Windows phone. So if you want to publish on Windows Phone using Zamarripa, you need to have at least the business license. Otherwise, both IOS and Android can be published using Indy. Now, if you're a small business, uh, it's worthwhile just rings Amarin and telling them that because they may give you special pricing. And also, if you're a student, you can get this for free. If you sign in tow. Microsoft Dreams Buck. So again, just search on Google for that and you'll find it. Once it's done installing, you simply have a link to launch Xamarin studio, and off we go. So I just closed that installer while salmon is loading and there we go. Zaman is now installed and ready to rock and roll. There are a few things on the right here where you can browse. They're very solutions for things on In the middle is a list of all of their blawg posts that they do and these air occasionally interesting. So when they announced a news Amarin, it's good to click it and see what's new. Now this course is taught on Xamarin four. So this top blogged post here is the one I'm teaching on, and this is their new release. It was released in, I believe December 2015 on. I'm recording this in 2016 and we are going to run on, Samarie informs two point. Oh, so you don't have to worry about compatibility for a good year or two yet I've seen a couple of other courses out there for xamarin forms that were written way back in 2014 and those air still stuck on one point. Oh, so I just be weary off some of the other courses and always look out for the newer, updated ones 3. Xamarin Setup on a PC (Visual Studio): So let's get started with install Exam Oring on our Mac. Head over to Samarinda dot com on on that first page. If you scroll down, you should have a link to download Samarie. Go ahead, click that it will open up a new page, ask you for a few details. Fill these in and then download stammering for OS X. Go ahead and fire up your installer when it's downloaded and then double click the icon. And the Zaman installer is pretty good at holding your hand, walking through the entire process for installation. So first you have to agree to some bits and pieces, etcetera, etcetera. Andi. It detects your various android s decays and decays. Detective, we have X code on all the rest of it. It also installs hammering dot Mac. So you want to install all of these products? Click continue. It asks you where your sdk is or where would you like to install it? Puppet wherever it suggests, and then just simply click continue and everything will be installed. And whilst that in stores, I'm just going to come back to my Web browser and point out that you can start a 30 day trial for free off Samrin Business Edition. Now for these tutorials, it's probably a good idea to have this addition or at least the indie developer edition. So if you had over two developer dot zaman dot com or simply search on Google Xamarin trial , you'll come across this page and again. It's very good in walking through what you need to do in order to activate your trial. There's a bunch of stuff there and off you go. Okay. You can also have a look at the pricing on xamarin dot com. Andi It's gone down quite a bit lately because I think a software is more mature and they have more developers on board. There are more of a stable financial position. Okay, now that that's loaded, you can see you have three options. Indeed, business and enterprise. And, of course, indie is a lot cheaper some $300 a year compared to business, which is $1000 a year. And these are per platform. So you're paying I us that much per month and then add another 25 for android or Mac or other ones you want to add. Now, I would say the Indy addition is perfectly fine. If you're a soul developer because you probably won't use visual studio, the only time you'll need visual studio integration is, if simply you like using it. But the Xamarin studio is quite a good I D as it is, and you will need visual studio to integrate with Windows phone. So if you want to publish on Windows Phone using Zamarripa, you need to have at least the business license. Otherwise, both IOS and Android can be published using Indy. Now, if you're a small business, uh, it's worthwhile just rings Amarin and telling them that because they may give you special pricing. And also, if you're a student, you can get this for free. If you sign in tow. Microsoft Dreams Buck. So again, just search on Google for that and you'll find it. Once it's done installing, you simply have a link to launch Xamarin studio, and off we go. So I just closed that installer while salmon is loading and there we go. Zaman is now installed and ready to rock and roll. There are a few things on the right here where you can browse. They're very solutions for things on In the middle is a list of all of their blawg posts that they do and these air occasionally interesting. So when they announced a news Amarin, it's good to click it and see what's new. Now this course is taught on Xamarin four. So this top blogged post here is the one I'm teaching on, and this is their new release. It was released in, I believe December 2015 on. I'm recording this in 2016 and we are going to run on, Samarie informs two point. Oh, so you don't have to worry about compatibility for a good year or two yet I've seen a couple of other courses out there for xamarin forms that were written way back in 2014 and those air still stuck on one point. Oh, so I just be weary off some of the other courses and always look out for the newer, updated ones 4. Linking Xamarin on a Mac to Xamarin on a PC (optional): Let's allow our Mac and Windows PC to talk to each other so the Windows PC can build. I'll saps for us now examine. This used to be done with the I. R spilled host, but it's no longer done like that. It's done in a much better way, and that is using Ssh. So the first thing we have to set up is our remote log in, and that is under sharing. And then we want to click remote log in to on. And for now, let's have allow access for all. Users were just going to test this out on having all users eliminates problems with when we limit users. So trial uses first and then try only administrator and go ahead and close that. And that's all you really needed need to do on your Mac to get access to it on our Windows device. To connect our Mac, we just have to hit tools, options and then way down at the bottom. We have Samrin and I are settings, and all we have to do is click find Zam bring back Agent and there it is. So select it and hit connect. It's going to ask you for the user name and password, so I'll just enter that Done it take first, and that should connect. Just going to allow that on the thing that I just allowed there too quickly for you to see was the mono dash s gin. And that was a firewall exception that you might need to add into your Mac. So if you just head on over to the firewall on the security and privacy in your Mac, it's just something to be aware off that you may actually toe add it to that list. If I go over to firewall options there, I have mono question. So if it doesn't work for you, simply allow this. I'm just going to close that. So, as you can see from my switching, I'm actually running this inside a windows virtual machine on my Mac. Inside parallels 10 and it all works fine, so you don't necessarily have to have a completely different machine. But it's nicer because you can run natively. That concludes everything you need to connect your PC to your Mac for IOS development 5. The difference between Xamarin Studio on Mac / PC and Visual Studio: let's discuss the difference between Xamarin studio and visual studio for APP development. If you run Xamarin studio on a Mac, then when you create a new cross platform solution, it's going to create I US and Android for you. It will not create a Windows phone project. If you run Xamarin studio on a PC, you'll get the same thing. It'll be I us on and Android. I'm not sure if it installs Windows Phone, but I don't think it does. Finally, if you're running xamarin inside Visual studio, which obviously is on a PC than it does all three for you, does I Us Android and Windows Phone. Now it doesn't matter where you start. Let's say you start on Mac, and you don't get your Windows phone project. You can always open the project in visual studio on a PC and add Windows phone at that point in time, and you can leverage all of the cross platform tools. It doesn't matter when it was created. Bear in mind if you're running on a Mac, obviously you can't compile for Windows phone, which is the main reason it doesn't create a Windows phone project. And if you're running on visual studio on a PC. Then you'll be able to compile for Android and Windows phone. But I us is going to need a connected Mac on the same network to have a build client, so you will need a Mac. Whether it's a virtual machine or an actual Mac, it's the same. If you're running Xamarin studio on a PC, you will need a Mac on your network to run your I US APs and to build them etcetera in terms off the I. D. E. Experience is the actual development. It depends on personal preference. You can either use Zaman studio or visual studio. Both are fairly good at what they do. Obviously, if you're a dot net junkie, you'll want to use visual studio because of the amazing features that are inside that I d. But on both platforms, you also get access to new get on, and you also get access to the Xamarin store that allows you to input components and things into your projects. 6. When to use Xamarin Forms and when not to use it: Let's talk about when to use a hammer and forms. Generally, we're going to use forms when we have a simple app that has the same graphical elements across all platforms or similar elements. An example of these elements would be a button on a list view or a switch, something like that. So you have to think about your app very carefully before you decide what kind of project are going to run. And if all of the elements in your app are common to all three platforms apple, android and windows, then you can go ahead and use forms. But bear in mind that the ability to refine those elements is limited. When you use hammering forms, it's got in much better, but it's still limited. Let's say you were just making, for example, a simple I don't know. Let's see. Ah, swap app. You just have really a list of stuff, and you wouldn't care so much about refining the look of it because it's the functionality that's important to users. So this way you'd be able to get three APS out in almost the same time. It takes you to do one app now, the other option when you open up, Samrin is to do the classic xamarin close cross platform app. Now this is when you have a complex app in terms of the G A y. The background data processing can be complex was simple. It doesn't matter. It has no bearing on whether use forms or the classic cross platform. So your complex app will leverage G Y elements that are specific to each platform. And I can't think of any examples off the top of my head, probably because Zambians done quite a good job of including them all. But there will be times when, for example, you want to access a certain element that's only available in I us. And in that case you would use the classic cross platform app. So that's on a very high level, sums up the differences between forms on the classic cross platform. Now, obviously, when you develop on forms, it's a lot faster, definitely. So you lose some power over individualization and when you develop on cross platform, you get that power back, but you need to spend more time on each platform. In both cases, we will have a data base layer and that's going to be independent were not a data base layer, rather a data layer. That's a better description. And that data layer is going to be independent off the GeoEye, whether on forms or cross platform. So this is going to be your shared code section. Then you're going to have a data access layer that connects the data layer to the G y of your app. Now, in some cases, this data access layer might rely on specific things native to a platform. It really, really depends. So before you decide on forms or Zaman cross platform, really speck out your rap and decide what you need. So if I just take a simple example of this swap app, my data access layer would simply access some sort of database online and give me a list of objects that all of my platforms can use. So that would be perfect for a forms app. If I was accessing a list of stuff that waas specific to an iPhone, then forms would become problematic, and that's when I go for cross platform. So just so you're aware of all of that, I hope it makes sense. And if you need to do some more reading on this. Simply look up the salmon website and they explain. Basically, what I've just said is that if you have a simple app, go with forms. The final thing before we end This lecture is if you are O c d. And you like things just the way you like them, then don't do a forms up because it's very difficult to get it like that. But if you're like me and you just want to get a test product out there, a minimum viable product, then grab forms, turn something up and put it out there to see if it catches on. 7. Understanding the Model View ViewModel (MVVM) Paradigm: Let's look at how APs are architected Nzama Rin Andi. Indeed, in the native language is that they employ using the model View view model or MVV M for short. The first thing we need to know is that M V V M is a derivative off the model view controller M V C. On NBC takes a model, so this is sort of the data layer off your app, and that model updates a view controller, and that controller informs the view that we, as the user actually see now the way it's turned out since NBC came onto the scene is that the view controller owns the model. So a lot of the core logic of the program is actually stored inside the view controller. And from a programming point of view, that isn't exactly ideal for code reuse. So just in terms of a real world, real world example, if you have a database or Web database on its communicating with your rap, which has a view controller on I us or an activity on Android and that is updating the screen off your phone, so let's look at that problem. And that problem is that most logic is stored inside the view, controller or activity. And if we want to reuse it inside a different view, we have to rewrite it. And, of course, that is never ideal. And so envy. VM was the solution for this in some aspects, and M V V M is exactly like model view controller M. V. C. Except we have a model. And then we insert an extra layer, which is a view model, and that communicates with the view controller or activity and then provides us with the view. Now this is perfect for cross platform development on what Samrin does is it takes a markup language called Zamel, and it's modifies it in some ways for itself. And if you are a Windows developer, know that Zamil Nzama Erin is not the same as in Windows. That's just one thing to be aware of. And then, with each Zamel file, you define the visual layout on your platform in a device or ah, operating system agnostic way. So you define one file for IR San Droid and Windows phone on. Then we have a code file that sits behind that Zamel file that provides the connection to it to your code base, so I haven't gone in depth here at all. I just want you to get the idea behind the concepts off xamarin dot forms and key is the Zamel and code behind the Zamel. 8. Creating a Xamarin Forms Project "Hello World": Let's take a look at how to create exam or informs project. Open up, stammering. I'm running this on a Mac, but it will be the same on a PC just minus the I R solution. Click New solution. Andi On the left hand side, you'll see we have a lot of options. Cross platform, I asked, etcetera. If I just clicked through a few of these, you can see we get the classic IOS apse of single view, a tab, app, that kind of thing. Same kind of thing for Android. And we can also create from Mac. For now, we're going to choose cross platform app. And now in here we have two options. We can use Samrin duck forms. Well, we can use a single view app. A single view app is actually just the cross platform native app, and it's the classic way that Zaman's done things. But this is the course on Sammer and forms, so let's go ahead and select the forms up and hit. Next, we have to give it a name, so let's call this app one, and we have to given organization identify, so I'll just put company in there and so are identifies on Android and IOS will be down here com dot company dot app one and this has to be unique in the app world and then down below that we want to target both platforms and then we have some options. When we create our solution, we're going to create a shared code project. Now, you can either start off with a portable class library or you can also use a shared library . There is no reason you can't have both in your project. The difference is ah, the portable class library relies on the lowest common denominator. So if you declare something inside a PCL, it has to be supported on all of the platforms that you're targeting a shed library. You can have conditional compilers in there. So when you come to compile for I us, you can have a separate block of code that you look at instead off. If you're compiling for android, we could look at a different block of code and those are just simple, if else statements pertaining to which platform you're compiling for for now, we're going to use a portable class library also because A PCL is transportable you can wrap it up into a DLL and you can give it over to other developers to use. You can't do the same with a shared library hit next. It'll ask you for a name, a solution, name where to put it, etcetera. You can use get for version control, but I'm just going to switch that off for now. You can also have insights and test cloud, but we're going to leave those for now. And when you hit, create Zaman will run through and create the necessary files for you. And in your solution, you're going to have three main directories, one with your solution name AP one and then a nap on Doc droid and a dot I us. And as you might imagine, the Doc droid pertains to Android and IOS pertains to I us. And if I expand thes three folders and we look at the top one without an extension on the end. This is the portable class library or the shared code project that is referenced by AP one Doc droid and ap one dot i us. So if you click under references, you can see it's reference there and the same one in upon toe I us It's referenced that if you right click references, you can also edit them. And if you like you can remove things or add things, it's up to you. So a few minutes ago, when I said you can actually have both a portable class library and a shared project, you would come over here to AP one you'd create one in here. I'm not going to do it now and then let me just close that and then inside your doc droid and I us, you would create a reference to them. Okay, So if we look at droid or I us and if you're not familiar with the APP world, they have different entry points into the APP on ap one dot droid. We have the main activity, don't CS. And if I look in here, I have this main activity will get into what these declarations are later on, and I have a method in here called on create, and this is the 1st 1 that's fired when you wrap fires up. But here we have some specific code for xamarin forms, and this is saying I want to load the application new app and it's much the same if we had over toe I us in I us. If we click up delegate, we have the same here. Finished launching in this method is where we start to call the main code of our app. And again we have our xamarin forms initialization on the loading off the application. If I click main dot CS in the IOS project, there's nothing in there, so we'll ignore that for now. Pretend I didn't do that. Okay, So app delegate and main activity both ask examining forms for something and that's something is stored up here in app one something to close. These were not confused on my way to double click app one dot CS. And here we go. We have this class app that is referenced here on here and inside this class app, we are creating what's called a main page. This is the root of our application, the very first page that gets called. And inside that page we have a new content page and inside that content page, we have a stack layout and they stack layout stacks things one on top of each other, horizontally or vertically you decide which one. It gives you some options to position it. So vertical options you have horizontal options to so I can have so equals layout options dot And I can have center here, or I can have it at the end or the start. There is no right and left on this, so just bear that in mind. So I'm just going to shove this in the horizontal center. Don't forget your comma. And then inside that stack layout, we have a bunch of Children. Now, these Children are the actual elements off your screen. So your buttons, your labels, your text fields, your entry text fields, list views and things like that in the next lecture were actually going to run this on some simulators for the iPhone and Android. And in that electoral, also going to cover the installation off those simulators 9. Setting up Xamarin iOS and Android simulators and running "Hello World": So now we have a basic xamarin forms app. Let's run it in a simulator or on a device. Now, if you want to run your IOS app, you have to come down here to the Associated Directory, right? Click it and make sure set a startup project is selected and then up on the top left, we have a play, a debug and an iPhone. You can either set it to debug or release. We're not going to worry about release for a long time, and then the next menu will give us a list of devices. If you can't see any of these devices, then you need to open up X code on your Mac. And when that fires up, head over to window devices and in here you have a list of your simulators. If you want to add one, click the plus in the bottom Add simulator, and you can choose your simulator and your IOS version or download more simulators. But I've already got mine. Something to close that. And if we come back to Samrin, you should then have a list of devices, and when I hit play, this is going to run it on my already open simulator and magically, we have that bit of text that is aligned to the center of our screen. Now it doesn't matter if you run this on an iPad or iPad pro. It will always be aligned to the center, so just hit. Stop! And there we go. It's always allowed to the center, because the content that stack layout is in the center off its container and its container is the content page, which is the entire screen of Europe. Okay, let's run this on Android. To do that click app one doc droid, right click and go to Set a startup project than that project will become bold, which means at the top we changed to an android debug menu. Now here we can manage our android devices. But before we do any of that, we want to come up to the top of hammering click tools open android sdk manager and in here we need to start installing various Happy's and Android versions cause obviously we can't have an emulator if we don't have a system image for Android. So I've already got 501 installed and I should have 403 installed a general rule of thumb as a developer. And I'm saying this at the start of 2016 is that your minimum target level should be android app E 15. If you go below that, then you might start running into problems with compatibility. And it's really going to compromise your APS chances of running well on future devices. So the way you set a minimum version is you go to up one doc droid, you double click it, go to Android application, and in here we have a minimum android version on mind set at 15. And I think salmon does this automatically. Then you set a target, so it's going to build for this target. So I have to make sure I have happy level 23 available. So if I scroll up 22 drink appear not to have 23. So I'm going to build this for 21 which was Android five or lollipop and click OK, This target android version means that it just builds for that, but it will run on android versions higher than that. So don't worry about that and click OK, Come back to your sdk manager scroll way down to the bottom and we have Teoh select our Android Support library are Android support repository Google Play Services. If you're going to be using ads and the store and things like that, let's see what else we have here. We can have our hacks. Um, installer, This speeds up your emulator experience. So let's select that and I'm just going to install those packages. Let me. It's which off happy 23. Really federal. Okay, still five packages. And once you've done that, come back. Let me just click that. Come back to this tutorial and will be ready to install our simulators. Now there are a few options for your android simulator. The 1st 1 is the standard option, which is the normal Google simulator, which is slow as heck. Don't download this because it is hellish to work with your option to our various third party services that work pretty well. Your third option is to use tamarins own android player because they identify that android was so sluggish they have to make their own. So such, for example, and android player, and eventually, when my Internet works, I think I can code faster than Maine's Net can download text finally loaded. So go ahead and click that link, and it will take you to xamarin dot com, Ford slash Android Dash player and then download that for your OS X or Windows or whatever it is. And when that's done, come back to this tutorial. So let's install that downloaded file hopes. Click that twice. Click, Continue Don t. Dutch Duh and install it. It's quite a small program, and once that's done installing close it and then fire up the Android player and then inside of here, we should have some stock images off the Google devices. The nexus is so I'm just going to create a nexus. Let's see, let's have a nappy 19 nexus four sums going to download that and install it. And once that's complete, simply hit new device and it should be created. Once it's created, head back to Samrin, quit it and restart it just to be sure that it picks up our simulators. So I'm just going to close this android player that we go and I'm going to fire up Xamarin studio again. And when I do and I opened my project, I should have access to that simulator that I just created so up in our debug menu. Let's hit our Nexus four and play, and it's going to build it and then start up our device and run it on there and there we have it. It's running on our nexus on just for giggles. I'm gonna open up on our I us. And there we have your very first xamarin forms cross platform solution loaded on an iPhone and an android device. Now it's worth saying that you can just plug in an android device to your Mac or PC and run directly on there. There were no special permissions required or certificates to download. Unlike with Apple. All right, in the subsequent lecture, we're going to modify this screen a little bit, and what we're going to do is start separating out some code to follow our MVV M pattern. 10. Changing our home screen layout and elements: So we have ours. Amarin forms solution. But everything inside our app. One section is all kind of jumbled together, especially in this app one dot CS. We've got some declarations of a main page of content page in here, and we want to start separating these things out. So in a previous lecture, I talked about Sammo, and that's exactly what we're gonna do here. So inside AP one, because it's the shed project and everything is going to use it. Go ahead, right click, click Add new file and we want the top file, which is the top section rather, which is forms, and we want a content page Zamel. There are 22 items here for content, page and content. View on Zamel allows us to use markup language, whereas the other one doesn't. It's purely coat. You can do it both ways. There is hardly any difference, but Sam will, in my opinion, is a better way to do it. And so we're going to call this class main page, and when you hit new, it'll add it to their and immediately you'll notice we have a main page dot samel on the main page dot samel dot CS. So one is the markup, and one is the actual code to sit behind that market. It's when the markup is where we're actually going to define our various elements. So inside our content page dot content tags, we're actually going to drop in our stack layout, and then we're going to give this some options. It's the 1st 1 is vertical placement, and we're going to give this center and expand, and then we have to give it a horizontal placement, and again I'm going to do center and expand. And then what else do we need to do? We need to have an orientation because it's a stack, so it's either vertical or horizontal, and we will have this as vertical. I dont know why thats not order completing and then because it's a stack of things, we need to have some kind of spacing between it. So let's say spacing is equal to 15 and there are no units on that on. I think that should just about do it for the stack layout. It auto inserts the closing tag for us, so just press enter and that drops it down some spaces and then inside of here. We want to start placing our elements. So let's have What should we have? Let's have two labels so we can see this in action. It's a label, and we have to give it some text is equal to label one so inspiring that isn't it. And let's throw in another label. And again, text is equal to label to and close out tags. And then I think that pretty much covers it to go ahead and save that Zamel file and switch to your main page dot Zamel dot CS Inside here you'll notice there's just one method to initialize your component, but this is where you would store most of your sort of access methods for getting data out of other classes so you would put it most here. And this is again sitting into the MVV n paradigm is that most of our code is stored here, so we don't need to rewrite it across Droid I Us and Windows phone. We're not going to do anything with it in this section, but in subsequent sections were going to use it quite a lot, so we've created a layout. We have some code behind it. Now we need to get this layout into our actual app. So this app one dot CS is where we have to find this content page and initiate it. So what, We're going to do it Simply remove all of this default stuff that Zaman has put in for us up to main page. And we say Main page is equal to a new and app one dot main page constructed to save that. And now that should run with our new main page. So go ahead and hit play. Usually when I'm creating Zaman forms APS I tend to develop for both platforms, obviously. But I test more on I us because it's a lot faster to use the i r simulator on a Mac anyway . So there we go. We have are two labels and I'm just going to stop that running and select my eye us as the startup project. It would be nice if Zaman let you have both starting up. Maybe in a future it oration, and I'm going to fire that one up and check that it runs. And there we go are the first thing you're going to notice is that iPhone has a white background and Android has a black background. Now these are defaulting toe whatever is set system wide in the respective operating systems, so be very careful when you're sort of specifying your text colors. Always select your background color. Two. Don't assume that you'll always have a light background or a dark background. So again, the rule, as with all software development, really is to test, test and test again, and then give it to someone that can't use software and get them to test it because they'll find the bugs for you. Okay, that pretty much covers how to separate all of the code into this MVV M paradigm and in subsequent lectures were going to get a little bit deeper with this and look at things like list views and abstracting away database classes and that kind of thing 11. Introduction to Just Do It X 1: This is just a really short introduction video on the second app that we're going to make which we're going to call APP to and inside this mini section, we're actually going to repeat what we did in the last section. But we're going to build on it. We're going to do some extra stuff, will probably come across one or two problems because of the cross platform nature of things and will solve those as we go. But before we start coding in the next lecture, I'm actually going to take you into the APP design and the marketing side of it. And believe it or not, it does actually start this early, and I'll explain why in the next lecture. 12. Carving out our app niche: Let's look at the app we're going to make. What we're going to make is a single to do list or not, unless rather, but a single to do item. So we're going to make an app that allows you to put only one item into the app, and that is the only thing you have to do that day. Now this is designed for people who hate to do lists, and there are a fair few out there. I started off hating to do lists, but if I only wrote one thing down, I found that every day I actually did do it. And now I've graduated on to bigger list APS and I can do 10 tasks a day. But for now, we're just going to make a single thing to do. App. What we have to think about before we start is the marketing off this now, as you can imagine, on Android and Apple, there are a 1,000,000,000 to do list APS or single to do APS or whatever it is, So getting noticed is going to be extremely tough, and we want to get noticed because we're gonna put advertising on our app perhaps, and we want to get paid from that on the way to get noticed in the APP world is actually to piggyback on a mean or something popular And what I'm going to pick you back on is this Shyla birth? Just do it video. And it is fantastic for your enjoyment. I'm just going to insert the full minutes off this video for you. Now do it. Just do it. Don't let your dreams be dreams. Yesterday you said tomorrow So just do it. Make your dreams come true. Just do it. Some people dreams success while you're gonna wake up and work hard at it. Nothing is impossible. You should get to the point where anyone else would quit. And you're not going to stop there. No. What are you waiting for? Do it. Just do it. Yes, you can just do it. If you're tired of starting over, stop giving up. I don't know about you, but I'm fired up now, so we're gonna base are wrap around that YouTube video. So let's hit new solution. Xamarin forms app and we want a portable class library and we need to give it a name. And I'm going to call this? Just do it x one and my company identifies Geek A micro so that should be unique on the APP stores. But it's worth checking if you're not sure. So I'm gonna hit next the project name. We will leave it at Just do it X one. Same with the solution and we'll just hit create and Samrin will do all the rest for us. And by now you should be familiar with what these various folders and references packages etcetera are in the next lecture. We're going to look at creating the graphical side off our app. 13. Creating the XAML graphical elements of our app: let's create the graphical elements of our out in our PCO folder, right click Add new file and we want forms content page Zamel and I'm just going to call this main page and hit new. And you should be familiar now with the Zamel on the code behind exam Oh, so inside our content page dot content we're going to create to the actual graphical parts of our app. Now the first thing we're gonna do is actually before content page dot content tags. We're going to put in some padding because we don't really want our app to go all the way to the edges of the screen except in special design cases and the way we do our padding is by typing content page dot padding and put the extra tag in there and then inside of here. We're going to actually specify this on a per platform basis. So we're now coming to the point where we can inside the Zamel, which is shared across all platforms. We can actually define the padding differently according to which platform we're running on . And so we need an X. We need a type arguments and we have to give this oops, a thickness like so and then we have to define it per platform. So we'll say. For I us, I would like you to have poundings of 2040 20 on 20 and then for Android. Let's have an even 20 all around on. The reason it's different from the IOS 40 value is because on I us we have a top bar that sits at the top of our screen, and then we're going to put in wind phone. We're not going to compile for wind phone, but I'm just going to put it in there for completeness. So that's 20 all around again. And then we can close off that tag that's going to give us some decent patting. Okay, now that we've done that, we need to create a stack layout inside the content area. So just type stack layout and then we need some vertical options. Where are we going to place it? Let's try first Phil and expand, and we need the same for horizontal options. And again, Phil and expand. I might actually change to the center in a bit, and we need an orientation for the stack layout, and that's vertical, and then we can have a spacing between our elements. So let's have I don't know 20. See what that comes up with? Close that off, Put the next Tagen and then I'm just going to invent things to make it more readable. Something like that. Then inside of this stack layout were actually going to place all of our elements. So as this is so simple, all we're going to do is have a label, a text entry box and a button. That's it for this app. So let's do the label and the text off our label is equal to Let's see, I will call it. Just do it. Hey, we go and will close off that. Then we need an entry box on. This is simply called entry. So this is a text edit box or I forget what it's called on all the platforms, but basically the box you can click in and enter text. We have to give this box a name so we can reference it later, and we will call it a task text. And then if we like, we can give it some default text. But we won't do that. What we're going to do is put a place holder in. So when this is empty, it shows us a sort of like grey or light white background text, telling us hinting what we should put in here. So in our place, Holder was right in tow. Task that doctor. And then we'll close that off. And finally we need a button. And this, of course, needs a name. And we will call this save button. Never mind my bad typing, and this needs a text to display on the button. We'll just call it save. And then there are various other things that we can do on here, so I'll just do them for completeness. So you know, you haven't is enabled, so you can gray out this button if you wish. And I'm just going to have is enabled. Set to true. So if you want to gray out a button because someone had entered some text, he would set it to false until they actually entered the text. And then finally, we have a clicked event, and this is going to fire off one of your methods in the code behind this. And we will call this on save clicked, and we haven't created that yet, but that doesn't matter and then close off your tags. So just always double check your tags lineup. We have our stack. We have our content page, we have the padding, etcetera. OK, let's say that, and I'm just going to run it and check that the graphics all line up well and hopes that seems to be an error. So I'll come back to Sam and stop that. And I know what it is in too much of a rush of forgotten to actually set the main page of the app to the one we've just created. So let's remove the default one inside. Just do it x one dot CS and we will just have a new Just do it X one dot main page and let's try that again shall way. Okay, welcome to our first era. It says there is no method on safe clicked, so even though we didn't actually try to call it, it's still through arson era. So I'm going to stop that, and I'm just going to put an empty method in to our code behind file. So inside our class here, let's go ahead and fire up our a sink before wade. What we call it on save clicked, I believe. And then we need an object. Send a and event dogs e and then create method. And of course, we don't need to do anything in here. If we like, we can write something to console, but we won't for now. So let's run that and check if that's done. The trick for us. And there we have it. We have our label. We have our task entry box, and we have a save button. It doesn't do anything right now. Okay, I'm just going to run this on the android player and actually see what it looks like. So I'll stop it on there, hit my droid, and let's do set a start up project and just run it on the one we currently have running, Which is that And there we have it. Okay, I think I would actually like to center all of these, but that's up to you. You don't actually have to do this. So, in my example, I'm just going to change this stack layout to center and expand. Then I'm just going to see what that looks like I'll just do it on the iPhone first of all , cause that's always much, much faster to actually compile. Okay, there we have it in the center. Now, it doesn't look great at the moment, but I'm going to leave it up to you to jump onto the Zaman website and look up the Zamel specifications and see how you can change the colors, the backgrounds, the width of things, etcetera, etcetera. Okay, in the next lesson, we're gonna throw some code into this project so our task gets saved whenever we click the save button. 14. Writing the core app code - Using user user preferences to store data: So before we begin actually coding, we need to think about something quite important. And that is, where on earth do we put or store our single task? So this thing we type in here, we obviously can't store it just in plain memory because every time we restart the APP, it'll disappear. So we have a few options. Either we can upload to the cloud somewhere, or we can store it in a database. But that seems like overkill for a simple bit of text. We could store it inside our portable class library, but that's fairly complicated to do. We're not going to do that. What we're going to do is leverage the settings on all of the systems that we have. So I arson, android and Windows phone, and typically you'd use these to store preferences, but you can store a string of text in there in the first step to doing this is to double click your packages inside each project and type Zamarripa in settings. And one of the guys that works examine has created this settings plug in that allows you to access the settings between applications to simply add the package there, added inside your droid project. I really wish this added it to all of them the same time. And of course, we wanted inside the IOS project. Okay, once we go, all those were actually ready to create some code. Open up your main page dot Zamel dot CS And inside are unsafe clicked function. We want to grab the text. So let's just say via text is equal to the task text. And if you recall, that is the name that we gave it in here past text and then we want to pull out the text property from that, then we want to check. There is actually some text in there. So go ahead and type. If not string dot is no or White space, then we're actually going to save it. And, of course, if it's empty another white space, you might want to have an else and then in here, some kind of message to use it about the empty box. That's just good user experience design. So if we have our text and it's all good inside here, we actually want to save text to the user preferences, and we're going to use that settings plug in that we just got I just realized I've made a slight error here and in this is string is not a white space. We actually have to feed it our strength. So let's just type text. Here we go. And that should work. I'll just make sure that builds and it does. We're fine. So we're ready to save that text now What I think in there, his name is James Monta. Magno has done with this package is he's created a helper class here. So if you go into helpers and settings inside your shared project, you'll notice that he's created this static class and inside here, it allows you to set and get a default sort of string. And you need to modify this if you have different kinds of strings, etcetera. But what we're going to do here is change this settings key. So we're just going to have this as task and then the default is just going to be an empty string so we don't get any nasty initialization errors, and then inside our code, we're actually going to use this general settings method that allows us to get and set our settings so I'll just leave that up there for a second in case yours looks slightly differently because these plug ins do update occasionally and you can get a good I feel for what this actually is. Okay, I'll just close that inside our main page dot samel dot CS Inside here, we need to save the text. And because we have that really handy plug in and the help of class, this is just one simple line and that is oh, name space. And then dot helpers dot settings dot general settings is equal to the text. That's all you need to save it. And then, of course, when our app fires up, we actually need to change the text inside the box. So I don't have it open there but the text inside the entry box. And of course, we'd like to grab this text and put it inside that box. And there are a few ways to do this. We can either have sort of a bunch of classes and methods that tell our you why that the value has changed and it fires often event that actually changes it inside the entry box. But that would be somewhat often overkill for this kind of project. So all we need to do is come up to this main page class and in here we need to write our task. Text dot text is equal to I would just do it dot help is dot settings dot general settings that will go over to the settings file and grab the text for us. So let's run that on our iPhone. And thanks to that nice plug in those two lines should actually take care off all of the bits and pieces that we need. So we have no texting here. I'm going to put make website and hit. Save. It would be nice if we had some sort of notification on Save that actually said it was saved. But I'll leave that up to you to sort of implement. Then what? I'm going to hit his command shift home twice. That's the shortcut for the APP switcher. It's Delete that, and then I'm going to open it again, and it should pull out that preference. And there we have our make website, so in a few short minutes you've actually coded the base layer overall ramp. Using that handy, handy plug in. Let's add one little nicety. And that's a couple of messages that lets a user know they've click things or haven't ended enough text. So that's creating new method. And let's call void a show alert. And then in here we're gonna pass over string, which will be Tyto String Message. Andi, I think we'll leave it at that and close it off. Okay, And then up here in our if else statements were just going to fire up that show alert. And so once we saved it, we actually want to tell I'll use of that. Maybe we'll say success as the title and task saved the doctor Doctor. Now do it and close that off. And then if we have no text inside the box, we want to again tell our users Show alert, the classic era box. No task to save. Don't talked up and close that off. And then down here inside our show alert, we actually need the method to display our alert, which is simply display alert. And he asks for a title which we're going to give it a message, and then it needs a bit of text for the council button. So this is usually okay, right? Let's hit, save and go ahead and run That And that just adds a nice bit of user experience to our up. So the use them knows what's actually happening with it. That's when I hit. Save task saved. Now do it. If I have no text in the box and hit save era, no tossed to save. Okay, that concludes the construction off this part of the app. In the next lecture, we're going to look at inserting a small Google ad at the bottom off this screen so we can get paid from it. 15. How to add Google Admob Ads to a Xamarin Forms App: Let's put some ads into our app. Go to our droid project DoubleClick components, and it takes us to examine component store hits. Get more components on when it loads. Eventually type Google play. Alrighty. Let's put some Google ads insider wraps because we want to get paid. And I've pulled up the final result for rap right here so you can see what these ads are going to look like. So let's head over to Xamarin Studio and implement this for ourselves. The first thing we have to install is the relevant files or s decays to actually implement these ads, and they're different for droid and I us. So first, come to Iose Project. Double click components and hit. Get more components. I appear to have no Internet connection. Nice try that. There we go and then we're going to search for Google Mobile ads and it should feel to them down. According to the project you have selected currently and that top one is the one we want and click add to app and it will add all of the references for you and we're going to ignore those instructions because they're not relevant to us as we use examine forms. The next thing we have to add is something to our droid project. If you go to the component store, yes, there are components to do ads. But if you ask me, they are extremely buggy. So it's much better to go. Director source. And I think someone has put some nice bindings on new get so DoubleClick packages. And inside here we are going to look for Google mobile ads or Google play ads. I believe it's called. Actually, there we go. Google play services dash ads and then hit Add package. Andi, if you open up your packages folder, it should have added a bunch of other things like basement and app indexing, etcetera. Okay, so now we have the components. How do we exactly call these ads on their respective systems? Well, we have to come back to our Shared PCL project Open up main page dot Zamel and then inside here in the content page declaration, we need to add another XML name space. So we type XML s controls is equal to C. L R. Dash name space colon. And then we have to put the name space of our project which is just do it x one semi colon . And then the name of the assembly is equal to just do it x one and close the quotes. Okay, now that we have that, we can actually put in the control that allows us to have the ad John coming down here to my stack layout. And underneath the button is where I'm actually going to put this something to say. Controls semi colon, add mob view in camel case, and then we have to give it a width. Request on this for a add mob ad is 320 and then we have to give it a height request. And on Mobil's, this is 50 for ad Mob. It can be 90 if you're on a tablet, but we're not going to tackle that right now. And then close that tag, right? That's all we need inside our main page, Dr Zamel. So let's say that inside our main page dot Zamel dot CS, we just need to have one class declaration so you could do this in a separate file. But I'm just doing in here to keep this all compact and together, So we're gonna take public class, add mob view, and that corresponds to hear this admiral view. So Admiral View and this is going to inherent inherit from the content of you open our curly braces and let's put a constructor in. It's actually going to do nothing and close it off. So there we go. That is all closed. So now we have that. The idea of what we're doing here, exam or informs is we're creating a custom render. So the Zamel section or the PCL section, is going to go to Droid and two I us individually and say, Hey, I need to get this component from you. Can you provide it? And then the individual projects Android and I us go ahead and provide it. So Nzama informs, that's actually a way of getting around the fact that some controls are native to only one platform. You can use a custom renderers to specify which control to provide. Okay, so let's do it for I ask first if we right click I us on and go to add new file. We want an empty class and we'll call this something obvious. Like add mob, render a and there it is. Let's insert some using statements at the top here because there's a lot of stuff to actually go through. So we want to examine dot forms and then he using samarie in dot forms dot platform dot i us and then we have to have the shared project. So using what's our name? Space? I just forgot. Here we go. Just do it x one and then using not that one. We need to reference our google dot mobile ads and then because this is I us, we need to have a using for the u I kit, which takes care of our views. Okay, Now we need a reference back to the portable class library. So we're going to type assembly export renderers, and this is going to have a type off add mob view on the second argument is the target, which is a type off at mob renderers and close off our square brackets. Okay, don't worry about that red bit for now, because if you right click and go to resolve, you can add the using name space for it. Okay? Now we need to create the actual code that goes ahead and gets our admirable. So this app more Brenda needs to inherit from a special xamarin forms component, which is the view render and then inside of the class, we need a constant string and this is going to be the ad mob I D. And I'm not going to cover that in this lecture. If you want to get a nabob, I d simply go to Google ad mob on they hand, hold you through the whole process and they'll walk you through it. And at the end, you'll come out with an I. D. Let me just go find mine and copy it here and here it is. Then we need what's called a banner view and we will call this ad view that's gonna act that's gonna actually hold. I'll Google ad. And then we need a Boolean to keep track off the view on screen to see if our ad has been loaded onto the screen or not. Then we need to override something, so we're gonna go protected override, and the one we want to override is on element changed. It's the one. So we leave our base in there so that runs and then underneath we need to check if e dot new element is no. So if it doesn't exist yet, then return and then we need And if e dot oled element is no, then we're going to create our band of you. So let's in, Stan, she ate it. We say add view is equal to a new and we want a ban of you and then ban of you want some arguments? So we want a size first. This is pretty easy to do. We just go add size Cons don't and we will have a smart banner in portrait and then close that off and then this needs some arguments. So the 1st 1 it needs is the ad unit I D. Which we have creased up here with our add more of i d. Then it needs a root view controller. So this is the view controller that controls the the stack of views that you're seeing as the IOS user and that comes from you. I application dot shared application. We want to select the windows with an index of not and then we want the route view controller off that and they were just gonna close that off and that gives us our ad view. Then we need a an event. So we're going to say when the ad view is received, add received plus equals, and we just get some center and dogs in there. So once you've received it, if the view on the screen is false, so let's put an exclamation parts mark in front of it, then I would like you to add this sub view. Let me just say this dot add some view and then we're going to say, Take our ad view and put it in there, Okay? And then because we've received an ad, we want to set our view on screen as true. So it's already run. And then once we've done that, we actually to fire off the ad request. So we do that by saying request request is equal to request dot and then you want to get the default request like that, and then we actually have to load it. So add view dot load request and pass it our actual request we just created. And then we need to give it one more base method dot set native control. That view, right? That's quite a lot of typing, but that should pretty much cover I us. So I'm gonna hit play, and I'm gonna check that That actually works inside our simulator. There we go. We have a slight issue, so I'm just going to change this sender. Dogs. There we go. That matches it now, So that should compile. If we had over here, it's going to remove it from our view. Upload the new one. And if we have any luck, which we appear not to at the moment There we go. It's popped up with yet. That's great. Let's get on and do much the same for the android version. So head over to the android project, set it as start up and then we're going to add a new file. And again, we're going to call this ad mob renderers, and then we need to have our assembly reference. So assembly export renderers, and we need a type off ad if you come on, type off is very similar to IOS version at Mob Renderers, and then we just close those off and then I'm just going to right click, resolve and fix all of these things. Here we go. And now Admiral Brenda Breath, of course, needs to inherit from the view rendering. And this has a type auf ad mob view. Come on, and then he want android dot gms dot ads dot And if you like. So Cam's going to right click Few render and resolve that statement. Okay, now we're ready to actually fire up inside our class. So of course we want to override again. So let's override our on element changed. Let's leave our base class in there and we say, If the control is no, then we want to do something So we create our at far ad equals a new and we want ad view forms dot context and it's just right click this ad view resolve using that, and then we have to give it a size. So add dot add size is equal to add size dot and we just give this a plane banner and then we need our ads dot ad unit I D is equal to, and I'll just paste mine in. There we go. Then we have to make our requests of our request. Builder is equal to a new ad request Dark builder, and then we have to load our ads. So add dot load ad and re pass it our request builder dot build. And then we set our native controls, as we did before in I us for the ad, and that should pretty much cover it. So I'm gonna hit play, and when that builds will come to the simulator and we're just waiting for the ad to load hopefully in load. I don't wanna be the guy that does this tutorial and then doesn't actually work. Here we go. So we have our ad that is being passed through now, one final thing I would say to you is inside of your ad received methods. You can also actually have an ad view dot at or receive failed methods. And inside there you can send yourself a message to the console just to say you have not received an ad, but it is working. That's important to know. Okay, that concludes this small section on creating a just do it times one app. I hope you've enjoyed it, and you've got some value out of it. And let's move on to something a little bit more complicated. 16. Introduction to Just Do It X 10: Let's plough on with the next section. In the last section, we created a cross platform app that allowed us to have a single to do list item in this section. We're going to extend that concept so instead of just do it times one, we're going to have just do it times 10. And that means we need to create a list view or a table view on our platforms. Along with that, I'm also going to dive a bit deeper into the Zamel markup language, and we're also going to learn how to bind things together and allow them to change whenever a variable changes in our code. So let's get started. Create a new solution in xamarin studio, and you should be used to this by now. We want to examine dot forms app, click. Next, we're going to give this a distinctive name. So only to say, Just do it x 10 one going to actually put that without a Number X 10 and we're going to use a portable class library. It next project name, solution, name or good and let's hit create once that's all created in the next lecture. We're actually going to look at designing our app and actually marketing it, because, yes, it really does start that early 17. Just Do It X 10 App design and first page XAML: Now that we have a basic project set up, let's look at the design of it. So, as you're now familiar with, if we open our Shed PCL and we go to It's Root directory, right click and let's click add, we want a new file, and then we want a forms file and a content page dot Zamel and let's call this main page and hit new and as usual, that creates example, markup file and a code behind file. So in the Zamel market file, we have a few things that we have to do. I'm just going to put these on the next lines. You can see them easier in the video, and the first thing we have to do on our main page is we have to give it a title, of course, so title is equal to just do it x 10 and we come down to our content. Andi, as we need 10 items in this to do app, we need to create a list view or a table view, as it's called in I us. So let's go ahead and do that type open bracket list view, and then we need a name for it, and we will just call this list view quite simply. And then what we need is an item selected event, and this is going to fire off an event that's contained in the code behind this. Whenever an item on the list view is actually clicked, so we will call this on item selected, and then this is optional. But we can give it a row height, and because we only have 10 lines, we don't want to squeeze them in. So it only fills half the screen so we can be generous with our row height on, let's say, 120 for that and then close our bracket and close the tag and then create some space inside there. That's the basic list view loaded. Now we need a template for it. So we type list view dot item templates or template. Sorry. Close your brackets and close off the tags on. I'm just going to invent this so it's easier to read. Then we need a data template to go with this list. That's the top there. Close off the tags as usual, and then each list has a bunch of cells or rose that we see whenever we're scrolling. So this is called examine forms a view cell like that. Let me just in dent those as well and save it. Now, inside the view cell, we need whatever elements we need. So we need some text boxes we need maybe a background image. And this is where we put it all. And there are a few ways of during the layouts inside. These view sells, the first of which is an absolute layout, and the second is a relative layout. We're going to use both here so you can learn them. So type open brackets absolutely out. And then we have to give this a property off is clipped, abounds equal to truth. And that means if we have an image that's too big for the sale, if it goes outside of the cell, if we don't have this set to true, then it will show below the cell, and we don't want that to happen. We wanted to clip to the size off the cell or the road. Then we need to have some bounds for this absolute layout, and we do that by saying absolute layout. I can't spell today dot layout. Bounds is equal to one comma, one comma, one comma one, and that just means that it fills up its entire container. So the 1st 2 values are the position. If I gave a position off 20.5, it would go to halfway across the screen, but we want this to maximize everything. Then we need some layout flags. And don't worry about these for now, Dr Flags. Oh, sorry dot may out flags is equal to. I'll go into that a bit later on. And then, of course, we want to close our absolute layout tag and drop that down a few levels. Okay, now we have a layout ready to go. Let's put in some actual elements, and the 1st 1 we need is a nice background image. So let's have image and examine forms. It's really simple to put this in. We say source is equal to, and then I just go going to call this BG dot jpeg on what salmon forms does is it goes over to the droid project and looks inside. Resource is and trouble, and it goes over to the IOS project and looks inside. Resource is so we want to drop this image into those two folders, and we'll do that in a minute when I finished typing him. So for this image, we need an aspect ratio, and we want this to fill. I would contain it, and then we want to have a opacity. And this just means how see through is it? And what we're going to do here is we're going to introduce you to the binding concept. So if you open curly braces and type binding with a Capital B and then I'm going to say Alfa close curly braces, this binding is a key word that salmon forms looks at and says, Okay, I'm going to take the next word, which is Alfa as the property that I'm going to assign to this a pass ity. So this is going to start introducing us to variables that are in the code behind the Zamel . And once you've done that, let's ford slash and close it off. Let's add that image toe are folders, so come over to your android project dot draw bull right click. Add add files. See if I can remember where I've put this. I think it's in my iCloud Samir informs Course. There we go. BG dodge a pig and copy it in and then do the same with Resource is at files BG Dodge a pig . Of course, I will include this in the resource is section off this lecture, sir. Over on the right hand side. If you're watching on you. To me, click on the resource is Tab. You can also have thes images stored in your PCL, but it's a little more complicated, and I'd advise just to store them in the droid and IOS projects. Okay, let's move on with the rest of our layout. So the next thing we have to create is some text because it's do list is rubbish without text. And to do that, we're going to have a stack layout, which is a relatively out. We're gonna put some padding into it. Equals and this goes from the left hand side, top right bottom. So we can say 10 common 10 common zero comma Zahra. And then we need some horizontal options for this, and that's just where we're going to place it. And we want to place it at the beginning, which is start and expand, and we need an orientation so it knows how to stack things. And this is just going to be vertical plays off the brackets and then dropped that tag down . Now we're ready to put our basic elements in, and that is a label with some text equals two. And then again in here, we are going to bind something. So to do that we say Binding title, it's going to go look for the title variable and we want to align this in the UAE. So we're just going to put this in the center so it takes whatever text is there and puts it in the center off the box. And then we need forgotten equals and we go and then we need some horizontal options and we want to put this at the start off the container. Let's give it some nice things. Let's have a font size equal to medium, and we need a text color equal to white because the background is actually a dark green, so that fits nicely and close it off. We need one last label, which is the actual content of our to do item so we can say label text is equal to another binding content. And let's have some Y alignments on this, which is center as well. Let's have a font size and because this is going to be more text than the above one, we're going to make the smaller. And of course, we want our color again to be white. So it's readable and then close that off right? That completes the layout off our app. Let's assign it to the bane AP Page. So let's open. Just do it x 10 dot CS and inside here remove all of this boilerplate code said the main page on this and then we need a new main page on. Before, we would have just said, I would like you to say new main page. But this time we don't have some navigation in this app, and that means we first have to set this page as a navigation page, so that's very important. Otherwise your navigations won't work in the future, then open our brackets and asks us for a page route. So this is going to be a new main page and then put those in. Do we need one more bracket? Yes, we do. And then we can give it some properties. So inside curly braces weaken right. Some things in here. The 1st 1 is we want to have the text color off the top bar. So we say bar text color is equal to or rather is equal to color dart white. And then we need the bar background color, and we're going to set this to roughly the same color green as we have in our background images. And to do that, we say color dot from hex. And this allows us to put in a heck string, which, if you've done any Web programming, you'll know what this is. And we want a value of 63 a d 72 for this. Okay, now let's fire it up and see what that looks like on our simulator. If it looks good, we can carry on and it doesn't. It says there's no method off on items selected, so it's complaining that we haven't actually installed that method. And if you recall, it was way up here on item selected, so let's just do that now. Singers were here. Let's go to main page dot Zamel and then inside here we're going to put our method in and we will start with a public and we'll need to make this a sink. But we'll look at that later. Avoid on item selected, and then we need an object to go with that ascend up and then we need selected item changed event are eggs. That's a mouthful E. And that's the blueprint for this. So now when I hit play, it shouldn't complain that we don't have this method and there we have it on if you'll notice we don't actually have any images in here, even though we specified it, and that's because we haven't assigned any sales yet or any data to it. So that's fine. But you'll notice. At the top bar we have this green background and the white text, which is perfect. It's just what we need 18. What is an SQLite database and why use it?: before we continue with the coding of our app, we need to discuss what a databases and why we'd actually want to use one android and I us both come with a native sq light database support. And in almost every app, without exception that you're going to make, you're going to have to store data. And in most cases, that data is not just off one type. There are lots of types of data, so you may have these rectangular bricks of data. You may have circular ones and you may have various other kinds. Now would be very difficult to store these in, say, a text file, for example, because you'd have to convert everything two strings and then store it away. Is that And when you got it back out, you'd have to convert back to numbers, etcetera. So the solution to this is a database. And if you think off the big blue base as the database, what it can do, is it construe or all those bits of data for you in these sort of native strings images, that kind of thing and databases also give you a lot of power over how you access these things so you can ask a database. Give me this list of stuff with all of these different variables, and I want you to order it in a certain way. So, for example, order it in a way that ah puts it. By date it was entered or by size of string or by name. There's lots and lots of ways of chopping the data so escalate databases are absolutely essential for APS. And if you think off escalate databases as the vital data connection between itself and the actual app on the phone, you'll be set. And once you've written a decent escalate database class on various methods, you can then simply just copy and paste that in future projects check. It works. But once you've got your decent class going, you'll never really have to rewrite it. 19. Installing a Nuget component to handle database operations: Let's use a component toe access. The database is on our devices. We could write the code from the ground up, but there's no reason to because there are so many components out there that we can leverage to short cut our development time. Now, the component we're going to use is stored on new get. So if you double click packages in your shared project or your PCL and then in the search box search for sq lights Net PCL, this should come up with the one that we're after. And if we look down here, this is the one we want. We want the i d to be Escalate Dash Net Dash PCL, and it specifically mentions Zamarripa in the top there. So let's add that package to the shared project. And we want to add the same package to the droid project, so it should be at the top of your list. Now click add package and we want to do it in I us. And there we go. And so just give it half a minute to actually install those. And in the next lecture, well, actually look at implementing this package and using it to access databases 20. Database access code - How to get a cross platform SQLite Database connection: The very first thing we have to do to access our data bases in a cross platform manner is to declare an interface. So that's right. Click the Shed PCL. Click. Add new file. We want a general empty class and let's call this. I s Q L light and hit Enter and then we want to change this class to an interface. So an interface. I ask you a light and then inside here, let's get rid off this constructor and we want First of all, come up to the top and let's insert a using sq light because we need that. Then, down here, start typing sq light connection, get connection. And the reason we need this interface is because databases are stored in different locations on Android and I us. So this interface allows us to talk to the individual IOS android projects and actually get a connection to the database. Once we have that connection, then actually putting things into the database can be done in a shared project sort of way because the code would be the same. Let's save that, So to go along with that, let's first insert the database connection inside our Android project. So come down to Android, right? Click it click add new file and again we want an empty class and let's call this sq light and then underscore android and hit Enter and it's created for us. Now we're going to leave this as a class, but at the top we need to add some musings. So first we need to add system dot io because we're going to be accessing a file. So we need to access input output. And then, of course, we have a using Samura hopes xamarin dot forms, and that's what we need. Now what we need up here is some kind of declaration that tells us this is a dependency off something else that exists in our PCL. And the way we do that is by typing assembly inside square brackets. This is semi Karlan dependency that should be a capital D dependency. And this dependency has a type off and then in brackets Ah, we want just do it X 10 darts droid dot sq light underscore android and then close off all your brackets and make sure they're correct. Okay, So once you've done that, let's come down into our class and under sq light android, We're actually define a region. So but a hash tag in and region I ask you light and we want to say this is an implementation and then in here we're actually going to write the code that allows us to get this connection. So, Sq light connection hopes, sq light connection. And this is going to be the get connection that our I ask you light actually referenced in the shared project. So it's gonna come over to Android, find this, and it's going to go down here and actually get the connection for us. So in here we need a VAR file. Name on this is going to be data base dot db three as the extension and then we need a VAR documents path. And this is the internal documents path for our app on the way we get. That is by environment dot get folder path and we want environment dot special folder dot personal. So we've got many, many options here, but we want to keep this secret from other APS. So special folder doc, personal clothes, a few brackets, then we need to create the path off the documents path in the file name together. So we save our path is equal to path dot combined, and then we have to pass it to paths. So, of course, the documents path and the file name on what that's going to do is actually blend those together and give us a path to the database. And then we have to open up a connection. So far, connection is equal to a new sq light hopes. Ask you light dot sq light connection and this asks us for a path which we just created and store timers ticks. Let's have that as true and close it off. And then finally, we have to give this connection back. So we want to return the connection because up here in our public declaration, we said We're going to pass back something off this type and escalate connection and then underneath here, we're going to close off this region so we say and region, and that sums up the entirety off the android portion off accessing the sq light database. Let's do the same on I us to come down to Iose Project right click. Add a new file and we want sq light underscore I us and take note of the capitalizations there. Hit, Enter and you'll be very glad to know this is extremely similar to the android version. So we need some using our system dot io and using Samrin dot forms. And then we need our assembly decoration. So assembly And this is a dependency which, of course, has a type off open the brackets Just do it x 10 dot and we want I asked, it's gonna come and look at this name space dot sq light underscore, I asked, Close off your brackets and that does that. And then down here we want this class toe actually inherit from I sq light Let me just check. We've done that in Android are we haven't knew I'd forgotten something. I ask you light, it would go. So here we are in the eye us one in the iris one B again want to go past this constructor and create a region and create some s some access code. So what we can do actually is Just copy the android code straight over to here so I can drop it in pressed copy on an empty space that's copied nothing. Command. See, Drop that in. There we go. So again, we have our get connection. We have a file name, and that's going to be the same as before. And here again, this is the same because it goes and finds the personal folder for this app on I us. And then this is going to be slightly different. In fact, before here, we need to have a library path. So under documents path, let's have our library path is equal to path dot combined, and we need to open up the documents path and we actually need to add two dots on this is related to the file system that's in operation on I us. Don't worry about it now, but just know we need it for this. And then we want to open up a library folder and close that off and then in the next line under path instead of documents path, we actually want library path. And then everything is the same as before. We create a connection and we return that connection. I'm just going to scroll up and I havent issue here. It says we have a problem. Let's just see what it is sq light. Ah, that's because here I need to capitalize This l have made a slight error. You gotta watch out for this. When your programming is this capitalization really matters. Okay. Now, just to recap inside our shared project way at the top here, we created on sq light. And this says this is an interface. I want you to go off into the android and IOS projects and windows phone if you have it. And I want you to get connection so wonders over here finds this dependency and grabs the connection for us both for Android and I us. 21. Database access code - How to insert, delete and fetch items: In the last lecture, we created a connection to our database or an interface. So we had this in our shared project and we looked it android and IOS and got the database connection. So I was going to close these up on what we have. Two Great. Now it's, um, code to actually access our database to insert things, delete things and get a list of things we generally have inside there. So under just do it x 10 let's right click and add a new file. We want an empty class and let's call this database Now. This class is going to hold all of the code to access the database. So to do that, we need some using statements. Of course, we'll be using sq light. We'll be using ZAM Marine forms will actually be using system dot collections dot generic because we're going to need lists and using system dot link to do some fancy conversions and various other things with link, because it's really useful. Okay, down here inside our class, the first thing we need is a class level variable, and this is going to be private. It's nothing else can access it. Sq light connection and then type underscore connection. The underscore has no relevance is just part of the variable name inside database, which is our initial Isar. We have to create that connection so underscore connection is equal to dependency service dot get and then we want a type of i sq light dot get connection. So that code we wrote in the last lecture is now coming into play here to allow us to fetch this connection. If we try to access a database on a table in that database and it doesn't exist, we're going to have a problem. The way around that with SQL SQL databases is to actually create the table each time you access it. It will only create the table if it doesn't exist. So if you hit, create table and you already have data in there, nothing will be done. Nothing will be changed and we want to create a table, and this table is going to be our to do list item, and this is turning up red because we haven't actually created it yet, But we're going to get them. Then we need a method toe, actually get the to do items So let's say public and we want a list return from this and again. We want that to do list item and we want to call this get to do items and create Oh, method. And then this is simply one line of code and we're going to return from T in underscore connection dot table And we want to check this table, something to copy this word that and we want to select those items and we want to cast them to a list to list. So what this does it gets all of our to do items from this connection on this table? Then, of course, we need to actually add a to do item. So let's have public void because we're going to return nothing from this at to do item. And this will be a type off to do a list item item, and this code is simple enough. We say connection dot inset and we pass it the item and then just for convenience. If we have a whole bunch of things that we want to add, we can create another method which will be public, avoid add to do by Thames with an S and this We're going to pass a list off our to do list item, and we will call this list items open our braces, closed them, and then in here we're going to use a C sharp feature, which is four each. So go through each item in this list of items, so we will say open brackets and far item in items and then underscore connection dot inset item and close it off. So just to reiterate this four each is going to go through each and every one of these, and every time it gets one, it's going to insert it into the database. That should be all we need for now. The next thing we have to do is actually create this data model that I've referred to here to do a list item, and that's what we'll do in the next lecture. 22. How to Create a data model: In the last lecture, we created our database code and we made a reference to these to do list item objects. Now, these are known as a data model. They are simply a container toe. Hold a bunch of data to do without to do list. So what we have to do is create a class for that right click our shared project. Add new file. We want an empty class and we will call this to do list item and hit new Remove the constructor inside the class. So we're just left with the class. Now, this is going to make use off the sq light part off our project, the database part. So we have to have a using sq light statement. Then inside the class, the very first thing we have to have is a public interject i d. And we're going to have a get and a set that allows us to access it. The reason we haven't I d is because sq light databases rely on unique identifies and they are usually called an I D. And they are usually an interview. And above this line, we have to add some more properties to this interview, the first of which is called Primary Key. So if you tell your database, go and look up This I d. It knows to look up this actual parameter, we need one more and that is called Auto increment and auto increments has a look at your current database and all of the I ds Andi It finds the highest one in terms of ah, a number. And if your highest one is, say 10 it will then give the next one a value off 11. So you never have to worry about actually assigning this. I d. These items up here will automatically assign the next one up for you. So now we need some variables to actually hold out do list items, and the 1st 1 we need is a public string, and this is going to be our title. And we need a get and sent so we can access it and then we need another public string and this will be the content of our to do list items. So the notes if you like and we need to get and set that finally we need another string and this is called Alfa and this is going to do something quite clever. It's going to set the capacity or the see through nous off each cell in our table, and I'll cover that a little bit later on as we get into the fine tuning off our app. But for now, just know that's what it's going to do, and we have to have a get and set for it and save that is that completes the data model. And if you close that now, all of these turned to Blue and we no longer have any Reds in the next lecture because we've now created everything were actually going to insert some default values into our database, and then we're going to show those default values inside our list view. 23. How to insert database items into a list view: we have a database, we have a model for our to do list item, and now we need to connect those to the actual list view in our up. To do that, let's open up our main page dot Zamel dot CS and then inside here under the constructor before initialized or rather, after initialized components. First, we have to check. There's actually something in our database. Otherwise we'll get a horrible error if there isn't so, let's just say check database populated like that. And then if we've checked that it's populated, then we can actually assign some things to our list view. So type, list view. And now this variable name is being pulled from main page dot Zamel here. So list view don't. And we need an item's source because every list needs a source of data like a well of data toe actually put inside its cells. And to do this, we're going to have another method that we haven't created yet, which is get to do list, right? So we have to read methods. Let's create them. The very 1st 1 we want to create is check. The database is populated, so let's have void and let's copy that down to here and create our method, and then it tends to a normal color. So what we're going to do in here is check if the database is empty. If it is, we're going to put in some default values so we don't get any errors. The first thing we do is say if and then we want to grab a connection to our database so new database don't get to do items, and this gets a list of items in the database, and then we have to count those said dot count. And if that is less than one, that means we have no items. I would like you to perform the following code and some skates, but comment here, which is filled up database with default. So the first thing we have to do is create a list off the things that we're going to create so far, items is equal to a new list, and this list needs a type which is to do list, item and initialize it. Now we need to add some things to that list. So four int I is equal to Not until I is less than 10 I plus plus on what that's going to do is actually take me in a four loop, and it's going to count I one by one every time it goes around until it reaches. I is nine or less than 10. And that means because we started zero. I is actually going to go around 10 times. This loop is going to run 10 times. And because our APP has 10 to do list items, that's perfect. So each time it runs through, we want to add something to our items. So we say items dot and open our brackets and then on a new line. Just so it's clear, we say we want you to create a new to do list item open brackets open brace. And I would like you to give this a title off task space quote and then plus and then in brackets, we're going to say I plus one. And why do we do that? Because I want this to say task one every time it goes round, then tasked to then task three. But I actually starts on zero and ends on nine. So if I left it without the plus one it would say I zero I one I two upto I nine or task nine rather. But if I had the one, then it's correct. And then, of course I have to change that because it's currently a number to a string and then comma . Then I have to give it some content and that's equal to description on Let's have Dash Temp to edit and then a comment. And we had one last thing, which was Alfa. I'm going to do some meet Matt CIA Alfa goes from 0 to 1. So zero means your item is see through one means it's opaque. So we have to subtract one minus and then open two brackets and type double I because we have to cast this. I toe a double because that's what Alfa expects I am against divided by 20. So if you think about it every time we go around this loop were saying 0/21 over 22/20 and then we're saying one minus that value. It's the Alfa is slowly decreasing as we go round and round this loop. So let's close off that bracket and close off the final bracket and then Because it's a number and we need a string. We say Doc to string and then close off the initialization off our item and close off that bracket we go. Everything has turned to the correct color. Now we have a list of items. What we want to do is under this four loop. Add these to the database. So say new database Dr Ad to do items and then pass it the list that we just created and that should sort that out. Now we need to create our get to do list. So let's copy that. Come down here and this is going to pass back a list off to do list items open our brackets , create our method, and this is just a couple of lines, which is var items is equal to a new database. Open brackets dot get to do items on this passes back a list and then finally we have to return those items. So coming up to our constructor, whenever we jump into here, everything gets initialized. It checks the databases populated, so if it isn't, it will actually populate it for us. So this really is only going to happen the very first time we load the app. After that, this will always have some items, so it'll never run again. Then it's going to jump to our list view and set its items as whatever it gets from get to do list, which will be the items from our database. Let's hit, play and actually test that, and it should pre populate our database and then show us our list of things. Now, if you recall that Alfa that we set is slowly decreasing, slowly getting lower and lower. And what's happened here is if I come back to xamarin and stop it running in our main page dog Zamel with our image, we set our rapacity as a binding toe alfa. So it went off, found that Al Fran tribute and bound it to it. And of course, it goes without saying it's also binding this title and content from the data model that we've created. Okay, that is how you insert database items on, get them out again and display them in a list view in the next section. We're actually going to look at wiring a bit more up to this app and making it a little more functional 24. How to bind variables two ways in Xamarin Forms: Let's look at how to bind these two entries Two ways. Jump into the code behind, which is your to do edit page dot Zamel dot CS Up in the top, we need one more using statement, and that is using I went system dot component model and down here in our class before we get to the constructor, create a little space, and we're going to create the actual item that we're going to bind. So this will be a public to do list item and this we will call the model, open our brackets, and we will set that we will have a get and inside that get, we're going to return a to do list item as the binding context. You'll notice that we have to cast it to a to do list item and then close that off and then we need a set. So we say set. And in here we have our binding finding context is equal to the value, and then we have to fire off and on property changed to let it know that we've actually changed the value inside off this model and then close that set her off and close off the model. Okay, Now we need to set up our to do edit page. And if you recall, whenever we fire up this page, we have to pass in a to do item. And in the constructor, obviously, is where we're going to do that. So we say to do list fightem, we're going to do underscore model. So now we've passed it in, we have to copy it over to our main model, so model is equal to underscore model, and then just for niceties, let's have a title on this screen and we will call this edit just so on. User user knows which screen rain and what they're supposed to do in here. Okay, now we need to have an on save, because in our Zamel, we've actually said here when you're clicked, firing on save to do that, we just go public, void on safe, and then we give it an object, which is a sender and the standard event dogs E. And that's taking care of that. Okay, So now if he tried to build, we're going to get an error because over here in its do edit page actually wants us to pass it something. So we have to cast the e dot items selected item and in front of that open and close your brackets and we're going to cast this to a to do list item. So now when we play and we open that page, we should have the title and the description set for us and a save button to play with. So when I hit this top one, there we go, we have it. And inside here, I can type things etcetera. But if I hit save, nothing happens because we still have an empty save method. Okay, let's stop that running. And in the next lesson, we're going to look at this on save method and create a way off saving to our database. 25. How to open a new Page, View Controller or Activity in Xamarin Forms: Let's create and open a new page every time we click something on our to do list. To do this, of course, we first need to create a new main page dog Zamel. We're not main paid, rather Just a new page, right click our shared project Add new file forms, content page Samel and we are going to call this to to do at it page, and it creates the Zamel and the code behind for us. So we're going to leave this blank for now. We're going to concentrate on actually how we fire up this page. So come to your main page dot Zamel dot CS and we want to open that page every time we click something. And if you recall, it's how on items selected, which in main page dot Zamel was here in the list view. So in here, we need a bit of code. First, we have to have a little bit of code that tells our program not to actually process the click. If the cell that's clicked is empty, and the way we do that is, if e dot selected item is equal to know, then return. Okay, So once you've got that out the way. First we have to de select the row. So when you select a road, it has a gray overlay that tells you have actually selected it or a different color If you're on Android, depending on your theme. So we have to have a way to actually de select that highlighting mechanism. The way we do that is by getting the sender first. So we're going to say list view because we're going to cost something sender. So we're grabbing the sender and we're saying, Hey, this is a list view and then we're going to say Selected item is equal to know, just to get rid off that flash of gray when you click it, then we have to create the actual to do edit page. So we're going to save our to do at it. Paige is equal to a new to do edit page, and it takes no arguments in It's constructor. So we have it. Is that then we need to navigate to it. And this is the reason I've put a sink here because down here, we're going to have a weight on the way we push it onto the stack is navigation dot push a think and then we pass it the page we just created to do edit page. Okay, so I'm gonna play that in the iPhone simulator, and when I click it, it should open a new page for us. So click here. And there we go. It opens it and you'll notice it carries the theme through up the top here off the green background and the white text. And when I hit back, it takes me back. Okay, so that is how you navigate between pages. And before we end the lesson, I'm just going to point out something very, very important, and it catches a lot of beginners out. And that is in our just do it x 10 in our shed project. This main page I put in new navigation page. If you forget to put this in and you just put new main page, then everything will work. But when you click, it's trying to actually get the navigation page behind it so we can overlay the two to edit page. And if you haven't included this, your app can't do that. So you'll get a horrible era that will involve a crash. So always remember, if you're going to navigate on top of your stack, you need this 26. Creating the XAML layout of the Edit Task Screen: Let's fill in that to do edit part of our page. So in your to do edit page, Dr Hamel, that's great. Some elements. I'm just gonna move things around, so it looks a lot clearer. The first thing we have to do is up here in the declaration. Declare another item and this is another XML name space. And this is local. This is equal to CLR Dash name space, and then we need the name off our name space. So if you head over to any part of our project, just copy that and drop it in there, and then we need colon and and assembly equal to, and this is also the name space and close off your quotes. Okay, Now we're ready to put some content on our content page. So in here, create a bit of space. I'm going to indented it by one tab. So it's clear, and we're going to have a standard stacked layout, and we'll set our horizontal options as center and expand who and we'll set our vertical options as the same center and expand and we need an orientation. Finally, which will be practical. Close it off and let the other tag be dropped in. Okay. In here we need first of all, a text box toe. Hold our title one to hold our content and a final item which will be a button to allow us to save anything we change. I've just forgotten equals up here. There we get. So these boxes where we can edit text are called entry and we set some text equal to Now Here comes a more advanced version off binding. What we're going to do is bind two ways I'm going to open and close my curly braces and inside those, I'm going to type the usual binding that we would see off title. And then I'm gonna put comma. And in the next section, I'm going to give it a mode. Some mode is equal to two way now. This means that if I change one of my values in my code base behind this, it's going to change on the screen. If I change it on the screen, it's also going to change it in the code base behind it. So they're synchronized. If you like. Then we need to give this some horizontal options. And again center and expand. But this could be anything that you fancy. I'd advise just experimenting with ease and seeing what does work. And then we need some text color. And we just got to make this straight green and close your tag off. Then we have to do precisely the same with our content text so below that I've just copied it. I'm going to change my binding to content mode to a center expand text color green. That's fine. That's perfect. We need one final element and there is a button to save this. So this is Button and we need some text for the button, which will be really obvious save. And then we need a clicked event and we're going to pass it to on save. And we're going to create that method inside our code behind and finally text color to make sure it doesn't clash with anything is equal to green and close that tag off. Okay, now I will, uh, to do edit Page has been created in the next lecture. We're going to look at the code behind and inside here. We're going to look at how we do this two way finding 27. Saving the Edited task to the database: in this lecture, we're going to save our edited task to the database. Now, the first step in this is actually come over to our database file in our PCL and add a method in here for editing things. And the method we will add is public avoid edit item. And then, of course, we're going to pass it a to do list item called Item. And inside here, we're going to have a simple connection. Dot update on what update does is it finds that item with that I d the primary i d and update it with the new data. So we pass it the item. Okay, just close the database file. So inside are on save. We want to pass it over. But we, of course, don't want to pass it over if there is some empty text in there. And to get around that, we need to perform a check. So above this on save, let's create a new method public, and this is going to pass back a Boolean a true or false, and it will be check name and create the method. Then we type if string dot is no or empty and then we have to give it the actual string. So that's our model dot title. And then if it's empty, we should tell the user and give them an alert se display alert as an era and then alert would like a message. So we say title cannot be empty and then it asks for a button title, which is okay, okay. And then we have to return false because the check failed and close that if and then if the check doesn't run through that and the string isn't no or empty, then we simply return true. So we know that we're OK. And then down here, in our own save method, we're going to use that check. We're gonna say, if not check name return. So if check name is false, then return because we don't want to save anything. But if it isn't false, we're gonna keep continuing through this method. And that will mean we need to save toe our database, a new database dot edit item, and then we pass it the model. Now, this is different because in the older versions of Samrin without salmon forms, rather you would actually have to go and get the value from, ah, the actual view that you've got open. But because we have a two way binding, the value is automatically put in here every time it's changed. That's quite handy, then, after we've saved it, we want to get rid of this screen and go back to the previous one. So navigation dot pop a think, and this just pops off the current thing from the stack. So let's hit play and they should build. And when I click an item, I'll be able to edit it. There we go and I'm going to edit it. I'm going to say I'm going to change my description. I'm just gonna say, edited like that, I'm gonna hit save, and that should be saved the database. But you'll notice it doesn't show up here. That's because we need to refresh it somehow. So I'm gonna hit home twice, swipe it off and then run it again, and it should find that task. There it is edited. So we have one final thing to do over here in Samarie, and that is to actually pull out that new version off the database every time we come back to our main page, and this is really easy to do. Open up our main page dog Zamel dot CS, and you'll notice here we've put a list feudal item source and this is only fired when the main pages first created. It's never fired again. So clearly we'd like to move this somewhere, that he gets fired every time the page appears or is refreshed or something like that. To do that, we can override something. And you may be familiar with this. If you know I also Android and we're going to override this method on appearing so on. Appearing is fired every time a view reappears. So if you put other view controllers or activities on top of it and then you remove them, this method will fire. And all we have to do is take this line the source line and paste it in there. So now when we play this every time that view reappears, the text should have changed. So if I hit task to and I go to edited and I just put my name in and hit Save, there we go, it is being refreshed. Okay, there's just one little gripe that I have with this app and currently these boxes resized to the current task. And if I was to type something really long, it kind of goes out of you. I'm not going to fix that right now. I'm going to set that for you as just a little bit of homework. So I'd like you to play around with the Zamel section of this. So if I stop this running and we go to do edit page somewhere in here amongst these options , there'll be a way to expand that to take up the full width off the screen. 28. A quick recap of everything you have learnt: So, guys, we've reached the end off this course and I'm just going to recap a few of the things that you've learned. So you remember them? The very first thing we looked at Waas How's Amarin forms? APS should be architected, and we went over the M V V M paradigm. Now, ideally, that's how you want to perform things using MPV em When it comes to Sammer informs, then we created a quick start Hello World, the classic hello world to get an idea and a feel off what's going on with portable class libraries and individual products projects. Rather then we created something a bit more in depth than just do it times one and inside there we looked at how to modify our Zamel views. So if I just open it up, we looked at how to have entry boxes and save things to shed storage over the shed preferences that are available on each platform. Finally, we had a look at the granddaddy off the mall. Just do it X 10 where we learned how to create a list, and in this list, we populated it with items from sq light databases. We also looked at how to bind variables two ways inside of our wraps. So every time I change something in a text box, it automatically changes in the variable in the code behind it. And that's where the M V V M View model starts to come in really useful. We also looked at the previous app how to install Google ants because, after all, you want to get paid for your hard work, don't you, boss? We also looked at how to fire up a new view controller or activity from another one. All right, that is the recap complete. Join me in the final lecture where I have a special bonus just for you.