Pizza Ordering Made Easy with Telerik RadControls for Metro - HTML

Introduction

We all love pizza. I know that I do and several have speculated how it will be ordered in the future. Don’t take my word for it, check out the video below:

Ordering Pizza in the Future:
http://www.youtube.com/watch?v=RNJl9EEcsoE

While it may seem strange that in the year 2015 people are using Windows 98 to order pizza, it may be more realistic to say they will be using Windows 8 instead. So, let’s build a Windows 8 HTML app using several new controls that are part of Telerik’s Windows 8 UI Controls that we have not seen yet. They include: RadDropDownList, RadSlider and RadGauge.

Before We Get Started

So far, we have covered a variety of controls included in the HTML control suite and I think it may be beneficial for you to review these posts or just keep them handy as a reference in case you run into any problems in the future.

From Soup to Nuts with RadControls for Metro (HTML5) – Covered starting a brand new project using VS2012 and RadControls for Metro. It walks you through step-by-step in creating a chart useful in your next Line of Business application.

RadNumericBox for Windows 8–HTML – This blog post walked you through various ways of adding RadNumericBox to a page, binding the control declarative and even wiring up event handlers.

RadComboBox and RadAutoComplete for Windows 8–HTML – This blog post walked you through both RadComboBox and RadAutoCompleteBox and why you may choose one over the other. It describes in detail how to use it in your next application.

Create an Appointment Tracking App with RadDatePicker & RadTimePicker – This blog post walked you through creating a sample Appointment Tracking application using both RadDatePicker and RadTimePicker. It also describes how to further customize the data within the controls.

The Prototype

Just like we saw last time, I used a storyboard to visualize our application before writing any code. For this application, I’m going to use the PowerPoint StoryBoarding just like last time. Below you can visualize what our single page Windows 8 Store application looks like.

Figure 1: Customize Your Pizza Application

Please note that I prefer the light theme for storyboarding purposes.

In this application, we are going to let the user select a topping using RadDropDownList. They will also have the option of adding the amount of sauce by using RadSlider (which comes with the handy buttons on the left and right hand side – they can be turned off if necessary). Finally, we have a delivery time which uses RadRadialGauge and randomly generates how many minutes it will take to receive their pizza. The user can then press the “Place Order” button to simulate an order being dispatched.

Building the App

Launch Visual Studio 2012 from the Start Screen and selecting “Templates” -> “Other Languages” -> “JavaScript” then “Windows Store”. If you are using the RC, then it located under "Windows Metro Style”. Select “Blank App” then give it a name and select the OK button as shown below.

In this sample, we are going to use the name OrderAPizza. Once the project loads, we need to right click on References and select “Add Reference”.

From here, we can select “RadControls for Metro” and press OK. (Please note: Name changed slightly from Beta to RC – we are using the RC bits here)

If you look under References, you will see “RadControls for Metro” has been added.

Starting with Default.html

The first thing that I want to do for this sample application is setup my page to resemble the storyboard used in Figure 1. Even though we just added a reference to the Telerik controls, we are going to need to add the following Telerik JavaScript/CSS Files to our application as well. This will give us access to all of the styles/controls available to us by Telerik.

   1: <script src="///Telerik.UI/js/jquery.js" type="text/javascript"></script>

   2: <script src="///Telerik.UI/js/ui.js" type="text/javascript"></script>

   3: <link href="///Telerik.UI/css/common.css" rel="stylesheet" type="text/css">

   4: <link href="///Telerik.UI/css/dark.css" rel="stylesheet" type="text/css">

We can also use the built-in styles supplied by Microsoft to put together a user interface quickly and easily. Copy and paste the following code and put it inside your <body> tags.

   1: <body>

   2: <div class="fragment homepage" >

   3: <header aria-label="Header content" role="banner"> 

   4: <h1 class="titlearea win-type-ellipsis">

   5: <span class="pagetitle">Customize Your Pizza</span><br/>

   6: </h1>

   7: </header>

   8: <section aria-label="Main content" role="main" >

   9: <p>Select Topping:<span id="selectedToppings" data-win-control="Telerik.UI.RadDropDownList" data-win-options="{

  10:             height: 250, width: 200,

  11:             dataSource: [

  12:                 'Pepperoni',

  13:                 'Sausage',

  14:                 'Bacon',

  15:                 'Ham',

  16:                 'Salami',

  17:                 'BBQ Chicken',

  18:                 'Cajun Chicken'

  19:             ]

  20:             }"></span></p>

  21: <p>Amount of Sauce: (10 = heavy)</p><span data-win-control="Telerik.UI.RadSlider" id="selectedSauce" data-win-options="{showButtons:true}"></span> 

  22: <p>Delivery Time: (in minutes) </p>

  23: <div id="selectedTime" style="width: 250px; height: 150px;" data-win-control="Telerik.UI.RadRadialGauge" data-win-options="{max:60, min:0, ranges:[{color:'red', from:40, to:60}, {color:'#595959', from:0, to:20}, {color:'white', from:20, to:40}], value:45}">

  24: </div>

  25:  

  26: <br/><br/>

  27: <button type="button" id="saveButton" >Save Order</button>

  28: <br/>

  29: </section> 

  30: <div id="pizzaOutput" ></div> 

  31: </div>

  32:  

  33: </body>

The special tags to pay attention to are the ones with data-win-control:

Telerik.UI.RadDropDownList
Telerik.UI.RadSlider
Telerik.UI.RadRadialGauge

You will quickly notice that each of these controls have several properties located in data-win-options that customizes the look and feel of them. Let’s drill into each one and take a look.

RadDropDownList

Taking a quick peek at RadDropDownList you can see that we specified a JavaScriptArray as the datasource, but this could have been binding to a remote data source as described in the RadComboBox blog post. We could also fire open Blend for Visual Studio and see this control has several other options we could have changed.

RadSlider

Next up is RadSlider, Telerik actually provides two versions of the slider control. RadSlider which is used in this application and RadRangeSlider. Both of these controls are very flexible and you can see below an example of each.



RadRangeSlider: The slider has two value indicators for the minimum and maximum value of the selected range. This type of slider does not support buttons.

RadSlider: This slider has one value indicator for the selected value. This type of slider does support increase/decrease value buttons.

RadGauge

Just like RadSlider, RadGauge comes in two forms. RadRadialGauge and RadLinearGauge. We used RadRadialGauge in this application and set min, max, ranges and values for it. Again, both of these controls are very flexible and you can see below an example of each.

RadRadialGauge : draws a circular scale and ranges and its pointer is an arrow that rotates to the set value on the scale.

RadLinearGauge : draws a horizontal or vertical linear scale and ranges and its pointer is a bar that rises to the set value on the scale.

Now that we have our User Interface defined, let’s go ahead and add functionality for our “Save Order” button.

Adding “Save Order” Functionality

So far our application runs, but the Save Order button is not active. We are going to jump over to default.js and locate the following line:

args.setPromise(WinJS.UI.processAll());

Underneath it, add the following six lines of code with some additional code to generate a random number for the delivery time that will be used in our RadRadialGauge:

   1: //Attach Click Event Handler for Save Button

   2: var SaveButton = document.getElementById("saveButton");

   3: SaveButton.addEventListener("click", SavebuttonClickHandler, false);

   4:  

   5: //Randomize the time it takes for delivery

   6: var randomnumber = Math.floor(Math.random() * 61);

   7: var ranNumber = document.getElementById("selectedTime");

   8: ranNumber.winControl.value = randomnumber;

Next, you need to add a function called SavebuttonClickHandler to run code once the Save Order button has been clicked. Add this function underneath app.oncheckpoint. Here's the function in it’s entirely:

   1: function SavebuttonClickHandler(eventInfo) {

   2: var selToppings = document.getElementById("selectedToppings").winControl.value;

   3: var selSauce = document.getElementById("selectedSauce").winControl.value;

   4: if (selSauce > 5) {

   5: var sauceAnswer = "added";

   6:     }

   7: else {

   8: var sauceAnswer = "regular";

   9:     }

  10: var selTime = document.getElementById("selectedTime").winControl.value;            

  11:     document.getElementById("pizzaOutput").innerText = "You have selected " + selToppings + " as a topping with " + sauceAnswer + " sauce and have a delivery time of " + selTime + " minutes";

  12: }

With the addition of this function, you've defined several local variables that gets the value in our multiple input/span tags. We have also added a simple if/then statement to get the range of our RadSlider control to add the text of “added” or “regular” inside our pizzaOutput div by appending each local variable with hardcoded text. Let’s go ahead and run it in the simulator and see our results:

With just a little bit of JavaScript our application comes alive! This is just one of the ways you may implement these controls in your application. Blend for Visual Studio is also fully supported as well as creating the controls programmatically via JavaScript. Feel free to explore this project with the download link provided below.

Download this project.

Wrap-up

In this blog post, we took a look at three important controls: RadDropDownList, RadSlider and RadGauge part of Telerik’s Windows 8 UI Controls. We saw just how easy you can implement the controls in a real-world application using VS2012 and/or Blend for Visual Studio. I encourage you to check out the other controls available in the suite.

Thanks again and if you have any questions or comments, then feel free to drop them in the comments section below.