Convert mxml component to an AS class?

I just made a custom MXML component ("ProjectImage.mxml") and
expected to be able to instantiate instances of it from AS scripts
like so:
var newImage:ProjectImage = new ProjectImage();
(this is within an <mx:Script> block in Flex, and I've
explicitly imported the component.)
but apparently this doesn't work (got "Access of possibly
undefined property source through a reference with static type
customComp.views:ProjectImage.") Is there any easy way to convert
my mxml component to an AS class without writing it from scratch?
Flex does this anyway at runtime, yes? So it seems like it should
be able to do it on command....
Any help would be appreciated. Thanks!

Ok, I realized I was making another mistake and that the mxml
component works just fine being instantiated from AS. It'd still be
nice to know how to get a look at AS classes generated from custom
components though...

Similar Messages

MXML Component Layout

Is there a way for MXML Components to inherit their layout
based on where you place them in the Main Application?
For instance, I have the following sample MXML Components:
===============
MXML Component 1 - Name
<Base class of Component>
<FormItem label="First Name"><TextInput
id="firstName"></FormItem>
<FormItem label="Middle Name"><TextInput
id="middleName"></FormItem>
<FormItem label="Last Name"><TextInput
id="lastName"></FormItem>
</Base Class of Component>
===============
===============
MXML Component 2 - Address
<Base class of Component>
<FormItem label="Address"><TextInput
id="address"></FormItem>
<FormItem label="City"><TextInput
id="city"></FormItem>
<FormItem label="State"><ComboBox
id="state"></FormItem>
</Base Class of Component>
===============
===============
MXML Component 3 - Donation
<Base class of Component>
<FormItem label="Donation Amount $"><TextInput
id="donation"></FormItem>
<FormItem label="Payment Type"><ComboBox
id="PaymentType"></FormItem>
</Base Class of Component>
===============
Is there a way to get all the FormItems in the MXML
Components to line up when place in a Form container in the main
application like below? I have the problem of the MXML Components
needing a base class, usually a container or other DisplayObject,
but this screws up the layout in the main application.
<mx:Form>
<common:Name/>
<common:Address/>
<common:Donation/>
</mx:Form>
Thanks,
Bryan

No. layout is handled by the container. There is no built-in
way to inherit layout values.
Now, each container has its defualts. you cn set those
properties to "0" or whatever, to prevent nested containers from
messing with the layout.
Tracy

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

How to extend an AS3 class in an MXML Component

Hello,
I have a few MXML Components based on the Spark Group.
They all use MXML for layouta and AS3 for logic.
They all have the same logic and I would like all to extend an AS3 class to have the same methods and properties isteand of declaring the same exact ones for each MXML Component.
How can this be done please?

Hm, no, I'm not explaing this properly.
I have an MXML component based on the Spark Group.
It has a few form elements.
There are many such components.
I want all to have two public methods: getData() and setData() which get and set data from and to the input elements.
I don't want to write the exact same method for all of them.
I would like to at least interface the MXML components with an AS3 class forcing them to have those 2 methods.

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.

Loading an "MXML Component" at run-time creates a null object.

Hello!
I have a simple Flex 3 project with an MXML application file (the parent) and an MXML component file (the child).
At run-time I create childs of this component, and I add it to the stage using a simple "this.addChild()" call.
Now, besides that, in the creation loop, after every
newChild = new mcComp();
I want to setup a few more custom parameters which belongs to this class. For example, now I want to set a label's text, this label is at the child.
The issue is that the label isn't created until I exit the creation function, and actually, until my code returns control to the Flash Player.
See my problem here?
With custom classes which resides at .AS files, when I instantiate them with the "new" operator, they run their constructure's code and eveything is fine.
But, when I do the same with those MXML components (which by the way are based over the Canvas class), their constructure do not execute and actually no other child of them is created.
Can anyone please advise? I must be missing some keyword here.. hopefully.

Hi Natasha thanks,
The issue is that the creationComplete event doesn't dispatch even when I addChild() the object.
var child:mcChild = null;
for(var i:int; i < 3; i++)
     child = new mcChild();
     // setting some properties, labels' text etc'
     this.addChild(child);
Try this and you'll see - the event doesn't dispatch until you got out of the code flow.
Anyway after looking at Flex's documentation I solved it differently;
After the addChild() call the child receives an "initialize" event. After that I could modify my label.
Thank you though!

How to import MXML Component in ActionScript

Hello,
I'm having a structure similar to this:
root
   - components
       - subcomponents (MyCustomMXMLComponent)
   - views
In views package I have a piece of AS where I want to instantiate an MXML Component from subcomponents.
In Views:
var data:DisplayObjectContainer=new components.subcomponents['MyCustomMXMLComponent'];
But that throws an error.
I need a syntax similar to the one above because I'm running a for loop and changing data variable to be a new MXML component on each iteration.
Any idea how I can solve this?
Thank you.

OK, so:
var length:int=arrSubcomponents.length;
for(var i:uint=0;i<length;i++)
          //Decide parent
          var parent:IVisualElementContainer;
          if(arrSubcomponents[i].group && arrsUbcomponents[i].group==1){parent=firstGroup;}
    else{parent=secondGroup;}
          //Add to parent
          var childClassName:String='components.subcomponents.'+arrsUbcomponents[i].className;
          trace(childClassName);//So far so good the path is correct, I checked.
          var childClass:Class=Class(getDefinitionByName(childClassName));
          trace(childClass);//It breaks here with the error below
          var child:IVisualElement=new childClass() as IVisualElement;
          trace(child);
          parent.addElement(child);
The error:
ReferenceError: Error #1065: Variable FirstCustomMXMLComponent is not defined.
          at global/flash.utils::getDefinitionByName()

Mxml component application

Hi all,
I am converting a asp.net website to Flex, I have five web pages which I designed as Five mxml components have buttons, grid, combos, text boxes etc.
my question is how do I move between these pages they are distinct in there looks and functionality. I read a lot about view states and I am confused whether view states will solve my issue.
Please tell me how do we handle this usually in flex applications.

Hi,
Flex 4 or Flex 3 the answer remains the same, I have a state for each form then I place a container, be it a group a canvas or a panel, in each state to show how states work, the following is in flex 3
The Application
============
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600" currentState="form1" xmlns:ns1="*">
<mx:states>
<mx:State name="form1">
<mx:AddChild position="lastChild">
<ns1:form1 horizontalCenter="0" verticalCenter="0">
</ns1:form1>
</mx:AddChild>
</mx:State>
<mx:State name="form2">
<mx:AddChild position="lastChild">
<ns1:form2 horizontalCenter="0" verticalCenter="0">
</ns1:form2>
</mx:AddChild>
</mx:State>
<mx:State name="form3">
<mx:AddChild position="lastChild">
<ns1:form3 horizontalCenter="0" verticalCenter="0">
</ns1:form3>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:Button label="Form 1" click="currentState='form1'" top="10" horizontalCenter="-150"/>
<mx:Button label="Form 2" click="currentState='form2'" top="10" horizontalCenter="0"/>
<mx:Button label="Form 3" click="currentState='form3'" top="10" horizontalCenter="150"/>
</mx:Application>
The Mxml Component Container (which is exactly what you said you had)
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" title="First Form">
</mx:Panel>
You can navigate through your 'pages' however you want to, the first example I offered is pure flex the above code is pure flex only using the antiquated sdk which I would advise against for 'new' projects, flex 3 sdk maybe used in flashbuilder but I would only go to this for legacy purposes using the flex 4 sdk is by far the better option.
I try to help where I can, there is no reward for doing this, but I did answer your initial question about states, I hope you get to understand flex a little better with time.
David.

How to add interface to customlize MXML Component when use Flex Builder 3?

How to add interface to customlize MXML Component when use
Flex Builder 3?

David,
I don't believe you can add the interface via the creation
dialog in FlexBuilder 3. You can always manually add the
"implements" property to your MXML Component root tag. Something
like this: <mx:VBox implements="com.mycorp.IMyInterface">
If you want autogeneration of the interface, then create an
ActionScript class with that interface and then copy the generated
functions and setter/getters into the script block of your MXML
component.

Refer to mxml component within the same package

Hello
How can I refer to the same mxml component both of which live in the same package? For example, I have myHbox and myTabNav in the same package named ui. I am already referring to the myHBox mxml class in the Application class through the line: xmlns:ui="ui.*" and that works fine. However, I want to use myTabNav within the myHBox mxml component?
Thanks in advance,
K4Flex

You can use the same namespace xmlns:ui="ui.*" in the myHbox.mxml too.

Error when using instantiated mxml component in popupmanager

Hi,
Im getting the following error when trying to create a popup:
Error #1007: Instantiation attempted on a non-constructor
The code looks as follows
var browserPop:CustomBrowser = new CustomBrowser();
browserPop.targetType = "file";
browserPop.fileType = "jpg";
var pop:TitleWindow =
PopUpManager.createPopUp(this,browserPop as Class, true) as
TitleWindow;
Where CustomBrowser is an MXML component extending
TitleWindow.
If i use:
var pop:TitleWindow =
PopUpManager.createPopUp(this,CustomBrowser, true) as TitleWindow;
it works fine but i need to be able to set some public
properties and therefore instantiate it first. Any help would be
appreaciated.
Thanks in advance
Eric

Create you component using the popupmanager, then cast it to
the
specific type to access it's public methods and/or variables.
Like so for mxml component ExceptionPopup:
var popup:IFlexDisplayObject;
popup =
PopUpManager.createPopUp(_parentPanel,ExceptionPopUp,true,null);
(popup as ExceptionPopUp).addRecords(ev.errorMessage);
(popup as ExceptionPopUp).title = "title";
(popup as ExceptionPopUp).userText.text = "some user text"
PopUpManager.centerPopUp(popup);

MXML Component State Question

Hey guys,
I am trying to simplify my code and break out different parts of the app into different MXML Component files. I have taken my login info and created the LoginScreen.mxml file which calls the doLogin function in its (parent) mxml file FlexCMS. It properly sets the state to 'LoggedIn' but then the LoginScreen.mxml file doesnt hide...
Any ideas?

<s:states>
          <s:State name="Login" />
          <s:State name="LoggedIn" />
     </s:states>
<fx:Script>
          <![CDATA[
public function doLogin($username:String, $password:String):void {
                    loginResult.token = customUserClass.login($username, $password);
               protected function loginResultEvent(event:ResultEvent):void {
                    //Alert.show(event.result.toString(), 'loginResult');
                    trace(event.result.toString());
                    if (event.result == true) {
                         currentState = 'LoggedIn';
                    trace('currentState: ' + currentState);
     ]]>
     </fx:Script>
<components:LoginScreen includeIn="Login" />
... More code for rest of app that hasnt been broken out to other mxml files yet

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark"
           xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*">
     <s:layout>
          <s:BasicLayout/>
     </s:layout>
     <s:states>
          <s:State name="Login" />
          <s:State name="LoggedIn" />
     </s:states>
     <fx:Declarations>
          
     </fx:Declarations>
     <fx:Script>
          <![CDATA[
               private var flexCMS:FlexCMS = new FlexCMS(); //get reference to main class
               protected function loginClick(event:MouseEvent):void {
                    flexCMS.doLogin(username_txt.text, password_txt.text);
          ]]>
     </fx:Script>
     <s:Panel height="140"
                horizontalCenter="0"
                title="Login"
                includeIn="Login"
                verticalCenter="0"
                width="250">
          <s:TextInput id="username_txt" text="testuser" width="151" x="87" y="10" />
          <s:TextInput id="password_txt" text="test" width="151" x="87" y="40" />
          <s:Label fontSize="14" text="Username:" x="10" y="10" />
          <s:Label fontSize="14" text="Password:" x="10" y="44" />
          <s:CheckBox label="Remember Me" x="10" y="68" />
          <s:Button click="loginClick(event)" id="login" label="Login" x="168" y="69" />
          
     </s:Panel>
</s:Group>

I did something similar in the past for a few of my apps.
The login screen was a custom TitleWindow component that contained the normal username field, password field and login button and could communicate with the server for authentication purposes. If the authentication was successful then I'd call the PopUpManager's removePopUp method on the login window and change the current state to the authenticated state.

How to create package access MXML component?

Hi
In ActionScript we can create an internal class which can be referenced by the classes in the same package.
How can we create the MXML component which can be referenced by the others in the same package?

Packager Links https://forums.adobe.com/thread/1586021

Initializing Custom MXML component

Hello,
I am new to flex and the one thing I can't seem to get a handle on is using custom mxml components. The whole not being able to use a constructor to pass data through was a tough thing to adjust to so for the most part I've been writing my own AS classes for display purposes that extend layout containers like VBox and such. This is getting cumbersome and I would really like to use MXML to save some time when writing display classes. For the most part I'm trying to use custom mxml components this way: I put the labels and other controls and then want data to display as text from the calling class. However, when I try to set the text it says that the control I am trying to set hasn't been initialized yet. My workaround is something like this.
var data1:String = "Something";
var customComp:CustomMXMLComponent = new CustomMXMLComponent();
customComp.initialize();
customComp.someControl = data1;
Now why wouldn't someControl on the custom component be initialized when the actual component is initialized? Is there something I can change in the mxml component so that I don't always have to call .initialize() after creating an instance of the custom component?
Thanks!

. The "initialize" stuff you had was more concerned with the lifecycle of the component. We don't want to do that , but it is something you should learn about. I think the answer to your problem is to create Bindable variables in your mxml class, then set those parameters.
Observe
<Panel>
<Button label="{buttonLabel1}" >
<Button label="{buttonLabel2}">
<Label label = {labelLabel}>
<Script>
     [Bindable] public var buttonLabel1:String;
     [Bindable] public var buttonLabel2:String;
     [Bindable] public var labelLabel:String;
   </Script>
</Panel>
Meanwhile , in another class ...
var customComp:CustomMXMLComponent = new CustomMXMLComponent();
customComp.buttonLabel1 = "Ubuntu";
customComp.buttonLabel2 = "Rocks";
customComp.labelLabel = "My Socks";

AddChild(Sprite) to an mxml component

Hi list! i'm porting an UML app from Aswing to Flex2, and i
have a problem adding an sprite to a mx:Canvas (or other) mx
component. for example, somethig like this:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Canvas borderStyle="solid" height="200" width="80%"
creationComplete="funcion()">
<mx:Script>
<![CDATA[
private var size:uint = 80;
private var bgColor:uint = 0xFFCC00;
private var borderColor:uint = 0x666666;
private var borderSize:uint = 0;
private function funcion():void{
var child:Sprite = new Sprite();
var halfSize:uint = Math.round(size/2);
child.graphics.beginFill(bgColor);
child.graphics.lineStyle(borderSize, borderColor);
child.graphics.drawCircle(halfSize, halfSize, halfSize);
child.graphics.endFill();
addChild(child);
]]>
</mx:Script></mx:Canvas></mx:Application>
TypeError: Error #1034: Error de conversión forzada: no
se puede convertir flash.display::Sprite@3237871 en
mx.core.IUIComponent. (It can't cast from flash.display::Sprite to
mx.core::IUIComponent)
At flex2 reference it is marked as addChild(DisplayObject )
in every mxml component, not IUIComponent at any point.
I can't use swfloader because i need to control this sprite
with many mxml forms. Any idea?
thank you!

Well, if I had read the complete documentation on addChild, I
would have seen this:
Note: While the child argument to the method is specified as
of type DisplayObject, the argument must implement the IUIComponent
interface to be added as a child of a container. All Flex
components implement this interface.
Since Sprite is not a Flex component, it does not implement
IUIComponent, hence the error.
Do this instead:
import mx.core.UIComponent;
var child:UIComponent = new UIComponent();
// carry on from here
To use this with Flex you need to have something that
implements IUIComponent so that it can be controlled by the Flex
framework.

Convert mxml component to an AS class?

Similar Messages

Maybe you are looking for