Prefix for element not bound

Question

I am a newbie in Flex development and using Flash Builder 4 with SDK 4. Now I get the error that "the prefix "fx" for element "fx:Style" is not bound" in line number 4. I searched for it, and it has sth. to do with namespaces, but I can not solve it by myelf.

I have the file called "UserStory.mxml" in the directory "components" to place it via the main.mxml onto the screen:

<fx:Script>
    <![CDATA[
        import components.UserStory;
        private function init():void {
            var userStory1:UserStory = new UserStory();
            userStory1.x = 100;
            userStory1.y = 100;

            userStory1.userStoryText = "test";

            this.addChild(userStory1);
        }
    ]]>
</fx:Script>

The file in which the error occurs in line no. 4:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="300" height="150" styleName="userstory">

    <fx:Style source="styles/styles.css"/>

    <fx:Text x="5" y="5" width="275" height="135" text="{userStoryText}" fontFamily="notes" fontSize="18"/>

    <mx:Script>
        ...
    </mx:Script>
</mx:Canvas>

Can someone tell me what's wrong?

Solution

As you suspected it is a problem with the namespace. MXML is just XML and in XML you can define namespaces and bind them to a URL. The namespaces are the part before the colon of an XML element and are usually defined on the enclosing element.

If you look at your MXML file you'll see one namespace declaration for the mx namespace:

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" ...

The declaration for fx is missing and that's what the compiler complains about. Add the appropriate definition and you should be fine (see this page for more details):

<mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009" ...

Also, if you are using Flex 4 you should review the file as mx:Canvas is a Flex 3 component and as such not directly usable in Flex 4 apps. Have a look at the API docs of Canvas for the Flex 4 SDK.