53 Bytes - by Justin Beckwith » Programming

WebMatrix and Node Package Manager

Justin — Fri, 07 Sep 2012 21:13:39 +0000

A few months ago, we introduced the new node.js features we’ve added to WebMatrix 2. One of the missing pieces from that experience was a way to manage NPM (Node Package Manager) from within the IDE.

This week we shipped the final release of WebMatrix 2, and one of the fun things that comes with it is a new extension for managing NPM. For a more complete overview of the WebMatrix 2, check out Vishal Joshi’s blog post.

If you want to skip all of this and just download the bits, here you go:

Installing the Extension

The NPM extension can be installed using the extension gallery inside of WebMatrix. To get started, go ahead and create a new node site with express using the built in template:

After you create the site, click on the ‘Extensions’ button in the ribbon:

Search for ‘NPM’, and click through the wizard to finish installing the extension:

Now when you navigate to the files workspace, you should see the new NPM icon in the ribbon.

Managing Packages

While you’re working with node.js sites, the icon should always show up. To get started, click on the new icon in the ribbon:

This will load a window very similar to the other galleries in WebMatrix. From here you can search for packages, install, uninstall, update, any of the basic tasks you’re likely to do day to day with npm.

When you open up a new site, we also check your package.json to see if you’re missing any dependencies:

We’re just getting started with the node tools inside of WebMatrix, so if you have anything else you would like to see added please hit us up over at UserVoice.

More Information

If you would like some more information to help you get started, check out some of these links:

Happy Coding!

WordPress and WebMatrix

Justin — Sat, 09 Jun 2012 04:59:25 +0000

After releasing WebMatrix 2 RC this week, I’m excited to head out to NYC for WordCamp 2012. While I get ready to present tomorrow, I figured I would share some of the amazing work the WebMatrix team has done to create a great experience for WordPress developers. For a more complete overview of the WebMatrix 2 RC, check out Vishal Joshi’s blog post.

If you want to skip all of this and just download the bits, here you go:

Welcome to WebMatrix

WebMatrix gives you a couple of ways to get started with your application. Anything we do is going to be focused on building web applications, with as few steps as possible. WebMatrix supports opening remote sites, opening local sites, creating new sites with PHP, or creating an application by starting with the Application Gallery.

The Application Gallery

We work with the community to maintain a list of open source applications that just work with WebMatrix on the Windows platform. This includes installing the application locally, and deploying to Windows Server or Windows Azure:

Install PHP and MySQL Automatically

When you pick the application you want to install, WebMatrix knows what dependencies need to be installed on your machine. This means you don’t need to set up a web server, install and configure MySQL, mess around with the MySQL command line – none of that. It all just happens auto-magically.

The Dashboard

After installing WordPress and all of it’s dependencies, WebMatrix provides you with a dashboard that’s been customized for WordPress. We open up an extensibility model that makes it easier for open source communities to plug into WebMatrix, and we’ve been working with several groups to make sure we provide this kind of experience:

Protected Files

When you move into the files work space, you’ll notice a lock file next to many of the files in the root. We worked with the WordPress community to define a list of files that are protected in WordPress. These are files that power the core of WordPress, and probably shouldn’t be changed:

We won’t stop you from editing the file, but hopefully this prevents people from making mistakes:

HTML5 & CSS3 Tools

The HTML editor in WebMatrix has code completion, validation, and formatting for HTML5. The editor is really, really good. The CSS editor includes code completion, validation, and formatting for CSS3, including the latest and greatest CSS3 modules. We also include support for CSS preprocessors like LESS and Sass.

I think my favorite part about the CSS editor is the way it makes dealing with color easier. If you start off a color property, WebMatrix will look at the current CSS file, and provide a palette built from the other colors used throughout your site. This prevents you from having 17 shades of the mostly same color blue:

If you want to add a new color, we also have a full color picker. This thing is awesome – my favorite part is the eye dropper that lets you choose colors in other applications.

PHP Code Completion

When you’re ready to start diving into PHP, we include a fancy new PHP editor. It provides code completion with documentation from php.net, and a lot of other little niceties that make writing PHP easier:

WordPress Code Completion

So you’ve written some PHP, but now you want to start using the built-in functions available in WordPress. We worked with the WordPress community to come up with a list of supported functions, along with documentation on how they work. Any open source application in the gallery can provide this kind of experience:

MySQL Database Editor

If you need to make changes directly to the database, WebMatrix has a full featured MySQL editor built right into the product. You can create tables, manage keys, or add data right through the UI. No command line needed.

Remote Editing

If you need to make edits to a live running site, we can do that to. Just enter your connection information (FTP or Web Deploy), and you can start editing your files without dealing with a FTP client:

After you make your changes, just save the file to automatically upload it to your server:

Easy Publishing

When you’re ready to publish your application, you have the choice of using FTP or Web Deploy. If you use Web Deploy, we can even publish your database automatically along with the files in your WordPress site. When you make subsequent publish calls, only the changed files are published:

More Information

If you would like some more information to help you get started, check out some of these links:

Happy Coding!

Node.js meet WebMatrix 2

Justin — Thu, 07 Jun 2012 03:38:56 +0000

After months of hard work by the WebMatrix team, it’s exciting to introduce the release candidate of WebMatrix 2. WebMatrix 2 includes tons of new features, but today I want to give an overview of the work we’ve done to enable building applications with Node.js.

If you want to skip all of this and just get a download link (it’s free!), here you go.

How far we have come

Less than a year ago, I was working at Carnegie Mellon University, trying to use Node.js with ASP.NET for real time components of our online learning environment. Running Linux inside of our customers’ data centers was a non-starter, and running a production system in cygwin was even less ideal. Developing node on Windows wasn’t exactly easy either – if you managed to get node running, getting NPM to work was near impossible. Using node in an environment favorable to Windows was more than an up hill battle.

In the last 12 months since I’ve joined Microsoft, we’ve seen various partnerships between Joyent and Microsoft, resulting in new releases of node and npm to support Windows, and a commitment to Node on Windows Azure. We’ve worked together to build a better experience for developers, IT administrators, and ultimately, the users who use our systems.

One of the results of that work is a vastly improved experience for building applications with Node.js on Windows Azure. Glenn Block on the SDK team has done a fabulous write up on the ways Microsoft is making Azure a great place for Node.js developers. As our favorite VP Scott Guthrie says on his blog, meet the new Windows Azure.

Enter WebMatrix 2

Today, getting started with node.js is a relatively simple task. You install node, npm (which is now bundled with the node installers), and get started with your favorite text editor. There are infinite possibilities, and limitless configurations for managing projects, compiling CoffeeScript & LESS, configuring your production settings, and deploying your apps. WebMatrix 2 sets out to provide another way to build node.js apps: everything you need to build great apps is one place.

WebMatrix 2 is first and foremost designed for building web applications. From the start screen, you can create applications using pre-built templates, or install common open source applications from the Web Gallery. The current set of templates support creating applications with Node.js, PHP, and (of course) ASP.NET Web Pages. Out of the box, WebMatrix 2 includes three templates for Node.js:

Empty Node.js Site
Express Site
Express Starter Site

The empty site provides a very basic example of using an http server – the same sample that’s available on nodejs.org. The Express Site is a basic application generated using the scaffolding tool in the Node.js framework express. The Node Starter Site is where things start to get interesting. This boilerplate is hosted on GitHub, and shows how to implement sites that include parent/child layouts with jade, LESS css, logins with Twitter and Facebook, mobile layouts, and captcha. When you create a new application using any of these templates, WebMatrix 2 is going to ensure node, npm, and IISNode are installed on your system. If not, it will automatically install any missing dependencies. This feature is also particularly useful if you are building PHP/MySQL applications on Windows.

The end result of the Node Starter Site is a fully functional application that includes Express, Jade, LESS, chat with socket.io, logins with EveryAuth, and mobile support with jQuery Mobile:

IntelliSense for Node.js

One of the goals of WebMatrix 2 is reduce the barrier of entry for developers getting started with Node.js. One of the ways to do that is to provide IntelliSense for the core modules on which all applications are built. The documentation we use is actually built from the docs on the node.js docs site.

In addition to providing IntelliSense for core Node.js modules, WebMatrix 2 also provides code completion for your own JavaScript code, and third party modules installed through NPM. There are infinite ways to build your application, and the NPM gallery recently surpassed 10,000 entries. As developers start building more complex applications, it can be difficult (or even intimidating) to get started. WebMatrix 2 is making it easier to deal with open source packages:

Support for Jade & EJS

To build a truly useful tool for building Node.js web applications, we decided to provide first class editors for Jade and EJS. WebMatrix 2 provides syntax highlighting, HTML validation, code outlining, and auto-completion for Jade and EJS.

If you’re into the whole angle bracket thing, the experience in EJS even better, since it’s based off of our advanced HTML editor:

The best {LESS} editor on the planet

So I’ll admit it – I’m a bit of a CSS pre-processor geek. I don’t write CSS because I love it, but because I need to get stuff done, and I want to write as little of it as possible. Tools like LESS and Sass provide missing features for programmers in CSS like variables, mixins, nesting, and built in common functions.

The LESS editor in WebMatrix not only provides syntax highlighting, but also provides LESS specific validation, IntelliSense for variables and mixins, and LESS specific formatting. Most node developers are going to process their LESS on the server using the npm module, but if you want to compile LESS locally, you can use the Orange Bits compiler to compile your CSS at design time.

CoffeeScript Editor

In the same way LESS and Sass make it easier to write CSS, CoffeeScript simplifies the way you write JavaScript. WebMatrix 2 provides syntax highlighting, code outlining, and completion that simplifies the editing experience. If you want to use CoffeeScript without compiling it on the server, you can use the Orange Bits compiler to compile your CoffeeScript into JavaScript at design time.

Mobile Emulators

Designing applications for mobile can’t be an afterthought. WebMatrix 2 is trying to make this easier in a couple of ways. First – the visual templates (in this case the Node Starter Template) is designed taking advantage of responsive layouts in the main StyleSheet:

styles.less

This is great if you don’t need to change the content of your site, but is lacking for more complex scenarios. To get around that, the node starter template uses a piece of connect middleware to detect if the user is coming from a mobile device, and sends them to a mobile layout based on jQuery Mobile (more on this in another post). For individual views, there is a convention based system that allows you to create {viewName}_mobile.jade views which are only loaded on mobile devices.

It gets even better. What if you need to see what your site will look like in various browsers and mobile devices? WebMatrix 2 provides an extensibility model that allows you to add mobile and desktop browsers to the run menu:

Today, we offer a Windows Phone emulator, and iPhone / iPad simulators. In the future we’re looking for people to build support for other emulators *coughs* android *coughs*, and even build bridges to online browser testing applications:

Extensions & Open Source

A code editing tool is only as valuable as the developers that commit to the platform. We want to achieve success with everyone, and grow together. As part of that goal, we’ve opened up an extensibility model that allows developers to build custom extensions and share them with other developers. The extension gallery is available online (more on this to come) at http://extensions.webmatrix.com. We’re planning to move a bunch of these extensions into GitHub, and the NodePowerTools extension is the first one to go open source:

In the coming months you’ll start to see more extensions from Microsoft, and more open source.

Everyone worked together

I want to make sure I thank everyone who helped make this release happen, including the WebMatrix team, Glenn Block, Claudio Caldato, our Node Advisory board, Isaac Schlueter, and everyone at Joyent. For more information, please visit:

Enjoy!

Building a user map with SignalR and Bing

Justin — Wed, 12 Oct 2011 05:03:11 +0000

Building asynchronous real time apps with bidirectional communication has traditionally been a very difficult thing to do. HTTP was originally designed to speak in terms of requests and responses, long before concepts of rich media, social integration, and real time communication were considered staples of modern web development. Over the years, various solutions have been hacked together to solve this problem. You can use plugins like flash or silverlight to make a true socket connection on your behalf – but not all clients support plugins. You can use long polling to manage multiple connections via HTTP – but this can be tricky to implement, and can eat up system resources. The Web Socket standard promises to give web developers a first class socket connection, but browser support is spotty and inconsistent.

Various tools across multiple stacks have been release to solve this problem, but in this post I would like to talk about the first real asynchronous client/server package for ASP.NET: SignalR. SignalR allows .NET developers to change the way we think about client/server messaging: instead of worrying about implementation details of web sockets, we can focus on the way communication flows across the various components of our applications.

This sounds familiar: socket.io with node.js

Over the last year or so, node.js has burst onto the scene as a popular stack for building highly asynchronous applications. The event driven model of JavaScript, paired with a community of inventive developers, led to a platform well suited for these needs. The package socket.io provides what I have found to be the missing piece in the comet puzzle: a front and back end framework that just makes sockets over the web work. No more building flash applications to attempt opening connections over various ports. No more poorly implemented long polling solutions. Most importantly, socket.io made web sockets just plain easy to use:

Node.js and socket.io paved the way for a series of new tools and frameworks across multiple stacks that enable developers to have a first class client/server messaging experience. Node.js and socket.io are wonderful tools – but let’s get back to focusing on SignalR.

Two ways to build apps with SignalR

There are two ways you can go about setting up the server for SignalR. If you want a low level experience, you can add a ‘PersistentConnection’ class along with a custom route. This will give you basic messaging capabilities, suitable for many apps. Straight from the SignalR github, here is an example:

using SignalR;

public class MyConnection : PersistentConnection {
    protected override Task OnReceivedAsync(string clientId, string data) {
        // Broadcast data to all clients
        return Connection.Broadcast(data);
    }
}

This works well if you’re dealing with simple messaging – the other model SignalR supports is the ‘hub’ model. This is where things start to get interesting. Using hubs, you can invoke client side functions from the server, and server side functions from the client. Here’s another example from the documentation:

Here is the server:

public class Chat : Hub {
    public void Send(string message) {
        // Call the addMessage method on all clients
        Clients.addMessage(message);
    }
}

And the client:

I chose the high level API, because well… it’s just cool. For a wonderful break down of the differences between these two methods, check out Scott Hanselman’s post on the topic.

Lets build something!

One of the common examples of using these frameworks is a chat room: it has all of the touch points that are otherwise difficult to implement. How do we know when someone joins the room? What about sending a message? What if I want to send a message to multiple people? This is a perfect example of how client/server messaging over the web can make our lives easier. The SignalR folks have a live sample of this application running on their demo site. With the chat idea done, I decided to combine two tools into one project: a user map. I want to maintain a map that uses a pushpin for every user on the page. As users come, a new pushpin will be added in their location in real time. As they leave, the pushpin will be removed. Before we dive into the code, check out the demo at http://signalrmap.apphb.com/. If no one is in the room, you can slightly randomize your position by using the “random flag” at http://signalrmap.apphb.com/?random=true. This will allow you to use multiple browser windows and watch the system add location push pins.

Building the client

The client of SignalRMap includes a Bing map, and some JavaScript to interact with the back end. I used ASP.NET MVC 3 for this example, but this will work just fine with a web form. To start, we need to include a few script files:

The first thing we are including here is the Bing Maps JavaScript SDK – this will do all of the heavy lifting for our maps. The SignalR client is dependent upon JavaScript, so we need to include it along with our SignalR reference. Finally, we include the ‘hubs’ functionality into our application, linking our client and server side methods.

After including our scripts, connecting to a hub is crazy awesome easy:

// create the connection to our hub
var mapHub = $.connection.mapHub;

// define some javascript methods the server side hub can invoke

// add a new client to the map
mapHub.addClient = function (client) {
	addClient(client);
	centerMap();
	var pins = getPushPins();
	$("#userCount").html(pins.length)
};

// start the hub
$.connection.hub.start(function () {
	// after the hub has started, get the current location from the browser
	navigator.geolocation.getCurrentPosition(function (position) {

		// create the map element on the page
		mappit(position);

		// notify the server a new user has joined the party
		var coords = isRandom ? createRandomPosition(position) : position.coords;
		var message = { 'user': '', 'location': { latitude: coords.latitude, longitude: coords.longitude} };
		mapHub.join(message);
	});
});

There are a few things going on here. First, we reference our connection to the hub created on the server (note: the connection has not been established yet). Notice the mapHub.addClient method – this method will be exposed in a way such that it can be invoked from the server. *scratches head* – this is a neat concept. After defining methods which can be invoked from the server, we start the connection to the hub. Once the connection is established, we get the browser’s current location, and send that location back to the server. That’s about it. Remember how simple it was to use socket.io? Here we have the same experience. There’s a little more client script here to handle managing the map component. For the full client source for the application, check out my github.

Server side code

As mentioned above, I chose to take the ‘hubs’ route for my application. One of the nice things about using a hub is that it doesn’t require any custom routing – just create a class that extends ‘Hub’, and you’re set. In this example, I’m storing a persistent list of the clients connected to the application (obviously, this method will only work with a single web server). As users show up at the site, they send their current position to the server. The new MapClient is broadcasted to all of the connected clients, and the new client is given the master list of clients:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using SignalR.Hubs;

namespace SignalRMap
{
	public class MapHub : Hub, IDisconnect
	{
		private static readonly Dictionary _clients = new Dictionary();

		public void Join(MapClient message)
		{
			_clients.Add(this.Context.ClientId, message);
			Clients.addClient(message);
			this.Caller.addClients(_clients.ToArray());
		}

		public void Disconnect()
		{
			MapClient client = _clients[Context.ClientId];
			_clients.Remove(Context.ClientId);
			Clients.removeClient(client);
		}

		/// 
		/// model class for the join message. I tried to use dynamic here, but it didn't work.
		/// 
		public class MapClient
		{
			public string clientId { get; set; }
			public Location location { get; set; }

			public class Location
			{
				public float latitude { get; set; }
				public float longitude { get; set; }
			}
		}
	}
}

And that’s it! SignalR figured out what types of communication my browser supports, managed the tunnel, and just made the connection work. Enjoy!

Bootstrapping image based bookmarklets

Justin — Tue, 28 Dec 2010 02:12:09 +0000

Over this holiday break I had the interesting opportunity to write a bookmarklet for a friend who runs a comic based website. Instead of just manipulating the currently loaded page, the bookmarklet needed to send a list of images to another site. Often when writing bookmarklets, we tend to only think of loading our code in the context of a HTML content page. How often do you test your bookmarklets when the browser is viewing an image? In this article I am going to go through the code I used to bootstrap my bookmarklet script, and discuss some of the interesting challenges I experienced along the way.

To get started with this code, I used a fantastic article by Tommy Saylor of Smashing Magazine. It gave me a good start, but certainly left a lot of details out, and in my case, caused a lot of bugs.

Bookmarklet Architecture

That’s right: we should talk about architecture before diving right into our JavaScript. When writing a bookmarklet, it’s generally a good idea to keep as much code out of the actual bookmark as possible. This is where ‘bootstrapping’ comes into play: we will simply use our bookmark as a piece of code that actually loads the core bits of our JavaScript. There are actually two reasons why this is a good idea:

Different browsers have various max-lengths of bookmarks. Keep in mind that a bookmarklet is kind of an accidental feature. I think the average max length works out to around 2000 characters, but some browsers (like Internet Explorer 6) have limits as low as 508 characters.
Users are unlikely to be bothered into refreshing your bookmarklet. Once somebody bookmarks your code, how are they going to get updates? It’s much easier if your bookmarklet simply loads a JavaScript file from a static URL. This way we can update the code in the back whenever we want.

After our bootstrapper loads the script we created, any external libraries will be loaded. For example, I used jQuery and jQuery UI for my most recent project. After the dependencies are loaded, we will then execute our main code.

Another thing to keep in mind when you’re building your bookmarklet is how the site behaves after the function is disabled. For example, if your bookmarklet gives all images on the site a red border, what happens when the user no longer wishes to use the bookmarklet? For this reason, I tend to create a cleanup method that allows our bookmarklet changes to be undone, and leaves the script in a state that can later be used again.

The bootstrap code

For the purposes of this bookmarklet, I needed to write a piece of code that would interact with a standard HTML page and it’s images, or interact with a page that was a single loaded image. For that reason, the first thing we need to do is determine what type of page we’re dealing with. If the page is HTML, we can insert a script. If the page is an image, we need to behave differently. While I found that Firefox and WebKit both generated a HTML container to render image pages, their behavior surrounding script events of these pages were too inconsistent to be depended upon.

Here is a formatted example of what my a href tag JavaScript looks like:

//
//  tag href javascript
//
javascript:(function() {
	if( (document.contentType && document.contentType.indexOf('image/')>-1)
		||/.png$/.test(location.href)
		||/.jpg$/.test(location.href)
		||/.jpeg$/.test(location.href)
		||/.gif$/.test(location.href))
		{
			location.href='http://jbeckwith.com/bookmarklet/';
		}
		else if (!window.main) {
			document.body.appendChild(document.createElement('script'))
				.src='http://jbeckwith.com/my-bookmarklet.js';
		}
		else {
			main();
		}
	})();

After tidying up our script, and adding the surrounding tag, here is a final rendered output of our code, I came up with the following:


It's a bookmarklet!

Loading jQuery and jQueryUI

Now that the bootstrapper is created, I am going to focus the rest of the article on the external JavaScript file that contains the meat of the code. With the script I wrote, I needed to use a good deal of visual effects. I am already comfortable with JQuery, so I chose to use it as my JavaScript framework:

//
// create javascript libraries required for main
//
if (typeof jQuery == 'undefined') {
	// include jquery
	var jQ = document.createElement('script');
	jQ.type = 'text/javascript';
	jQ.onload=getDependencies;
	jQ.onreadystatechange=function() {
		if(this.readyState=='loaded' || this.readyState=='complete') {
			getDependencies();
		} // end if
	};
	jQ.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';
	document.body.appendChild(jQ);
} // end if
else {
	getDependencies();
} // end else

If you look at the example in the Smashing Magazine article, you will notice a couple of differences. We need to add an event for onreadystatechange to handle Internet Explorer. I found that IE inconsistently set the readyState of the script object to ‘loaded’ or ‘complete’ in various parts of the DOM, so as a rule I check for both. If you don’t make this change, IE will never notify the script that jQuery is finished loading.

Secondly, I have added the getDependencies() method to manage loading required scripts (in addition to jQuery). Since I am depending heavily on a few jQuery UI components, I needed to load both an external JavaScript file and an external CSS file:

//
// getDependencies
//
function getDependencies() {

	// make sure jqueryUI is loaded
	if (!jQuery.ui) {

		// get the link css tag
		var jQCSS = document.createElement('link');
		jQCSS.type = 'text/css';
		jQCSS.rel= 'stylesheet';
		jQCSS.href = 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css';
		document.body.appendChild(jQCSS);

		// grab jquery ui
		var jQUI = document.createElement('script');
		jQUI.type = 'text/javascript';
		jQUI.src = 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js';
		jQUI.onload=getDependencies;
		jQUI.onreadystatechange=function() {
			if(this.readyState=='loaded' || this.readyState=='complete') {
				getDependencies();
			} // end if
		};
		document.body.appendChild(jQUI);
	} // end if
	else {
		main();
	} // end else
} // end getDependencies function

In this case, I’m really only waiting on jQuery and jQuery UI to load. If there were more dependent scripts, I would likely create an array of scripts that need to be loaded, and check all of their completion every turn through the getDepenencies method.

Embedding Styles

With the supporting code written, we’re now ready to work on our main method. This is where bookmarklets really are different based on your task. In my case, I’m creating a visual element on the page, complete with styles to match the target site. This works pretty much as expected, with a single caveat: any style definitions you create must be at the very bottom of your appended script. Internet Explorer has a nasty habit of inconsistently handling styles and scripts when appended to the DOM. For some reason beyond my understanding, appended style definitions, whether via script or ajax calls, only work if they are at the very bottom of the appended code. This is fantastically fun to figure out on your own, so hopefully I’ve saved you some trouble.

//
// main
//
function main() {
	// only do this the first time the bar is loaded on the page
	if ($("#myBar").length == 0) {
		// append the styles and bar

		var barHtml =	"\
							\
								\
								drag images to the mainbar\
								\
									done\
									cancel\
								\
							\
						\
						";
		$("body").append(barHtml);

This code simply creates a formatted div and adds it to the top of the page.

Cleaning up the mess

If you look at the generated HTML above, you’ll notice that I include a cancel link. I like to give the user the option to cancel out of using the current bookmarklet, and even relaunch the bookmarklet without issue. So when you’re done, make sure to test closing and re-launching the code. I suggest keeping all of your elements on the page, and simply hiding them from the user:

		//
		// myBar close evnet
		//
		$("#cancelLink").click(function(e) {
			// hide the bar
			$("#myBar").fadeOut(750);

			// remove any img classes or handlers
			$("img").removeClass('my-hover').unbind().draggable("destroy");

			// reset the thumbnail span
			$("#myBar-thumbs").html('');

			// reset the text
			$("#myBar-text").html("drag images to the mybar");
		});

And for now, that’s it. For the source to this project, visit my GitHub.

Using Ant with Adobe Flex – Part 1

Justin — Wed, 15 Dec 2010 04:09:24 +0000

Welcome to the first part in a multi-part series on building Adobe Flex projects using The Apache Ant Project.

So why would we want to use ant to build our flex projects? Flash Builder does a great job of building our actionscript and mxml. But it does not do a great job of integrating into our existing automated build frameworks. For those of us who have been writing Java in an enterprise environment, Ant is common knowledge. If you’ve spent any time working with the Microsoft .NET platform, you may have been exposed to NAnt or MSBuild. The idea is that we need to have a reliable, repeatable build process that can execute outside of the context of our development environment. For my team, this means an independent build server (in my case, a virtual machine). An independent build server means nightly builds, and software that can run without the user at the keys.

Before we get started, I think it’s a good idea to run through the list of tools I’m using for this article:

Apache Ant – v.1.8.1
Flash Builder – v.4.0.1
Flex SDK – v.3.5.0, v.4.1.0

So lets get started!

Download, Install, and Configure Ant

The first step is to download ant. At the time of this article, you can download the binaries at http://ant.apache.org/bindownload.cgi. The binaries are included as a *.zip file, so we need to unpackage our tool in a place that makes sense. I chose to create a directory structure that was consistent with other installed software on my system:

C:\Program Files (x86)\Apache\apache-ant-1.8.1

After Ant is installed in the appropriate location for your system, you need to create/modify a few system variables in order to use it. Start by right clicking on ‘Computer’, and navigate to ‘Properties’. Click on the ‘Advanced System Settings’ option, and then click on the ‘Environment Variables’ button.

The variable you need to create is ANT_HOME. Under system variables, click on the ‘New…’ button. Enter the name ANT_HOME, and enter the path you used to install Ant. For me, this is ‘C:\Program Files (x86)\Apache\apache-ant-1.8.1′:

We also need to modify the PATH variable, which will allow us to invoke Ant from the command line. Find the PATH variable in your system variables, and choose ‘Edit…’. At the end of the existing property value, add the full path to your Ant installation, with the addition of the bin. For me, this is ‘C:\Program Files (x86)\Apache\apache-ant-1.8.1\bin;’. We are now ready to use Ant.

Configuring The Flex SDK

For the purposes of this post, I am going to assume that you’ve already installed Flash Builder. In order for Ant to find the Flex SDK, we need to create an environment variable that points to the appropriate location. Instead of creating an environment variable that points to a specific SDK directory, I like to create a variable that points to the root of all SDKs. This allows us to choose the appropriate SDK version inside of the build file, and allows for building bits that use various SDK versions easily. Create a new environment variable named FLEX_HOME. Set the path to the root of your Flex SDK installations; for me this is: ‘C:\Program Files (x86)\Adobe\Adobe Flash Builder 4\sdks’. In the case of an independent build machine, you can install the Flex SDKs you need to use independent of Flash Builder.

Configuring Flash Builder to Invoke Ant (optional)

Generally, I invoke my Ant scripts from the command line. If you’re working from a development machine, you may choose to configure Flash Builder to invoke your Ant scripts directly from the IDE. To get this working, I followed the tutorial listed here:

http://www.zoltanb.co.uk/Flash-Articles/fb4-standalone-how-to-install-ant-in-flash-builder-4-premium.php

To enable Ant from Flash Builder, use the following steps:

Go to Help > Install New Software
Click on Available Software Sites
Click on ‘Add..’
Type in: Name: Galileo – Location: http://download.eclipse.org/releases/galileo/
Go back to Help>Install New Software
Select Galileo from the drop down:
Wait until the List gets populated. It might take a long time!
Type in ‘Eclipse Java’ in the search box to narrow down the search
Select Eclipse Java Development Tools
Click on Next
Accept the Terms and click on Finish
Click on Yes to restart FB4 and apply your changes:
Go To Window> Other Views
Select Ant and click OK

These steps will allow you to build your project in Flash Builder using Ant. Now our environment is set up and configured. In the next part of this series, I will go over how to write your Ant scripts.