Creating custom component with a drawing for Flex Hero mobile

Question

I'm trying to create a custom component which displays a red rectangle in the middle with the following Flex Mobile project for Android (in Flash Builder 4.5 Burrito) -

MyComp.mxml (has no errors):

<?xml version="1.0" encoding="utf-8"?>
<components:MobileApplication 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:components="spark.components.*" 
    firstView="views.MyCompHome">
</components:MobileApplication>

views\MyCompHome.mxml (has no errors):

<?xml version="1.0" encoding="utf-8"?>
<components:View 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:components="spark.components.*"
    xmlns:comps="comps.*"
    title="My Component">

    <comps:MyRect width="100%" height="100%"/>

</components:View>

And the problematic comps\MyRect.mxml (has 1 compile error):

<?xml version="1.0" encoding="utf-8"?>
<mx:UIComponent 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="100%" height="100%">

    <mx:Script>
        <![CDATA[
            private var rect:Shape = new Shape();

            override protected function createChildren():void {
                super.createChildren();
                trace('createChildren');

                rect.graphics.beginFill(0xFF0000);
                rect.graphics.drawRect(0, 0, 20, 20);
                addChild(rect);
            }

            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                super.updateDisplayList(unscaledWidth, unscaledHeight);
                trace('updateDisplayList(' + unscaledWidth + ', ' + unscaledHeight + ')');

                rect.x = unscaledWidth / 2;
                rect.y = unscaledHeight / 2;
            }
        ]]>
    </mx:Script>
</mx:UIComponent>

The compile error is:

Description Resource    Path    Location    Type
Could not resolve <mx:UIComponent> to a component implementation.   
MyRect.mxml /MyComp/src/comps   line 4  Flex Problem

even though I have added c:\Program Files\Adobe\Adobe Flash Builder Burrito\sdks\4.5.0\frameworks\libs\mx\mx.swc to Flex Build Path (by clicking "Add SWC" button in the project properties dialog).

sshongru sshongru · Accepted Answer · 2010-12-30T18:11:40

I don't think UIComponent is available for use in MXML. Try changing MyRect.mxml to be an ActionScript class (MyRect.as) that extends UIComponent.

Edit: I was wrong it is available for use in MXML. Is there a reason you aren't using the latest namespaces in your component? This seems to work for me:

<mx:UIComponent xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark" 
            xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
    <![CDATA[
        private var rect:Shape = new Shape();

       ...

Creating custom component with a drawing for Flex Hero mobile

1 Answers