I am happy to announce Studio for WinJS, our new JavaScript product for Windows 8. Today we are releasing a Beta version with a go live license. Studio for WinJS is a set of UI controls for data visualization. Based on our popular HTML5 tools in Wijmo and designed to enhance the rich user experience of the Windows 8 platform, these controls give you powerful and unique functionality to help you build better and more compelling Windows Store apps. This new product is available online for download.

The controls included in this Beta release are:

  • Bar & Column Chart
  • Bubble Chart
  • Composite Chart
  • Line & Area Chart
  • Pie & Donut Chart
  • Scatter Chart
  • Linear Gauge
  • Radial Gauge

In the download you will also find two samples applications. MetroExplorer, which is a sample that demonstrates all of the controls and their major features. SalesDashboard, which is a dashboard application designed to show off the type of rich applications that can be created with Studio for WinJS.

Getting Started

Lets take a quick walk through of starting a new Windows 8 JavaScript application that uses one of our controls. You will need to have Studio for WinJS installed to complete this tutorial.

File – New Project

First we will open Visual Studio 2012 and create a new JavaScript Navigation Application.

Add Reference

After creating our new project, we will want to add a reference to C1Wijmo.UI (Studio for WinJS) in order to start using the controls.

Add the Control

Now that we have the controls referenced in the project we can start using them. Open up the pages\home\home.html file and then you can actually drag and drop these JS/CSS references from your references in the Solution Explorer. You can also just copy these file references and paste them into your code. These references go in the header, just below the references to WinJS.

 <script src="///C1Wijmo.UI.1.0/js/jquery-1.8.1.min.js"></script>
 <script src="///C1Wijmo.UI.1.0/js/jquery-ui-1.8.23.custom.min.js"></script>
 <script src="///C1Wijmo.UI.1.0/js/c1.ui.js"></script>
 <script src="///C1Wijmo.UI.1.0/js/wijwrapper.js"></script>
 <link href="///C1Wijmo.UI.1.0/css/c1.ui.css" rel="stylesheet" />

Then add this line of HTML right below the “Content goes here” paragraph.

<div id="gauge" data-win-control="C1.UI.Gauge.LinearGauge" data-win-options="{ value:80 }">
</div>

This bit of HTML is actually the LinearGauge control from Studio for WinJS. The WinJS Framework will look at the data-win-control attribute an automatically cast this markup as a control. Additionally, the data-win-options attribute is used to parse properties of the control. In this example we are setting the gauge’s value to 80.

Run

Finally, just run the project and this is what we get. It is a simple usage of the control, but you can see how easy it is to start using the controls in Visual Studio 2012.

Customize in Blend

You might notice that running your version looks a little different. That is because I opened this page in Blend and used the Property Grid to change the face style of the Gauge. We added support to the controls so that you get property setting for each control when working with them in Blend. This comes in handy when you are trying to find a property or want to see the result of changing it. Here is a shot of what this page looks like in Blend, notice the Gauge properties on the right side.

Thanks for reading. Now go download Studio for WinJS and build something amazing for Windows 8!

Tags