Tour de Flex – New Mobile Development Additions

Posted in Adobe Flex, Flash Builder Burrito, Flex 4.5 Hero, Flex/AIR, Tour de Flex with tags , , , , , on January 27, 2011 by devgirl

Tour de Flex (desktop and web version) were updated today to include a new mobile section showing samples using the Flex 4.5 SDK (Hero), so be sure to check it out! There are also links to download Flash Builder Burrito (Preview), Adobe AIR Launchpad, Tour de Mobile Flex and other resources to help you get up to speed with Flex and mobile development quickly.

Each mobile sample includes tabs showing the main MXML file, the home view code (new in Flex 4.5 SDK) and a tab showing any required application descriptor updates, including required permissions for the android manifest. You can copy and paste the code directly into your Flash Builder Burrito project and run or debug it either in the emulator included with Flash Builder Burrito or on your own personal device immediately. Each of these samples can also be generated from the Adobe AIR Launchpad (free AIR application) directly into one project as well, so keep that option in mind if you would like to use multiple samples quickly!

Automatically Scroll Flex Mobile TextArea

Posted in Flash Builder Burrito, Flex 4, Flex 4.5 Hero, Flex/AIR, Mobile Development with tags , , , , , on December 16, 2010 by devgirl

If you’re doing any mobile development with the Flex 4.5 (Hero) SDK or Flash Builder Burrito, this tip may be useful to you. A fairly typical use of a TextArea in an application is to use it as a log where you would want it to scroll automatically as text is being added. Currently if you’re using the Mobile theme on your project, the Spark TextArea will not automatically scroll when text is appended to it as it does in a non-mobile application. It will scroll only if you are over it (if it’s non-editable) or in it and move the mouse wheel, not just as text is being appended. The reason behind this difference in behavior from a non-mobile to mobile-themed application is that the Flex Hero mobile theme uses the optimized set of components and for the TextArea, it’s actually using a MobileTextField component as the textDisplay part in the skin versus the RichEditableText component that is used in the regular Spark TextArea for the textDisplay. Now you could do something like use a non-optimized component such as the RichEditableText either directly in your application or in a custom TextArea skin as the textDisplay part, such as:

<!--- Defines the scroller that is used to scroll the TextArea control. -->
<s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" 
				minViewportInset="1" measuredSizeIncludesScrollBars="false" hasFocusableChildren="false">
        <!--- @copy spark.components.supportClasses.SkinnableTextBase#textDisplay -->
        <s:RichEditableText id="textDisplay"
                  widthInChars="15" />

but the obvious problem with this is there’s a reason they built the SDK with optimized components, so we should try to work with what we have in the optimized TextArea. RichEditableText has the Text Layout Framework (TLF) support underlying, thus would not be a good choice as far as performance is concerned. Since the MobileTextField is the component used for the textDisplay skin part, we can actually use the scrollV and scrollH properties on it to scroll vertically or horizontally accordingly after text is appended to the TextArea. An example is shown here with text being added to a TextArea on a button click, and a counter is incremented to show that it’s automatically scrolling as text is appended:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="" 
		xmlns:s="library://" title="Home">
			import spark.components.supportClasses.MobileTextField;
			private var cnt:int = 0;
			protected function addText():void
				ta.appendText('More text... ' + cnt++ + '\n');
		<s:VerticalLayout paddingTop="30" paddingBottom="5" paddingLeft="5" paddingRight="5" gap="5"  
	<s:Label text="Auto-Scrolling TextArea" fontSize="30"/>
	<s:TextArea id="ta" width="95%" height="200" editable="false"/>
	<s:Button label="Add Text" click="addText()"/>

A screenshot of the above home view running in the mobile emulator in Flash Builder Burrito is shown here, but you really have to try out the code in your project to see the auto-scrolling:

Note that when you scroll vertically, the units are in lines versus pixels when you scroll horizontally. I also noticed there are verticalScrollPosition and horizontalScrollPosition properties which also appear to scroll when incremented. I was curious why there are both, and took a look at the class in the Flex 4.5 SDK. In there I noticed that when you set those properties it’s actually doing a calculation to see which is smaller, the value you’re setting versus the maxScrollV property if set, so keep this in mind if you plan to use those properties instead (similar case for the horizontalScrollPosition setter):

public function set verticalScrollPosition(value:Number):void
        scrollV = Math.min(Math.max(0, int(value)), maxScrollV);

You should remember this MobileTextField is used behind the scenes when trying to use other properties you might need that are not available in the optimized TextArea such as htmlText as well. See this post by Brian Rinaldi for more information about using htmlText in your mobile TextArea…

Lastly, a couple things to note in regards to this MobileTextFieldd component… You cannot use it in MXML markup, it is a text primitive to be used in ActionScript skins and item renderers. Another thing to note is that the name of this class changes to StyleableTextField in future SDK releases so keep this in mind if you are using something newer than the MAX preview build.

Using Flex Containers – Tips and Reference

Posted in Adobe Flex, Flex 4, Flex/AIR with tags , , , on November 10, 2010 by devgirl

This post is intended to give developers a quick reference guide to using Flex 4 containers and layouts. Though it’s not necessarily a complex issue, it does seem to be a source of frustration for many, and particularly those beginning Flex. Code often ends up with too many nested containers and extraneous properties that aren’t serving any purpose because the developer may not understand how to use them correctly.

Below is a summary of the Flex 4 containers and some general information, including if they are skinnable, how to make them scroll etc. The minimum and default sizes are also important to make note of since it makes a difference in aligning children. Note that Basic layout is equivalent to Flex 3’s absolute layout.

• By default, Flash Builder will create an Application with a minimum width and minimum height of 955 and 600 respectively. You can change this by going into the Flash Builder Preferences and removing the minSize variable from the File Template. Go to Flash Builder | Preferences | Flash Builder | File templates | MXML Web Application. Select ‘Edit…’ and remove this from the template → ${min_size} then press ‘Ok’.

• All Spark containers above support both GraphicElements (shapes, FXG etc) and VisualElements (UI controls) as direct children. This is not the case with all MX containers.

• Some containers support nested layout tags to override the default listed above (include the layout tag as a child). The containers that allow you to nest a layout are: Application, BorderContainer, Group, Panel and SkinnableContainer

It’s often easier to grasp a concept more quickly when it’s presented visually (as they say a picture is worth a thousand words)! Below are a few images by Justin Shacklette and Gilles Guillemin who own that really go a long way in explaining the different default layouts in Flex 4. They also show how the properties such as padding, horizontal/verticalAlign and gap would apply. You can download the reference PDF’s from here. Check out their cool custom Flex 4 layouts while you’re there!

Scrolling with Groups
Scrolling is much different in Flex 4 compared to Flex 3 since the scrolling is not built into the component. The best practice for scrolling a Group is to wrap that Group (or HGroup/VGroup etc) in a Spark Scroller object. The key with the Scroller is to set the width and height to the size of the contents you want to be viewable. You can also set a scroll position to display the contents at a current location within that range. If you don’t set width/height, or if you set it to values bigger than the contents, the scrollbars will never appear. For instance, consider the following code, and the result showing no scrollbars (since the width and height were equal to the size of the image). The same result would occur if the width/height were omitted from the Scroller object completely:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="" 
			   xmlns:mx="library://" minWidth="955" minHeight="600">
	<s:Scroller width="300" height="300">
			<mx:Image width="300" height="300"

Now in the following code, half of the image will appear vertically along with a vertical scrollbar allowing the other half of the image to scroll. No horizontal scrollbar will be added since the height will be sized to the content height by default:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="" 
			   xmlns:mx="library://" minWidth="955" minHeight="600">
	<s:Scroller width="150">
			<mx:Image width="300" height="300"

Scrolling a Skinnable Container
It’s recommended that skinnable containers (which includes the Spark Application, BorderContainer, NavigatorContent, Panel and Window) have the Scroller object added into the skin class around the contentGroup Group object. An example of how this can be done is shown in this code snippet taken from a custom SkinnableContainer MXML skin.

<s:Scroller width="100%" height="100%">
	<s:Group id="contentGroup"  minWidth="0" minHeight="0" />

The alternative is to nest a Scroller and Group around your content within your code as the first child, however the preferred method is to keep it separated in the skin class. For more details about scrolling and containers, see this link.

Layout Guidelines
• If the container of the object has basic or absolute layout, use constraints such as left, right, top, bottom, horizontalCenter, verticalCenter to determine its placement.

• If the container of the object has a vertical or horizontal layout (either with the layout tag or using HGroup/VGroup), use the horizontalAlign, verticalAlign, gap, paddingTop, paddingBottom, paddingLeft, paddingRight attributes to control the children and the whitespace around them. These attributes cannot be used with a basic/absolute layout.

Note the following code and screenshot showing two containers each with a different layout and properties specified but displaying the same result:

<s:Application xmlns:fx="" 
		<s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
	<!-- Container 1 has a BasicLayout (default) and uses constraints on the label itself placement -->
	<s:SkinnableContainer id="c1" backgroundColor="0x000000" color="0xFFFFFF" width="420" height="200">
		<s:Label horizontalCenter="0" top="30"
				 text="Basic Layout using constraints on the object itself for layout."/>
	<!-- Container 2 has a VerticalLayout with align and padding properties set on it for label placement -->
	<s:SkinnableContainer id="c2" backgroundColor="0x000000" color="0xFFFFFF" width="420" height="200" >
			<s:VerticalLayout horizontalAlign="center" paddingTop="30"/>
		<s:Label text="VerticalLayout that specifies where the label is placed with properties."/>

• To center children within a container with a horizontal/vertical layout (or HGroup/VGroup), use horizontalAlign=”center” and verticalAlign=”middle”.

• To center a component within a container that has a basic or absolute layout, use horizontalCenter=”0″ and verticalCenter=”0″ on the component to be centered.

Note the next two code samples regarding centering showing the same exact result:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="" 
		<s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
	<s:BorderContainer borderColor="red" borderWeight="5" width="300" height="300"/>

The result:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="" 
	<s:BorderContainer borderColor="red" borderWeight="5" width="300" height="300" horizontalCenter="0" verticalCenter="0"/>

The result (notice it’s the same as the above):

General Tips
• In general, opt to use constraints over absolute positioning using x,y values since constraints dynamically resize with the browser. This is even more important now when many are developing cross-platform applications for web, desktop, mobile, tablet devices etc where screen sizes vary greatly.
• Use left/right OR horizontalCenter property but not both or they compete and it’s just bad practice.
• Use top/bottom OR verticalCenter property for the same reasons as above.

IMPORTANT NOTE: When in doubt about which properties to use, switch to Design view to see what options are available in the properties panel. It will switch depending on the component selected and container layout, and it a great way to double check what you’re doing.

Quick Summary of Properties

Check out the following links for more information on this topic:

Adobe AIR Launchpad Beta Update!

Posted in Adobe AIR, Adobe AIR Launchpad, Flex/AIR, Mobile Development with tags , , , on November 9, 2010 by devgirl

The Adobe AIR Launchpad has been updated to version 2.02, which includes the following updates/fixes:

  • Context menu sample – shows how to handle the device ‘Menu’ button press to invoke a custom popup type menu within your application
  • Handle exiting event – handle the application exiting event (if exit is NOT specifically called, the application is still running in the background and activate/deactivate handlers will be used)
  • Code Formatting cleanup – fixed spacing and tab formatting
  • App Descriptor cleanup – fixed extra lines and tab issues in the android manifest section
  • Minor UI changes, missing tooltips, default splash screen image changed
  • Code sample cleanup

More new samples and updates will be coming in the next week or two so stay tuned for another update! As usual, if you have any issues or suggestions, check or post to the Adobe AIR Launchpad forum.

Note: If you haven’t seen or used this tool yet and you are using Flash Builder Burrito Preview, check out Adobe AIR Launchpad to help get you up to speed quickly on your mobile development! It was recently updated to build mobile AIR for Android applications. More information about that important update can be found in my recent blog post here.

Adobe AIR Launchpad – Gone MOBILE!

Posted in Adobe AIR, Adobe AIR Launchpad, Adobe MAX, Flex 4, Flex/AIR with tags , , , , , , , on October 25, 2010 by devgirl

Version 2.0 of Adobe AIR Launchpad Beta is now available. It includes support for the creation of AIR Mobile projects as well as some other important updates (start a new project or switch back and forth between mobile or desktop AIR projects without restarting the app)!

This new version allows you to create mobile projects based on the AIR for Android APIs and Flex Hero (codename for next version) SDK’s. With the new main menu you can select Desktop or Mobile for your project base and it will generate a ZIP file and directory folder containing all of your chosen options and samples that can be directly imported into Flash Builder. The Desktop option still targets the Flash Builder 4 IDE but the generated projects from the Mobile menu option are targeted for the Flash Builder Burrito IDE which is also still in development (get the Preview Release and development guides here!) I’ve tested with this Preview version of Flash Builder Burrito and I was very impressed overall by the stability and features already supported. I run it concurrently with Flash Builder 4 (and occasionally Flex Builder 3) and have not had any issues, so don’t hesitate to grab it and at least play with it and see what’s to come (and dabble with some mobile while you’re at it)!

Developers should note that the development of an AIR mobile application is quite different and further justifies a need for a tool like Adobe AIR Launchpad to aid developers in quickly getting up to speed with mobile development. The projects generated from the Mobile menu option are based on the new Spark MobileApplication tag and will include a first home view (using the new Spark View class) so you can see how to push and pop views based on the samples selected from the Mobile options (one view created per sample). In a Mobile AIR application you don’t define the content for the UI in the main application class, but instead create views. The Flex SDK automatically adds a ViewNavigator container object as a child in the MobileApplication that is used to push and pop views as desired. This is all totally new but Adobe AIR Launchpad contains a working example of how this is done in your generated project. The generated project also shows the use of other new Spark classes and options created to support mobile (MobileIconItemRenderer, navigationContent, splashScreenImage, how to set content on the ActionBar and more). Note that the generated samples for the mobile project option are created in the ‘views’ folder (as opposed to ‘samples’ folder for an AIR desktop project).

Probably the coolest thing about this is you can import your new generated mobile project into Flash Builder Burrito and run it on either the emulator or your device right from the IDE and immediately play with the samples. The following screenshots are from a generated working mobile project created by the Adobe AIR Launchpad running on a Nexus One:

The new Flash Builder debug configurations now allow you to debug your application as it is running on your phone and output is written to the console just as it is when you run an application on the desktop (wicked cool)!! If you don’t have a device to debug it on yet, you can also just run it in the emulator from the run/debug configurations in Flash Builder IDE so you can get started on mobile development immediately! No more command line and slow emulation (which you may have seen if you previously tried this); response time with the emulator is dramatically improved. Below is a screenshot of the debug configuration dialog from Flash Builder Burrito:

The Flex Mobile Project option will automatically default to a new mobile theme which is new in Flex Hero. This theme includes larger and more optimized fonts and UI components right out of the box. You can modify the styles on the application as you would any other as long as you’re aware that it’s within the Flex mobile theme and some styles may not yet be available. See the Flex Hero and Flash Builder Burrito docs for more details. The screenshots of the running mobile app on the Nexus One above show an example of some of the Spark components with the mobile theme.

Also, if you are not aware of it yet, there are various permissions required now in the AIR app-descriptor.xml file for the Android manifest. Launchpad will determine the permissions needed based on options and samples selected and set them for you. I also put in informative tooltips to help explain each option to get you going quickly without having to pore over Android docs. The screenshots below show an app-descriptor manifest and application MXML code generated by Launchpad:

I’ve been working feverishly to get as much in this release to coincide with MAX as possible but will still be adding new updates (and bug fixes) in the weeks to come and as the Flex SDK features are added and changed. You can download it now from Adobe Labs and it will auto-update as I continue to put out changes. If you get an immediate auto-update notice (to version 2.01), please go ahead and do the update as I made some changes and fixed some important things over the weekend after that AIR file was posted. Note that iOS specific support will be added in the near future as well!

I’d be happy to take suggestions on new features or hear about bugs you might find here on my blog or on the official Adobe AIR Launchpad Beta Forum.

Also, be sure to check out the new Tour de Mobile Flex (with source) James Ward recently created and made available today to see another great example of mobile development!

Adobe AIR Launchpad Update

Posted in Adobe AIR, Adobe AIR Launchpad, Adobe Flex, Flash Builder, Flex 4 with tags , , , on September 7, 2010 by devgirl

An update to the Adobe AIR Launchpad Beta has been made available today and includes the following fixes/changes in version 1.0.1:

  • Fixed Windows OS path issue for generated icon paths set in the app-descriptor.xml file. Paths will now have the correct path separator.
  • Allow badge graphics other than JPG to be used and named with the correct extension type. The badge image selected in Adobe AIR Launchpad will now be prefixed with the application name followed by _badgeImage and the extension of the type of file chosen in the generated project; for example: MyApp_badgeImage.jpg or MyApp_badgeImage.png..
  • Changed the size of the image required for the install badge to 215×100 to match the default badge
    from the Flex 4 SDK install badge sample.
  • Fixed issue where Alert import statement was not generated in certain option combinations.
  • Updated the readme in the generated project with more details and a link to the Flex 4.1 SDK.

Note: If you’ve already installed Adobe AIR Launchpad, you will be notified of the available update on next run, otherwise to get the latest version, download it now from Adobe Labs.

Also, check out the Adobe AIR Launchpad Forum for more details on the latest feedback and comments related to the Adobe AIR Launchpad, or feel free to comment directly here!

Attest 3.0 for Flex 4 Certification Study Released!

Posted in ACE certification, Adobe AIR, Adobe Flex, Flex, Flex 4, Flex Certification, Flex/AIR with tags , , , , , , , on September 7, 2010 by devgirl

Attest 3.0 is now available for download to use for all of your Flex 4 Certification study needs and help you become an Adobe Certified Expert! Dave and I worked hard writing questions and updating the software to Flex 4/AIR 2.0 while still trying to maintain our day jobs and overcome some hurdles along the way as noted on his PXL blog. We are thrilled to have it out now and you can download it today as either a trial/free version or purchase the full version. The trial contains one free mini practice exam with 30 questions and 99 months of study (the longest trial we could choose with AIR Marketplace), and the full version contains access to all questions and features available for $20. The full version’s random feature allows you to choose a mini or full exam and will never have the same order or content of questions. It also offers an option to show the answers with each question if you want immediate validation and feedback of your answer while studying and has a ‘Study’ feature with specific links to each area to focus on for studying, which is precisely where the actual exam questions are coming from. See Dave’s post regarding the change in maintaining the different versions of Attest this time around if you’re already familiar with this software.

Many thanks to my cohort Dave for all of his hard work on this and all versions of Attest, you ROCK!! He graciously allowed me to be involved in this venture and we’ve proven to make a great team! We plan to continue to add more questions to this version and are interested in hearing your feedback on how we can make Attest better in the future!

The official details of the Adobe Flex 4 ACE exam can be found here. Happy studying and good luck 🙂