Posts tagged with "metro"
Last Friday my user group (“The Ocho”) met and heard a special presentation on Metro Design thanks to Blink Interactive.
Valentina and Christina are UW students and interns at Blink and gave us a ton of information about user centric design and then the history and concepts behind Metro design.
I promised that I’d post their slide deck for those that want to take a look, so here it is.
If you were there with us, thanks for joining. If you weren’t, then look up our next meeting at http://www.meetup.com/theocho. Maybe we’ll see you there.
So you could navigate from default.html to
page2.html like this…
But again… you should usually do this. Doing so changes the “top level document location”. This navigation looks something like this…
Where the user is no longer on the
default.html page. For websites, it’s just fine to jump around by navigating the top level like this because you’re usually not too concerned about state, but in a full-fledged application, you usually are concerned with state and you can make your life easier by using the built-in navigation features that are provided by the VS2012 templates.
When you use the navigation functionality, a navigation looks more like this…
Notice that the user is still on
default.html, but the contents of the second page have simply been loaded into what is called the
contenthost. Now, if you loaded a bunch of script and styles on
default.html and even declared some variables and set some state, you still have all of that, even though to the user it appears that you’ve navigated to a second page.
Implementing this is pretty straight-forward. Follow these steps…
Get the navigate.js script file that comes with the Navigation Application project template in VS2012. You can either start with the Navigation Application project template and notice that navigate.js is already in your js folder, or you can create a throw-away Nav project and steal that file.
Reference the navigate.js from your default.html file…
Add a contenthost to your default.html file
And you have the chance to pass some parameters without having to resort to query string parameters which can be cumbersome and restricting. To do this, you can pass a second parameter to the navigate function like this…
Now, when might we actually perform this navigation? Well, in many cases it will be on some user action. For instance, let’s say the user is going to click a button and we want to navigate them to
page2.html. Let’s see what that would look like…
Now let’s look at a bit more pragmatic example. Let’s say we are working in a grid (
WinJS.UI.ListView technically) and when the user touches one of the tiles, we want to navigate to a second page with more details about that element.
This can be wired up much like the simple button example above, but likely the elements in our grid are data bound from some list that we have. In that case, perhaps the easiest way to implement this is by adding a function to the list and then bind the click function just like any of the data elements are bound. Here’s an example of that…
I added to it though. I changed what happens in the
forEach loop. The reason I did is to illustrate how to bind to a function like you bind any other data property. Look in the HTML at the
div just below the one with the id of
template. I’m binding the
onclick attribute to the
clickFunction is what I created in the
strictProcessing for our app and that requires us to set
_supportedForProcessing_ on any functions that we are going to call from the HTML. So, we set that to
true for our function and we’re good to go.
I hope this brings the concept home for you. If you have questions, leave a comment below and I’ll be glad to try to help.