Blend for Visual Studio, HTML5, Windows 8.1, Windows Store apps, XAML

What’s new in Blend for Visual Studio 2013

First Look On the first day of the Microsoft Build 2013 conference the preview of Visual Studio 2013 was announced. The preview contains a new version of Blend for Visual Studio. This preview has some new features and some “old” features that didn’t work in the previous version, mainly when building Windows Store apps. The first thing noticeable after installing the preview is the new icon. Opening Blend will show you the splash screen which looks pretty much the same as the 2012 version. So does the welcome screen. A thing to note is that while all platforms are supported,…

CSS, Expression Blend, HTML5, Windows Store apps

setting view states in HTML windows store apps using Blend

Intro 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…

HTML5, WinJs

SFX in WinJS

When working on my entry for the Js13kGames contest I was looking for a synthesizer or sound generator for HTML5. I came across a javascript port of an a synthesizer in actionscript. It’s build by David Humphrey. Markus Neubrand added the parameter strings. It is available on github. Due to the time limit I only got it to work in Firefox at the time, but the library works in Chrome too. Unfortunately Internet Explorer is not supported. But, when porting the code to an Windows Store app I suddenly noticed that the sounds worked. I’ve created a small module around…

Expression Blend, Windows 8, WinJs

WinJs DesignTime Mode

While working on the port of my game Orbizoid to Windows 8 I ran into an issue with the starfield in de background of the game. The starfield was running in Expression Blend too. At first this was kinda funny, but soon the performance dropped and it became unworkable. There used to be a property to detect if you are running inside Expression Blend before, I hoped this was still available when working on Windows 8 applications in javascript. I had to search for a moment, but it is possible. var isInDesigner = Windows.ApplicationModel.DesignMode.designModeEnabled; if(!isInDesigner){ // code not running in…

HTML5

Js13kgames contest

Last few weeks I worked on a an entry for the Js13kGames contest. The main goal of this contest was to write a game in javascript that was only 13k in size. I find that writing software for contests is a great way to learn more about a language. The tight deadline forces you to think and you will end up with a finished product. Because I’m working a lot with javascript lately, this contest was a great training. I build the game Orbizoid. The objective of the game is to catch the colored stars that float around with moons…

Expression Blend

Getting started with Metro, JS and blend

Intro In this first tutorial in a series about building a Windows 8 application with JavaScript, HMTL and CSS using Expression Blend 5, we’re going to make a start on a very simple game. In this game the player has to guess a random number between 1 and 10. The player wins if the guess is correct, and looses if it’s wrong. In future parts of the series this game will be extended to include various features of WinJS and Windows 8. File-New I’ve started with a new “Blank App” from the HTML list. I added a few HTML elements…

CSS, Expression Blend, HTML5, Windows 8

Discovering Expression Blend 5 – ListView

Often you need to display a list of items in a application. The Windows Library for JavaScript contains a ListView control for you to use in your applications. The control can be bound to a data source and templated from HTML. Getting started We’ll start off by creating a new project and choosing the Fixed Layout Application project template. As you can see, the template has added a paragraph (p) to the tree which contains some text. You can use that to place the title of your application. The ListView is going to be in the same div as that…

CSS, Expression Blend, HTML5

Discovering Expression Blend 5 – Styles

In my previous article I explained the different templates of the Expression Blend 5 preview. Today I would like to walk you through some of the basic of using CSS, or Cascading Style Sheets, in Expression Blend 5. You’ll need CSS to define the look and formatting of your Windows 8 Metro Style application.  Expression Blend 5 helps you create your styles in pretty much the same way you are used to when working on Silverlight or WPF applications in Expression Blend 4 and earlier. But not entirely.   Defining a style For sake of simplicity I’ve created a new…

Expression Blend, HTML5

Discovering Expression Blend 5 – Templates

At the BUILD event a lot of great applications were released. The big one of course was the Windows 8 preview. One of the released ISOs contains a couple of preview version of development tools. Expression Blend 5 preview is one of them.   This preview of Expression Blend 5 doesn’t let you create Silverlight, WPF or Windows Phone 7 apps. Instead it does what a lot of people where hoping for: Editing/Designing Html5, Css and JavaScript. Project Templates The first thing to notice are the new project templates. There’s only one category in the preview: Windows Metro Style. The…

HTML5, Presentation, Silverlight, Slides

HTML5 – An Introduction – Code and Slides

Today I gave a talk about HTML5 at the UNIT4 DevDay. Thanks to UNIT4 for giving me this opportunity and thanks to everyone who attended my session! Although HTML5 far from completed, it is a lot of fun to work with. Not all tags used in HTML5 are supported by the browsers. You can try the demos on different browsers to see if they work. Download the code here. Download the slides here. For those at UNIT4 who missed this presentation, I will repeat it at UNIT4 Internet Solutions and at UNIT4 Oost Nederland.  So maybe I’ll see you there.…