Teoti Graphix, LLC is back in town

June 16th, 2008

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

minWidth and minHeight in the mx.core.Container

May 5th, 2008

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

Flex :: DockAreaFX :: dock and float container release

November 6th, 2007

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

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.

Flex :: Framework forks and subclasses

September 26th, 2007

Order and logic rule our consciousness, thus seeing a template in a framework comes natural for me, I love order.

What is a fork relating in a framework? When creating abstract superclasses that rely on subclasses to fill in details we need forks. A micro routine in a macro routine. Take the flex framework, the commit properties fork is a very important and extensible piece of logic. This code path enables you to set any property, composite property or micro routine that a measurement or update to the display list relies upon.

Take for example a routine that needs subclasses to create bars and set visibilities of those bars. This routine needs to happen before measure() and updateDisplayList() is called becasue the viewMetrics and/or size may change when a new bar (in the component's chrome) comes into existence.

From the sentence above we have abstracted two routines that fork from the original commit properties fork.

  • creation of bars
  • setting of bar visibilities

Lets look at some code structure;

override protected function commitProperties():void
{
    super.commitProperties();
   
    // if any barvisibilities changed
    if (barVisibilitiesChanged)
    {
        commitBarVisibilites();
        barVisibilitiesChanged = false;
    }
}

// fork 1
protected function commitBarVisibilites():void
{
    visibleBars = new Dictionary(true);
    validateBarVisibilites();
    updateBarVisibilities();
}

// fork 1A
protected function validateBarVisibilites():void
{
    if (_showTitleBar && !titleBarInstance)
    {
        createTitleBar();
    }

    visibleBars[TITLE_BAR_NAME] = _showTitleBar;
}

// fork 1B
protected function updateBarVisibilities():void
{
    if (titleBarInstance)
    {
        titleBarInstance.visible = visibleBars[TITLE_BAR_NAME];
    }
   
    invalidateSize();
    invalidateViewMetrics();
}
 

commitProperties()

  • commitBarVisibilites();
    • visibleBars = new Dictionary(true);
    • validateBarVisibilites();
      • createTitleBar();
        • create the instance
      • visibleBars[TITLE_BAR_NAME] = _showTitleBar;
    • updateBarVisibilities();
      • titleBarInstance.visible = visibleBars[TITLE_BAR_NAME];
      • invalidateSize();
      • invalidateViewMetrics();

With this algorithm we may now subclass this component and add new bars. The subclass needs to override

  • validateBarVisibilites()
  • updateBarVisibilities()

the super class takes care of the base logic, subclasses just add to this fork and use it's two new forking ends.

There is a rule in abstraction you must learn. If you plan on creating a useful fork, you need to plan and create a base method commitBarVisibilites from our original super class fork that now calls new sub forks, validateBarVisibilites and updateBarVisibilities.

For any type of useful subclass overrides to efficiently override this fork and provide maximum flexibility, the base method is required so that any logic in the first fork (validateBarVisibilites) is encapsulated from the second fork (updateBarVisibilities).

With this scenario you have three override possibilities;

  1. override commitBarVisibilites()
    • control before and after sub fork run.
  2. override validateBarVisibilites()
    • control inside run
  3. override updateBarVisibilities()
    • control inside run

Also, if abstracted correctly, you can call these methods individual. The purpose of a fork within the flex framework is to provide decoupled micro routines that are not dependent on it's caller. This is a very important rule. By making the two micor routines dependent on commitBarVisibilities you have now spun a web that a subclass cannot get out of.

When you subclass this fork, you for all intents and purposes copy what is in the two micro routines and leave the concrete implementation to the super class that has defined this code path.

The code examples are listed just to show what this 'might' look like. I do have this implemented in my framework but, there are other subtle things going on since this is a non trivial property commit.

The dictionary values are used in method like showAllBars(), hideAllBars(), restoreBars(), etc. It allows use to either explicitly hide/show or remove bars during transitions to save performance while restoring them when the transition is complete. This way we do not touch our component showBar properties.

UPDATED ::

From Toms comment, the Flash Player is a single thread. Yeah it is and most of us know this. I speak English and fork means multiple directions from the point your at. If I was talking about threads in the Flash Player I would be wrong. But, I'm not.

I am trying to say, in an abstract sense of the word [fork], the flex framework has code forks due to how the Template Method pattern is implemented. This article explains how to utilize this routine path and how to create new roads from an existing path.

PS, If some one else wants to comment on my English, I can do a search and replace.

Mike

Flex :: RotatingListFX :: Adobe Dev Center

September 19th, 2007

Hi,

I have seen a couple posts on flexcoders about the Adobe Dev Center's rotating UI at the bottom of the page.

Check out

RotatingListFX Product

to see how well an encapsulated custom component can create that functionality plus a whole bunch more.

The RotatingListFX component

This component is a container that you create children in just like a box or canvas. It gives you the ability to place titled containers within the main component that transition open and closed, minimized to maximized. You also can specify custom tile layouts for the all open state of the container.

This is by far a great value for the price 89.99$ when you receive a supported and encapsulated component with now worry about implementation. After you purchase, you then can use it an unlimited amount of times saving you even more money in development.

The component market is heating up and Teoti Graphix offers development time and money saving components.

Mike