August 2005 Archives

So you want to edit .mxml files in Eclipse, and don't want to pay for the oXygen plugin? No problem! This entry will show you how to configure Eclipse for Flex development the open-source way.

I've looked at a few of the XML plugins available (oXygen, XMLBuddy, etc) and from my own personal experience the best option that I've found for Flex development is the Eclipse Web Tools Platform.

The Web Tools Platform consists of two subprojects - j2ee and web standards. The web standards project includes editors for HTML, XML, CSS, etc. Because I'm a ColdFusion developer and don't do j2ee, I'm not interested in the j2ee subproject. By installing the web standards plugin from web tools, you can turn Eclipse in an .mxml editor, and as an added bonus get decent .css support as well.

I'll be showing more about this configuration during my From Flash to Flex talk next week, but for those of you who won't be able to attend and for those who plan on attending but want to jump ahead, here's how you can configure Eclipse for Flex.

1. Download Eclipse 3.1
2. Extract the .zip file to "install" it. I extracted mine to C:\Program Files (there is no setup wizard).
3. Download Web Tools 0.7. Important: You only want the Web Standards project if you don't plan on doing j2ee work. Also, you need to make sure you get all of the requirements (under the blue requirements header) or the plugin won't work. You'll want to get all of these files on the download page:
   
   
   
   • emf-sdo-xsd-SDK-2.1.0.zip
   
   
   • GEF-SDK-3.1.zip
   
   
   • JEM-SDK-1.1.zip
   
   
   • wtp-wst-0.7.zip (This is the web standards subproject)
4. Extract all of the .zip files to the directory where you extracted Eclipse to (again, mine was C:\Program Files). This installs all of the plugins.
5. Now that the appropriate plugins are installed, we need to configure Eclipse to recognize .mxml.
   
   
   
   1. Start Eclipse
   2. From the menu, select Window -> Preferences. Select General -> Content Types. On the right, expand Text and highlight XML. Click the "Add" button and enter "*.mxml" as the file type. Click OK.
   3. Still in the Window -> Preferences menu, expand "Web and XML" and select "XML Catalog". Click "User Specified Entries" and click "Add" and use the following values.
      
      
      
      • URI: browse for the path to the mxml.xsd file (something like: C:\Program Files\Macromedia\Flex\extras\schema\mxml.xsd)
      
      
      • Key: http://www.macromedia.com/2003/mxml
   4. Click OK to close the preferences window.
6. All that's left is create a Simple project, and add a new .mxml file. When you open it up, the XML plugin starts off in design view. Click the "source" tab on the bottom left of the content pane to go about your Flex coding as you normally would.
   

Whenever the web tools XML plugin sees the "http://www.macromedia.com/2003/mxml" namespace, you get full code hinting for both tags (like <mx:Button>) and attributes (like enabled="false"). It may not be an ideal solution (you don't get integrated ActionScript help), but it works pretty good and I've been having success with it.

Now, all you need to do is add a few templates to speed up workflow. The main templates I use are to set up an empty .mxml with mx:Application tags, and also a "sript block" tag to automatically create an mx:Script with CDATA. To edit your templates, go to Window -> Preferences and select "Web and XML" -> "XML Files" -> "XML Templates". The rest of the process should be pretty straightforward. Templates can be accessed via Control+Space (content assist - just look for the template name in the list).

Enjoy, and hopefully I'll see you on Tuesday!

Finally, the day we've all been waiting for...

Edwin van Rijkom has just flipped the switch and made the Screenweaver 3 OS site public.
Relevant links:

• Screenweaver on OSFlash
• Screenweaver Developer Wiki (Trac)
• Source Code (Subversion Repository)

The OSFlash page has a collection of links, including links to the installer as well as mirrors. The developer wiki is for those looking to help out. It also provides some background information and shows what's been happening lately (check out the "timeline" to see recent activity).

Enjoy!

This is just a quick reminder that my presentation on From Flash to Flex was moved from Friday August 26th to Tuesday August 30th.

The location is the Free Library of Philadelphia in the 4th Floor Meeting Room from 7-9 PM. There will be also be some cool stuff to give away, so try not to miss it! If you plan on attending, feel free to post in the comments.

I'll be posting an entry in the next day or so to lead up to the presentation next week... It's sort of a "quick setup" guide, but I'll walk through the process as part of the presentation as I'm sure there will be people there that won't have read my weblog before the meeting. Stay tuned!

... and released as Open Source Software!

Not too long ago on the OS Flash list I started a discussion about the External Interface API and how it could be used to create synchronous projectors. I talked about reviving my SharpFlash project, and also, without thinking anything would happen out of it, talked about possibly contacting the ScreenWeaver folks to see if we could use their codebase since it's been dormant for so long and no longer a commercial product.

Much to my surprise, Edwin wrote me back and said this was something he was considering. After a few conversations back and forth and figuring out the logistics of it all, I'm happy to say that Edwin has decided to release the source code for ScreenWeaver.

Currently we're (he, mostly) in the process of cleaning it up a little bit and bringing it up to date so that it compiles with the newest Visual Studio. It was built with Visual C++ 6.0, and thus is a bit dated. I'm also working out a command-line build option, so that you can build ScreenWeaver without having to pay for a copy of Visual Studio and just use Microsoft's freely available C+ Toolkit.

Stay tuned.. the code is almost ready to go and we're ironing out some details and writing some developer documentation. This is *huge* news. ScreenWeaver was the most amazing projector creator for so long, and now that it's going to be updated with ExternalInterface to support synchronous communication, it's going to be rise to the top of the projector list again!

The roadmap is to release the source code for ScreenWeaver 3 and SWCore as it is now (updated to work with Flash 7/8). Then, we'll work on adding ExternalInterface support for a synchronous API. Following that, we'll be looking at using wxWindows and the Flash Netscape Plugin to provide a cross-platform solution since ScreenWeaver is Windows-only.

ScreenWeaver lives! Thanks Edwin, Thomas, and Martijn for all of your hard work and this wonderful decision! I'm really glad I threw the idea out there to contact them.. Fate works like that sometimes :-)

Somehow I managed to get invited by Car and Driver to participate as an editor for the day in their exclusive Ride and Drive program.

I'm a car enthusiast and naturally have a subscription to Car and Driver magazine. Apparently there's a random selection process that picks a few people from the subscriber base in certain areas where the events are held and offers them the chance to be an editor for the day. The idea is simple: As editor for the day you get to drive their cars around some cones in a parking lot and submit your opinions for magazine consideration.

Beating up on cars I don't own, no string attached? I'm there! I didn't so much care as to having quotes in the magazine, I was just looking forward to driving around the test courses.

Here's a picture of the letter they sent me, along with the registration card I had to use to get in:

Because we were allowed to invite a friend along for the ride, I brought Justin, a long time high school / college friend and fellow car enthusiast, down with me to FedEx field (where the Washington Redskins play, just inside 495 - the DC Beltway).

I suppose at this point I should mention that while my magazine subscription is still to my place in Baltimore, I actually just moved to Hershey, PA about a week ago. More on that later (maybe).. Anyway, we had an appointment at 8 to meet the Car and Driver crew in the stadium parking lot. Being as I now live much further away, it was quite an early start for us. Let's just say I'm not entirely used to getting up at 4 AM and driving 3 hours while seeing the sun rise.

Anyway, when we arrived, we were greeted by the 4 test cars and two tracks. The tracks were done in typical autocross style of cones in a parking lot, but the parking lot was huge and the tracks were laid our bigger than you might expect.

Here's the two tracks, side by side, in the straightaway for acceleration testing:

The one track was for testing a Cadillac STS and BMW 530i. The other for testing a Cadillac CTS against a Lexus ES 300.

We collected as a group under the welcome tent (there were maybe 30-40 people invited total) and listened to some driving instruction. The group was divided in half with half going to one track and the other the half going to the other. At each track there were 4 cars (2 of each type) to accommodate 12 drivers (3 people + 1 pro driver for each car). The first track I went to was comparing the CTS and the ES330. Halfway through the event, the two groups switched tracks.

The idea was you drive the 1 car for two laps, then drive the other car for two laps so that you could make a good comparison between the two. They asked us to focus on braking, handling, acceleration, overall ride and comfort, steering response, etc. Inside the cars, the pro driver was always in the right front passenger seat telling us the best way to maneuver the course.

What a blast! The cars were a little underpowered for my liking, and they wouldn't let us turn traction control off, but rest assured there were tires squeeling in every turn. The CTS was more fun than the ES330, and I even managed to avoid running over any cones.

The other track was much of the same, but the STS and 530i were a slightly different class and weren't quite as nimble. Despite lots of understeer, I think I avoided most of the cones there as well. I liked the STS overall better than the 530i, but the BMW was the better handling of the two.

All in all it was great fun. We were there for about 2 hours of testing, and left plenty of rubber on the pavement. Thankfully, they didn't ask us to replace any of the tires...

I'm not really expecting my quotes to appear in the magazine, but I have a feeling Justin's might. He came up with quite a few good ones... I'm looking forward to the issue where they print the results and seeing if they used any of our quotes / pictures in it.

I have a few more pictures of the day, but no where to put them all at the moment. Maybe this is a good time to finally build myself a photo gallery, or get a Flickr account... Anyway, here's one more picture. This is the Cadillac STS going through the handling course:

Definitely a memorable experience...

Flash 8's ability to use bitmap / pixel data in the player is an awesome new feature addition. When you're doing a lot of pixel manipulation, here's a little trick to improve performance: Use an off-screen bitmap for setPixel and then copy the pixels into an on-screen bitmap.

Consider the following code snippet:

import flash.geom.Point;
import flash.display.BitmapData;
import flash.display.Bitmap;

var width:Number = 100;
var height:Number = 100;

var offScreen:BitmapData = new BitmapData(width, height);
var onScreen:BitmapData = new BitmapData(width, height);

var zeroPoint:Point = new Point(0, 0);

var clip:MovieClip = createEmptyMovieClip("clip", 1);
clip._x = 10;
clip._y = 10;
clip.attachBitmap(onScreen, 1); // wire the bitmap to the screen

onEnterFrame = function() {
	// do all of the pixel manipulation in the offScreen BitmapData
	for (var y:Number = 0; y < height; y++) {
		for (var x:Number = 0; x < width; x++) {
			offScreen.setPixel(x, y, x*y+getTimer());
		}
	}
	
	// as a final step, copy all of the offScreen pixels to the onScreen BitmapData
	onScreen.copyPixels(offScreen, offScreen.rectangle, zeroPoint);
}

The difference may not be huge, but it does make a difference. This technique, drawing off screen and then copying on screen, is called Double Buffering.

Already making great use of BitmapData, have you see Andre's 8ball lab yet?

• Jim Guerard : Putting the Customer First with Studio 8 - http://www.macromedia.com/devnet/logged_in/jguerard_studio8.html
• Mike Downey : Flash Professional 8 - http://www.macromedia.com/devnet/mx/flash/articles/whatsnew_8.html
• Jennifer Taylor : Dreamweaver 8 - http://www.macromedia.com/devnet/mx/dreamweaver/articles/dw8_newfeatures.html
• Maureen Keating : Fireworks 8 - http://www.macromedia.com/devnet/mx/fireworks/articles/fw8_newfeatures.html
• Lucian Beebe : Flex 1.5 and Flash Player 8 - http://www.macromedia.com/devnet/flex/articles/fp8_benefits.html

... via Bret Peters of WAMMO.