codefoster | to inform and to inspire
Jeremy Foster
@codefoster

Gen Appathon!

by Jeremy Foster 24. October 2012 12:58

If you’re anywhere close to Redmond, Washington, you’ve got to attend the Gen Appathon! It’s on November 9 in Building 33 on the Microsoft Campus. It’s going to be a big hackathon with great prizes and we’re going to have a lot of experts in the room helping you with Windows 8 and Windows Phone 8 apps!

Get all the information you need and register at https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032532285

See you there!

Tags:

Developer Community | Windows 8

Giveaway: Gears of War 3 for Xbox 360

by Jeremy Foster 23. October 2012 17:37

I have an extra, shrink wrapped copy of Gears of War 3 for Xbox that I’d like to give away to a random Twitter follower. Follow me on Twitter at http://www.twitter.com/codefoster and retweet this tweet to enter. I’ll request your mailing address if you win and send it to you snail mail style. I’ll draw a name on Friday, Nov 2 at noon.

Tags:

Thirty Nine Fourteen

by Jeremy Foster 15. October 2012 07:23

That’s how many lines of CSS code make up the ui-light.css file that you get with WinJS.

What exactly are these nearly 4,000 lines of code doing for you? A lot of good stuff actually. And not only that, but there’s a lot that can be learned from spending some time looking at this file with a microscope. The techniques used in it are pretty advanced as far as CSS goes, and there are some classes, pseudo-classes, and pseudo-elements that you’ve likely not been introduced to yet.

All-in-all, the style sheet defines the look and feel of a Windows 8 app, all of its typography, all of the standard HTML controls, and all of the controls provided for you by WinJS such as ListView, slider, and many more.

image

Here are a few of the highlights I want to call out…

  • header styles. The font size and weight of the standard headers h1 through h6 are defined using the Windows 8 type ramp – 42pt, 20pt, 11pt, and 9pt. Also, along with each header is an accompanying class so that the font ramp can be applied to text elements without making them headers. For h1 there is win-type-xx-large, for h2 win-type-x-large, for h3 win-type-large, for h4 win-type-medium, for h5 win-type-small, and for h6 there’s win-type-xx-small.
  • win-type-ellipsis is defined with the text-overflow: ellipsis property (and a couple of others) to allow text continuation
  • HTML controls such as button, progress, input, select, and textarea are defaulted with minimum widths and heights so they work well in a touch environment.
  • win-backbutton is defined as a class you can add to a button element to make it render like the round back button you see all over the place in Windows 8. The various states of the button such as hover or disabled are defined as well.
  • snapped media query. When the user snaps an app, there’s a lot less space for everything, so the size of the entire type ramp is reduced as is the size of the win-backbutton, the size of the appbar and appbar buttons, and the padding and margins in various places.
  • high contrast mode is supported throughout Windows 8 to improve visibility for people that need it. There is a media query expression for –ms-high-contrast that is captured in various media queries and defined to create more vivid contrasts and easier reading.

I’m impressed with the CSS file and all of the time and consideration it must have taken to not only get all of these definitions written, but also to get them in the right order and to take into account things like the CSS specificity. There’s very little in the file that feels remotely “hacky”. Still, I’m glad I wasn’t tasked with authoring it!

Tags:

CSS

Well done, Telerik

by Jeremy Foster 4. October 2012 09:34

If you haven’t seen Telerik’s Windows 8 controls, you should check it out. Just go to telerik.com and install the trial and then open the demo app (there’s one for HTML/JS and one for XAML/C#) in Visual Studio and launch it.

Their presentation is awesome and the controls themselves are way cool. They’re simple and clean and have just the right amount of animation – enough to make them look alive but not so much they look brassy.

image

image

Tags:

Windows 8

Super Simple Swipe Sections

by Jeremy Foster 2. October 2012 10:37

Yesteryear we used tabs in UI. The problem with tabs and similar navigation aides is that they demand pixels to tell users about where they might go, whereas, good Windows 8 design tells users about where they are.

If you’re on a page that shows multiple entities or sections or parts or whatever, just hint to the user that there’s more off the page by giving yourself a left margin but cutting content off on the right.

I made a pretty simple way to do this for a Windows 8 app and you’re free to steal it.

Just add this to your default.css…

/*Swipers*/
.swiper {
    width:100%;
    display: -ms-flexbox;
    -ms-scroll-snap-x: mandatory snapInterval(0%, 80%);
    overflow-x: scroll;
    overflow-y: hidden;
}

.swiper > * {
    box-sizing: border-box;
    width: 80%;
    padding-right:80px;
}

    .swiper > * > h2 {
        margin-bottom: 20px;
    }

Then add class=”swiper” to the main section on your page (the one that has a role of main)…

<section aria-label="Main content" role="main" class="swiper">
    ...
</section>
..

You might want to give you main section the standard 120 pixel left margin like this…

.myPage section[role=main] {
    margin-left: 120px;
}

Then give it contents something like this…

<section aria-label="Main content" role="main" class="swiper">
    <div>
        <h2>Section One</h2>
        ...
    </div>
    <div>
        <h2>Section Two</h2>
        ...
    </div>
    <div>
        <h2>Section Three</h2>
        ...
    </div>
    <div></div>
</section>

Notice a few things…

  • the swiper’s immediate children can be any type of element (*). I’m using divs in my example.
  • the children will be 80% and have 80% snappoint intervals. This is so that the content from the next page will show up on screen and hint to the user to swipe and see more
  • there is an extra <div></div> at the end. This is necessary for being able to snap to the last section with a swipe gesture
  • each section has a header (h2) and it will automatically have the correct 20 pixels under it

That’s it. I hope it comes in useful to you.

Copyright (c) Microsoft. All rights reserved. The code provided in this post is licensed under the MS-Limited Public License

Tags:

CSS | Design | HTML | Windows 8

Event Handlers in a Windows 8 App

by Jeremy Foster 1. October 2012 10:53

One of the nicest things about JavaScript is the way it considers function. Instead of being wholly owned subsidiaries of classes, functions are as portable as any other object, and their arguments are dynamic too. This makes for some elegant event handling.

In this screencast, I'll attempt to give you a taste of how to wire up events in a Windows 8 app using JavaScript. It's a pretty basic scope and I don't enumerate the many events available on the many WinJS controls. I also don't cover the event model around gestures or manipulations, but I hope to share more about those exciting areas later.

Tags:

HTML | JavaScript | Windows 8 | WinJS

Windows 8 Developer Community and Resources

by Jeremy Foster 1. October 2012 08:12

I’d like to provide a somewhat comprehensive resource of resources. If you are looking for help, looking for support, or looking for some camaraderie in your fight to get an app in the store and claim your fame and fortune, then look no further.

My whole job is staying plugged in with you – the developer community. Some work for large organizations as a cog. Others are at start ups and your pretty much the whole machine. Whether you’re a contributor, though, or going it alone, you can’t go it alone. You need good involvement in your local developer community. I have prepared a lot of course material, presentation outlines, and book content, and I learn a lot in the process. So volunteer to present at a local user group even if it’s a bit daunting. If all you do is fight one fire at a time at work using what you already know then you may not stretch or stretch quickly enough. You may not be as agile as you can be.

Resources

That’s it for now. Keep plugged in. Keep coding!

Tags: , , , , , , , , , , ,

Developer Community | Windows 8

Storage in a Windows 8 App

by Jeremy Foster 26. September 2012 21:35

Apps generate data. Some of them generate a ton of data and others just a few little bits and pieces. Allow me to enumerate your options for storing stuff when you’re working on an app for Windows 8. There are subtle differences between the way storage is done in an HTML/JS app versus a .NET or a C++, but for most of the techniques you’re just accessing the WinRT library so the steps are practically identical.

Before we enumerate the types of storage, let’s talk about the types of data that typically get generated in an app. I’ll break them up into application state, user settings, application data, and user data.

Application State

Application state (or session state) is the data that pertains to what the user is doing in their use of an app. If the user has browsed to the registration page and starting typing their name and address in, then that data is session state. If the user has to drop their tablet (figuratively of course), switch apps, or something else and doesn’t get back to it for some time, then the kind thing (only humane option?) to do is remember their state and restore it when they return.

User Settings

A user has preferences. Your user might want the music in their game turned off. They might want to choose a theme color. They might want to turn on automatic social sharing. These are preferences. They usually take up hardly any space, but it’s they’re really important to your user. The best thing to do is store them in the cloud instead of just on a device so the user feels like they are remembered wherever they go.

Application Data

Application data is the data generated by your app that may have everything in the world to do with your user, but your user is going to assume that the app is holding that data for him and doesn’t want to manage it himself outside of the app. If you installed a task list app, you’d expect it to hold tasks for you, right? That’s app data. The line can be blurry between app data and user data, so read on.

User Data

User data is data generated by the app, but belongs more to the user than the app. The user expects to be able to send the data to a friend, open it in a different program, or back it up to the cloud. User data is everything you find in the libraries – the documents library, the music library, etc.

Implementation

So, let’s talk about how to implement these.

Application state can be stored in WinJS.Application.sessionState. That’s an object that WinJS and Windows handle for you and plays well with the lifecycle of your app. Saving to the sessionState object couldn’t be easier. Just issue a command like…

WinJS.Application.sessionState = {
    currentPage: "widgets",
    formFields: {
        firstName: "Tom",
        lastName: "Jones"
    }
};

You could do this anytime during the use of your app or you could wait until the app.oncheckpoint event (look on your default.js page for that) and just do it when your app is on it’s way out of the spotlight.

Keep in mind that this is for session data only. Windows assumes that if your user explicitly ends the app, they are ending their session and sessionState is not stored. You also can’t count on it after an application crash, so make sure it’s only transient data that wouldn’t ruin the users day to lose.

User settings are again very important. You have many options for storing them, but only two that I recommend. The first is localSettings and the second is roamingSettings. Only use localSettings if you have good reason not to roam the setting to the cloud. If you use roamingSettings and the user doesn’t have a Microsoft account, it will still store locally. Both of these are accessed from Windows.Storage.ApplicationData.current. You can store a new setting value like this…

localSettings.values["gameMusic"] = "off"; 

Application data can work much like the user settings technically, but it serves a different purpose. Imagine the task list app I mentioned before. The tasks themselves must obviously be stored and you - the developer - have quite a variety of options. You have to ask yourself a few questions like:

  • Does the user need to share the app data with select others?
  • Does the user need access to the data on multiple devices?
  • Does the data feed any other apps either on the same or another platform?

It’s very possible that just storing data local to the device is plenty. In that case, the localFolder from Windows.Storage.ApplicationData.current. This spot is dedicated to storing data for your app and your app only. No other apps have access to it actually.

If you have a very small amount of application data (less than 100k) then you can use the roamingFolder from the same Windows.Storage.ApplicationData.current. This data will, just like the roamingSettings, be synced to the user’s online profile and back down to any other devices they might log in to.

You have a variety of other options for storing data such as a local database, online database, online user drive, and more, but I’ll save those for another day and another post.

Finally, we’ll talk about user data. Unlike application data, users will expect to have ownership of their user data. When a user creates a spreadsheet, this is not data that just exists inside of Excel. The user expects to have that spreadsheet in their documents and be able to work with it (share it, rename it, organize it, …) outside of Excel.

If your app is one that will work with user data, then you need to pick a file format and create the association. This is done in the package.appxmanifest where you’ll also need to add a capability to access the users documents. It’s quite a easy thing to use the open and save file dialogs from your app and the user will love having full access not only to his documents, but also all apps he has installed that implement the FilePicker contract.

That’s quite enough on storage for now. Perhaps some of the following locations from within the Windows Dev Center will be helpful to you…

Storage and state reference

Windows.Storage namespace

WinJS.Application.sessionState object

How to suspend an app

Manage app lifecycle and state

Optimizing your app's lifecycle

Have fun.

Tags:

JavaScript | Windows 8 | WinRT

Using WinJS.xhr to Fetch This and That

by Jeremy Foster 26. September 2012 09:24

You know the story. A call to a website used to be little more than a single request with its single response. But times have changed. The web is all grown up and any given visit to a website is often accompanied by multiple requests for more atomic bits of data.

The popular thing to do now, in fact, is to implement websites using a single page architecture where the user does one primary request and response to get the core document, and then the rest of his or her time spent in the app consists only of these tiny requests/response cycles that bring just what's necessary.

This is how Windows 8 apps using HTML/JS work - they are single page apps. And to play in this sandbox, you need to get good at using WinJS.xhr(). WinJS.xhr() is not a fancy function. It doesn't do a lot more than any of the other libraries do when they wrap the XmlHttpRequest. It makes for good, simple, elegant though and I like that.

Watch this screencast of the xhr() function in action and enjoy.

Tags: , , , , , , ,

JavaScript | Windows 8 | WinJS

Query Your DOM

by Jeremy Foster 24. September 2012 11:11

Your HTML describes the structure and sequence of your document. It’s the starting point for your UI. But it’s just the starting point. Things change. Items get added, removed, or moved. Styles change. Dialogs appear and disappear, and the user touches things and drags them around. All (or at least most) of this interaction happens in JavaScript where you can instruct your document in the language of code to react to your user and do what you command.

Before you can move something, remove something, or add to something, though, you’ll need to select it. That’s what I’m going to talk about here. I’m going to talk about selecting one or more elements from your document object model (DOM) from JavaScript so you can work with them. This is called querying the DOM.

It used to be rather difficult to query the DOM. When I was a kid I not only had to walk uphill to school both ways, but I also had to use rudimentary and often proprietary JavaScript functions for getting access to in my HTML. The popular getElementById() was helpful but it only ever got one thing at a time. Usually, I resorted to looping through document.all() and asking questions about each and every element on the page to see if it was in my reticle for the change I had in mind.

Today, things are different. When I first met jQuery and started selecting from the DOM using the CSS selector syntax I already knew, it was love at first $. When I started Windows 8 development using HTML/JS I remember thinking “okay… but only if I get to take jQuery in with me”. But since I’ve hardly used it. The reason is that ECMAScript 5 introduced querySelector() and querySelectorAll(). These yumful functions take CSS queries just like the jQuery selector syntax and return (respectively) a single DOM element or a list of nodes.

Besides these selection methods, WinJS also added a couple of functions (that just wrap querySelector and querySelectorAll BTW). They are id() and query() and they’re in the WinJS.Utilities namespace.

I talk all about of these selection methods in a previous post called Selecting Elements in a Windows 8 HTML App.

I liked using querySelector and querySelectorAll because they were the closest to the metal being right in the JavaScript language, but there was one thing I didn’t like about them. querySelector returns a DOM element… that’s fine. querySelectorAll returns a node list, though and I usually want to work with an array so I can use all of the ECMAScript 5 array functions. So I wrote a wrapper that I simply call q() which stands for query. It’s short and has a little bit of abstract functionality that I like, and I wrote a post about it too. It’s called Query Selector Helper for Metro Apps. But I have since upgraded the helper function to allow the caller to force the result of the call to be an array. That way, even if it is only a single result that is returned, it will return it as an array of one, so the caller doesn’t have to have switching logic.

I keep the latest version of this function in my ocho.js library which is part of my codeSHOW project on CodePlex. So to get the latest version of the helper, simply go to http://codeshow.codeplex.com, go to the Source Code tab, choose Browse, and then browse to /codeSHOW/js/ocho.js.

Enjoy!

Tags:

HTML | JavaScript | Windows 8

Feed Subscribe