Flex mxml to as3, small class did i miss something ?

Question

Hi,

I was using an mxml class but since i need to pass some properties at construction time, to make it easier i will convert it to as3 code.

The class is RectangleShape and it just draws a rectangle.

Original mxml working

<?xml version="1.0" encoding="utf-8"?>
<BaseShape name="rectangle"
    xmlns="org.edorado.edoboard.view.components.shapes.*" 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:degrafa="http://www.degrafa.com/2007"
    xmlns:objecthandles="com.roguedevelopment.objecthandles.*">

    <mx:Script>
     <![CDATA[

            import org.edorado.edoboard.view.components.shapes.IShape;
            import mx.events.FlexEvent;

            override public function drag(movePt:Point):void {
                this.width = movePt.x - this.x; 
                this.height = movePt.y - this.y; 
            }

            override public function updateFillColor(color:int):void {
                solidFill.color = color;
            }

     ]]>
    </mx:Script>

    <degrafa:Surface >
     <degrafa:GeometryGroup id="geo">
            <degrafa:fills>
                <degrafa:SolidFill id="solidFill" color="white" alpha="0.3"/>
            </degrafa:fills>

            <degrafa:strokes>
                <degrafa:SolidStroke id="stroke1" color="white"/>
            </degrafa:strokes>

      <degrafa:RegularRectangle 
       id="rect" 
       fill = "{solidFill}"
       width="{width}" 
       height="{height}"
       stroke="{stroke1}" />
     </degrafa:GeometryGroup>  
    </degrafa:Surface>
</BaseShape>

My attempt to AS3

package org.edorado.edoboard.view.components.shapes { import com.degrafa.geometry.RegularRectangle; import com.degrafa.paint.SolidFill; import com.degrafa.paint.SolidStroke; import com.degrafa.GeometryGroup; import com.degrafa.Surface; import flash.geom.Point;

public class RectangleShape extends BaseShape 
{
 public var surface:Surface = new Surface(); 
 public var geoGroup:GeometryGroup = new GeometryGroup();
 public var solidFill:SolidFill = new SolidFill("white");
 public var solidStroke:SolidStroke = new SolidStroke("black");
 public var rect:RegularRectangle = new RegularRectangle(); 

 public static const name:String = "rectangle";

 public function RectangleShape() {
  addChild(surface);
        //surface.addChild(geoGroup);
        surface.graphicsCollection.addItem(geoGroup); 

        solidFill.alpha = 0.3;
        rect.fill = solidFill;
        rect.stroke = solidStroke;
        rect.width = this.width;
        rect.height = this.height;
        geoGroup.geometry = [rect];
        geoGroup.draw(null, null); 
 }

    override public function drag(movePt:Point):void {

        this.width = movePt.x - this.x; 
        this.height = movePt.y - this.y; 
        trace('dragging ', this.width, this.height);
    }

    override public function updateFillColor(color:int):void {
        solidFill.color = color;
    }
}

}

The problem is that the shape is not drawing anymore, the BaseShape container is there and i can see the trace drag working but not the rectangle anymore.

Any obvious stuff i missed ? Thanks

Answer 1

I think i pinpointed the problem. Before in the mxml version we had

width="{width}" height="{height}"

And the degrafa rectangle will automatically fit its parent.

But not in the AS version. i should try to reproduce the {width} and {height} in As. Any tool to convert mxml to as?

Answer 2

Try setting up the bindings with the BindingUtils class.

For example:

BindingUtils.bindProperty(component, "height", this, "height");

Answer 3

Did you addChild your RectangleShape?