While refactoring MvvmStack for WinJS code i noticed that I did not show how to persist the state of the services when the app get suspended, so i checked in a new version that persist the data contained inside imageService.js (in a real world app, the data will probably come from a remote server).

The strategy I use is to let the services that need to keep their state add themselves to a services collection exposed by applicationControllerBase object that is passed to each service instance.

Read Corrado's entire article here.

At recent Community Days 2013 conference I had a talk about WinJS development where, at the end, i introduced a demo about MVVM development in HTML 5/Windows Store app, since i found near to zero documentation about this, I decided to share some personal experience.

I’m not going to explain what MVVM (Model-View-ViewModel) is, there is a lot of documentation in Internet, if you need a starting point have a look Laurent Bugnion’s article here, but, as seasoned XAML developer, i admit that I can no longer create production apps without it.

In this first post I’m going to describe what you get when you download the code from http://mvvmstack.codeplex.com.

Read Corrado's entire article here.

CodePlus is an application that I wrote because I wanted a better coding experience on the Windows 8 RT devices since I could not run Visual Studio. Here is a description of CodePlus:

CodePlus – is an editor to allow developers to program in C, C++, C#, CoffeeScript, CSS, HTML, Java, JavaScript, Ruby, Perl, PowerShell, Python, VB.NET, and many more. It supports undo/redo and syntax highlighting. As a developer, you can point to a folder and work on any files in that file.

Read Matt's entire article here.

Another simple but fun application that I wrote for my boys. DoodlePad is yet another paint-like clone that is touch enabled. I wanted to provide a simple means for my boys to play around and make me some cool drawings.

Like my games, this application relies heavily on HTML5 canvas to get its job done. I also want to provide a link to a pure JavaScript color picker I used in the app in case any of you are looking for one.

Read Matt's entire article here.

In this post, I wanted to describe Tank Commander and talk about some of the logic that went into building it.

Here is the description of the game:

Tank Commander is a game that teaches you programming logic. You get one chance to write your program and destroy the base. You can play any level but your real skill comes when you can write all the programs without a single error!

Read Matt's entire article here.

I recently was working on an application where I wanted to use a simple color picker and then make the button that I used to launch the color picker display the color chosen. The library that I ended up using can be found here. I selected it because I didn’t want any dependencies on jQuery or other libraries and just use a lightweight JavaScript approach.

As you can see, I am using the built-in AppBar/NavBar features of Windows 8 to help keep the UI clean.

One problem I ran into while testing my code was that when I picked either a background or brush color that was white, I could no longer see the icon and text on my command bar.

Read Matt's entire article here.

Developing applications for Windows 8 has been so much fun now that we can use HTML5, CSS3, and JavaScript.  I have been inspired to write some simple applications for the Windows 8 App Store.  This has been a very fun experience and I find that the more that I try and push myself, the more I end up learning.

I recently just released a new application for drawing called, “DoodlePad“.  This simple application allows you to draw on the canvas and change your brush color, size, and background of your canvas.  It also allows you to save your drawing, create a new one, or open an existing image.  One of the tricky parts that I ran into when developing this application was trying to provide a good user experience by allowing them to have a background color.

This wasn’t as easy as I had first imagined since the Canvas is transparent by default.  At first I thought I could simply create a fill style and then fill the Canvas rectangle with whatever color a user chose.  However this didn’t work out very well when I was testing because as soon as I would start drawing and then want to change the background, all of my art work up till then would be covered with the new background.

Here is what I came up with, I decided to use a wrapping DIV that I would set the “background-color” property using JavaScript whenever the user selected a different color.  This turned out to work perfectly well due to the Canvas being transparent out of the box.

Now comes the problem, when I want to dump all the beautiful work that the user has done create a masterpiece, the canvas no longer has any information concerning the background.

Read Matt's entire article here.

From developing XAML applications I got used to working with the visual state manager to set various states of my applications and controls. In Windows Store apps that are build using XAML use the visual state manager to change various properties when the view state of the app changes. The app can be ran in fullscreen, filled or snapped state.

When building Windows Store apps using HTML and JavaScript I wanted to show some UI different when the view state changes. One way to accomplish this is to change the CSS class of the elements from JavaScript. Just handle the change in view states and call some methods to set the classes.

Another way comes very close to the visual state manager from the XAML world. And can be done from within Blend.

Read Timmy's entire article here.

I recently tweeted about some upcoming new design templates. At that time these templates were not released yet. Today I stumbled on them again. And it turns out that they are available for free on codeplex. You can see them all here.

It’s not recommended to uses these templates as is. They’re provided as Visual Studio solutions in C# and JS and you should change the design to match your brand, of course.

Read Timmy's entire article here.

Sometime you need to update the contents of a WinJS binding list with new data, this implies removing current elements and insert new ones.

I was a little surprised not to have a clear method available, but a quick look at documentation provided a powerful alternative, the splice method.

_items.splice(0, _items.length);

using this simple line all elements will be removed.

The method has a 3rd optional parameter representing the items to insert after elements have been removed, but in my experience it looks like that databinding doesn’t seem to recognize them.