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

Similar Messages

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

Resource Module Help for localization in custom mxml components

HI again,
Ok I have my resource set up to load at run time, working
great.
But I have mxml components should they not use the same
loaded bundle, or should I make smaller component bundles and load
them as well.
Best Practice etc...
Thanks in advance.

If you want the components to be decoupled and reusable with
ease, I vote for separate bundles.

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

Custom MXML components

Hi, I have a mxml custom component I will need to edit often. I don't want to send an update every little change. Can I reference the component from a server and if so how?

If you want to keep the custom component up-to-date for other users then you have to commit the changes in a matter of frequency.
Do you mean the use of subversion where you can commit code to a central server (repository) and erverybody can access to it?
Or do you mean the custom component should be available over a (public) url like flexlib.
example: xmlns:flexlib="http://code.google.com/p/flexlib/"

Calling custom mxml components

How to I call an mxml component from an mxml application
where the first called mxml component calls another mxml
component.

Far as I know, your main mxml application needs to call the
component that contains your other component.
In the <application> tag of your main mxml, setup up a
reference point to correspond to the location of your components
(we'll call the reference 'comp1' and assume it points to a project
folder named 'components' which contains both of your components).
<application ... xmlns:comp1="components.*" ...>
Any time you need to include your first component in your
main application mxml, you can reference it as
<comp1:component_name .../> where component_name is the name
of your first component.
Now, within your first component (we'll assume it's base is
canvas, though it could be a number of containers such as HBox,
etc), you'll need to declare a reference point again in the same
fashion, except within your container's tag since it won't have an
application tag.
<canvas ... xmlns:comp2="components.*" ... >
Now that we've declared this, you can place your 2nd
component into your 1st component the same way you placed your 1st
component into your main application. This time specify the 2nd
component name
<comp2:component_name2 ... />
Hope this is what you are looking for

Passing VO's into custom MXML components

Hi there. I have a repeater that's dataProvider is an ArrayCollection. I want to pass the currentItem of the repeater( a VO ) into the custom component. Any thoughts on the best way to do this?
Repeater
     <mx:VBox y="44" height="80%" width="80%">
          <mx:Repeater id="listContainer" dataProvider="{queue}">
               <views:QueueItemView   />
          </mx:Repeater>
     </mx:VBox>
Custom Component
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="600" height="60">
     <mx:Script>
          <![CDATA[
               import com.ryancanulla.dashboard.content.vo.QueueItemVO;
               [Bindable] public var item:QueueItemVO = new QueueItemVO();
          ]]>
     </mx:Script>
     <mx:Text x="10" y="10" text="This is the Article Title" fontWeight="bold" fontSize="12" width="545"/>
     <mx:Text x="10" y="30" text="item date | category | source"/>
     <mx:HRule width="100%" />
</mx:Canvas>

<mx:VBox y="44" height="80%" width="80%">
     <mx:Repeater id="listContainer" dataProvider="{queue}">
          <views:QueueItemView
               item="{ QueueItemVO( listContainer.currentItem ) }" />
     </mx:Repeater>
</mx:VBox>

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

How to access variables in dynamically created custom components? (Flex 4.5)

Hi i have another riddle here.
i have few custom MXML components in my library and i am adding them to the stage by script, after that i want to fill some data, lets say Label.text, inside this component.
The question is how to acces / reference variables or other components inside the main custom component which was added to the stage by script???
thx M.

ok, the answer is here
http://blog.flexexamples.com/2008/08/28/creating-a-component-instance-by-class-name-in-act ionscript-30/

Architecting an Application With MXML Components

I have an application that has gotten lengthy and I want to
simplify it by architecting the Main Application with custom MXML
Components. The application as it is currently architected works
perfectly.
Currently, the application consists of "Canvas" containers
along Top and Left Side holding Navigation Buttons. The main
(changing) sections of the application will consist of a
"ViewStack" container holding a number of "Canvas" containers
stacked on top of one another. The navigation buttons along the top
and left side, when clicked, display in turn the content of each of
the several stacked "Canvas" containers. Because of the number of
stacked "Canvas" containers within the "ViewStack" and the content
of each, the main Application source code has become very long and
unwieldy, thus the need to use custom components for each of the
"Canvas" containers in the "Stack" and referencing them in the main
Application page.
I have tried several times to get this to work and I need to
clarify a couple of things.
1) After setting up custom components for the several
"Canvas" containers that are now in the "ViewStack" container, do I
first need to set up a custom component for the "ViewStack"
container with its own name space?
2) If the answer to 1) above is Yes then do I then reference
each of the custom components for the "Canvas" container with their
own name space designation within the "ViewStack" reference within
the main Application?
In the event I am completely off base then I would appreciate
any suggestions. If you wish I would be happy to email you the
current application page.
Thanks,
Joe
joe k

Here is some code for an app built with components. You can
see how the pieces talk to each other a bit.
------------------------- ViewStack1.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
xmlns:comp="components.*"
layout="vertical" width="100%" height="100%" >
<comp:TopBar />
<mx:HBox width="100%" height="100%">
<comp:LeftBar />
<mx:VBox width="100%" height="100%">
<mx:ViewStack id="myViewStack" borderStyle="none"
width="100%" height="100%">
<mx:VBox id="home" width="100%">
<comp:MainIntroText />
<mx:HRule width="50%" height="3"
strokeColor="0xCC3333"/>
<comp:MainSecondaryText />
<mx:HRule width="50%" height="3"
strokeColor="0xCC3333"/>
<comp:MainFinalText />
</mx:VBox>
<mx:VBox id="about" width="100%">
<comp:About />
</mx:VBox>
<mx:VBox id="contact" width="100%">
<comp:Contact />
</mx:VBox>
</mx:ViewStack>
</mx:VBox>
</mx:HBox>
</mx:Application>
------------------------------- About.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="
http://www.adobe.com/2006/mxml"
width="100%">
<mx:VBox width="65%">
<mx:Text fontSize="14" width="100%" text="This page tells
you about us." />
</mx:VBox>
</mx:HBox>
----------------------------------- Contact.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="
http://www.adobe.com/2006/mxml"
width="100%">
<mx:VBox width="65%">
<mx:Text fontSize="14" width="100%" text="This page tells
you how to contact us." />
</mx:VBox>
</mx:HBox>
------------------- LeftBar.mxml -------------------------
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
width="200" height="100%">
<mx:LinkButton label="Adobe Labs - Flex"
click="navigateToURL(new URLRequest('
http://labs.adobe.com/technologies/flex'),
'_blank');"/>
<mx:Spacer height="20"/>
<mx:Label fontSize="16" text="Flex Blogs"/>
<mx:LinkBar direction="vertical" width="90%"
itemClick="navigateToURL(new URLRequest(event.item.data),
'_blank');">
<mx:Object label="Adobe Flex Team Blog" data="
http://weblogs.macromedia.com/flexteam/"/>
<mx:Object label="Flex Blog Aggregator" data="
http://www.allyourflexarebelongtous.com/"/>
<mx:Object label="Adobe Flex Blog Aggregator" data="
http://weblogs.macromedia.com/mxna/index.cfm?query=byCategory&categoryId=5&categor yName=Flex"/>
</mx:LinkBar>
<mx:Spacer height="20"/>
<mx:Label fontSize="16" text="Example Flex Apps"/>
<mx:LinkBar direction="vertical" id="addlRscList"
width="90%" itemClick="navigateToURL(new
URLRequest(event.item.data), '_blank');">
<mx:Object label="Adobe Flex Store" data="
http://www.adobe.com/devnet/flex/samples/flex_store_v2/"/>
<mx:Object label="Adobe Dashboard Example" data="
http://examples.adobe.com/flex2/inproduct/sdk/dashboard/dashboard.html"/>
<mx:Object label="Buzzword Word Processor" data="
http://preview.getbuzzword.com/?s=true"/>
<mx:Object label="Adobe Style Explorer" data="
http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html"/>
<mx:Object label="Adobe Component Explorer" data="
http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html"/>
</mx:LinkBar>
</mx:VBox>
----------------------- MainFinalText.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
width="100%">
<mx:Text width="100%" fontSize="12"
text="Here is the final text I want to show you." />
</mx:VBox>
--------------------------- MainIntroText.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
width="100%">
<mx:Text width="100%" fontSize="12"
text="Here is the main text I want to show you." />
</mx:VBox>
----------------------- MainSecondaryText.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
width="100%">
<mx:Text width="100%" fontSize="12"
text="Here is the secondary text I want to show you." />
</mx:VBox>
--------------- TopBar.mxml --------------------------------
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="
http://www.adobe.com/2006/mxml"
width="100%">
<mx:Script>
<![CDATA[
private function goToViews(view:String):void {
if(view == "home"){
this.parentApplication.myViewStack.selectedChild=this.parentApplication.home;
if(view == "about"){
this.parentApplication.myViewStack.selectedChild=this.parentApplication.about;
if(view == "contact"){
this.parentApplication.myViewStack.selectedChild=this.parentApplication.contact;
]]>
</mx:Script>
<mx:LinkButton label="MySnazzyLogo" fontSize="20"
click="goToViews('home');" />
<mx:VBox width="100%">
<mx:HBox width="100%">
<mx:Spacer width="100%" />
<mx:LinkBar fontSize="14"
itemClick="goToViews(String(event.item.data));">
<mx:Array>
<mx:Object label="About Us" data="about"/>
<mx:Object label="Contact Us" data="contact"/>
</mx:Array>
</mx:LinkBar>
</mx:HBox>
<mx:HBox width="100%">
<mx:Spacer width="150" />
<mx:Label fontSize="25" text="Here is Some Additional
Text" />
</mx:HBox>
</mx:VBox>
</mx:HBox>

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";

Add change event to a custom MXML component

I am building an MXML project in Flash Builder 4.5
I have a custom MXML component that contains a TextInput field. I want the custom component to have a change event that triggers a function in the main application.
I created a test project to try and solve this. At the moment, it appears to trigger an event once and then stops. Please take a look and let me know where I am going wrong. Many thanks.
customComponent.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
           width="40" height="20">
    <mx:Script>
    <![CDATA[
        [Bindable]
        public var value:Number;
        protected function inputBox_clickHandler(event:KeyboardEvent):void
            if (event.keyCode == 38 ) {
                keyUp();
            if (event.keyCode == 40 ) {
                keyDown();
        protected function keyUp():void
            value = value++;
            dispatchEvent(new Event('change'))
        protected function keyDown():void
            value = value--;
            dispatchEvent(new Event('change'))
    ]]>
</mx:Script>
<mx:Metadata>
    [Event(name="change", type="flash.events.Event")]
</mx:Metadata>
<mx:TextInput id="inputBox" x="0" y="0" width="40" height="20"
              text="{value}"
              keyDown="inputBox_clickHandler(event)"
              change="dispatchEvent(new Event('change'))"
              />
</mx:Canvas>
main.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
            xmlns:CustomComponents="CustomComponents.*"
            minWidth="955" minHeight="600" layout="absolute">
<mx:Script>
    <![CDATA[
        private function changeTestLabel():void
            testLabel.text = String(myComponent.value);
    ]]>
</mx:Script>
<CustomComponents:customComponent x="180" y="183"
    id="myComponent" value="0"
    change="changeTestLabel()">
</CustomComponents:customComponent>
<mx:Label id="testLabel" x="165" y="206" text="Test label"/>
</mx:Application>

I have found the solution to this...
The clue was that it worked the first time a change was made, changing the value to the default '0'.
The problem was that the var value is type Number and the inputBox.text is type String.
I therefore added the following function:
protected function textChange():void
   value = Number(inputBox.text);
   dispatchEvent(new Event('change'))
I also changed the change="dispatchEvent(new Event('change'))" property to
   valueCommit="textChange()"
... and that fixed it..
Thanks to all those who took the trouble to look at this

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.

How do I apply programmatic skins for completely custom drawn components of a Flex library project?

Hello folks,
I am looking for best practices advice when (1) creating
custom components and (2) styling and skinning.
I already know how to skin a component part of the Flex
framework. I can make a class extending ProgrammaticSkin and have
my component skinned using CSS to link the component with the
reference to my custom class.
However what about those cases when you are completely
creating a component from scratch?
Imagine a "Freehand Drawing Canvas" component that allows the
user to draw on it and has some buttons to set color styles, line
styles, etc., or imagine a "Screen Flow Gallery" component that
displays visual objects in a fashion similar to Cover Flow in the
Mac.
In many components I am aware you may reuse other components
part of the Flex framework but I am trying to picture an scenario
where you would need to draw everything yourself because there just
isn't something to base it upon so you will end up drawing it from
scratch.
To learn how instead of building one of those components I
mentioned previously I decided to start with something simple that
would illustrate this like a LiteButton component that will behave
just like the Flex mx.controls.Button but will extend UIComponent
and be completely custom drawn.
The component will have a default look and will also be
style-able and skin-able. I will provide styles for users of the
component to modify and regarding skinning anyone can create a
custom ProgrammaticSkin adding its own drawing logic and link it to
the component via CSS with the ClassReference applied to the skin
selector.
So far so good and it's clear what I want to achieve. I
actually know how to do most of the stuff here but I have one
single problem.
Here is my question, where should I put my custom drawing
logic? If I do it in the updateDisplayList inside the class
extending UIComponent it works, however I thought that it would be
a better practice to do it using programmatic skins, that way I
could provide different skin themes for my component set.
The problem is that I can't make the programmatic work in
this scenario. I tried instantiating the custom programmatic skin
during the updateDisplayList of the LiteButton component and adding
it to my display object via addChild but that didn't do anything. I
also tried creating a "default.css" stylesheet and tried to use
ClassReference as I would normally do to skin an already existing
component (or composite component as well) but that didn't do
anything either.
So how do I apply programmatic skins for completely custom
drawn components of my Flex library project?
I could do it inside the updateDisplayList of the LiteButton
class extending UIComponent but again I would like to provide
different theme sets for my components so it makes sense using
programmatic skins.

"jbucaran" <[email protected]> wrote in
message
news:[email protected]...
> Hello folks,
>
> I am looking for best practices advice when (1) creating
custom components
> and
> (2) styling and skinning.
>
> I already know how to skin a component part of the Flex
framework. I can
> make
> a class extending ProgrammaticSkin and have my component
skinned using CSS
> to
> link the component with the reference to my custom
class.
>
> However what about those cases when you are completely
creating a
> component
> from scratch?
>
> Imagine a "Freehand Drawing Canvas" component that
allows the user to draw
> on
> it and has some buttons to set color styles, line
styles, etc., or imagine
> a
> "Screen Flow Gallery" component that displays visual
objects in a fashion
> similar to Cover Flow in the Mac.
>
> In many components I am aware you may reuse other
components part of the
> Flex
> framework but I am trying to picture an scenario where
you would need to
> draw
> everything yourself because there just isn't something
to base it upon so
> you
> will end up drawing it from scratch.
This may help with that
http://livedocs.adobe.com/flex/3/html/help.html?content=skinstyle_3.html
> To learn how instead of building one of those components
I mentioned
> previously I decided to start with something simple that
would illustrate
> this
> like a LiteButton component that will behave just like
the Flex
> mx.controls.Button but will extend UIComponent and be
completely custom
> drawn.
>
> The component will have a default look and will also be
style-able and
> skin-able. I will provide styles for users of the
component to modify and
> regarding skinning anyone can create a custom
ProgrammaticSkin adding its
> own
> drawing logic and link it to the component via CSS with
the ClassReference
> applied to the skin selector.
>
> So far so good and it's clear what I want to achieve.
Actually after
> playing
> with the weekend and today I know how to do most of the
stuff but I have
> one
> single problem. So here is my question, where should I
provide my custom
> drawing logic? If I do it in the updateDisplayList
inside the class
> extending
> UIComponent it works, however I thought that it would be
a better practice
> to
> do it using programmatic skins, that way I could provide
different skin
> themes
> for my component set.
These aren't mutually exclusive. When you provide a skin with
a
TypeSelector, you have to add it to the display list
somewhere, and this is
typically done in updateDisplayList or addChildren. I prefer
to do it in
updateDisplayList, because you can then change it if the
style changes.
> The problem is that I can't make the programmatic work
in this scenario. I
> tried instantiating the custom programmatic skin during
the
> updateDisplayList
> of the LiteButton component and adding it to my display
object via
> addChild but
> that didn't do anything.
Exactly what did you do?
> I also tried creating a "default.css" stylesheet and
> tried to use ClassReference as I would normally do to
skin an already
> existing
> component (or composite component as well) but that
didn't do anything
> either.
I've never had any problem using an approach similar to
this...but I will
say that I couldn't see any advantage in creating a
default.css style sheet,
since it's not really default in the way that the one that
comes with Flex
is. It's much more obvious to anyone using your component
what's going on
there if you create a style sheet where they're likely to
spot it.
> So how do I apply programmatic skins with the default
look for custom
> drawn
> components?
It seems like your approach is fine, but maybe you've made a
mistake in your
implementation.
> I could do it inside the updateDisplayList of the
LiteButton class
> extending
> UIComponent but again I would like to provide different
theme sets for my
> components so it makes sense using programmatic skins.
You might want to consider also adding an instance of
HaloBorder to your
component. That brings a lot of functionality with it.
HTH;
Amy

DYNAMIC CREATION OF LINE SERIES USING ACTIONSCRIPT

There's something wierd about flex or im doing something
wrong?
- when i create a line series manually using mxml and specify
a id for the series, it works.
- similarly when i try to dynamically create a line series
using actionscript & define an "id" property, flex does not
understand! what am i doing wrong?
code for reference:
private function addSeries(series:Array,
yField:String,id:String) // addseries(series,"date","1000")
var ls:LineSeries= new LineSeries();
var stroke:Stroke = new Stroke()
ls.yField = yField;
ls.xField="ts"
ls.dataProvider=dp
ls.id=id // tried defining it dynamically, but flex does not
find
this.mychart.series.push(ls)
THIS IS THE ERROR I GET : "TypeError: Error #1010: A term is
undefined and has no properties."

I see... I played around with the line chart ...
Hopefully this helps... if not forgive me...
I know why you are trying to use the id property which i
agree doesn't work.
since the series is an array in your lineChart use the index
to set the visible property false/true.
lineChart.series[0].visible = true/false;
<mx:Lineseries id="a1" visible="true"
dataProvider="{whatever}" />
<mx:Lineseries id="a2" visible="false"
dataProvider="{whatever}"/>
create a function called init();
public function init():void
var lineS1:LineSeries = new LineSeries();
lineS1.visible = true/false;
lineChart.series.push(lineS1);
var lineS2:LineSeries = new LineSeries();
lineS2.visible = true/false;
lineChart.series.push(lineS2);
... and the key is to call this init function on initialize
event...NOT on createComplete event
<mx:LineChart.... initialize="init()" .... />
and to show both lines... call this function...
public function showLines():void
lineChart.series[0].visible = true;
lineChart.series[1].visible = true;
Hope this helps....

Dynamically add custom MXML components in Actionscript

Similar Messages

Maybe you are looking for