Flex Examples » AddChild http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Adding a Sprite to the display list in Flex 4 http://blog.flexexamples.com/2009/11/20/adding-a-sprite-to-the-display-list-in-flex-4/ http://blog.flexexamples.com/2009/11/20/adding-a-sprite-to-the-display-list-in-flex-4/#comments Sat, 21 Nov 2009 02:47:29 +0000 Peter deHaan http://blog.flexexamples.com/?p=2222 The following example shows how you can add a Sprite to the display object by using the Spark SpriteVisualElement object in Flex 4 and calling the addChild() method.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/11/20/adding-a-sprite-to-the-display-list-in-flex-4/ --> <s:Application name="Spark_SpriteVisualElement_addChild_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" initialize="init();">   <fx:Script> <![CDATA[ private const spr1:Sprite = new Sprite(); private const spr2:Sprite = new [...]]]> The following example shows how you can add a Sprite to the display object by using the Spark SpriteVisualElement object in Flex 4 and calling the addChild() method.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/11/20/adding-a-sprite-to-the-display-list-in-flex-4/ -->
<s:Application name="Spark_SpriteVisualElement_addChild_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            private const spr1:Sprite = new Sprite();
            private const spr2:Sprite = new Sprite();
 
            private function init():void {
                spr1.graphics.beginFill(0xFF0000, 0.5);
                spr1.graphics.drawRect(10, 10, 100, 80);
                spr1.graphics.endFill();
                con.addChild(spr1);
 
                spr2.graphics.beginFill(0x0000FF, 0.3);
                spr2.graphics.drawRect(20, 20, 80, 100);
                spr2.graphics.endFill();
                con.addChild(spr2);
            }
        ]]>
    </fx:Script>
 
    <s:SpriteVisualElement id="con" />
 
</s:Application>

View source is enabled in the following example.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2009/11/20/adding-a-sprite-to-the-display-list-in-flex-4/feed/ 16 Dynamically adding paragraphs to a Spark RichText control in Flex 4 http://blog.flexexamples.com/2009/10/09/dynamically-adding-paragraphs-to-a-spark-richtext-control-in-flex-4/ http://blog.flexexamples.com/2009/10/09/dynamically-adding-paragraphs-to-a-spark-richtext-control-in-flex-4/#comments Sat, 10 Oct 2009 06:59:06 +0000 Peter deHaan http://blog.flexexamples.com/?p=2107 The following example shows how you can dynamically add paragraphs to a TextFlow in a Spark RichText control by creating a new SpanElement (<span/>) and ParagraphElement (<p/>) object and then adding the spans and paragraphs to the textFlow object using the addChild() method.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/10/09/dynamically-adding-paragraphs-to-a-spark-richtext-control-in-flex-4/ --> [...]]]> The following example shows how you can dynamically add paragraphs to a TextFlow in a Spark RichText control by creating a new SpanElement (<span/>) and ParagraphElement (<p/>) object and then adding the spans and paragraphs to the textFlow object using the addChild() method.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/09/dynamically-adding-paragraphs-to-a-spark-richtext-control-in-flex-4/ -->
<s:Application name="Spark_RichText_textFlow_addChild_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:controlBarContent>
        <s:Button id="btn"
                label="Add paragraph"
                click="btn_clickHandler(event);" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import flash.text.engine.FontWeight;
            import flashx.textLayout.elements.ParagraphElement;
            import flashx.textLayout.elements.SpanElement;
 
            protected function btn_clickHandler(evt:MouseEvent):void {
                var span1:SpanElement = new SpanElement();
                span1.fontWeight = FontWeight.BOLD;
                span1.text = new Date().toDateString() + ': ';
 
                var span2:SpanElement = new SpanElement();
                span2.text = new Date().toTimeString();
 
                var para:ParagraphElement = new ParagraphElement();
                para.addChild(span1);
                para.addChild(span2);
 
                rchTxt.textFlow.addChild(para);
            }
        ]]>
    </fx:Script>
 
    <s:Scroller height="100" horizontalCenter="0" verticalCenter="0">
        <s:Group width="100%" height="100%">
            <s:RichText id="rchTxt">
                <s:textFlow>
                    <s:TextFlow />
                </s:textFlow>
            </s:RichText>
        </s:Group>
    </s:Scroller>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2009/10/09/dynamically-adding-paragraphs-to-a-spark-richtext-control-in-flex-4/feed/ 0 Adding an FTETextField object to the display list in Flex 4 http://blog.flexexamples.com/2009/10/07/adding-an-ftetextfield-object-to-the-display-list-in-flex-4/ http://blog.flexexamples.com/2009/10/07/adding-an-ftetextfield-object-to-the-display-list-in-flex-4/#comments Thu, 08 Oct 2009 04:27:50 +0000 Peter deHaan http://blog.flexexamples.com/?p=1981 The following example shows how you can add an FTETextField object (formerly TLFTextField) by using a Halo/MX container and the rawChildren.addChild() method or by using a SpriteVisualElement object and the addChild() method.

The mx.core.TLFTextField class was renamed to mx.core.FTETextField in 4.0.0.10872.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/10/07/adding-an-ftetextfield-object-to-the-display-list-in-flex-4/ --> <s:Application [...]]]> The following example shows how you can add an FTETextField object (formerly TLFTextField) by using a Halo/MX container and the rawChildren.addChild() method or by using a SpriteVisualElement object and the addChild() method.

The mx.core.TLFTextField class was renamed to mx.core.FTETextField in 4.0.0.10872.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/07/adding-an-ftetextfield-object-to-the-display-list-in-flex-4/ -->
<s:Application name="Spark_FTETextField_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import mx.core.*;
 
            private function init():void {
                var fte:FTETextField = new FTETextField();
                fte.text = "Hello world";
                fte.border = true;
                fte.x = 10;
                fte.y = 10;
                parentObj.rawChildren.addChild(fte);
            }
        ]]>
    </fx:Script>
 
    <mx:Canvas id="parentObj" />
 
</s:Application>

Or you can add the FTETextField instance to the display list using a SpriteVisualElement object, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/07/adding-an-ftetextfield-object-to-the-display-list-in-flex-4/ -->
<s:Application name="Spark_FTETextField_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import mx.core.*;
 
            private function init():void {
                var fte:FTETextField = new FTETextField();
                fte.text = "Hello world";
                fte.border = true;
                fte.x = 10;
                fte.y = 10;
                parentObj.addChild(fte);
            }
        ]]>
    </fx:Script>
 
    <s:SpriteVisualElement id="parentObj" />
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2009/10/07/adding-an-ftetextfield-object-to-the-display-list-in-flex-4/feed/ 11