Jump Start your Adobe AIR Application Development with Adobe AIR Launchpad

Posted in Adobe AIR, Flex/AIR with tags , , , , on August 20, 2010 by devgirl

If you’ve been developing with Adobe AIR, you may find yourself often re-using pieces of code to do things such as centering your application on the screen, adding auto-update, handling network connectivity or using a local database. I just completed work on a new application from the Adobe Evangelism team called Adobe AIR Launchpad that will allow you to jump start your application development. The Adobe AIR Launchpad is an AIR application itself and allows you to choose from various options that will result in a fully generated Flex project with the settings and code selections chosen. The project can then simply be imported into Flash Builder 4 for further editing and development. The Adobe AIR Launchpad consists of 4 steps to take you through the building of your app, from the settings such as size, system chrome etc that you would usually need to update the app-descriptor XML for, to generating install badge files with a custom image if desired on the final step. The settings also allow you to specify icons for your application and the size and type will be validated to prevent error. The settings and code configuration screens are shown below:

The application also allows you to choose from sample code options to be generated which can be especially helpful for newbies to get up to speed more quickly. The samples are derived from our Tour de Flex samples and generated as tabs in the resulting Flex project. They include choices such as how to start a native process, how to use the socket API, and implementing drag and drop. The screen of sample code options is shown here:

The final generate screen is shown below and has the option to include an image for the install badge:

An example of a generated application with all the sample code options selected is shown here:

The code that is generated also has comments inline and adheres to best practices. Here is a screenshot of what some of it looks like:

Note that the code generated from the app relies on features from the AIR 2 SDK, so if you’re not using it, or the Flex 4.1 SDK (which includes AIR 2 and Flash Player 101), then I highly recommend downloading the latest version here. You can install the Adobe AIR Launchpad now from Adobe Labs and can have a stubbed-out full AIR application project with auto-update, install badge files created etc in a couple of minutes or less. The release is beta and we are really looking forward to hearing feedback on the application and things that could be added or changed. I will be working on adding all the mobile options in support of the Flex Hero release as well, which I believe will ultimately make this tool even more of a must-have to get you quickly developing AIR for mobile apps!

Related posts to check out regarding Adobe AIR Launchpad:
Greg Wilson’s Ramblings
James Ward’s Blog – Adobe AIR Launchpad Intro Video
Marcel Boucher’s ‘Mind the Gap’ Adobe blog
Michael Chaize’s RIAGora blog

Also see a demo of it in this excellent video by Michael Chaize:
Advertisements

Flash Builder 4 Shortcuts and Tips

Posted in Flash Builder, Flex 4, Flex/AIR with tags , , , on July 26, 2010 by devgirl

I’ve been collecting a summary of Flash Builder 4 tips I find useful to help me be more productive as a developer and thought I would share them here. I’m including the shortcut for the feature where possible (based on Mac OS, for Windows use Ctrl in place of Cmd). Please feel free to comment on other features or tips you find useful that I may not have covered!

  • Content-Assist – Ctrl-Spacebar – I’m sure most developers know of this, but if for some reason you don’t, you MUST start using this. It displays a pop up of all properties and functions available on this object. What many of you maybe do not know though, is that you can further filter this list to show only Properties, or only Events or Effects etc by pressing Ctrl-Spacebar again and again. They’re calling it ‘proposal cycling’ and it will have the name of the items you’re looking at in the bottom of the popup (All, Events, Effects, Properties etc). I am so dependent on this now I don’t think I could live without it!
  • Organize ImportsShift-Cmd-O – Cleans up unused import statements and organizes them by package. This option was available in Flex Builder but only for ActionScript files, in Flash Builder it works in MXML now too, yay!
  • Quick Outline – Cmd-O – quickly jump to a variable or function from here. Start typing the first few letters of what you’re looking for and select it to take you to it. This is one you should definitely take away from this post and use.
  • Quick Access – Cmd-3 – quickly execute a command or open a certain editor or view here. You can type a substring of what you’re looking for and it will show all matches, and you can even type the first letter of multiple words to bring it up, for instance if you’re looking for the Test Case Class command you could just type TCC and it will show (or tcc). Note that this camelCase typing approach works for most of the features including the code hinting. What’s really cool too is that it keeps your history, so for instance if you’re debugging an app, the Debug command will show up first in your history since it’s the last thing you used and you can quickly execute it again. I also love this feature for using the Tour de Flex Eclipse plugin view for Flash Builder, I can simply hit Cmd-3 and ‘tdf’ and it will show me that view in the popup (assuming you have installed the plugin, and if you haven’t, you should certainly do so!! Info on this plugin can be found here). Below is a screenshot this feature in use:
  • Word Completion – Ctrl-. – start typing a word and use this command (Ctrl-period) and it will guess what word you might be typing. Keep hitting it to suggest new words if it doesn’t match the first time. This works similarly to cell phone texting.
  • Fix indentation – Cmd-I – just select the block of code that needs fixing and Cmd-I will do it for you without having to manually tab.
  • Duplicates lines of code – Option(Alt)-Cmd-Up arrow
  • Move lines of code – Option(Alt)-Down or Up arrow
  • Delete line without using clipboard – Cmd-D
  • Delete last word – Cmd-Backspace
  • Quick access to definition – hold down Cmd key and highlight a function name for instance and it will turn it blue like a hyperlink and allow you to go straight to it when clicked.
  • Flash Builder built-in version control – Flash Builder actually keeps a history of your file states internally and can allow you to compare to a previous version or even revert to one using the Compare With… or Replace With… The Compare with will use an internal diff based on your current version and a version you worked on previously.
  • Set number of open editors – Flash Builder now has a setting that allows you to set a number of editors to be allowed open at any given time rather than opening an unlimited number of them. When it hits the set number it will begin closing older ones. This option is not set by default, you need to go to Window | Preferences | General | Editors and check the box and set your desired value.
  • Cycle States – Cmd-\ and Shift-Cmd-\ – when using states, this option will grey out any code not in a particular state for easier view. It will cycle to the next state or back depending on the option you choose.
  • Open Call Hierarchy – Ctrl-Option-H – shows where this function is being called from. This is useful to see how many changes would be needed for instance if you want to change or remove a function.
  • Cycle through open files/editors – Ctrl-tab – quickly hop to a different open editor. Related to this is Open Type (Shift-Cmd-T) or Open Resource (Shift-Cmd-R). These options allow you to quickly open source code files for objects in the Flex SDK or with Open Resource you can actually open any type of file.
  • Check or Modify Key Mappings – go to ‘Windows | Preferences | General | Keys’ to change your key mappings to whatever you want, or add additional ones here.

  • Generate Event Handler – if you select an event from the code hinting and hit enter you will now get an option to generate an event handler for that particular event. For instance, inline on a button, if you start typing click and select it from the intellisense popup and hit enter, you will then see an option to ‘Generate Click Handler’. If you select it, Flash Builder will add a new function to your Script block (and if there is no Script block yet will create one). Tip: set an id on your MXML component before generating event handlers and it will name the function with that id. For instance, if my button id is myBtn, the click handler generated will be myBtn_clickHandler.
  • Generate Skin Class – this option allows you to quickly create a custom Spark skin while inline on the component. While inline on a Spark component select the skinClass property and hit enter, and you will then be prompted with an option to ‘Create Skin’. If selected you will be prompted with a new dialog like this:


    Notice that you can generate a copy of the default Spark skin and then modify as needed which speeds up the process greatly. Also note the checkbox for ‘Remove Styling Code’. If you don’t need to set any exclusions for styling then you should check this box.
  • Generate item renderer – this option works similar to the above option but for creating item renderers quickly. The option is available on all components that use an itemRenderer (including MXML).
  • Code Commenting Shortcuts – to quickly comment a block of code in ActionScript, take advantage of the Cmd-/ option. For a block of MXML code use the Shift-Cmd-C. Definitely take note of these code commenting shortcuts because I find that I’m constantly using them during debugging if I need to comment something out quickly to test, or when I don’t always like to commit to a full delete of a block of code I may be changing but rather just comment it out first.
  • Generate Getter/Setter – generates getter/setter functions for variables. This is one I often used in Eclipse for Java development and I find very useful. This option is located in the ‘Source’ menu either from the main menu or right-click context menu. Note that you need to have your cursor on the line of the variable definition in order for it to work.
  • Quick Import Statement Addition – this might be the ultimate of lazy tips, but I find myself doing it all the time. If I do not know exactly which package a particular event or something is in that does not require a variable to be created (which would add the import automatically for you), or even if I do know what package it’s in but don’t want to scroll up to add it, I will simply go up a line and quickly type a variable declaration to use the code hinting to find the Class I need and let it add the import for me, then do Cmd-D to delete that line and leave the import.

Debugging Tips

  • Conditional Breakpoints – you can now set a condition on a breakpoint that will cause it to only fire a certain number of times, or based on a certain expression or boolean (for instance it will only halt at that breakpoint when a given variable is a certain value). To set a conditional breakpoint, first set a breakpoint on a line (Shift-Cmd-B), then right click and select ‘Breakpoint Properties’. You can set multiple expressions and just separate them with a comma or even modify a line of code from here without recompiling. See the Adobe TV video link I included at the bottom of this post for some interesting things you can do with this feature.
  • Watchpoints – new to Flash Builder 4 and allows you to monitor a variable instance during a debugging session. To use a watchpoint you need to set a breakpoint and when it stops at the breakpoint, go to the variables view and right click on the variable instance to toggle a watchpoint. More information about how to debug with watchpoints can be found in this article.
  • Expressions – you can actually drag any expression into this dialog directly from your code to quickly monitor that expression. Note: if you are in the editor dialog for the Expression you can type Shift-Enter to close it quickly rather than go to a newline.
  • Run to Line – Cmd-R – while in a debug session and stopped at a breakpoint, you can choose a line further in the code to run to by going to it and doing Cmd-R or right click and find ‘Run to Line’ in the context menu to continue to run to that specific line of code.
  • Network Monitoring – new to Flash Builder 4 and allows you to inspect and monitor network traffic from your Flex/AIR apps that use HTTPService, WebService, RemoteObject, URLRequest etc. It can be used to examine XML, AMF, and JSON data sent using SOAP, AMF, HTTP, and HTTPS protocols. Note: this feature requires Flash Builder Premium and does not work with SSL or Data Management services provided by LiveCycle Data Services.

Ok, so I realize that I’ve mentioned a lot of key mappings here that may be hard to remember at first, but fortunately there’s a key mapping to show the current list of key bindings quickly that you can refer to anytime in your source using Cmd-Shift-L!

Also, to find out even more tips and tricks you can do with Flash Builder, check out this Flash Builder 4 Advanced Tips and Tricks video on AdobeTV by Scott Evans from the Flash Builder team. There’s also an article on Adobe Devnet to take a look at called Flash Builder 4 Developer Productivity Improvements by Jason San Jose. He also shares tips on his blog which can be found here.

My first AIR for Android development experience

Posted in Adobe AIR, Flex/AIR with tags , , , on June 28, 2010 by devgirl

I recently got a Nexus One phone and I’m very excited about the development potential with AIR, Flash Player and Android! Since this is a whole new world to me, I thought I would write up a post summarizing my first experience with Android mobile development. I had ventured down the iPhone/Objective-C path awhile back but the syntax was so different than my Java and other development experience and with my limited time for side projects it just wasn’t working for me. Being able to leverage my ActionScript/Flex skills for the mobile world is beyond cool! Before going into the details of my first little app however, I think it’s important to go over some terminology to clear things up for those who may not know all the mobile jargon.

iPhone: a type of phone designed by Apple (multiple manufacturers). Runs the iOS Operating System, same as the iTouch and iPad. Multiple models include iPhone 3G, 3GS and the recently announced iPhone 4, which will run the iOS version 4.
BlackBerry: one of the first smartphones to become popular among business users, and developed by Research In Motion (aka: RIM). Runs a proprietary BlackBerry OS.
Nexus One: a type of phone manufactured by HTC for Google, runs the Android OS
Droid: a type of phone made by Motorola, runs the Android OS
Android: Google’s mobile OS (Operating System) originally launched in September, 2008
Eclair : The codename for Android OS version 2.1
Froyo: The codename for Android OS version 2.2 – just recently announced
HTC : a cell phone manufacturer, like Motorola
apk : An android package file extension. This is the type of file needed to install to the Android OS.
Adobe AIR 2.5 – the version of AIR that has support for Android, with tools to package apk files from the command line. With this version you can turn an AIR app into an Android app. Adobe announced the AIR for Android Public Beta program in May, here are details of the announcement.

My first app…
Since I’m a big runner, I decided it could be useful to develop a run tracker application for my phone. Serious runners tend to keep track of their mileage, pace, etc. so they can track their progress for training purposes. So with this in mind I went into Flash Builder and created my ‘RunTracker’ project. It’s made up of some tabs that allow you to input your running data and calculate pace, as well as show your history and pace trend in a simple line graph. The app uses SQLite (local database built into AIR) to save the run data. Here are a few screen shots taken from the Android emulator. The code for the project and the 2.1 (Eclair) and 2.2 (Froyo) versions of the apk are located here for reference. The Froyo version was built as a debug version (see notes about debug below).



A quick summary of the steps is outlined below. More can be found in the developer documentation at the AIR for Android Public Beta site. The Developing_AIR_apps_for_Android.pdf is a must read document and outlines all of the steps in depth. There’s also a great article by Christian Cantrell on Adobe Devnet that goes into designing apps for multiple platforms and screen resolutions that is worth a read here too.

1) Download the AIR 2.5 SDK and Android tools. Everything you need can be found in the documentation once you sign up for the AIR for Android public beta.

2) Create your AIR app to be used for mobile. NOTE: You need to change the WindowedApplication to an Application tag and then be sure to set visible to true in your app-descriptor.xml file, for example:

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

The following icon sizes should also be specified for low, medium, and high density screens respectively. This is the icon that will show on your phone menu.

    <icon>
          <image36x36>assets/icon36.png</image36x36>
          <image48x48>assets/icon48.png</image48x48>
          <image72x72>assets/icon72.png</image72x72>
   </icon>

3) Package your application using the adt command line tool and package an AIR application for Android. For example:
adt -package -target apk -storetype pkcs12 -keystore ../../myCert.p12 RunTracker.apk RunTracker-app.xml RunTracker.swf assets/runner72.png

UPDATE: If you want to create a debug version of your application so you can see errors and stack traces, you need to add -debug to the target such as:

adt -package -target apk-debug -storetype pkcs12 -keystore ../../myCert.p12 RunTracker.apk RunTracker-app.xml RunTracker.swf assets/runner72.png

Then install your apk to the device and while connected run the following command from the command line:
adb logcat

Then run the app in the device and you should see the trace of what’s happening in the console.

4) Install it to either the Android emulator or your smartphone device. NOTE: The emulator is VERY SLOW. I would HIGHLY recommend using a phone if you have one. I almost gave up on AIR for Android development when I had only tried the emulator because of the performance, but it’s a whole different experience when installing to your phone so don’t be dismayed! You can use the -r option to reinstall it after the first time. Make sure to exit out of the application before doing the re-install. You can specify a -d for the phone or -e for the emulator, but if you only have one of them connected or running it will use that one by default. For instance, since I have my phone connected and my emulator running, I would use this option to install to my phone only:

adb -d install -r RunTracker.apk

Also, as part of the development I noticed a few things to point out. Certain components don’t work so well out of the box without some tweaking. For instance on the Spark NumericStepper, the default arrow buttons were much too small to click on easily on the Nexus One. I decided to take advantage of the Flex 4 skinning features and create a custom skin for my NumericStepper with increment and decrement buttons that used icons and were bigger than the default ones. Since by default the keyboard would pop up on the Android device when the user clicked into the NumericStepper (so numbers can be entered versus using the arrow keys), I also added a restrict property to the TextInput part of my custom NumericStepper that would restrict the entered values to numeric only.

There are more features I plan to add to this little app, (geolocation APIs to actually track the run etc) and I’ll continue to play around with things as the AIR for Android features progress, but it was fun to get my feet wet and see what it was about. I encourage you to do the same. And if you’re a runner too, grab the apk and try it out!

Adobe AIR 2.0 Release Official!

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

Adobe AIR 2.0 was officially released today by Adobe. What does that mean to you as a developer? If you haven’t checked out the latest features in AIR 2.0 or Adobe AIR at all, now is the time! Adobe AIR allows you to build Rich Internet Applications (RIA’s) for the desktop. It offers all the benefits of an RIA outside the confines of a browser and provides access to the File System, local database (SQLite), online/offline capabilities and more. The version 2.0 released today adds native process support, multi-touch and gesture handling, microphone capabilities, socket communication and other important features worth checking out. I recently worked on a bunch of samples for Tour de Flex that show off many of the new features in Adobe AIR 2, they can be found here.

The Adobe AIR runtime and SDK are both downloadable for free. AND… one of the most exciting and compelling reasons you should make it a point to start building apps with AIR is that you will soon be able to go mobile! Check out the AIR for Android program to see how you can write AIR apps that run natively on your Android device! I’ve built a couple of apps myself for my Nexus One and I’m personally very excited about how easy it is. You can have the same application running from your desktop that could be communicating with a LiveCycle Data Services server or BlazeDS ported over to your mobile device in minutes. An example of one such application can be found here.

You can also check out the Adobe AIR Marketplace to find oodles of AIR apps for download.

Flex 4 and the Text Layout Framework

Posted in Flash, Flex 4, Flex/AIR, Text Layout Framework with tags , , , , on April 26, 2010 by devgirl

One of my favorite things about Flex 4 is that it now includes the Text Layout Framework (TLF) as the basis of many Spark text components such as RichText, RichEditableText, TextArea, and TextInput as well as any other components that utilize any of these as part of another component, such as the ComboBox, which includes a TextInput control for example. You now have fine-grained control over text and text flow and can do some really amazing things with your UIs. This framework is extensive and I recently took some time to go through it all while building samples for Tour de Flex. I’d like to share some information I gathered while doing so.

The Text Layout Framework is included in Flex 4 via the textLayout.swc. This swc contains three combined SWC’s including:
• textLayout_core
• textLayout_conversion
• textLayout_edit

The textLayout_core component is the main component for the framework and handles storage and display of text.
The textLayout_conversion component is used for import/export of text and is necessary if you use text that is not compiled directly into the SWF.
The textLayout_edit component provides the editing libraries needed for selection, editing (cut/copy/paste) and undo capabilities.

This framework can be understood better when looking at it from an MVC standpoint. The packages that make up each part are listed below:

Model

  • flashx.textLayout.elements.* (classes for data structure definition)
  • flashx.textLayout.formats.* (classes for formatting properties)
  • flashx.textLayout.conversion.* (classes for import/export)

View

  • flashx.textLayout.factory.*
  • flashx.textLayout.container.*
  • flashx.textLayout.compose.*

Controller

  • flashx.textLayout.edit.*
  • flashx.textLayout.operations.*

Importing Text
In many cases you will need to import text into the framework. This can be especially useful for importing dynamic text that is returned from a remote service or HTTPService at runtime for instance. You can choose from three different conversion options for import/export of text in general. They are:

TextConverter.TEXT_LAYOUT_FORMAT – convert to/from the text layout markup format
TextConverter.PLAIN_TEXT_FORMAT – convert to/from a plain text string
TextConverter.TEXT_FIELD_HTML_FORMAT – convert to/from HTML (subset of HTML supported – see here for details)

The following example shows how to use the TLF markup language itself within some text and then import it into the framework for managing the display:

private static const textInput:XML = <TextFlow xmlns="http://ns.adobe.com/textLayout/2008">
	<div>
	<p color="0x336699"><span>The Text Layout Framework is an extensible library, built on the new text engine in Adobe Flash Player 10, which delivers advanced, easy-to-integrate typographic and text layout features for rich, sophisticated and innovative typography on the web. 
	</span></p>
	</div>
	</TextFlow>;
			
private var _textFlow:TextFlow;
var importer:ITextImporter = TextConverter.getImporter(TextConverter.TEXT_LAYOUT_FORMAT);
textFlow = importer.importToFlow(textInput);

You could also do something like the following with plain text. Note that this example specifies the format directly on the import method, whereas the code above retrieved an import filter first with a call to getImporter(). If you want to catch errors on the conversion then you would use the one that gets the import filter first such as above.

private static var myText:String = "Hello World";			
private var _textFlow:TextFlow;
textFlow = importer.importToFlow(myText,TextConverter.PLAIN_TEXT_FORMAT);

You can export your text to those same formats. An example of exporting text to the Text Layout Framework markup is shown here:

TextConverter.export(customEditor.editor.textFlow,
TextConverter.TEXT_LAYOUT_FORMAT,
 ConversionType.STRING_TYPE);

Applying this to Flex 4 controls, you could use any of the TLF-based controls’ textFlow property and set that value to the imported String result. The following code snippet shows how this is done:

	<fx:Declarations> 
		<!-- Define a String to use with HTML and plain text format. --> 
		<fx:String id="htmlTxt"><![CDATA[<p>Text containing <b>HTML</b> markup</p>]]></fx:String> 
		
		<!-- Define an XML object to use with TLF format. --> 
		<fx:XML id="tfTxt"> 
			<TextFlow xmlns="http://ns.adobe.com/textLayout/2008"> 
				<p>Text Using  <span fontWeight="bold">Text Layout Framework</span> Markup</p> 
			</TextFlow> 
		</fx:XML> 
	</fx:Declarations> 
	<s:TextArea id="txt1" width="200" height="50"
						textFlow="{TextConverter.importToFlow(htmlText, TextConverter.TEXT_FIELD_HTML_FORMAT)}" 
						horizontalCenter="0" verticalCenter="0" /> 
	<s:RichText id="txt3" width="200" height="50"
						textFlow="{TextConverter.importToFlow(tfText, TextConverter.TEXT_LAYOUT_FORMAT)}" 
						horizontalCenter="0" verticalCenter="0" /> 

You can also use the TextFlowUtil class to import a String into a Flex 4 TLF-based component as in the following code snippet:

		var markup:String = "<TextFlow xmlns='http://ns.adobe.com/textLayout/2008'><p fontFamily='Arial'>This is TLF markup with paragraphs.</p><p color='0x663399'>The root TextFlow tag is included.</p></TextFlow>"; 
		rt1.textFlow = TextFlowUtil.importFromString(markup);
			
		<s:TextArea id="rt1" width="300" height="50"/>

Note that you can even omit the TextFlow root and namespace and simply start with the paragraph tag and the TextFlow root and namespace will be added for you; for example:

		var markup:String = "<p color='0xCE267D'>This is TLF markup with paragraphs.</p><p fontSize='10' fontWeight='bold' fontFamily='Arial'>The root TextFlow tag is omitted and therefore created automatically.</p>"; 
		rt1.textFlow = TextFlowUtil.importFromString(markup);
		
                <s:RichText id="rt1" width="200"/>

There are some important classes that are key to the framework:

TextFlow
Represents the text itself and can contain either ParagraphElement (p) or DivElement (div). DivElement can be a group of ParagraphElements. ParagraphElement (p) can contain span, inline image, link or tcy elements (for Japanese text handling). The following picture is from the Adobe SDK docs and helps explain the relationship hierarchy further:

The TextFlow can contain multiple containers and each container is associated with a ContainerController.

ContainerController
A controller is associated with each container that is being used to display text (manages a Sprite for instance). The controller is used to control how the text is going to flow between containers. Here is another image from the Flex 4 SDK docs that I believe helps explain this nicely:

IFlowComposer
The IFlowComposer interface is implemented by the StandardFlowComposer and manages the conversion of the text into TextLine objects and placement of the text in the containers. The updateAllControllers() net must be called on this object to lay out the text and add update the display when any settings have been changed.

For instance:

textFlow.fontSize = 11;
flow.flowComposer = new StandardFlowComposer();
textFlow.flowComposer.updateAllControllers();

TextLayoutFormat
Formatting of text can be done in multiple ways, either at the container, paragraph, or character level. It’s done by using either a TextLayoutFormat object, which contains all of the properties that can be set, or by setting the specific properties on the TextFlow object. If you use the TextLayoutFormat object, you then assign it to the format property of the TextFlow object:

var tlf:TextLayoutFormat = new TextLayoutFormat();
tlf.fontSize =11;
tlf.direction = Direction.RTL;
tlf.columnCount = 3;
tlf.columnGap = 15;
textFlow.format = tlf;				

If you are only changing one attribute, you can do so on the TextFlow object directly as well:

textFlow.fontSize = 11;

The following sample code snippets show some specific techniques you might want to use with this framework:

Directional Text

textFlow.direction = Direction.RTL; // right-to-left text

Inline Images
You can display an inline image in your text with something like the following:

[Embed(source="adobe_air_logo.png")]
[Bindable]
static public var imgClass:Class;

var p:ParagraphElement = new ParagraphElement();
var inlineGraphicElement:InlineGraphicElement = new InlineGraphicElement();
inlineGraphicElement.source = imgClass;
inlineGraphicElement.width=32;
inlineGraphicElement.height=32;
p.addChild(inlineGraphicElement);
textFlow.addChild(p);

Selecting/Editing Text
You can create an EditManager with an UndoManager if you would like to use selection, editing, and undo capabilities. If you only need to support selection, you can use the base SelectionManager class. Below is code that shows how to set up the code to handle editing/undo. See the FlowOperation class docs for more information on the types of operations that can be handled. The new Tour de Flex sample shows how to do selection, undo, and redo of text so check that out for more information.

textFlow.interactionManager = new EditManager(new UndoManager());		

A great example of the Text Layout Framework in use is the New York Times Adobe AIR application. If you haven’t downloaded this app yet, I highly recommend it, and it’s FREE!

And finally some links for further information:
Tour de Flex TLF Samples
Text Layout Framework Team Blog – great examples here too!
InsideRIA article by Elad Elrom on MXML and TLF
Text Layout Frameworks on Adobe Labs
Try out TLF with an online editor

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.4.0.0.13495.swz
  • 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-->
   	<runtime-shared-library-path>
		<path-element>libs/spark.swc</path-element>
		<rsl-url>http://fpdownload.adobe.com/pub/swz/flex/4.0.0.14159/spark_4.0.0.14159.swz</rsl-url>
		<policy-file-url>http://fpdownload.adobe.com/pub/swz/crossdomain.xml</policy-file-url>
		<rsl-url>spark_4.0.0.14159.swz</rsl-url>
		<policy-file-url></policy-file-url>
	</runtime-shared-library-path>

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-->
   	<runtime-shared-library-path>
		<path-element>libs/spark.swc</path-element>
		<rsl-url>http://fpdownload.adobe.com/pub/swz/flex/4.0.0.14159/spark_4.0.0.14159.swz</rsl-url>
		<policy-file-url>http://fpdownload.adobe.com/pub/swz/crossdomain.xml</policy-file-url>
		<rsl-url>http://tdfserver/RSL/spark_4.0.0.14159.swz</rsl-url>
		<policy-file-url></policy-file-url>
	</runtime-shared-library-path>

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 flex.org 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!