Popa Mihai

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

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 »

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

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

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

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 »

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

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 »

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

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 »