SketchFlow for Christmas

You may have seen this news from Microsoft yesterday, but they are discontinuing the Expression Suite of products. And that’s good news for us developers. Instead of selling these products under their own line (which wasn’t part of MSDN), MS has decided to roll most of these features back into Visual Studio 2012.

I’ve been hoping for a long time to get my hands on one product in particular, SketchFlow. It’s a rapid prototyping tool for web and mobile apps, and beginning yesterday it became a free download as part of the Blend for Visual Studio 2012 toolset. Merry Christmas from Microsoft!

Here’s the details about the products and where they are going: http://expression.microsoft.com/en-US/

Here is the Blend + SketchFlow download: http://www.microsoft.com/en-us/download/details.aspx?id=30702

Here’s a video demo of SketchFlow: http://expression.microsoft.com/en-us/ff723804

RequireJS in PhoneGap Gotcha

I just spend an embarrassing amount of time to debug an issue I hit when moving my html & javascript into a PhoneGap package.  Hopefully this saves somebody else the issue.

The problem was that when I moved my code into PhoneGap, none of my javascript files were loading properly.  After a bit of debugging, I realized the paths were not executing as expected in my requirejs config file.

In my working website, the paths in my config look like this:

requirejs.config({
    //By default load any module IDs from js/lib
    baseUrl: '/js/lib',
    //except, if the module ID starts with "nsm",
    //load it from the js/nsm directory. paths
    //config is relative to the baseUrl, and
    //never includes a ".js" extension since
    //the paths config could be for a directory.
    paths: {
        nsm: '/js/nsm'
    },<snip/>

Bringing that into PhoneGap though resulted in nothing loading for me. I made the mistake of removing the root / for my javascript paths.  That had the benefit of loading scripts from the baseUrl fine, but failed to load them from my nsm directory.

requirejs.config({
    //By default load any module IDs from js/lib
    baseUrl: 'js/lib',
    //except, if the module ID starts with "nsm",
    //load it from the js/nsm directory. paths
    //config is relative to the baseUrl, and
    //never includes a ".js" extension since
    //the paths config could be for a directory.
    paths: {
        nsm:'js/nsm'
    },<snip/>

Then I noticed the paths in my output window when the I pushed the app to my emulator.  (I’m developing this app in Visual Studio 2012 and debugging in the Windows 8 emulator.)

INFO: Writing data for /app/www\img\icons-18-black.png and length = 1767
INFO: Writing data for /app/www\img\icons-18-white.png and length = 1806
INFO: Writing data for /app/www\img\icons-36-black.png and length = 3611
INFO: Writing data for /app/www\img\icons-36-white.png and length = 3648

So my correct paths needed to be:

requirejs.config({
    //By default load any module IDs from js/lib
    baseUrl: '/app/www/js/lib',
    //except, if the module ID starts with "nsm",
    //load it from the js/nsm directory. paths
    //config is relative to the baseUrl, and
    //never includes a ".js" extension since
    //the paths config could be for a directory.
    paths: {
        nsm:'/app/www/js/nsm'
    },<snip/>

I had thought the www directory was the root in my PhoneGap app.  I was wrong.