Teoti Graphix, LLC

Hello,

It’s been since July since I have posted anything, that was due to the fact I have been working on some very large AIR projects, polishing up asblocks(ActionScript3 DOM parser framework) and another OpneSource AIR application that should be of interest to a lot of AS3 programmers that hate writing ASDoc documentation.

I know from google analytics there have been a lot of interest in Spark navigators, yes the skinnable kind. I wrote a blog post about a year or so ago called Spark navigators :: ViewStack – TabNavigator – Accordion. Read the post if you want images or more information.

Basically, I have decided to open source it because I am using it in a lot of my open source projects. The TabNavigator works great, one thing that is missing I think is proper keyboard support but that is on the list.

The libraries features to date include;

Components

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

Skins

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

Layouts

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

Major Features:

• Skinnable TabNavigator
• Multi-state close button functionality
• Cancelable CLOSE Event
• Top, right, bottom and left tabbar placement

Source Code:

GitHub ui.navigator library

Any bug finds appreciated, there is still much to do and consider this a beta release. I have not yet refactored and asdoced properly yet.

Mike

Hi,

This is in regard to my previous post that gained some interest, the Spark navigator framework.

I said around 2 weeks for an alpha release, this open source stuff doesn’t pay the bills and that framework is complicated. I have other projects that take priority over this and I have not had time to get the code to a point where I feel comfortable releasing it (focus issues, etc). Yes their are developers that feel their code is a representation of themselves.

For those that have been waiting for this, sorry but priorities come first and “just getting this out” so others can “maybe” use it for their own gain, well just doesn’t ignite my fire.

Free code is free and by no means free to the actual developer.

Update:

Tink has a navigator framework you should all check out:

http://www.tink.ws/blog/flex-4-navigator/

I haven’t looked much at it but, as he says in a comment “This leaves the Navigator itself open to being used as a ViewStack, Accordian, TabNavigator, etc. depending on the layout applied to the navigator.“.

Mike

The VerticalMenu Widget 1.x is now released and available for purchase.

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.

The VerticalMenu also allows for 100% custom skinning of all parts; the menu’s main skin, header renderer and list item renders.

Check it out! VerticalMenu Product Page

Mike

Hello,

Teoti Graphix, LLC offers another open source component for those who wish to dive into the new Flex 4 Spark framework.

The DockBar component could be considered cliche like, um well reflections on images but, this component shows you a lot about the inner workings of a Flex 4 Spark component.

One aspect that makes this bar a little different is it’s parented by the systemManager and allows for 4 placements, top, right, bottom and left. It also has a property that will autoHide the bar and show it when the autoHide thickness is reached around the edge of the screen.

The component uses a Rectangle mouseMove calculation so there is no display object getting in the way of mouse events underneath the hit area.

Comments & Criticism always welcome.

Tips to look for;

• IDockBar interface for polymorphism in an alternate implementation.
• ButtonBarBase subclass shows how to override some common ListBase methods.
• A default itemRendererFunction.
• systemManager child list usage.
• Application popup layout logic.
• Hit Rectangle hide/show logic.
• Use of ui.common vertical and horizontal ButtonBarLayout.

Functionality;

• Custom DockBarSkin.
• Custom DockBarButtonSkin.
• DataGroup in bar with vertical and horizontal layout.
• rollOver and rollOut skin part itemRenderer effects.
• autoHide – constantly show the bar or hide it until the mouse is within a correct show distance.

The Code

<fx:Declarations>
	<s:Fade id="showEffect" alphaFrom="0" alphaTo="1" />
	<s:Fade id="hideEffect" alphaFrom="1" alphaTo="0" />
</fx:Declarations>
 
<components:DockBar id="dockBar" 
					skinClass="org.teotigraphix.ui.skins.DockBarSkin"
					autoHideThickness="10"
					showEffect="{showEffect}"
					hideEffect="{hideEffect}"
					change="dockBar_changeHandler(event)">
 
	<components:dataProvider>
 
		<s:ArrayList>
			<fx:Object label="One" toolTip="ToolTip One" icon="{theIcon}"/>
			<fx:Object label="Two" toolTip="ToolTip Two" icon="{theIcon}"/>
			<fx:Object label="Three" toolTip="ToolTip Three" icon="{theIcon}"/>
			<fx:Object label="Four" toolTip="ToolTip Four" icon="{theIcon}"/>
		</s:ArrayList>
 
	</components:dataProvider>
 
</components:DockBar>

When the application starts up, the dock bar is removed from Application and added to the systemManager.

The library ui.common;

• teotios component library
• DockBar class

Sample MXML

• DockBar01_Sample

I have not uploaded a new zip distro yet with this component available.

Bugs

There are still some issues with effects and the zoom effect glitching once and awhile.

I’m also working on a build file that will add all of the examples into the ui.common.zip distribution file. So when you download the zip library, there will be a Flash Builder project ready to test out like a turnkey.

Mike

The transition from halo to spark has blurred the lines of what a developer in Flex 3 thinks they can do with styles in Flex 4.

Here is an example of creating an itemRenderer with a textRollOverColor and textSelectedColor styles (known in Flex 3).

We have some components that will be released in our open source Spark framework that addresses some of these issues. Pre-made itemRenderers, abstracted styles for the developers that still want some style control.

http://teotios.googlecode.com

The application needs to define the styles for the ComboBox and set it’s itemRenderer to the new enhanced renderer.

Application.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx">
 
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        s|ComboBox
        {
            textRollOverColor:#FF0000;
            textSelectedColor:#FFFFFF;
        }
 
    </fx:Style>    
 
    <!-- 
    The ComboBox renders it's data elements with the
    provided item renderer. 
    -->
    <s:ComboBox itemRenderer="MyItemRenderer"
                horizontalCenter="0" top="10">
        <s:dataProvider>
            <s:ArrayList>
                <fx:String>One</fx:String>
                <fx:String>Two</fx:String>
                <fx:String>Three</fx:String>
                <fx:String>Four</fx:String>
            </s:ArrayList>
        </s:dataProvider>
    </s:ComboBox>
 
</s:Application>

Subclass the ItemRenderer class in MXML to create the data’s visual appearance.

We implement the states expected by ItemRenderer and use getStyle() to retrieve the correct style values.

Note the autoDrawBackground, Adobe added this property right before Flex 4 was released. This took out the mandatory normal, hover and selected backgrounds. Now this drawing is natively supported in the ItemRenderer class.

MyItemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx" 
                autoDrawBackground="true">
 
    <!-- Declare the states the ItemRenderer super class needs. -->
    <s:states>
        <s:State name="normal"/>
        <s:State name="hovered"/>
        <s:State name="selected"/>
        <s:State name="normalAndShowsCaret"/>
        <s:State name="hoveredAndShowsCaret"/>
        <s:State name="selectedAndShowsCaret"/>
    </s:states>
 
    <!-- 
    The default implementation of the ItemRenderer uses the data
    property to pass the item's data item.
    Use getStyle() to retrieve any style set in the parent's style chain.
    -->
    <s:Label text="{data}" 
             color.hovered="{getStyle('textRollOverColor')}"
             color.selectedAndShowsCaret="{getStyle('textSelectedColor')}"
             top="5" right="5" bottom="5" left="5"/>
 
</s:ItemRenderer>

Mike

The Expander Toolkit 1.x is now released and available for purchase.

The Expander Toolkit allows the developer to maximize user interface space by expanding and collapsing containers with visual elements. The toolkit also allows for docking functionality of containers using their icons and labels (as tooltips) while transforming them into a menu bar placed at a targeted positions in the user interface.

Check it out! Expander Product Page

Mike

Hi,

Teoti Graphix, LLC offers open source Adobe Flex Spark components that are used within our own products such as the ui.commons library in the FieldSet Widget and Form Toolkit products.

The ui.navigator library will be added as another project and will be completely open source as well. That library was talked about last month and has screen shots on the Spark Navigators blog post.

Our open source projects are hosted with Google Code and use the SVN source control system.

Main Google Code repository

Current manifest components

• Button - Icon and labelPlacement enhancements
• ComponentBorder
• DataControl
• StatusBar
• TitleBar
• TitleContainer

Current manifest layouts

• ButtonBarLayout
• ButtonBarHorizontalLayout
• ButtonBarVerticalLayout

Much more to come…

Project

http://code.google.com/p/teotios

Zip downloads

http://code.google.com/p/teotios/downloads/list

Source checkout

http://code.google.com/p/teotios/source/checkout

Main Google Code Example repository

http://code.google.com/p/teotios-samples

Note: We divided the samples from the actual frameworks so the revisions and commits between core classes and samples would be separated.

Support forums

http://www.teotigraphix.com/forum/12

We have decided to release this code to the public to help promote a learning environment for the Flex 4 Spark framework and it’s component design patterns.

Note: Although this code is open source, it is actively developed and supported in conjunction with our commercial products.

Suggestions are welcome for new components added to the library!

Just post comments or get a hold of me through our company site.

www.teotigraphix.com/contact

Thanks,

Mike

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