Archive for the 'Flex' Category

16th Apr 2013

Flex Polygon Painting Tool

For one of my recent projects, I was asked to create a tool that would allow the user to draw polygon shapes using the mouse. After a few hours of searching Google, I did not come up with anything that was quite what I needed. So I decided to create something from scratch.

This is really just a proof of concept and not a complete application, but I thought I would post the code in case anyone else is trying to do something similar.

PolyPaint

Get Adobe Flash player

Source (this is just a zip file of the src directory, not a complete project):

PolyPaint-src

Posted by Posted by Jeremy Wischusen under Filed under ActionScript 3, Flex Comments No Comments »

27th Dec 2009

Professional Cairngorm: Errata?

So I was browsing around the Cairngorm site this morning and while I was there I happened to look at the RSS feed and saw something entitled “Quoted in “Professional Cairngorm” “. Turns out one of the authors I quoted in my chapter on criticisms of Cairngorm found the quotation in a Google book search. It also turns out that I may not have fully conveyed the intent of the author’s criticisms. As such, I wanted to post a link to the authors post so that you can look at it directly and allow the author to correct anything I may have mis-represented.


http://blog.iconara.net/2009/12/12/quoted-in-professional-cairngorm/

Update:
Heard back from the author at the cited post. The issue was not that I misquoted the author in the passages that I cited, but rather I did not convey the full scope of the author’s criticisms of Cairngorm. The passages I quoted focused on criticisms of Singletons (which are one of the major criticism levelled at Cairngorm), but the author has also made criticisms of Cairngorm that go beyond its use of Singletons. You can read the author’s thoughts on Cairngorm and other topics on this blog http://blog.iconara.net.

Posted by Posted by Jeremy Wischusen under Filed under Application Design and Architecture, Cairngorm, Flex, General Comments No Comments »

23rd Sep 2009

Professional Cairngorm

So since you can now find this via a Google search, I am guessing it is OK to release to the general public. Here is the book I wrote on using the Cairngorm Framework with Flex.
http://www.wiley.com/WileyCDA/WileyTitle/productCd-0470497262.html

Posted by Posted by Jeremy Wischusen under Filed under ActionScript 3, AIR, Application Design and Architecture, Flex, General Comments No Comments »

23rd Jan 2009

Expanding All Tree Nodes

I am working on a project that requires the data provider for a tree component to be reloaded periodically. When I would reload the data, the tree would revert to it’s collapsed state. From a usability point of view, this was not the best of situations. So I started doing some research how to expand all of the nodes in a tree. I came across of a couple of places using loops such as:

private function expandTree():void{
for (var i:int = 0; i < thisTree.dataProvider.length; i ++){
thisTree.expandChildrenOf(thisTree.dataProvider[i], true)
}
}
private function collapseTree():void{
for (var i:int = 0; i < thisTree.dataProvider.length; i ++){
thisTree.expandChildrenOf(thisTree.dataProvider[i], false)
}
}

When looking at this, I noticed the name of the function is expandChildrenOf, which to me inferred it would expand all of the children of the given node. So I looked into a bit further and the description for this function in the documentation states (http://livedocs.adobe.com/flex/2/langref/mx/controls/Tree.html#expandChildrenOf()):

expandChildrenOf () method
public function expandChildrenOf(item:Object, open:Boolean):void

Opens or closes all the tree items below the specified item.
Parameters
item:Object — the starting item

open:Boolean — toggles an open or close operation

So if that is the case and I pass this function the root node of the dataProvider such as in the following:

this.myTree.expandChildrenOf(this.myTree.dataProvider[0],true);

It did as expected and expanded all of the nodes under the root node. No loop required.

Posted by Posted by Jeremy Wischusen under Filed under ActionScript 3, DHTML, Flex, PHP Comments 1 Comment »

12th Sep 2008

Comparing Flex Frameworks

Yesterday I attended a meeting of the local Flex user group. The subject was comparing Flex frameworks presented by Yakov Fain. You can view the slides from the presentation here.

I myself have never used one of these frameworks, as I simply have never had the need for one. However I have been researching them and after attending this presentation I still feel that my initial inclination towards them stands; they exist mostly for standardization when working in teams.

By this I mean you can accomplish the same thing you can with the framework using standard Flex code and ActionScript, more than likely in a much simpler fashion depending on the project. What they afford you when working in a team is that you know that if everyone is using the same framework, then they are coding in the same fashion, hence the code written by one team member should work with the code by another. And as Yakov pointed out, they allow you to spilt up large projects among a team.

This is a nice benefit, but these benefits often come at a cost. For example one of the major complaints about Cairngorm is that you have to write a lot of classes. One reason for this is that in Cairngorm each event that the application triggers has to have a corresponding Command class. That’s a class for every event (its actually worse than that as there are other classes that these need to communicate with that you need to write as well). For a large application with a lot of events, this quickly becomes a lot of code.

Another implication of this is that you can only have one event responder per event. In other words, you lose the benefit of being able to have multiple responders to a single event that is built into Flex events, which as far as I am concerned was a great improvement over the AS2 model. Cairngorm essentially takes you back to the AS2 model.

Mate has a better event model and it does do a nice job of managing dependencies via dependency injection, but you have to maintain an event map and Mate is an MXML only framework.

And as far as PureMVC goes (look at the flow diagram slide for it in the presentation I linked to) all I can say is ???????. In its defense, PureMVC was designed to be language agnostic, but it seems to suffer from the “trying to be everything to everyone” syndrome.

The slides I linked to do a good job of pointing out the strengths and weaknesses of each framework, so I will refer you to them if you are interested in learning more.

So for now, it seems that these frameworks would get in the way more than they would simplify anything for me.

Posted by Posted by Jeremy Wischusen under Filed under Flex, OOP Comments No Comments »

28th Aug 2008

Flex 4 Available on Adobe Open Source Site

As the title says: http://opensource.adobe.com/wiki/display/flexsdk/Gumbo

Posted by Posted by Jeremy Wischusen under Filed under Flex Comments No Comments »

25th May 2008

Flex YouTube Video Search

Since I had such a fun time with the Truveo video search, I decided to do the same type of thing with YouTube. I was originally going to have it play the video, but as it turns out for some reason when loading a YouTube player into a SWFLoader, it only works the first time and the fixes I found are a little more than I can to put into something that is basically just an experiment.

Posted by Posted by Jeremy Wischusen under Filed under ActionScript 3, Flex Comments No Comments »

21st May 2008

Flex Truveo Video Search

A few weeks ago someone contacted me about writing about the new APIs that AOL has made available. While looking at the AOL dev site I came accross the Truveo API and decided I would try creating a search application in Flex.

Posted by Posted by Jeremy Wischusen under Filed under ActionScript 3, Flex Comments No Comments »

01st May 2008

Using an Item Renderer in a Flex DataGrid Component

So this store finder project is turning out to be full of nifty little discoveries. The latest request I got was that the client would like the 5 star (or in this case diamond) rating component to appear inside the data grid instead of simply displaying a number. Now in general when I get a request to nest one component (especially a custom one) inside of another component, I am very wary. However, as it turned out, this was incredibly simple.

The original rating component I was using can be found here.

The DataGridColumn tag allows you to specify an item renderer property.

<mx:DataGridColumn headerText=”Popularity” dataField=”popularity” itemRenderer=”custom.DataGridRating”/>

This is a component that will be used to draw the content of the cell. An item render is passed a property called data, so for simplicities sake, I simply modified the original rating component to reference the data object passed to it, and saved it as a separate component, which ended up looking like:

ORIGINAL

<?xml version=”1.0″ encoding=”iso-8859-1″?>
<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml”
horizontalScrollPolicy=”off” verticalScrollPolicy=”off”>

<mx:Script>
<![CDATA[

/**
* The rating value to be displayed by this component.
*/
[Bindable]
public var rating:Number = 0;

]]>
</mx:Script>

<mx:HBox horizontalGap=”1″ verticalCenter=”0″>

<mx:Spacer width=”4″ />

<mx:Repeater id=”stars” dataProvider=”{[1,2,3,4,5]}” count=”5″>
<mx:Image id=”starIcon” width=”18″ alpha=”{(rating > stars.currentIndex) ? 1 : .35}” source=”@Embed(‘diamond.gif’)” />
</mx:Repeater>

<mx:Spacer width=”4″ />

</mx:HBox>

</mx:Canvas>

Modified

<?xml version=”1.0″ encoding=”iso-8859-1″?>
<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml”
horizontalScrollPolicy=”off” verticalScrollPolicy=”off”>

<mx:HBox horizontalGap=”1″ verticalCenter=”0″>

<mx:Spacer width=”4″ />

<mx:Repeater id=”stars” dataProvider=”{[1,2,3,4,5]}” count=”5″>
<mx:Image id=”starIcon” width=”18″ alpha=”{(data.popularity > stars.currentIndex) ? 1 : .35}” source=”@Embed(‘diamond.gif’)” />
</mx:Repeater>

<mx:Spacer width=”4″ />

</mx:HBox>

</mx:Canvas>

Note that data.popularity matches the data field of the data column that the item renderer has been applied to. And that was it.

<mx:DataGridColumn headerText=”Popularity” dataField=”popularity” itemRenderer=”custom.DataGridRating”/>

You can see the live product at:
http://www.independentlycertifieddiamonds.com/find.html

Update

I found that this component as written would round up to the next value. For example, I tested with a value of 3.25 and it showed it as 4. This was because the original component was using th currentIndex property as opposed to the currentItem property. currentIndex is 0 based meaning the value being compared was one less than it should have been. You can fix this by modifying the code as follows.

<mx:Repeater id=”stars” dataProvider=”{[1,2,3,4,5]}” count=”5″>
<mx:Image id=”starIcon” width=”18″ alpha=”{(rating >= stars.currentItem) ? 1 : .35}” source=”@Embed(‘diamond.gif’)” />
</mx:Repeater>

Posted by Posted by Jeremy Wischusen under Filed under Flex Comments No Comments »

29th Apr 2008

Setting the Initial Sort for a Flex DataGrid Component

A client asked me recently to to have the data being displayed in a Data Grid be initially sorted by store name (See Creating an Image Reflection in Flex to view the project in question). The way you do this is by sorting the Datagrid’s data provider. To do this, you need to create a sort object, assign it some sort fields, set that sort object as the dataprovider’s sort object (so you have to be using some sort of sortable collection to do it this way) and refresh the collection. This looks something like this:

private var storesXMLCollection:XMLListCollection = new XMLListCollection();
private var initSort:Sort = new Sort();

/ /SortField(name:String = null, caseInsensitive:Boolean = false, descending:Boolean = false, numeric:Boolean = false) so in this case companyName is the XML Node I am sorting on and the second parameter indicates that the sort should be case insensitive.

this.initSort.fields = [new SortField(“companyName”, true)];

this.storesXMLCollection.sort = this.initSort;

//once the sort object has been applied, refresh the collection.

this.storesXMLCollection.refresh();

Posted by Posted by Jeremy Wischusen under Filed under ActionScript 3, Flex Comments No Comments »