.NET Musings

Special Savings for VSLive Chicago

PhilJapikse — Mon, 08 Apr 2013 03:58:05 -0900

I’ll be speaking at Visual Studio Live!, May 13-16 in Chicago,IL http://bit.ly/CHSPK16 Surrounded by your fellow developers, Visual Studio Live! provides you with immediately usable education that will keep you relevant in the workforce.

I’ll be presenting the following sessions/workshops:

· A Primer in Windows 8 Development with WinJS

· Controlling ASP.NET MVC4

SPECIAL OFFER: As a speaker, I can extend $400 savings on the 4-day package. Register herehttp://bit.ly/CHSPK16 and use code CHSPK16.

Learn how you can code like a rockstar at Visual Studio Live! Chicago — bring the issues that keep you up at night and prepare to leave this event with the answers, guidance and training you need. Register now: http://bit.ly/CHSPK16

About the author

Philip Japikse

Philip Japikse is an international speaker, a Microsoft MVP, 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 works as a Senior Developer Evangelist for Telerik's RadControls for Windows 8 as well as the Just family of products (JustCode, JustMock, JustTrace, and JustDecompile) and co-hosts the Hallway Conversations podcast (www.hallwayconversations.com). Phil is also 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 read his Telerik blog at http://blogs.telerik.com/skimedic and his personal blog at www.skimedic.com/blog.

MVVM in WinJS Part 3 – Binding Initializers and Two Way Binding

PhilJapikse — Fri, 22 Feb 2013 18:40:56 -0900

A Quick Status Check

I started this blog series on developing Windows 8 Store Applications with JavaScript to document my process of learning WinJS and Windows 8 as well as the functionality that would be needed for Conference Buddy – an application that I am writing for Windows 8 with my good friend Jesse Liberty. (Note: Michael Crump is writing a version for Windows Phone – you should check that out as well).

I haven’t spent much time writing specifically about Conference Buddy to date since the posts that I have written so far have been much broader and foundational for developing WinJS applications. In time, I will outline how I used each one of these concepts to create Conference Buddy from start to finish.

Here are the posts that are already published in this series:

Creating JustCode Templates to speed WinJS development – JustCode Templates For WinJS
Getting started with Model View ViewModel (MVVM) in WinJS with Observable Models
Discussing how ideas become manifest by Using Wireframes in application design
Expanding the MVVM Story with Observable Collections
Removing Chrome but not the functionality through AppBars in WinJS
Interacting with the user through AppBar Flyouts
Taking advantage of some browser quirks when developing Windows Store Applications with WinJS
Following the User Interface Guidelines for Windows Store Applications
Reusing the layout settings with a Custom Project Template for Visual Studio 2012

Background

A lot had been said about the Windows 8 data binding mechanism and its lack of support for two way binding. While that is inherently true, it isn’t the whole story. You can certainly use other JavaScript frameworks (like Knockout), but if you want to stick to the “out of the box” tooling, you must listen to an element’s change event and then update the source object. Of course, support for two way binding out of the box would be better, and the Windows team is very aware of that.

As I am sure you are well aware, data binding is done with the data-win-bind attribute and the “property-to-bind:value-from-data-context” syntax. This provides model to view binding. The data-win-bind attribute also supports another parameter, and that is a binding initializer. Through the binding initializer, you can incorporate view to model binding in a very MVVM way. To use a binding initializer in markup, set the data-win-bind as in the following code snippet:

data-win-bind=”property-to-bind:value-from-data-context bindingInitializer”

Creating a Binding Initializer

To create a binding initializer by hand, start by wrapping a function in a call to WinJS.Binding.initializer (as in Listing 1). WinJS.Binding.initializer adds a call to WinJS.Utilities.markSupportedForProcessing, which allows using the function declaratively in markup (as the third parameter in the binding expression as explained above).

WinJS.Namespace.define("ConferenceBuddy.Binding", {
    twoWay: WinJS.Binding.initializer(function (
              source, sourceProps, dest, destProps) {
    })
});

Listing 1 – Creating a Binding Initializer

The binding initializer in a binding expression is passed in the source object, an array of the source properties, the destination object, and an array of the destination properties. The source is the model object that is being bound to (the data context), the property string array contain properties listed in the the “value-from-data-context”, the destination is the element in markup (either an HTML element or a WinJS control), and the destination property array are the properties of the markup element/WinJS controls that is being modified.

It The Binding Initializer only gets called once (when the binding is getting set up after a call to WinJS.Binding.processAll), so it’s important to return a binding or create an event handler that will then respond to changes in the data values.

Attaching an Event Listener

To update the source object (your model), you need to listen for the change event on your view element. When the change is fired, compare the value of the element with the value of the model, and if they are different, update the model. The comparison is important, because you don’t want to cause a recursion issue. The code is shown in Listing 2. I will detail each of the functions used later in this post.

WinJS.Namespace.define("ConferenceBuddy.Binding", {
  twoway: WinJS.Binding.initializer(function (
                 source, sourceProps, dest, destProps) {
    dest.onchange = function () {
        var newValue = ConferenceBuddy.Binding.Helpers.
                         dest, destProps);
        var targetObject = ConferenceBuddy.Binding.Helpers
            .getSourceObject(source, sourceProps);
        var oldValue = targetObject[sourceProps[sourceProps.length - 1]];
        if (oldValue !== newValue) {
            targetObject[sourceProps[sourceProps.length - 1]] = newValue;
        }
    };
  })
});

Listing 2 – Attaching an Event Listener in a Binding Initializer

Getting the New Value

The last two parameters contain the view element and the properties. If you are doing simple binding like “value:age”, then getting the value is as simple as writing dest[destProps[0]]. However, real life is rarely that simple. If you are binding to a JavaScript control, then the construct will fail, because the value is a property of the winControl and not the element. So you would then need to write dest.winControl[destProps[1]]. If you are binding to a path, such as “style.color:age”, then the first value in the array with be “style”, and you won’t get the desired effect either.

So there’s two cases that we need to program for:

The simple case where the destProps array only hold one vale
Any other case where there are more than 1 properties.

Listing three shows the implementation of the getDistinationValue function.

WinJS.Namespace.define("Binding.Helpers", {
    getDestinationValue: function (dest, destProps) {
        if (destProps.length === 1) {
                return dest[destProps[0]];
        }
        else {
            var element = eval("dest['" + 
                  destProps.slice(0, destProps.length - 1).join("']['") + 
                  "']");
            return element[destProps[destProps.length-1]];
        }
    },
});

Listing 3 – Getting the value from the view

Slice, Join, and Eval

The actual property that needs to be read is always the last leaf in the array. The construct that will get us the element is dest[destProps[0]][destProps[1]][destProps[n-1]]. Instead of iterating through the array, we use a JavaScript tricks to get a reference to the element. The “join” function will join an array of strings into a single string with the option to specify the connector for the strings. In this case, we want to build the string to look like “[‘property1’][‘property2’]…[‘property(n-1)’]. And since we want the element, and not the property itself, we only want to build the string using all but the last element of the array. We get the desired items from the array by using the slice method on the array starting with zero (the first item) and then getting all but the last one by passing in one less than the length of the array. The slice method returns a new array, so we can directly call join after slice, and get the desired string. Then a call to eval processes the string into the element. The final line returns the value of the property that we are seeking.

NOTE: If you are using the Telerik RadControls for WinJS, this becomes much easier, as the WinJS team at Telerik has created two utility functions, Telerik.Utilities.getPropertyValue(dest, destProps) and Telerik.Utilities.setPropertyValue(dest, destProps, value)

Getting and Updating the Old Value From the Model

Retrieving the old value follows the same process of using the slice, join, and eval functions to get the model object. Since the event handler potentially needs to update the value, the function returns the object and not just the value. Once we have the object, we can get or set the value of the property by using the element[sourceProps[sourceProps.length-1]] syntax.

getSourceObject: function (source, sourceProps) {
    if (sourceProps.length === 1) {
        return source;
    }
    else {
        return eval("source['" + sourceProps
            .slice(0, sourceProps.length - 1)
            .join("']['") + "']");
    }
},

Listing 4 – Getting Source Object

The Result

To test the two way binding, I set up a screen with a record displayed on the left and the same record on the right with text boxes for the names and a range control bound to the age property. Changing the value of the range control causes the values for the age in the label and the textbox to be immediately updated. Likewise, changing the value in the text box updates the value of the range control and the label.

Summary

Although it might seem like a lot of extra work, it really just takes longer to explain than code. Two way binding is very achievable in WinJS through just a few lines of code. I’ve added this to my JustCode JavaScript templates so I always have it at my finger tips. Yes, out of the box support for two way binding would be much better, and yes, you can pull in any framework you want to handle binding for you. But you can also do with the tooling provided out of the box by taking advantage of the Binding Initializers.

About the author

Philip Japikse

Philip Japikse is an international speaker, a Microsoft MVP, 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 works as a Developer Evangelist for Telerik's RadControls for Windows 8 as well as the Just family of products (JustCode, JustMock, JustTrace, and JustDecompile) and co-hosts the Hallway Conversations podcast (www.hallwayconversations.com). Phil is also 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 read his Telerik blog at http://blogs.telerik.com/skimedic and his personal blog at www.skimedic.com/blog.

Creating a WinJS Project Template

PhilJapikse — Tue, 05 Feb 2013 10:44:00 -0900

In my last post, I showed how to implement the User Interface Guidelines for JavaScript based Windows Store Applications. To make developing applications easier, I’ve created a Visual Studio Project Template that contains the HTML and CSS I described in that post. If you are impatient, and just want the file, you can download it here.

Creating the Template from a Project

The first step is to create your project in Visual Studio. If you would like to use the project that I built in my last post, you can download it here. Once you have created your project, select “Export Template…” from the File menu (shown in Figure 1).

Figure 1 – Exporting a template (File menu)

The Export Template wizard consists of two screens. The first lets you choose between a Project Template or an Item Template, and select the solution item that will be the basis for the template. Select “Project template” and the “SimpleLayout” project (if you are using my sample, otherwise select the project that you want to use at the project template).

Figure 2 – Export Template item selection screen

The second screen allows you to set the template options. In addition to the Template Name, make sure the “Automatically import the template into Visual Studio” is not checked. We will bring the template into Visual Studio later in this post. Figure 3 shows how I filled out the wizard for this example.

Figure 3 – Template Options

Once you have filled out the screens and click “Finish”, Visual Studio will create a .zip file in the directly shown in the Output location on the screen. By default, this location is “My Documents\Visual Studio 2012\Exported Templates\[TemplateName].zip”

Modifying Template Files

The files added to the template .zip file must be modified using Visual Studio’s template parameters (for more information, see this MSDN article). To modify them, uncompress the .zip file into another directory.

The Application Manifest

The first file to update is “package.appmanifest”. There are three changes that need to be made:

The Name GUID and UserName in the <Identity> tag
The DisplayName and PublisherDisplayName in the <Properties> tag
The DisplayName and Description in the <VisualElements> tag

The template values that will be used are as follows:

$guid1$ – A GUID to replace the project GUID
$projectname$ – The name provided by the user in the New Project dialog box
$username$ – The current user name

NOTE: The templates are case sensitive.

<?xml version="1.0" encoding="utf-8"?>

<Package xmlns="http://schemas.microsoft.com/appx/2010/manifest">

  <Identity

    Name="$guid1$"

    Version="1.0.0.0"

    Publisher="CN=$username$" />

  <Properties>

    <DisplayName>$projectname$</DisplayName>

    <PublisherDisplayName>$username$</PublisherDisplayName>

    <Logo>images\storelogo.png</Logo>

  </Properties>

  <Prerequisites>

    <OSMinVersion>6.2.1</OSMinVersion>

    <OSMaxVersionTested>6.2.1</OSMaxVersionTested>

  </Prerequisites>

  <Resources>

    <Resource Language="x-generate" />

  </Resources>

  <Applications>

    <Application 

      Id="App"

      StartPage="default.html">

      <VisualElements

        DisplayName="$projectname$"

        Logo="images\logo.png"

        SmallLogo="images\smalllogo.png"

        Description="$projectname$"

        ForegroundText="light"

        BackgroundColor="#464646">

        <DefaultTile ShowName="allLogos" />

        <SplashScreen Image="images\splashscreen.png" />

      </VisualElements>

    </Application>

  </Applications>

  <Capabilities>

    <Capability Name="internetClient" />

  </Capabilities>

</Package>

Listing 1 – package.appmanifest

The Project File

The project file has three very important changes:

The GUID in the <ProjectGuid> tag
The name of the key file in the <PackageCertificateKeyFile> tag
The name of the key file in the list of items in the <ItemGroup> tag

For the ProjectGuid, use the same GUID template that you used in the application manifest file (you can specify 10 different GUIDS with the template).

<?xml version="1.0" encoding="utf-8"?>

<Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">

  <ItemGroup Label="ProjectConfigurations">

<!-- Project Configurations omitted for brevity -->

  </ItemGroup>

  <PropertyGroup Label="Globals">

    <ProjectGuid>$guid1$</ProjectGuid>

  </PropertyGroup>

  <PropertyGroup Condition="'$(VisualStudioVersion)' == '' or '$(VisualStudioVersion)' &lt; '11.0'">

    <VisualStudioVersion>11.0</VisualStudioVersion>

  </PropertyGroup>

  <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />

  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\$(WMSJSProjectDirectory)\Microsoft.VisualStudio.$(WMSJSProject).Default.props" />

  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\$(WMSJSProjectDirectory)\Microsoft.VisualStudio.$(WMSJSProject).props" />

  <PropertyGroup>

    <TargetPlatformIdentifier>Windows</TargetPlatformIdentifier>

    <TargetPlatformVersion>8.0</TargetPlatformVersion>

    <DefaultLanguage>en-US</DefaultLanguage>

    <PackageCertificateKeyFile>$projectname$_TemporaryKey.pfx</PackageCertificateKeyFile>

  </PropertyGroup>

  <ItemGroup>

    <AppxManifest Include="package.appxmanifest">

      <SubType>Designer</SubType>

    </AppxManifest>

    <Content Include="default.html" />

    <Content Include="images\logo.png" />

    <Content Include="images\smalllogo.png" />

    <Content Include="images\splashscreen.png" />

    <Content Include="images\storelogo.png" />

    <Content Include="js\default.js" />

    <Content Include="css\default.css" />

    <None Include="$projectname$_TemporaryKey.pfx" />

  </ItemGroup>

  <ItemGroup>

    <SDKReference Include="Microsoft.WinJS.1.0, Version=1.0" />

  </ItemGroup>

  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\$(WMSJSProjectDirectory)\Microsoft.VisualStudio.$(WMSJSProject).targets" />

  <!-- Project Build options omitted for brevity -->

</Project>

Listing 2 – The .jsporj file

The Default HTML File

There are two optional minor changes that can be applied to the default.html file.

Update the title to the Safe Project Name
Update the HTML comment for the project references

For both of these I use the $safeprojectname$ template, which is the user supplied project name with any invalid characters stripped out.

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>$safeprojectname$</title>

        <!-- WinJS references -->

        <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />

        <script src="//Microsoft.WinJS.1.0/js/base.js"></script>

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

        <!-- $safeprojectname$ references -->

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

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

    </head>

<body class="contentHost">

    <div class="appTitle">

        <h1>Header</h1>

    </div>

    <div class="backButton">

        <button class="win-backbutton"></button>

    </div>

    <div class="appSubTitle">

        <h2>Subheader</h2>

    </div>

    <div id="contentTarget" class="mainContent">

        <h3>Body Text</h3>

    </div>

</body>

</html>

Listing 3 – The Default HTML File

The VSTemplate

The are several changes to the generated template file, all in the <TemplateContent> tag:

Update the Project TargetFileName in the <Project> tag
Update the ReplaceParameters attribute for the “package.appxmanifest” file in the <ProjectItem> tag
Update the TargetFileName and ReplaceParameters attibutes for the key file in the <ProjectItem> tag

The ReplaceParameters attribute instructs the New Project dialog to look into the referenced file and replace any project templates found with the correct values. The TargetFileName attribute specifies how the referenced file will be named named.

<VSTemplate Version="3.0.0" 

    xmlns="http://schemas.microsoft.com/developer/vstemplate/2005" 

    Type="Project">

  <TemplateData>

    <Name>BlankApplicationWithLayout</Name>

    <Description>Blank Application With MS Recommended Layout

       </Description>

    <ProjectType>JavaScript</ProjectType>

    <ProjectSubType>Windows Store</ProjectSubType>

    <SortOrder>1000</SortOrder>

    <CreateNewFolder>true</CreateNewFolder>

    <DefaultName>BlankAppWithLayout</DefaultName>

    <ProvideDefaultName>true</ProvideDefaultName>

    <LocationField>Enabled</LocationField>

    <EnableLocationBrowseButton>true</EnableLocationBrowseButton>

    <Icon>__TemplateIcon.ico</Icon>

  </TemplateData>

  <TemplateContent>

    <Project TargetFileName="$projectname$.jsproj" 

         File="SimpleLayout.jsproj" ReplaceParameters="true">

      <Folder Name="css" TargetFolderName="css">

        <ProjectItem ReplaceParameters="true" 

            TargetFileName="default.css">default.css</ProjectItem>

      </Folder>

      <Folder Name="images" TargetFolderName="images">

        <ProjectItem ReplaceParameters="false" 

            TargetFileName="logo.png">logo.png</ProjectItem>

        <ProjectItem ReplaceParameters="false" 

            TargetFileName="smalllogo.png">smalllogo.png</ProjectItem>

        <ProjectItem ReplaceParameters="false" 

            TargetFileName="splashscreen.png">

                   splashscreen.png</ProjectItem>

        <ProjectItem ReplaceParameters="false" 

            TargetFileName="storelogo.png">storelogo.png</ProjectItem>

      </Folder>

      <Folder Name="js" TargetFolderName="js">

        <ProjectItem ReplaceParameters="true" 

            TargetFileName="default.js">default.js</ProjectItem>

      </Folder>

      <ProjectItem ReplaceParameters="true" 

            TargetFileName="default.html">default.html</ProjectItem>

      <ProjectItem ReplaceParameters="true" 

            TargetFileName="$projectname$_TemporaryKey.pfx">

                   SimpleLayout_TemporaryKey.pfx</ProjectItem>

      <ProjectItem ReplaceParameters="true" 

            TargetFileName="package.appxmanifest">

                   package.appxmanifest</ProjectItem>

    </Project>

  </TemplateContent>

</VSTemplate>

Listing 4 – The VSTemplate File

Adding the Template to Visual Studio

After updating the files, they need to be added back into the generated .zip file that was exported earlier in the process. Once the zip file contains all of the updated files, there are two ways to register your project template with Visual Studio.

Using The User Templates Setting

Under Tools –> Options –> Projects and Solutions, one of the settings is “User project template location:”. Any template .zip files will be automatically pulled into Visual Studio. (If you have Visual Studio open when you copy the file, it won’t show until the next restart of Visual Studio.)

Figure 4 – User project templates location

The one downside of this method is that the template will only show up under JavaScript and not JavaScript –> Windows Store.

Figure 5 – New Project Dialog

Adding to Visual Studio Install Directory

The second option is to add the files (not in the .zip file) to a new subdirectory in “<VS11 Install Directory>\Common7\IDE\ProjectTemplates\JavaScript\Windows Store\1033”, and then run (as administrator) “devenv.exe /InstallVSTemplates” from a command prompt.

Summary

When you have something good, it’s even better if it’s easy to re-use. If you have a great starting point for your Windows 8 projects, package it up, and add it to your environment as a project template. You can even share it with your coworkers!

About the author

Philip Japikse

Philip Japikse an international speaker, a Microsoft MVP, INETA Community Champion, MCSD, CSM/ CSP, and a passionate member of the developer community, Phil Japikse 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 works as a Developer Evangelist for Telerik's RadControls for Windows 8 as well as the Just family of products (JustCode, JustMock, JustTrace, and JustDecompile) and co-hosts the Hallway Conversations podcast (www.hallwayconversations.com). Phil is also 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 read his Telerik blog at http://blogs.telerik.com/skimedic and his personal blog at www.skimedic.com/blog.

Implementing the Layout Guidelines in WinJS

PhilJapikse — Sun, 03 Feb 2013 08:35:03 -0900

Microsoft has been very forthcoming when it come to application layout in Windows Store applications, and built the CSS appropriately in the starter templates for JavaScript Windows Store Applications. The layout is based on heat map studies and focus groups that determined the optimal use of screen real estate and typography. Figure 1 shows the layout guidelines and the typography sizes.

Figure 1

When selecting one of the more complex project templates (the Grid, Split, Fixed Layout, or Navigation application templates), the required CSS and HTML pages are preconfigured to match the design guidelines. The problem is that the starter templates come with a lot of extra code that you might not need for your application design.

The Blank app template is my favorite starting point for WinJS applications because it allows me to control every aspect of my application. However, it really is just a blank application. This means that the layout must be added manually. Fortunately, the typography comes for free with the ui-dark.css or ui-light.css packaged with the Windows Library for JavaScript that is referenced by default in every JavaScript Windows Store Application.

Typography

Achieving the expected typography is extremely easy, as long as you follow the accepted practices for HTML. The headings (<h1> through <h3>) are styled with the correct font family (Segoe) and the correct sizes (42, 20, 11). The next two headers tags (<h4> through <h5>) are also set at 11pt with diminishing font weights. The final header tag (<h6>) is set at 9pt and is used for tertiary information. Page headers should be set as <h1> elements, sub-headers as <h2>, and small sub-headers and main text should be set as <h3>, as the code in Listing 1 demonstrates and is displayed in Figure 2.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>SimpleLayout</title>
    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    <!-- SimpleLayout references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <h1>42pt Header</h1>
    <p></p>
    <h2>20pt Subheader</h2>
    <p></p>
    <h3>11pt Body Text</h3>
</body>
</html>

Listing 1 – Setting Headers, Sub-headers, and Small Sub-Headers

Figure 2 – Headers, Sub-headers, and Small Sub-Headers Text

Non Header CSS Classes

In addition to the header HTML elements, the CSS files that ship with the Windows Library for JavaScript contain classes provide the same markup without using header tags. The classes range from “win-type-xx-large” (42pt) to “win-type-xx-small” (9pt). And example is shown in Listing 2, and the resulting is shown in Figure 3.

<div class="win-type-xx-large">42pt Largest Text</div>
<p></p>
<div class="win-type-x-large">20pt Secondary Text</div>
<p></p>
<div class="win-type-large">11pt Text</div>
<p></p>

Listing 2 – Built in CSS classes for recommended typography

Figure 3 – Text Using Header Elements and non Header text using built in CSS Classes for Typography

Handling Snapped State

Another advantage to using the built in classes for typography instead of creating your own is that the default style sheets also contain entries to change the fonts when the application is in snapped state. Unfortunately, only header sizes one to three (<h1> - <h3>) and the the three largest win-types (win-type-xx-large – win-type-large) are handled, although it is easy enough to add the missing entries if you need them.

Page Layout

The recommended page layout isn’t built into the style sheets that ship with the WinJS library, but it is very easy to add to your project. The foundation for the layout is using the “display: –ms-grid” style element. (If you need more information in the grid style, please refer to this post on MSDN.)

By using the –ms-grid layout mechanism, you can specify a combination of fixed width (to adhere to the guidelines) and relational widths (to adjust the real estate to accommodate the different devices available to the consumer.

Altering the default.html page

Presuming that your application will be using standard navigation with the main html page (default.html) acting as the target for all page navigation, the page can be separated into four divisions, starting with the <body> tag. The body will be the container for the –ms-grid, dividing the page into two columns and three rows. The second column (120px from the left edge) will hold the app title (top row), the subtitle (second row), and the body (third row). If you plan in placing a standard “back” button in the main page (as opposed to placing it in the the navigation bar), you will place it in the top row of the first column. Applying the divisions to the labels created earlier in this post will create markup like the code in Listing 3.

<body class="contentHost">
    <div class="appTitle">
        <h1>42pt Header</h1>
    </div>
    <div class="backButton">
        <button class="win-backbutton"></button>
    </div>
    <div class="appSubTitle">
        <h2>20pt Subheader</h2>
    </div>
    <div id="contentTarget" class="mainContent">
        <h3>11pt Body Text</h3>
        <p></p>
        <div class="win-type-xx-large">42pt Largest Text</div>
        <p></p>
        <div class="win-type-x-large">20pt Secondary Text</div>
        <p></p>
        <div class="win-type-large">11pt Text</div>
    </div>
</body>

Listing 3 – Layout markup

Creating the CSS classes

The five CSS classes are shown in Listing 4. The main class creates the –ms-grid and the columns and rows. Columns or rows are defined by listing out the widths (heights) of the columns (rows), either in absolute or relative size. The “fr” in the sizing stands for “fractional values”. (For more information on CSS sizing values, please refer to this article.) This is akin to the percentage values used in the past with web development. At rendering, the engine first attempts to allocate all of the fixed space requirements, then divides the remaining space by the sum of all of the fractional units. In the “contentHost” class listed in Listing 4, the grid has two columns, the first 120 pixels wide and the second uses up the remaining space. There are three rows, the first two are 100 and 40 pixels high (respectively), and the final one uses all of the remaining space. This gives us the grid as outlined in Figure 1.

The remaining classes define what row and column each element should be in, determines the alignment for the content, and then uses margins and height values to perfect the desired layout.

.contentHost
{
    display: -ms-grid;
    -ms-grid-columns: 120px 1fr;
    -ms-grid-rows: 100px 40px 1fr;
}
.appTitle
{
    height:62px;
    margin-top:38px;
    -ms-grid-column: 2;
    -ms-grid-row: 1;
    -ms-grid-row-align: end;
}
.backButton {
    height:40px;
    margin-top:60px;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    -ms-grid-row-align: end;
    -ms-grid-column-align: end;
    margin-right:10px;
}
.appSubTitle
{
    height:30px;
    margin-top:5px;
    margin-bottom:5px;
    -ms-grid-column: 2;
    -ms-grid-row: 2;
    -ms-grid-row-align: end;
}
.mainContent
{
    margin-top:5px;
    -ms-grid-column: 2;
    -ms-grid-row: 3;
}

Listing 4 – CSS for the recommended layout

The resulting page (as shown in Figure 4) adheres to the design guidelines with minimal effort.

Summary

Although the more complex project templates for JavaScript Windows Store Applications already implement layout guidelines from Microsoft, those projects were created for very specific scenarios. More often than not, the Blank Template is the best option for your project. Unfortunately, the blank template is very blank, and doesn’t adhere to the guidelines. By adding in the CSS classes from this post, all of your applications can meet the standards.

About the author

Philip Japikse

Deep Discounts Available for VSLive Las Vegas

PhilJapikse — Thu, 31 Jan 2013 13:43:42 -0900

Interested in learning the latest tech from industry experts? Interested in getting a deep discount? You can do both! I will be speaking at VSLive Las Vegas along with a host of very smart people. I’ll be dlivering two sessions, one on WinJS and the other on ASP.NET MVC4.

Registering is extremely easy! Just click on the link, and you will be able to get the entire conference (5 days) for a discounted price of $1,595 – over $500 off.