Archive

Archive for the ‘announcements’ Category

Announcing the as3parser-framework opensource project

August 2nd, 2010 Michael Schmalle 8 comments

The as3parser-framework is a project culminating from over 5 years of actionscript3 lexing, scanning, tokenizing and parsing observations. This framework is fully independent of the Flex framework or any other library for that matter. A brief list of inclusions;

  • AS3Scanner, AS3Tokenizer, AS3Parser (full AST including block ast)
  • MXMLScanner, MXMLParser (full AST)
  • ASDocScanner, ASDocParser (full AST)
  • A Complete As3 DOM decorator framework wrapping the abstract parser node
  • 100’s of unit tests covering all classes

Thanks to the PMD project in java, a rock solid as3 recursive decent parser was ported. All the other scanners and parser I created myself and tested0. The DOM framework comes mostly from the ASDoc documentor I created in java a couple years ago, that I still use when documenting all of my product components.

Here is the source code;

http://github.com/teotigraphix/as3parser-framework

All the code is released under the Apache 2 license.

How would you like to parse as3/mxml string data, or an .as file or an .mxml file from an AIR application or browser application? Well now you can with full AST.

The following is an example of the decorator node DOM.

var sourceFile:IAS3SourceFile = NodeFactory.instance.
	createSourceFile(source, "/home/src/my/domain/internal.as", "/home/src") as IAS3SourceFile;
 
var compilationNode:ICompilationNode = sourceFile.buildAst();
trace(sourceFile.fileName);
trace(sourceFile.compilationNode.packageNode.name);
trace(sourceFile.compilationNode.packageNode.qualifiedName);
trace(sourceFile.compilationNode.packageNode.typeNode.methods[0].name);
trace(sourceFile.compilationNode.packageNode.typeNode.methods[0].parameters[0].name);
trace(sourceFile.compilationNode.packageNode.typeNode.methods[0].comment.shortDescription);
trace(sourceFile.compilationNode.packageNode.typeNode.methods[0].comment.getDocTags("see"));

I have a large Swiz project that will be using this framework, stay tuned.

Mike

For giggles, here is a class file it digests easily and converts into AST;

/*fpkg*/package foo.bar {
	import pkg.Stuff;
	import mx.core.mx_internal;
	use namespace mx_internal;
 
	/**
	 * Class meta.
	 */
	[Event(name="myEvent",type="flash.events.Event")]
 
	/**
	 * java doc
	 */
	public class /*f*/Blat extends Bing implements Febraz, Goo {
 
		private var data:String;
		private var data:* = womble();
 
		/** asdoc for property */
		public function get property():String{return null;}
		/** @private */
		public function set property(value:String):void{}
 
		public function Blat() {
			super();
			return;
		}
 
		[Annotate]
		[Basic()]
		/**
		 * Meta doccomment.
		 */
		[String("foo")]
		[Num(1)]
		[Bool(false)]
		[Arg(foo="bar")]
		[List(foo="bar", that=2)]
		[Event("alpha")]
		[Event("beta")]
		private var x:String = 1;
		/** javadoc? */
		public static function func(arg:Number, foo=null, ...rest):Boolean {
			default xml namespace = "http://example.com/";
			for (var b=1;b<=10;b++) { bar(); }
			for (;;) { break; }
			for (var g in blah) { r(); }
			for each (var g in blah) { r(); }
			if (h==undefined) { throw new Error(); } else { /* bar */ }
			if (a) b();
			while (false) v();
			do { continue; } while (m);
			switch (blah) {
				case 3: x(); y();
				case 4: next;
				default: x(); y();
			}
			try {
				with (scope) foo();
			} catch (e) {
				var a=b?(x+y):new Foo();
			} catch (f:Error) {
				const X=new Thing();
			}
			try {
				foo();
			} finally {
				ff = function(y, z) { };
			}
			l=[1,'2'];
			xx = doc.ns::name;
			m={a:null};
// TODO:			hex = 0x3;
			d = <foo bar="{blat}"/>;
			d = <foo>
					<bar/>
				</foo>;
			r = /regexp/;
			a = b.(@c);
			zz = a..b;
			zzz = a..@*;
			zzzz = a..@["foo"+b];
			/* unary expressions */
			--a; ++a; a--; a++; a = -a;
			return a.call(i.j*k, l[m]);
		}
	}
} // trailing comment
/**
 * internal class.
 */
class InternalClass {
	private var foo:int = {};
	public function InternalClass()
	{
	}
}
// trailing comment
 
/**
 * internal function.
 */
function myFunc(arg:int=0):Vector.<int> {
	return null;
}

Open Source Flex 4 Spark Components

April 7th, 2010 Michael Schmalle 1 comment

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

New Flex Spark Products for Teoti Graphix, LLC

March 20th, 2010 Michael Schmalle 1 comment

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

Categories: announcements Tags: ,

Spark navigators :: ViewStack – TabNavigator – Accordion

March 8th, 2010 Michael Schmalle 18 comments

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.

viewstack01

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

viewstack02

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.

tabnavigator01

The image below shows the right tabBar placement.

tabnavigator02

The image below shows the bottom tabBar placement.

tabnavigator03

The image below shows the left tabBar placement.

tabnavigator04

The image below shows the closePolicy of disabled.

tabnavigator05

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.

accordion01

The image below shows the horizontal layout direction.

accordion02

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

Categories: announcements Tags: , ,