Over a million developers have joined DZone.

Prompting Controls (Spark/Flex 4)

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

Here are a few useful controls written in Flex 4 for displaying prompt text, and for showing an icon in a button.

The IconButton class extends the defaults Flex 4 Button class, and adds the icon style as well as the labelPlacement (left, right, top, bottom) and paddingLeft, paddingTop, paddingRight, and paddingBottom styles.

I also made a simple extension of the TextInput class which shows a prompt text when the text input is empty and not in focus, it is called PromptingTextInput.

The third example is called ClearTextInput, it extends PromptingTextInput to show a small clear button (which is a IconButton) on the right hand side of the text input whenever there is text inside the text input.

The fourth example is what I call a PromptingList. It shows a prompt text whenever the list is empty. This is useful if you have a list that gets populated from a remote service (e.g "Loading..."), or if your list gets items added to it by the user, or by dragging items into the list (as in the example below).

Each of the prompting controls supports a style called promptStyleName which lets you set the styleName for the prompt Label.

** Note that the package structure has been renamed to flex.utils.spark.* for all Spark controls.

Here it is:


Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

Published at DZone with permission of Chris Callendar, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}