Tag: JavaScript

Databinding in Windows 8 JavaScript Metro style Apps

[ NOTE: This post was written using the Visual Studio 11 beta and Windows 8 Consumer Preview…as with any pre-release software, the code and concepts are subject to change in future versions ]

One of the nice features of the new JavaScript Windows Metro style app templates in the Visual Studio 11 beta is that they provide built-in support for databinding, using sample data in a JSON array. Folks who have experience in the XAML world may not see this as a particularly big deal, since Silverlight and WPF have supported databinding for a long time.

For web applications, however, data binding is still a concept that’s evolving. While there are third-party libraries like Knockout.js that provide client-side databinding (and my fellow DE David Isbitski recently published a blog post detailing how you can use Knockout in a Metro style app, if that’s your cup of tea), but in general the web world is a little behind the curve compared to XAML-based databinding.

Continue reading Databinding in Windows 8 JavaScript Metro style Apps

A Knockout in Charlottesville

Just saw the agenda for the next meeting of the Charlottesville .NET User Group, which is tomorrow night (Feb. 16th), and it looks awesome. The title is Knockout.js, MVC with Style & .Net 4.5. They’re doing a triple-header featuring:

  • Joel Cochran talking about the Knockout.js MVVM library for JavaScript
  • Kristy Moon talking about MVC with Style
  • Stuart Leitch talking about async features in VB and C# (and a bit on Windows 8)

That’s quite a lineup, and I’m wishing I could make it for the meeting (Dane Morgridge and I will be recording a new episode of the Community Megaphone Podcast that evening), but if you’re available, I would strongly suggest making it out for this meeting.

image_2And a bit of speaker trivia…Kristy Moon, who was one of the wonderful volunteers for last year’s inaugural MADExpo conference, volunteered her talents this year to give our website a fresh new look for MADExpo 2012. Personally, I think it looks great.


Don’t miss this opportunity to learn from three of the most talented folks I know in the Mid-Atlantic!

Charlottesville .NET meets a the McIntire School of Commerce at UVA. You can find a nice map of the location on the Charlottesville .NET UG website.

CapArea.NET Follow-up: HTML5 Metro apps resources

caparealogoMy thanks to everyone who came out tonight for the Capital Area .NET User Group for my presentation on developing Windows 8 Metro style applications using HTML5 and JavaScript. Great questions and lots of great discussion. Thanks for keeping me on my toes!

As promised, I wanted to share pointers to some additional recorded sessions from BUILD that you may find useful, as well as a link to the sample Canvas Paint app that I used for my demos. If you’re interested in getting the additional tweaks I added to the sample to support persisting the brush color and size, etc. please drop me a note via my contact page, and I will be happy to share it.

Additional Related BUILD Sessions:

and the presentation on which my talk tonight was based:

UPDATE: Nevin House, who attended last night’s talk, got in touch with me via email, and recommended the following two talks on JavaScript, and I heartily agree…both are great talks and are highly recommended for anyone wishing to better understand JavaScript in the context of Metro style apps in Windows 8:

Both presentations feature some of the best presenters from BUILD. Enjoy!

Canvas Paint Sample App

canvasPaintLogo_2The Canvas Paint sample app, along with many other samples and demos, may be downloaded from the Samples area for Windows 8. The direct link to the Canvas Paint sample is:

http://code.msdn.microsoft.com/windowsapps/CanvasPaint-878fa5d5

Note that you can browse the code directly online, or download the sample and run it locally (if you have installed the Windows 8 developer preview).

Visualizing Layout in HTML5 Canvas with Gridlines

I’m in the process of finalizing my preparations for tomorrow’s HTML5 Game Camp in New York City, and figured I’d share one of the functions I put together to help in the process of visualizing some of the different ways you can draw and manipulate objects on an HTML5 Canvas object. It’s a simple function called renderGrid, which takes as arguments the ID of the canvas you want to draw on, the pixel interval for the gridlines, and the color of the lines, and draws out a grid just like you’d see on graph paper. Call this function before you start drawing objects on your canvas, and you’ll have a nice reference grid to help you more easily visualize the layout. You can customize it to your liking by tweaking the pixel interval, and it’s relatively unobtrusive in your code.

Continue reading Visualizing Layout in HTML5 Canvas with Gridlines

jWorldmaps: Anatomy of a jQuery Plugin

I just found out that my first article for the Script Junkie website is now live!

The article, which can be found here, walks through the fundamentals of authoring a jQuery plugin, and then walks through the example code from the jWorldmaps plugin itself, which I wrote to provide an easy way to implement animated transitions from a thumbnail to a larger map for my colleague Brian Hitney‘s WorldMaps IP geolocation service. Continue reading jWorldmaps: Anatomy of a jQuery Plugin

Tweaking Add Item Templates for Better Script Performance

[This is the second in a 3-part series. Part 1, “Make Script Performance Automatic with Custom Templates in Visual Studio 2010”, can be found here.]

In part 1 of this series, I showed you how you can improve the script performance of your websites by using Visual Studio’s built-in support for exporting templates to create a new MVC3 web site template that relocates <script> references and blocks to the end of the page, where they will not interfere with the loading of the main visual elements of your site.

In this second part, I will show you how you can customize the T4 templates used to create new items in an MVC3 project, so that when you add new views to your project, they also have the scripts located at the end of the page. That way both the Master page / Layout for your original project AND any views you add have the scripts in the best location for performance. As a reminder, if your scripts dynamically add content to the DOM, you may want to leave those scripts in the <head> section of the page, since locating them at the bottom of the page may impact the page visibly during rendering. Continue reading Tweaking Add Item Templates for Better Script Performance