Xamarin GUI Walk-through

Let’s talk about where we find things in our Xamarin Studio. The first thing I’m gonna to talk about is this bar right at the top here. So this white bar which may look familiar to users of Mac, because you have it in iTunes and the App store and things, it’s a bar that tells you where your errors are located and various messages. So, if I double click it, it’s not happening right now. But when you have an error it will show up here at the top and if you double click it, it will take you to the error, and that’s very useful. On the right hand side of the bar, this arrow if I click it, it tells me there’s an update for Xamarin. At the moment, I’m not going to update but just know that occasionally you might have to update to a beta channel or in extreme cases an alpha channel. Now this is because sometimes there are errors in Xamarin and it doesn’t quite compile right in a way that either Android or iOS accepts. So, might have to update to the latest beta, or alpha, just remember that. Ok, If we look at the left hand side of the screen we have this big play button, and the play button allows us to run whatever currently selected project we have in a device or simulator. The two ways of running it are either in debug mode or release, and the difference between the two is debug is where we want to be as developers because debug allows us to receive messages from the device when things go wrong. Release mode will not send us messages, so we won’t be able to see if something goes wrong all we see is the app crash on the phone. In the next box, when we click it down, I’ve got various iOS simulators set up here, and you can go into Xcode and set up more iOS simulators but these are the standard ones that Xcode should install for you. If you plug in an iPhone it will show up here in the iOS devices list, and you can run it on your iPhone or iPod or iPad. I don’t think you can run it in your trial edition of Xamarin though, but correct me if I’m wrong. Just below this panel, we have the solution, which I went through before with you in the previous lecture. I didn’t address UI tests because we are not going to look at that in this tutorial course. You can look it up on Xamarin’s website, but at the moment it’s not really within the realm of our project. The large window in the middle here is where we do the majority of our work. So if I come over here to NoteTaker.iOS and I go to AppDelegate.cs and I double click it, it will open the middle here and show me a whole bunch of code, and of course I can type things in here. Here you’ll notice the first feature of Xamarin, and that’s if I have a piece of code that’s wrong that it disagrees with it will put a red line underneath it. That tells me that there’s an error and that will be something I have to fix. So, I’m just going to delete that will save it back and if we look over here on the right hand side, we have a properties panel and this properties panel is related to this file we’ve just opened. So you can change the build action compile resource, image resource and generally you won’t have to look at this side panel except in extreme situations when you add things to your project. For example, in the resources images folder it will automatically set it as an image asset for you. So, there’s no need to worry about that kind of thing. So, we’re just gonna close that, and I’m going to close AppDelegate. Right, so if we look down the side here, I’m just gonna take you into another part of the GUI, which is a graphical editor, here we have Main.storyboard. So if you double click that, that’s gonna open up, and it usually takes a little while to get going, but it’s a graphical editor that allows you to place various elements on the screen in iOS. You do not have this sort of graphical editor in the Android version of Xamarin. They have a different way of doing things, and we will cover that when we get to Android. Once that’s loading if you come over here, we have a section called toolbox on the right. In Toolbox we have a whole bunch of things that we can add to our graphical user interface. I’m not going to go with what they are, but they are all here. To put them into our app, we simply have to click and hold and drag them across and there they are and to delete them, select this grey bar at the bottom, and press Command+Backspace and that will get rid of it. At the top of the main screen, you can click to see what it will look like on various devices. So on iPhone 6 it will look like this. On a iPhone 6 Plus it will look like this. The items that are already laid it there for you, you can tap them once and if you come over to properties, you have three tabs, Widget, Layout, and events. Ignore Events because we will do that ourselves. Widget lets you setup your item that you have on screen, so I can give it a name, a class, if we scroll down, you can give it an alignment relative to the screen, there are many things we can do, Layout, tells it exactly where it should be in the screen, and you can align it, to the center of the whole screen, both vertically and horizontally. Now, for this course, I am not going to do this tutorial, I’m not going to use storyboards, at all. We’re going to do everything programmatically, and the reason we are going to do everything programmatically is for your learning experience. So in the future if you want to use a different platform, that’s not Xamarin, that might be PhoneGap or Intel SDK, whatever it’s called now. So for this course, we’re not going to use storyboards. If we come to the top we have our menu, and if we click on the first one Xamarin Studio we can check for updates, see what version we have, and change our preferences, etc. If you click on preferences, we find the screen that allows you to set various settings through out the app through out Xamarin, rather. The most important of which is this one down here, SDK locations and Xamarin needs to know where these are for both Apple and Android. The Apple one will search the default location. So, when you install Xcode this is what it searches for, and it will also search for Xamarin.iOS which is installed with Xamarin Studio if you just install it the default way. Android, 2it needs to find three things the Android SDK, The Java SDK, and the Android NDK. These are usually located in the standard folders. If you can’t find them, if you come into here and there are red X’s go unto the Xamarin website or unto the forums and request help from them because they will take you through it. That pretty much covers, what we need to talk about with the GUI, and that brings me on to section 3, where we are going to plan our app before writing any code. So I look forward to seeing you then.