Flex ActionScript Project Error in Object Declaration.(project.mxml file) - apache-flex

Question

I have a Flex ActionScript Application, I need to draw a simple rectangle in stage. I am using
firstapp.mxml and another Class called Book.as;
here is the complete code which i have done.
firstapp.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Script>
<![CDATA[
import com.books.Book;
import flash.display.*;
var n:Book = new Book;
//n.var1 = "Another String";
addChild(n);
]]>
</mx:Script>
</mx:Application>
Book.as
package com.books
{
import flash.display.*;
public class Book extends Sprite
{
public var var1:String = "Test Var";
public var var2:Number = 1000;
public function Book()
{
var b = new Sprite;
b.graphics.beginFill(0xFF0000, 1);
b.graphics.drawRect(0, 0, 500, 200);
b.graphics.endFill();
addChild(b);
}
}
}
I'm new in Flex, So please help me to fix this. I want to show the rectangle.

Answer 1

Since you're trying to add this to a flex component, you probably need to wrap Book in a UIComponent instance:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Script>
<![CDATA[
import com.books.Book;
import flash.display.*;
var n:UIComponent = new UIComponent;
n.addChild(new Book);
addChild(n);
]]>
</mx:Script>
</mx:Application>
Another way of doing this would be to instead make Book inherit UIComponent, like so:
package com.books
{
import flash.display.*;
public class Book extends UIComponent
{
public var var1:String = "Test Var";
public var var2:Number = 1000;
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
graphics.beginFill(0xff0000, 1);
graphics.drawRect(0, 0, 500, 200);
graphics.endfill();
}
}
}
Then you can add Book directly to your application, like so:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:books="com.books.*"
layout="absolute">
<books:Book />
</mx:Application>
Additionally, I suggest you read up on the Flex component architecture. There's some pretty good documentation from Adobe on the subject, but you should be aware that the information is specific to Flex 3 (I noticed you're using Flex 3, hence the link). Even while a lot of the information may still be applicable to Flex 4 (the component lifecycle for instance) there are differences, especially in terms of skinning.

Answer 2

USE var n:Book = new Book(); instead of var n:Book = new Book;

Answer 3

macke showed you good way. But if you want just to show something quickly, change
addChild(b);
to
rawChildren.addChild(b);
Edit: Some clarifications: application is UIComponent, therefore its addChild method needs UIComponent. You want to add Sprite. This can be done with rawChildren.addChild method from application. rawChildren is useful to get Sprites work with UIComponents, but you have to manage sprites yourself (sizes and layout).