Archive for the Flex 4 Category

Framework RSL’s in Flex Builder vs Flash Builder, Performance and Important Info

Posted in Flash Builder, Flex 4, Flex Builder, Flex/AIR with tags , , , , , , , on April 8, 2010 by devgirl

If you are running multiple Flex applications on a server you should seriously consider using Flex Framework RSLs (runtime shared libraries) to reduce redundancy by eliminating the loading of the same core framework libraries used by all applications. The result could be a reduction in the size of your application SWF file to 1/10th of the original size! I recently implemented this approach for Tour de Flex since each of our hosted samples is its own application and would ultimately contain a large amount of code shared by all the other samples. I saw the size of the swf’s for the samples go from 572k to 57k just by making one small change, removing the core Flex Framework RSL’s from the resulting swf.

The good news is, in Flex 4 previously optimized core framework RSL’s are enabled by default and dynamically linked at runtime (versus compiled into the code via the ‘merged into code’ option). This option is specified in the project properties under Flex Build Path. Under the Library Path tab there you will see a Framework linkage selection that should look like the screenshot below and use runtime shared libraries by default. If it does not show that as the default, you can also select Runtime Shared Libraries from the drop-down list to ensure they are used.

Using Flex Builder you will see that the default option is set to Merged into Code, such as the following:

It’s important to understand what is happening here whether you are using Flex Builder or Flash Builder. Obviously with Flex Builder you will need to modify that option if you want to take advantage of the performance gain of having those libraries externalized. However even with Flash Builder and using Flex 4 it’s important to note what is happening, because though the RSL’s are enabled by default, the default configuration settings currently create a copy of the RSL locally for each of the different SWZ files (the extension of the core framework RSL). This means that when you export your release build for your application (File -> Export -> Release Build) you will have a copy of the each of those 6 .swz files created ranging from 60kb to 620kb. The 6 .swz files (release build number will vary) are:

  • framework_4.0.0.14159.swz
  • osmf_flex.
  • rpc_4.0.0.14159.swz
  • spark_4.0.0.14159.swz
  • sparkskins_4.0.0.14159.swz
  • textLayout_1.0.0.595.swz

This may not be a big deal, but in the case of Tour de Flex samples there was no reason to have a copy of these files for every single sample on our server. I thought it would be useful to share this in case others were faced with this same issue or wondering what the heck all those .swz files were in their release directory. If you want to make a change to how this works, you can change your Flex configuration file to point to a different location for the runtime shared libraries other than creating them locally. There are two XML tags that specify an RSL location in the configuration file for each of the shared libraries. The first one points to the official Adobe path where they are located and you should leave that one as is. The 2nd one specifies the failover URL that you would want to change to point to a single location on a server somewhere for instance. For Tour de Flex I modified each of the failover URL paths in the configuration file to point to our Tour de Flex server that had all of those SWZ files (RSL’s) in one location. Then when I compiled each sample (or any application for that matter once these settings are changed, so be careful) it would no longer generate those local .swz files.

Here’s an example of one of the six default RSL path settings from the flex-config.xml file that comes with the Flex 4 SDK. The flex-config.xml file is the Flex configuration file and located on Mac for instance at /Applications/Adobe Flash Builder 4/sdks/4.0.0/frameworks/flex-config.xml:

	 <!-- Spark SWC-->

with these settings you will see the RSL files generated in the local bin-release directory when the application is built for release.

In the case of Tour de Flex, I changed that 2nd tag to point to our TDF Server location. For example:

        <!-- Spark SWC-->

When Flash Builder was then restarted with these settings and a sample recompiled, the local SWZ files were no longer output in the local release directory. IMPORTANT NOTE: if you keep Flash Builder open while you modify your flex-config.xml file you must restart it to pick up the changes. You also may need to delete the bin-release folder of your project first before seeing the change from recompiling.

There is also an option in Flash Builder that will create local copies of the runtime shared libraries in your bin-debug folder by default. If you look at the same Build Path -> Library Path settings in the Flash Builder screenshot above (1st screenshot), notice the checkbox for ‘Use local runtime shared libraries when debugging’, you will see that same set of files (but .swf) generated in your bin-debug output. When you uncheck this box they will not be generated. I thought it would be useful to point this out as well.

The last thing I want to note is that you can also use command line compile to change the option of where to load the RSL file from. Loads of information on how to do that, as well as more information on Framework RSL’s in general can be found here.

Major Tour de Flex Updates for Flex 4!

Posted in Adobe Flex, Flex 4, Flex/AIR, Tour de Flex with tags , , , , , , , on March 22, 2010 by devgirl

If you didn’t know it already, Adobe Flex 4 and Flash Builder 4 became officially available today! As part of the launch we made some significant changes to Tour de Flex so be sure to make it a point to check it out. We released a whole new structure of samples and reworked the Flex 4 node of the tree to include all components recommended for use between the Spark and Halo namespaces to aid developers not only new to Flex 4 but in making the transition between Flex 3 and Flex 4. We’ve also included a new ‘Introduction’ tab that has some great pages from the newly updated containing some really useful information and resources. A bunch of the new samples are outlined below. Following the sample outline I have listed some other new links to check out for more great Flex resources. As always, if you have any samples you’ve built using Flex 4, please consider submitting them to either Greg Wilson or myself for Tour de Flex!

New Flex 4 Control Samples:
TextInput – Spark control that replaces the Halo TextInput and allows for a single line of rich text to be entered.
TextArea – Spark control that replaces the Halo TextArea and allows rich text to be entered, edited, selected and scrolled.
RichText – RichText is a step up from the Spark Label component in that you can display rich text with layout, but is non-interactive (not selectable or scrollable). Label is the most lightweight of the Spark text components, followed by RichText, followed by RichEditableText.
ComboBox – check out the differences between the ComboBox and the DropDownList, the ComboBox contains a TextInput so you can start typing into it to match an item whereas the DropDownList is just a Label.
RichEditableText – RichEditableText is built on the TextLayoutFramework and supports rich text and interactivity.

New Layout Samples:
TileGroup – shows the use of the Spark TileGroup which is the same as a Group with a TileLayout.
DataGroup – the DataGroup allows you to manage mixed content in a group.
HGroup/VGroup – these containers replace the HBox and VBox halo components from Flex 3 and allow you to arrange items in a group either horizontally or vertically.
SkinnableDataContainer – this sample shows how to use the skinnable version of the DataGroup.

New FXG Graphics Samples:
FXG is the Flex Graphics framework providing a declarative graphics syntax to draw in Flex and allows for interchangeability between other Adobe products such as Adobe Illustrator.
Rect – FXG primitive to draw a rectangle graphic.
Line – FXG primitive to draw a line graphic.
Ellipse – FXG primitive to draw an ellipse shape.
BitmapImage – fills a rectangular region with bitmap data drawn from a source.

New Effect Samples:
Animate Properties – shows how you can animate arbitrary properties to create some really cool animation effects using the SimpleMotionPath class. Built by my good friend and Attest cohort Dave Flatley.
AnimateShaderTransition – fun sample that shows how you can create a swap shader effect between two images.
Move3D – shows how the Move3D effect can be used to create a 3D movement of an object.
Wipe – replaces the Flex 3 Wipe effect.

New Style Samples:
DescendantSelector – shows how to use this advanced CSS to specify styles for a child in a container.
TypeClass Selector – advanced CSS to specify a type plus a class for selecting the item to style.

New Coding Techniques Samples
Using Text Layout Framework – TLF Text Editor Sample – allows you to play around with the various Text Layout Framework properties and see what capabilities are offered and programmable. My favorite thing about this editor is how you can click the ‘Export’ button and it will generate the MXML code you can use in your code, just be sure to add the namespace as needed (for instance prefix TextFlow with the s: for Spark). Oh and even better, the source code to this entire editor is included in the second tab!!

Custom Layout Samples:

  • FlowLayout – written by Evtim Georgiev from the Adobe Flex Engineering team.
  • WheelLayout (carousel effect) – another one supplied from Adobe and one to definitely check out for advanced custom layout building in Flex.
  • Animated Layout – written by Adobe’s own Christophe Coenraets showing how to create a custom layout that includes some animation.

Custom Item Renderer with Animation – a couple of fun samples written by Christophe that shows the use of custom item renderers that include animation. Perhaps we all know what Christophe’s favorite show on TV is now :). Note there are 2 samples here in tabs so don’t miss the second one!

That about sums it up. There are a few I did not list so be sure to go take a peek! Also note that some of the tree items show multiple ways to use that particular component and may contain multiple samples in tabs when you click on the item. There is a number in parentheses next to the sample in the tree as well to indicate that more than one is available.

As promised above, here are some new links to check out!

Flex 4 Sample Themes

Posted in Adobe Flex, Flex 4, Flex/AIR with tags , , , , on January 6, 2010 by devgirl

One of the more recent downloads of the Flex 4 Nightly builds contains some new Flex 4 Sample Themes. As a non-designer, I find these invaluable in helping me make my applications more appealing. Since the source is provided, I’m given an instant base to work with and can modify to my liking rather than starting from scratch.

These sample themes are located in the Flex 4 SDK zip under …/samples/themes. To apply one to your application, you simply go into your project properties (either right click on your app folder in Flash Builder and select Properties from the context menu or go to File | Properties while your project folder is selected) and select ‘Flex Theme’. Then click the ‘Import Theme’ button and find the location of the theme that you want to use in your …/samples/themes directory of your Flex 4 SDK and type in a name for it or accept the default name it creates. Once you see that it has been added to your choices (probably under category ‘Other’), then you can select it and your project will use it the next time it’s run.

In this post I’m going to show a preview of a very simple app with some of these sample themes. I’m using the Flex 4 States and Transitions Tour de Flex sample as the simple app that is showing the different previews. The source code for that sample can be found here.

Default Spark Theme

Arcade Theme

Cobalt Theme

Graphite Theme

Zen Theme

The following set of themes are simply the default Spark theme with some CSS color properties changed to illustrate how you can use plain CSS to make some dramatic changes quickly. The CSS for these themes is also included in the samples/themes directory under the given theme.

Spark-Cobalt Theme

Spark-Desert Theme

Spark-Graphite Theme

Spark-Sage Theme

Spark-Sky Theme

If you don’t see the …/samples/themes directory in your Flex 4 SDK version then get a more recent one from here. I noticed the themes available sometime around the beginning of December, so if you’re SDK is more recent than that, you’ll likely have to get a more recent version.

Also, for all of you creative ones out there that are building really cool themes in Flex 4, I encourage you to submit your themes for the rest of us to use :).

AIR 2 / Flash Player 10.1 Beta Info

Posted in Adobe AIR, Flex 4, Flex/AIR with tags , , , , , on December 21, 2009 by devgirl

The Adobe AIR 2.0 Beta and Flash Player 10.1 Beta releases are out and filled with some really cool, fun and powerful features. These are big releases as far as increasing developer productivity and in my opinion will further convince people to choose the Flash Platform as their technology direction.

I’ve been working with these two prereleases on top of Flash Builder (Flex 4) to build samples for Tour de Flex and made some notes on them as I’ve been trying the different APIs. I will summarize what I have learned so far and add to this post as I continue through them. Some of these may be totally obvious, but I will list them here anyway. The current Tour de Flex samples were built using the AIR 2.0 SDK build 121509. You can download AIR 2.0 Beta here. Some things to note:

1. Microphone Sample – this sample can be used with the internal microphone but you do need to make sure it is enabled and the volume is up. I also had to increase the volume on the Flash Player settings on my Macbook for the microphone to pick up the sound. To check your settings, go here and right click on the settings manager image, then choose ‘Settings’, and Microphone.

2. Gestures Sample – this sample requires multi-touch enabled hardware. I am using a Macbook which does have multi-touch support in the trackpad, but unless you have this or a multi-touch enabled device, the sample may not work for you. This article lists some devices that contain the support, as well as some other very useful info. Also, many samples out there are straight ActionScript classes that extend Sprite (for instance the one in the article referenced above). If you copy these into an AIR project and set the ActionScript class as the default application, you may find that you still see nothing when you run it. That is because you still need to go into the application descriptor file (yourappname-app.xml) and set the visible flag in the initial content to true. For instance:

		<!-- The main SWF or HTML file of the application. Required. -->
		<!-- Note: In Flash Builder, the SWF reference is set automatically. -->
		<content>[This value will be overwritten by Flash Builder in the output app.xml]</content>

		<!-- The title of the main window. Optional. -->
		<!-- <title></title> -->

		<!-- The type of system chrome to use (either "standard" or "none"). Optional. Default standard. -->
		<!-- <systemChrome></systemChrome> -->

		<!-- Whether the window is transparent. Only applicable when systemChrome is none. Optional. Default false. -->
		<!-- <transparent></transparent> -->

		<!-- Whether the window is initially visible. Optional. Default false. -->

3. Global Error Handler Sample – this will only work right if you are running in ‘Run’ mode, debug mode will stop on the error itself and thus not be ‘handled’.

4. Native Process Sample – this sample assumes some default paths on the different OS’s, so if you have something custom then the ping may not work unless you change the path to the correct executable for your particular installation.

5. Socket Server Sample – this sample has two apps within it, a client app and a server app. The ServerSocket class is the new AIR 2 class allowing your app to be a socket server, and should first be started with the SocketServerSample.mxml file. Simply hit the ‘Listen’ button to start the server then run the SocketClientSample.mxml file to open the socket to the server and send data to it.

*** Note: Tour de Flex updated with the next five January 17, 2010 ***

6. Mass Storage Device Detection – this sample will allow you to access an external storage device such as a USB drive. Plug in an external device while running the sample and you will see the information about the device displayed as well as have the ability to browse the contents.

7. NetworkInfo – this sample will show your currently available network interfaces and some corresponding information about them.

8. Globalization – there are a few samples here that show how you can now do formatting of dates, numbers and currency based on a selected locale.

9. OS File Security Download – this sample shows how you can use the new File.downloaded property to check if a file has been downloaded or not. Run the sample and double click on a file, and a message will be displayed to indicate its download status.

10. DNS Lookup – this sample allows you to retrieve information about a specified Domain Name Server address. Simply run the sample and enter the domain name to perform a lookup. It also gives you the ability to specify an IP address and do a reverse lookup. This sample was based on a sample found here:

Lastly, here are some good links with more information and samples for these two prereleases:

Flex 4 BorderContainer – Quick and Useful Spark Component

Posted in Adobe Flex, Flex 4, Flex/AIR with tags , , , , , on December 3, 2009 by devgirl

One very useful component offered in the Flex 4 SDK is the Spark BorderContainer. You may also know this as the Spark Border if you’re one of those cutting-edge people already building apps in Flex 4, but it recently underwent a final name change to ‘BorderContainer‘.

The BorderContainer extends SkinnableContainer and offers you a quick way to set borders and backgrounds on a container in your application without having to create a custom skin. You can use CSS properties and class properties to style it much like the Halo components, such as setting the cornerRadius for rounded corners, borderColor, borderStyle, borderWeight and even backgroundColor, backgroundImage and backgroundFill.

There are numerous ways to customize your BorderContainer with the given properties and I’ll show a few simple examples here. If there is something about your container that you can’t control through the style and class properties then you should choose to use a SkinnableContainer with your own custom skin instead.

Here is an example of a BorderContainer that has a gradient background going left to right and some border settings:

      <s:BorderContainer width="400" height="300" horizontalCenter="0" verticalCenter="0" top="5"  
					   borderAlpha=".5" borderColor="0x000000" borderWeight="5">
			<!-- 0 rotation creates left to right gradient -->
			<s:LinearGradient rotation="0">
				<s:GradientEntry color="0x6600CC"/>
				<s:GradientEntry color="0xCCCCCC"/>
		<s:Label text="Left to Right Gradient" horizontalCenter="0" verticalCenter="0"/>

Here is a screen shot of what this container would look like:

The code below shows how you can make the gradient go right to left. The rotation attribute on the LinearGradient will determine the gradient effect. If you use a value of 90 or 270 it will go top to bottom and bottom to top.

     <s:BorderContainer width="400" height="300" horizontalCenter="0" verticalCenter="0" top="5"  
					   borderAlpha=".5" borderColor="0x000000" borderWeight="5">
			<!-- 180 rotation creates right to left gradient -->
			<s:LinearGradient rotation="180">
				<s:GradientEntry color="0x6600CC"/>
				<s:GradientEntry color="0xCCCCCC"/>
		<s:Label text="Right to Left Gradient" horizontalCenter="0" verticalCenter="0"/>

And the screen shot of the above code:

This next bit of code shows how you can include a repeatable background image in your container, with some other custom border settings as shown below:

       <s:BorderContainer horizontalCenter="0" verticalCenter="0" width="420" height="305" cornerRadius="7" 
					   borderWeight="2" backgroundImage="@Embed('adobelogo.jpg')" 
					   backgroundImageFillMode="repeat" borderColor="red"/>

Below is the screenshot of this container:

The backgroundImageFillMode can be set to repeat, scale or clip depending on what you would like your image to do. They are pretty self-explanatory, clip will cause it to be sized as is and if it doesn’t fit within the container it will be clipped and scale will cause the image to scale within the container.

If you want to set both a background image and a background color however, you will either need to use a SkinnableContainer object with a custom skin instead of BorderContainer, or use the BorderContainer with something like the following:

          <s:BorderContainer width="300" height="300" cornerRadius="7" backgroundColor="red">
                    <s:Rect width="100%" height="100%">
                                         <s:BitmapFill source="@Embed('adobelogo.jpg')" alpha="0.2"/>

You can also set a borderAlpha and backgroundAlpha on your BorderContainer as desired.

This last example shows how you can create a gradient border:

         <s:BorderContainer width="400" height="300" backgroundColor="0XDEAEFF" verticalCenter="0" horizontalCenter="0">
			<s:LinearGradientStroke weight="10" rotation="270">
				<s:GradientEntry color="0xF655E5"/>
				<s:GradientEntry color="0x6600CC"/>
		<s:Label horizontalCenter="0" verticalCenter="0" text="My very girly BorderContainer"/>

And the screenshot of this:

The examples above are just simple code snippets to show you the options available beyond what might be in the Adobe docs. These samples are being added to Tour de Flex along with more Flex 4 samples so stay tuned!

Flex 4 Bidirectional Data Binding

Posted in Adobe Flex, Flex 4 with tags , , , on November 18, 2009 by devgirl

One cool feature that really simplifies things in Flex 4 is the new way to achieve bidirectional or two-way data binding. Bidirectional data binding basically allows you to use a property as both a source and destination for a value. You use the @ symbol outside of your curly braces that you would normally use for binding. So for instance in the following code snippet, the properties on ‘contact’ (bindable value object) are both displayed and stored as they are changed:

<mx:Form id="contactForm" defaultButton="{submitBtn}" width="100%" height="100%">
	<mx:FormItem label="Name:">
		<s:TextInput id="nameTxt" text="@{}"/>
	<mx:FormItem label="Address:">
		<s:TextInput id="address" text="@{contact.address}"/>
	<mx:FormItem label="City:">
		<s:TextInput id="city" text="@{}"/>
	<mx:FormItem label="State:">
		<s:TextInput id="state" text="@{contact.state}"/>
	<mx:FormItem label="Zip:">
		<s:TextInput id="zip" text="@{}" maxChars="5"/>
		<s:Button id="submitBtn" label="Submit" click="submitBtn_clickHandler(event)"/>

In Flex 3 we need to explicitly save those properties in the submit button click handler for instance to ensure the inputs were saved. There is also a way to do bidirectional binding in Flex 3 using either a combination of curly braces, <mx:binding> statements or using the mx.binding.utils.BindingUtils.bindProperty() method, but the shorthand notation introduced in Flex 4 really simplifies things and helps us pass our data between application layers automatically and effortlessly. You do need to make sure that your source and destination types are the same. And one more thing to note if it’s not already obvious is that using data binding in Flex does not come without a cost. When any type of data binding is done in Flex, code is generated to throw events and other processing occurs behind the scenes to make this happen, so if performance is a big concern, be wary of this. Specific details about this new feature can be found here.

I also recently added a more extensive sample of how this is done to Tour de Flex. You can find it under the Flex 4 | Coding Techniques section of the tree (sample 2), or here in the Tour de Flex web version.

Tabbed Navigation in Flex 4

Posted in Flex 4, Flex/AIR with tags , , , , , on November 16, 2009 by devgirl

If you didn’t know it already, the philosophy behind Flex 4 is ‘pay as you go’ for performance reasons. The goal was to reduce overhead and create lightweight components as a rule, so many things we were used to in Flex 3 are no longer included out of the box and it now requires some modification to the approach we take in building our apps. I recently created a Tour de Flex sample showing how you can do tabbed navigation with Flex 4 and wanted to share a simple example here too with a bit of explanation. One big benefit from my point of view is to be able to control the look and feel of my tabbed navigation quickly and easily with the new Flex 4 skinning model. For instance I could easily change the tab button borders, add icons to them etc with this approach.

We would implement the same tabbed navigation in Flex 4 by using the Spark TabBar control with a ViewStack. The best way to show this is by example:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="" 
		 xmlns:mx="library://" width="400" height="300">
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	<s:TabBar id="tabs" left="8" y="2" dataProvider="{vs}"/>
	<mx:ViewStack id="vs" width="95%" height="85%" left="8" y="23">
		<s:NavigatorContent label="Tab 1"  width="100%" height="100%">
			<s:Border width="100%" height="100%" borderWeight="2" cornerRadius="3" dropShadowVisible="true">
				<s:Label left="3" top="5" text="This is my first tab..."/>
		<s:NavigatorContent label="Tab 2"  width="100%" height="100%">
			<s:Border width="100%" height="100%" borderWeight="2" cornerRadius="3" dropShadowVisible="true">
				<s:Label left="3" top="5" text="This is my second tab..."/>
		<s:NavigatorContent label="Tab 3"  width="100%" height="100%">
			<s:Border width="100%" height="100%" borderWeight="2" cornerRadius="3" dropShadowVisible="true">
				<s:Label left="3" top="5" text="This is my third tab..."/>

Here is a screenshot of the above code running:

Picture 11

This is just a very simple example of how you can achieve a similar look to the Flex 3 TabNavigator, but now if you want to change the look of the tabs you can just apply a new custom TabBarSkin via the skinClass property on the TabBar control:

<s:TabBar" id="tabs" left="8" y="2" dataprovider="{vs}" 2="skinClass="skins.MyTabBarSkin"/>

If you want to change the look of the tab bar buttons themselves then you would also need a custom TabBarButtonSkin that would be referred to from the dataGroup within MyTabBarSkin.mxml. I created a couple of more sophisticated examples showing this within Tour de Flex, and the custom skin classes are included. The second sample called ‘Custom Tabs’ shows how you can add an icon to the tabs as well. These samples can be found under the Flex 4 category (under Groups/Containers) or here in the Tour de Flex web version if you’d like to see more.