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.

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

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

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

<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

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

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

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.

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 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