How does MXML and Actionscript 3 relate?

[grandpaw broon]

Hi all,

I have been using Flex Builder for a while now, infact since i started coding in AS3 Projects.

One of the fundamental issues i have from experience of trying flex, is i dont see how MXML tags and AS3 is related.

Can someone try to explain to me from an Actionscript perspective?

If i create a PixelBackgroud.as class which extends sprite and draws a random pattern, then how can flex use that class? Does it automatically become <PixelBackground /> ?

[justkevin]

MXML gets turned into objects during build and do not produce anything that cannot be replicated in pure Actionscript, but simplify the design process by using a markup.

Flex can use any AS3 code you create, but you can't necessarily use your class as MXML. To use it as an MXML object, it must extend an existing MXML class or implent the IMXMLObjecct interface (which Sprites do not).

There are three ways of extending MXML with AS3: Code inside, code beside and code behind. (http://v2.flexcoders.nl/2008/11/02/code-inside-code-beside-and-code-behind/)

To add your PixelBackground.as class to an MXML component, I would create a custom MXML component based on <mx:Canvas> and add the PixelBackground as a member variable that's added to the rawchildren on creation complete.

I've been working with Flex for a little while and find it very confusing. There are lot of things that can trip you up, such as deferred instantiation, the many different ways to write the same thing, databinding and adding non-MXML display objects to MXML display objects.

[grandpaw broon]

Thanks kevin.

I am going to have a look at that link.

You hit the nail on the head though. I have used databinding in a Flex Tutorial and its almost like adding event listeners... but not. It seems like i should have started learing Flex then moved on to AS3 and not the other way around!

Im going to fire up Flex today and see whats going on.

Cheers,

[wvxvw]

Just some clarification: mxmlc compiler (the compiler you use in Flex to compile SWFs) is first generating AS files from MXML and then compiles those AS files. To see how those files look like add -keep to the custom compiler arguments. This should create "generated" folder with your former MXML files converted to AS (they'll have -generated affix, i.e. if your MXML file is called Foo.mxml, then the class in generated folder will be Foo-generated.as, you cannot compile these files unless you rename them - remove the affix, they are just for debugging / understanding what's going on inside).

[grandpaw broon]

There is like 30 .as files for a blank MXML application. Thats crazy!

[wvxvw]

There should be more than that (like 32 or 34 :) ) if you compile the "blank" mx:Application.
Here's the complete list (+ there may be some classes in the dependencies of those imported + some private classes those classes may eventually use):

import mx.binding.ArrayElementWatcher; ArrayElementWatcher;
import mx.binding.BindabilityInfo; BindabilityInfo;
import mx.binding.EvalBindingResponder; EvalBindingResponder;
import mx.binding.FunctionReturnWatcher; FunctionReturnWatcher;
import mx.binding.IBindingClient; IBindingClient;
import mx.binding.IWatcherSetupUtil; IWatcherSetupUtil;
import mx.binding.PropertyWatcher; PropertyWatcher;
import mx.binding.RepeatableBinding; RepeatableBinding;
import mx.binding.RepeaterComponentWatcher; RepeaterComponentWatcher;
import mx.binding.RepeaterItemWatcher; RepeaterItemWatcher;
import mx.binding.StaticPropertyWatcher; StaticPropertyWatcher;
import mx.binding.XMLWatcher; XMLWatcher;
import mx.binding.utils.BindingUtils; BindingUtils;
import mx.binding.utils.ChangeWatcher; ChangeWatcher;
import mx.controls.Alert; Alert;
import mx.controls.videoClasses.CuePointManager; CuePointManager;
import mx.core.BitmapAsset; BitmapAsset;
import mx.core.ButtonAsset; ButtonAsset;
import mx.core.ByteArrayAsset; ByteArrayAsset;
import mx.core.ClassFactory; ClassFactory;
import mx.core.CrossDomainRSLItem; CrossDomainRSLItem;
import mx.core.DeferredInstanceFromClass; DeferredInstanceFromClass;
import mx.core.DeferredInstanceFromFunction; DeferredInstanceFromFunction;
import mx.core.FlexLoader; FlexLoader;
import mx.core.FontAsset; FontAsset;
import mx.core.IDeferredInstance; IDeferredInstance;
import mx.core.IUID;
import mx.core.MovieClipAsset; MovieClipAsset;
import mx.core.MovieClipLoaderAsset; MovieClipLoaderAsset;
import mx.core.MXMLObjectAdapter; MXMLObjectAdapter;
import mx.core.SimpleApplication; SimpleApplication;
import mx.core.SoundAsset; SoundAsset;
import mx.core.TextFieldAsset; TextFieldAsset;
import mx.effects.easing.Back; Back;
import mx.effects.easing.Bounce; Bounce;
import mx.effects.easing.Circular; Circular;
import mx.effects.easing.Cubic; Cubic;
import mx.effects.easing.Elastic; Elastic;
import mx.effects.easing.Exponential; Exponential;
import mx.effects.easing.Linear; Linear;
import mx.effects.easing.Quadratic; Quadratic;
import mx.effects.easing.Quartic; Quartic;
import mx.effects.easing.Quintic; Quintic;
import mx.effects.easing.Sine; Sine;
import mx.events.ModuleEvent; ModuleEvent;
import mx.graphics.ImageSnapshot; ImageSnapshot;
import mx.graphics.codec.PNGEncoder; PNGEncoder;
import mx.graphics.codec.JPEGEncoder; JPEGEncoder;
import mx.logging.ILogger; ILogger;
import mx.logging.Log; Log;
import mx.logging.targets.TraceTarget; TraceTarget;
import mx.managers.DragManager; DragManager;
import mx.modules.IModuleInfo; IModuleInfo;
import mx.modules.Module; Module;
import mx.modules.ModuleBase; ModuleBase;
import mx.modules.ModuleLoader; ModuleLoader;
import mx.modules.ModuleManager; ModuleManager;
import mx.preloaders.DownloadProgressBar; DownloadProgressBar;
import mx.printing.FlexPrintJob; FlexPrintJob;
import mx.resources.Locale; Locale;
import mx.rpc.IResponder; IResponder;
import mx.skins.Border; Border;
import mx.skins.halo.AccordionHeaderSkin; AccordionHeaderSkin;
import mx.skins.halo.ActivatorSkin; ActivatorSkin;
import mx.skins.halo.ApplicationBackground; ApplicationBackground;
import mx.skins.halo.BrokenImageBorderSkin; BrokenImageBorderSkin;
import mx.skins.halo.BusyCursor; BusyCursor;
import mx.skins.halo.ButtonBarButtonSkin; ButtonBarButtonSkin;
import mx.skins.halo.ButtonSkin; ButtonSkin;
import mx.skins.halo.CheckBoxIcon; CheckBoxIcon;
import mx.skins.halo.ColorPickerSkin; ColorPickerSkin;
import mx.skins.halo.ComboBoxArrowSkin; ComboBoxArrowSkin;
import mx.skins.halo.DataGridColumnResizeSkin; DataGridColumnResizeSkin;
import mx.skins.halo.DataGridHeaderBackgroundSkin; DataGridHeaderBackgroundSkin;
import mx.skins.halo.DataGridHeaderSeparator; DataGridHeaderSeparator;
import mx.skins.halo.DataGridSortArrow; DataGridSortArrow;
import mx.skins.halo.DateChooserIndicator; DateChooserIndicator;
import mx.skins.halo.DateChooserMonthArrowSkin; DateChooserMonthArrowSkin;
import mx.skins.halo.DateChooserYearArrowSkin; DateChooserYearArrowSkin;
import mx.skins.halo.DefaultDragImage; DefaultDragImage;
import mx.skins.halo.HaloBorder; HaloBorder;
import mx.skins.halo.HaloColors; HaloColors;
import mx.skins.halo.HaloFocusRect; HaloFocusRect;
import mx.skins.halo.SliderHighlightSkin; SliderHighlightSkin;
import mx.skins.halo.SliderThumbSkin; SliderThumbSkin;
import mx.skins.halo.SliderTrackSkin; SliderTrackSkin;
import mx.skins.halo.LinkButtonSkin; LinkButtonSkin;
import mx.skins.halo.LinkSeparator; LinkSeparator;
import mx.skins.halo.ListDropIndicator; ListDropIndicator;
import mx.skins.halo.MenuBarBackgroundSkin; MenuBarBackgroundSkin;
import mx.skins.halo.NumericStepperDownSkin; NumericStepperDownSkin;
import mx.skins.halo.NumericStepperUpSkin; NumericStepperUpSkin;
import mx.skins.halo.PanelSkin; PanelSkin;
import mx.skins.halo.PopUpButtonSkin; PopUpButtonSkin;
import mx.skins.halo.PopUpIcon; PopUpIcon;
import mx.skins.halo.PopUpMenuIcon; PopUpMenuIcon;
import mx.skins.halo.ProgressBarSkin; ProgressBarSkin;
import mx.skins.halo.ProgressIndeterminateSkin; ProgressIndeterminateSkin;
import mx.skins.halo.ProgressMaskSkin; ProgressMaskSkin;
import mx.skins.halo.ProgressTrackSkin; ProgressTrackSkin;
import mx.skins.halo.RadioButtonIcon; RadioButtonIcon;
import mx.skins.halo.ScrollArrowSkin; ScrollArrowSkin;
import mx.skins.halo.ScrollThumbSkin; ScrollThumbSkin;
import mx.skins.halo.ScrollTrackSkin; ScrollTrackSkin;
import mx.skins.halo.TabSkin; TabSkin;
import mx.skins.halo.TitleBackground; TitleBackground;
import mx.skins.halo.ToolTipBorder; ToolTipBorder;
import mx.skins.ProgrammaticSkin; ProgrammaticSkin;
import mx.skins.RectangularBorder; RectangularBorder;
import mx.styles.IStyleModule; IStyleModule;
import mx.utils.ArrayUtil; ArrayUtil;
import mx.utils.DescribeTypeCache; DescribeTypeCache;
import mx.utils.DescribeTypeCacheRecord; DescribeTypeCacheRecord;
import mx.utils.DisplayUtil; DisplayUtil;
import mx.utils.XMLUtil; XMLUtil;
import mx.utils.Base64Decoder; Base64Decoder;
import mx.utils.Base64Encoder; Base64Encoder;
import mx.validators.Validator; Validator;
Also, you won't see them all in the "generated" folder because some of them are marked as [Exclude]'d - this will prevent from appearing in "generated as well as prevent from documenting them.
This is because it will show you everything you compile into your SWF. So, this may be a first step in better understanding of how the framework is built ;)

[grandpaw broon]

It certainly is!

Thanks for the tips.