Viewing Category: Screencasts  [clear category selection]

jQuery Messaging Plugin Screencast

I've been working on an enterprise information management application. One of the requirements on the form validation is to gracefully handle client-side and server-side validation. The form uses the jQuery Validate and Form plugins. The plugin I wrote handles the receipt of server-side validation messages, and updates the UI in the same was as the client-side validation. A screencast showing how it works is now available on Vimeo.

The plugin is short, so I'll just post it here:

(function($) { $.extend({ messaging : function(action, data) { var defaults = { feedback: "#feedback", status: "#status", form: "form", validator: "validator" }; if (action == undefined || action == "") { action = "config"; } if (action == "config") { this.settings = $.extend({}, defaults, data); var $status = $(this.settings.status).hide().removeClass("hidden"); var $feedback = $(this.settings.feedback); $().ajaxStart(function() { $status.show(); }).ajaxStop(function() { $status.hide(); }).ajaxError(function(ajaxError, XMLHttpRequest, ajaxOptions, errorText) { $status.hide(); $feedback.removeClass().addClass("error").text("An error occurred while posting the form."); }); } if (action == "receive") { var $message = $("message", data); var $feedback = $(this.settings.feedback); var $form = $(this.settings.form); var errors = new Object(); if ($message.children("status").text() == "success") { $feedback.removeClass().addClass("success").text($message.children("text").text()); } else { $feedback.removeClass().addClass("error").text($message.children("text").text()); $message.find("validationMessages message").each(function() { var $msg = $(this); errors[$msg.attr("fieldName")] = $msg.text(); }); if ($message.children("validationMessages").attr("count") > 0) { $form.data(this.settings.validator).showErrors(errors); } } } } }) })(jQuery);

Here is the call to configure the plugin from the main document:

$.messaging("config", { form: "#accountForm" });

The integration with the Validator seems a little kludgey, but after trying many ways, I settled on this.

$form.data("validator", $form.validate(validationOptions));

The callback from the AJAX submit passes the XML to the messaging plugin:

var validationOptions = { submitHandler: function(form) { $(form).ajaxSubmit({ dataType: "xml", success: function(data, status) { $.messaging("receive", data); } }); } };

I hope that's useful. I'll keep updating the plugin and post a link to its Subversion repository.

Sceencasting Notes and New Mic

I bought a Snowball by Blue Microphones recently. I used it for the first time to create a screencast last night. Using the little tri-pod that they provide (which is a very nicely designed, chrome part) it was too far away from my face when placed on the desk. I picked up a larger microphone stand with a telescoping boom, and that is perfect.

The screencast I created is on a pager solution that I use, and wanted to share with others, and hopefully, get some feedback. Here's the process I used to create the screencast.

  • Using Keynote, I created a series of slides in with static information. I exported the slides from Keynote to video using a Quicktime conversion to HD 720p with fixed timing for each slide -- about one second per slide.
  • I imported the video into a Final Cut Express video project. Using the Freeze Frame tool on each slide (a frame showing each slide), I created a clip about two minutes in length. Then I added the freeze frame clip to the timeline and used the Voiceover tool. After several takes doing the voiceovers, I trimmed the video down to match.
  • For the demo of the of Firefox and Eclipse, I used iShowU with live audio. I made several short captures, then added them each to the project in Final Cut. The screen capture was at 1280x720 using the Apple Intermediate Codec. The file sizes are huge, but the quality is pixel perfect.
  • I exported the sequence from Final Cut to MPEG-4 (H.264/AAC) using the settings that Vimeo recommends, and then uploaded it their site for conversion to Flash Video.

It's a bit of work, but it's good practice for presenting and training.

jQuery Lazy Tree Plugin

I created a screencast showing the use of a jQuery plugin that I wrote to perform lazy loading of hierarchical data. When I was working on the application, I didn't see the information I was looking for, so I decided to put it out there myself. The quality is adequate, but it's only my first screencast published for public use, so I'll get better with practice. I'd appreciate comments on the content, presentation, and production.

I used iShowU to record a 1280x720 portion of my second monitor. That's why you don't see the Mac OS X menubar or the application switcher when I do Command + Tab. The resolution is native for HD DV 720p, which I then edit in Final Cut. This generates gianmormous working files, but doesn't require any rendering on import to the timeline. My Power Mac is pretty old, so doing the compression of the final screencast to MPEG-4 (H.264/AAC) takes a really long time. I've got my eye on a Mac Pro quad core machine to speed this process up. Also, I notice that my mouse pointer is not visible in Eclipse, so it's not visible as I'm moving it around while talking. The final file is almost 33 minutes long and weighs in at 105.4 Mb.

I uploaded the file to Vimeo, which supports HD streaming to a Flash player. You can watch the video there, or download the whole QuickTime movie as LazyTree Demo.

I will be packaging up the source code of the project shortly. I'll post another blog with a link to a zip file and the Subversion repository.