Tuesday, February 28, 2012

Flex SchrodingerCheckBox Component

I saw this custom component in use at a past employer and thought it would be something useful to add to my toolbox. Not wanting to steal their code (and not caring for the way it was implemented either) I rolled my own version.

It's a CheckBox component with an additional "schrodinger" state. You see them used a lot in data trees where some, but not all, children of a node are selected, and therefore, the parent should be partially selected.

The first example, below, shows the component by itself. It can be set to its schrodinger state by setting "schrodinger = true".

Below that is an example of it used in a data tree.


Either scripts and active content are not permitted to run or Adobe Flash Player version 11.1.0 or greater is not installed.

Get Adobe Flash Player




Source code located at: https://www.assembla.com/code/shinynet/subversion/nodes

Sunday, February 26, 2012

Flex FormattedTextInput Component

Although I've seen this in a few applications, I've never seen this type of component available for Flex. The idea is that when you click and bring focus in to a TextInput, it shows the raw data for editing. When the value is committed and focus leaves the TextInput, it displays a formatted version of the value. It's very similar to concept of ItemEditors and ItemRenderers in list-based component, where the editor show the raw data and the renderer shows formatted data. In the case of the FormattedTextInput, you simply pass it an instance of IFormatter to the formatter property:

<sn:FormattedTextInput restrict="0-9.">
 <sn:formatter>
  <s:NumberFormatter/>
 </sn:formatter>
</sn:FormattedTextInput>

The example below shows three FormattedTextInput components, the first formatting data as USD currency, the second as a US date, and the third using custom PercentFormatter (which is also available in the ShinyLib library).


Either scripts and active content are not permitted to run or Adobe Flash Player version 11.1.0 or greater is not installed.

Get Adobe Flash Player


Source code located at: https://www.assembla.com/code/shinynet/subversion/nodes

Friday, February 24, 2012

Flex OpenCloseTabBar Component

A lot of software that uses tabs allow you to close individual tabs, and some (like browsers) allow you to open new ones. I've always thought these features should be built-in to Flex's TabBar/TabNavigator.

The following OpenCloseTabBar does just that. When clicking a tab's close button, it dispatches an event, which by default, removes the item from the dataprovider. The event is cancellable so you can call preventDefault on it and handle it however you want. When clicking the open button, it dispatches an event allowing you to push a new item into the dataprovider. There's additional API for controlling which tabs show a close button and whether or not to show the open tab button.

Either scripts and active content are not permitted to run or Adobe Flash Player version 11.1.0 or greater is not installed.

Get Adobe Flash Player


Source code located at: https://www.assembla.com/code/shinynet/subversion/nodes/

Thursday, February 23, 2012

Flex TitleContentPanel Component

If you’re anything like me, you end up re-skinning the Panel (and/or TitleWindow) component nearly every project just so you can shove some controls into the title bar. I finally wizened up and decided to just create custom Panel that allows this.

The TitleContentPanel adds two additional content properties to the Panel, titleContent and actionContent. Each take an array of IVisualElements with the titleContent positioning its children on the left side of the title bar and actionConent to the right. There also exists titleContentLayout and actionContentLayout properties to override the layouts.

If titleContent is specified, the Panel’s title string is ignored. If you’re familiar with the ViewNavigator in the mobile SDK, it works very similar (and modeled after it, actually).

In the example below, the first Panel specifies a DropDownList in the actionContent. The next one adds an image and a button to the titleContent.


Either scripts and active content are not permitted to run or Adobe Flash Player version 11.1.0 or greater is not installed.

Get Adobe Flash Player


Source code located at: https://www.assembla.com/code/shinynet/subversion/nodes/

Wednesday, February 22, 2012

Flex TimeStepper Component

Flex has a couple of controls for entering/editing dates, but nothing for time values. I've needed such for a couple of projects in the past and have come across a few after doing a search. Problem is, none of them were exactly what I was looking for.

One of them didn't allow switching between 12 hr and 24 hr time formats, a couple were a bit buggy, and none of them felt very polished in that they didn't match the look & feel of the other SDK components (and were a bit lacking in styling support), had weird focus behavior, and didn't fully support tabbing and keyboard integration among other things.

So I made my own.

Either scripts and active content are not permitted to run or Adobe Flash Player version 11.1.0 or greater is not installed.

Get Adobe Flash Player


Source code located at: https://www.assembla.com/code/shinynet/subversion/nodes/