Mark Foster's Blog » Flash/ActionScript/Flex http://www.markfosteronline.com Misadventures in Technology Sat, 22 May 2010 05:18:27 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 How to add a custom context menu to a Spark TextArea in Flex 4 http://www.markfosteronline.com/2010/05/22/how-to-add-a-custom-context-menu-to-a-spark-textarea-in-flex-4/ http://www.markfosteronline.com/2010/05/22/how-to-add-a-custom-context-menu-to-a-spark-textarea-in-flex-4/#comments Sat, 22 May 2010 05:18:27 +0000 mfoster http://www.markfosteronline.com/?p=756 There is a current known issue with adding custom context menus on a RichEditableText Spark component:
http://bugs.adobe.com/jira/browse/SDK-23926

This includes the TextArea component. Essentially, any custom context menus will not show up. There is a work around mentioned in the comments for the bug on Adobe’s website but I thought I would re-hash and show an example since this had me a bit stumped.

The work around is to attach the context menu to the TextArea’s TextDisplay object via the “textDisplay()” accessor method. I have created a simple example with source.

<?xml version="1.0" encoding="utf-8"?>
<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="400" minHeight="200" backgroundColor="#9FA0D4" width="500" height="300"
               creationComplete="init();" viewSourceURL="srcview/index.html">
    <s:layout>
        <s:BasicLayout/>
    </s:layout>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            private function init():void{
                var cm:ContextMenu = new ContextMenu();
 
                var red:ContextMenuItem = new ContextMenuItem('Red',false,true,true);
                red.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, handleRed);
 
                var green:ContextMenuItem = new ContextMenuItem('Green',false,true,true);
                green.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, handleGreen);
 
                var blue:ContextMenuItem = new ContextMenuItem('Blue',false,true,true);
                blue.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, handleBlue);
 
                cm.customItems.push(red);
                cm.customItems.push(green);
                cm.customItems.push(blue);
                cm.clipboardMenu = true;
                textArea.textDisplay.contextMenu = cm;
            }
 
            private function handleRed(e:Event):void{
                textArea.setStyle('contentBackgroundColor', 'red');
            }
 
            private function handleGreen(e:Event):void{
                textArea.setStyle('contentBackgroundColor', 'green');
            }
 
            private function handleBlue(e:Event):void{
                textArea.setStyle('contentBackgroundColor', 'blue');
            }
        ]]>
    </fx:Script>
    <s:TextArea id="textArea" x="161" y="74" text="This is a Flex 4 Spark TextArea.  Right click to see the custom context menu. "/>
</s:Application>
]]> http://www.markfosteronline.com/2010/05/22/how-to-add-a-custom-context-menu-to-a-spark-textarea-in-flex-4/feed/ 0 SWFObject flashvars, params, and attributes http://www.markfosteronline.com/2010/01/25/swfobject-flashvars-params-attributes/ http://www.markfosteronline.com/2010/01/25/swfobject-flashvars-params-attributes/#comments Mon, 25 Jan 2010 05:08:33 +0000 mfoster http://www.markfosteronline.com/?p=732 I have been working with SWFObject a bit lately and was a little confused by how the flashvars, params, and attributes arguments for the embedSWF() function differ from each other and what exactly SWFObject did with them. Based on the documentation, I did a little experiment where I used each and then viewed the generated source using the Web Developer Toolbar for Firefox.

Here is my HTML and SWFObject JavaScript which uses the dynamic publishing method as described in the SWFObject Documentation:

<html>
 
<head>
<script type="text/javascript" src="swfobject/swfobject.js"></script>
</head>
 
<body>
<div id="embedhere">Embed Fail</div>
<script type="text/javascript">
 
	var flashvars = {};
	flashvars.my_flashvar1 = "my_flashvar_value1";
	flashvars.my_flashvar2 = "my_flashvar_value2";
 
	var params = {};
	params.my_param1 = "my_param_value1";
	params.my_param2 = "my_param_value2";
 
	var attributes = {};
	attributes.my_attribute1 = "my_attribute_value1";
	attributes.my_attribute2 = "my_name_attribute";
 
	swfobject.embedSWF("Test.swf", "embedhere", "300", "250", "9.0.0", false, flashvars, params, attributes);
 
</script>
</body>
 
</html>

Here is what the generated source looks like after I load the page in Firefox and SWFObject has done its thing:

<html><head>
 
 
<script type="text/javascript" src="swfobject/swfobject.js"></script>
<style media="screen" type="text/css">#embedhere {visibility:hidden}</style></head><div firebugversion="1.5.0" style="display: none;" id="_firebugConsole"></div><body>
<object data="300x250TestAdAS3.swf" name="my_name_attribute" id="my_id_attribute" type="application/x-shockwave-flash" height="250" width="300"><param value="my_param_value" name="my_param"><param value="clickTAG=http%3A//www.example.com" name="flashvars"></object>
<script type="text/javascript">
	var clickTAG = escape("http://www.example.com");
	var flashvars = {clickTAG:clickTAG};
 
	var params = {
		my_param: "my_param_value"
	};
 
	var attributes = {};
	attributes.id = "my_id_attribute";
	attributes.name = "my_name_attribute";
 
	swfobject.embedSWF("Test.swf", "embedhere", "300", "250", "9.0.0", false, flashvars, params, attributes);
</script>
</body></html>

As you can see the attributes are just attributes to the object tag. The parameters show up inside of param tags with one param tag for each param following the object tag. I would be curious to hear if anyone has used the “attributes” and “parameters” arguments when embedding Flash with SWFObject and for what.

The flashvars argument is the most useful in my case because that is how you can get external data passed into the SWF. I think a lot of folks load in their data into a Flash movie using a separate call to load an XML document. That is the way to go if you are pulling a large amount of data dynamically based on some type of user input.

If you only have a few name value pairs that are not going to change, passing these in during the embed using flashvars is probably the better option. Assigning these values during the embed will save a second round trip you would normally make to get an XML document.

So let’s say you decide you want to pass in a couple key-value pairs to a Flash movie using SWFObject. In the code example above there are two key-value pairs we assign to flashvars: “my_flashvar1″ and “my_flashvar1″. Now you will want access these two inside your ActionScript code.

For ActionScript 2 it would look something like this:

trace(_level0.my_flashvar1);
trace(_level0.my_flashvar2);

ActionScript 3 requires another line of code to get to the same place:

var paramList:Object = this.root.loaderInfo.parameters;
trace(paramList["my_flashvar1"]);
trace(paramList["my_flashvar2"]);

A word of caution: When you use SWFObject’s embedSWF() function there are quite a few optional parameters. Be sure that you put a “false” in for optional parameters you don’t intend to use before any parameters you ARE going to use. In the embed example below I want to use the flashvars option but I don’t want to use the option to specify an express install file so I put in a false in that spot. Also, just be careful in general because there are a total of 10 different arguments for the embedSWF() function (including all the optional ones) so it is easy to get them in the wrong order and such.

swfobject.embedSWF("Test.swf", "embedhere", "300", "250", "9.0.0", false, flashvars);

Take a look at the SWFObject documentation for a description of each parameter.

That’s it!

]]> http://www.markfosteronline.com/2010/01/25/swfobject-flashvars-params-attributes/feed/ 1