How do i call a mxml file in a pop up window - apache-flex

Sorry i am new with flex , i need some help.
I have created a mxml file , and i would like to display it in a pop up window.
i have alrdy done the pop up window, but i couldn't display the mxml file i have done .
I am not trying to call the pop up window in the mxml page.
this is my popup window i have done:
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
import mx.controls.Text;
]]>
</mx:Script>
<mx:Button label="Cancel" click="PopUpManager.removePopUp(this);"/>
Thanks

Right before your <mx:Button> open a new tag ('<') and start typing the file name of your MXML file. Flash builder should auto complete it for you. It should look something like this:
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
import mx.controls.Text;
]]>
</mx:Script>
<yourComponentNamespace:YourCustomComponent />
<mx:Button label="Cancel" click="PopUpManager.removePopUp(this);"/>
That's it. You can now set properties just like you would normally on all other components.
P.S. If you're new to Flex and are just starting, why are you using Flex 3 instead of the newer Flex 4 components? (mx = Flex 3, s = Flex 4).

Related

modifying the contents of a PasteOperation in Flex 4

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.

Flex: rounded corners for dynamic created images

there a better way as this example
to create round corners for dynamic (addChild or addElement) created Images?
ok, here is a custom class http://santobay.blogspot.com/2010/04/rounded-corner-image-in-flex.html . save this code as com/RoundedImage.as , create new mxml file with this code
<mx:Application name="Image_mask_test"
xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:custom="com.*"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:HBox id="hbox" width="100%">
<custom:RoundedImage source="images/test.jpg" width="250" height="250" cornerRadius="15"/>
</mx:HBox></mx:Application>
and compile. For create images dynamic use this code:
<fx:Script>
<![CDATA[
import com.RoundedImage;
public function createImage():void {
var newImage:RoundedImage = new RoundedImage();
newImage.source = "images/test.jpg";
newImage.cornerRadius = 20;
hbox.addChild(newImage);
}
]]>
</fx:Script>
No, you must use a mask, if you add it dynamically.
However, you could add a 'frame' on top of the image, if the background is solid, you can use this trick.

how to apply tween motion on UIcomponents in flex using actionscript?

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/

Prefix for element not bound

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.

Applying skins through actionscript

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

Resources