“We are not trying to apply MVC to component architecture since MVC was patterned after the Application domain. We are creating a pattern or more accurately, porting a pattern from the Application domain to the Component domain.”

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

Seems like the post back in June got put up today when actually the post was written 6 months ago. I have changed my aggregation from flex2components.com(dead now) to this final resting place at www.blog.teotigraphix.com.

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

Hello all,

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

Hi,

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

Hi,

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.