WinJS

There are 5 entries for the tag WinJS
WinJS Custom Controls

Controls are the basic blocks of any application, you use controls everywhere and also HTML Metro apps are part of the game, you add a control inside a HTML Metro page just placing a <div> with a special “data-win-control” attribute in it: here’s an example: <div data-win-control="WinJS.UI.SemanticZoom" > </div> if you have pages (even in different applications) that need some special kind of functionality paired with some custom UI, custom controls allows you to reach the “write once, use everywhere” paradigm (unless you like reinventing the wheel of course…)Let’s see how you can create your own...

posted @ Saturday, July 21, 2012 12:00 PM | Feedback (0)

Using C# code inside a Metro HTML application

Let’s say you’re working on a HTML Metro app and you’d like to reuse some C# code instead of rewriting, the good new is that you can, here’s how: Create a blank new WinJS application and add a div inside default.html page: <body> <div id="output"></div> </body> Now add a new C# library to WinJS solution: Change the output type of the library project to WinMD file   let’s add a couple of classes to C# library, we’re going to consume them from our HTML application: public sealed class Person { public Person(string name) ...

posted @ Friday, April 27, 2012 9:07 AM | Feedback (0)

Fragment loading and Navigation in HTML5 Metro applications

Navigation is one of the core concepts of any Metro application, in this post I’ll show how can you implement it in a HTML based Metro application. The easiest way is to use the same common approach used by millions of HTML pages: using an hyperlink. Assuming you are in default.html page and wish to navigate to page2.html all you need to do is add something like: ...

posted @ Tuesday, April 10, 2012 11:38 PM | Feedback (0)

Playing transitions with WinJS and Expression Blend for HTML

Here’s a simple tutorial about using Expression Blend for HTML5 and some little Javascript to create a simple transition effect. Fire up Expression Blend 5 and by double clicking the elements on Assets library add a button and a div, let’s rename it by double clicking them in LiveDOM pane. Here’s live DOM contents and it’s HTML counterpart (I’ve manually added button Go! content) ...

posted @ Friday, February 3, 2012 7:30 PM | Feedback (1)

Using JQuery with WinJS

I can hardly imagine any serious web development without JQuery so I did  a quick test to check if it can be used inside a WinJS project and answer is: yes! even if not in its total completeness. You can’t use any CDN to get JQuery library, it must be included in your project (quite obvious since application must load even without any network connection) so I’ve grabbed latest version and added it to my WinJS project I then later created a very naïve HTML page: <!DOCTYPE html><html><head> ...

posted @ Tuesday, January 31, 2012 7:20 PM | Feedback (8)