locked
How to cook a complete Windows 8 application with HTML5, CSS3 and JavaScript in a week

All replies

  • And here is the day 1 about creating the missing screens, adding settings and offline support:

    http://blogs.msdn.com/b/eternalcoding/archive/2012/04/19/how-to-cook-a-complete-windows-8-application-with-html5-css3-and-javascript-in-a-week-day-1.aspx

    David.

    Thursday, April 19, 2012 6:45 PM
  • And here is the day 2 with the following chapters:

    • Internationalization
    • Managing the activation of the offline mode
    • Adding a flipView to the cards page
    • Handling snapped views
    • Supporting different form factors
    • Supporting different cards sizes

    http://blogs.msdn.com/b/eternalcoding/archive/2012/04/23/how-to-cook-a-complete-windows-8-application-with-html5-css3-and-javascript-in-a-week-day-2.aspx

    David.

    Monday, April 23, 2012 11:10 AM
  • +10 points for saying "HTML5, CSS3 and JavaScript" instead of just "HTML5" which I hate :)

    Looks like a good blog...adding RSS feed now...

    Monday, April 23, 2012 2:24 PM
  • +10 points for saying "HTML5, CSS3 and JavaScript" instead of just "HTML5" which I hate :)


    I prefer the term that Scott Stanfield from Vertigo coined: H5JSC3
    Tuesday, April 24, 2012 6:36 AM
  • Monday, April 30, 2012 8:46 AM
  • Nice series! 
    I wonder if the inline search field is in compliance with the Metro UX guidelines that specify we should not implement search functionality inline.
    Or is "filtering by text" not considered "search"?
    Monday, May 21, 2012 9:03 PM
  • This is not a search but a filter textbox. Like the comboboxes actually
    Tuesday, May 22, 2012 5:16 AM
  • Appendix: Windows 8 Release Preview version and some considerations about code migration and data binding:

    http://blogs.msdn.com/b/eternalcoding/archive/2012/06/15/how-to-cook-a-complete-windows-8-application-with-html5-css3-and-javascript-in-a-week-day-5.aspx

    Cheers!

    Friday, June 15, 2012 3:33 PM
  • Thanks David! I have a question to the Navigation.back() *hack*. Do you have any idea why that was not implemented into the Navigation.back() right away? Why do we, as a user of the API, have to wrap all calls into setImmediate to let the renderer finish its run? For the navigator.js alone thats 5 wraps! Thats just bad API design.
    Monday, June 18, 2012 11:24 AM
  • Hi!

    It is not related to the API but as I said it is more related with the preview state of the SDK.

    Monday, June 18, 2012 4:14 PM
  • David Catuhe, nice ! Just wondering though, can you use jQuery animate function in Metro ?

    Monday, June 18, 2012 4:25 PM
  • Yes you can:) Beware though of scripts injections (eval) because they will be blocked by the sandbox 
    Monday, June 18, 2012 4:33 PM
  • wow, it seems i am the only one in this whole forum that can't use $(elements).animate(). Lucky me.
    Monday, June 18, 2012 4:42 PM
  • here is the link, http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/f4ea76ab-915a-46be-9cf8-bd236a3e4155

    Maybe you can find my mistake. Or maybe instead of going to the link, let me copy paste the code here.

    the HTML:

    ==

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>Test1</title>

        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.1.0.RC/css/ui-light.css" type="text/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>

        <!-- Test1 references -->
        <link href="default.css" rel="stylesheet" />
        <script type="text/javascript" src="js/jQuery.js"></script>
        <script src="default.js"></script>
    </head>
    <body>
        <h1>App H1</h1>
        <p id="p1">Lorem Ipsum LOREM IPSUM !!!!!.</p>
        <div id="div1">
            <p id="p2">I am inside a div</p>
        </div>
    </body>
    </html>
    ==

    the default.js

    ==


    (function () {

        var app = WinJS.Application;
        var activation = Windows.ApplicationModel.Activation;
        WinJS.strictProcessing();

        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.

                    WinJS.Utilities.ready(function () {

                        $('p').animate('background-color','blue');
                    });

                    
                } else {

                    // This application has been reactivated from suspension. Restore application state here.
                }
                args.setPromise(WinJS.UI.processAll());
            }
        };

        app.oncheckpoint = function (args) {

            // TODO: This application is about to be suspended. Save any state
            // that needs to persist across suspensions here. You might use the
            // WinJS.Application.sessionState object, which is automatically
            // saved and restored across suspension. If you need to complete an
            // asynchronous operation before your application is suspended, call
            // args.setPromise().
        };

        app.start();

    })();

    ==

    the error log:

    ==

    'WWAHost.exe' (Script): Loaded 'Script Code (MSAppHost/1.0)'.
    Exception was thrown at line 5200, column 4 in ms-appx://1635a84c-7b10-4678-8389-34aefae706f0/js/jQuery.js
    0x800a139e - JavaScript runtime error: SyntaxError
    Exception was thrown at line 5213, column 7 in ms-appx://1635a84c-7b10-4678-8389-34aefae706f0/js/jQuery.js
    0x800a139e - JavaScript runtime error: SyntaxError
    Exception was thrown at line 5213, column 7 in ms-appx://1635a84c-7b10-4678-8389-34aefae706f0/js/jQuery.js
    0x800a139e - JavaScript runtime error: SyntaxError

    ==

    Monday, June 18, 2012 4:44 PM
  • it should work :(

    but why not using WinJS animations Library?

    send me a mail with a simple repro case ans I will check

    Monday, June 18, 2012 4:48 PM
  • i haven't found out the equivalence of the $().animate() in WinJS libraries, i think that library is more focused on animation when you enter pages / leave pages etc etc instead of animating elements of DOM. I could be wrong though.

    Above your post are the code (all of it).



    Monday, June 18, 2012 4:51 PM
  • Sorry, i am new to forum so i did not know there is a button to add code,

    The html:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>Test1</title>
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.1.0.RC/css/ui-light.css" type="text/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>
    
        <!-- Test1 references -->
        <link href="default.css" rel="stylesheet" />
        <script type="text/javascript" src="js/jQuery.js"></script>
        <script src="default.js"></script>
    </head>
    <body>
        <h1>App H1</h1>
        <p id="p1">Lorem Ipsum LOREM IPSUM !!!!!.</p>
        <div id="div1">
            <p id="p2">I am inside a div</p>
        </div>
    </body>
    </html>

    The default.js :

    (function () {
    
        var app = WinJS.Application;
        var activation = Windows.ApplicationModel.Activation;
        WinJS.strictProcessing();
    
        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.
    
                    WinJS.Utilities.ready(function () {
    
                        $('p').animate({'background-color' : 'red'});
    
                    });
    
                    
                } else {
    
                    // This application has been reactivated from suspension. Restore application state here.
                }
                args.setPromise(WinJS.UI.processAll());
            }
        };
    
        app.oncheckpoint = function (args) {
    
            // TODO: This application is about to be suspended. Save any state
            // that needs to persist across suspensions here. You might use the
            // WinJS.Application.sessionState object, which is automatically
            // saved and restored across suspension. If you need to complete an
            // asynchronous operation before your application is suspended, call
            // args.setPromise().
        };
    
        app.start();
    
    })();



    Monday, June 18, 2012 4:54 PM
  • No you're right for winjs animations library.
    But for what you want to do you should use css3 transitions:
    http://blogs.msdn.com/b/eternalcoding/archive/2011/12/06/css3-transitions.aspx
    Monday, June 18, 2012 4:58 PM
  • David Catuhe

    i found the problem, i forgot to add jQUery UI. It works perfectly now.

    Monday, June 18, 2012 5:01 PM
  • I'm getting a 404 error for this? Is it still available somewhere?
    Saturday, September 7, 2013 5:48 PM