Monthly Archives: April, 2011

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