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?
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.
Related
I need to capture and modify the contents of a paste operation in my Flex 4 application. I am listening for the TextOperation.CHANGING event, pulling out the PasteOperation, and setting its textScrap property. Everything seems to be working, except that after I modify the textScrap, a newline character is added to the paste. I have created some sample code that illustrates the simplest version of the problem. I am not actually changing the copy, I am grabbing the existing textScrap's textFlow, creating a new TextScrap with it, and setting it on the PasteOperation. I did this to rule out TextFlow creation as the problem:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import flash.desktop.Clipboard;
import flash.desktop.ClipboardFormats;
import flashx.textLayout.edit.TextScrap;
import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.operations.PasteOperation;
import flashx.textLayout.tlf_internal;
import spark.events.TextOperationEvent;
use namespace tlf_internal;
protected function textArea_changingHandler(event:TextOperationEvent):void
{
if (event.operation is PasteOperation)
{
var pasteOp:PasteOperation = event.operation as PasteOperation;
pasteOp.textScrap = new TextScrap(pasteOp.textScrap.textFlow);
}
}
]]>
</fx:Script>
<s:TextArea id="textArea" changing="textArea_changingHandler(event)"/>
</s:Application>
Thanks in advance,
Gerry
This appears to be a bug that Adobe fixed in sdk 4.6.
As some additional information, replacing the pasteOp.textScrap line above with:
pasteOp.textScrap = pasteOp.textScrap.clone() used to throw a null pointer exception, and in 4.6 that works too now.
Also, this bug only appeared when the textarea / textinput was empty. if there was something already in there, everything worked as expected.
I have a UIComponent (tried it also with Canvas) and some icons in it (sub views). On the UIComponent I defined some extra ContextMenuItems.
Now when I'm testing it, the context menu appears only on the subviews (icons) with a right-click.
I've checked the documentation but found nothing about required properties for using context menus.
Do you have any ideas why it's only on subviews?
This is probably happening because your UIComponent's (or Canvas') graphics are clean/empty. If the component doesn't have any "content" it will act as transparent, which means the click event will not be caught.
If you are using a Canvas there's a simple way to check this out, try to add some background color and it should work:
<mx:Canvas backgroundColor="#FFFFFF" backgroundAlpha="0.001"/>
I think this is what you're looking for:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="onCreationComplete()">
<fx:Script>
<![CDATA[
private function onCreationComplete():void
{
var menu:ContextMenu = new ContextMenu();
menu.customItems.push(new ContextMenuItem('weee'));
menu.customItems.push(new ContextMenuItem('weee2'));
menu.hideBuiltInItems();
canvas.contextMenu = menu;
}
]]>
</fx:Script>
<mx:Canvas id="canvas" backgroundColor="#000000" height="50%" width="50%" >
<s:Button label="blarg" />
</mx:Canvas>
</s:Application>
Notice how I'm creating a menu, then adding items, which then replaces the contextMenu property. This should work on any object that extends InteractiveObject.
What the problem was is the mouseEnabled="{false}" property in one of the parent-parent containers. I removed it and it works now.
hello i want to apply tween motion on UIcomponents using actionscript in flex.
i searched alot but didn't find something useful help required.
thanks in advance.
The code below creates a move tween for a button in actionscript.
Clicking anywhere on the screen will move the button to that location.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" click="moveButton(event)">
<mx:Script>
<![CDATA[
import mx.effects.Move;
private function moveButton(event:MouseEvent):void {
var myMove:Move = new Move();
myMove.target = myButton;
myMove.xTo = event.stageX;
myMove.yTo = event.stageY;
myMove.play();
}
]]>
</mx:Script>
<mx:Button id="myButton" />
</mx:Application>
For a more advanced example you could look at the Flex documentation: http://livedocs.adobe.com/flex/3/html/help.html?content=createeffects_3.html
It shows an example how to extend and use the TweenEffect class to create your own effect class.
Caurina Tweener: http://code.google.com/p/tweener/
I have a problem in applying the styles for scroll bar skins through actionscript.
In css we specify as
thumbOverSkin: Embed(source="assets/thumb_over.png",scaleGridLeft="4",scaleGridTop="4", scaleGridRight="5", scaleGridBottom="5");
In actionscript we specify as
setStyle("thumbOverSkin", someImageClass);
How can we specify scaleGrid properties in the above statement?
Thanks for the help in advance.
If you're using Flex 3, that someImageClass, if it's just an image, could just be assigned to a variable. Try this out, it shows two ways of setting simple skins on Flex 3 components:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
Button
{
overSkin: Embed("assets/over_button.png");
}
</mx:Style>
<mx:Script>
<![CDATA[
[Embed(source="assets/up_button.png", scaleGridLeft="15",scaleGridTop="15", scaleGridRight="25", scaleGridBottom="25")]
public static const UP_SKIN:Class;
]]>
</mx:Script>
<mx:Button id="button" click="button.setStyle('upSkin', UP_SKIN)"/>
<mx:HSlider id="sizer"
minimum="100" maximum="1000"
liveDragging="true"
change="{button.width = sizer.value;button.height = sizer.value/2}"/>
</mx:Application>
(the up_button.png was a simple red square shrunken to 40x40 for testing).
If you're using Flex 4, the Group, which extends Skin, has full 9-slice scaling baked in and you can do a lot more with them.
Hope that helps,
Lance
Given the following:
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2009/mxml">
<mx:Panel title="blah">
<mx:Button />
</mx:Panel>
</mx:Application>
Can you tell me where child elements (ex. mx:Button) are assigned in parent elements (ex. mx:Panel) by default by mxmlc. You can set the "DefaultProperty" compiler metadata tag to specify where they are assigned but what does flex do when it is not specified.
For example I've traversed the source of all the flex classes mx:Panel inherits from and DefaultProperty is never mentioned, leading me to wonder what the default value of DefaultProperty.
sorry for any noobishness but i've read the docs inside out.
When writing AS based components, the default property lets you specify a property that you can use as a child-tag. Eg:
<MyComp:TextAreaDefaultProp>Hello</MyComp:TextAreaDefaultProp>
You could as well have used:
<MyComp:TextAreaDefaultProp defaultText="Hello" />
What happens when you don't specify? You don't get a value for that property. Given the following component:
package
{
// as/myComponents/TextAreaDefaultProp.as
import mx.controls.TextArea;
// Define the default property.
[DefaultProperty("defaultText")]
public class TextAreaDefaultProp extends TextArea {
public function TextAreaDefaultProp()
{
super();
}
// Define a setter method to set the text property
// to the value of the default property.
public function set defaultText(value:String):void {
if (value!=null)
text=value;
}
public function get defaultText():String {
return text;
}
}
}
Run this snippet:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" width="535" height="345"
xmlns:local="*">
<mx:VBox>
<local:TextAreaDefaultProp id="a" defaultText="Hello"/>
<local:TextAreaDefaultProp id="b" > World </local:TextAreaDefaultProp>
<local:TextAreaDefaultProp id="c" />
<mx:TextArea id="z"/>
<mx:Button click="{z.text = a.defaultText
+ ' ' + b.defaultText
+ ' ' + (c.defaultText.length);}" />
</mx:VBox>
</mx:Application>
The compiler actually treats child components of containers as a special case. Take a look at the childDescriptors property of mx.core.Container for some explanation. When you create a Flex component instance in MXML, it isn't instantiated immediately. Instead, a "descriptor" is created, and that is used to instantiate the component at some future time, as determined by the container's creationPolicy property. If you add the -keep-generated-actionscript argument (or the shortened version, -keep) to your compiler arguments, you'll be able to see the AS3 code that the compiler generates from MXML.