Teoti Graphix, LLC

Hello,

I’m happy to announce that Teoti Graphix, LLC will be offering spark framework navigators. Through the over 5 years of flex component development, this widget set was the most fun to create (to this point).

As a component developer since the beginning of flex, I have always found it hard to create rich components due to the fact the component’s view was always coupled to the component controller (the component class). With the Spark framework, all this has changed and the horizons are limitless.

Component development pattern

There is a consistent pattern you will see in all of our component releases.

• All front facing classes IE TabNavigator will include the default skin in it’s Type style declaration. This means if you don’t want it linked, subclass the TabNavigatorBase and implement your own default component. Note: In the future we may change this to default theme SWCs but for now this is how it works
• All components follow the base class -> MXML pattern that Adobe has set. After creating a lot of Spark components, I find this very legitimate.
• All components have a core Skin, most of our more multi-placement composite holding component’s implement a default LayoutBase skin layout.
• All component skins are simplified. This means some use of abstractions regarding border and state borders. For those designers that use tools to create skins, this will not affect you, just create another version of the skin implementing the SkinParts and do your fxg or layered skin graphic elements.
• Since we offer commercial components that will be used by many levels of developers, styles will be part of the components that will offer dynamic presentation whenever possible.
• Last but not least, anything that can be a skin or renderer is.

The Navigator Widget Toolkit

The navigator toolkit includes;

Components

• ViewStack
• TabNavigator
• TabBar
• TabButton
• Accordion, AccordionHeader
• SimpleBar
• SimpleTitleBar

Skins

• ViewStackSkin
• TabNavigatorSkin
• TabBarSkin, TabTopSkin, TabBottomSkin, TabLeftSkin, TabRightSkin
• AccordionSkin, AccordionHeaderSkin
• SimpleBorderSkin

Layouts

• ViewStackLayout
• TabNavigatorSkinLayout
• HorizontalButtonBarLayout
• VerticalButtonBarLayout
• AccordionSkinLayout
• AccordionSkinLayoutAnimated

VeiwStack

The ViewStack can be hooked up to any ISelectableList implementation such as the spark ButtonBar.

Along with this easy plugin functionality, a simple rotated ButtonBar works in a normal layout also.

The ViewStack also comes with the additional functionality of;

• selectedIndex
• selectedChild which must implement INavigatorContent
• resizeToContent works just like the Halo navigator’s, the navigator is resized when the selectedIndex changes

TabNavigator

The TabNavigator inherits all the ViewStack functionality and adds a TabBar.

The TabNavigator also come with the additional functionality of;

• tabBarPlacement (top, right, bottom and left)
• tabClosePolicy; default close button implementation in the TabButton (on,off,rollover,selected,disabled);
• A CHANGING event that is cancelable with selectedIndex is set
• Drag and Drop support out of the box (rearrange tabs or drag into another navigator)

The image below shows the top tabBar placement.

The image below shows the right tabBar placement.

The image below shows the bottom tabBar placement.

The image below shows the left tabBar placement.

The image below shows the closePolicy of disabled.

There is so much more to talk about this component but I will save that for later.

Also note, with all tabBar placements, additional configurations include tabOffset, tabBar vertical and horizontal align and corner radii.

Accordion

The Accordion works just like the Halo version. Main differences include;

• Instead of reimplementing the ViewStack class like the Halo Accordion, this component subclasses ViewStackBase.
• The Accordion offers the direction property to allow for vertical and horizontal layout states.
• Inherits all ISelectableList functionality from the ViewStackBase class.
• Is completely skinnable.
• All aspects of layout are swappable.
• The AccordionHeader skin is direction aware, this means you can swap out any header and base it’s presentation of the current direction of the Accordion.

The image below shows the vertical layout direction.

The image below shows the horizontal layout direction.

Conclusion

This is a very fun time for flex component development and our company is here to save you development time and money!

This set is scheduled for release just prior to Flex 4′s official release.

Version 1.0 limitations;

• History management is not enabled.
• Deferred instantiation is not enabled. (this has to do with SkinnableContainer, we are working on it)
• The Accordion animated layout is still beta.

Thanks,

Mike