Over the past couple of months I’ve built Applications and Games for Windows 8.
This was an amazing experience especially when I built everything in JavaScript, as you know Windows 8 allow you to build metro application in:
This first part will focus on the main structure and basics of JavaScript Grid Application and over the next posts I’ll drill down to more features in Windows 8.
Step 1: Basics
When writing Windows 8 JavaScript Style App you might want to learn a little bit on WinJS and basic actions already available in Windows 8 JavaScript App, I saw posts about integrating JQuery to Windows 8 JavaScript applications, this is not necessary, WinJS offers many of those:
-
Selectors:
-
document.querySelector(".headerTemplate")
-
document.querySelectorAll("div")
- Text
- document.querySelector(“#Title”).textContent;
- Animation
- WinJS.UI.Animation.fadeIn(document.querySelector(“div”));
And more…
Step 2: Application Styles
When you open a new JavaScript metro app in Visual Studio 11 you can choose from the following:
- Blank Application – A single-page project for windows metro style app that has no predefined controls or layout.
- Split Application - A two-page project for windows metro style app that navigates among grouped items. The first page allows group selection while the second display an item list alongside details for the selected item.
- Fixed Layout Application – A project for windows metro style app that scales a fixed aspect ratio layout.
- Navigation Application – A project for a windows metro style app that has predefined controls for navigation.
- Grid Application – A multi-page project for windows metro style app that navigates among groups of items. Dedicated pages display group and item details.
for this demo I’ve created new Grid Application:
Step 3: Project Structure
In previous versions of Visual Studio 11 and Windows 8 there were a JS folder with all WinJS files, in the new version all necessary files under the References in two main files:
Beside that when creating Grid Application you will have three pages:
- groupDetailsPage
- groupedItemsPage
- itemDetailsPage
Notice that each Html page have its own Css and JavaScript file, there is no naming convention that automatically takes those and combine but in order to have some order in or application this is the best practice on how to build pages in Windows 8 JavaScript application.
Step 4: Application Flow
Everything starts from default.html, this page loaded all necessary js files and css files and using the PageControlNavigator it navigate the application to groupedItemsPage
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Application1</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
<script src="//Microsoft.WinJS.0.6/js/base.js"></script>
<script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
<!-- Application1 references -->
<link href="/css/default.css" rel="stylesheet">
<script src="/js/data.js"></script>
<script src="/js/navigator.js"></script>
<script src="/js/default.js"></script>
</head>
<body>
<div id="contenthost"
data-win-control="Application1.PageControlNavigator"
data-win-options="{home: '/html/groupedItemsPage.html'}"></div>
</body>
</html>
The groupedItemsPage loaded the relevant JS/CSS files.
<title>groupedItemsPage</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
<script src="//Microsoft.WinJS.0.6/js/base.js"></script>
<script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
<link href="/css/default.css" rel="stylesheet">
<link href="/css/groupedItemsPage.css" rel="stylesheet">
<script src="/js/data.js"></script>
<script src="/js/groupedItemsPage.js"></script>
This flow apply to each page you load.
Step 5: Page Definition
Now, after I’ve navigate to my page, how I can define what to display?
Instead register to Navigation event – navigated in groupedItemsPage.js and write this condition in each page:
(We only wants to do some actions to our page if it’s the right one…
if (e.location === '/html/groupedItemsPage.html')
For each page you load you need to define what should happened when you navigate to him, using WinJS.UI.Pages.define method you can register to each page events.
use strict:
Strict Mode is a new feature in ECMAScript 5 that allows you to place a program, or a function, in a "strict" operating context. This strict context prevents certain actions from being taken and throws more exceptions.
Strict mode helps out in a couple ways:
- It catches some common coding bloopers, throwing exceptions.
- It prevents, or throws errors, when relatively "unsafe" actions are taken (such as gaining access to the global object).
- It disables features that are confusing or poorly thought out.
(function () {
"use strict";
var appView = Windows.UI.ViewManagement.ApplicationView;
var appViewState = Windows.UI.ViewManagement.ApplicationViewState;
var nav = WinJS.Navigation;
var ui = WinJS.UI;
var utils = WinJS.Utilities;
ui.Pages.define("/html/groupedItemsPage.html", {
itemInvoked: function (eventObject) {
//User Click
},
ready: function (element, options) {
// Page Loaded
},
updateLayout: function (element, viewState) {
//Layout Changed
}
});
})();
Another syntax to perform Page definition and use global methods ( right now each method or variable you define in Ready or any other method is only part of that function and it’s not visible to others) inside that strict mode is like that:
(function () {
"use strict";
var appView = Windows.UI.ViewManagement.ApplicationView;
var appViewState = Windows.UI.ViewManagement.ApplicationViewState;
var nav = WinJS.Navigation;
var ui = WinJS.UI;
var utils = WinJS.Utilities;
function ready(element, options) {
}
function itemInvoked(eventObject) {
}
function updateLayout(element, viewState) {
}
ui.Pages.define("/html/groupedItemsPage.html", {
itemInvoked: itemInvoked,
ready: ready,
updateLayout: updateLayout
});
})();
Step 6: Namespaces & Classes
Some of you might think this is a new feature in JavaScript but No, even without WinJS you can write Namespace in JavaScirpt, using WinJS.Namespace and WinJS.Class you can define Namespaces and Classes very easily.
WinJS.Namespace.define("data", {
web: WinJS.Class.define({
load: loadRoamingData,
save: saveRoamingData
}),
local: WinJS.Class.define({
load: loadLocalData,
save: saveLocalData
}),
items:groupedItem
});
Now, from everywhere in my code I can call it like that:
data.web.load() or getting items –> data.items
Step 7: WinJS.UI.ListView
ListView is just one of the controls coming with WinJS, ListView Displays data items in a customizable list or grid.
Define ListView in your Html page is easy, you define WinJS.UI.ListView value in data-win-control attribute inside a div element.
<div class="groupeditemslist" aria-label="List of groups"
data-win-control="WinJS.UI.ListView"
data-win-options="{ selectionMode: 'none' }"></div>
Populate the data inside is also a simple task, in groupedItemsPage.js define under ready
event to take the groupeditemslist wincontrol, and using our previous namespace takes
data.items as datasource to our list.
ready: function (element, options) {
var listView = element.querySelector(".groupeditemslist").winControl;
//Also Possible –> listView.itemDataSource = data.items.dataSource
ui.setOptions(listView, {
itemDataSource: data.items.dataSource
});
},
Step 8: Binding and Templates
Now after you define your listview datasource, how to define the display of each item?
Think our data.items contains a list of item object that has title, subtitle and a backgroundImage.
In our groupedItemsPage.html page we define another WinJS control called - WinJS.Binding.Template, inside that control you need to add additional attribute for each child element called - data-win-bind and define the path for binding.
<!-- These templates are used to display each item in the ListView declared
below. -->
<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
<img class="item-image" src="#" data-win-bind="src: backgroundImage;
alt: title" />
<div class="item-overlay">
<h4 class="item-title" data-win-bind="textContent: title"></h4>
<h6 class="item-subtitle win-type-ellipsis"
data-win-bind="textContent: subtitle"></h6>
</div>
</div>
One more thing, you need to set this template as itemTemplate for our listview:
ready: function (element, options) {
var listView = element.querySelector(".groupeditemslist").winControl;
ui.setOptions(listView, {
itemDataSource: data.groups.dataSource,
itemTemplate: element.querySelector(".itemtemplate")
});
},
Enjoy!
Over my last posts I talked about Windows Phone 7, we saw some real examples for Location Service, Maps, Ads, Accelerometer and more.
Because I saw how many of you download my demo projects I understand the need for more demos around Windows Phone 7.
So Today, we’ll build a Puzzle Game for Windows Phone 7 (Including the Sources 
)
Download Demo Project
Step 1: The Puzzle Base
There are several ways to build the puzzle layer, In my demo I chose a simple way of a Canvas with 16 children's type of StackPanel.
Basically I have a lower canvas with the Board image, on top of it I put another canvas with 16 Stack Panels, each panel spread to 100X100
Now, when I have the main puzzle structure I added an image of size 95x95 to each Stack Panel. (the reason it’s not 100X100 – is to leave a space between each), for each image I set the Tag property with the value of the image – 1.png Tag = 1
I’ve also add a timer for counting the time took to solve this puzzle and another int property to count the moves the user made.
Step 2: Find
One of the most common things we’ll use in our code, is FIND:
- Find Stack Panel by Image Id
- Find the Empty Panel
- Find the Value by position
Find the parent of image with a specific Tag value
StackPanel FindStackPanelByTagId(int tag)
{
if (tag == 16)
{
return (from stackPanel in ContentPanel.Children.OfType<StackPanel>()
where stackPanel.Children.Count == 0 select stackPanel).First();
}
else
{
return (from stackPanel in ContentPanel.Children.OfType<StackPanel>()
from img in stackPanel.Children.OfType<Image>()
where Convert.ToInt32(img.Tag) == tag
select stackPanel).First();
}
}
Find the position of StackPanel without children.
int FindEmptyItemPosition()
{
int index = 15;
for (int i = 0; i < 15; i++)
{
if (((StackPanel)ContentPanel.Children[i]).Children.Count == 0)
return index;
index--;
}
return 0;
}
Get the Tag value by StackPanel position.
int FindItemValueByPosition(int position)
{
return ((StackPanel)ContentPanel.Children[position]).Children.Count > 0
? Convert.ToInt32(((Image)((StackPanel)ContentPanel.Children
[position]).Children[0]).Tag) : 16;
}
Step 3: Scrambles
Now we have are puzzle structure and Find method helpers, the first thing is to Scramble or puzzle.
So I wrote a method that runs n times and generate random numbers from 1 to 16, for each number find the current StackPanel that hold him. (FindStackPanelByTagId) .
If First and Second number are smaller then 16 then - swipe the images and tag values.
If One of the values is 16 the swipe - One Stackpanel will be cleared of Items
void Scrambles()
{
var count = 0;
while (count < 25)
{
var a = _rnd.Next(1, 17);
var b = _rnd.Next(1, 17);
if (a == b) continue;
var stack1 = FindStackPanelByTagId(a);
var stack2 = FindStackPanelByTagId(b);
if (a == 16)
{
var image2 = stack2.Children[0];
stack2.Children.Clear();
stack1.Children.Add(image2);
}
else if (b == 16)
{
var image1 = stack1.Children[0];
stack1.Children.Clear();
stack2.Children.Add(image1);
}
else
{
var image1 = stack1.Children[0];
var image2 = stack2.Children[0];
stack1.Children.Clear();
stack2.Children.Clear();
stack1.Children.Add(image2);
stack2.Children.Add(image1);
}
count++;
}
}
Step 4: Check Board
Each move the user do, perform a loop and checks values from 1 to 16. if the numbers are not in the correct order than nothing happed.
Else You stop the game timer and display a win message.
void CheckBoard()
{
var index = 1;
for (var i = 15; i > 0; i--)
{
if (FindItemValueByPosition(i) != index) return;
index++;
}
_timer.Stop();
WinGrid.Visibility = System.Windows.Visibility.Visible;
}
Step 5: Move Items
Before we can apply move of items we need to check several things, the first thing is:
Check if the Item Can move, Checking all panels around the specific item with -1 +1 -4 +4, if one of them is empty then he can move.
StackPanel CanMove(UIElement itemToMove)
{
var count = ContentPanel.Children.Count;
for (var i = 0; i < count; i++)
{
if (!(ContentPanel.Children[i] is StackPanel)) continue;
var stackPanel = (StackPanel)ContentPanel.Children[i];
if (!stackPanel.Children.Contains(itemToMove)) continue;
if (!IsBorderSwich(i, i + 1) && i + 1 <= 15 && ContentPanel.
Children[i + 1] != null &&
((StackPanel)ContentPanel.Children[i + 1]).Children.Count == 0)
return ((StackPanel)ContentPanel.Children[i + 1]);
if (!IsBorderSwich(i, i - 1) && i - 1 > -1 && ContentPanel.
Children[i - 1] != null &&
((StackPanel)ContentPanel.Children[i - 1]).Children.Count == 0)
return ((StackPanel)ContentPanel.Children[i - 1]);
if (i + 4 <= 15 && ContentPanel.Children[i + 4] != null &&
((StackPanel)ContentPanel.Children[i + 4]).Children.Count == 0)
return ((StackPanel)ContentPanel.Children[i + 4]);
if (i - 4 > -1 && ContentPanel.Children[i - 4] != null &&
((StackPanel)ContentPanel.Children[i - 4]).Children.Count == 0)
return ((StackPanel)ContentPanel.Children[i - 4]);
}
return null;
}
The Second - if both of the items you want to swipe are in the Board borders do nothing.
private readonly int[] _bordersNums = { 0, 4, 8, 12, 3, 7, 11, 15 };
bool IsBorderSwich(int a, int b)
{
return _bordersNums.Contains(a) && _bordersNums.Contains(b);
}
Now after we have those safety methods we can move the items based on user clicks:
Just register to ItemManipulationStarted on the entire windows, for each event check if the item isn’t image do nothing, if it does, call the CanMove method to verify that this item can move around.
private void ItemManipulationStarted(object sender,
ManipulationStartedEventArgs e)
{
var item = (UIElement)e.OriginalSource;
if (!(item is Image)) return;
var to = CanMove(item);
if (to != null)
{
_moves++;
txtMoves.Text = _moves.ToString();
MoveItem(item, to);
CheckBoard();
}
e.Handled = true;
e.Complete();
}
MoveItem - Move Item From One StackPanel to Another.
void MoveItem(UIElement item, StackPanel targetPanel)
{
foreach (var stackPanel in
ContentPanel.Children.OfType<StackPanel>().Where(stackPanel =>
stackPanel.Children.Count > 0 && stackPanel.Children.Contains(item)))
{
stackPanel.Children.Remove(item);
}
targetPanel.Children.Add(item);
}
Step 6: Check If Puzzle Solvable
This part of very important, because half of the starting positions for the n-puzzle are impossible to resolve.
Johnson & Story (1879) used a parity argument to show that half of the starting positions for the n-puzzle are impossible to resolve, no matter how many moves are made. This is done by considering a function of the tile configuration that is invariant under any valid move, and then using this to partition the space of all possible labeled states into two equivalence classes of reachable and unreachable states.
The Puzzle 15 (n-puzzle) is a classical problem for modeling algorithms involving heuristics. Commonly used heuristics for this problem include counting the number of misplaced tiles and finding the sum of the Manhattan distances between each block and its position in the goal configuration. Note that both are admissible, i.e., they never overestimate the number of moves left, which ensures optimality for certain search algorithms such as A*.
bool CheckIfSolvable()
{
var n = 0;
for (var i = 1; i <= 16; i++)
{
if (!(ContentPanel.Children[i] is StackPanel)) continue;
var num1 = FindItemValueByPosition(i);
var num2 = FindItemValueByPosition(i - 1);
if (num1 > num2)
{
n++;
}
}
var emptyPos = FindEmptyItemPosition();
return n % 2 == (emptyPos + emptyPos / 4) % 2 ? true : false;
}
Step 7: Setup a New Game
Now, when we defined everything we need, let’s write the New Game method, reset all timer and moves number back to 0, call the Scrambles method, and while the game is unsolvable continue scramble the game, once it’s solvable start the timer.
public void NewGame()
{
_moves = 0;
txtMoves.Text = "0";
txtTime.Text = Const.DefaultTimeValue;
Scrambles();
while (!CheckIfSolvable())
{
Scrambles();
}
_startTime = DateTime.Now.AddSeconds(1);
_timer.Start();
GridScrambling.Visibility = System.Windows.Visibility.Collapsed;
}
Download Demo Project
Enjoy