Join Mark Smith for an in-depth discussion in this video Exercise 2: Create the Phoneword application, part of Introduction to Xamarin.Forms.
- [Instructor] So what I want to do now, is I want to start building a phone word application. And the idea of this program is to simply take in phone word, and what that means is a phone number that contains word. So, for example, 1-855-XAMARIN. And the idea is we want to be able to translate that into a full phone number, and then eventually be able to make a phone call based off of that number. So I would like to start building the UI and the basic functionality.
Now to build this user interface, I don't want to build it with xaml. Instead, I want to get you to have practice building it in C# code. So what I'm going to do is I'm going to first start of by deleting this MainPage.xaml. So I'm going to right-click and click Delete, and click OK. And I'm going to create a new content page, by right-clicking on my portable class library, going to Add New Item. This will now load all of the possible items that I can add to this portable class library.
And, remember, I want to create a content page, but not a xaml-based content page. So, inside of here, you can look through it, and you can see I have ContentPage, but I'm looking for a content page that is not in xaml. So you can see right here, I have a Forms Blank ContentPage. That's the one that I want. I'm going to go ahead and click on that, and I'll call this my main page, and click OK. So you can see here, there's no xaml portion.
Instead, the UI is going to be built inside of our code. So, we can delete everything that we have so far, so that we have an empty content page. So let's begin by creating some fields for some of our UI elements. So we're going to create a field for an Entry, which will be phoneNumberText, is what we're going to call it. We'll create a Button, that will represent the translate button.
And then we'll create a Button that will represent the call button. So as you can see, our UI will have a text box, to take in the phone word, like 1-855-XAMARIN, and it'll have a button to translate, and a button to call. Now inside the constructor for this page, I want to go ahead, and I want to add some padding. So I'm going to just say this.Padding = new Thickness, and I'll say 20 all around, just to give us, a bit of a gap all around.
Now, I'm going to create a stack layout. So I'm going to say StackLayout panel = new StackLayout, and for our stack layout, I'm going to add some spacing. So I'll say 15. And remember, spacing just increases or decreases the distance between the elements in the stack layout. Now the first element that I would like to add to my stack layout is a label that says, "Enter a phone word." So let's go ahead and create that, and add it to our panel.
So I'm going to say, panel.Children.Add, and I want to add a new label, and then inside of that, I'm going to say the label's text will be, Enter a PhoneWord. And we'll also set the label's font size, to be equal to Device.GetNamedSize, and we're going to say, NameSized.Large, and we're going to say that this is a label.
So let's clean this up a little bit. Okay. So, in this example, we created the label, we added it to our stack layout, and we set the size of the font to be large. And this is basically just getting a device-specific size. That's what we're using this API for.
Okay, next, let's go ahead and create the actual text box, or the entry. So in this case, I want to say, panel.Children.Add, and remember, we have the entry created already. So I'm going to say, phoneNumber Text = new Entry. And then on that entry, the entry is text. And we'll set some default text of 1-855-XAMARIN, as an example, so that users know what they can type.
Next, let's create our buttons. So we're going to say, panel.Children.Add. We're going to add the translate button, which is a new button. And then we'll say the button's text here, is just equal to Translate. And then we'll create one more button. But this button will be our call button, and the text here will be Call, for now, until we change it. And we're also going to set the IsEnabled state to false, so that you can't select just quite yet, because we haven't translated the number, so you shouldn't be able to select it.
Now, finally, I want to say the content's property for this content page is the stack layout, so that the stack layout is actually is displayed. So I'll say, this.Content equals my panel. So right now, our UI is displayed. But let's actually implementing some of the logic to do the translation. So what I want to do, is I want to subscribe to my translate button's clicked event. So, I'll go over, I'll say, translateButton.Clicked +=, and I'll hit Tab two times, to create my method stop.
So you can see here, I had now have the clicked event handler created, and what we're also going to do is, we're going to create another field, called translatedNumber, that'll be responsible for storing that translated number. Now in order to start implementing the logic for translating, I need to have logic to actually do the translation. And that's kind of tedious code that's not important as our informs, so I'm actually just going to include a file called the PhoneTranslator.cs.
We'll go ahead and drag that into my portable class library, just to open it. It basically is a static class called PhoneTranslator, that will take an incoming raw string, and convert it into a string phone number. So we're going to use that logic in this clicked event right here. So, our first step is to translate the number. So, I'm going to say my translatedNumber = Core., phone translator, .ToNumber, and I'm going to pass in the phoneNumberText's text property.
So remember, PhoneTranslator.cs lives inside of the core namespace here. That's why I'm just saying Core., phone translator, .ToNumber. So this will do the translation. So next, I want to say, if(|string.IsNullOrEmpty), so if string is not null or empty, translatedNumber. So if we get back an actual translated number, then we'll say let's enable that call button, so that we can actually click the call button, and let's also set the call button's text to be Call, and let's concatenate the translatedNumber to the end of it.
And then we'll say else, if we weren't able to make that translation, we'll just set the call button back to being enabled to False, and we'll set the text back to being just Call. All right. So let's go ahead and run this application, and see if our UI was built, and let's see if we can do a basic translation. Now, actually, before I run the application, let me just switch back to App.xaml.cs.
So, in this case, if you called your new page something else, you want to make sure you update this assignment right here, because this is what is actually assigning this page to be the start up page. So, if you called it, let's say, MyFirstPage, make sure you update this assignment. But let's go ahead and let's hit Play, and let's go ahead and run this application for iOS first, to see what it looks like. All right, so here's our phone word application, running on iOS. And you can see 1-855-XAMARIN is the default text.
I could change that, but just for testing purposes, it doesn't really matter. I'm going to go ahead and click on Translate. And notice how it was successfully translated, and we updated the text, and we know made it enabled. Although, obviously, if I click on this, nothing happens yet, because we haven't written any logic for the call button. Let's go back. Let's switch this to Android now, and let's try running this on our Android emulator.
So let's click the Play button, and see what it looks like. All right, so here's the Android application loaded. Once again, 1-855-XAMARIN is the default text. But, if I click Translate, we successfully translate the number, and the call button is enabled. So everything seems to be working on both iOS and Android.
This course was created by Xamarin University. We are honored to host this training in our library.