Archive for the Adobe Flex Category

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!

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

Layouts
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 FlexLayouts.org 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="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	
	<s:Scroller width="300" height="300">
		<s:Group> 
			<mx:Image width="300" height="300"
					  source="@Embed(source='logo.png')"/> 
		</s:Group>                 
	</s:Scroller>
</s:Application>

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="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	
	<s:Scroller width="150">
		<s:Group> 
			<mx:Image width="300" height="300"
					  source="@Embed(source='logo.png')"/> 
		</s:Group>                 
	</s:Scroller>
</s:Application>


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" />
</s:Scroller>

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="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx">
	<s:layout>
		<s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
	</s:layout>
	
	<!-- 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."/>
	</s:SkinnableContainer>
	
	<!-- 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:layout>
			<s:VerticalLayout horizontalAlign="center" paddingTop="30"/>
		</s:layout>
		<s:Label text="VerticalLayout that specifies where the label is placed with properties."/>
	</s:SkinnableContainer>
</s:Application>

• 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="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx">	
	<s:layout>
		<s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
	</s:layout>
	<s:BorderContainer borderColor="red" borderWeight="5" width="300" height="300"/>
</s:Application>

The result:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx">	
	<s:BorderContainer borderColor="red" borderWeight="5" width="300" height="300" horizontalCenter="0" verticalCenter="0"/>
</s:Application>

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 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 🙂



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 YouTube API and Player Samples

Posted in ActionScript, Adobe Flex, Flex/AIR, Tour de Flex with tags , , , , , on January 25, 2010 by devgirl

Over the weekend I worked on some samples for Tour de Flex to show how you can interface with the YouTube APIs using Flex and ActionScript. I created four samples showing different ways to do this that you can see in tabs across the top of the YouTube sample in Tour de Flex. The details for these samples are listed below:

  1. Simple Service – this is a basic sample that shows how you can use to query the YouTube API available on Google Code. The results are returned in JSON format and deserialized using the as3corelib.swc available here. The as3corelib.swc is also included in the downloaded code from Tour de Flex. Feel free to play around with changing the HTTPService URL to another type of query with other parameters based on what is listed in the Google Code API reference to get back various types of data including user profile data, categories of videos, comments etc.

    Note: The next 3 samples used an ActionScript API to wrap the YouTube requests/responses and make them easier to work with. That API was written by Martin Legris and includes iterators for all of the different objects that might be returned (categories, authors, comments, links, etc…). I recommend checking out his blog as well, there’s a lot of useful information and resources there.

  2. Video Comments – this sample shows how you can interface with YouTube and get the comments for a selected video. Simply click an item in the grid and hit Show Comments to view the comments for that particular video. Double clicking the video will bring it up in the YouTube website.
  3. Search Favorites – this sample allows you to search the favorites of a given userid. Once the favorites are shown, you can then also view the comments for that particular video in the same way as above. Note: certain userid’s may have privacy settings that will block the call and not return any results.
  4. Embed Player – this sample shows how you can not only search YouTube, but also embed their video player in you code and interact with it to do things like set the quality of the video, cue a video, play, pause, stop etc. Once you search for a video, click it to see the player show within the sample. For more information about this player API, go here.

These samples are now available in Tour de Flex under the Cloud APIs folder so definitely check them out! It was quite fun to play around with these :). If you have any questions or issues let me know and I’ll see what I can do to help!

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 :).