• DaveDev

    Where is the suspend, resume and terminate toolbar in Visual Studio 2012 Ultimate?


    Via Davedev.net

    I recently paved one of my demo machines and was running a fresh build of Visual Studio 2012 Ultimate RC.  I came across something interesting I thought I would share in order to save you time.  In the past I have been running Visual Studio 2012 Express RC and noticed in Ultimate things are in different locations.  For example, in Express you get a Store menu at the top but in Ultimate you need to go to the project properties to pull up the Store Menu.

    When I tried to force a suspend on an app I was running I noticed the Suspend/Resume/Terminate toolbar icons were missing!  I only had pause/stop debugging like you would get in all Visual Studio projects.




    I right clicked and opened up my ToolBar options menu and found a Debug Location option.


    Debug Location Toolbar


    I then started debugging again and low and behold I now had Suspend/Resume/Terminate next to my process!




    After doing a little web research I found an MSDN article here that talks about the menu item.  It doesn’t tell you to turn on the Debug Location Toolbar but it does show a screenshot.  I imagine this is due to the layout style you chose when first running Visual Studio Ultimate.  Express will always be set up in the best layout for Metro Style Apps where as my Ultimate installation was set up originally for Web Development.  In any event I hope this tip helps you out if you run into the same issues.


    As always if you decide to write a Windows 8 app and want to get into the Windows Store I would love to hear about it!  You may also want to check out my previous Windows 8 Metro Style Development Tips:

  • DaveDev

    Migrating a Windows 8 Metro Style App from Consumer Preview to Release Preview


    I’ve been working on a Windows 8 Metro Style App written, using JavaScript, I call Space Cadet.


    All of the code samples I have previously posted were built on the Consumer Preview (CP) bits so I thought I would attempt at converting the app  to the just announced Release Preview (RP).


    I had to do a couple of things to get my app up and running on RP from the CP bits.  I will break it down into the following five categories.

    1 - Project Templates

    I found the easiest way to save time was to start a new project and then copy/paste over my old files in.  This ensured I didn’t miss any of the new project/solution settings..

    2 – WinJS References

    The WinJS library file has been updated from version 0.6 to 1.0.RC.  I went into my  default.html file and referenced the updated libraries.


    <!-- 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="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>

    3 – New Variable References

    After the creation of the app reference to WinJS.Application there is a new activation variable referencing Windows.ApplicationModel.Activation as well as a call to WinJS strictProcessing.  I made sure to include these in my default.js as well.  The strictProcessing call will opt your app in to improved error handling.


    var app = WinJS.Application;


    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;


    4 – Application Activation

    The way that the app.onactivated event is called has been changed.  The checks for termination and resuming have now been created for you.  I made sure to include the update checks.


    app.onactivated = function (eventObject) {
         if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
             //TODO: Load State


    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.


    5 – Handling ViewState (Snapped, Filled, Fullscreen)

    The Event Handler for ViewState has been greatly simplified.  Instead of worrying about viewstatechanged on the current ApplicationView we simply add a resize Event Handler to the window object.

    Getting the current ViewState inside our Event Handler has been updated too.  Instead of looking at the eventArgs we now grab the value of Windows.UI.ViewManagement.ApplicationView.


    Windows.UI.ViewManagement.ApplicationView.getForCurrentView().addEventListener("viewstatechanged", onViewStateChanged);
        function onViewStateChanged(eventArgs) {
            var viewStates = Windows.UI.ViewManagement.ApplicationViewState, msg;
            var newViewState = eventArgs.viewState;
            if (newViewState === viewStates.snapped) {
            } else if (newViewState === viewStates.filled) {
            } else if (newViewState === viewStates.fullScreenLandscape) {
            } else if (newViewState === viewStates.fullScreenPortrait) {
                //Currently not supported


    window.addEventListener("resize", onViewStateChanged);
     function onViewStateChanged(eventArgs) {
            var viewStates = Windows.UI.ViewManagement.ApplicationViewState, msg;
            var newViewState = Windows.UI.ViewManagement.ApplicationView.value;
            if (newViewState === viewStates.snapped) {
            } else if (newViewState === viewStates.filled) {
            } else if (newViewState === viewStates.fullScreenLandscape) {
            } else if (newViewState === viewStates.fullScreenPortrait) {
                //Currently not supported



    Pretty easy update with only five things to think about.  Hopefully this post will help aid you in converting over your own CP apps to RP!   I’ll be doing additional testing over the next few days and will post anything I find here as well as any official update guidance that gets released.

    If you are currently working on a Windows 8 app and want to get into the Windows Store I would love to hear about it!  You may also want to check out my previous Windows 8 Metro Style Development Tips:

  • DaveDev

    Build a Hybrid App for Windows Phone 8 using appMobi


    Via Davedev.net


    appmobi_logo_highres HTML5

    If you’re a web developer focused on HTML5 like me then chances are you’ve looked into how to port your web apps to one of the App Marketplaces out there.  I recently sat down with appMobi’s Developer Evangelist, Andrew Smith, to chat about how Web Developers can create Hybrid Apps which run on iOS, Android and Windows.  Due to the popularity of that interview I’ve asked Andrew to guest post here on how you can get started!

    Via Andrew…

    Smartphones running mobile apps are spreading quickly, just like Websites did in the 90’s. However, in order to have your software in the mobile app stores developers need to create native apps written in the programming language of the particular operating system. Rather than writing the same application over and over so your app can run on all smartphones, wouldn’t it be great if your current Web developers could build your application once but allow you to deploy it to a variety of devices? Perhaps appMobi is the answer.

    What is a Hybrid Mobile App?

    The key to creating a mobile app that is written once but runs anywhere is the concept of the hybrid mobile app. These apps are called “hybrid” apps because they are native apps that are coded using the exact same technologies that power the World Wide Web.

    Native applications are written specifically for a particular operating system of the device it is meant to run on. That would be xCode/Objective C for iOS, Eclipse/Java for Android, and Visual C# or Visual Basic for Windows Phone 8. There is no native universal programming language for all device platforms.

    appmobi-xdkOn the other hand, mobile Web apps are server-side apps that run within a smartphone’s Web browser. They use Web technologies such as HTML5, JavaScript, and CSS3. However, these applications are not available from the smartphones’ app stores since they are downloaded from the Web.



    Hybrid apps are a marriage of these two technologies. Like a native app a hybrid app runs natively on the device and are distributed through the smartphones’ distinctive app stores. However, these apps are coded using Web technologies rendered locally on the device so it does not require an Internet connection. Furthermore a Web to native abstraction layer gives the hybrid app access to device capabilities that are not accessible to mobile Web applications such as the accelerometer, contacts database, and camera.

    Web Developers Can Use appMobi to Create Hybrid Apps

    Using appMobi, you can create apps using Web technologies that you are already familiar with. The appMobi XDK tool can be used as a simulator to test how your app will look on a variety of devices and interact with the device’s native features such as the camera and accelerometer using the appMobi JavaScript API.



    Then using the appMobi XDK you can see how your application would look on a variety of devices. Once you like the app on the emulator, load it on an actual smartphone using the appMobi “test anywhere” feature. Use this tool to create a project “bundle”, a folder including all the HTML, JavaScript, CSS, image, video, audio, and other supporting Web technology files that will be built into the native apps.

    Create Your Project Bundle

    Building a hybrid native app is just like building a mobile Web app, except that the code is built into a binary at the end for submission to the appropriate application stores. Using the appMobi appHub build system, your project bundle – all the files used to create the application including HTML, JavaScript, images, videos, CSS – is automatically compiled into a binary for you. No need to buy a Mac and learn XCode to create iOS apps. Don’t bother installing Eclipse and learning Java programming techniques to create an Android app. The appMobi appHub build system does all that for you.



    With the advent of Windows Phone 8, the appMobi appHub will soon include the capability of creating a native application for a Windows smartphone as well. Meanwhile, you can follow these easy steps to create your very own Windows Phone 8 application using the free tools Microsoft has provided.


    Decide what you want your app to do, and build it using the tools you are already familiar with. Consider using the appMobi XDK to test any calls to the appMobi JavaScript Bridge API, or see how your bundle will appear on a variety of devices.



    Build For Windows Phone 8

    Once you have an app project bundle finished, it is time to build it for Windows Phone 8. To build an appMobi application as a hybrid Windows Phone 8 app, you’ll need to install Visual Studio Express 2012 for Windows Phone on a Windows 8 PRO computer. The Windows 8 PRO operating system is key since The Windows Phone 8 emulator relies on Windows 8 Professional, so be sure you have the appropriate operating system before getting started.






    First create a Windows Phone 8 project in Visual Studio. Start Visual Studio for Windows Phone and select New and then Project. On the New Project setup screen, create a Windows Phone App using Visual C#. Supply a name for the project and select OK. This will create your new project.



    Select the Windows Phone 8 operating system. Click OK to continue.



    Once you have a project prepared, you will want to install one of appMobi’s Windows Phone 8 templates from NuGet to transform your empty new project into an appMobi application project. To install one of the appMobi templates visit:


    Consider trying one of the specialized templates another time, but just for the purposes of creating a Windows Phone 8 build you’ll want to stick with a simple template. Select the appMobi Windows Phone 8 Hello World template.

    HTML5 Hello World


    Click on the template and find the install command. Copy the Install-Package command to your clipboard. Do not include the PM> prompt portion.



    Return to Visual Studio and open the Package Manager window by selecting View > Other Windows > Package Manager Console. Paste the Install-Package command on your clipboard into the Package Manager Console and press the Enter key.

    PM Console


    After successfully installing the package, you will note that the Solution Explorer window updates to include an “html” folder and other specific “appMobiPage” files. You will also notice that a readme.txt file is displayed in the VS edit window. This file contains information about the contents of the template, and how to use it. Continue with those instructions, or follow the next few steps here.

    To bind the project to the appMobi template selected, you will need to modify the WMAppManifext.xml file loaded at project creation. This file can be found in the Properties directory. In the editor window for the WMAppManifest.xml file, you will need to update the Navigation Page field value.

    Nav Page


    Change the Navigation Page value to “AppMobiPage.xaml” and then save the file.


    appMobi Page


    Now you’ll want to import the appMobi project bundle into your newly created project. Copy all the files in the bundle with the exception of the files in the “_appMobi” directory. Paste all those files into the “html” directory of your Visual Studio project in the Solution Explorer.

    Once your project bundle is in position, you’ll need to identify which files you want included in the build. Make sure to reference all the files you use for your project bundle in AppMobiWebSource.xml.

    appmobi source


    At this point, you are now ready to start developing and debugging your application in the Windows Phone 8 environment. Use the WP8 emulator within Visual Studio to aid with device debugging.

    For More Information

    So you want to get started? Head to the Chrome Web Store to grab the XDK, and download Microsoft Visual Studio 2012 for Windows Phone 8.  

  • DaveDev

    Playing Music and Sound Effects in a Windows 8 Metro Style App using HTML and JavaScript



    I have recently been coding a Windows 8 Metro Style App using the new Windows 8 Release Preview bits and Visual Studio Express 2012 RC.  The app is going to be a retro shooter that takes advantage of HTML5 Canvas for the main game engine and then several Windows 8 Metro Style App Features. 

    What game would rock without Music and Sound Effects!  So how do we add that functionality to a Metro Style App?  For my game I decided to take two routes. 

    This is how I broke everything down:

    • HTML5 Audio is being used for the background music and is in a wav file format.  I have two royalty free music tracks that play one during my game’s menu screen and one during actual gameplay.
    • All Sound Effects are played using the free SoundJS Library. This JavaScript Library works straight off gitHub and no additional work was needed to use it inside our Windows Metro Style App!
    • The Lasers are three separate sound effects and each time a ship is destroyed a random one will play.  They are royalty free sounds I pulled from some of the XNA samples via AppHub’s Game Development Library.
    • The announcer voices were custom recorded by me and saved as mp3 files via the free Audacity Sound Editing Tool.  I got the retro voice sound (anyone remember AdLib and SoundBlaster back in the day?) by tweaking the stream.

    Declaration and Initialization

    I store all of my sound and music files in a /sounds folder off the root of the project and include the sound.js file in my normal /js folder.

    Sounds and JavaScript - sweet!

    Inside of my default.html file I then make a reference to the SoundJS library.

    <link href="/css/default.css" rel="stylesheet">
    <link href="/css/space.css" rel="stylesheet"/>
    <script src="/js/default.js"></script>
    <script src="/js/sound.js"></script>

    Our App is now ready to play music and sound streams.


    Inside of my default.js file I set up a couple of local variables to handle the streams and the sound effects we will pass to SoundJS.  I also set up a variable to detect if I have any music already playing.

    //Menu Music
    var musicPlaying = false;
    var musicMenu = new Audio("/sounds/hydrogen.mp3");
    var musicGame = new Audio("/sounds/crazy_comets.wav");
    musicMenu.loop = true;
    musicGame.loop = true;
    var lasers = new Array();
    lasers[0] = "laser1";
    lasers[1] = "laser2";
    lasers[2] = "laser3";

    During my initialize function I set up all of my game parameters and load the sound effects I will use into SoundJS.  SoundJS lets you optionally load multiple instances of the same stream but I’m choosing just to use the one right now.

    //Init Sounds
           { name: "redalert", src: "../sounds/redalert.mp3", instances: 1 },
           { name: "newlevel", src: "../sounds/newlevel.mp3", instances: 1 },
           { name: "pulse", src: "../sounds/pulse.mp3", instances: 1 },
           { name: "laser1", src: "../sounds/laser1.mp3", instances: 1 },
           { name: "laser2", src: "../sounds/laser2.mp3", instances: 1 },
           { name: "laser3", src: "../sounds/laser3.mp3", instances: 1 }]);

    I then load up the UI elements for my Game Menu and begin playing my Menu music.  This is done by simply calling the pause() and play() methods of both the musicGame and musicMenu HTML5 Audio tag variables we declared previously.

    Here is the code that initializes the Menu UI and begins playing the Menu Music:

    //Set Up Menu Screen UI Elements
      function showMenu(event) {
          menuEnabled = true;
          txtPlayerName.style.visibility = "hidden";
          txtScore.style.visibility = "hidden";
          imgPlayer.style.visibility = "hidden";
          imgMenu.style.visibility = "visible";
          btnStart.style.visibility = "visible";
          txtVersion.innerHTML = GAME_VERSION;
          txtVersion.style.visibility = "visible";
          txtLevel.style.visibility = "hidden";
          var menuX, btnX, btnY;
          menuX = (SCREEN_WIDTH - imgMenu.width) / 2;
          btnX = (SCREEN_WIDTH - btnStart.clientWidth) / 2;
          btnY = (SCREEN_HEIGHT - btnStart.clientHeight) / 2;
          imgMenu.style.posLeft = menuX;
          btnStart.style.posLeft = btnX;
          btnStart.style.posTop = btnY;

    Here is the code that initializes the Game UI and begins playing the Game Music:

    /Set up Game Screen UI Elements
        function startGame(event) {
            imgPlayer.style.visibility = "visible";
            imgMenu.style.visibility = "hidden";
            btnStart.style.visibility = "hidden";
            txtVersion.style.visibility = "hidden";
            txtLevel.style.visibility = "visible";
            var lvlX = (SCREEN_WIDTH - txtLevel.clientWidth) / 2;
            txtLevel.style.posLeft = lvlX;
            menuEnabled = false;


    Sound Effects

    Now that we have the music all set up let’s move onto the Sound Effects. 

    New Level and Gravity Pulse

    The first sound bite is when our user achieves a new level (currently set to every 2,000 points).  The second scenario is if they achieve a gravity pulse (previously covered here).  Both of these scenarios are handled in our updateScore function which gets called during our main game loop (more on game loops to come).

    //update player score
        function updateScore(points) {
            score += points;
            scoreGravity += points;
            txtScore.innerHTML = "  Score: " + score;
            if (scoreGravity === GRAVITY_WAVE_PTS_REQ) {
                accelerometer.addEventListener("shaken", onShakenAccel);
                txtScore.innerHTML = " > SHAKE THAT SCREEN <";
                scoreGravity = 0;
                SoundJS.play("pulse", SoundJS.INTERRUPT_ANY);
            //new level
            lvlNextPts = (lvlCurrent + 1) * LEVEL_PTS_REQ;
            if (score >= lvlNextPts) {
                txtLevel.innerHTML = "Level: " + lvlCurrent;
                lvlDifficulty = LEVEL_SPEED_INCREASE * lvlCurrent;


    Lasers Beams!

    All of the logic for the laser effects happens when I handle destroyed ships that have been correctly “tapped on” (more on handling Touch events to come).  I run through the laser sound array we previously created and pick a random sound.  This gives us the ability to have three different laser sounds when we are blowing up ships on the screen!

    function destroyShip(ship) {
        var r = randomAccel(0, 2);
        var laserSound = lasers[r];
        SoundJS.play(laserSound, SoundJS.INTERRUPT_ANY);
        //TODO: Animation Explosion and better sound
        var explosion = new Image();
        explosion.onload = function () {
            ctx.drawImage(explosion, ship.x, ship.y);
        explosion.src = "/images/explosion.png";
        ship.img = explosion;
        ship.destroyed = true;
        return ship;

    For those curious here is the randomizer function I used to pick a random number as well:

    //Random acceleration speed
        function randomAccel(a, b) {
            return (Math.floor(Math.random() * (1 + b - a))) + a;


    One of the things I noticed when having many sound effects on screen was that they sometimes would cut off each other.  Remember that users can use all 10 fingers on a touch device so we could have 10 explosions at once!  This is where SoundJS handles things very well.  You may have noticed the INTERRUPT_ANY param being passed in.  This is where you can tell SoundJS how to handle currently playing sounds of the same exact stream.  You can also created multiple instances of the same sound effect.  If you are still  having issues with choppy sounds the SoundJS Documentation has some suggestions on using setTimeout to buffer your sounds.

    I wrote a little function that implements this which I’m not currently using but may need at some point in the future.  I’ve included it here in case you run into any sound clipping issues and want to give it a try.

    //Play Sound Effect
     function playSound(sound) {
         setTimeout(function () {
             SoundJS.play(sound, SoundJS.INTERUPT_NONE, 1, false);
         }, 100);



    I hope this post has given you an idea of how easy it is to include Music and Sound Effects in your Metro Style Apps using the built in HTML5 Audio tags and existing JavaScript Libraries.  If you are currently working on a Windows 8 app and want to get into the Windows Store I would love to hear about it

    You may also want to check out my previous Windows 8 Metro Style Development Tips:

Page 5 of 68 (272 items) «34567»