Popa Mihai

PopaMihai.com – Flex, Flash, AIR and ActionScript articles and tutorials

Use a Custom Component as a ToolTip in Flex

leave a comment

In this article I will be using a custom component as a ToolTip in Flex. The custom component will be a simple Canvas and the ToolTip will be applied to a button.

Custom Component as ToolTip in Flex

Custom Component as ToolTip in Flex

The idea is pretty simple: I will create a custom MXML component that is extending the Canvas container and also implements the mx.core.IToolTip interface. This is required if we are to use the custom component as a ToolTip.
Read the rest of this entry »

Written by Popa Mihai

February 8th, 2011 at 7:51 pm

Using a Flex Canvas Container As a ToolTip in Flex

leave a comment

The ToolTip control allows you to provide additional helpful information about your interface. When a user moves the mouse over a graphical component like a Button control, you can use the ToolTip control to pop up a text with additional information about the Button functionality.

ToolTips are a very useful way of guiding users through your application.

Most of the times the normal ToolTip might do the job but there are scenarios in which you would want to add more info to your ToolTip controls. In these cases using another Flex control instead of the ToolTip control might prove very useful.

In this example I am using the Canvas mx control as a custom ToolTip. By using a Canvas as a custom ToolTip I am able to make any visual changes to the Canvas, like adding a border around it, making it transparent and setting a corner radius on it.

Custom Canvas as ToolTip in Flex

Custom Canvas as ToolTip in Flex

You can view the working example at the end of this page.
Read the rest of this entry »

Written by Popa Mihai

December 6th, 2010 at 4:43 pm

Creating mx ToolTip and Error Tips Programatically with Flex 3 Using the ToolTipManager

leave a comment

The ToolTip control allows you to provide additional helpful information about your interface. When a user moves the mouse over a graphical component like a Button control, you can use the ToolTip control to pop up a text with additional information about the Button functionality.

ToolTips are a very useful way of guiding users through your application.

In this example I will use the ToolTipManager class to create, display and destroy a ToolTip. The ToolTip will also be displayed as an error tip.

This is how the different tips will appear in the application:

Custom Button ToolTip and ErrorTip

Custom Button ToolTip and ErrorTip

Full source code and the working example at the bottom of the page.

Read the rest of this entry »

Written by Popa Mihai

December 6th, 2010 at 1:44 pm

Customizing the mx ToolTip Control in Flex

2 comments

The ToolTip control allows you to provide additional helpful information about your interface. When a user moves the mouse over a graphical component like a Button control, you can use the ToolTip control to pop up a text with additional information about the Button functionality.

ToolTips are a very useful way of guiding users through your application.

In this example I will show you how to apply different styles to a ToolTip control using CSS.

This is how your custom ToolTip will look when all the styles have been applied:

Custom Flex ToolTip Control

Custom Flex ToolTip Control

You can find the working example at the end of the page.

This is the code behind the application:
Read the rest of this entry »

Written by Popa Mihai

December 6th, 2010 at 12:37 pm

Skinning The Spark Button Control with Flex 4

4 comments

In this article I will create a custom Spark Button control that will look something like this:

spark button control skin

You can find the working example lower on this page.

There are five steps that you must take to create a new Flex 4 Skin (for any Spark component):
Read the rest of this entry »

Written by Popa Mihai

November 23rd, 2010 at 6:31 pm

Skinning Flex 4 Components – Skinning the Spark Panel Component

4 comments

In this article I will create a custom Spark Panel component that will look something like this:

Spark Panel Component Skin

You can find the working example lower on this page.

There are five steps that you must take to create a new Flex 4 Skin (for any Spark component):

  1. Create a new MXML component that extends the SparkSkin class
  2. Define the states of the Skin. The default states for most of the components are normal and disabled
  3. Define the HostComponent between Metadata tags
  4. Specify all the graphical elements that are used by the custom Skin
  5. Define the skin parts for the skin

Read the rest of this entry »

Skinning Flex 4 Components – Changing the Appearance of Spark Components

leave a comment

Customizing and changing the appearance of Flex components has changed drastically in the last version of Flex 4. In the previous version of Flex, the MX components have most of their skins built in as properties of the component. So to change the customize the appearance of the MX components you could simply use the skin properties directly on the components.

The new Flex 4 skins are separate from the content and functionality of the components. So if you want to change the appearance of a Flex 4 Spark component most of the times you will want to create a custom Skin for the class. After you create the custom Skin class you will associate the custom Skin class with a host components by using the skinClass property. In the code below I assigned the “PanelSkin” to an instance of the Spark Panel component.

<s:panel id="myPanel" skinClass="PanelSkin"></s:panel>

There are five steps that you must take to create a new Flex 4 Skin:
Read the rest of this entry »

Written by Popa Mihai

November 22nd, 2010 at 6:51 pm

Two-ways data binding in Flex4 using the @ character

leave a comment

With Flex 4 we now have a new way of using two-ways data binding by using the @ character in conjunction with the curly braces syntax. In the previous version of Flex if we needed to have a two way binding we had to specify this in both the tags that were bound together:

	<mx:TextInput id="txt1" text="{txt2.text}"/>
	<mx:TextInput id="txt2" text="{txt1.text}"/>

Now, in Flex 4 we only specify the binding in one tag, and leave the other tag empty. In addition to this you must use the @ character just before you start the curly brace. This is how it works now with Flex 4:

	<s:TextInput id="txt1" text="@{txt2.text}" />
	<s:TextInput id="txt2" />

Here is the complete working example:

<?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" viewSourceURL="srcview/index.html">
 
	<s:layout>
		<s:VerticalLayout horizontalAlign="center" paddingTop="10"/>
	</s:layout>
 
	<s:TextInput id="txt1" text="@{txt2.text}" />
	<s:TextInput id="txt2" />
 
</s:Application>

View Source is enabled in the above example. To view the source files right click on the swf and choose “View Source” from the context menu.

Written by Popa Mihai

November 8th, 2010 at 12:48 pm

Posted in Flex

Tagged with , ,

Two-ways data binding in Flex 3

one comment

There are some cases where you could need that two controls in your application have the same value and be bound together. You can do that with Flex 3 by adding using this very simple example:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="white">
	<mx:TextInput id="txt1" text="{txt2.text}"/>
	<mx:TextInput id="txt2" text="{txt1.text}"/>
</mx:Application>

View Source is enabled in the above example. To view the source files right click on the swf and choose “View Source” from the context menu.

Written by Popa Mihai

November 8th, 2010 at 12:47 pm

Posted in Flex

Tagged with , ,

Creating a Custom Flex Event by Extending the flash.events.Event Class

one comment

This post is part of a series of articles in which I will try to explain in detail how events work in Flex, how you can handle Flex events, how you can create your custom Flex events and more.

In the previous article I talked about Flex custom events. We created a new custom event:

	var eventToBeDispatched:Event = new Event('yourCustomEvent');

Then we dispatched the event to the parent component.

	dispatchEvent(eventToBeDispatched);

The event was registered to the Flex Framework between metadata tags:

	<fx:metadata>
		[Event(name="yourCustomEvent", type="flash.events.Event")]
	</fx:metadata>

So we used mxml register the event handler to the custom event:

	<components:lowerhalf yourCustomEvent="lowerhalf1_yourCustomEventHandler(event)"></components:lowerhalf>

The handler function lowerhalf1_yourCustomEventHandler(event) just displayed a random number a label.

Although this approach allows for using a custom event type it has a major drawback: we can’t pass any custom data along with the event object. This is due to the fact that the flash.events.Event class doesn’t support additional properties.
Read the rest of this entry »

Written by Popa Mihai

November 3rd, 2010 at 1:02 pm

Posted in Flex

Tagged with