Mobile Application Development With Cross-Platform Xamarin Forms | Cary Baer | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Mobile Application Development With Cross-Platform Xamarin Forms

teacher avatar Cary Baer, I'm Here to Help You Grow

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

32 Lessons (4h 54m)
    • 1. Course Introduction

      1:28
    • 2. Welcome

      1:54
    • 3. Course Objectives

      3:26
    • 4. System Requirements

      2:22
    • 5. Installing Visual Studio

      2:57
    • 6. Intro to Xamarin Forms

      6:30
    • 7. Visual Studio Tour

      3:54
    • 8. First Xamrin Forms App

      6:10
    • 9. Project 1 Pt 1

      2:30
    • 10. Project 1 Pt2

      7:23
    • 11. Project 1 Pt 3

      9:50
    • 12. Project 1 Pt 4

      10:43
    • 13. Project 1 Pt 5

      5:37
    • 14. Object Oriented Programming Concepts

      6:43
    • 15. Project 2 Pt 1

      12:53
    • 16. Project 2 Pt 2

      13:46
    • 17. Project 2 Pt 3

      16:12
    • 18. Project 3 Intro

      4:14
    • 19. Project 3 Pt 1

      14:03
    • 20. Project 3 Pt 2

      4:19
    • 21. Project 3 Pt 3

      7:07
    • 22. Project 3 Pt 4

      13:17
    • 23. Project 3 Pt 5

      9:57
    • 24. Project 3 Pt 6

      17:21
    • 25. Project 3 Pt 7

      10:17
    • 26. Project 3 Pt 8

      14:43
    • 27. Project 3 Pt 9

      21:04
    • 28. Project 3 Pt 10

      16:21
    • 29. Project 3 Pt 11

      16:36
    • 30. Project 3 Pt 12

      13:09
    • 31. IOS and Android

      13:54
    • 32. Final Words

      3:25
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

139

Students

--

Projects

About This Class

Do you ever have a great idea for a mobile app, but don't know where to start? 

Do you ever wish you could make income from selling apps in Apple App Store, or Google Play Store? 

Well, you have come to the right place.

7db9a801

Mobile Application Development Essentials will take you from the very beginning to creating a real world commercial application.  This course teaches application development using the power of Microsoft Xamarin Forms.  Xamarin Forms actually makes app development FUN and REWARDING.

This course is taught using Visual Studio 2019 Community Edition (which is free) on Windows 10, but Mac users can also participate by installing VS 2019 Community Edition on Mac.

In this course, you will learn:

  • Visual Studio Installation

  • Introduction to Visual Studio

    • Environment Overview

    • Solutions and Projects

    • Debugging Techniques

    • Intellisense

  • Introduction to NuGET and GitHub

  • Xamarin Forms Overview

  • XAML (Extensive Application Markup Language) Basics

  • XAML Layout and Design

    • StackLayout

    • Views (Controls)

    • Listviews

      • Context Actions

      • Cell Design

  • C# Code-Behind

  • C# Essentials

    • Variable types

    • List<>

    • If/Then

    • Loops

    • Constructors

  • Introduction to OOP (Object Oriented Programming)

    • Encapsulation

    • Inheritance

    • Class

    • Object

  • MVVM (Model-View-ViewModel)

  • Data Binding

  • Navigation

    • Multi Page Application

    • Data Persistence

  • Local Database Design

  • Designing for iOS and Android

  • iOS

    • Visual Studio for Mac

    • Visual Studio for Windows with Xamarin Mac Build Agent

    • Deployment

      • iOS Emulator

      • iPhone

        • Setting to Developer Mode

  • Android Deployment

    • Android Emulator

      • HyperV and Virtualization

    • Android phone in Developer Mode

  • App Publishing

    • App Stores

      • App Store

      • Google Play Store

    • MDM (Mobile Device Management)

Source Material for this class can be found at my Git Repository.

Meet Your Teacher

Teacher Profile Image

Cary Baer

I'm Here to Help You Grow

Teacher

Software Engineer for 20 Years
    • Nuclear Warheads testing for US DOE
    • Educational Software
    • Medical Testing Software
    • Microwave Communication Software
    • Entertainment Industry Software   Published Author

        • Software Industry Magazine Articles
        • Wrote a Chapter of Programming Book
        • Author of the science fiction book The Strand

See full profile

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Course Introduction: Hey, you guys, I want to tell you about Mike. Do you want to be able to generate incoming hope? Teoh Way, Way E o. I'm so glad that I created this. Shut up. Now I can tell you about this amazing course that I'm teaching. If you want to learn how to create APS like this super cool, shut up and generate income from the Apple App Store or the Google Play Store. Then you need to take my mobile Application Development Essentials. Course. It's five hours of hands on instructional video that equip you with everything you need to know to get started building APS and making cash. Do you want to spend every day at home just streaming movies, or do you want to take steps to a more prosperous future? That's what I thought. So click on one of the links below and it will take you directly to my course. 2. Welcome: Hello and welcome to mobile application development Essentials with cross platform Zaman forms. I am your instructor Carry bear. And I'm so delighted that you've decided to take this course and learn mobile application development. No doubt, mobile application development will become more and more important as users continue to move from desktop applications to mobile applications throughout all aspects of their lives . First, a little bit of information about me. My name is Carrie Bear. And yes, I was called Care Bear when I was a kid. But, hey, I've gotten over it. But let me tell you a little bit about my background. I have been a software engineer for over 20 years. My first job out of college was working for the U. S. Department of Energy working on suffer for nuclear warheads. Since then, I have worked in various different aspects of software, including educational software, medical testing, microwave communication and, most recently, in the entertainment industry, writing mobile applications for those people in the entertainment industry. In addition, I'm also a published author, and I have written articles and magazines contributed to programming books, and I've even written my own science fiction book called The strand. So if you love time travel stories, you'll want to check that out. Now let's get on with the course. 3. Course Objectives: Let's start by going over the course objectives for mobile application development essentials. First, this is a fast track rapid mobile application development course. In other words, this is not a comprehensive course. It's going to cover every aspect of mobile application development that would be impossible in the given time that we have. Instead, we're going to take you from basically knowing nothing about mobile application development to being able to develop a re a world practical application that can be used and possibly turned into a commercial application to be sold in one of the mobile application stores. This will include development for iPhone, Android and Windows. In addition, we are also going to be covering object oriented programming. I'm gonna cover enough of the object oriented programming for you to understand how modern applications are constructive. This will cover the concepts of classes, objects, inheritance and encapsulation. Continue on. We're going to be covering the concept of M V. V M architecture, understanding and application of M V V M Architecture, which stands for a model view view model. It's one of the common architectures that are used for any sort of Web and mobile development. Next we're going to be covering databases on introduction to modern relational databases will be using sequel light, and I'll cover the concepts of tables and queries that will allow you to get data for your mobile application. And finally, this course is intended to be a springboard for learning more. If you could take, would you have learned in this course and carry it forward and continue learning and continue developing richer and more robust applications that that is a successful goal for this course? During this course, we're going to be constructing three projects. The first is called Zamel Layup. We will cover some essentials that you need to know about laying out the user interface for your mobile application, including stack layout, grids and views, which is another name for displays and controls that will be seen in your application. The second project will be our object oriented programming consul program. This is to teach use the concepts of object oriented programming that you'll need in order to be successful in the development of your mobile applications will cover the concepts of classes and objects, properties and methods, inheritance and constructors. The third project and the main project that we will be completing during this course is the my collection project. This is gonna be a custom project that you will design yourself and it'll be done in three stages. Stage one will just be a single page application. Stage two will move on to multiple page application. And in stage three, we're gonna add a database to your application. 4. System Requirements: Here's a list of the course requirements so that you will be able to follow along and be successful during this course. First, if you are using a Windows computer, you will need to have Windows 10 installed. In addition, you'll need Visual Studio 2019 community addition. It's a free edition. It costs nothing, and I have provided for you the link so that you can download Visual Studio 2019. Next, you'll need at least 20 gigabytes of free hard disk space. This will give you adequate space so that you can install the necessary tools. If you're gonna be developing using your Mac, the Mac OS needs to be ideally Catalina. 10. Don't 15 It is possible that you could use Mojave tend at 14 or high Sierra 10.13 and you should still be able to use Visual Studio 2019. If for some reason it becomes incompatible. You can still take this course using Visual Studio 2017 Community Edition for Mac, and still follow along with everything that we are doing that will also require you to have installed on your Mac X Code 11 dot for in addition, you will need 10 gigabytes of free, hard to space in order to install the visual Studio 2019. I understand that this course is taught in Windows. We won't be covering back much. However, everything that we are talking about using windows can also be applied. If you have visual studio installed on your back, the layout of the screen might be different. There might be a few menus that are different, but overall, everything that we will be discussing the Windows environment will be able to be ported over to the Mac environment so you should be able to follow along added. For some reason you get lost. You can always pause the video and find within the visual studio for Mac, the same area that we are working on visual studio for Windows. 5. Installing Visual Studio: to get started. We're going to install visual studio If you haven't done so already, I'm going to guide you through how you can install a visual studio onto your computer. And remember, we're just covering Windows installation. However, back installation is very similar. First, you need to open your browser and in the link area. Go ahead and type in this lake. Visual studio dot Microsoft dot com slash downloads. Once you get there, you will see that there is an area here for Visual Studio 2019. There's three different class is a visual studio 2019 but we're going to be looking at community because it's free. Professionals is free trial in a prices free trial, but you'll see Community says free download. Go ahead and press on free download to begin the download process. Once completed, Open up the file that was downloaded and it will show you the visual studio installer. You want to follow the installation props until you get to a screen that looks like this one here, you will be able to pick exactly what it is you want to install that you're gonna need for your development. You can always come back to the screen to add additional modules. But for the sake of this class, we are going to only need three of thes, and those are the three that I have checked right here dot net desktop development, universal Windows Platform development and mobile development with dot net everything else in here there's quite a few we don't need. And like I said, you can always come back later and install any additional modules that you want to go ahead and hit. Install, and it will begin the process of downloading and installing those three modules. This will take some time, depending on your Internet connection and your computer speed. It could take as much as half on hour. So come back when you have completed this process and that we will continue. Once you have finished the installation process, go ahead and open up. Visual Studio Special Studio. I actually have two different ones. I have 2017 and 2019 but we're gonna be working in 2019. Click on Visual Studio 2019 and you should see it come up just like this. And this means that you successfully installed Visual Studio 2019 Community Edition and we're ready to get started programming 6. Intro to Xamarin Forms: at this point in the course, I would like to introduce you to xamarin forms. Zan Reforms is a Microsoft dot net technology. It's a platform for developing applications on multiple platforms. This includes Apple, Android and Windows. Apple platforms include both IOS for iPhones and Mac OS for developing applications for Mac desktop computers. The concept behind Zaman forms is you only have to write code once and use it in many different places. In the past, it has been necessary for people to write code for each individual platform separately, so you would have to use either Objective C or swift for Apple. You would have to use Java for android, and you'd have to use .net technologies for Windows. But with salmon forms, you could develop a single source of your application that works on all platforms. In addition, is ever informs is also now applicable to Lennix as well. Now I want to show you some statistics that you might be interested in seeing because I know what you're saying. You're saying who has a Windows phone, practically nobody. To be honest with you, let's take a look at these bar charts. This is a percentage of smartphone market share. This first area is worldwide, second is in the U. S. And third is in the UK. As you could see, iPhones dominate the market. 72% worldwide of smartphones are iPhones, 27% are android and really less than 1% our Windows folks. And it looks similar in both the United States and in the UK, a little bit more balanced in the UK as faras, iPhone and Android. But nobody has, ah Windows phone anymore. So the question is, Why do we want to develop for Windows? Well, that brings me to my 2nd 1 and this is percentage of operating systems in the market share . So looking at Windows, Mac O X, Lennox and chrome, you could see that operating systems are dominated by Windows. 77% worldwide of desktop computers use Windows as its operating system. The beautiful thing about Zaman forms is if you develop four windows, you're not only developing for Windows phones, which are barely used, it all you're also developing for Windows desktop. Your application could run just like any of your desktop applications run. And so Zimmerman forms is very diverse and capable of handling just about any platform that you choose to develop for. So let's look a little bit at the structure of Zaman Forbes. Seven forms is broken up into two different areas. First is the user interface. The user interface is written in Zamel, which stands for extensible application markup language. You do have the option if you want to, to write to the user interface strictly in C sharp. However, I will tell you that most Zaban form developers choose to write their user interfaces example and not see sharp. It's cleaner is a lot less coding and it's really the way to go. And even if you're not familiar with markup languages, it won't take you long to get acclimated to it, and you'll see that it is fairly straightforward in developing your user interface. Using example. The application logic is the second section and that is solely written in C sharp that handles all of your business logic, your data retrieval of manipulation and basically all of the functionality behind the user interface. And that's all written in C. Sharp Zerman forms mobile applications are developed using the M V V M architecture, which stands for model view view model. The model is basically your data. Is your data objects that encapsulate all of the data that you need as part of your world application? The view is your user interface. That's what the user of your application will see on the screen, and the view model is what is responsible for binding all of those data objects to your user interface. And this allows your user interface to be automatically updated as data changes or that allows data to change as you enter new data into user interface. It goes both ways. Also in a zerman forms solution. There are four projects in visual studio. You create new solutions, and those solutions could have multiple projects in them. For Azam inform solution, we typically have four projects. The first is your shared code. 90% of the code will be shared amongst all of the platforms that you are wanting to deploy application to whether the IOS, android or Windows most all of your time developing will be in this shared code area. The second project is your IOS code. The IOS code is written in C sharp and it is specifically designed for elements of your application that pertain to the IOS deployment. And similarly, the Android code is its own project. And finally, the Windows Code is in its own project, also written in C Sharp. 7. Visual Studio Tour: it's time to start learning to program in visual studio to develop Zaman forms application . So let's get started. If you haven't already opened up Visual Studio 2019 and your screen should look like this, we're going to click on create a new project. Okay, You probably won't see this on the left because this is the first time that you've used this. But on the right, you will see that it looks something like this. I want you to go to the far right, drop down and skip down to the mobile section and then at the top of the list, you should see mobile app zaman dot forms. Go ahead and click on that and then click next. Here's where you name your application and we're going to name it Zamel layout. This is the location. You can change that if you like, or just accept the default could create. Now here, visual studio gives you a chance to create an application that already has some detail in it. There's a couple of different types of layouts that it provides for you. But for the sake of this class, we're just going to start with a blank application platforms. We're gonna go ahead and include android IOS and then go ahead and shoes windows you WP and click OK, This might take a few minutes for it to create the project, especially if it's your first time doing it. You should probably pause the video until the project has been created. Once Created is going to look something similar to this. Now, if this is your first time in visual studio, we should go over some of the aspects of what you're going to see here. Let's start on the right here where it says Solution Explorer. You could expand that area by hovering over the edge and then clicking and dragging, too. Make that larger. Up with the top. You're going to see a few little icons and things. Go ahead and click on this one that says collapse all, and then we can take a look. And here are the four projects that I mentioned earlier that you're going to be seeing this top would. Zamel Leo is your shared code. Like I said, this is where 90% of the code will exist and 90% of your time will also exist next down From that, you'll see the Android Project, the IOS Project and the U. W P project. I know that I said early on that there's only a very small part of the market that has a windows phone. However, for the sake of development during this course, the fastest and easiest way to show you and have you work through all of the exercises is to do it using you. WP there are a lot of configuration issues with IOS and Android. They're really not part of this course, so we're gonna keep it simple. We're going to go with Windows development at this point and then later on, we'll cover what you need in order to take what you've done and deployed to IOS and Android as well. 8. First Xamrin Forms App: all right, so let's go ahead and look at just this first project here. Zamel layout. And if you click the button there, it will expand this out and you'll see some of the files that are contained within that project. Let's take a look at this one that says main page dot Zamel. We click on there, just a single click and click. It's arrow. You'll see that underneath There is another one that says Main paste at example dot CS. As you can see for their each Zamel file, which is your user interface will have a corresponding dot CS file, which is C sharp that goes with it over on the left. You see the C sharp file. This is what we call the code behind. So each Zamel file, which is your user interface code, has code behind that's behind it. Written and c sharp a little bit about this window for C sharp. In case you're not familiar with C. Sharp syntax C sharp is case sensitive. So if I were to come in here and change this initialized component to a lower case, I it would underline it, saying basically that it does not understand what this is. If you hover over it, you'll see it says the name initialized. Component does not exist in the current context, so C Sharp is case sensitive. So you have to make sure that when you type something in, you always type it with the proper case, as it needs to be. For this case, it's a capital I. Also, when you're going through into and developing and debugging your code, you might want to halt operations at some certain point so that you can see what's going on over in this light gray area. Over here you can quick in that area left click and a little stop symbol will come up. That's a break point so you can place break points throughout your code so that you can inspect things going on at that point of the code. Visual studio has multiple tabs, so right now we just have one taboo. But if I come over and I double click on Main Page Zamel, you'll see now that his M O comes up, this is the's at Main paste example. This is the user interface code, and you can see that one tab is example and one tab is the C sharp. The code behind that goes with that. Each of them have the same name Main page and made page that CS next up above. I want to talk about some of these little symbols that you see here. This, of course, is how you open files and save files. When you make changes, you want to click and save any of the changes that you've made. My personal opinion is any time you make any a change that significant, you want to hit safe. It will do it automatically periodically. But it's just my habit and a good habit to get into to say that any time that you make some change that significant that you would hate to have to redo over again in case something weird happened. Next will notice here that it says Zamel layout dot you WP you can see this list all of the different projects that we are currently using Zamel layout You WP This could also be seen because over in the solution Explorer, you'll see Zamel layout that you know BP is bold and the others are not bold. If in the future you wanted to switch and develop for IOS, you would click on IOS, right click and go set as startup project. If you set a startup project, then you can see now that this is the both one and you will also see that up here is showing Example layout dot IOS But for the sake of this class, we're just gonna leave it on your WP okay, When you have a you WP you're going to see here that says local machine. That means that when we run this, it's going to run on the local machine, meaning your windows machine. There is some other options. You can use simulators. You can use remote machines, you can have a windows phone. That's the device here, Windows phone. We're gonna be doing local machines with that, we're going to go ahead and run this application. This is kind of the basic application that comes up when you create a new solution, a salmon forms solution. So without writing any code without changing anything, really, we're just going to hit right now. It's going to go through some compile processes you'll see down here. It shows you the progress of the compiles in the output. Here, you'll see some messages come across showing it. If there's any errors that occur, it will show here in the airs area. And there you see that the application is running pretty simple. It's just a screen has the words Welcome to Zerman forms in the middle, and that's basically it. Go ahead and stop it by clicking the X, and you'll see that here in the Zamel, it says, Welcome to Zerman forms. It will go into this further, but this is a label on that label says Welcome to salmon forms, and that's why you saw it when the application ran. All right, great job. So now we've got everything up and running. Everything's working and we're ready to start your first project. 9. Project 1 Pt 1: All right, So your first project is Zamel layout, and we've already created the solution called Zamel layout. And now I want to show you a little bit of details. As far as what is going to be in your application when we're done. This is how the application is going to look. It is going to have an area at the top where it's gonna have some words written in a blue box, followed by read blocks, a yellow block, a green blanc and then down below, there's gonna be a section where there's going to be a switch. That switch says Click me when you press the click Me. This is what will happen. It will show a picture. Click me button will turn on. And so basically you'll be able to turn this picture on and off by hitting the switch. Now, I chose a picture of my daughter who is a singer. You can pick whatever picture you want, and I'm gonna show you how to do that. So here's where we left off with our application. With just the simple welcome to Zaman forms. The first thing I want to show you is that you noticed when we ran this application that it looks quite large. This certainly doesn't look like a phone. Now you can stretch this just like you would any Windows application. But we would like it to start with the size that we would like to deploy it to a Windows phone on and not out here and then having to change it. And now when we run this, it's you'll see that it shows up with the right size. All right. Next, we're gonna be transforming this application here into the one that I showed in the slide just a minute ago, and we'll take you step by step through the process of creating that through the Zamel and through C sharp code behind. 10. Project 1 Pt2: Okay, So we are going to begin by taking this very simple program that we did in the last module . And we're going to turn this into the first project that I showed you in the slide a few minutes ago. Uh, so just as a reminder, I'll show you what that looked like. So this is the project. And as you can see, it has a top area here that is a blue square stretching from right to left and has the word . Zimmern is fun in it. Underneath that, we have three uniform blocks and three different colors. Then we have this blank space, and then we have this frame around a switch that says, Click me. And when we clicked the button, this is quick me. It shows up the image within this Blake area. So that is how that works. So that's what we're going to be building. So let's get started. We're going to start with the definition of a stack layout, so it's gonna close this and you'll see here in this area right here. It says stack layout. Now, stack layout is basically one of the ways that Zimmerman forms allows you to group items that are going to appear on the page. They're two different types of stack layouts. There is vertical and horizontal by default. The stack layout is vertical. You can specifically define the orientation by typing the words orientation. And then you're given the options of horizontal or vertical. If you don't put this orientation specifications in here, it's going to be vertical. But here you can actually put either vertical or horizontal. So in this case, we're just gonna go with Vertical. And we're going to just copy and paste this label a couple of times so that I can demonstrate to you that when we play us when we run it, it's going to show three labels all vertically stacked on top of each other right back. Okay, I'm gonna go ahead and just make this a little bit smaller. I'm just going to say Samrin well, just make anyone to and free like bet. And then when we run it, you'll see that it has the numbers 12 and three, all vertically stacked on top of each other. Now, on the other hand, if I change my orientation toe horizontal and now I run it you will see that it is now 123 horizontally, side by side. Okay. No, uh, the stack layout has a few other things that you could do with it. For example, you notice that all of those were shoved over to the left side so we can do what's called horizontal or vertical options. In this case, we're going to do horizontal options. Horizontal options allows you to specify how you want the items displayed, where where they basically begin to show up on the screen. So right now is to the left, and that would be the start. But we also have center and end. So let's say I put it in the center and I run it. You'll see that there now in the center. And as you probably guessed, if I put end and they're all shoved over to the end, okay, your other things we can put in here, I could put a what's called margin margin is to basically a space, and you don't want it to be, Let's say all the way over to the end. But you want it to be over the end, but leave a margin on the edge kind of like the margin of a piece of paper adds. Then when it shows, you could see that there is a small space there left, and it's not all the way shoved over to one side what we actually weren't for this particular project is in the center, so we're going to go ahead. And I just put these three labels here so that you could see how they all stack either vertically, horizontally. But for this particular project, we only need the one level in the one label. It's just going to say xamarin is fun, okay? And we're gonna go ahead and put this in the center. So no, we have a stack layout that just has a single label in there, so it really doesn't necessarily have to be in a stack way out because it's just one item in there. But I'll go ahead and leave it in there anyway, for right now. So when we run this, it should now say Zaman is fun in the center. Okay? Now, to make it look a little bit more like what we see on the screen there, uh, we are going to go ahead and add a few more properties to this. For example, we're going to change it to, uh, fun size large. The font size could either be some of the given. Front size is that they allow you like the ones that are mentioned here. Or you can actually put a number in there if you want. Like, a like a fun size would have. But the sake of this example we're just going to say large. Okay, so now since we have this, any stack they out, what we're going to do is we're actually gonna make a background color for the stacked layout, background color blue. Okay. And when we do that, we now run this and it looks like this. Not exactly like this, but we're getting there. 11. Project 1 Pt 3: All right, we're gonna set this Stackley out to the side for a second. Just move this down here. I'm gonna talk about the grid, because the way that this example works is that all of this is laid out on a grid so that we can specifically place an item in a row or a column over here. To the left, we have the toolbox, and in the toolbox, you will find all of the controls, layouts and various other items that we need in order to construct our user interface. If you don't see this toolbox here, it could be that it's against the left edge of the screen. If it could look something like this where you see toolbox over here, when you click on toolbox, it shows up. But if it's not permanently open, that you can click this little pin looking mm there. And now it will stay open. If you don't even have it off to the left, you can find it under view toolbox, and then it would show up. Okay, so what we're going to call on right now is the grid right here, red, and you just click on it and then drag it over onto your screen and the code is nicely done for you. And we're not going to talk about this section just yet, But I'm gonna take him my cursor and I'm just gonna make a little space right here and in there. We're going to put this stack layout that we had from before. I'm gonna cut it and paste it into the grid right there. Okay, so now we have this stack layout with the label in it inside the script. Okay? Now, the way a grid works is it's has columns and it has rose. And you define those columns and rows right here. So a grid would have a number of columns that would have a number of rows. Right now, we just have one column and one Roath, but we're looking for As you can see here is there's 1 to 3 columns, so we're going to go ahead and just basically copy this one line a couple of times. And now this is three columns. We'll get into what this star means shortly. This with Equal Star. But for now, this is three columns and one rough. The way you determine where something is located within the grid is that you can specify that. So this stack layout, we're going to start it in position 00 column zero and Rosa. The way you do that is you type grid dot ro equals zero and grid dot column equals zero. Okay, No. When we press run, you can see that it's going to look something like this doesn't look exactly like that, does it? All right, the way that we just did this, we set it up in rose zero and column zero. But we have the ability to actually have it span across several rows or several columns. In this case, we want it. We're defining 1 to 3 columns, but we want this one to span across the entire three columns, so we're going to say grid column span equals three. The last thing that we need to do for this Stackley out is go ahead and give it a width. So we're gonna go ahead and say with request equals 400 and now it's going to span across all the way from left to right. 400 points, the entire stack layout. Obviously, this is taking up the entire screen. But that's because we only have one row for this project. We're actually have four rows. Let me show you. Here's the first row. Here's the second row. Here's the third row and here's the fourth row. Okay, so this spans across three columns. He's a reach, an individual column, the spends across all three columns, and this spends across all three colors. So what we need is we need four rows. So I'm gonna go ahead and create four rows. Okay, Now we have Zaman is fun in the first row. Let's go ahead and put something in the second row, and that's gonna be the box view. So underneath the Stackley out, we're gonna add for murder Toolbox, a box for you. There it is. And we're going to make this box view background color read, and then we're gonna put another box for you in it will make that background color yellow and again, background color green. Now we just need to tell it where to put these boxes. So we will start by saying grid dot ro one. In fact, they're all gonna be in row one, so I'm just gonna copy this over all of these. And Grid Column zero Duck column. Oh, I'm sorry. Not span. Just call him. Greeted dot column One grid Dr. Column to Okay, so they're all gonna be in row one, but they're going to be the 1st 1 is gonna be in column zero the second in column one. And that's third running column, too. And now when we run this, you can see starting to look a little bit more like this. Okay, get closer. Now, one of the things is that I said that we have with Star Star basically means Philip as much space as you need for the contents of this cell of the grid. We don't mind so much about the columns, but we do care about the row height because the row height we wanted to be certain size this. I mean, this first row is much smaller than these heights is much smaller than these here on the second row. So we're gonna go ahead and we're going to change the first Rose haIf to 75 on the second rows that 1 50 and you could see that there's definitely some space here between the left and the right doesn't spread all the way out to the edge of the screen. It's a certain size that we want. I'm gonna go ahead and give the grid size and I'm gonna say with request 400 I'm also going to specify the horizontal options center and expand. This is going to make the grid stretch for left to right. And now when we launched this, you'll see that it looks like this in the next section. We're going to continue on with this design and add the image and the frame with switch to turn the image on and off. 12. Project 1 Pt 4: all right, So next we're going to add this portion of the page. It turns on the off the image. That's what we're going to do next. So, so far, what we've got is we have a grid set up, and that grid has a stack layout with a label in it, and it has three box views underneath in three different colors. The next item that we need to add to our grid is an image. So we're gonna take image and drag it over. And this picture that I have on my example here is it means that I have off of my daughter's website and you're welcome to use this picture if you like, if it is still available at the time that you're viewing this video, and I will provide for you the URL for this image. So it's a good idea to first tested out just in a browser and make sure that the image actually still exists. The way that we do. This is inside. Where, says image source. We provide for it the u R L for the image. Now there's a couple of ways that you can do images within German forms one is to provide a U R l like I just did here. The second is to actually include it as an image resource built into your application. So this is the better way to go for things that never change that are always the same. Like maybe a certain button and has a certain image on it. You just include those resource is as part of your project, not tying it to a You're like I'm doing here, and I can show you both ways of doing that. But for this first go around, we're going to just use this. You, Earl, if you prefer to use some other girl, go out there, find it, and you could use a different girl if you want. Okay, So what we need to do now before we can actually take a look at this is we need to give it a row on a column. So let's go ahead and say grid dot ro. Oops. That's not room. We're gonna put this in route to grid dot column. We're going to start it rude zero. And then we're gonna do grid. Don't column spin three. Just like we did the stack layout of top with the with the label in it. What final adjustment that we need to do is to set the high tomorrow. We're gonna set that to 300. All right, so let's hit. Run! All right, there it is. Beautiful. Good job. Okay, now let's move on. We now want to do the switch. Now for the switch, we are going to start with a horizontal stack layout. And the reason is because we have both a label and a switch that are horizontally next to each other. So we're going to start with, uh, stacked layout and we're going to put the switch in their night. You know, I've been showing using the toolbox. A toolbox is handy, but you could just as easily type. Switch in here actually would start with the label, start with label, and we can give the label attacks. And that Texas going to be quick, me and that's the label. Next, we're gonna have a switch. The switch is going to have Is toggled false on what this means is it's going to start with the switch in the off position Stackley out. Like I said, we wanted to be horizontal so that the label on the switch or next to each other. So I'm gonna make that horizontal, and then we also need to tell it where in the grid we want it to be. So we're gonna go grid that Row zero. This is look very familiar by now. Grid column. And the column is also going to be zero. Have they create dot Good, uh, column span is gonna be three. We've been pretty familiar. All right, so when we run this Oh, I'm sorry I said the wrong thing. We put this in rose zero. That should be in rose 0123 So it's up all the way at the top. So let me change this to room three, and you could see now it's down below. You can click this. It turns on and off. It doesn't do anything yet, but it turns on and off now to get this to be a little bit more clean, we have to do some more of these horizontal options. So I'm gonna go ahead and had the horizontal option here for the stacked layout of center and expand that I'm gonna add the horizontal option here with center and the same thing for Can't seem to take same thing here. Center. Okay, that looks a little bit cleaner. All right, now it's in the middle. Now you notice how this text here seems to be a little high. It used to be higher than the switch. And that's because in addition to horizontal options, we also have vertical options. So after that, I'm gonna add a vertical option of center on each of these. And now you notice that they're more lined up. Okay, that's that. Now what looks different between that and this? Well, this has the frame around it, and ours doesn't. So let's see how to do that. Basically, we have something called frame. You see it right there. But I'm just gonna go ahead and type it in frame. And what you do is you're going to surround this frame around the stack layout. So now you can see we have the frame starting here and ending here, Stackley out inside in the frame. We have a border border color, black. There's some other things you could do with it. Like corner radius 10. That puts a curve around the corners of the frame, all right, and one more thing we need to do this is this grid that row greed, debt row column and column Spend no longer needs to be in the stack layout. We need to put it in the frame like that. Oops, here we go. Needs to be in whatever the outer item is. So if it's the label, you put it in label. But if there's a stack layout around the label, then you put it in the stack layout. If there's a frame around the stack layout, you put it in the frame. All right, so now when we run this, you will see that there we go. Looks nice, but it's a little big little tall because we didn't get to find a size for this rope. So we're going to go ahead and make this 75 35 right there it is. Yeah, here's the two side by side. Pretty close. A few differences. What do we notice? Different here? Well, first of all, Zaman is fun is in black, and it's not centered like this one. So let's take a look at that. The first obvious thing we can do is make this color text color White fixed that problem. And the other problem is the fact that we were playing around with this from earlier on. And we have some stuff in here that we really don't need. Like, this margin of 10. We don't really need that. And here, the horizontal options. You could either leave it off altogether. Or you can put the word the option off, Phil. So that will fill it all the way from left to right. If you do in the center, it's only going to be in the center. So now if we run this, it looks like that. Now we look exactly like the other one. Now, this switch still doesn't do anything, but we're going to do that in the next module. 13. Project 1 Pt 5: all right. In this final segment of our first project, we're now going to make it so that the switch controls whether the image is on or off. Let's start with the image. I'm gonna go ahead and just kind of Spacey's out a little bit so we can see what we're looking at. It doesn't have to be all in one line, and we're going to do one more thing here. I'm going to give the image a name and I'm going to call it I m g. You can call it whatever you want as long as there's no spaces. Okay? And now we have this image with a name called Image I m. G. And the reason I did that is because we're going to be adding a little bit of code in the code behind and C sharp and we're going to use I m g in order to refer to this image. Okay, so one of the thing we need to do here is we need to set the property is visible equal to false. So no free to run this thing right now. Everything's exactly the same, except the image will no longer be visible because I set visible the false. Okay. Now, looking at our switch, go ahead and species out a little bit. I went to give this an action and we could do that by using the property toggled equal. Okay, So basically, any time that switches toggled, it's going to execute this action or event really known as an event. And here it's giving me the opportunity to create a new event handler. Really? You can type any name you want in here, but since it's giving you this offer here, new event handler is going double click on that and it creates switch toggled switch toggles, which is going to be the name of our method in our C sharp that is going to handle this toggle ng of the switch. If you right, click on switch toggled and then go down to go to definition, it's going to create for you a method inside the code behind this is the code behind Messi appears in Maine paged as ammo dot CS switch toggled is the name of the method and one of the things that's gonna be passing in is this thing called toggled event ARDS e and That means that inside this thing called e it's of information about the switch. So if we go e dot value, that's going to tell us whether the switch is switched on or sweet stuff. So we're gonna put this in what's called a if statement. If you're not familiar with it, we will be going over this later. But for right now, I'm just gonna say, if e don't value equals true meaning it is switched on then in I m g. Dot is visible equals true. I'm sorry this needs to be a double equal Sanger. So this is if e dot value equals true and set is visible of our image to equal. True else image dot is visible, equals falls. Okay, so this basically says that if the switch is turned on or true, then we want to see the image. Otherwise, we don't want to see the image. That's what that means, and that's all there is to it. That's all we needed to give in order to control the visibility of that image. So we quick run and you see it's in the off position and there's no image. Soon as you click the switch. There it is Off. Oh, so it works. Perfect. All right. And now this is the completion of this project. So I hope you learned a lot about the positioning layout of your user interface. I know it's complicated, and I know it's gonna take some time to get used to getting the visual look that you like, But the idea was to give you some idea of how things were laid out in the user interface here, we used boxes which normally he probably wouldn't use. But you can imagine that in each of these columns and each of these spaces, you can put whatever you want, whether be labels or controls or whatever can all be placed within any of these grid cells . All right, so I hope you enjoyed that. And now we will continue on with the next section. 14. Object Oriented Programming Concepts: Now we're going to step away from Zerman forms for just a few minutes, and we're gonna talk about object oriented programming, whether you're developing mobile applications or any other type of modern software development. Object oriented programming is the primary methodology for developing modern software applications, so it's very important to learn, even if you're not developing mobile applications. But it is also used in developing zaman forms applications. So it's appropriate to talk about at this time. There are six main concepts in object oriented programming in this class. We're only going to be discussing four of those topics. The others are not necessary for the development that we're going to be doing in this course. Before that, we're going to be discussing our class object encapsulation and inheritance. So I want to start by discussing what an object is. Imagine for a second that you are watching a television and on the screen you see a ball. I want you to imagine in your mind this ball not just a simple circle drone on a piece of paper, but an actual riel world solid ball. Now, chances are, no matter who is watching this video, the ball that you're picturing is probably different looking. What are the characteristics of the ball? What's its size? What's its color? What material is it made out of? What's it used for? Is it a solid ball, or is it an inflatable ball? These characteristics are important for defining what type of object this is, and very similarly object oriented programming defines objects, which are a collection of properties that describe what that object is. It's also a collection of methods or actions that could be taken upon that object. For example, with the ball, a ball could be hit, it could be dropped, it can be bounced, it can be thrown. Or it could be eaten. In addition to an action, an object also has a reaction. How does it react when something happens to it? What happens when a ball is hit with a bat or bounced on a basketball court or is rolling down a bowling alley? This is what we call encapsulation. It is the collection of properties, methods and events that could occur on an object. For example, this ball we see the properties or size, weight, color, material purpose, and there's so many more than I didn't list here. Methods you can inflate, you can throw it, you can bounce it and events what happens when it's hit or when it's caught, or when that size changes. All of these are encapsulated descriptions and properties of what defines this ball. Next, I want to discuss inheritance. Inheritance basically states that a ball can be different types of balls. It could be a sports ball. It could be a food ball. It could be a decorative ball, but the sports ball. It could be a football. It could be a basketball. It could be a golf ball. It's a food ball. It could be a fruit. It could be a meatball. It could be an ice cream scoop. It could be a months of ball. It's decorative. It could be a mirror ball, a Christmas ball or a crystal ball. So many different choices inherent in states that there are certain properties that are true of all. Then sports balls will have properties that are just specific to a sports type ball. A food ball has properties just specific to a food ball and so on. And then if you go down further in the inheritance a football has certain properties that are different than a basketball or a golf ball. So a child object inherits the properties of its parent, and the parent inherits the properties of its parent and so on. Here's one of my favorite types. The ice cream scoop. It is under the category of Food Ball. I want you to imagine an ice cream shop, all the different flavors, all the different choices, so many different options. So suppose you go up to the counter and you say to the server, I want a waffle code with two scoops of ice cream, and I want lemon custard to be the first scoop, and I want a raspberry to be the second scoop, and then I want Sprinkles on top. Now you have just to find the type of object that you want, but there's a problem. You can't eat it yet you can't consume it. Why? Because it hasn't been constructed yet. The server first has to take the description that you gave it, and it has to construct the ice cream comb exactly as you specified. Once the server hands you the waffle code with the two scoops of ice cream and the Sprinkles on top, then you can consume it. This is exactly what happens with objects. First, you have to define a class that has all the properties and methods and events that define that type of object. Before you could use it, you have to construct it. You have to construct it, defining exactly the properties that you want for that class. It's the same thing in object jointed programming. Before you can use a class of an object that you have defined, you have to construct it first, and that's called the Constructor. I know that these concepts are a little confusing at first. However, I think once we get into the code and see how it's all put together, you'll see the classes and the objects and the inheritance and all of the concepts that I've discussed with you here, working together to create your application. So let's get started with the object oriented programming console application 15. Project 2 Pt 1: it's time to start our second project for the course, and that is the object oriented consul application. We're gonna take what we've learned in concepts of object orange in programming, and I'm gonna show you how that is constructed using C sharp in visual studio. This is important because we're going to use a lot of these concepts as we are developing our mobile application. OK, so let's start off by opening up a brand new visual studio project, create a new project. And this time we're not going to be doing a Movil application. We're actually going to be doing a console application. If you don't see it here, just look down at Consul and it will come up as consul application in C sharp. So we're gonna select that one, and we're gonna name our consulate application vehicle console up. All right, there we go. Council application is actually very simple. Type of application has no user interface. It just simply brings up a now output window where you will see either some props for you to enter something at or just some simple text to being printed out. For example, this one is hello world and we can run this and you'll see what happens. It just says hello world, and that's it. Pretty simple. And then you press enter and it goes away. So this is gonna be our starting point. I wanted to point out just a couple of concepts to you. In case you're not familiar with programming at all or C sharp programming. The first thing I want to talk to you about is the concept of variables. There's different types of variables. There's integers, that air like whole numbers. Like 1579 There's decibels like 1.53 point two their strings that are like this one here. Hello, world actually says sequence of characters. And so if we were to do an integer, we would say it like this it and the name of the integer count. So the way that you can set unequal two of a number as you can say into account, equals 10. And so what I can do is instead of writing out hello, world, I could no right count. I run this. You'll see you here is the number 10. You can do things to this like you can say, Uh, count equals count plus one. So obviously that's gonna add one to the value of count. Now, when we run this, you'll see it says 11. This is very basic stuff. So if you don't need this, then just skip over it. But I just wanted to cover so that no one's confused later on. So, in the same way, I could do a different type of variable. I can say string name equals Carrie. And then here I can see name. And as you might realize, it's already it's gonna happen. Need carry there. I can also add strings together. I can say hello out of space. Hello, space and then my name. Hello, Carrie. The next concept that I want to run by you is the concept of looping. There's several different ways. Toe loop in C sharp. First, I just want to talk to you about the four loop. I'm gonna write this out in the no, explain what I'm doing. Okay, so let's discuss what this does. This basically is going toe loop from one number two. Another number. I want to put a 10 here. Zero. Okay. So what this is going to do is it's going to keep looping through whatever's inside these braces here right now. There's nothing, but it's gonna keep looping through these braces, and it's going to continue every time to add one. That's why, says I Plus Plus, that's gonna add one toe I every time it goes through this loop. So the first time it goes through the loop, it's gonna be zero second time. It's gonna be one the third time it's gonna be, too. And it will keep doing that as long as Isa less than 10. As soon as I becomes 10 it leaves the loop. So now I'm going to take and I'm gonna move this in here and I'm going to put I hear. So now this is gonna write out the number that that I is equal to when we run this and it's going to do it 10 times. So let's run it. Boom. Take a look. 0123456789 And as soon as they hit 10 it didn't print. This time it jumps out. That's the concept of looping. Okay, next concept. The concept is a list. A list essentially is a collection of some sort of item so we can make it a list of string variables. We can make it a list of interest, your variables, or we could make it a list of anything we want. And so I'm going to start by saying list of hint we're gonna call it NUM list equals Now. You remember before I was talking about object horning programming, needing a constructor. The way we do it, constructor is we use the word to new. It means I want a new list. It doesn't yet exists, but I want one. So I'm going to create one. What type of list of my going to create? Well, a list of its and we're not. I'll have to go into what that means a little bit later. Um, right now it doesn't know what a list is because it's not included up here in the using area. So I can right click and save actions and then do the using and then it will know. Let me added up here and now it knows where the list is. Okay, so now we have a list of numbers. Now there's no numbers in there because we haven't put them in yet. So I'm gonna go ahead and add some numbers. Number list dot ad one in the cynical And I've just added the number one to my list, and now I'm going to add the number to to my list. So what I'm going to do is I'm going to take this loop that we used before, but moving down here and I'm going to change it for int I equals zero I less than but I'm going to say instead of 10 here, I'm gonna say no list don't count. So what this is going to do is it's going to the The count is how many items I have added to this list I've only added to. So in this case, this would be a to So it's the same thing is saying I equals zero to I less than two. And now, instead of putting, I hear I want to know what's actually in this number list. And so I'm gonna say that I want to print out number list bracket I close bracket and this is going to print out the number list item zero the first time. Numberless item one, the second time and so forth. We only have two items in here, so it's only going to do it twice. Let's go ahead and add a few more just to make this. Okay. All right. So now when I run this because he says 1234 Ever done. Now, of course, I didn't have to do these. I could put any number I wanted here, and it's gonna bring those back 1 23 144 Okay, if you're following along so far, you're doing a good job. And I really appreciate you hanging in with this because if these air some concepts that we're going to be needing as we get into the development of our mobile applications So let's cover one more concept. There's a different type of four loop, and it's called the for each loop. And it looks like this for each the for each loop is really good for working with lists. Now, this is a list of ends, so basically, I'm going to say for each and I'm gonna give it a name. No for each and numb in num list for each in numb in number list. Now we're gonna do this. I'm gonna copy this down here that we're gonna take this out because this is no longer right. Okay, Right now. So, basically, instead of having to worry about this, I index and passing the index through and all this, that's kind of ugly. Instead, we could just say Just give me the number. I want to go through each number that you have in your number list, starting with the 1st 1 The 2nd 1 for everyone you have. Give it to me and let's write it out. And now you'll see it's going to do this twice. The the 1st 1 will be the first method that we used. The second would be the second method that we used, but they're both will have the same exact results. 1 23 144 1 23 144 So it works both ways. This really is a more useful type of four loop. And this is the one which we will be using as we go forward. 16. Project 2 Pt 2: Okay, so the next thing we're going to do we actually don't need any of this. I was just demonstrating some of these techniques for you, but I'm gonna go ahead and just delete all of those, and we'll just start with this being blank. And we're not going to come over to our solution over here. And we're gonna create a new folder. They move this over so you could see what I'm doing. Ad new folder, and we're gonna call it models. You remember when I said we're going to be using MVV and Model View view model? They were not going that far in this project, but I just wanted to go ahead and start with the idea of model, because that's where we're gonna put our classes that we're going to use. They go in models. All right, so next we're going to add a new file in here. A new class. It wouldn't be ad class. You see that class? Then there is class down here. We give it the glass and name. We're going to give it the name vehicle model. Now what we're doing here is we are going to create a vehicle model. That's a class with all of its properties that it needs to describe the vehicle. And then we're gonna create a child model called Land Vehicle and we're going to create another child called Air Vehicle. But right now, we're just gonna start with vehicle model and we're going define some properties for that model. Now, there are all sorts of different properties we could apply to this, but we want to be make sure that were very generic and that it could apply to any vehicle at all. So we're going to start with string type variable, and it's gonna be called power source. So this could be a battery, gasoline or even your feet. If you're peddling a bicycle, could be the power source. Whatever the power sources, we're gonna create a few new ones height into height and with wait it, Max Passengers skint Max. Cargo weight, tough speed, string maker, string model. That's enough. I think I should also mention, in case I haven't already that c sharp is case sensitive. If I use a lower case here for power source, then I need to make sure that wherever I referenced this this string, I make sure to use and lower Case P. Otherwise it's not going to recognize it. So here we have a class of the class has some properties. When a class could teams a variable like this one, the variable is private. In other words, nobody else could see this variable except the class itself. If you want to make something available to the outside world so that anybody who calls upon this class could see it, you have to make it public. So I'm gonna go ahead and add this word public to all of these. Now, anybody who calls upon this class will see all of these different variables. If there's some that you want to just keep internal and you want to keep private than you don't have to make them public. So that's all we're going to do to define this bottle. Now we're going to create a new model. This model is going to inherit from vehicle bottle, right click new class. So we're gonna call this land. Gosh, kids, spell lead vehicle Lo. There we go. Land vehicle model. Now what we're going to do is we're going to inherit from vehicle model, which we just created in the way you do that is right after the name class land vehicle, mo. You put a colon and then you put vehicle. And just by doing that, this new class inherits everything that's public in its parent class. And now we're going to add a couple of new properties that just pertain to land vehicles. It wouldn't apply to other vehicles. For example, Num wheels. It's a land vehicle. It needs wheels. Dumb doors. All right. Now, if this were something like a bicycle, how many doors does the bicycle have? Zero. So numb doors would be zero, and that's it. That's all we're going to define for a land vehicle. Let's create one more go back over two bottles. Ad new class. We're gonna call it air vehicle, just like before. We're going to inherit from vehicle model, and now we're going to add a few properties that only apply to air vehicles. For example, no wings, no propellers. Max Altitude take off distance. No, um, pilots. There's all sorts of things we could define, but let's just let's just leave it at that. So no, it has numb wings, numb propellers, Max altitude. Take off distance and numb pilots. And because it inherits from vehicle model, it also has all of these. All right, don't forget to hit safe. We have two more models to create. The 1st 1 is very simple. It's called person model. And the only thing we have in personal model is is the name of the person. Of course, there's all sorts of things that we could include for air vehicles you needs important sometimes that you know, the person's wait, for example. There's all sorts of things we could put in person bottle. But right now, we're just gonna were interested in is the name all right? And then we're gonna create another model, a new class, and this one is gonna be called trip, because what do you do with a vehicle? You take it on a trip. So for the trip models, we're going to start with string start location followed by you guessed it string end location. The trip has to have a beginning and an end. Now, this is a special type of variable called date time. It's just simply a representation of a date and time called start time. All right, now, this is gonna be a little different. We're going to create a variable called person controller. This is the person that's controlling the car. If it's car, it would be a driver. If it's a plane, it would be a pilot. Could be two pilots, So then there'd be possibly two controllers. But in this case, we just have one controller and it's a person model. So this is variable. That's the type that we just got finished creating, which is the person bottle. It looks like this. So now we're gonna be using this person model here inside the trip. Okay? We also have a vehicle model called Vehicle. Lastly, we're going to have something that I just showed to you, which is a list, and the list is gonna be a type person. So it's a list of people person, and we're going to call that the passenger list. So now we have everything that we need in order to describe our trip. They have a start location on end location, have a start time. We don't know the end time because it depends on how long it takes to get there. We have the person controlling the vehicle we have the vehicle and we have all the passengers in the vehicle along with the driver. That's everything that we need in order to define this trip. Now there's one more thing that we need for our trip bottle. If you remember, this has to be constructed before we can use it, just like the ice cream cone did. So I'm gonna give the trip model a constructor. In other words, when we create the trip model, it's going to create the passenger list also. So let's start by doing it this way. This is how you do a constructor. You give it the same name is the class like a type just like that? And inside here we can put the constructor for our passenger list so that when the trip model is constructed, so will be the passenger list. If we didn't do this, then as soon as we tried to access the passenger list, we would get an error because it had not been constructed yet. So in here we'll just simply say passenger list equals new list. It's like that. And now this is constructing this list for us, and we're done in the next section. We're going to see how we're going to take all of these models and use them in our console application. 17. Project 2 Pt 3: and then we're going to take all of the classes that we just defined, and we're going to create our application using those classes. So the first thing that we're going to do is we're going to create a variable of type land vehicle model called My Car Notice. It's underlined in red. That's because it doesn't know what a land vehicle model is, and the reason is because they're using area up here doesn't include a link to that class that we created. So the easiest way is to right click on land vehicle and hit quick actions. Right click and hit quick actions. And there you'll see it says used seeing vehicle conta laptop models. Okay, so now anything that is contained within this folder models, it's going to know what that is because we've included vehicle council models and are using area. No one knows what it land vehicle model is. What we need to do is we need to run the constructor land vehicle model. My car equals new land vehicle model. Also, we have a car. Now what else we need, we need a person bottle driver, and that's can equal a new person bottle Okay, that's the driver. And now we can do a couple of passengers. Person model, Passenger one equals new, new personal, and then person model, passenger to equals new person model. Okay, so now we have a driver and and two passengers and a vehicle. What else do we need? We need a trip. So now let's create a trip model. We'll call it my trip. Pickles new my trip trip model. Okay, so those are all of the classes that we created, and now we have created objects that we need for our application a car or driver to passengers and a trip. So we've created these objects, but we haven't given any detail is to what we want these objects to contain within it. For example, the ice cream cone. If we had just walked in to the ice cream store and said to the server, I'd like an ice cream code. She can't make it because she doesn't know what you want on the ice cream cone. She doesn't know what the Waffle cone is and so forth. So we're gonna do something similar here. Let's start with the car by a car dot maker and that's gonna equal Toyota. I'm just making this up. It could be any card you like. My car dot model equals Corolla. And yes, I do have a Toyota Corolla. No driver dot name equals my name. Maybe we have passenger one dot name equals G. John Smith. Passenger to don't name Pickles. Jane Doe. Creative. All right, so now we have or car. We have our driver's name, our passenger names. Of course, there's out sorts of other detail that we could fill in for the car. As you know, we we gave it all of these. And we also gave it these as well. No wheels and outdoors. For this example, though I'm not going to be filling those in. We're just gonna fill in the thes two items, the name of the maker and the name of the model. But if you needed to, you could fill it in with all of the details that you need for your application. Okay. And now let's talk about the trip. My trip dot vehicle. Well, we have a vehicle right here. Is called my car for my trip, Doc. Controller. And we have one of those two. My trip dot start location. I'm gonna say Los Angeles, which is where I live. My trip. The end location. Houston, which is where I was born. And now we need our passengers. My trip dot passenger list dot Bad passenger one my trip, Dr Passenger List. I had passenger to you. See how this is familiar to what we what we did before, where we were adding to the list of imagers in the earlier example that I gave you. Now we're adding to the list of passengers from passing in a passenger to the So now our passenger list contains two passengers. Finally, we're going to do printing out to the console console dot Right? What do we want to write? Well, we have all sorts of information here now contained within our classes. Let's start with driver dot name and then remember said you could add strings together, So I'm gonna go ahead and add The string is taking. Uh and I had my car maker a space can dead my car dot model top model on a trip. My trip dot Start location to my trip 0.10 Location care. So what do we do wrong here that we got some underlines. I don't need this every day. All right, so let's just review what we've got here. Console right? Driver name is taking the maker model on a trip from start location to end location. Okay, so if we run this, let's go ahead and run it. Let's see what it says. Carry. Bear is taking the Toyota Corolla on a trip from Los Angeles to Houston. Do you see how that works? That's beautiful. So what it did was it went into this information that's stored within our classes that are objects, and it put it in line with the other text to print out the sentence. Carry Bear is taking the Toyota Corolla on a trip from Los Angeles. Houston. All right, one more step here. And that is what about our passengers. So we're gonna go ahead and use that for each loop that I showed you earlier. In order to print out the names of all the passengers, we're going to first create a string call passenger list. Strange. Right now I'm gonna do what's called Just you can either do like this to make it equal to just a empty string or what I like to do is to string dot empty, which is the same thing, but it looks nicer. Okay, Now for each person. P, I just caught p in my trip dot passenger list. Okay, So what this is going to do is it's gonna go through this loop for every person that's in the passenger list. We only have two people in the passenger list, so it's going to go through this loop two times at What is it going to do? It's gonna add the name of the person to this string here. Passenger list. String equals passenger list, string plus key dot name. Okay, so what is this gonna do? Passengers remember I said this equal to an empty string here, so it starts empty, and that's gonna add the first name and the next time through the loop, it's going to start with the name in there because we just added it and it's gonna add to that name. The second name, So is creating ongoing string of all the names right now. If I were to do this, it would be butting the names up next to each other and what I'd really rather like to have is one underneath each other. And so in C sharp, there's a way that you could get it to do just like you do on a keyboard where you hit, return or enter. The way you do that using C sharp is you go back, slash are back slash and and that's basically like a carriage return line feed. If you want to go back to the old days of the typewriter, that's where that comes from carriage return line feed. And so that is going to basically include that. So it's going to go down to the next line before it adds the next name. Okay, so now we've got this string passenger list String. What are we gonna do with that? We're gonna do another console, right? Console Don't. Right. And it's going to say these passengers are also going, and then I'm gonna put another carriage return line feed and then I'm going to say, plus passenger with a string. So now what this is going to do is it's going to send out to the console. These passengers are also going, and then it's gonna list out each of the passengers that we collected using this. This loop here. Okay, hopefully that big sense. So let's go ahead and run it. And now you can see it's a scary Bear is taking the Toyota Corolla on a trip from Los Angeles to Houston. We got a little problem there, but it says these passengers are also going. John Smith, Jane Doe that worked. The only problem we had was that we probably should put carriage return lightened feed. Here I feed. And now when we run it, here we go. Kerry bears taking it the Toyota Corolla on a trip from Los Angeles to Houston. These patches that are also going John Smith and Jane Doe. Okay, now you could put as many of these as you want. I'll just add I'm not going to go through adding more names, but let's just say I had the same two passengers again. It's just gonna keep on adding them. So now when I run, this is who, say, John Smith, Jane Doe, John Smith, Jane Doe. Because I added the same ones again, in reality, would do that you would have different passengers here. All right, Well, I hope you followed all of that. If not. Please go back and review it and try to understand classes and how classes are constructed using visual studio and C sharp. Because when we get into our main project, you're going to see a lot of these concepts there. And I wanted you to have a full understanding of it before we moved on. 18. Project 3 Intro: Well, we've actually made it to the main project of this course, the collection project, And I'm going to give you a little sneak peek of what this application is gonna look like when you're done. This project is going to be a little bit different than the other ones because I want you to create the project yourself the way you want it to look what you want it to be about. For me, this collection project was to show a collection of all the records that I've collected through the years. I have boxes and boxes of LP records that I've collected vinyl records, and I had no way to organize them. So I came up with this collection happen that would help me to organize all of the records in my collection. But for you, I want you to think about what it is that you collect. What's something that you have a lot of that you really enjoy. It could be a collection of model cars. It could be a collection of superhero figurines. Think of anything it is that you're like to collect, and even if you don't physically have it, it's something maybe that you're just interested in, for example, a collection of skateboards. Maybe you don't own all those skateboards, but you found some really great designs of skateboards that you enjoy. So let's take a look at the app that I created. I call it the Vinyl Vault. I'm just going to type it in here Vital vault, and this is what it looks like. You could see it is a scrolling list of vinyl records that I own. The doors difference, an airplane journey 10 dream dream and goes on and on. Now this is just a few albums that I own. Obviously there's a lot more, but this is just a example up at the top here, I can actually search for a record that I'm looking for. For example, rumors or exit. You can also click on any of these, and it will give you more information about each of these records. I don't have too much information here, but this could be expanded to something much bigger. It also gives you a picture of the album cover. You can actually come in here and change anything you want it. I could change the name of the artist if I wanted to. It was Jefferson Airplane's. I could do it. One if I decide I don't want it. But it goes away. And of course I can add a new one you can see has been added to the bottom right here. I can also change the name of my collection and so on. Also notice that when I close this app and I reopen it, my changes have been saved. So here's the new one, I just added, And here's the name that I changed. So that's basically it for this application. So you're going to create an application like this one, but for something you love to collect, so let's get started. 19. Project 3 Pt 1: I want to start by discussing some more details about MVV M Model View view model. This is a diagram that basically lays out how Model View and View mile are interconnected. The model is essentially your data. It can contain some business logic as well. But mostly it's about the classes of data. Just like the last project that we worked on. The view is basically your user interface. It's your layout, but your controls. It's a display of your data, and it allows the user to change and manipulate the data. The view model is a connector class. It connects the user interface to the data that is used for your application. It does this through binding properties that we will be going into a lot of detail on, and there's typically at least four different types of actions that occur with the data. And there's any acronym crowd which stands for create, read, update and delete so you can create new data. You can read existing data, you can update existing data or you can delete existing data. Well, with that, we're ready to start working on Project three, our collection app. I hope by now that you have decided what item you would like to show in your collection that we could use in this application. Let's get started. All right, let's begin by opening up a brand new project. Create a new project. If you remember from Project number one we are wanting to create a mobile application and selecting mobile app dot zaman forms. And we're going to give this a name. How you can name it, Whatever you want for the example that I gave you it Waas vinyl vault. But you can create whatever name you want And remember, you can always change this later. So it's not that important. I'll just be a little bit more generic. I'm just going to say my collection. You can call it something that pertains to whatever it is that your collecting create again . We're going to start with a blank application and we are going to select windows. You WP quick. Okay. All right, so this starts with everything all expanded, But once again, we're going to collapse everything so we can take a look at it. Here, here. Here's our four projects and you WP is highlighted. When we build this and run it is going to run as a you WP application. So go ahead and expand out to the shared code. Appear my collection or whatever it is that you called it. We're gonna add three folders. 1st 1 bottle. Have you next. Next you model? No. Space is just one word. Okay, so I m v v m Now, just as in our last project, we're going to start with the models. Always start with the data. It's a good idea to always start with the data. We're gonna go ahead and create a new class for me. I'm going to call this album model for you. It could be something more appropriate for whatever it is your collection. There it is a model. Now, at this point, I'm going to be adding some properties in here that we're going to define my album for your collection. You'll need to think about some of the properties that uniquely identify what it is that your collecting. So for me, I'm gonna be putting public string title, for example, artist location, because I'm storing them in a box close thumb. This just means the thumbnail image that is going to be appear for each of the album's and genre type of music that it ISS. So you'll recall that we made these properties public so that they would be visible to any point of your application where these properties are being called for security reasons. We're going to change how we're doing this a little bit, and we're going to have both a private version of these properties and a public person of these properties. So I'm going to create these same properties again. But this time I'm going to make them private. So I'm going to remove the words public on each one of these. And each one of these has to have a slightly different name because you can't name two items, the same things. I'm just gonna put on underscore in front of each one of these. You could also do a lower case letter or something like that. All right, so now we have a private version and we have a public version. So the purpose of the public version is basically just to give away to set the value of the private version and to get the value of the private version. But for other areas for your program not to be able to have direct access to the private versions and this all become clear as to why we're doing it this way. But this is required so that your user interface will automatically update anytime there's any changes to your data. So what we're gonna do to make that change is, is that we're going to do. It's calling a getter and a center, and it looks like this. Anything that happens inside of these braces is what happens when you are wanting to get the value of title. Anything that happens inside of these braces is what happens when you want to set the value of title. The command that we want to use in there to return the value of the private title is returned. Underscore Title. That's going to return this value right here in here. We want to set the value that title, so we're going to say title equals value, so from the rest of your program, you really won't see any difference. The only thing you'll be doing, it's setting the value of title or getting the value of title. Now, this is a lot of work to go through. So the geniuses over Microsoft have determined that they're going to give you a short cut so that you don't have to do all of this work. But I want you to see it this way because it's gonna come back a little bit later to where we're going to use this type of form in order to do getting and setting of values. But for right now, we're going to comment this out, and I'm going to show you how to do it with the short cut version that Microsoft has given us. I'm just going to copy all of this when I had cut, I'm just gonna paste it down here because we might use it a little bit later on paste to comment something else. If you look over here, you'll see that you can comment it out by using this. I got here with the little green lines and that will comment out every line that you don't want. I'm gonna add this back in because we don't have it here. Any work. Okay, so the shortcut is this to get rid of the semi colon and we just say get set and that's it So we just put that on each one of these. Get set. So this, believe it or not, because this is a shortcut. But it does the exact same thing that this does. It creates a private variable called Title, and it creates these getters and centers to set and get the value of that private variable when the public variable is called on. Okay, I hope that's not too confusing. It actually isn't going to be too visible to you throughout the rest of the program. But this is important because if we don't do it this way, then your user interface is not going to update correctly. The next thing that we're going to do is we're going to create a constructor for this class if you'll remember from before. What we do is inside of the class itself. Just right here. We're going to create constructor using the same name as the class. Okay, Now, what is this constructor going to do? Well, we've always had this is open closed parentheses here, and we've never really used this for anything but the purpose for having this so that you can pass in values. And so what we would like to do is be able to pass in values. They're going to go ahead and fill in all of these variables for us so rather than what we did in our last example where we have vehicle dot name, vehicle, the model vehicle dot we don't have to do with any of that. All we have to do is pass it in in the constructor. Had it's going to do all of that for us in the background. So here's how we do that. We pass in the These are called Parameters. We pass in the parameters like this string and you give it a name stream title. Strange artist separated by commas, string location, String thumb, String, John and then inside. Here we go ahead and assign those items that you're passing in to all of these. So title equals title. Where were you? Keep your Capitals and lower Case is correct. Artist equals artist location. People's Kershaw from and John Ross tickles. All right. I hope that you'll be able to follow along with this and do this using your collection. This is all set up for albums, but you have to do this for your collection. So just if you need to pause the video and come up with these connections here for all of the properties that define you're model just a summary were now passing in all of these values. When we construct this and setting of equal to these different properties, you don't have to do it this way. You could do it the way we did in project to where you just lying after lying just set them manually. But it's a lot easier to do it this way. Okay with that, we're done working on the model, and in the next module we are going to discuss the view. 20. Project 3 Pt 2: All right, Welcome back. We're now going to talk about the view. So what we're going to do, we could create a view manually, but we're going to go ahead and just use the one that's here, which says Main Page. What we want to do is you want to move this into the view folder instead of it being out here in the main folder, We'd like to have it inside the view folder, so I'm going to click on Main Page and I'm gonna cut and then come over to the view and I'm gonna go based. So that moves it into the view folder. Sometimes this could take a little time. The latest version of Zaman form seems to be much quicker, though. Okay, so now that that's in there, let's go ahead and open it up. Now, of course, this is just the welcome to Zerman forms that it gives us when you create the solution, we're not gonna be using that. So let's go ahead and just get rid of leave the stack layout, But let's get rid of everything in the stack way out. Okay, so now the first thing we want to do is this me? This section up here, you can add some things to it that will be for the entire page. So what we would like to do is go ahead and add a background color and the one that I used course you could use whatever color you like. I used Crimson, and we're also gonna go ahead and give this a title. This will be the title of this page album collection. You can display the title on the page if you like. Okay, so now with that, uh, let's go ahead and add a new label here, so we're going to start by giving this label and name, and to do that you go X colon name equals it'll be, uh, collection. Now for the text, this is going to actually be bound to our data. However, for right now, we're just going to give it some names. So I'm just gonna say collection name here, but eventually, just understand that we are going to be replacing this with a binding to actual data. Right now. It's just permanently set to collection. But if you remember, in my example, it said carries classic collection, I think is what it said. A couple of other things. I'm gonna go ahead and throw in. Here is the horizontal options center. Font size will make it medium and text color Gonna make it white. Now, of course, I want you to create whatever it is. It looks good for you. This is just what I have for my example. But make it whatever colors sizes you want. Uh, one of the thing. I'm going to go ahead and put a margin in here so that it's given a little bit of space around the labels. So let's run this road quick. It's not very interesting, but I just want you to see what it looks like. Go ahead and resize your window and this is what it looks like. Great. There's gonna be more involved in this page, obviously, but I'm going to stop here, and we're going to create the view model so that I can show you how the binding works for this label. 21. Project 3 Pt 3: Now, let's move on to the view model. Go ahead and close this down. You models were going to go and add new class. I'm going to call the class album View Bottle. You should give this The same name is your model, but with the extra word view added in here. So for me, it was album model. So I did album view model for you. It will be something else of your models. Okay? And here it is. Now, um, this looks basically just like our model at this point, but we're going to inherit from another class. This is a class that's provided by visual C sharp. It's called. I notify property changed. It doesn't know what that ISS. So what do we do? We right click quick action using system dot component model? No, I notified property changed. Still underlined, and I'll show you why here? Just a minute. But I notified Property change is a class that has a method in it that will update our user interface any time values within this model change. Without it, you would change the value of the data. But there'll be nothing out there to send notification to your user interface that anything had changed. So anybody looking at the user interface would just see the old value and wouldn't see the new updated value. So in C sharp, anytime you see an object like this one that has an eye on the beginning, that means interface. An interface requires you to include certain methods within your class and inherent from it , and the one that it requires is called raise property changed. And so we're gonna go ahead and add that in, and it's the same every time. So any time you create a view model, this exact same method will need to be in there. I'm just going to paste in the code and then we'll talk about it. Okay, that is the code. And we don't need to go into too much detail about how this works, because it's pretty much the same method no matter what. Any time you create a new view model for whatever application you're doing, it needs to inherit from, I notify property changed, and it needs to include these lines right here so that your user interface will be updated . So put that in there somewhere, and then we can continue on with the rest of the class. So what is the purpose of this few model? The purpose of this few model is to fill your user interface with data. And so what is the only piece of data that we currently have? It's the collection name. So we're going to go ahead and create a private variable first called collection name. Also, to make this a little bit easier to read, you can actually put the word private in front of it like this, and then we're gonna put the public version underneath it. Now, you'll remember from our out our album model that I originally showed you this type of set up here the private variable and in the public variable with to get in the set. So that's what we're going to be doing now for this collection name. So this was the private variable. Now we're gonna put the public variable followed with the braces, followed with the get followed with set. This one is going to return the value of collection name. And now for the set. What? We said collection name equals value. Now, why are we doing this rather than just the short cut version which I showed you up here. The reason is because when the value is set, we have something extra we need to dio and that's because we're going to use this notification in order to notify the user interface of this change. We're going to use this raise property changed that we just created. We're going to put it right here underneath the first line in the center, raise property changed and we're going to give it the name of the property that has changed Collection name. Okay, So essentially, what this is doing is any time that we set the value of collection name in our code somewhere it's going to yes, it's going to set the private value to the same value that you said it too. But in addition, it's also going to notify the user interface that there has been a change to the data and specifically a change to collection name. So what do we do with this? Let's now go back to our Zamel user interface that we created here just a minute ago, and here for the text instead of putting collection name here, which would just hard code this too. This word here. Collection, name. We're gonna put it like this, embraces binding, and then this needs to be the same. This has to match what you put here. So that's what that's what tells your user interface that this change is tied to here. Okay. And the next module, we're going to find out now how to use the model, the view and the view model that we have just created. 22. Project 3 Pt 4: Hey, welcome back. So we left off. We were talking about the model, view and view model that we've just created for this application. The first question we might have is how does this application know what Viewed open? Right now, we just have one view, the main page. But what if we had three or four other pages? How would you know which one toe open? Well, that is inside app dot Zamel dot CS. This is the very first code that is run when you launch your application because you could see it says Main page equals new main page. We can set main page equal to anything we want, but in this case, it's set to main page, which is the view that we've created right here. So let's take a look at the code behind for this animal that we just wrote. Not much there, but we're going to go ahead and we're going to do something. This is the constructor for Main Page. We're going to go ahead and add into the constructor the creation of our view model. First, we're gonna define it within the class itself album view, model, and I'm just gonna call it a V. Him for short doesn't know what it is. So as usual, we right click and say using. And now it knows what it ISS album view model a VM and then in the constructor we're going to construct E v m by saying a V M equals new Alba view model. So what happens now If I type in a v m dot Look at the very first thing on their collection name, so I'm gonna set collection name equal to carries collection. Not very exciting, but that's what I'm gonna call it. Carries collections. So the question I have for you is when I run this is it going to fill in carries collection into the value for that label and the answer is no. So why not? Well, you need one more line and this is what ties together. The source of the binding to the user interface is called Binding Context finding context and we want to set mind in context equal to this few models. So we've set this value in the view model, but we haven't told use interface that this is the view model that we want to use to bind everything. So we have to tell it that a VM And now when we run this, you will see it says Carries collection. Awesome. So at this point, we're going to go back to our view model and add some more detail there. Right now, we just have this one collection name. But if you recall from the demo that I showed you, there was also a list of albums list of objects in your collection. And so what we're going to do is we're going to create a list just like we've done before, so we're going to do public list. In my case, it's an album model, and I'm gonna call it album list. It doesn't know what album model is done this before. Here we go. You'll also recall that when I clicked on one of the album's Another View popped up showing details for that particular album that I clicked on. And so we're going to need to know which album was selected. So I'm gonna put public album model selected album. So now we have a list of our albums and we have the selected album, the one that we clicked on. I want to tell you that eventually, in the third stage of this project, we're going to be adding a database to the project, and that database will have the ability to store any album or any item in your collection that you add to it. But for now, we don't have any items added, and so would be good to go ahead and add some so that we can take a look at how the user interface shows those items. So I'm going to temporarily put that into the code, and when we get to the third stage of this, I'll be taking that out. So the main function that we need here, whether the data comes from a database or it comes from some area inside of your program, is a method called Get Elbows. In my case, in your case would get I don't forget collection item or whatever you wanna call it. I'm gonna go ahead and put that method in here, and the way I'm doing this is that we only want to add these items the first time that we run get albums because if we run it every time we run, get albums, then it's going to keep adding the same items over and over and over again. So we only want to look at the first time we're gonna be running this. And the way we do that is we say, if album list equals low, meaning it has not been constructed yet. Okay, that's what that means. If the album list equals no, that means that we have never run the constructor. And so if we have never on the constructor, then we know that we do need add all of these temporary IAM's into our list. So what do we do when we need to run? The constructor album list equals new list like that, and at this point we can now start adding albums. So I'm just going to do the 1st 1 for you, and then I'm going to copy in some or so that you can see how this is done so it gives you as you're typing in here. The intel a sense is what it's called, gives you all of the parameters that is expecting to see when you're creating this new album. The title is going to be volunteers. The artist is going to be Jefferson airplane the location. I will just say it's in box number one, the firm we're gonna leave blank for right now. That's the image. And the genera is rock. Okay, so that's the 1st 1 So I'm gonna add in a whole bunch more that I already have, because I'm not going to take the time to add all these in. But if you'd like to add some in for your collection, please pause the video and at those end, great. Take help. These pictures here because we don't have any pictures. Okay, there we go. So if album list equals no, run the constructor on the album list and then fill the album list with these items, you might notice that I did this a little bit differently than I did in project to absolutely repeated. This would get rid of that. I skipped a step and step by, Skipped. Was that in the project to that? We did. I actually created something called a little one equals. And then I added added it by saying Album one, okay. And so I've basically combined these two steps in tow one by just eliminating this whole portion altogether and just taking this new here and sticking it right into the ad function . That way, I don't have to give this a name, which I really don't care about. I'm just using that so that I can add it here. So why not just use this and add it straight in? So that's what I've done here. Good cheese that back. Okay. All right. So if the album is has not been constructed, go ahead and constructed and add all these two and then we don't really care about, uh what value is being returned here, so we're just going to return it. True. I haven't covered that variable type, but a bull is a Boolean would see the true or false. I'm going to introduce to you a new concept. Haven't disgusted up to this point. Hasn't been needed. And it will be needed as soon as we get to implementing a database. But I'm gonna go ahead at this point and introduce it to you. And that is the concept of a synchronous methods. Asynchronous methods basically mean that when you run the method, it's working through the code going through the method. It does not wait for that method to complete before continuing on with whatever code exists after calling that method. So it's like you can run the method, and then while it's working in the background, you could just forget about it, and you can continue on with the rest of your program and not have to wait for it. And so the way that we designate at a method is being a sacred is this by putting this word a sink here in front of it? A secret methods work by using threading, and I'm not gonna go into threading in any detail in this course, but I just want you to know that that's that is how a synchronous methods work is through something called threading or multi threading multi tasking. Those are some of the terms that are used, and so because come multi tasking would were returning of value from our method. This is the return value for the method. We need to put the word task in front of it, and, like I said, I'm not gonna go into too much detail as to why this is, but it needs to be there so that we can return some value now we don't really care what the return value is in our case, but in your code, you may care about what the return value is here. For our sake, we don't really care. But in order for this to not give us an error, we have to put task and Bull bulls. Boolean. I don't know. I have covered that type of variable. Yet it's a boolean, meaning it can either be either true or false. That's the only values that it could have Now. This isn't very important now, but it will become very important when we start working with databases in the third stage of this project and the next module, we're going to talk about the list view of our user interface and the list view is what's going to be displaying this information, This data on our user interface 23. Project 3 Pt 5: Okay, Welcome back. I wanted to bring back up the original demo that I showed you earlier so that I can remind you of how the app is going to look eventually. And since we're about to start talking about the list of you, I wanted to point out this area here where it's listing off all of the albums that we have in our collection. Now, I've gone ahead and I've added to the code. I've repeated those same albums over and over again just so I can illustrate the point and that the list view can be scrolled through like this. Since this is a Windows application we're looking at, I'm actually using the scroll wheel with my mouse. But on a phone, you would be swiping up and down in order to do this. So what we're going to be working on here is I'm going to show you how the list few works, and then we're gonna lay out a simple design like this one in the list view so that we can view our data. So let's start by going back to our main page Zamel file. And if you recall the only thing we have in here so far is just the label with the collection name. We're gonna go ahead and leave that in there because that is part of the page. And now we're going to add to it a list for, you know, if you bring in a list few from the toolbox. It looks like this inside here. We're going to put a view sell. Now, I want to tell you that this exact same format will be any time that you use of you sell. And so you pretty much just need to copy us each time that you use it, and it will be the same every time. So I know there's a lot of levels here. You've got list view, you've got item templates. You put data template, your view cell, and you've got content view, which is coming next. But you don't need to memorize this, really, because I know it looks like there's a lot of levels and a lot of typing. So you basically need to type this in just like this each time. And then within this area, where says content view, this is where the actual real design happens. And so we're just gonna start with a simplified view of what I showed in the demo. It's not gonna have any images. It's only gonna have a couple of labels. We're just gonna do the title that we're gonna do the artist and then you'll see how the list if you works just with a couple of items in it. So we're gonna go ahead and add in Here are stack layout inside here. We're going to go ahead and do a couple of labels, but here labels. So let's start by style. Izing this a little bit. Will just say font size is large and we'll make this one font size medium. We'll make the text color black on both of these. Let's go ahead and make this one bold. So that's font attributes and you have a couple of different options for fund after two. It's really choose bold, and we're gonna put vertical Options Center for both of these are stacked Lee. Our We're gonna put a few things there as well going to go and make this vertical options center. We're gonna make the background color white. They were gonna put a small margin on there just so space is at a little bit. Now let's take a look at this text section here. It's going to be very similar to what we did for this tech section. What we want to show here is we want to bind this to our view. Oh, and so we're gonna put in here biting and the name of the data property that we want to show here. So in this case title, I had this one. We wanted to be artist. Okay, so now one more thing we need to do is this item source. We're not going to designate this here, although we could, but we're not going to designate it here in the Zamel. We're going to do this in the code behind. So let's take a look at the code behind. Now. You see that were already setting the binding context equal to a VM that so the any of the elements on the page, like labels or entries, are all time to this. Have you are all tied to this view model? We need to do something similar for the list view. We also need to tell the list view to this view model. So you see, here we have our constructor. Now there are different events that happen when a pages either shown or it's removed or reloaded. And so we have different events that we could define, and we want to do this every time this page is shown, I'm just gonna paste it in here, called on appearing. So it's going to run this method any time This page appears. This method has a lot of extra little keywords in here, this one in particular. Override means that on appearing is already executing. But we want to add some additional code that's also willing to run when it's appearing. And so we're going to override the existing on appearing, and we're going to create a new one. So to do that, we first run the one that exists now that's called base dot on appearing. It means go ahead and run theon appearing that you have now defined for this window. But on top of that, we're going to also want to load our list view. So what? The way we do that is we're gonna add some code here that's gonna tie our list view to our view models. I want to jump back to the Zamel for just a minute and I want to give the list view name. We're going to call it album list view. And then I wouldn't come back over here so that now we can refer to that here album list. Have you know if you see this in red here like that? It's because we haven't actually saved all of our files and it doesn't know what this is. So this is a save. Also, click that and it will now go away so that we can refer to album listsview dot items. Sores equals a vm dot album list. So if we go back to our view model, you remember that we created this album list, and that's the album list that we populate with all of these. And now we're basically saying that we want the items source of the list view to be that list. That album list that we created well, we've now set the list fuse items source to album West, but there's nothing in the album must yet because we haven't run a v m dot get albums. If you recall going back to her view model when we run get albums. It's going to populate this with these six album names. If remember, you'll see that this is in a synchronous method meeting that is going to execute, and then it's going to continue on with the code without stopping. But in this case, we actually want to have it. Wait until it's finished loading the albums before we go ahead and assign the item source to it. So we're going to put the word a weight in front of it. And when we do that, it waits. Forget albums to complete before it sets the item source toe album list. You'll see this combination quite often where a method is gonna be a synchronous but a portion of that method You want to go ahead and make it wait for completion before continuing on. All right. So with that, let's run the program and see what happens. And there we have it Pretty simple. It's just the title and the artist, but you can see that the list view is working right. So in the next module, where we are going to add some or functionality and styling to our application 24. Project 3 Pt 6: Okay, let's continue on. If you'll recall where you left off with our application looking like this and now we're going to take it to the next level. What happens when you click on one of these items? Nothing that they happens. So we're going to put some functionality behind this so they when you click on it, something will happen. The first thing that we need to do is we need to go back to resemble right here, and we're going to add a little bit War detailed to where this says list view is actually quite a few things were going to be putting it here. But right now we're going to put item selected, and then it's his new event handler. So going to double click on that and it's gonna show his album Listsview Items selected Now , right click on that new event and say, Go to definition and it creates the definition for you right here in the code behind. So you'll notice here that the in the parameters there's one called Selected item changed Event Arts E. So inside of E, it's going to give us information about which item you click done so we're gonna go ahead and say if e dot selected item doesn't equal low. In other words, we want to make sure that you you got to this method by clicking on one of those items, and the selected item cannot be no meeting. The selected item does exist before we execute this code. It's a little bit of safety precaution just to make sure that we don't run into an error and cause our program to crash. So if the selected item exists, here's what we want to do. A V and selected album equals e dot selected item. So basically what we're doing is we're setting the selected album of our view model equal to whichever one you clicked on. Now there's an underlying here because it's saying that you cannot convert this type of object to this type of object. This is an album model. This is an object which could be an album model, but in our case it is an album model. So what we can do is we We could do what's called typecasting. In other words, we as programmers know that this is an album model, even if C Sharp doesn't know it So we're going to tell it explicitly that this is an album model, that we do that by typecasting it to an album model. This file here doesn't know what album model is that we right click quick action using. And now there we go. So once again, this is going to typecast this object to an album model. It's forcing it to be looked at by C Sharp as an album model, setting our view models selected album Equal Toe. So in this more simplified version of the application were simply going to display what it is that you clicked on. And so we have a way of doing that with Inzaman forms, and it's called display Alert, and it just pops up a little window with some text in it. So there's different types of Texas. You could have a title. You can have a message you have ah, but that you can click on and here's what you put in for the butter. So we're going to go ahead and specify those items. And so for the title, we're gonna put a vm dot selected album title for the message. We're gonna put a VM that's selected album dot artist, and they were just gonna put okay as the button. So let's go ahead and run this. Now, when we click on one, it pops up the display. Escaped journey title artist Good. Different one. So let's add some more functionality. Let's go back to our example and we're gonna add below this list of you A But so there is there button, we're just gonna put the letter end here. And the purpose of this button is so that we can edit the name of our collection. So we're gonna go ahead and give this but name. We're going to call it BT and name, and it's just gonna have a simple letter in on their We could do something else we could we could add an icon or something to the button so that it looks more visual. But for the sake of this demo, we're just gonna put the letter in, and we're going to go ahead and to find our size for this button as being 50 Heights 50 and with and we're going ahead, make the background color white. Now, of course, any time I'm drinking, any of these decisions here about how to lay things out, how to design them, what they're gonna look like. There's no reason that you have to follow exactly what I'm doing. If you want your application to look different. By all means, make it whatever color you want. Let's do some vertical options here of center horizontal options. Center text color Black for size 24 You don't necessarily have to make the fund a large, medium small. You could actually put the number of the fought size as well. Hand Let's go and make it bold, and we need to give it some sort of action when you click it. New event handler. So let's just see visually what this looks like. Here we go if we want this to look a little bit war, like the demo that I showed you that was actually a circle. So we're gonna go ahead and give this a border radius hideous equal. Teoh 25 and border color just make it the same color as the but so that would we wrote this . You can see that it's round. We click on it and doesn't do anything, but that's what we're going to do now. So here on your clicked event, Go ahead a right click and said, Go to definition and now we're going to fill in the definition. So what we would like to do when you click on this button is we would like it to pop up with a small window that has a feel for you to type in the new name for your collection. Now we could create our own view that gives us the ability to type in a new collection name . But that's an awful lot of work. So would be nice if there was just already a pop up out there that could just pop up and give you that option. Well, Zaman forms does not have that built in, however, this is a good time to introduce you. To get hub and get Hub is an open source website that allows developers to post all sorts of open source projects that they have created, and there are tons of them out there for zaman forms. And so we're going to take a look at that now and show you how to download 1/3 party plug in that will give you this capability to have a pop up prompt. So the way that you do that is you click on solution right click and go to manage Newgate packages for solution. Newgate is the built in way in visual studio for you to get all of these third party plug ins that have been developed for visual studio and in this case is Aaron forms. These are ones that are currently installed, but we're gonna go ahead and click, Browse, and we're going to go look for this one, which is a c r dot user dialogues. You can see it there on the top a cr dot user dialogues. It's also finding all sorts of other ones. That may be something that you're looking for, but in our case, we're looking for this a CR user dialogues. So if you click on that, it will show you that you can install this in your shared project as well as each of your other projects. And you do that by clicking on this top check box here, which will install it into all of your different projects. Notice It says that currently you don't have it installed and that this is the latest stable version you could see it keeps track and you can actually install any version of this that you like, But we'll do the latest stable version down below. It shows you a get your description and more information about this particular plug it. So let's go ahead and click Install. It's basically just tells you to what is about to do? Okay. Also, notice that over here it will give you some information about this particular plug in. If you want to find out more about this plug in you click. Here was his project. You are else project. You are ill who bring up the get hub and specifically to the page where this plug in exists . And these are all the files that are included. When you download it here will have a pretty good, thorough explanation of all of the elements that come with this. A CR user dialogues In this project, we're only gonna be using this one called prompt. But you can see it comes with quite a few other pretty useful dialogues, and it gives you explanations of how to use these dialogues. All right, so what are we gonna be doing? But this this is the code behind for after you click on but name. And this is where we're going to bring up the prompt That's going to ask you to rename your collection first. Let's type in user dialogues dot Instance that prompt que sink doesn't know what this is. So what's to our usual method? Okay, read the C At this point, it's wanting a new configuration of a propped, and you could tell it exactly how it ISS that you want this defined. But just for clarity, I'm gonna go ahead. I'm gonna put it here so that you can see what this looks like probed Could fig PC equals new prompt config pc dot title equals collection. Name pc dot message equals Choose a collection name and now you can include PC right here. So what's going to happen? It's gonna run this prompt. You're gonna fill in the field of the prompt, and then we need to get that result of whatever it is that you typed in. So to do that, we're gonna create a result equals user dialogue. Okay, um, I would like to point out that this user dialogue is actually any synchronous method. If you look into it. You would see that is the secret is that's why says away Doble here. So in order to take advantage of that, we're gonna go ahead and put this a sink here, and then we're gonna go ahead and put for wait here. Remember, I said you'd find a lot of combination of a sink overweight, and now we want to find his result. Okay, and result dot text doesn't equal string dot empty. This is going to check to make sure that you didn't cancel their having a choice of either cancel or okay if you pressed, okay. And the field you didn't leave blank, you actually filled it in with a value. Then that is where we want to update your user interface with the new collection name that we don't have to access user interface directly. We can simply change the value within our view model. And because of the way we've written our view model, the user interface will automatically update on its own. So here's how it ISS Results is an object which contains first would button you clicked on and also the value that you filled into the field. And so Therefore, we can get that value here. Result that text and that will be set to the collection name of the View model, which will automatically update user interface. So let's give it a run and see what happens. All right, so it's pressed our button, it comes up with the prompt collection name. Choose a collection name. We're going to change. This carries rock collection. Click OK. And as you can see, it changes to Carrie's rock collection, and that is how the binding works. In addition, we still have these display alerts popping up when we click on here, and that is as far as we're going to take this first version of our collection. In the next version, we're gonna add the picture, and we're gonna add that when you quick on one of these instead of it just bringing up this display alert, it's gonna bring up a second view that gives the detail for the item that you clicked on 25. Project 3 Pt 7: Okay. Welcome back. We covered a lot of ground in the last section of this course. We want to take what we did in the last section, and we're going to give more detail on the main list view. And then we're going to create a second page that when you click on an item in the list view, it will display details about the item that you selected. I want to go ahead and start by bringing in some images. I mentioned that there's several different ways that you could display images. We know that you can do it by giving it a whirl of an image that's online somewhere the second way, which I haven't discussed with you yet, is too actually bringing in as a resource into your application. And since for right now we are using these items here coded into the application, gonna go ahead and use this to show you how you can bring in image. Resource is not typically imagery sources you would use for your data like this. You would use it for an image of a button or images that are used throughout your application. Those are the types of resource is that you would normally one as part of your application , things that don't change. First of all, you have to add these resource is to each project platform that you are supporting. So right now we're doing you WP. But you would also need to add those exact same imagery sources to IOS and Android if you were supporting those. So the way you do that is right click. It's a add existing item, and when you do that, it's going to bring up no for you to choose those items. I am going to get them out of this folder here. You can see I have album one through Album seven and these Air JPEG files, and they're very small. If you bring in large megabytes size images into your app, your APP is going to get very large. So you want to make sure to bring in on Leah's large as a images you need to satisfy your purposes. We're going to bring in all seven of these. There they go now for you. WP they go into this main area, and if you were to do it into IOS, it would go into resource is I suppose. Let's just go ahead and do it there, too, as long as we're at it there. And lungs were talking about it. Let's look at Android. Android would be in resource is draw a ble and you can place them there. There they are. Okay, So now, no matter what platform we run on, you're gonna have those images there. So I originally kept these blank because we didn't have any images. But I'm gonna go ahead and add them back in now. And by the magic of hitting the pause button. There they are. So we have now all of our albums with our album names included for the thumb parameter. Okay, Next, we want to actually display this as part of our list view. So we're going to go over to the View main page right now. We just have title an artist. So we're going to lay things out using the grid that we learned about earlier. Someone to go ahead and I'm gonna add in grid. Okay, I'm gonna put this Stackley out that we already have inside that grid, and I'm gonna go ahead and and in the column definitions for that grid. I'm tasting these end because I'm not going to go through this again because we covered it already. GRID COLUMN definitions The only thing I'm going to do different this time is I'm actually not going to give a road definition because we're only going to have one row. And so there's no reason to even define road definitions because there's only a single bro . So now in this stack layout, I have to tell it which column I want this to be in, and I'm gonna say grid dot column equals one, and I'm also going to include another stack layout that's going to contain our image, and I'm gonna put that into grid columns. Zero. Go ahead, give that a vertical option of center. Okay, And in there, I'm going to go ahead and put an image. There it is, and the image. I'm going to have it with a width request of 100 and I'm going to tell it that I wanted to do what's called aspect equal aspect fit. So this will do a couple different options that could fill it. It can fitted or an aspect fill it. And if you're familiar with those types of designations for images. It's just how it's going to fit into this area that I'm defining. If it's going to stretch, it isn't going to just do the best. It can still keep the length and height accurate to the original image. So we're gonna pick aspect, fit, okay, and now we'll do one of the things you could say. Horizontal options start because we wanted to be all the way on the left. All right for the source. We're going to do a binding if you remember. So this is now going to be bound to. From is, if you remember in our model. I have a thumb here, and that's what we're passing in the name of the the name of the of the image That's the thumbs. So now we have Grid column zero is the image. Great column. One is the title and the artist, and then that we have 1/3 stack play out, and this stack layout is going to go in Grid column, too. Good column to for co ops and center. This one is going to be the label on the label is gonna be text equal, and the binding is going to be locations. This is where it shows which box I have. The album. It it will say this is fun size small, not that important. Text color. Black and horizontal Horizontal Options center. Okay, so let's review column zero is gonna have our image column One is gonna have the title in the artist and column two is going to have the locations now. We've already defined everything we need to define in our view model from the last time. So at this point, we're actually ready to run this and see what it looks like. Well, look at that. It's looking pretty good. One of the things that we could dio is that we can specify our background color here for the grid because, as you saw, it was just kind of pasted over the background color for the entire form. And we wanted to actually have different color for where the list views at. So now we've specified that when we rerun this, it should have the same thing, but with a white background. There we go. Very nice. Very, very nice. So now when we click on here, it's still giving us just this display alert coming up, but our next step is going to be creating a second page that will come up when we click on one of the items. 26. Project 3 Pt 8: OK, now it's time to add our second page. Go ahead and close this. And here's our view folder. And as you know, the View folder only currently has one page, the main page, but we're going to add a new page. It's a sort of avenue class. We're going to go to add new item, and by doing that we can click on Zerman forms and look for a content page. You want to fick the content page? That does not say C sharp. If you pick the one that says C sharp, it means there's not gonna be an example. There's only gonna be C sharp code, and you're gonna have to write your interface and C sharp. But since we're using Zamel, just click content page and we're gonna give it a name. The name I'm gonna give it is, Don't forget you're supposed to be naming this for your project. Not mind, but for my project, I'm going to name it album info page. Once it clicks that, I think you'll recognize what it brings up. It's a brand new welcome. Desire informs Page, okay, and so we're going to be designing this page. But first before we do that, let's go ahead and show how we can click on selected item from the list view and haven't opened up our brand new album info page. Just to be clear, I'll go ahead and I'll just take it here. Album info page. And then when we make that connection, click on the selected item. It's gonna open up something that says Album Info Page. And to do that, we're going to go back over to our main page sample and you'll recall that for the list of you we had an item selected event that we had created called album list view items selected . So if we go to the definition of that, of course this is where before we were displaying our display alert, but we're no longer going to be doing that. We're gonna bring up this second page, and so we basically just need to get rid of this one line because we're not going to be using that anymore. And instead we're going to bring up the second page, and we do that by using the push motile commit Push. Motile means that you're going to bring up a brand new page and it's going to be motile. Meaning you have to close it before you can get back to the original page that you are on. All right, so we do that by saying wait navigation dot Push motile a sink. New album, Info page. Okay, now we put this await here, but we'd never put the a sink here, so we need to add that. So now, after we have selected, it assigns it to a V m dot selected album. We're not really using that yet, but we will be right now, we're just going to go ahead and open up this new page that we've created. So let's go ahead two. Run that and see what happens. Okay? And I'm gonna click on one of these and it brings up album info page, which is exactly what we expected. We've given ourselves no way of getting back to the original page, but we'll be doing that here in just a minute. So now that we know that that works, we want to go to album info page, and we're gonna go to the code behind and in the constructor of the code behind, we are going to change how this constructor works. We would like to pass in the view model so that we can then display information about the album that was selected. So to do that first, we're going to create a local copy of that by saying How bum few model A V M. And then here are Constructor. We're gonna pass in album. A few models underscore a VM, and then we're gonna set a VM equal to underscore a Veum. This is so that now we can access this throughout the rest of our code behind. Now you'll notice that this is underlined in red. Let's see what the message says. Inconsistent accessibility Perimeter type album View Model is less accessible than the Method album info page. So what that means is that the album view model, if we go take a look at it, is that it does not say public in front of this class and because it doesn't say public, that means it's private. And if it's private, it means that we can't access it. How he changes to public. We're getting this message that says another inconsistent accessibility. That album model is less accessible than Alba list, so this kind of goes down the line. We haven't added public store classes this entire time, so album model go to definition. This also needs to be public that we should be. Go back to the album info page and nothing's in reds. Okay, good. We're gonna go ahead and ad the local album model as well. No models. He'll be. And here we go a l b. And then we're gonna set a l B equal to a V m the selected album And our last change here is to set the binding context. So we're gonna come over here and set the binding context next equal to a obese which is are selected album. So now that we have the binding context in place, any element that we place on the view, we'll be able to be bound to the contents of this selected album. So let's take a look at the Zamel. We're gonna go ahead and inter quite a few things on here. We'll start with this the stack layout and I'm going to add in our first label, and it's going to say inter album information, enter album information, so we're going to add some in trees and entry is basically a text field that you get inter value into or it can display a value. So in tree and we're gonna give each one of these names country titles and then we're going to tie it to the binding for title. Also we're gonna do is called placeholder and placeholder is basically what's going to be in that field when it's blank. Kind of just let you know that you need to enter a title when there's no title there already. Text color is going to be black, but the placeholder color is gonna be gray and the background color is going to be white. And that's it. So I'm gonna copy this. This we're going to do basically the same thing for all of these fields that we have about five more so but there is gonna be bound to something different. So this one is going to be artist. This one's gonna be Chandra could be thumb, and this one is gonna be location. Maybe I did one too many. Okay, we also have to change the name here. All right. Title artist genre, some locations. Okay. One of the thing that we need to add. We need to go back to our main page here, and you'll see how this is un underlined. Read the reasons because we haven't passed in the argument that we have requested be placed in there the album view, model parameters. So we're gonna go ahead and put in a V in there. And with that, we should be able to run this thing. Okay, lets try clicking on once. There it is. Skate journey Rock album three J pic bucks too. We're still not given in any way to get back. All I could do is press stop. All right? That was a good first step. Now what else is missing there? What about the image? So let's go back to you. The for page. We're gonna add an image right here, and I'm going toe teach you something new. This is how you can tie one element on the screen to another element on the screen. Let me tell you what I mean. We have this field down here that says thumb had in there is going to be a value that is the name of the file or that you are l for the file that we want to display. So what we would like to be able to do is take this value that is passed in from the binding and used that as the source of our image. And here's how we do that. We can actually set a binding context on an actual item on the page instead of for the entire page and the binding context. It's going to be entry. Um, this tells us now that the binding context of the image is going to be tied to this element on the page instead of directly to our bottle. Now this still doesn't specify the source, but now that we have tied it to this binding context, we could specify the source as being binding calf equal text. Now what does that mean? Well, you could tie this binding to anything that's defined here. Could be text color. Could be placeholder color. Could be background color. Could be anything that you see listed here, but we want it to be bound to this text. So whatever is coming in here, that's what we want to be here. So let's give it a try. Look here, but it works. Problem three. No, if I were to change this, let's say the album, too. Look, what it does is problem one three. So it's tied to whatever I have here. What I have here doesn't make any sense. It just goes away because it doesn't know what it is. The next module, we're going to be completing this album info page. Then we will be adding some additional functionality to the main page. 27. Project 3 Pt 9: Okay, So the next thing that we're going to do now is going to add the buttons that go at the bottom of the screen so that we can either cancel or accept our changes inside this main area. This content page dot content, which means that all the contents of the page have to fall between here and here. Inside there. That can Onley be one main layout. So it could be one grid. It could be one Stackley out, but there can only be one. So if we want to put more than one, we have to put them within the main layout. So this is one Stackley out, and we're going to add a second Stackley up. But in order to do that, we have to first put just this main stack layout here and put this from all the way down in the bottom so that now this original stack layout is within this other stack layoffs that we just created. So now we can put as many elements as we want inside this stack layup. So here's the one we just did. And now we're going to create a new stack layout underneath there and this one is going to be orientation horizontal. This is where our buttons are going to reside and we're going to just go ahead. Add a little padding. Heading is kind of like a margin, except it's on the outside of the area. In other words, it measures the area between this Stackley out on this deck layout. It's going to leave a space. Both margins and padding this can be defined is just a single number like 10 which will put unequal padding or margin around every side left top right and bottom. But if we want, we can actually specify left top right and bottom individually, and that's what we're going to do here. It always starts with the left. So left is 20 top zero right is 20. Bottom is zero. So that's how you read that. So within here we're going to add a button. Then the button is going to be called E. T. And canceled text of the button is going to say canceled, obviously, height. 40. We're going to give it a border radius equal to Tim horizontal options. We're going to do Phil and expand vertical options center background. Wait, font size 14 and then we're gonna go ahead and give it the clicked event called, but cancel clicked, and then that finishes that. So we're gonna do another button. Since this is a horizontal layout, it's gonna be to the right of the cancel button. This is gonna be the button. Okay? It's going to say okay, everything else is the same here we're going to say, But no Ke clicked instead of by canceled. So even though I specified this event handler here, I didn't actually generated by doing right. Quick, go to definition. Now it's created. And then the same thing for this one go to definition. And now it's created. So there's nothing in here, but they have been created. So now when we run this on, there it is. And so when we click on one of these, you can see Now we have these. Okay, cancel buttons down here. Okay. So let's go ahead and fill one of these ends. Let's go here, and we're going to do it. Cancel. So, basically, if you do a cancel, it just means that you're going to close this form and go back to the original Made for main page. So to do that, we first of all need to change this into a sink that we do and await navigation. Stop pop motile a sink. So to get into here we did a push motility sink to get out of here We do a pop motile basic All right, For the okay, we are also going to do the exact same thing. But before we do that, we're also going to do something else. We're going to update our album with the new information. We're going to do that by creating something that doesn't exist yet in our view model called Update Albums that we passed to it. Hey L b a vm update album When we passed to it A l b. And it's responsible for updating the album that is selected within our view model. So let's go create that. It's good overview model. We all right now we just have this get albums. But now underneath there were going to create a new method called Update Hobbles And it looks like this public date I'm gonna pass to it. An album model. Okay, I'll be okay. It's pretty simple. All the doesn't say selected album dot title equals a l B DOT title. So we're passing in a L B, which contains all of our new information that we've typed in or changed from the album info page. And now we're going to set our selected album's title equal to whatever we changed it to, all right, and then we don't really care about the return value, so we're just going to say Return True and that's our update album. So now when we go back over to the info page, you'll see that it's no longer it Read it now understands what Avian Done update album is. All right. One last thing we need to do in order to make this to wear it. When it returns, it refreshes the interface. And to do that, we're going to go back over two main page, and we're gonna create method in here called Refresh List of You. And here's what it's gonna do. We first want to set the album the list view items source equal to no no, we're then going. Teoh get our albums again. Were they going to set our album list? View items source equal to a V M dot album list just like it was before. So we clear the item source, we re get the albums, and then we set the source back to a V a Malval list, and then we're going to return the truth. Okay, Now, we would like to be able to wait on this, get albums to finish before continuing on with setting this item source again. So we're going to use the A sink and it weak, and now it will wait. Forget albums to complete before moving on and resetting the item source toe album list. One more thing I need to do is I need to put this task here. So where do we do this? We can call this pre fresh list view in the on appearing because when you return from this other window, the album info page, it's going to run this on appearing again. So therefore, we don't need to have these two lines here anymore because they're already built in to refresh list of you. So we're going to replace this with refresh list few. And now it's gonna run this refresh list few every time this form appears, which will refresh all of the data appearing on our page. So now let's give it a run. Okay? And there it is. Click one of the album's and let's say we change this from box to two bucks for okay, now, as you can see, it says Box for on. I can also go and change the type of music. And then when we go back in there, you'll see it says E g M. Now what happens if we want to add a new album Toe our list? Currently, we don't have a way to do that. So let's go ahead and add a button to do that on the main page, and it's gonna be down here next to this button. And so what I'm gonna do is I'm going to places button inside of a horizontal stack layout , and then I'm gonna copy this button and give it the name ad. It would just do a plus sign. So now there's gonna be a round button that has a plus sign on it. It will change this to add clicked right click and city go to definition, and this is where we're gonna place our code behind before doing the ad that really We're going to be using the exact same album info page that we used when we selected an item from our list of albums. The only difference is is it's no longer going to pass in the album information because there isn't any album. Information is going to be new. So in order to do that, we're going to change our constructor just a little bit. We're going to add a second parameter, and the second Cramer is going to be a bull that says Is is new and they will go ahead and create a local copy of that. Here and here we will see it is NU equals. It is new. Okay, so some things are a little bit different here. We are not going to be setting out Alba equal to avian dot selected album because it's brand new. There is no selected album, so we need to actually check for the value of this new that we're passing in in order to determine what we need to do here. Instead of sitting album equal to selected album, I'm going to say album is equal to a new album, and I am just going to pass in blanks for everything. And then I'm going to say, If is new, do nothing. I don't want you to do anything. But if it's not new, then we're going to set these a L B. The title equals a VM, the selected album title and so forth. And then we set all the rest of them, which I'm just going to paste in here to save time. So now if it's new, it's gonna keep all of these fields empty. But if it's not new, it's going to go ahead and fill these fields in with the album view model that you passed in. And then we no longer need this anymore. And we set the binding context equal to a L B. And one more thing we need to change is when we clip the okay button. We did a Navy M dot update album. Well, it's new. You're not updating. So once again, we need to check. This is new else. So what are we gonna do here instead? Well, we're going to do something that doesn't exist yet, but a vm dot insert album a l b. So since this doesn't exist yet, which shows up in red, But we will go back to our view model again and then right underneath update album. We're gonna create insert album, but we don't need any of these. All we need is album list. Don't add. He'll be. So now we need to go back to our main page code behind where we had this ad clicked and you'll see up here in her items selected that now album info is giving us an error because we changed this constructor. So now in, in addition to the view model, we have to pass in this 1,000,000,000 is new. Well, this is when we select on item from the list, so that would be false. It's not new. But now we're gonna copy this, and we're going to paste it into here. And we're going to change this to true. And this is red because we don't have the a sink there. All right, so with that, I think we're ready to hit. Run. Okay, so now we have two buttons down here. We have the original for the name change of the collection. And then we've got the plus button here. Click. Plus, it comes in and has ah not quite right, but it has all of our fields listed here, and they're blank. What's not right is the placeholder text. We didn't change when we copied these. They all say Title. So let's just go back and change that record. So, yeah, we kept the placeholders title. He achieves that artist. Every girl Here we go. So now let's suppose that I were to hell this in and I'll put my daughters song on here. He's a pop singer, and here is her picture Location is bucks free click. OK, so now if we look down at the bottom of the list there it is awesome. In the next module, we will be adding a few more things to this, namely the search field that we had at the top and the ability to delete albums from the list. 28. Project 3 Pt 10: All right. So next I wanted to cover the part of this application where we right click on one of these items and then are able to select elite. Now, I have both of these side by side here because I wanted to demonstrate to you that this is the you WP app that we have been running it over to the right here. I have an iPhone emulator that's running the iPhone version of the same app. Now, the reason that I have this up here is because, you know, when you're on a phone, you can't right click on anything. It's not like being on a computer. So you're using your finger to swipe up, to swipe down, and you can also swipe left. And so if you swipe left, you'll see that this is where the delete will show up when you're using a phone. So I just wanted to point that out to you so you could see where, actually what? We're programming in this portion of the project. All right, so let me go ahead and minimize this. Canceled that and let's talk about how he could do this. So what I'm going to do is we're gonna add an additional section within our list view right under view cell, an interview sell here. We're going to add what's called view cell context actions. And so we're gonna do that by going of you sell dot context actions like this. And this is where we can place the menu items that we want to show up for as context action on our list view. So we do that by typing menu item text equal delete, and then we tell this is going to be the quick action. This is what will happen when we click delete. So we're gonna call that on delete Quit. Now we're going to add another item here, which I'm gonna have to explain to you what this is. And basically, when it goes to this on delete clicked method, we're going to pass to it parameter. That's going to identify which item was clicked on because you have to tell it which item in the list it clicked on so that you delete the right one. So to do that, we type in command parameter equals binding dot And what that means is that we're basically sending information about the one that you clicked on as a command perimeter when we click on delete and it goes to the on daily clicked method Kitty. So one more thing we want to do here is because the lead is a destructive type operation. We want to bring a little bit of war attention to maybe a cautious attention to it and by doing is destructive. True, this will cause the delete to be in probably in red, to kind of bring attention to the Maybe you should be careful before clicking it because it's a destructive operation. Okay, so with that, let's go to the code behind. So in here, you'll see it says Objects sender and event our eggs. So what are we going to do with that? We're going to be doing some or typecasting if you remember. We've done this before where we've taken one of these parameters and we've type casted it because as a program where we know what we expect to see here, we know this is coming from a menu item, and we know that the parameter that we passed is oven album model type. So those are the two type castings were going to do so. The 1st 1 we're gonna do is menu item. Just call it him. I equals and you item Sender. So we're typecasting this object to be a menu item because it came from and menu item and then down here, we're going to say album model, they'll be equals again. Typecasting two album model in i dot command parameters. So this is saying that we have sent in a menu item and the command parameter for that menu item is an album model, and it happens to be the album model that we clicked on. So with that, we're now going to basically do a verification that the user actually does want to delete this album before just goes and does it. So we're going to create a display alert, and it's going to say, delete album question Mark. And then it's going to give the name of the album just so you'll remember which one you actually click done. And then it's gonna give you two options, yes or no? Now this is an away dubel function, as we've seen before someone. But there were no wait there and then to use that away. I have to put us a sink here and now we have the results here. So if it's true, then yes, we're going to delete the album. If it's not that were not so. If result equals true, then we're going to delete it. How do we delete it? We go a vm dot delete album Beef Sweet album. We haven't created that hit. So you remember we're doing the crowd. We did the create we did retrieve. We did the update, and now we're going to do the delete. So this is over in your view model. So go over to your view models and then just under here, we're going to create a new method called Delete Album. We're gonna pass into it an album model, and then we're going to say album list. Remove a l B. Return. True. Okay. And that's all there is to that. So now when we go back over to our main page, Sammo, you'll see that it now knows what delete album, Miss. One of the things we want to do after this is we want to. What do we want to do? We want to refresh our list for you. Remember? We wrote that method earlier. And this is a weight herbal, so we're gonna put a weight on there. Three fresh view. So after we delete the album, it's gonna refresher interface. Okay, that's it. So let's run it. Here we go. So we right click it says Delete comes up says delete album rumors, you say Yes, but it's gone. All right, so that's it for that function. The last function we have. And it's not our difficult one is thesis er church field at the top. If you'll recall we have a search feel it was type. It reduces our list. Two items that match this filter. So let's take a look of how to do that. First, we're gonna go back to our have you main page view and above our list view. But below our collection name. We're going to add a search bar, and we're going to give it the name search bar, and I'm gonna put some margin information here just to kind of give it some space. Right, So this is left top right bottom. Okay. The placeholder we wanted to say search name, dot, dot, dot Hey, we're gonna do it. The height request of 40 A with request of 2 50 Horizontal options center and expand. And now here is our event. Texts changed new even Hendler text changed, and that's the in divers search bar. So let's take a look at this code behind Tex changed. Now this is going to be pretty simple, but it does requires something new that you haven't seen before. So here we have a text change event. Heart. So inside this e, we have information about the search. So we're going to stay here. Yeah, string dot is no or empty, so basically, if the string doesn't exist or it's an m d string. Okay, so what this says here is we're going to check to see if this new text value that you typed in is no are empty. And if it is, then we just wanted to show the entire list, not filtered. Album list view dot items source. It's just going to equal a vm dot album worst, but if there is something typed in there, then this is what we want to do. Album. Listsview dot items Source equals a B about album with Now here's the new thing that we want to do, and this is kind of a way where you can filter your results from this album list everything that's in the album. But we only want certain things that qualify in this album most. And so we're going to say dot where I'm gonna go and just type this in here and then I'll explain what it means. All right, this is looks very confusing because I've combined a few things together here, but I'm going to read it to you in plain English, and then you'll understand what it means. So we're going to set the album with views. Items source. Our list views Item a source toothy album list where the lower case of the title contains the lower case of whatever it is you typed into that search field. So in other words, it's It's not case sensitive, so it doesn't matter whether you use upper case or lower case. It's just checking to see if what you typed into this search field is contained somewhere within the title of this item in the list. And so if there if you type in a D and there are four items in the list that all have a dean it somewhere that you're going to get just the items that have a D as you keep typing . D Oh, now what? You're only going to get the items that have d o in it. So I hope that isn't too difficult to understand. But this is called Link, and it's it's It's a method of using something like a query like you would use in a database, which we haven't gone through yet, But it's something like using Aquarian a database, but it's using it on data structures like a list. And that's it. That is our search filter. So know when we run this. All right, here's our search field. If I take E. Yes, you can see that starting to narrow down, See? And there we go. It's just escape so it works, All right, so that is everything that we have for the second section of Project number three in the next section, we're going to be adding a database to this, and that will be the final part of this Project three. And then we will have a complete application 29. Project 3 Pt 11: Well, we have had quite a journey getting to this point in Project three for this course, and we only have one section left. Let me demonstrate something for you. If I were to click on this album and change the box number two bucks 10 and click OK, you'll see it changes a two box 10. But if I closed the application and relaunch it, you're going to notice that it has returned back to bucks to again. It didn't save our information in the same way. If I come in and let's say I create a brand new album, you'll see it down at the bottom. But as soon as I close this application and reopen it, you'll see that it is no longer there. This is because all of the data that we have entered into this application just exists within the application, and as soon as we close the application, the new information goes away. The only reason we have any albums listed here it all is because we have temporarily entered that information for demonstration purposes into our application. But normally that information wouldn't be there, and we would start with a blank list of albums every time we launch the application, and that's certainly know what we want. We want whatever dated that you enter into this application to be there the next time you open it. So to do that, we need a database. A database is a place where it stores all the data that it needs for all the information that will be shown within your out. So that's what we're going to do in this section to get started. The first thing we're going to do is we're going to load in another third party product using the new get manager, Go to the browse tab and enter s Q L No, I t e dash any T dash P C l. And then you'll see a list of different third party products. But the one we're interested in is this one here on the top sequel Light Net PCL. Click on there. You'll see all of your projects. Go ahead and click the top check box and hit install okay to accept and we're done. Great. Go ahead and close the new get manager and the next thing we're going to do is we're gonna create a new folder underneath the shared project. Go ahead and create. I had a new folder and the fuller We're gonna name data. This is where we're going to have our database. So the goal of what we're going to do now is we're going to take this model that we've created here, and instead of it just being stored with in the application, we're going to create a table that looks just like this, but is within a database. Every mobile phone has a built in database and it could be used by applications that are running on that phone. And so there's a simple method that we can follow in order to create this exact same table in the database that we can use within our application. So to start, let's create a new class. We're gonna call this class vinyl vote database your application. You can call it something that sounds like it would go with your application. All right. And there it ISS. Let's go ahead to make this class public so that we can access it throughout the rest of our application. So we're going to start by creating our database. So it's a type sequel. Light a sink connection and we're gonna call it database like this. We're gonna go ahead and put on here the directive to make it read only. And what that does is it only allows us to assign to this variable value within the constructor of this class, and then it could never be assigned to or cleared again. Its read only at that point. So let's go ahead and create a constructor. Another constructor. We're going to pass the parameter devi path, which is going to be the location of our database. And now within the constructor, we're going to go ahead in the same two database. Do thank you TV path. Next, we're going to execute the method within this database called Create Table A sink. So we're gonna be creating a table within this database, and the table is gonna be of the exact same makeup as our model, and this is going to cause it to wait until it is finished creating. And we're getting an error here. And the error says an album model must not be a non abstract type with a public parameter list. Constructor. Okay, what does that mean? Well, if we go to album model. You'll remember that we created a constructor. That constructor is passing in all of these parameters that error messages telling us that we need to provide a constructor that doesn't have any parameters. Well, thankfully, in C sharp, you can provide more than one constructor. This constructor requires that you pass in these parameters, but we're going to create another constructor that has no parameters. And it's going to solely be used by the database in order to create a database table that looks just like the album model. So this constructor isn't going to do anything, and we're not going to pass anything in, but it needs to be there so that the database can use it to build itself. And now you'll see that the red has gone away and we have now created a table in a database of the exact same model as our album. So just like we created within our view model, we had delete, insert, update and get in the same manner. We're going to have the same types of methods but in our database. So let's go ahead and add these methods into the database, and I'm gonna go ahead and just type this in here. And then I'll explain what it means after I've got a Type 10. So let's go ahead and talk about this 1st 1 Get albums a sick so very much like what we did with the model. We have a get albums a sink, and the return value is going to be a list of album model now, because this is an asynchronous method, we need to return this list of album models inside the task enclosure. So within here we make a call to the to the database to return all of the albums to us. - Okay , so what this says is that when you called, get albums a sink, it's going to go out to the database, go to the table album, and it's going to return the entire list as the return value. It's going to pass it through this return value here. The reason This isn't red his I don't believe it knows what task is need to go ahead and do the using force threading, and now it does what task us next we're going to do the insert album, which is very similar. So for the insert album we're going to be passing to it the album model that we want to insert, and then it's going to execute this by inserting it into the database. And I'm just returning an injured to designate that the album was inserted. Next, we're gonna do the delete and for the delete function we actually have to send to it. Query language that's going to describe the function that we want to execute. And so I'm gonna take that in here. - So let me explain what this method is doing. Execute scaler. A sink is going to execute upon this table in the database. This query query is a way of retrieving or setting information within a table, or sometimes a combination of tables. In this case, we just have one table album model. And so we're instructing it, using this query language to delete everything from album model, where the title is equal to whatever you pass in from this album model. So if the name of your album is the Doors and it's going to go search for the doors within this table and it's going to delete everything on the table that has the name the doors in a similar fashion. We're going to create the update command. I'm just gonna go ahead and just copy this one. Ive been typing it all again and change this to update album again, passing in the album again, doing the execute scaler a sink. But now I'm going to put in here update album model. And I'm just going to paste in the rest of this because it will be quicker than having to type it all out. And then I'll explain what I typed. Update Abu Model set artist equal to some things set thumb equal to some things, that genre equal to something. Instead, Location eagle to something where title equals something you need to provide for parameters in this order. So the first primer will be artists than thumb than genre than location and finally title. So I'm gonna go ahead and paste those in a swell. Here we go. And so now I'm providing all of the parameters that will be replacing these question marks that you see throughout the query. And so, believe it or not, that's everything we need to do to establish our database 30. Project 3 Pt 12: Okay, so now let's see what we need to do in order to include this database into the rest of her application. First, we need to make it available to our application. So we're going to do that by going to the app dot Zamel CS, which you'll recall from the very beginning of this application where we designate that main page is the starting page for the APP. So down at the bottom, underneath this last method here, we're going to add both a private and a public version of the database. So we're going to start with the word static, which is kind of like read only Final all database database. And they were going to create a public version of this public static vinyl vault database database, and we're going to go ahead and set up the getter and setter for this. So here is the getter here is the center. So inside of our getter, we're first going to need to get the directory where we're going to store the data base. So string, we're gonna call it String Documents directory. You can call it whatever you want. Just the nets. Just the name that I picked environment get folder path environment, the special folder, local application data. So what this is going to do is it's going to go out to the to the phones, Local Application data folder, and it's going to set this string equal to whatever location that IHS. So for every phone, it might be a different place. But this is where we're going to designate that this phone is going to store the data base . So with that, we're now going to create the database. Girls do Final vault database system dot io dot half don't combined documents Directory. Vinyl Vault s Q l light dot db three. So let me explain what this is doing. System dot io dot path Thought combined is a function that will combine these two strings together into a full designated file path. So once this is done, it's gonna look very similar to something like you would see on computer like C colon backslash my directory slash vinyl vault as q a light dot tv three. And that's just a method that they provided for you in order to make this combination easy . Lastly, we're going to go ahead and return our new database. Actually, you'll remember that we are making this database read only. In other words, we can't set anything here. We can only read back the database so we don't actually need this center. We only need the getter. Next, we're gonna be making some changes to our view model to incorporate these new, create, retrieve, update and delete functions that we created for our database. So go to the album view model and remind ourselves that we had these functions get album, update, album, delete album, insert album and clear albums. Not sure we're actually using this one yet, but I went ahead and added that in there. So we're gonna be converting these to our new function. And in order to do that, we're going to go ahead and make thes a synchronous so they can interface correctly with our database methods. Remember I said that it wasn't important when we first created thes, but it was going to be important once we and implemented the database, and that's what we're gonna do now. So for each one of these, I'm gonna go ahead and just change it to a sink and then include the task in there as well . - And now we're gonna make another change. So the first thing we're gonna do is we're gonna start with the get albums and right you were gonna put album list equals. Wait ap dot database, which is where we just created get albums a sink, and that's it. So now we're just saying that we want our album list of our view model set to whatever is returned from our database. Let's move on to update album next, an update album instead of doing this is no simply going to run a weight, uh, dot database. I got a date album, and then you pass a l b to it. And it's just that simple same thing with the delete Instead of doing this, we now do wait, ap got data beasts dot delete problem search. You guessed it. Wait. Half the database died. Concert. They'll be. This actually gets easier once you have a database in place. And even though we haven't talked about this method, I do have this in here and I don't even think I created this in the database because I didn't think we were using it. But would it go ahead and just fill that at it out anyway. Clear albums. So this function actually clears, clears the database. That's what this is responsible for, that we haven't created it yet, so we could go back to our database and create that. So we'll create public you sink task here. Albums. Clear albums is very similar to this. Actually, just go ahead and copy all of this and paste it here. It's the same as this one, except we don't care what the title is. We're just clearing all albums, so we don't even want to pass this in. It just looks like this. With that, I think we're ready to give this a try. Let's see what happens so we don't have anything listed here, and I'm going to show you the reason why. But I wanted you to be able to see how there's nothing listed here and why that is, because it's kind of important lesson to learn. If we go back to our view and you'll see right here that it's calling, get albums, notice that it's underlined in green and the reason is because it's now telling us that this is a way Dubel we have now made this in a synchronous method and because of that, uh, this is no way doble Now what that means is that because this is a synchronous, aren't program just kept on going even though this wasn't complete yet executed this? But then it continued to run additional code that came after it without waiting for this to complete yet because it didn't complete. Yet it never did show that we got the album's So let's now add Oh, wait onto here like that before we run this, Let's see if we have any other ones that are underlined. There's one there termed Let's check in our other location here. There's one there and there's one there. I think that should cover it. So let's go ahead and run this now to see what we have. All right, there they are, Uh, so let's go ahead and check to see if this is actually working now. So let's say for this first album I'm gonna change it to Box 10 and click. OK, says Box 10. Let's close this and let's reopen it there it ISS box 10. Let's try deleting volunteers. Delete. Yes, close it are you open it and it's gone. So as you can see, the database has stored the information. And when we re launch the application, the database information is retrieved, and all the information that we changed remains changed when we realize that the application right, and with that, that brings us to the end of project number three. 31. IOS and Android: well, we've gotten quite a lot done in this class. Before I let you go, I wanted to touch a little bit on where to go from now. As I said, this class was intended to be a springboard so that you would be able to take what you've learned here and really expand your knowledge and your experience and be able to create very robust rich applications. First of all, I wanted to talk a little bit about moving forward in designing for IOS and Android. Now, as I've stated earlier, everything that we've done can be applied to IOS and Android as well. And it's just a matter of changing the application from you. D you WP is your start up app to, let's say, for example, IOS by setting set startup project as IOS. You'll also see this when you go up here. Now, once you set this, you'll see over to the left here that you have some options. The main ones that you need to be concerned with, or either iPhone or iPhone simulator iPhone simulator means that you're going to be launching a simulator on your computer desktop. If you have said iPhone, it means that you have an actual physical device that you have connected via USB cable to your system, and when you execute, it will be launched on to the actual physical device. Now, in order for this to work, you have a couple of options. First, you can actually develop using visual studio for Mac. It happened tohave the Mac here, and you can see here that we're running visual studio community on the Mac. You can see that the set up looks very similar to the one that we've been looking at in Windows. The only thing you won't be able to do here is your you WP application. But you can do both IOS and Android clicking down. You'll see that we have same data model view view model folders that we had just like we had in the other environment. So that's your one option. You also have to have X code installed, as we discussed at the very first part of this course. Your other option is instead of using visual studio on the Mac environment, you can continue using visual studio on your windows environment. But in order to compile for IOS, you do actually have to have a Mac computer tethered to your Windows computer through the network. And the way this works is using the Mac agent here. See how it says paired to Mac P and A. Mac 16 70. So if we click on here, you'll see that I have via this I p address the Mac that I just showed you linked to this visual studio that's running on Windows. Well, it would disconnect that so that you could see that it will show you that the Mac is there . And once you've selected that, you can hit connect, and it will go through a series of connection steps in order to tether the two computers together. So when you are set up to do IOS and you hit to launch your program, it's the Mac that's actually doing the compiling of your application. And then it's sending back to your Windows computer a simulator that pops up showing your program running. So to show you that will do iPhone iPhone simulator and then you could see here, says iPhone eight IOS. There's quite a few different options that you have here already of different iPhones that you can launch as a simulator. So let's just keep it. IPhone eight IOS It will click launch So now it's opening up the Iowa simulator. It looked very much like and iPhone screen. It will launch your application and there it is. And this works just like it would have with you you WP again, as I showed you before, that's how you delete looks a little bit different. This is the way IOS conveys the same sort of design that you saw with you. WP this is what it looks like. One of us. Okay, so now let's talk about Android. Android is a little bit simpler to work with. You don't have to have any other device connected like a Mac or anything like that. You can do all of the work right here within visual studio. However, I will say that if you're planning on running an android emulator, your computer has toe have certain capabilities that will allow it to run in a timely, speedy fashion. Otherwise, if you don't have those capabilities, the emulator runs so slow that I guarantee you're not gonna want to use it if your computer doesn't have those capabilities. My recommendation to you is to use an actual android device and connected to your PC using a USB cable. So in order to test, if you have those capabilities, go to your start video and type in M s info 32 and you'll see Pop up this system information. Open that up, Look down at the bottom and you'll see where it says hyper V via monitor extensions. So you see, here I have four different ones. They need to all say yes, the one that here that doesn't say yes is thieve virtual ization enabled in firmware that should buy us. If you're familiar with your bias of your computer, it might be possible for you to go into the by us and set this equal to enabled. I have checked my bayous and for some reason, I don't have that capability on this computer. So I am unable to use the virtual ization with my firmware. So for me, I will not be running the emulator because it would be way too slow. Fortunately, I have an android device and I can connect it up and run my test that way. Now, if you are using a real device whether be an iPhone or an android, you need to set up your phone in developer mode. You're going to have to check to see how you need to set up your iPhone or your android for developed remote. The phone manufacturer may have a different process. You need to follow in order to set your device and to develop promote. And also that process changes over time. So make sure you check the model that you have and the IOS version or android version, that you're running on that device and run the proper procedure to set the device into develop promote. Once it developed for mode, you're visual studio will acknowledge the device is connected. I'm going to demonstrate how that works. I'm gonna go ahead and set my start up project to the android notice I get this. Meshes says you can greatly improve android emulator experience by enabling hyper V. Well, not me, because I can't do that for my system. And now I'm gonna go ahead and connect my android device. I haven't HTC 10 and I'm going to connect it to the computer through a USB port. There's a couple of boxes that I'm clicking on on the screen of my my phone and you'll see now that it pops up here is his HTC as an option for me to run my application. And when I click running this application, it will actually launch on the injury device. Similarly, if you have IOS set up on your system as we talked about earlier, we could set this as start up project Higher West. Now, right now, you'll see that it's set to iPhone, and it's not giving me any remote device available. It only shows the simulators, but I would have to choose iPhone simulator to use those. But I'm going to go ahead and connect up my iPhone. Now I need to connect that knocked to my PC but to the tethered Mac that I have connected to my system through the Mac agent. So I'm connecting up the device now and now you can see that it says Panavision development iPhone. This is the company that I work for, and this is their phones. So that's why it says Panavision development iPhone that I have connected up now. Lastly, I want to discuss that you at some point after working with Zaman forms for some time are going to feel as though you have a robust and capable application that you actually want to make available for others to use. You have a couple of options as faras. How to publish your app first. If you're working for a company and the application is only intended to be used by employees of the company, it is not necessary to place your application onto one of the APP stores. Google play store for Android or the APP store for IOS. Instead, there is a method that you can use called mobile device management that allows you to distribute your application to a limited number of employees on what they call ad hoc basis . You can find out more about that by going to one of the mobile device management platforms that are out there. The one that I use is called Muraki dot com. Iraqi is a network company that produces all sorts of hardware for networking, but they also have a mobile device management system or M D M. They're MDM allows you to upload your APs whether before iPhone or android, and it allows you also to enroll iPhones and android phones onto the system so that any time that there is a new version of your application, it is automatically deployed to those phones. Now, if you're interested in distributing your application through the APP store for IOS or Google, play store for Android, then have some recommendations as to the process. In order to get your app ready for distribution and submitting at four distributions, I'm gonna make this document available to you. I have set up a git repository on Get Hub, where all of the source code for all of the examples are that we have done during this class as well as any other documents that you might need in order to move forward. And this one here shows you some things that you need to do in order to distribute your applications, either through the APP stores or through a mobile device management for IOS, you actually have to become an apple developer by joining the Apple Developer program. It's $99 a year, and once you have joined that, you will be able to go on to developer dot apple dot com. Set up what's called provisioning profiles and certificates that will allow you to distribute your happy either through the APP store or through a mobile device management system. Similarly, Android has Google play store that the links that I provided here for APP Store and Google play store our documents that are provided for Zaman developers by Microsoft. In order to show you how you need to get your applications ready for deployment and the process of deploying them, I recommend that you read these documents and understand all of the rules and processes involved in publishing or applications to one of the stores. 32. Final Words: all right, So this concludes all of the content for this course, and I certainly hope that you have enjoyed learning Zaman forms and cross platform mobile application development. We've had such a great time working through all of the projects and learning all of these great new skills that you're going to put into practice. And I can't wait to see what you're going to do with this knowledge in the future. Going forward, I have some recommendations for you after taking this class you might feel is, though, you need to know Maura about Visual Studio and C. Sharp and I fully recommend that you take a thorough course that discusses all of the details of how to develop software in C Sharp. It's not going to talk about xamarin or mobile application development, but it's going to teach you everything you need to know about C Sharp to allow you to create very detailed and thorough business logic into your mobile applications. Also, another area that I feel that would be really good for you to learn is sequel. With any mobile application, comes a fairly detailed database system that you need to set up and with that is going to come a lot of stored procedures and sequel queries that will allow you to retrieve and set and manipulate data as needed by your application sequel. Structured query language is the method of doing that. We touched on it just slightly in this course, but there is so much involved and so much that you need to know in order for you to do very powerful queries that would be much easier to do using sequel than to try to do that in your seat sharp coat. So it's essential that you have a good understanding of how to work with relational databases with tables with stored procedures with joining tables and filtering out your data results. So I'm gonna recommend that you take a look at these two sets of tutorials that I have found on YouTube. Again. This is going to be listed in the document that I put on my git repository, but I wanted you to see it here so that you could know to take a look for that in the document. Both of these air taught by the same instructor, and I've taken quite a few of his courses on YouTube, and they're very, very helpful and very well structured. Very details. This 1st 1 was C sharp. Like I said, he's a great instructor. But for this particular Siri's, he seemed to have a really bad mike. I promise you that even though he has this bad microphone, it's worth listening to because he's a great instructor and he he covers everything from beginning to end and the same thing with his sequel Tutorial. There, you'll find well over 100 modules but both C sharp and 100 modules on sequel, explaining every nuance of the languages. Well, that's my final word for you, this course, and I really hope that you've enjoyed learning. I've enjoyed teaching you, I think take a look in the future for additional courses that I will be offering Thank you and good luck in the future