7 Replies Latest reply on May 24, 2010 2:17 AM by PHANTOMIASA

    Prefix fx for element fx:Script not bound

    PHANTOMIASA

      Hello!

       

      I am using Flash Builder 4 with SDK 4 of Flex. Now I get the error that "the prefix "fx" for element "fx:Style" is not bound" in row number 4.

      I have this file called "UserStory.mxml" in the folder "components" to place it via the main.mxml with

      <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>
      

      to place this component onto the screen.

       

       

      The file in which the error occurs in row number 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="24"/>
          
          <mx:Script>
              <![CDATA[
                  public var userStoryText:String;
      
                  private function handleDown(e:Event):void {
                      this.startDrag();
                  }
      
                  private function handleUp(e:Event):void {
                      this.stopDrag();
                  }
      
                  override protected function createChildren():void {
                      super.createChildren();
                      super.addEventListener(MouseEvent.MOUSE_DOWN,handleDown);
                      super.addEventListener(MouseEvent.MOUSE_UP,handleUp);
                  }
              ]]>
          </mx:Script>
      </mx:Canvas>
      

       

      Can someone tell me what's wrong?

       

      Thanks a lot in advance & Best Regards.

        • 1. Re: Prefix fx for element fx:Script not bound
          David_F57 Level 5

          hi,

           

          A see a couple of errors, firstly in flex4 applications you use addElement not addChild, with the component you are applying a variable to the component without making it bindable. Also there is no such thing as fx:Text.

           

          [Bindable] public var userStoryText:String;

           

          Also wouldn't it be preferable to use spark components rather than mx components when you are using flex 4. Rather than canvas use SkinnableContainer,

           

          I also don't understand why you have structured the code the way you have, try something like this

           

          <?xml version="1.0" encoding="utf-8"?>

          <s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009"

            xmlns:s="library://ns.adobe.com/flex/spark"

            xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"

            mouseUp="skinnablecontainer1_mouseUpHandler(event)" mouseDown="skinnablecontainer1_mouseDownHandler(event)">

          <fx:Script>

          <![CDATA[

          [Bindable] public var textStory:String;

           

          protected function skinnablecontainer1_mouseUpHandler(event:MouseEvent):void

          {

          // TODO Auto-generated method stub

          }

           

          protected function skinnablecontainer1_mouseDownHandler(event:MouseEvent):void

          {

          // TODO Auto-generated method stub

          }

           

          ]]>

          </fx:Script>

          <s:TextArea  x="5" y="5" width="275" height="135" text="{userStoryText}" fontFamily="notes" fontSize="24"/>

          </s:SkinnableContainer>

          • 2. Re: Prefix fx for element fx:Script not bound
            David_F57 Level 5

            hi,

             

            I missed this as well

             

            <fx:Declarations>

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

            </fx:Declarations>

            things like styles and filters have to be placed in a declaration block.
            David.

            • 3. Re: Prefix fx for element fx:Script not bound
              David_F57 Level 5

              hi,

               

              Ignore the last post styles are not one of the things you need to place in a declaration block, (its 3am I should be sleeping , brain is malfunctioning slightly)

               

              I think a lot of your problems are due to not including the fx namespace...

               

              David.

              • 4. Re: Prefix fx for element fx:Script not bound
                PHANTOMIASA Level 1

                Thanks a lot for your answer.

                 

                I  integrated this, so I have:

                <?xml version="1.0" encoding="utf-8"?>
                <s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                      xmlns:s="library://ns.adobe.com/flex/spark"
                                      xmlns:mx="library://ns.adobe.com/flex/mx" width="300" height="150"
                                      mouseUp="skinnablecontainer1_mouseUpHandler(event)"
                                      mouseDown="skinnablecontainer1_mouseDownHandler(event)"
                                      styleName="userstory">
                
                    <fx:Style source="styles/styles.css"/>
                    <fx:Script>
                        <![CDATA[
                            [Bindable]
                            public var userStoryText:String;
                
                            protected function skinnablecontainer1_mouseUpHandler(event:MouseEvent):void {
                                this.stopDrag();
                            }
                            protected function skinnablecontainer1_mouseDownHandler(event:MouseEvent):void {
                                this.startDrag();
                            }
                        ]]>
                    </fx:Script>
                    <s:TextArea x="5" y="5" width="275" height="135" text="{userStoryText}" fontFamily="notes" fontSize="24"/>
                </s:SkinnableContainer>
                

                Now  I get the warning:
                "CSS type selectors are not supported in components:  'spark.components.Application'". It is in the line with mouseUp="" What  has this line to do with CSS? But with CSS there is my problem. I have  in styles.css defined:

                .userstory {
                    borderSkin: Embed(source="assets/story.png");
                }
                

                But  this css class is not used, so this component does not have this  background image.

                 

                I think the main problem for me is,  that first I start learning flex version 3, but only do some basic  stuff. So I have a little knowledge, and now I have to use Flex 4,  because one flex library, needs Flex 4 and I will test it before I will  buy it.

                 

                So thanks a lot for your help!

                 

                Best  Regards PHANTOMIAS

                • 5. Re: Prefix fx for element fx:Script not bound
                  PHANTOMIASA Level 1

                  The warning "CSS type selectors are not supported in components:   'spark.components.Application'" still exists, but I did this with a skin:

                  <?xml version="1.0" encoding="utf-8"?>
                  <s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                        xmlns:s="library://ns.adobe.com/flex/spark"
                                        xmlns:mx="library://ns.adobe.com/flex/mx"
                                        mouseUp="skinnablecontainer1_mouseUpHandler(event)"
                                        mouseDown="skinnablecontainer1_mouseDownHandler(event)"
                                        skinClass="skin.SkinBackgroundImageUserStory"
                                        width="300" height="150">
                  

                   

                  So I create a SkinBackgroundImageUserStory with this content:

                  <?xml version="1.0" encoding="utf-8"?>
                  <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
                          xmlns:mx="library://ns.adobe.com/flex/mx"
                          xmlns:s="library://ns.adobe.com/flex/spark">
                  
                      <fx:Metadata>
                          [HostComponent("spark.components.SkinnableContainer")]
                      </fx:Metadata> 
                  
                      <s:states>
                          <s:State name="normal" />
                          <s:State name="disabled" />
                      </s:states>
                  
                      <s:BitmapImage source="@Embed('styles/assets/story.png')" left="0" right="0" top="0" bottom="0"/>
                      <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" />
                  </s:Skin>
                  
                  

                  So I have a background, but there is a problem. Attached a screenshot:

                  http://img85.imageshack.us/img85/8080/bimg.jpg

                  The problem is, the background image is in the background, but I want, that the text of userStoryText is in front and you can see the full background image and not the white area of this text. I can change from

                  <s:TextArea />
                  

                  to

                  <s:Label />

                  Then it works. Is this okay?

                   

                  Also, because the CSS does not work, the font family is not used. For that, I do not have a solution and for thar error with the CSS

                   

                  Perhaps someone has an idea how to solve?

                  • 6. Re: Prefix fx for element fx:Script not bound
                    David_F57 Level 5

                    hi,

                     

                    CSS works differently in flex 4, I don't really use css so I haven't looked into it., You can use a label thats fine, you don't need css to set a font to a label or a text area. Look at font embedding if you want to ensure that the font is always available.

                     

                    http://blog.flexexamples.com/2008/10/15/embedding-fonts-in-flex-gumbo/

                     

                    this is an example of using embedded font.

                     


                     

                    David.

                    • 7. Re: Prefix fx for element fx:Script not bound
                      PHANTOMIASA Level 1

                      I think I did this in this way.

                      In my CSS:

                       

                      @font-face {
                          src: url("fonts/rabiohead.ttf");
                          fontFamily: "notes";
                      }
                      

                       

                      And then I connect it to the Label:

                      <s:Label x="5" y="5" width="275" height="135" text="{userStoryText}" fontFamily="notes" fontSize="24" color="#FFFFFF"/>
                      

                       

                      But the fontFamily is not used.

                       

                      Update:

                      If I change the

                      <s:Label ... />

                      to

                      <mx:Label ... />

                      then it is working. So this would be a work-around. But how to make this with the Spark component?

                       

                      Best Regards.