Teoti Graphix, LLC

On top of the other things I am tackling of late, I am starting a series on components I have developed for commercial sale. The MobileUI Toolkit 1 was released at the end of 2011 and I haven’t gone into to much definition with all of the Apache Flex information I have been throwing around.

I have created this set out of researching some of the most used and unimplemented features for mobile right now in relation to AIR mobile. As we all know Adobe has donated Flex to Apache and will no longer develop mobile components for AIR, the Apache Flex community will be aiming at that.

In the interim Teoti Graphix, LLC has developed solutions to some common mobile component implementations. The Dialog and PopUp are the target of my first introduction.

I have already put a huge amount of time into Apache Flex and trying to show my complete support of it’s future. On the other hand, I am trying to offer solutions with mobile components that you will not see from Adobe. Yes, I am advertising my services but at the same time have shown that as an initial committer to Apache Flex, my livelihood also depends on the success of this project.

If you purchase our component sets, you will be guaranteed top notch support and feature requests to add onto the already heavy functionality our components offer. The components are unit tested and have the option of source code purchase as well. I have been developing components since Macromedia Flash MX, I stand by whatever components we release as professional and documented.

Mobile UI Product Page :: http://teotigraphix.com/components/toolkits/MobileUIToolkit1

To show the innovation here is a screenshot of the DigitalDisplay component set coming up.

The components are fully dynamic and have a huge amount of style variation possibilities. Each component uses a provider so in respect to the grid, it can be configured to create any type of 5×7 digital glyph.

The PopUp Class

The PopUp class is an attempt at an inversion of control for popups. The idea is, the pattern for dialogs and alerts don’t change, so create a class that controls these aspects and composes an actual SkinnablePopUpContainer and configures the component instance.

I actually have the base part of this framework I have put up on my whiteboard for Apache Flex see;

http://svn.apache.org/repos/asf/incubator/flex/whiteboard/mschmalle/mobile-popups/

The idea is simple, encapsulate and allow the popup components to function independently of their UIComponents that don’t need to change.

A simple Hello World makeText() example

Use the makeText() method within an event handler.

Code:

PopUp.makeText("Hello World", PopUp.LENGTH_LONG).show();

The above example;

• Creates a TextDialog
• Passes the Hello World message to the content
• Sets the duration on the screen to LENGTH_LONG which is 4 seconds
• Calls the PopUp.show() method to create and show the underlying TextDialog instance

Text wrapping in the TextDialog

Use the \n character to create newlines in the dialogs message text.

Code:

PopUp.makeText("Hello World, Hello World,\nHello World,Hello World," +
	"Hello World,\nHello World,Hello World, ", PopUp.LENGTH_LONG).show();

A simple Hello World makeContent() example

The PopUp.makeContent() method allows a custom content to be assigned to the dialog when created.

Code:

[Embed(source="assets/common/android_normal.png")]
private var iconClass:Class;
 
protected function makeContent_clickHandler(event:MouseEvent):void
{
	var content:IconLabelRenderer = new IconLabelRenderer();
	content.icon = iconClass;
	content.text = "Hello makeContent()!";
	PopUp.makeContent(content, PopUp.LENGTH_SHORT).show();
}

The above example;

• Embeds and icon for use in the custom content
• Creates a new MXML declared IconLabelRenderer
• Sets the icon and text property on the custom content
• Calls PopUp.makeContent() and passes the instantiated content to be shown within the PopUp's dialog

The PopUp.makeDialog() method

A simple Hello World makeDialog() example

The PopUp.makeDialog() method allows a custom dialog to be created, the popup duration is automatically set to 0. This means the close() method of the dialog will need to be called when interaction is finished.

The method automatically sets the Dialogs;

• contentRenderer – The IFactory used to display the dialog’s view
• title – The String displayed in the titlebar
• icon – The Object displayed in the titlebar

Code:

protected function makeDialog_clickHandler(event:MouseEvent):void
{
	PopUp.makeDialog(new ClassFactory(DeclartiveDialog), "Hello Dialog!", titleIconClass).show();
}

The Dialog can be made using the fx:Declarations tag with a child fx:Component tag;

<fx:Declarations>
<fx:Component className="DeclartiveDialog">
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009" 
		  xmlns:s="library://ns.adobe.com/flex/spark" 
		  paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10">
	<fx:Script>
 
			import com.teotigraphix.ui.events.DialogEvent;
 
	</fx:Script>
 
	<s:Label text="This is a Label" 
			 color="#FFFFFF" fontWeight="bold"/>
 
	<s:Button label="OK" 
			  click="dispatchEvent(new DialogEvent(DialogEvent.DIALOG_CLOSE, true, false))"
			  width="100%"/>
</s:VGroup>
</fx:Component>
</fx:Declarations>

Will result in the following;

Note the DialogEvent.DIALOG_CLOSE event dispatched from the click handler of the Button. This event is listened to by the PopUp and dismisses the Dialog when the event is dispatched.

Note also that the fx:Component declaration could easily be moved to a custom MyDialog.mxml file for better reuse.

The next article will be talking about the Alert part of the framework.

If you are curious to find more information right now, be sure to checkout the online help documents here;

http://www.teotigraphix.com/reference

Thanks for reading,
Mike

Hi,

After months of development and research, Teoti Graphix, LLC has released the MobileUI Toolkit 1. Our first toolkit in a series of time saving AIR mobile Flex component toolkits.

The MobileUI Toolkit 1 focuses on;

• A PopUp that is an inversion of control type manager decorating SkinnablePopUpCtontainer subclasses such as the Dialog and TextDialog.
• An Alert API that uses static methods but is not at all tied to static methods for open and close, the PopUp class can even be extended.
• An enhanced MobileButton that adds a longClick event and longClickDelay style.
• A vertical and horizontal Picker component that is not based off of the List. This is important for memory and performance needs.
• A simple ProgressBar component that allows for primary, secondary and indeterminate progress levels plus left and right layout directions.
• A very powerful and skinnable/styleable RatingBar component that subclasses the ProgressBar.
• A WebView component that wraps the StageWebView and adds UIComponent layout logic.
• A SkinnableStageWebview that can be used to create composite WebView components with controls.
• A WebViewBrowser that has actually implemented the SkinnableStageWebview with skinparts to make a simple OS browser.

This is a very highlevel description of what this toolkit offers. Teoti Graphix, LLC has been creating Flex components for a while now and knows how to create extensible component frameworks. You not only receive these finished polished components but have a place to jump off and create even more complicated components based off of the core framework.

The toolkit was designed in a way to promote extension by abstracting core classes in the PopUp framework and other various classes into a common library project in our development. This means as new toolkits are released they all will include the core components. For more information on this you can check out the Reference Book on our site and see what is contained in the UICommon kit.

Images

I thought about posting them here, I had in a previous post but I’m sure if you are interested you can take a second and just check out the product page that has all this information condensed and outlined.

Product Page: Mobile UI Toolkit 1

Support

Our support is one on one answers and even helpful information. Just look at the wealth of information and dedication on this blog and you will get an idea of the commitment we put into our products. There is a technical forum that is available for all customer users.

Our reference book has a very good image and screenshot layout for fast and concise understanding.

• Reference Book

Documentation

Our documentation is second to none. A lot of the documentation and asdocs are written well before the actual component is finished. Good documentation is clear communication and shows the true intent of the component and it’s capabilities. We do not want to sell products to people that don’t need what the product offers. Instead of spending time and money on fancy advertising and flashy adds, we invest time where it counts, documentation, examples and asdoc code comments.

Our ASDoc documentation;

See – MobileUI Toolkit 1 ASDocs

The ASDoc documentation is created by our own hand written Java ActionScript Paser and Documentor JASDoc, using the one and only as3-commons-jasblocks framework! Yes that is right, that documentation in the above link is ALL created with our opensource as3-commons-jasblocks parsing framework with a custom Java application written for the documentor. Now here is a developer that really loves his ActionScript!

You may notice some interesting additions like implemented by, Host component links and more.

You will also notice that all the example packages that hold the product examples contain the source code and image! So you can quickly look at the image, scroll down to the source and see how it was implemented in MXML.

Conclusion

What you get by purchasing components by Teoti Graphix, LLC is supporting an experienced ActionScript Flex programmer and helping to push the community forward through this support. The components we offer are supported and feature requests are available, so when you purchase you have the option of asking for new things. The odds are, if your request is possible, it will probably get implemented, no red tape here.

Currently we are working with Android and have a proto application for viewing these components in an apk. If you are interested in this for viewing purposes please contact me (Contact Mike).

Also if there are a couple iOS users out there that like this component toolkit say with an iPad and iPhone, we are willing to give away a couple free licenses for testing the components in the iOS mobile devices. We mainly program Android and do not even have iOS developer licenses.

Thanks,

Mike