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!
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.
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.
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.
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.
The Fixed Layout App is one that I’ve never used, not even in demos. It is simply a fixed aspect ratio layout.
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.
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.
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!
Figure 1 – Creating a Blank App
Figure 2 – The blank app project files
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.
Figure 3 – Adding the RadControls for Windows 8 Reference
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.
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>
<!-- Telerik references -->
<link href="///Telerik.UI/css/common.css" rel="stylesheet" />
<link href="///Telerik.UI/css/light.css" rel="stylesheet" />
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.
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.
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.
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.
Figure 7 – The version checker dialog
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.
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.
Figure 9 – The RadControls for Windows 8 HTML Project Template
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.
Philip 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.