Upload
james-quick
View
292
Download
0
Embed Size (px)
Citation preview
Click “New Solution”
Choose Xamarin.Forms App and click Next
Name Your App, Check Shared Library, then click Next
Name Your Project, Choose a location, and click Create
This is what your solution should look like. A Shared Folder and one for Droid and IOS
Right Click on the Shared Project and choose Add->New File
Choose Forms ContentPage and call it Home.cs, then click New
This is what Your New Home page should look like.
Open the <NameofYourProject>.cs file and remove the highlighted code
Replace it with this
• public App (){// The root page of your applicationMainPage = new Home();
}
Navigate back to the Home.cs file and remove the code shown here.
Replace it with this which creates a StackLayout to hold our content and adds padding for IOS
StackLayout stack = new StackLayout {Children = {}
};this.Content = stack;this.Padding = new Thickness (0, Device.OnPlatform (20, 0
, 0), 0, 0);
Add a Title Label as shown above, then include it in the Children of the StackLayout.
var title = new Label {Text = "Chuck Norris App",HorizontalOptions = LayoutOptions.Center,VerticalOptions = LayoutOptions.StartAndExpand
};
StackLayout stack = new StackLayout {Children = {title}
};
Create two more Labels, subtitle and jokeText, and add them to the Children of the StackLayout
var title = new Label {Text = "Chuck Norris App",HorizontalOptions = LayoutOptions.Center,VerticalOptions = LayoutOptions.StartAndExpand
};var subtitle = new Label {
Text = "Click below to get a hilarious joke",HorizontalOptions = LayoutOptions.Center,VerticalOptions = LayoutOptions.StartAndExpand
StackLayout stack = new StackLayout {Children = {title, subtitle, jokeText}
};
Should end up like this
Click the Run Button (looks like a play button) to open the emulator and start your app
Your app should look like this for now
Now let’s add a jokeButton and it’s “Click Handler” The click handler is where we tell the app what to do when the buton
is clicked.
Add a new file to our Shared Project.
Button jokeButton = new Button {Text = "Get Joke",HorizontalOptions = LayoutOptions.Center,VerticalOptions = LayoutOptions.StartAndExpand
};//This is what will happen when the jokeButton is clickedjokeButton.Clicked+= async (sender, e) => {
};
Click “New Solution”
Replace the code in that file with the code above.
namespace ChuckNorris{
public class Joke{
public string type { get; set; }public Value value { get; set; }
}
public class Value{
public int id { get; set; }public string joke { get; set; }public List<object> categories { get; set; }
}}
Right Click on “List” and choose Resolve-> using System.Collections.Generic
Now add the above lines in the Click Handler for the jokeButon which will attempt to retrieve a joke from the
Web
jokeButton.Clicked+= async (sender, e) => {//Attempt to retrieve joke from the webHttpClient client = new HttpClient();Uri uri = new Uri("http://api.icndb.com/jokes/random?li
mitTo=[nerdy]&firstName="+ firstNameEntry.Text+"&lastName="+ lastNameEntry.
Text);string obstring = await client.GetStringAsync (uri);
};
Right Click on “HttpClient” and choose Resolve->using System.Net.Http
Right Click on Package in the Android Project and Choose Add Packages
Search Json.net and click Add Package
Right Click on Package in the IOS Project and Choose Add Packages
Search Json.net and click Add Package
Joke joke = JsonConvert.DeserializeObject<Joke> (obstring);jokeText.Text = joke.value.joke;
Right Click JsonConvert and choose Resolve->using Newtonsoft.Json
Run the app again and click the Get Joke button
You should see a joke appear
Add two Entries, firstNameEntry and lastNameEntry as above
Entry firstNameEntry = new Entry {Text = "First Name",HorizontalOptions = LayoutOptions.CenterAndExpand,VerticalOptions = LayoutOptions.StartAndExpand,
};
Entry lastNameEntry = new Entry {Text = "Last Name",HorizontalOptions = LayoutOptions.CenterAndExpand,VerticalOptions = LayoutOptions.StartAndExpand,
};
Add them to the Children of the StackLayout
Update the uri variable to include the two entry fields as above
Uri uri = new Uri("http://api.icndb.com/jokes/random?limitTo=[nerdy]&firstName="
+ firstNameEntry.Text+"&lastName="+ lastNameEntry.Text);
Rerun the solution. Enter your name into the two entries
You should get back a personalized joke as Above