Telerik blogs

First Look at RadNumericBox for Windows 8–HTML

MichaelCrump by Michael Crump
August 21, 2012 Desktop 0 Comments


Introduction

Hello and welcome to the second part of our “Getting Started” with Telerik’s Windows 8 UI Controls. In this post, we are going to specifically target Windows 8 Applications built using HTM5/JS/CSS3 and our new control suite. We are going to look at RadNumericBox and the various ways of adding it to a page, binding the control declarative and even wiring up event handlers. Let’s get started.

Setting up Your Development Environment

Before diving in, you will need to setup your development environment. I created a “From Soup to Nuts” post that contains this information here. After that is complete then you will need to download and install the Telerik’s Windows 8 UI Controls. This download will install Beta 2 of the control suite. Once that is in place we are ready to start working with the controls.

Working With RadNumericBox

Let’s begin by launching 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.

SNAGHTMLdef7912

Once the project loads, we need to right click on References and select “Add Reference”.

image

From here, we can select “Telerik UI for JS Metro” and press OK.

SNAGHTMLdf014b6

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

image

Double click on the default.html file and drag and drop the CSS files and JavaScript files from the Telerik UI for JS Metro onto your application. Your code for the default.html page should look like the following: 

   1: <!DOCTYPE html>
   2:  
   3: <html>
   4:  
   5: <head>
   6:  
   7: <meta charset="utf-8" />
   8:  
   9: <title>TelerikRadNumericBox</title>
  10:  
  11: <!-- WinJS references -->
  12:  
  13: <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
  14:  
  15: <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
   1:  



   2:  



   3: <script src="//Microsoft.WinJS.1.0/js/ui.js">



   1: </script>



   2:  



   3: <!-- TelerikRadNumericBox references -->



   4:  



   5: <link href="/css/default.css" rel="stylesheet" />



   6:  



   7: <script src="/js/default.js">



   1: </script>



   2:  



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



   4:  



   5: <link href="/Telerik.UI/css/dark.css" rel="stylesheet" />



   6:  



   7: <script src="/Telerik.UI/js/jquery.js">



   1: </script>



   2:  



   3: <script src="/Telerik.UI/js/ui.js">

</script>
  16:  
  17: </head>
  18:  
  19: <body>
  20:  
  21: <p>Content goes here</p>
  22:  
  23: </body>
  24:  
  25: </html>

These files contains the styles and controls required to use Telerik’s Windows 8 UI Controls (HTML).

Using the Power of Blend

Go ahead and right click on default.html and select “Open in Blend”. We are going to use the power of blend to easily add this control onto our page.

Navigate over to Assets once the project loads and select “References” then “Telerik UI for JS Metro”. This will allow you to see all of the controls available in the suite.

image

Let’s go ahead now and drag and drop “RadNumericBox” onto our designer and if we look under the Live DOM then we will see it has been added.

image

If we go ahead and run the application, then we have a very capable NumericBox with only one line of code. If you go ahead and hit the up or down arrows then it will begin incrementing or decrementing the value in the box. You can also clear the value if the user taps inside the box.

image

<span data-win-control="Telerik.UI.RadNumericBox"></span>

You will notice that it followd Microsoft’s convention of data-win-control and you may optionally use data-win-option for further customization. All you will need to do is switch over to the HTML Attributes tab in Blend and you can set several options such as the format, maximum and minimum values and many others as shown below.

image

In this example, I decided to set the format to be 2 decimal places (with currency), the maximum value the user can enter to 1 and the minimum value to 100. Take a quick look at the markup now.

<span data-win-control="Telerik.UI.RadNumericBox" data-win-options="{format:'c2', max:1, min:100}"></span>

If we run the project, then it will look like the following (notice the currency symbol):

image

Let’s go ahead and remove the span tag and configure RadNumericBox programmatically by using JavaScript code and placing a div inside the body tag as shown below: 

   1: <!DOCTYPE html>
   2:  
   3: <html>
   4:  
   5: <head>
   6:  
   7: <meta charset="utf-8" />
   8:  
   9: <title>TelerikRadNumericBox</title>
  10:  
  11: <!-- WinJS references -->
  12:  
  13: <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
  14:  
  15: <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
   1:  



   2:  



   3: <script src="//Microsoft.WinJS.1.0/js/ui.js">



   1: </script>



   2:  



   3: <!-- App6 references -->



   4:  



   5: <link href="/css/default.css" rel="stylesheet" />



   6:  



   7: <script src="/js/default.js">



   1: </script>



   2:  



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



   4:  



   5: <link href="/Telerik.UI/css/dark.css" rel="stylesheet" />



   6:  



   7: <script src="/Telerik.UI/js/jquery.js">



   1: </script>



   2:  



   3: <script src="/Telerik.UI/js/ui.js">



   1: </script>



   2:  



   3: <script>



   4:  



   5: document.addEventListener("DOMContentLoaded", function () {



   6:  



   7: var numericBox = new Telerik.UI.RadNumericBox(document.getElementById("myNumericBox"));



   8:  



   9: numericBox.max = 100;



  10:  



  11: numericBox.min = 1;



  12:  



  13: numericBox.format = "c2";



  14:  



  15: });



  16:  

</script>
  16:  
  17: </head>
  18:  
  19: <body>
  20:  
  21: <p>Content goes here</p>
  22:  
  23: <div id="myNumericBox"></div>
  24:  
  25: </body>
  26:  
  27: </html>
 

The first thing you may notice is a simple div called, “myNumericBox”. This is a placeholder for the RadNumericBox control we are about to place inside. If you scroll up then you will see we added a small piece of JavaScript to run after the DOMContent is loaded and we declared a new instance of RadNumericBox. I went ahead and manually added the settings for max, min and format. I was able to quickly find the properties and a description by the built-in IntelliType as shown below.

image

Wrap-up

In this blog post, we uncovered RadNumericBox for Telerik’s Windows 8 UI Controls. This is only one of the controls available right now for Windows 8 HTML application development. I would encourage you check out our Windows 8 webinar if you have not seen it yet. It is currently available on-demand and you will see what Telerik has in store for Windows 8. Thanks again and if you have any questions or comments, then feel free to drop them in the comments section below.

Win8_Download (2)

App Dev
MichaelCrump
About the Author

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.

Comments

Comments are disabled in preview mode.