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