Telerik blogs

So you are ready to dive into your first Windows 8 HTML app. You have downloaded RadControls for Windows 8 HTML, which offer tons of cool functionalities on top of the stock UI, but how do you use them? You’re wondering – Where do I start?  Which project template should I use? What’s the quickest way from zero to something?  Don’t fret, I’ll get you started right here!

Starter Templates

When you select File –> New –> Project, you get five templates supplied by Visual Studio (plus one that was installed with the RadControls for Windows 8 HTML).  The Visual Studio starter templates each serve a purpose, but I seldom use them for real projects. That being said, they are helpful for learning different techniques in Windows 8. Let’s take a quick look at these templates. Keep in mind that these opinions are mine and geared to the beginner Windows 8 HTML developer, and your mileage may vary. 

Blank App

The Blank App templates is exactly that – a blank app.  No thrills or frills, just the absolute minimum required to run an application in Windows 8. This would be great starter template, except that it doesn’t adhere to the design guidelines set forth by Microsoft for Windows 8 modern applications.  Read this blog post for a deeper look at the design guidelines for Windows 8 HTML application. I also have a post that covers how to take your blank application with the appropriate styling and make it a template for Visual Studio.

Grid App

The Grid App template is a fairly complex three page layout that starts with a grouped list view, drills into each group, and lastly has a page for item details.  There is a lot of good information in this template to learn various Windows 8 techniques, but there is a lot of code and layout here.  Not necessarily for the beginner.  I have never used this template for a real application, but my requirements haven’t lined up either.

Split App

The Split App template, less complex than the Grid App, is a two page layout.  Again, a lot of good study material in this template, but not one that I’ve used for anything but demos.

Fixed Layout App

The Fixed Layout App is one that I’ve never used, not even in demos.  It is simply a fixed aspect ratio layout. 

Navigation App

The Navigation App template is one that you will want to spend serious time playing with.  Navigation is absolutely a must to understand, and there’s great information in this template covering how navigation works in the WinJS world. 

RadControls Windows 8 HTML Application

This template is installed with the RadControls for Windows 8, and provides the best of the blank application with layout and navigation!  This is my goto project template, and we will look deeper at this template later in this post.

Adding RadControls for Windows 8 HTML Manually

The easiest way to add RadControls for Windows 8 HTML into your project is to use the provided template, but where’s the challenge in that?  Let’s do it the manual way first, and then take full advantage of the supplied template.  Perhaps you have your own internal template that you use, or you already have a project that you are working with, and want to add the RadControls.  Either way, it’s good knowledge to have, and it’s crazy easy!

Start with a Blank App

For the sake of demonstration, we are going to start with a blank app template.  We won’t do any real work in this project, but the process is the same for any Win8 project, and the blank app doesn’t introduce any noise that might make the process seem more difficult than it is.  Simply select File –> New Project –> Installed –> Other Languages –> JavaScript –> Windows Store to get the dialog shown in Figure 1. NOTE: My Visual Studio is configured for the C# profile, so the path to the Blank App template might be different for you.

image
Figure 1 – Creating a Blank App

After you create the project, your solution explorer will look like Figure 2. There is one reference (the Windows Library for JavaScript), one main CSS file, one JavaScript file, one HTML file, several images, an application key, and an application manifest.  What we care about are the references, and the default HTML file.  The rest of the project is beyond the scope of this post.

image
Figure 2 – The blank app project files

Add the Reference for RadControls for Windows 8 HTML

The first thing that we need to do is add the reference for the RadControls for Windows 8.  Right click References, select “Add Reference…” and select Windows –> Extensions and check the box next to the RadControls for Windows 8 HTML as shown in Figure 3.  NOTE: Your version number might be different than the one shown in the figure.

image
Figure 3 – Adding the RadControls for Windows 8 Reference

Updating the Default HTML Page

After adding the reference, the project will look like Figure 4.  I have expanded the directories underneath the reference to show you what comes with the RadControls for Windows 8.

image
Figure 4 – RadControls for Windows 8 HMTL

To add the RadControls to your project takes one more simple step – add the style and script tags to the default HTML page.  You can either type them in manually to look like Listing 1, or you can drag them over from the Solution Explorer into the file – Visual Studio will automatically add the appropriate “<style>” and “<script>” tags for the files. It’s important to make sure that the “Telerik.UI/js/jquey.js” script is before the “Telerik.UI/js/ui.js”, since it’s a dependency. 

<!-- Telerik references --> 
<link href="///Telerik.UI/css/common.css" rel="stylesheet" /> 
<link href="///Telerik.UI/css/light.css" rel="stylesheet" /> 
<script src="///Telerik.UI/js/jquery.js"></script> 
<script src="///Telerik.UI/js/ui.js"></script>
Listing 1 – Adding the Style Sheets and JavaScript for the RadControls for Windows 8 HTML

You can chose between the light and the dark theme. I‘ve used the light theme by selecting “Telerik.UI/css/light.css".  I prefer the dark theme for my application, and the light theme for the Telerik RadControls.  The dark theme for the application is important, as it conserves battery to have a dark background.  Using the light theme for the controls makes them “pop” off the page, and (IMHO) provides a more compelling user experience.  That being said, you have options, and you should evaluate the combinations for yourself.

Using the RadControls for Windows 8 HTML Project Template

Now that you know how to manually add the RadControls for Windows 8 HTML manually, let’s take a quick spin around the supplied project template. Select the RadControls Windows 8 HTML Application template as shown in Figure 5.

image
Figure 5 – RadControls for Windows 8 HTML Application Template

This will start the new application wizard that allows you to select the version of RadControls for Windows 8 HTML (if you have more than one installed) and select the Light or Dark theme, as shown in Figure 6.  Selecting the theme will set both the Windows 8 theme and the RadControls theme.  If you want them to be different (like I described above), select the light theme here and then change the WinJS theme manually. 

image
Figure 5 – The New Project Wizard

The Download button checks to see if there is a more recent version of the RadControls for Windows 8 HTML available.  If your version is the latest, you will receive a dialog similar to Figure 7.  If there is an updated version, you will have an opportunity to download and install it before continuing.

image

Figure 7 – The version checker dialog

What’s included

As I mentioned above, the supplied template not only preconfigures the reference as well as the script and style tags, it comes complete with navigation. As you can see from Figure 8, the project comes preloaded with the home page as well as the code necessary to support navigation.

image
Figure 8 – The basic RadControls for Windows 8 HTML Application

And when you run the application (without making a single change), you will see that it conforms to the Windows 8 Style guidelines, as shown in Figure 9. The dotted lines were added by me to the image in the post to show the guideline support.

image

Figure 9 – The RadControls for Windows 8 HTML Project Template

Summary

If you are new to Windows 8 HTML/WinJS development, seeing all of those different templates and options can be daunting.  At the end of the day, it’s pretty clear.  To get the most out of you application, start with the RadControls Windows 8 HTML Application Template.

In my next post, we will add a grid to our starter application, and see how easy it is to configure custom headers and add filtering, grouping, and sorting.


Japikse
About the Author

Phil Japikse

is an international speaker, a Microsoft MVP, ASPInsider, INETA Community Champion, MCSD, CSM/ CSP, and a passionate member of the developer community. Phil has been working with .Net since the first betas, developing software for over 20 years, and heavily involved in the agile community since 2005. Phil also hosts the Hallway Conversations podcast (www.hallwayconversations.com) and serves as the Lead Director for the Cincinnati .Net User’s Group (http://www.cinnug.org). You can follow Phil on twitter via www.twitter.com/skimedic, or read his personal blog at www.skimedic.com/blog.

 

Comments

Comments are disabled in preview mode.