Teoti Graphix, LLC

After much patience and waiting for the official Flex 4 / Spark release, we have compiled our components against the final 4.0.0 build and are ready to start releasing products.

The FieldSet Widget 1.x is the first to be released.

Check it out! FieldSet Product Page

Mike

We have spent a lot of time creating tooling, figuring our new design strategies and most of all creating new Flex 4 Spark components and toolkits.

Our design philosophy is simple; create solid reusable component API that is intuitive and flowing. Much like a song that sticks in your head with a nice melody, our samples, extended documentation and templated publishing process creates a standard in the 3rd party Flex component developer ecosystem.

Take a look at our site and see the difference;

http://www.teotigraphix.com

Products

We start off this new version of Flex 4 Spark with the Form Toolkit, FieldSet and Vertical Menu widgets. Each of these products offer a simple api, custom layouts and fully encapsulated Spark skinning implementation.

Form Toolkit

The Form Toolkit creates the familiar Form API in the Spark component framework. The toolkit includes a Form class to manage FormItems, the FormItem that includes a label, required indicator, plugable element layouts and an optional icon.

Product Page

Expander Toolkit

The Expander Toolkit allows the developer to maximize
user interface space by expanding and collapsing containers with visual elements.

The ExpanderContainer allows for a single titled expandable container, that is fully
skinnable and subclasses the TitleContainer.

The ExpanderGroup is a skinless vertical group that controls multiple ExpanderContainer
elements and the ability to dock and undock from any visual container.

The ExpanderGroupContainer wraps the ExpanderContainer grabs all og it’s
functionality and adds the TitleContainer API plus by default implements the
ExpanderGroup’s docking functionality.

Plus much more..

Product Page

FieldSet Widget

The FieldSet widget is a commonly used container that holds graphical elements separated in logical labeled groups.

Product Page

VerticalMenu Widget

The VerticalMenu allows the developer to arrange menus in a list fashion while allowing menus to be expanded and collapsed. The menu also acts as a toggle list where only one list item in the menu may be selected at one time.

Product Page

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