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.

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.

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.

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.

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:

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:

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.

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.

Michael Crump

Michael Crump is a Microsoft MVP, Pluralsight and MSDN author as well as an international speaker. He works at Telerik with a focus on everything mobile. You can follow him on Twitter at @mbcrump or keep up with his various blogs by visiting his Telerik Blog or his Personal Blog.

Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks or appropriate markings.