Telerik blogs

Introduction

Hello and welcome to one of our first blog posts on “Getting Started” with RadControls for Metro. In this “From Soup to Nuts” post, we are going to specifically target Metro Applications built using HTM5L/JS/CSS3 and RadControls for Metro. We will provide you with the necessary knowledge to get started building your first application.

 

Setting up Your Development Environment

Before getting started, you will need to download the following items:

      • The Windows 8 Release Preview can be downloaded from the Windows 8 Download Center. You will need to be running Windows 8 in order to build Metro Style Applications. On August 15th, the Windows 8 RTM will be released and MSDN subscribers can download that file from their accounts.
      • Visual Studio 2012 Release Candidate is required to build any sort of Metro applications and comes with several templates to jumpstart your development efforts. In this article, we will specifically be using the blank HTML5/JS/CSS3 template. Again, if you have access to MSDN, then you can download the VS2012 RTM on the 15th.
      • Last but not least is the RadControls for Metro Beta. This is a set of components that Telerik built to enable developers to build Metro style applications faster. It is also certified against the latest Visual Studio Release Candidate and the RTM release.

 

Install Process

After you download the RadControls for Metro Beta, run the setup file to install RadControls for Metro.

Once that is finished, we are ready to begin working with RadControls for Metro.

From the Windows 8 Desktop Mode, you will see two new icons.

icons

If you double click on the RadControls for Metro HTML Q1 2012 BETA Demos, then the project will open in VS2012 as shown below.

QSF

Go ahead and select “Local Machine” from the VS2012 Toolbar and the sample application will be launched and deployed onto your machine.

LocalMachine

 

screenshot_07302012_125603

You can explore the sample application to see each control in action. You may also review the source code by flipping your device or opening the application bar (right click of the mouse).

screenshot_07302012_125638

It is also installed on your machine, so you can return to the demo at any point by going into the Metro mode of Windows 8.

screenshot_07302012_125809

 

Building Your First Project

We now have the necessary tools installed and took a quick look at the RadControl for Metro Sample Application. It is now time to begin building a Metro Application using HTML5/JS/CSS3. Let’s begin by launching Visual Studio 2012 RC from the Metro Start Screen and selecting “Templates” -> “Other Languages” -> “JavaScript” then “Windows Metro Style”. Select “Blank App” then give it a name and select the OK button as shown below.

NewProject

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

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

AddReference2

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

SolutionExplorer

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: <html>
   3: <head>
   4: <meta charset="utf-8" />
   5: <title>TelerikJSProject</title>
   6:  
   7: <!-- WinJS references -->
   8: <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
   9: <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
   1:  
   2:     <script src="//Microsoft.WinJS.1.0.RC/js/ui.js">
   1: </script>
   2:  
   3:     <!-- TelerikJSProject references -->
   4:     <link href="/css/default.css" rel="stylesheet" />
   5:     <script src="/js/default.js">
   1: </script>
   2:  
   3:     <!-- Telerik references -->
   4:     <link rel="stylesheet" type="text/css" href="/Telerik.UI/css/common.css" />
   5:     <link rel="stylesheet" type="text/css" href="/Telerik.UI/css/dark.css" />
   6:     <script type="text/javascript" src="/Telerik.UI/js/jquery.js">
   1: </script>
   2:     <script type="text/javascript" src="/Telerik.UI/js/ui.js">
</script>
  10: 
  11:  
  12: </head>
  13: <body>
  14: <p>Content goes here</p>
  15: </body>
  16: </html>

These files contains the styles and controls required to use RadControl for Metro (HTML).

We are now ready to use the power of Blend to speed up our development efforts. Go ahead and right click on default.html and select “Open in Blend” as shown below.

defaultpageblend

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.

BlendReferences

Let’s go ahead now and drag and drop “RadChart” onto our designer and we immediately see it in design time mode.

DragPieChart

Let’s keep things simple for this example and click on HTML Attributes, then look for series and enter the following code snippet:

[{type: 'bar', name: 'World', data: [16.7, 20, 15.7, 26.6, 23.5]}]

This is simply saying that we want a bar chart, with a name of “World” and here is the data that the graph should contain.

FinalChart

We should see it immediately be updated in the designer and we can go ahead launch the application to see it run in Metro Mode. The code generated by Blend is contained completely in the body tag and looks like the following:

   1: <body>
   2: <p>Content goes here</p>
   3: <div data-win-control="Telerik.UI.RadChart" data-win-options="{series:[{data:[16.7, 20, 15.7, 26.6, 23.5], name:'World', type:'bar'}]}"></div>
   4: </body>

You will notice here that it follow Microsoft’s convention of data-win-control and data-win-option tags.

Of course, you could have just as easily declared this bar series programmatically by using a small piece of JavaScript in your default.html as shown below:

   1: <!DOCTYPE html>
   2: <html>
   3: <head>
   4: <meta charset="utf-8" />
   5: <title>App7</title>
   6:  
   7: <!-- WinJS references -->
   8: <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
   9: <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
   1:  
   2:     <script src="//Microsoft.WinJS.1.0.RC/js/ui.js">
   1: </script>
   2:  
   3:     <!-- App7 references -->
   4:     <link href="/css/default.css" rel="stylesheet" />
   5:     <script src="/js/default.js">
   1: </script>
   2:     <script type="text/javascript" src="/Telerik.UI/js/jquery.js">
   1: </script>
   2:     <script type="text/javascript" src="/Telerik.UI/js/ui.js">
   1: </script>
   2:     <script>
   3:         document.addEventListener("DOMContentLoaded", function () {
   4: var chart = new Telerik.UI.RadChart(barChart);
   5:  
   6: var barSeries = new Telerik.UI.Chart.BarSeries();
   7:             barSeries.data = [16.7, 20, 15.7, 26.6, 23.5];
   8:  
   9:             chart.series.push(barSeries);
  10:             chart.refresh();
  11:         });
  12: 
</script>
  10: </head>
  11: <body>
  12: <p>Content goes here</p>
  13: <div id="barChart" />
  14: </body>
  15: </html>

This could have easily connected to a AJAX service to pull remote data. You may check out the financial dashboard application of an example of this right now if you wish.


Wrap-up

Thanks for reading and I hope that you left with a clear picture of just how easy and versatile it is to use RadControls for Metro (HTML5). In case you missed our Windows 8 webinar, we have it available on-demand to see exactly what Telerik is building for Windows 8.

Win8_Download (2)


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.