Archive for Flex 4

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:

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

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!

Flex 4 Resources – Samples and Links!

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

Today we are rolling out the first batch of new Flex 4 samples based on the recent **Flex 4 SDK (update: as of 10/1/2009, all have been updated to work with the latest version of the SDK beta 2 released at MAX). Tour de Flex had a Flex 4 Preview category previously, but the samples were based on a very early build of Flex 4 and much as changed since then so many were no longer valid.

We recently spent some time with members of the Flex 4 team in San Francisco to get an idea of what had changed, what’s coming, etc and I’ve been working on creating new samples to help show off some of the new features. Many more are in the works and will be rolled out weekly while Flex 4 is under continued development, so stay tuned for tons more!

The Flex 4 team is working hard at addressing concerns previously raised and I think people will find a lot of really cool stuff to come here. Be sure to check out the readme’s in the various categories with the samples as well as the one in the top Flex 4 Preview folder. I’ve included some very helpful links that can make the transition so much less painful if you take the time to check them out. I think it is key in overcoming the learning curve quickly. I would also highly recommend spending some time going through the source code in the Flex 4 SDK to understand the architecture better. It was a huge help to me in coming up to speed with it overall. To get the very latest SDK and docs, check here for nightly builds.

If you have specific requests for a certain sample let me know, or if you’d like to contribute a sample feel free to contact myself or Greg Wilson with the sample you’d like to add. Also, if you have any issues with any sample or questions while trying Flex 4, feel free to contact me here on my blog, twitter or email and I will see if I can help you out 🙂

Flex 4 – Useful Links

  • What’s new in Flex 4
  • Differences Between Flex 3 and Flex 4
  • Flex 4 Livedocs (may not be most current)
  • Flex Examples (Peter DeHaan)
  • What’s New and Cool in Flex 4?
  • Flex 4 Overview (InsideRIA)
  • Flex 4 Overview Slides
  • Introduction to Flex 4 Skinning
  • Skinning Components and Applications in Flex 4 – Video
  • Skinning and Components in Flex 4’s Spark Architecture
  • Flex 4 Spark Skinning Post
  • Various Skinning Examples
  • Flex 4 Effects Part 1
  • Flex 4 Effects Part 2
  • Effects in Flex 4 Video
  • Stretch and Squash Effects in Flex 4
  • Spark Layouts
  • Spark Horizontal and Vertical Layouts
  • Flex 4 and Custom Layouts
  • Flex 4 Layouts Video
  • Spark Virtualization
  • Flex 3 versus Flex 4 State Management
  • Flex 4 States Video Tutorial
  • Advanced CSS Video
  • Flex 4 CSS Namespaces
  • Flex 4 – CSS Advanced Selectors
  • FXG 1.0 Specification
  • Text Layout Framework (TLF)
  • Text Layout Framework Overview Slides
  • Linked Containers in Flex 4 using Text Layout Framework
  • I will continue to update this list. Please feel free to comment with your favorites!

    Also, please note, the Tour de Flex samples are best viewed in the AIR version of Tour de Flex. When using the web version, we recommend hitting the expand button in the top right corner to see the full sample better. Sizing issues are currently being worked on.