I need to clear the air here, what I said in my last post seems to be deprecated as of Flex 3. I dug into the auto generated classes and now see how the compiler is initializing classes.

For a type selector in a component it would be something like;

The key difference from Flex 3 to Flex 4 is the CSSStyleDeclaration can take a string OR a CSSSelector instance. If the argument to the CSSStyleDeclaration is a CSSSelector instance, the CSSStyleDeclaration will automatically register the new css declaration to the StyleManager.

The trick here is that the CSSSelector overrides it's toString() method to return the specific selector name based on it's ancestor and conditions. The style manager still uses the string selectorString in the set declaration method, but if an instance of CSSSelector is passed instead of a string selector name, the toString() method is called on the CSSSelector.

That sounded like a tongue twister.

Mike

I'm in the process of creating new implementations of some Flex 3 classes in the Spark/Flex 4 framework.

Since Gumbo has been made available back in.. whenever, I kind of glossed over something with css I didn't quite understand.

I understand the new css namespaces but wasn't exactly sure how to create a TypeSelector in actionscript. Where code like;

would create a new TypeSelector for the TitleBar class. With the new @namespace feature of Flex 4, this has changed. You now need to write the fully qualified class name to register a TypeSelector.

Hope that helps someone porting code from Flex 3 to Flex 4/Spark.

Mike

Just a passing thought but, I was working on a custom tooltip component today and was researching the hideEffect of the ToolTipManager. I spent 1 whole hour trying to figure out why the hideEffect wasn't working that I registered with the manager.

Low and behold, running through the debugger I realized that when you mouse off the currentTarget of the manager, the hide instantly method runs. The moral of the story is, to get the hideEffect to work that is assigned to the manager, the effect is dependent on the hideDelay of the manager!

Does anybody think there should be a feature that allows the hide effect to run conditionally on a moseOut event of the target? I think it would be nice.

On a side note, re-implementing a new tooltip manager might work, mx_internal overrides though. The problem with this is hideImmediately() is private!

Mike

I think the blogging will now pick up since the vision is starting to become reality; Flex 4 Beta 1.

The last year has been quite a trek for my development. There are some interesting frameworks and components in the mix for this next version of Flex. A couple of open source projects as well from Teoti Graphix.

I have a reminiscent feeling of trekking through the Flex 2 alpha and betas and feeling a glimpse of something really kewl. From a component developers perspective that has been around the block, Flex 4 Spark is just plain awesome. The View has finally been decoupled from the Model and can breath a little better. As far as the Model and Controller, that has yet to b seen, I have an answer for that though.

Flash Builder, for someone out of the loop a bit, I just had to laugh, tip my hat and say Flex Builder thanks for the fish.

For the sake of google and flex 4 namespaces; I am cringing at the pain new developers are experiencing when trying to get flex 4 namespaces working. For the google record and flex 4 namespace, here is my contribution to the monster search engine.


xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:s="library://ns.adobe.com/flex/spark"


fx : Holds all tags such as what was mx:Style, mx:Script ect. so... fx:Style, fx:Script

mx : Holds all Halo components IE mx:Tree, mx:Box, mx:Button (can you say skin style with ProgrammaticSkin)

s : Holds all of the new Spark architecture, s:Button, now uses skinClass.

Much more to come, now that the animal has been tamed, we can start to dissect it.

Mike

Teoti Graphix, LLC

We have been selling Flex UI components since 2006 and have had 100's of happy customers that enjoy professional documentation and low to zero support issues.

What's up with Teoti

We have held off this last year and a half with new releases, getting ready for Flex 4's major view change. This is about the most important change to the framework in relation to component developers yet.

CSB Flex 4 Framework

In my last article I started to explain our CSB (Component, Skin, Behavior) framework. This has been implemented in Flex 4 and you will be hearing a lot more about this in the future.

Mike

Component (Model) | Skin (View) | Behavior (Controller)

Ever tried comparing an apple to an orange? They're both fruit right? The apple and orange taste sweet and are colorful. If you try to describe both objects using the word 'fruit', you will not capture the essence of each.

We have the same thing happening with two other words of the same class, application and component. Same type of relationship right, 'Is A' fruit? No, these two objects are not in the same generalization, Component is an aggregation of Application.

• An Application is a domain to solve a larger network of problems, created by client's needs.
• A Component is a domain to solve a larger network of problems, created by the application's needs.

To many times we try to apply solutions to things that don't apply to each other and in the end wonder why things don't feel right or don't even work. I'm specifically talking about the MVC (Model View Controller) design pattern in relationship to the Component.

Language, the articulation of thought and path to understanding the 'object'. I have many years of experience with component development and books don't teach what experience brings.

There are some that also would say breaking rules confuses people, I think it's the rules that confuse people.

I have struggled with language for quite some time. When you try to explain things that are new, you either sound arrogant or full of yourself and someone tries to knock you down a peg.

I'm not trying to coin anything or declare an invention. I want the language and implementation of component development in Flex to be fun. So the first change to the MVC is the M (Model).

The M becomes C for Component. I have spent weeks agonizing about this decision since in ActionScript, the 'component' is tied to the display list, thus part of the View. But this is not really the case.

The display list is in the application's domain, not the components. Remember about what I said above, domain specifics. In our new component architecture coming up (inspired greatly by sections of OpenFlux and Flex 4) is going to treat components like hierarchal data structures. This data structure parent or container IS the display list, the API and data are the Component instances.

Here are some one liners;

• The Application domain contracts the Component.
• The Component declares it's public API and public data structure.
• The Skin observes Component through [Binding] or event handlers.
• The Behavior/s observes Component through event handler bindings.

There is a paradigm shift here where the behaviors of the once UIComponent needs to be abstracted off the Component class and into specific behavior classes. This is where the fun begins, since these behaviors can literally or figuratively be dragged onto a Component and reused or stacked.

I have introduced the idea of the behaviorManager that acts as an API service locater essentially delegating what is going on behaviorally within a Component. This also adds the ability to dynamically add API to component at runtime.

This is it for part 1, there is much more ahead since I am explaining the foundation of Teoti Graphix's new component architecture.

All this will fit like a glove in Flex 3 and Flex 4. Currently I have fully implemented the FxButton and FxToggleButton using this new pattern, it's awesome.

Ben Stucki, your awesome and thanks for a head start man.

Mike

2009 is going to usher in a lot of interesting new niches, flex components is one of them. An exciting new feature in Flex Builder 4 is going to allow professional flex component developers FINALLY look professional and not 3rd rate citizens (more on that later). I had a nice conversation with Adobe's DRM (Digital Rights Management) group and it was a very positive conversation.

I have some posts coming up on why we haven't released anything new in the past year, this is an interesting read.

I have also compiled design pattern notes and where I see Flex component development headed.

Flexcoders, well somebody there, not naming names took me down a notch haha and I haven't been active on that in the last 2 months. I'll probably head over there once my rule breaking affection wears off (well this probably won't happen any time soon).

Campbell, it's about 12 months in the labs now, I have a head start again.

Later,
Mike

Been a while but, I have been working in the labs for quite some time (8 months to be exact), I guess just waiting for this current US presidency to END! Always like molasses in the end.

Anyway, I have written some short tutorials and other adventure notes from my past travels and will start posting them up here soon.

Teoti Graphix, LLC also has a new component framework that extends Container and UIComponent that we will be releasing early fall. We will have a variety of tool kits to choose from.

Part of this new release will be a full transform floating canvas with move, resize, rotation, snap and grid, with drag and drop. We have had many of our customers ask about these things when they purchased the ResizeManagerFX component.

Another thing to note: We will be selling our source code (optional)! So for all of you who have asked me about this, coming up is your chance to see beautiful code when purchasing our components. If you think wading through the mx framework is enlightening, wait till you get your hands on our code!

We have also created a documentation system that can handle our new frameworks. Cross linking and tutorials.

So stay tuned, this time I won't get lost in development and let my blog collect dust!

Mike

Through the years (man, it's been years now since Flex was released), I have seen a lot of confusion about container scroll bars.

The confusion summed up;

Developers have a child container within a parent. The child container's measuredHeight exceeds the parent's viewable height. The parent container then EXPANDS itself to make room for the child's measuredHeight.

With this condition a developer thinks, well how come the parent is expanding and not showing it's scrollbars?

The answer;

In order to increase performance of the flex framework and LayoutManager, the engineers decided that having scroll bars pop up everywhere wasn't that appealing. So they decided to honor the minimums of a container.

This means by setting the child container's minHeight to something below 100, essentially 0, you will now force the parent to keep it's current height and show scrollbars for the child container that has it's measuredHeight greater than it's parent's height.

Once you think about this for a second, you realize it is kind of intuitive. You now have control over scrollbar appearance.

Mike

Back from the lab and we have a great component release, the DockAreaFX.

Product Page

Update, New Product

The DockAreaFX set is a new product that is well worth a look.

The DockAreaFX is a very powerful, extendable and simple to use drag and drop container set. The set consists of the DockAreaFX that serves as the drop container and the DockPaneFX that acts as the drag initiator container. Along with these two components, the TitleBarFX and DockTaskListFX are also included to serve as a jump start for more complicated drag and drop set ups.

We have added the ResizeDockAreaFX component that uses a Fire Works style open and close resize bar. This bar can close and open the dockarea with a click of it's toggle button or drag and resize the dock area! The bar placement can be set from top, left, right and bottom. This means the dock area can open and close from all 4 layout positions. The bar is also fully stylable with open and close transition styles.

Information sources

• Online Help Book
• ASDoc Documentation
• Technical Forum
• Ask Before You Buy
• SWF Examples

Main Features

DockAreaFX

This image is taken from the ThemedDockTaskList.mxml included in the product's example project and is also covered in the Help Books section of the web site.

Important Notes:

• The example uses a custom theme to create an OS look and feel. You could adjust this to any style and skin combination thinkable.
• The DockTaskListFX component is used as the content holder within the DockPaneFX drag initiator. (The DockTaskListFX is a subclass of the TaskListFX component).
• The task list component is specially designed to size it's parent when opening and closing (with or without a tween).
• The task list component also uses a custom title bar that allows for a drag handle, alternate minimize button position, title and a menu popup button located on the right hand side of the title bar.
• The DockPaneFX drag initiators can be placed in any container at startup or a DockAreaFX component.
• The DockPaneFX drag initiators can be dropped on the Application or into a DockAreaFX container. These two actions constitute a dock or float operation. The DockPaneFX's isDocked property is updated just before the operation completes and the component's default action has run.
• The DockAreaFX drop target containers can have layouts of absolute, vertical, horizontal and flow. Each of these layouts have specially placed drop indicators relative to it's children. The dock areas can also drag a bounding box around the full container (skinnable and stylable).
• The DockPaneFX is completely resizable when in it's float state(isDocked == false) and when the DockTaskListFX is used, resizes vertically. Also note that when a DockPaneFX is closed (isOpen == false), it's resize is limited to left and right.
• The Colors pane is being dropped into a vertical DockAreaFX component.

The image above now shows the DockPaneFX dropped into the DockAreaFX component at index 1. You can see that when a pane's isDocked property is set to false, the default action is to hide the border and title bar. The dock pane also takes care of taking it out of the popUp state and then adding itself into the drop target component.