So FlexCamp OC is a wrap.  It was great to see everyone out there, even with the odd security at Boeing (sorry Suraj – REJECTED)…  All in all it was a lot of fun, unfortunately I did miss the middle sessions as I had to run back to my daughters Science Fair in Irvine (Gabi won top honors in her category!).

So as promised, here are the recommended links from my Cocomo presentation:

Cocomo page on Adobe labs: http://labs.adobe.com/technologies/cocomo/

Cocomo Developer Portal: https://cocomo.acrobat.com/

Cocomo Dev Blogs: http://blogs.adobe.com/collabmethods/

In addition here is my PowerPoint file (Cocomo Overview), although without the discussion from the conference not really sure how useful it is.  Jeremy is promising we will have the videos from the conference online “soon”… Will update this post with a link when available.

All the demos presented at the session were straight out of the CocomoSDK, so go sign up now and start collaborating!

Just wrapped my session at Adobe MAX on E4X.  I think the session went well, although there were not as many questions during the session compared to the previous times I’ve given this topic.  Don’t know if that means I’m getting better at covering the topic or losing the audience…

I did get several good questions at the very end of the session (post closing – so unfortunately it did not go on the recording).

The two followups I have from the session are on XSLT and data validation (XSD/DTD).  Stay tuned for updates on those.

Presentation slides (warning, it is a big file -700k- because of the Adobe images):

http://www.rapidninja.com/blog/MAX2008/Marc_Bir_E4X.ppt

The code for the samples

http://www.rapidninja.com/blog/MAX2008/E4XSamples.zip

And finally the CSV2XML converter I used to create the Sessions XML file.

http://www.rapidninja.com/blog/MAX2008/CSV2XML.zip

Here are the materials for my session on introducing E4X at 360Flex 08 San Jose.  If you aren’t at 360Flex you are REALLY missing out, Tom and John really know how to put on a fun show.

First is the e4xSamples project archive that include all the sample E4X code:

http://www.rapidninja.com/blog/360FlexE4X/E4XSamples.zip

*updated 8/20 2PM PST

Second is the simple XMLPresenter that I used instead of PowerPoint.

http://www.rapidninja.com/blog/360FlexE4X/XMLPresenter.zip

I actually forgot to mention during the presentation that my “slides” were run through a super simple Flex app using e4x, so check out the XMLPresenter project for how I did that.  Having recently converted to Mac I was planning to run Powerpoint in a VM, but was warned Powerpoint gets tripped up on the resolution changes to support the projector (1024×768 ) and it causes nothing but problems.  So to avoid that headache I just wrote the “XMLPresenter” yesterday afternoon.

I’ll be updating this entry with feedback from the session as attendees ask questions, including updating the sample code, so check back often if you want more information.

Here are the promised links for reference material:

http://www.adobe.com/devnet/flex/articles/e4x.html

http://dispatchevent.org/roger/as3-e4x-rundown/

http://www.xml.com/pub/a/2007/11/28/introducing-e4x.html?page=2

http://www.adobe.com/devnet/flex/quickstart/accessing_xml_data/

http://learn.adobe.com/wiki/display/Flex/E4X

http://blogs.adobe.com/flexdoc/2008/04/masterdetail_flex_application_1.html

http://www.devx.com/webdev/Article/33393/1954

Link to the free Adobe Video for this session coming soon….
*Update 8/20 2PM PST* Now available here

Thanks Ted and Stacy!  Check out all the 360Flex Sessions here.

Post session feedback

Had a lot of fun at the session including some great audience participation Q&A both during and after the session.  Couple quick notes:

Code will be commented shortly.  The presentation had a pretty limited screen size so I intentionally kept all the code very terse, obviously once it is distributed and you have it in your Flex Builder some comments would help.  Expect an update by end of week with more “documentation”. *Done 8/20 2PM PST*

Sorting.  One of the questions was on sorting the result of an e4x expression and I totally missed the XMLListCollection which adds sorting and filtering (code based filtering, not e4x style).    Thankfully one of the attendees came up after the session to let me know about XMLListCollection, and I just wanted to state I really appreciate it when I get feedback (critiques, tips, answers) but unfortunately did not catch the name of the individual that stepped up (he also helped with an earlier session question as well).  I’ve updated the sample code and will publish it as soon as I get the other updates ready. *Done 8/20 2PM PST* See the e4xSimple component.

Distinct Results of e4x queries.  So what happens when you want a distinct result list from an e4x query?  Unfortunately that isn’t supported natively, but you can accomplish it with a little code to manage the distinct search.  Check out Josh Tynjala’s article on the Yahoo! Developer Network for a quick summary on how to make that happen.  I’ll also drop Josh’s technique into the sample code asap. *Done 8/20 2PM PST* See the e4xFiltering component.

Unknown XML Files.  What if you don’t know the structure of the xml you are loading?  Is e4x still helpful then?  The answer is yes, you can still use combinations of the descendants, child, attribute, and wildcard methods to effectively navigate the structure.

Comparing two XML files.  The question then arose can you use e4x to write a differencing tool to see the differences in two XML files, and the answer is yes AND it is a perfect sample code for the previous question.  Update coming soon… *Done 8/20 2PM PST* See e4xCompare component.

Thanks again to everyone that attended the session, it was an amazingly packed house.

*Update 8/20 2PM PST*

Just posted the updated sample code with several new examples.  If you have any questions on how to do things in e4x please ask, would love to extend the sample app to be a pretty extensive sample set.

So what is the issue? Here is the sample app:



<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”horizontal” >

<mx:Script>

<![CDATA[

import mx.controls.Image

import mx.core.DragSource;

import mx.core.UIComponent

import mx.events.DragEvent

import mx.managers.DragManager

private function doDragEnter(event:DragEvent):void

{

DragManager.acceptDragDrop(UIComponent(event.target));

}

private function doDragDrop(event:DragEvent):void

{

var img:Image;

if (event.dragInitiator.parent == dropCanvas)

img = event.dragInitiator as Image;

else

{

img = new Image();

img.source = (event.dragInitiator as Image).source;

img.addEventListener(MouseEvent.MOUSE_DOWN, doDragStart);

dropCanvas.addChild(img);

}

img.x = event.localX - (event.dragSource.dataForFormat("localX") as Number);

img.y = event.localY - (event.dragSource.dataForFormat("localY") as Number);

}

private function doDragStart(event:MouseEvent):void

{

var dragInitiator:Image = event.currentTarget as Image;

var dragSource:DragSource = new DragSource();

var dragProxy:Image = new Image();

dragProxy.source = dragInitiator.source;

dragProxy.width = dragInitiator.width;

dragProxy.height= dragInitiator.height;

dragSource.addData(event.localX, "localX");

dragSource.addData(event.localY, "localY");

DragManager.doDrag(dragInitiator, dragSource, event, dragProxy);

}

]]>

</mx:Script>

<mx:VBox>

I’ve found that many developers don’t know some of the coolest time saving features available to them. This can be anything like patterns, frameworks, plugins, even databases. This post is focused on the one thing that most Flex developers use everyday, the IDE.   I know some of you out there are using Notepad (or more likely TextMate or VI), but this post is for the rest of us that choose to suffer through the slings and arrows of Flex Builder.

One of the great things about Flex Builder being built on the Eclipse Platform is getting most (unfortunately not all) the features Java (and other) developers have been used to for years.  This post focuses on the shortcuts I like to use nearly everyday.

Navigation

• To kick off the list is [ctrl]+[click]. This has to be the single fastest way to navigate through the code when following an execution path. Note, this is the same as [F3], or [rt click]->”Goto Definition“.
• [ctrl]+[o]. Along the same lines as the above shortcut for quick navigation, [ctrl]+[o] brings up the quick outline. Note that the box on top is a filter box (a common theme in the IDE) that filters the contents (note it does not support wild cards)
  
• [ctrl]+[f6] (same as [ctrl]+[tab]), [ctrl]+[f7], & [ctrl]+[f8]. These all basically do the same thing, just for different aspects. They bring up a list of Editors, Views, or Perspectives in last visited order. This means you can toggle between the last two items very quickly. I also find this much faster for finding a specific file than scanning the tabs across the top.
  
• [ctrl]+[e] – Similar to [ctrl]+[f6], the big advantage this feature has is the search box (including pattern matching). If I’m switching between more than just two files this is my preferred method.
• [ctrl]+[pg up] & [ctrl]+[pg down] Since we are talking about moving through views, these are the easiest way to sequentially move through editors. Since I have a tendency to have a dozen or more open at a time I use this less than two methods above.
• [ctrl]+[shift]+[t] & [ctrl]+[shift]+[r]. Open Type and Open Resource, both dialogs are great time savers for opening a target file or class. If you are like me and hate to use the mouse any more than absolutely necessary these two dialogs eliminate any need to use the navigator to find a file. Both dialogs are effectively the same, but Open Type only lists types which makes it faster for Type searches.
• [ctrl]+[shift]+[g] – Search for References in the current workspace. This is great when assessing code change impacts. Just place the cursor on the symbol you want to hunt for and hit [ctrl]+[shift]+[g] the search view will spit out every reference in your current workspace. There is also [ctrl]+[g] for searching for Definitions, I just don’t use it very often.
• [alt]+[left] [alt]+[right] – Moves through the last areas you edited. Basically a super weak version of Bookmarks.
• [ctrl]+[m] Maximize Window toggle, same a double clicking the tab for the editor. I use this constantly to see more code and then jump back to debug view.
• [ctrl]+[shift]+[p] – Goto matching bracket, really useful on larger blocks of code.
• [ctrl]+[L] - Goto Line #. Especially useful when debugging an error spit out at runtime with a stack trace.
• [ctrl]+[,] & [ctrl]+[.] – Next and Previous problem.
• [ctrl]+[f] Opens the find dialog, [ctrl]+[k] repeats the last search (same as [f3] in most windows based IDE’s)
• [ctrl]+[3] Quick Access Uber tool. This little gem basically lets you execute anything. You can switch editors, views, perspectives, execute commands, it even has a list of your previous choices to provide quick access to any commands that don’t have their own shortcuts. Note again that this includes a filter, although it does not support wildcards

Code Editing

• [ctrl]+[space]. Seriously, I’ve been asked more than once “what is that key that brings up the list of available methods?” This is one of those features that makes life so much easier. Even more than standard code completion, this great feature will automatically add the selected class to your imports if needed! This is great when copying code between classes, I just delete the last character and trigger code completion, done!
• [ctrl]+[shift]+[space], similar to code completion Parameter Assist is critical when working with libraries (like the Flex Framework). It provides a summary of the parameters of the current method invocation.
• [ctrl]+[/] Super quick way to comment/uncomment lines of code
• [ctrl]+[d] Delete the current line
• [alt]+[up] & [alt]+[down] Move current line up (or down). Great for quickly moving code around. Also works with groups of code by highlighting multiple lines.
• [ctrl]+[alt]+[up] - Duplicate current (or selected) lines.
• [ctrl]+[shift]+[o] - Organize Imports, basically just removes any unnecessary imports.

One last shortcut that must be listed

[ctrl]+[shift]+[L] lists all shortcuts, hit [ctrl]+[shift]+[L] with the list open to open the editor.

With all that said, I sorely miss two things from my CodeGear/MSVS IDE’s. First is autoformatting. I know a lot of people hate to have the format forced on you, however I find it a great time saver and keeps things nice and tidy. And yes I know that Eclipse has autoformatting features, but not for MXML/AS (at least not that I can find, PLEASE let me know if I’m wrong).

Second is bookmarks. I’m used to setting a bookmark with [ctrl]+[shift]+[1], then I can be anywhere else in the project and hit [ctrl]+[1] to jump to the bookmark.

Actually, make that three things – Refactoring Tools. This is another one where Java tools in Eclipse have the features, but AS doesn’t.

Ok so this post started as a quick hit list of my most used shortcuts, but I made the mistake of leaving the draft up while I was working on a project. Each time I used a shortcut I dropped it on the post, now it has gone from a quick list to a pretty long list… One of these days I’ll learn how to be more timely with my posts to keep them from being to long winded…

So what are your favorite shortcuts?

Update May 6th, 2009

Ernest Pasour has answered one of my wish list items and created an open source Flex Formatter (works with AS & MXML).  You can grab it off SourceForge here.  My recommendation is to add a new Remote Site in Eclipse with:

Name: Flex Formatter
URL: http://flexformatter.googlecode.com/svn/trunk/FlexFormatter/FlexPrettyPrintCommandUpdateSite

This allows you to keep up to date with changes easily. (And Ernest is obviously quite busy adding features).

So here is a weird little problem I ran into while using the generated webservice code in Flex 3. Basically if using the ASyncToken returned by the proxy class with an IResponder, the token never triggered any of the IResponder we never got a response. We tried to use the standard code like:


var service:MyWebService = new MyWebService();
var token:ASyncToken = service.myTestFunction();
token.addResponder(this);

However the responder functions (result and fault) are never called. The easy work around is using addEventListener, but it doesn’t explain why the ASyncToken never fires. I know in Flex 3 they extended the ASyncToken to user an array of responders instead of just one, unfortunately I have not been able to trace the dispatch code to the level required to see why the following sample fails. Am I just completely misunderstanding the framework??

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" implements="mx.rpc.IResponder" layout="vertical">

<mx:Script>

<![CDATA[
import mx.rpc.events.ResultEvent;
import mx.rpc.AsyncToken;
import mx.controls.Alert;
import mx.rpc.IResponder;
import mx.rpc.events.FaultEvent;

import mx.core.mx_internal;
use namespace mx_internal;

public function result(data:Object):void
{
Alert.show("result");
}
public function fault(info:Object):void
{
Alert.show("fault");
}

public function test():void
{
var token:AsyncToken = new AsyncToken(null);
token.addResponder(this);
Alert.show("dispatching"); token.dispatchEvent(ResultEvent.createEvent(result,token,null));

ResultEvent.createEvent(result,token,null).callTokenResponders();
}


public function testWithEventListener():void
{
var token:AsyncToken = new AsyncToken(null);
Alert.show("this works");

token.addEventListener(ResultEvent.RESULT, result);

token.dispatchEvent(ResultEvent.createEvent(result,token,null));

}

]]>
</mx:Script>
<mx:Button label=”TestMe” click=”test();” />

</mx:Application>

Update 4/23:

I added some code to the above sample (highlighted in Red) to show how to get the token to actually call the responders. The weird thing is a) the method is mx_internal b) the generated webservice does not reference it. Seems like they expect you to use addEventListener instead of the token responders.