Goodbye to Flex

Today is officially my last day on the Flex SDK team. I have been testing the SDK for over six years. I started on the team when Flex was just finishing up its 1.5 release. Look how far its come!  I am not leaving Adobe, however. I am simply switching roles to become a quality engineering manager on the Flash Player team. I thought it was time to try my hand at something a little new. I look forward to the new people and challenges.

I have always been a huge proponent of community feedback on the team and as my last gift to customers, I just finished sending off “Flex Community Hero” mugs to all of the customers who filed a bug and had it fixed in our last Flex 4.5 release. If you filed and SDK bug that was fixed, you probably even got a handwritten letter from our QA team. These contributions from the community are really appreciated.

For now, this blog will likely be pretty quiet with relation to Flex content.

Getting scrolling right in a mobile horizontal list

With the release of Flex 4.5, you can now use Flex to build mobile applications. One of the features added to the Spark List to support mobile was the addition of bounce/pull effects at the beginning and end of a list. You can see this behavior by pulling down on the top of a list or up on the bottom of the list. When you do this, you will get a ‘bounce’ effect from the List’s boundaries.

In the majority of applications, you will choose to use a vertical list. However, occasionally, you may want to use a horizontal list. If you do this, you will get some strange default behavior with regards to scrolling in your horizontal list. In the horizontal direction, scrolling will work as expected. However, in the vertical direction, where there should be no scrolling, you will actual be able to pull up and pull down on the top and bottom boundaries. This is because the bounce and pull effects are actually still on in the vertical direction. To get the expected scrolling behavior for a horizontal list, you will want to turn verticalScrollPolicy=”off” on the List.

<s:List id=”colorList” dataProvider=”{colorsArray}” width=”100%” itemRenderer=”ColorRenderer”
y=”40″ selectedIndex=”0″ verticalScrollPolicy=”off”>
<s:layout>
<s:HorizontalLayout  />
</s:layout>
</s:List>

For more information on this, you can check out bug: SDK-28980

Here is an example mobile project that uses a horizontal list of colors to select a frame for an image.

Source: ColorFun.fxp

Flash Camp focused on mobile development this Saturday in SF

Flash Camp is happening in the Adobe SF office this Saturday, April 30. Sign up here.

Adobe Flash Camp is a full day event with sessions and a hands-on coding session that will get you up and running and creating mobile application for Android, iOS, and PlayBook with Adobe’s tools.

Details:

Who: Developers who want to build mobile applications for Android, iOS, and the BlackBerry PlayBook.  We’re serving beer, so you must be at least 21 years old to attend!

What: Flash Camp – a morning of sessions and an afternoon of hands on coding. Flex and Flash Builder product team members will be on hands to provide answers to questions. Prizes will be given away for the best mobile applications.

When: Saturday, April 30th, 2010. 9 AM PST – 6:00  PM PST

Where: Adobe San Francisco Office. 601 Townsend St, San Francisco, CA 94103

Why: Three words : code + good beer

How Much: Free and open to the public (limited space and registration required).

What to Bring: Yourself, laptop, ideas for a mobile application. We will provide the beer, lunch, coffee, and snacks.

Agenda (tentative)

10:00 – 10:30 – Keynote

10:30 – 11:00 – Building Mobile Applications: Hands on with Flash Builder and Flex 4.5

11:00 – 11:30 – Customer Showcase

11:30 – 12:00 – Break out sessions

- Flash Builder PHP for Mobile Devices

- Dot Next: Flash Builder and Flex for iOS and the PlayBook

- Designing for Mobile – UX/Tips/Tricks/etc for mobile devices

12:00 – 1:00 – Lunch

1:00 – 5:00 – Hands-on Code Camp

5:00 – 6:00 – Code-Camp Showcase and Prize Giveaway

Changing the barColor for an MX ProgressBar in Flex 4

In Flex 3, which uses the Halo theme, if you wanted to change the color of the bar on a ProgressBar, you would specify a “barColor” style for your ProgressBar. Unfortunately, in Flex 4, the Spark theme that is used by default does not support the barColor style.

To change the color of the bar on a ProgressBar component, you will need to roll a custom skin. Here are the steps:

1. Find the ProgressBarSkin in the SDK: <sdk_home>/frameworks/projects/sparkskins/src/mx/skins/spark and make a copy of it.

2. Rename the new file as something like “CustomProgressBarSkin.mxml”.

3. In CustomProgressBarSkin, find the Rect that represents the fill of the bar:

    <!-- layer 1: fill -->
    <s:Rect left="2" right="2" top="2" bottom="2" >
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF"
                               alpha="1" />
                <s:GradientEntry color="0xCC3399"
                               alpha="1" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

4. Update the colors in your LinearGradient to your desired colors.

5. In your main application, add the following type selector to your application styles.

        mx|ProgressBar {
            barSkin: ClassReference("CustomProgressBarSkin");
        }

Note: If you want to change the appearance of the ProgressBar track, you’ll need a custom trackSkin. If you want to change the appearance of the indeterminate state of a ProgressBar, you’ll need a custom indeterminateSkin.

Try the sample: ProgressBarExample.swf

Source code: ProgressBarExample.mxml, CustomProgressBarSkin.mxml

Adding toolTips to a Spark ButtonBar

This question came up today as to how to add toolTips to individual Buttons in your ButtonBar. No surprise here… the solution was to create a custom skin for ButtonBar. In the custom skin, I am adding a toolTip to the firstButton,  middleButton and lastButton. I assume that people will want to display some text that is in their dataProvider as the toolTip. In my ButtonBar skin, everything is the same except for these component definitions of the Buttons:

<fx:Component id="firstButton">
    <s:ButtonBarButton skinClass="spark.skins.spark.ButtonBarFirstButtonSkin"
       toolTip="{data.data}" />
</fx:Component>

<fx:Component id="middleButton" >
    <s:ButtonBarButton skinClass="spark.skins.spark.ButtonBarMiddleButtonSkin" 
        toolTip="{data.data}" />
</fx:Component>

<fx:Component id="lastButton" >
    <s:ButtonBarButton skinClass="spark.skins.spark.ButtonBarLastButtonSkin" 
         toolTip="{data.data}" />
</fx:Component>

Run the Sample: ButtonBarExample.swf

Source Code: ButtonBarExample.mxml, ButtonBarToolTiipSkin.mxml

Using a DateField itemRenderer for a Spark DataGrid

Here is another simple example of using a custom itemRenderer in a Spark DataGrid. In this example, I am using an MX DateField component as an inline itemRenderer.
This DataGrid is also editable. Both columns “In Stock?” and “Availability Date” also have the property rendererIsEditor=”true”. This tells the DataGrid that the component specified as the itemRenderer is also the editor for this column. If you do not specify rendererIsEditor=”true”, then, updating the CheckBox or DateField will not actually affect the data. I am setting the selectedDate on the DateField via 2-way dataBinding:

selectedDate="@{data.availabilityDate}"

Here is the code that defines the column using the DateField itemRenderer:

<s:GridColumn headerText="Availability Date" dataField="availabilityDate"
     rendererIsEditable="true">
     <s:itemRenderer>
         <fx:Component>
             <s:GridItemRenderer>
                 <mx:DateField selectedDate="@{data.availabilityDate}"
                      horizontalCenter="0" verticalCenter="0"
                      width="90%"/>
             </s:GridItemRenderer>
         </fx:Component>
     </s:itemRenderer>
 </s:GridColumn>

Run the sample: DataGrid_DateFieldExample.swf

Source code: DataGrid_DateFieldExample.mxml

Using a Spark Form with Validators

In this example, I’ve created a very simple registration form using Flex 4.5′s Form component. To validate the form, I am using MX StringValidator and MX EmailValidator. There are no Spark validators available for the fields I have in my form. Validation does not get triggered in this example until you click on the ‘Submit’ button.

By default, the FormItem skin puts the error message to the right of your Form Item. However, this was causing the width of my Form to double. I didn’t want the size of my Form to change significantly, so, I reskinned my FormItem to remove the “indicatorDisplay” and “errorTextDisplay”. Instead, I’ve chosen to show the validation errors for all three fields in a separate Label component that sits at the top of this Form.

In my Style block, I point to this custom FormItem skin:

<fx:Style>
@namespace s “library://ns.adobe.com/flex/spark”;
@namespace mx “library://ns.adobe.com/flex/mx”;

s|FormItem {
skinClass: ClassReference(“FormValidatorItemSkin”)
}
</fx:Style>

Sample SWF: SparkFormValidatorExample.swf
Sample Code: SparkFormValidatorExample.mxml, FormValidatorItemSkin.mxml

Where is drag and drop in the Spark DataGrid?

Before you spend any significant amount of time trying to figure out what APIs are available for enabling drag and drop on the Spark DataGrid, I thought I’d put it out there that it will not be available in the first Hero release of the component.  In flash builder, I think you will get code hints for events like dragComplete, dragStart, dragEnter, dragOver, however, you won’t find the properties dragEnabled or dropEnabled.

I believe that the team plans to add drag and drop support in the next big release after Hero, but, features haven’t been set in stone and I certainly can’t promise anything.

For now, if you really need drag and drop in a Spark DataGrid, you are left writing your own. Sorry   I was disappointed to hear the news too.

It’s a best practice to size a Spark DataGrid’s columns with a typicalItem

Coming from Flex 3, if I wanted to set the size of my DataGrid columns to ensure that all of my data was displayed correctly, I would either set column widths with explicit values or percentages. In Flex 4, explicit width columns is no longer the recommended way of figuring out the size of columns according to Spark DataGrid’s architect Hans Muller who schooled me when I mentioned the need to fix a bug that involved explicit width columns.

By default, a DataGrid will use the first item in its dataProvider to determine the size of each column. This may not be what you want. If you specify a typicalItem on the DataGrid, the columns will be large enough to fit this item. This item does not need to be a part of your dataProvider.

Specifying explicit column widths can be problematic because the width can be invalidated by  a host of factors: implicit renderer changes, e.g. due to inherited styles, explicit renderer changes, margin/padding and other layout configuration changes, as well as text and text format localizations.  For all of these reasons, using the typicalItem is better.

In the following example, I have two DataGrids with the same data and columns. The first one specifies a typicalItem where the data includes the longest strings that I want to display in my columns. The second DataGrid uses no typicalItem and therefore sizes its columns using the first item of the dataProvider.

Sample application: TypicalItem_DataGrid_Example.swf

Sample MXML: TypicalItem_DataGrid_Example.mxml

If you change your typicalItem, you will need to call invalidateTypicalItem() notifying the DataGrid of this change.

Note, almost all of this information was compiled from picking the brain of Hans Muller, I hope I’ve accurately represented his thinking.

Adding an icon to the header for a Spark DataGrid

Adding a static icon to the header of Spark DataGrid is very easy. You will need to create a custom  headerRenderer and specify it for your GridColumn. Here are the steps:

1. Copy the contents of the skin file: DefaultGridHeaderRenderer.mxml and paste it into a new mxml f ile that will be used as your custom headerRenderer.

2. In the custom header renderer, find the HGroup at the end of the skin file. Add a BitmapImage as the first element in the HGroup (before the ‘labelDisplay’ Group).

<s:BitmapImage source="beer.JPG" />

3. You might want to make some padding or gap changes to the HGroup to position your icon. This example changed the gap to 8.

4. Specify this custom headerRenderer for your GridColumn:

<s:GridColumn id="c1_2" dataField="name" headerText="Pub Name"
    headerRenderer="IconHeaderRenderer2"/>

Voila! It’s simple. Note, if you wanted to modify the sortIndicator, you can also do it by creating a custom header renderer based off of the default one.

Sample Code: IconHeaderExample.mxml, IconHeaderRenderer.mxml IconHeaderRenderer2.mxml