Flex 2 :: Tree :: Walking the Tree method

October 16th, 2006

Hi,

I thought I would post this method to show some of you that the dataDescriptor rocks. One thing you will notice in the method below is there is an if() check on the model at every turn. With experience comes wisdom and I have found this is essential in creating methods that test the sands of time.

Also note, the method is 'actually' two methods. The first half of the method will back step on the item's parent. The nice thing about this is, if you do pass startAtParent as true, the first part of the method only gets executed once in the recursion algorithm. It's main purpose is to get the item's parent and siblings, loop through them and then branch down the chain.

This is handy if you want to know the item's sibling branches. If you do not need the sibling branches, pass startAtParent as false and you bypass the first part of the method and go straight to the item.

If the item is a leaf, it will just trace the leaf item. If the item is a branch, it will then recurse through the whole composite structure of the item passed.

I hope this helps people, and you can discover some of the fascinating aspects about recursion and dataDescriptors. OOP is all about abstraction and decoupling through dataDescriptors. Adobe has found a wonderful balance in all the composite controls they have made thus far.

Look for the comments where you could break into your own method branch.

/**
 * This method will traverse a Tree's model independent of it's
 * type.
 *
 * <p>Note :: This method may look long and arduous but, rest assured
 * it has all the checks to perform like a champ. Also, you 'could'
 * refactor part of this method but, for the sake of explanation, I
 * kept it all in one place.</p>
 *
 * <p>Remember, I had coupled the model to this method by tracing
 * @label, obviously you do not need to do this. The intention of
 * this example is to show you that the dataDescriptor seperates
 * the models type and is awesome. It enables you to create a tight
 * method like this without type checks on the model.</p>
 *
 * @param tree The Tree instance that will be examined by the method.
 * @param item An item found in the dataProvider of the Tree passed in.
 * @param startAtParent A boolean that determines if the method upon
 * initialization will back up one leve3l to the item passed in and
 * start it's recursion at the item's parent node.
 */

public function walkTree(tree:Tree, item:Object, startAtParent:Boolean = false):void
{
    // get the Tree's data descriptor
    var descriptor:ITreeDataDescriptor = tree.dataDescriptor;
    var cursor:IViewCursor;
   
    var parentItem:Object;
    var childItem:Object;
    var childItems:Object;
   
    // if the item is null, stop
    if (item == null)
        return;
       
    // do we back up one level to the item's parent
    if (startAtParent)
    {
        // get the parent
        parentItem = tree.getParentItem(item);
        // is the parent real
        if (parentItem)
        {
            trace("|-- Parent Node ", parentItem[tree.labelField]);
            // if the parent is a branch
            if (descriptor.isBranch(parentItem))
            {
                // if the branch has children to run through
                if (descriptor.hasChildren(parentItem))
                {
                    // get the children of the branch
                    // this part of the algorithm contains the item
                    // passed
                    childItems = descriptor.getChildren(parentItem);
                }
            }
            // if the branch has valid child items
            if (childItems)
            {
                // create our back step cursor
                cursor = childItems.createCursor();
                // loop through the items parent's children (item)
                while (!cursor.afterLast)
                {
                    // get the current child item
                    childItem = cursor.current;

                    var label:String = childItem[tree.labelField];
                    var branch:Boolean = descriptor.isBranch(childItem);
                   
                    // good place for a custom method()
                    trace("Sibling Nodes :: ", label, "Is Branch :: ", branch);
                   
                    // if the child item is a branch
                    if (descriptor.isBranch(childItem))
                        // traverse the childs branch all the way down
                        // before returning
                        walkTree(tree, childItem);
                    // do it again!
                    cursor.moveNext();
                }
            }
        }
    }
    else // we don't want the parent OR this is the second iteration
    {
        // if we are a branch
        if (descriptor.isBranch(item))
        {
            // if the branch has children to run through
            if (descriptor.hasChildren(item))
            {
                // get the children of the branch
                childItems = descriptor.getChildren(item);
            }
           
            // if the child items exist
            if (childItems)
            {
                // create our cursor pointer
                cursor = childItems.createCursor();
                // loop through all of the children
                // if one of these children are a branch we will recurse
                while (!cursor.afterLast)
                {
                    // get the current child item
                    childItem = cursor.current;

                    var label:String =  childItem[tree.labelField];
                    var branch:Boolean = descriptor.isBranch(childItem);
                   
                    // good place for a custom method()
                    trace("-- Sub Node :: ", label, "Is Branch :: ", branch);

                    // if the child item is a branch
                    if (descriptor.isBranch(childItem))
                        // traverse the childs branch all the way down
                        // before returning
                        walkTree(tree, childItem);
                    // check the next child
                    cursor.moveNext();
                }
            }
        }
    }
}
 

Peace, Mike

Flex 2 :: ResizeManagerFX v1.1.0 Resize and Move

October 3rd, 2006

Hi,

UPDATED :: The links got chopped, they work now.

Well, the ResizeManagerFX component is shinning now that the move algorithm has been added.

You cannot beat this component for out of the box functionality and hassle free ease of use!

The Example Explorer
The Product Page

The manager now provides an overlay that has anchor points IE Fireworks and supports dashed lines and patterns. The move button also has styles associated with as well.

The ResizeManagerFX SWC component resizes and moves any UIComponent using the custom styles of each individual client component.

This component can save you many hours of coding(which equals money) and debugging with it's out of the box resize and move functionality.

The manager also depends on stylesheets more than most components do, for the simple reason of allowing client components to define their own styles and remain encapsulated from the resize manager and each other.

Check out the Component Explorer to see how dynamic this component really is!

The manager provides the following functionality;

  • Client component resizing and moving.
  • Disabling and enabling of move and resize functionality
  • Client component bounds checking.
  • Client component minimum and maximum width and height checks.
  • Cutom cursor skin and offset styles.
  • Resize and Move button styles and offsets.
  • Resize and Move effects with easing and duration styles.
  • Resize types of none, realtime and animated.
  • Move types of non, realtime and animated.
  • Customized look and feel for each client's overlay and popup overlay.
  • Client overlay offset in insets.
  • Overlay thicknesses, skins and alpha.
  • Anchored overlay type with dashed line pattern styles.
  • Client and Manager resize and move events.
  • Convienent interfaces so subclassing of overlays is possible.
  • One line of code for addition and removal of client components.
  • Mouse shield to protect Application while dragging or moving.
  • Plus more...

When using the manager class, use the ResizeManagerFX.addClient(component) static class method to embed the overlay inside the client component and initialize resize and move functionality.

There are various styles that control to look and resize functionality of
each client component. Check the style's of the ResizeOverlay to find out which
styles will effect the embedded overlay and which styles effect the popup overlay .

The manager will also take into account the minimum and maximum width and
height of each client component when resizing. The manager also places the popup overlay above all components and creates a mouse shield so there is no misplaced events while resizing or moving.

This component was designed based on the ever increasing need to be
able to resize and move a UIComponent anytime and anywhere.

Screenshots

The image below shows a Tree with an anchored resize overlay and custom resize button skins.

The image below shows the component being moved with moveType == MoveType.NONE which moves the client component after the mouse up.

The image below shows a TitleWindow being resized with the standard ResizeOverlay that uses lines instead of anchors. The thickness and offset of the lines can be adjusted with styles.

The image below shows the resize buttons inset and shows the actual move button. This image demonstrates that you can adjust the hit area of the move button with offset styles. You can also control the skin and alpha of the move button along with cursor styles.

The bottom line is, if you are looking for a resize manager with all the frills and just want to create an application, this is the resize manager for you.

Just think about the money you will save in development cost relative to what you will pay for the component.

Mike

Flex2 :: RuledCanvasFX :: Preview

September 27th, 2006

Hi,

A Fireworks canvas in Flex 2!?

What is flex? Hmm... that is up for debate, I didn't go to the ACDS summit for no reason. ;-) I am showing the flex community what you can do with the flex 2 framework.

Commercial, yes Teoti Graphix is a commercial component development company. As far as I see it, flex is new and this area is not yet established. We are here to change that.

I understand the bleeding edge developer might laugh at what I offer but for the budding community of novice to intermediate developers, our components will rock their world for the price.

What do I mean?

Think about it this way; what better way to proliferate a technology you as an application developer pay the bills with but to make it as easy as possible for the novice lower budgeted developer to make complex applications, to get ‘flex out there’.

This is where Teoti Graphix components come into play. We are enabling the novice to intermediate developer to create something truly beyond the scope of their current skill set.

Take the screenshot below; This is the RuledCanvasFX, a 'knock off' of Fireworks. It does everything Fireworks rulers do, grid snap, floating canvas, snap guides. The rulers also move as the 0,0 offset is changed. As I said, just like Fireworks.

a ruler canvas with grid

I mention I have a ResizeManagerFX that was just released, now there is also a TransforManagerFX that is on the way that moves and rotates just like Fireworks.

Can you see why I am releasing these managers? I am going to empower this community to create innovative applications that well, would take a while to develop with out these seamless encapsulated components.

The canvas is completely customizable, the grid, snap plus a ton of other stuff that you will just have to wait until the ASDoc's are published to see.

Why don't you take a glance at the ASDoc's for the ResizeManagerFX and see where our programming skills are at. ;-)

What can you build with Flex... with components that work with eachother, anything.

Peace, Mike

Flex 2 :: ResizeManagerFX :: Update

September 27th, 2006

Hi,

I just thought I would let you know, I have had various requests for a move capability along with the resize. I have another manager comming out that is named the TransformManagerFX that resizes, moves and rotates UIComponents, but I am deciding to put the move algorithm/styles/skins in the ResizeManagerFX as well.

So version 1.1.0 will have the move capabilities.

Should be up today or tomarrow.

Product Page

Resize Manager Product Page

Flex 2 Explorer

Resize Manager Explorer Page

Thanks, Mike

UPDATE :: the title was mispelled, that is what you get for 6 in the morning. :)

Flex 2 :: ResizeManagerFX :: Released

September 26th, 2006

Hi,

I would just like those that read and are looking for a very feature rich Flex 2 resize manager, Teoti Graphix has got one.

TitleWindow resizing cannot hide from the one line of code it takes to lasso it. :)

ResizeManagerFX.addClient(window);

That is it! One line of code and you have a fully resizable window that is stylable and even animated if you set the resizeType style to animated. This style can be none, animated or realtime.

The manager can also add any UIComponent that implements the IChildList interface. Resizing in Flex 2 has never been easier.

The ResizeManagerFX v1.0.0component is a very powerful animated and fully skinnable resize manager.

I won't go into detail but, the information is on the site and more examples are on the way.

Resize Manager Product Page

and the Flex 2 explorer;

Resize Manager Explorer Page

The Help Books for this component are going to get larger and the live ASDoc's will be updated as needed.

Thanks, Mike :: Teoti Graphix

PS, Wait till you see what's next on the agenda. ehem... MDI, Drag and Drop abstracted containers.. etc ;-)