Converting MXML Components to ActionScript Classes

I'm in the process of converting most (if not all) of my MXML
components to Action Script classes. I've found this is easy, and
doesn't require a lot of extra code when extending a simple
container or control. However, several of my MXML components have
several nested containers and controls - i.e. a component that
contains several Labels, a ComboBox, a TextInput, a Button, and a
DataGrid, plus several other containers needed for layout. To code
the layout of all these containers and controls using MXML, it uses
about 16 lines of code. To code the layout in ActionScript, it
takes about 50+ lines of code (see attached).
I'm just wondering if there are any best practices for
creating ActionScript classes that include several (or even A LOT
OF) containers and controls. It's very easy to layout in MXML, and
is more visibly pleasing to look at and understand, but I feel it
is best practice to code components as ActionScript classes. I know
I should be using MVC, but it's a little late to rewrite the entire
application now.
Any thoughts?

I can't specifically speak to how to write layout code in
ActionScript, but you can look at the generated code that Flex
creates to get an idea of how Flex does it. When you compile an
app, the Flex compiler takes your MXML input and converts it to
ActionScript classes before compiling the entire set of classes
into a SWF. Because of this, you can look at the interim
ActionScript code.
You do this by setting the keep-generated-actionscript
compiler option to true and looking in the /generated directory.
hth,
matt horn
flex docs

Similar Messages

How to Access MXML components from ActionScript class

Hi ,
I am having a Application Conataner , in which i am having a Form Container with some Label in it .
This is some thing similar to this as shown :
<Mx:Application>
<Mx:Form>
<Mx:Label text="Hello world"/>
</Mx:Form>
</Mx:Application>
Can any body please let me know how can i access this Form's Label , from an ActionScript class .
catch(error:*)
// Here i want to access these Objects and set data to that Label .
Basically My requirement is that iinside the catch block of my ActionScript class , i want to set some text to the Label , Please
let me know if this is possible or not also ??
Waiting for your Replies .

Hi these both are not same these refer to different one...
Well let me explain...
Application.application.myCustomComp.myLabel.text = "sometext"; sets the label "myLabel" which is present inside your customcomponent(which is in main application).
Application.application.myLabel.text = "sometext"; sets the label "myLabel" which is present directly inside your main application.
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Label id="myLabel" text=""/> // So inorder to set the label(myLabel) present here you will use directly the 2nd line of code.
<mx:CustomComp id="myCustomComp" /> // So inorder to set the label(myLabel) present inside this component you use 1st line of code.
</mx:Application>
Hope now its clear.
If this post answers your question or helps, please kindly mark it as such.
Thanks,
Bhasker Chari

MXML Components and ActionScript Classes

Hello,
I am fairly new to Flex and OOP and am confused on how some parts of OOP work.
I have a Spark TextInput Component with an id which equals "test".
I also have a function that takes "test.text", appends a string to and and puts the resulting value into another TestInput called test2.
How can I move the "appendPhrase()" function into a class so that it would still accept values from "test" and change the "text2" values?
I tried creating a function that would assign the value of the varaible in the class using classname.variable name, made it bindable, and assigned
the text value of the textinput that value, but I was wondering if there was any other way I could do that?
~~~~~~~~~~~~~~~~Version1~~~~~~~~~~~~~~~~~~~~~
<fx:Script>
    private function appendPhrase():void
        test2.text = test.text + " was added";
</fx:Script>
<s:TextInput x="0" y="0" id="test" />
<s:TextInput x="0" y="10" id="test2" />
<s:Button click="appendPhrase();" />
~~~~~~~~~~~~~~~~~~Version 2:~~~~~~~~~~~~~~~~~
function in class:
public class ChangeString
    [Bindable]
    public var text:String;
    private function appendPhrase(firstString:Object):void
       text = firstString.text + " was added";
main.mxml:
[Bindable]
public var changed:Object = new ChangeString();
<s:TextInput x="0" y="0" id="test" click="changeValue(test.text)" />
<s:TextInput x="0" y="10" id="test2" text="{changed.text}"/>

package models
          [Bindable]
          public class MyViewModel
                    public var text:String "Hello ";
                    public function appendText(t:String):String
                              this.text = this.text + t;
                              return this.text;
<fx:Script>
<![CDATA[
import models.MyViewModel;
[Bindable]
public var model:MyViewModel = new MyViewModel();
]]>
</fx:Script>
<s:TextInput id="test" x="0" y="0" click="this.model.appendText(this.test.text)" text="World" />
<s:TextInput id="test2" x="0" y="10" text="{this.model.text}" />
I would go about it a little differently maybe. I would use the model class as a data holder, and use a private local method, utility class, or controller class to modify values on the model (data holder class).

Dynamically add custom MXML components in Actionscript

As there's no constructor for custom MXML components, how to
dynamically add it as a child using ActionScript?
I'm looking for some alternative to avoid the need to rewrite
the entire existent component in ActionScript just to add it this
feature (a constructor). PopManager is not an alternative...
Is there any way?
The case/situation:
I have a custom MXML component that needs to be dinamically
added to a NativeWindow created using ActionScript.
Thanks a lot!
Vicente Junior
Independent Web Developer
http://teclandoalto.blogspot.com

mxml classes get generated into AS classes with a default
constructor.
In fact, there is essentially no difference between an AS
component and an mxml component, they can be used exactly the same
way.
Tracy

Accessing MXML ArrayCollection from ActionScript class?

I have an MXML file that has an arraycollection for my Tree
component. I am overriding the updateDisplayList function in order
to add lines to all of my nodes in the Tree.. however I can't seem
to figure out how to access that ArrayCollection from inside the
actionscript class?
I have tried the methods used to pass variables between two
MXML files (like a popup window - which I have used in the past and
it works great).
My actionscript class code is almost identical to this
example here:
http://www.iepl.net/treeControlSample/treeControlSample.html
In the above example the data is static, but my data is going
to change sometimes and I need access to the entire dataProvider
(ArrayCollection) in order to make the lines work right.. this has
been very frustrating for me! :)
if anyone knows of a better way to achieve gettign lines to
the siblings in a Tree.. please let me know!
Any help would be super duper awesome!

I have found the solution to this. My problem was similar to
the one cheftimo was having in this post:
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=60&catid=585&threadid =1367784&enterthread=y
The answer is to import mx.core.Application into the
component you are trying to access the variable from and then call
it by using 'Application.application.<var name>'
Thanks to Greg Lafrance!

Accesing mxml components from AS class

Hello,
on a CS6 <csxs:CSExtension> how do I refer to a component (say, a Button with id="myButton") in the main view from an Actionscript class?
The equivalent mx: way highlighted here: http://livedocs.adobe.com/flex/3/html/help.html?content=app_container_3.html)
TIA,
Davide

Apparently, the correct way is: FlexGlobals.topLevelApplication
(it seems like FB has some problems with both com.adobe.photoshop.Application and mx.core.Application.application in the same class - at least it fired a bunch of weird errors to me)
Davide

Mxml components not compiled into swc?

Hi, I am using Flash Builder(Flex 4) and i am having issues compiling mxml components into swc.
My scenario:
I created Flex Library project, added some mxml components and actionsript classes.
I created separate Flex project and added swc file to project's library path.
I can only import actionscript classes from my library.
ActionScript classes are compiled and bundled in the swc as expected, but all mxml components are not compiled into the swc.
Do you have the same issues compiling mxml components?
I am using Flash Builder Version 4.0 (build 253292).

My team occasionally sees issues with missing classes in a similar setup, although I can't confirm that it has been limited to MXML (and no one has been able to reliably reproduce).
I suspect our problem is the "includeAllClasses" property in .flexLibProperties (Project->Properties->Flex Library Build Path->Classes->Include all classes from all source paths)--it seems to not reliably compile in newly added classes. Our workaround right now is to instead click "Select classes to include in the library" and toggle our source directory every time classes are added, at least until we script our own build tasks. Looking through Jira I see this is a common issue: https://bugs.adobe.com/jira/browse/FB-23514 (and a few others).
Hope this helps,

Problem in contacting MXML from ActionScript class catch block

When ever there is a exception inside the ActionScript class , i want to access the MXML TextInputId and dispplay an error Message on to it , but i am unable to succeed.
This is the code i am using
<mx:Application>
<mx:TextInput id="MyTI"/>
</mx:Application>
Inside ActionScript class :
catch(error:Error)
Application.application.MyTI.text="Error Submitting Data"
Need your suggestions to implement this .
Thanks in advance

Hi Kiran,
It should defenitely wor for you...
Try to debug and check whether the control is entering into the catch block.
Thanks,
Bhasker Chari

Event in ActionScript Class not accessible by MXML Component

I am implementing an ActionScript Class in my MXML Component,
but it can't see the Event I'm specifying. I'm getting the
following Error when I compile my application:
Cannot resolve attribute 'myEvent' for component type
myClass.
How do I make the Event available to the MXML component?
Thanks.

Guess the compiler has a problem with semi-colons after the
Event declarations. I removed the semi-colons, and was able to
compile.

Anyway to make MXML components static?

This isn't too important because I know how to do it well enough in ActionScript. But I like the readability and convenience of MXML components, so if anyone knows if there is a way to make them static, please let me know.

As best I understand it, there is no way to creation Static Classes in ActionScript 3 or MXML:
Class Modifier keywords are dynamic, final, internal, and public.
http://livedocs.adobe.com/flex/3/html/help.html?content=04_OO_Programming_06.html
The Static keyword is only for variables, constants, or methods:
http://livedocs.adobe.com/flex/3/langref/statements.html#static
If you want to create static variables, constants, or methods inside an MXML File do it in a script block, which is the same way you do it in an ActionScript 3 file.

Is it possible to use mx.controls in ActionScript class?

I am very new to Flex, with a very small amount of experience in ActionScript so forgive me if the answer to this is obvious. I've tried searching and haven't found a conclusive solution to my problem.
I have a Flex project that I am building in Flex Builder 3. The main application is in mxml, but most of the classes I'm using are in ActionScript.
The general purpose of the application is to create a flowchart that accepts certain inputs on the elements in the charts. The chart components are all ActionScript classes. I am attempting to add a combobox to a component, but despite not getting any errors or warnings I can't get the combobox to show up.
Here's a simplified version of the code within the class (I've left out the stuff that doesn't directly relate to my issue):
    import mx.controls.ComboBox;
          newComboBox = new ComboBox();
          newComboBox.initialized = true;
          newComboBox.alpha = 1;
          newComboBox.dataProvider = valueArray;
          newComboBox.x = 5;
          newComboBox.y = -5;
          newComboBox.height = 20;
          newComboBox.width = width - 60;
          newComboBox.visible = true;
          addChild(newComboBox);

Just realized I hadn't thanked anyone for the suggestions yet. I appreciate it.
Srirangan wrote:
Few points I can think of:
1. Try without the ".initialized = true;" property being set
2. Check if the x & y property values for the ComboBox are valid
3. Check if any styles are being applied that set the top, right, bottom or left properties thru CSS
Removing (or alternately adding) the ".initialized = true" doesn't make a difference. It was actually a last ditch effort to try to make it draw it and wasn't meant to stay in the code.
The x and y property values are valid as far as I know. The code for the positioning and sizing of the combobox was taken from the textfield below which I ended up moving down when I decided to add the combobox. The textfield has always drawn correctly.
I looked through the CSS and it doesn't appear to set top, right, bottom or left anywhere. The only CSS in the project is from the Degrafa library that I'm using to draw components.
Michael Borbor wrote:
What's the val of the variable width?
Width is set to 150, which is the width of the Constant component.
ATIF FAROOQ wrote:
can you show the hierarchy of your flowchart component
I'm not 100% sure this is what you mean, but it's:
Sprite > Graphic (Degrafa class) > GeometryGroup (Degrafa class) > ComponentGroup > Constant
and just for reference the component's being drawn onto:
UIComponent > Surface (Degrafa class) > SurfaceComponent

How to call setter Method of ActionScript class with in a Flex Application

Hi
I have Action class as shown :
public class MyClass
private var name:String
public function get name():String {
    return _initialCount;
public function set name(name:String):void {
    name = name;
Now please let me know how can i access this Action class under my Flex Application and call the setter Method of it to set the value for the name .
For example on entering some data in a TextInput and click of a submit Button , on to the Event Listener , i want to call the set name method of my ActionScript class .
Please share your ideas on this .

Thanks Gordon for your resonse .
Say for example my Action class is like this :
public class MyClass
private var name:String
public function get name():String {
    return name;
public function set name(name:String):void {
    name = name;
This is inside the MXML
I know this way we can do it
public var myclass:MyClass = new MyClass();
myclass.name="Kiran";
Now my query is can we do in this way also ??
myclass.set name(SomeTextInput.text);
Please share your views on this , waiting for your replies .
Thanks in advance .

How to reference a Constants.as actionscript in another actionscript class

Hi,
How can I use constant variables from a Constatnst file (.as file) in another actionscript class?
Thanks.

What id I don't have the Constants.as not defined as a class.
Constants.as
public static const BASE_NAME = "ABC";
public static const EQUIPMENT_NAME = "777";
I can't import is file as its not a class file, right?
So, how can I access BASE_NAME, etc.
In a mxml file, I use the <mx:Script source="/../Constants.as"/>
but how about in an actionscript class file.

ActionScript class being run by mistake in Flex project

I have a Flex project where my main MXML file is set as the
one and only application file and is also set as the default file.
I also have an ActionScript class in the project that extends
Sprite. It is _not_ set as an Application file.
When I have the ActionScript class selected, if I hit run or
debug, FB3 creates a new launch configuration for it and tries to
run the AS file instead of the default application MXML file.
Needless to say, this is really annoying as it means I have
to select the main MXML file before hitting debug/run every time.
Is this a bug or feature? (Feels like a bug).
Thanks,
Aral

Hi Aral,
Can you please log it in our public bug system:
http://bugs.adobe.com/flex?
It'd be great if you can provide more info to the bug e.g.
reproducible steps, platform, FB version (Plugin or Standalone).
thanks,
Sharon

Flex Builder stops compile new ActionScript classes

Hello,
Does anyone knows what could cause Flex Builder 3.4 stops compiling NEW ActionScript classes? I have been working on Flex project for a while, we have some MXML and .as files (less than 200). This morning Flex Builder suddenly stopped detecting errors in new as classes, but not so for older classes. Thanks and appreciate your help.
- Weiping

Are your new classes referenced from the old code? Mxmlc employs a questionable form of "as-needed" linking, so classes that are not referenced from the main application are not even compiled. This referencing requirement is recursive; that is, any classes that are to be included have to be referenced from the main application, or from classes referenced by the main application, or from classes referenced by classes referenced by the main application, and so on. But if your new classes are not referenced at all from the old code, they will be ignored.

Converting MXML Components to ActionScript Classes

Similar Messages

Maybe you are looking for