 Hi guys. My name is Sohail and I worked quite a few time for Xamarin, I mean in Xamarin. So, yeah, today we are here to talk about something on Xamarin. Today morning I just read one fun fact. Actually, I wasn't able to find the source of the fact, but so I don't know it's real or not. But I just read it that out of 7.1 billion population in the world, 5 billion people owns phone. And 3.1 billion people actually use toothbrush. That's just a fun fact. I mean, so what's the point? The point is that for developers, how important is it to get in mobile development? So, yeah, with that motivation, let's get started with Xamarin. Okay, I'm facing some issue with here, this here, okay, let it be. So, yeah, what we'll do here is we'll create one Xamarin app just from StartFresh. And the app will basically do nothing. It'll be just a sample app will consist of two, maybe two screens. One will have layout of login page with two text box, username and password. Something wrong with this? So, yeah, one page will have username and password and the other will just show welcome page. Okay, okay, that's fine. Okay, okay, let's go dive into Xamarin first. And then we'll speak about something on what controls we have. So, to start with, when you want to install Xamarin, you have to go to xamarin.com slash download and you will get the installer and you can install Xamarin, that's it. With Visual Studio, it is already now integrated. So if you have latest version of Visual Studio 2015, then it should be already there. So, when you have Visual Studio, you open the Visual Studio and you click New Project, okay. So here you have Android, iOS and cross-platform. We'll see about what is Android and iOS in a bit while. First, let's see cross-platform. Cross-platform is basically consisting both Android and iOS. And, okay, just let's start first, Xamarin forms portable. I'll name this app as Xamarin, okay, I need to put this in, Xamarin Meetup. And it will create few projects, one will be for Android, one would be for iOS, one would be the common project. And yeah, one for Windows phone also. My machine is a bit slow, okay, but we can wait. Yeah, so what's the basic difference between the Xamarin forms and Xamarin Android and Xamarin iOS is that when Xamarin came up, there was Xamarin iOS and Xamarin Android. You can create your Android project in Xamarin Android and iOS project in Xamarin iOS. And you can share your business logic on with a common code, which can be class library or any other project. You can call services or do whatever. So that business logic you can have common, but the UI logic, whatever you can have in Android separate and iOS separate. But with introduction of Xamarin forms, which was I guess in 2014, mid-2014, what they done is they said that, why you need to create two separate UI also. Just create one UI and we'll use it in Android and iOS both. So with Xamarin form, what happens? You create even the UI also on the same common code. And when it is compiled, let's say it is compiled for Android, then it will be converted into native Android UI. When it is compiled for iOS, it will be converted into native iOS UI. So yeah, that's a different project. So Xamarin Android, iOS, Windows, Windows Phone. And this is the common project which I was talking about. What we'll do is we'll create two new pages, two new screens. So let's just do that first and then we'll see. So what I'll create is add new item and here in cross-platform, I see Xamarin forms page, XML page. I'll just name it as login page, okay, add. Now what happens is there are two files created. One is login page, XML and one is login page, CS, which is code behind file, a normal WPF, I mean most of you guys have used the WPF from .NET background. So that's how it is, Xamarin is your declaration of UI and that's the code behind file is CS. So that's the default UI. Let me get rid of this. And what I'm going to do is we'll create a simple page. Instead of typing everything, I'll just have snippet here, code snippet. So what this code snippet says is that basically there are two text box, this entry. Entry represents the text box. So there are two text box. One named as username, entry and another password entry. And there's one button. So we have defined this UI and two labels just to say. And name of the button is login page, text is login. And this is the event when it's clicked called on login. So now, I mean there's no, you cannot see the preview of this UI because this UI is just a representation of how it will, what the page will consist. Because this is not in Android, this is not in iOS, this is in common project. So there's no direct, I mean direct representation of how the UI will look. So when it will be compiled, it will be in Android or in iOS, whatever. So let's quickly define this onclick event in code behind file. So here, let me define on login, bear with me. Standard way in C sharp, no different. Same event like you do in C sharp. So on this login, what we want to say, I mean let's say we want to do the user validation. We want to check if there's anything in this text box. So username entry, username entry dot text, let's say I want to check this. If, sorry, string dot is null or empty, username dot text. So you just want to validate it. And else, so we can do either way, not empty or empty, whichever. I prefer not empty first. So here we want to, we can add our logic to authenticate and call the function which will do API call to your server and check the username, password and whatever. And in else, let's say you want to just show the popup, enter username. So alert, display alert, title alert, message is enter username. And cancel is actually the string which will be on a button of that alert, sorry. And here, okay, let's just display one more. Okay, yeah good. So what I did that, let's display here also that authenticated. Okay, simple stuff. That's it. And let's see what it does. Let's execute this. So if you see our page is in this project, which is the common project. It's not the Android project. Android project is this one. Now one thing I need to do is here in app.cs, I have to specify which will be the first page of my UI. Okay, sorry. Is it okay now? Okay, sorry about that. Here in app.cs, we have to define what is our first page of the UI, the starting page. And this is just a dummy page which I mentioned here. It's by default in template. So here I will just pass new login page. So this would be my starting page of the app. And if you see this project, I'm going to execute this project, not the common project. Why? Because this is the actual project which will generate the Android executable. And this Android project will refer this common project Xamarin.mitup, which is this portable class library. And then it will refer Xamarin.forms. So Xamarin.form will smartly handle all the events and UI stuff from common project. So, okay, let's go ahead and just execute this and see what happens. Okay. Extra. So I can type in course. Hello. Okay, better. Thank you, Michael. So yeah, let's quickly execute this and see if we are getting any error. Hopefully not. Okay. Till it's compiling, let me share you something else. So iOS is also the same. Currently I am only going to show you the Android project because I'm running on Windows and iOS needs Mac, which you guys know. So my friends will show you iOS, but I will be only showing you Android. But the same code, same project will work same in iOS. Of course with its native UI. So, okay, it's taking too long. And yeah. So what I'm going to do here is instead of displaying alert, what we'll create, we'll create one more page and we'll redirect to that page. After the login is success. I mean, after we do order thing. So here you can authenticate and then do your stuff. So instead of displaying alert, we'll do that. But first let's see how it appears on. Okay. So here it is. This is my Android simulator. And yeah. So sure enough what we defined here was two text box, one for username, one for password and one button. And surprisingly for me, this emulator is behaving very slow. So, okay, what we did here was we just added validation. And it will just show the pop. Okay, this is, if you execute, I always use the device, the hardware device to execute. I do not use simulators. So this is maybe my first time I'm using simulator. Generally, I use hardware. But the, I mean, I'm getting it slow response is nothing related to Xamarin. Xamarin works very fine. Just regarding the simulator and the memory which I have assigned to this simulator. So yeah. So when we enter this, okay, password is still showing. We'll look at it. Okay, authenticate it. So that's how simple it is, right? But let's modify it a bit. So password was showing the characters we entered because it's not defined as password field. So let's define it as is password. And then what else? Let's create one more page. So we'll add one more page. Similarly, add new item. And we'll call this as welcome page, let's say. And we'll redirect to this page after when the authentication is succeeded. We are not doing any authentication, but let's assume. And here, let's just say welcome to Xamarin Meetup. Okay, and here instead of display, what we'll do is one more thing. The page, the type of page which we are defining here login page is content page. So if you see on Xamarin forms, there are different type of pages available in Xamarin. One is content page, which is normal page, which content page contains different type of UI elements like buttons and images and whatever. Master detail page is what it defines. Navigation page is a container. When you want to navigate, when you have multiple screens in your app, navigation is a container which contains the different pages and enables navigation between those pages. You want to push new page, pop, whatever. So the pages which we define, those two pages are content page and we do not have any navigation page yet. So let's go ahead and add navigation page. So how to do that is here in starting page, instead of giving login page as my starting page, I will say new navigation page. So navigation page would be my root page or the first page. And first page to navigation page would be the login page. So this is just a container which will contain login page as the first page. And when we are like fine to go to the next page, here we will say navigation.push. So we will add a new screen and this is welcome page. So new welcome page. So what it will do, it will push a new page which will be the welcome page. Let's see if it works. It's starting. Password is now the password fill because we added that. And let's click login. So it opens the new page saying welcome to Xamarin. And if you want to like pass the data from one fill to another, you can just define the like in welcome page. On welcome page you can have like in constructor, you can have username. Let's say if you want to process some data or something, string username or whatever. And when you define from login page, here you can pass the data like username, entry dot text whatever and then you can process it. So this is just a basic how you start with Xamarin forms. So that's what I said that there are two methods you can code in Xamarin. One is go by Xamarin, Android and Xamarin iOS. And the next other one is the Xamarin forms. So these are the controls which are available in Xamarin forms. Standard controls officially available by Xamarin. But there are a few other controls which are developed by third party tool and there are a lot of like you want to do something, templates, you want to use templates or you are doing reporting tool, you want some charts or something like that. So there are a lot of third party controls which you can use. So these are like the normal basic controls which are available in Xamarin forms. But what if you want to use something native, some native control which is maybe in just in iOS or in Android or you want to do something native. Because whatever we did here was all in common project. So if you want to do some, want to have some native control or something, then what comes the next talk. So my friend will continue from here and he will show you how to do that. So yeah, that's it. We'll do QoNs session later after the band. So if you have any queries just keep it in mind and you can ask later. Okay, that's it.