TextField in AS3 - programming a click listener - apache-flex

I want to add a simple piece of text to the stage and add a listener to do something when the user clicks it.
Here's my TextLink class:
package some.package
{
import flash.display.Sprite;
import flash.external.ExternalInterface;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
public class TextLink extends Sprite
{
public var tf:TextField = new TextField();
public var bspr:Sprite = new Sprite();
public function TextLink(tx:int, ty:int, tft:String):void
{
tf.text = tft;
tf.x = tx;
tf.y = ty;
tf.autoSize = TextFieldAutoSize.LEFT;
bspr.addChild(tf);
this.addChild(tf);
}
}
}
And here is the way I am calling it, along with the listener:
public function test_array_of_objects():void
{
var tmp:TextLink = new TextLink(30, 30, "some text");
tmp.addEventListener(MouseEvent.CLICK, roverNotify);
addChild(tmp);
}
protected function roverNotify(e:Event):void
{
ExternalInterface.call("console.log", "got a click");
}
...But I don't get a message for some reason.
I've imported everything successfully. Any thoughts on what else I can try?

Is your TextLink class an event dispatcher? You're trying to add a listener to the TextLink object, but the click listener needs to be attached to the text field that you're using inside TextLink. TextLink needs to be a DisplayObject of some kind to inherit the dispatching capabilities.
Also, constructors should not specify a return type (since they're just returning themselves) -- the :void should not be there where your TextLink constructor is.

Does function TextLink require something like this at the beginning:
var tf:Text = new Text();

Is the problem with clicking the Sprite or getting the event to fire? If it's the former you could try adding the code below.
tmp.mouseChildren = false;
tmp.buttonMode = true;

ExternalInterface.call("console.log", "got a click");
You have a JavaScript function defined like this??:
function console.log(inputString) {
//do something
}
Edit: Nevermind the above, forgot about Firebug.
Also, TextLink doesn't need to be an event dispatcher, though you may want to have TextLink set its mouseChildren property to false (unless you need to be able to select that text), so that you don't inadvertently trigger events on the TextField, and buttonMode to true.
Edit: Also, what's the point of?:
var bspr:Sprite = new Sprite();
bspr.addChild(tf);
Final edit
How about this? http://code.google.com/p/fbug/issues/detail?id=1494
Yes, you are correct, in FF3 the console is injected only when the page has
javascript and uses window.console.
If you put any js that accesses the console before the Flash loads it should work, eg
<script>
var triggerFirebugConsole = window.console;
</script>
Let us know if this works. It's unlikely that we can fix this soon.

Related

Unable to add tooltip, onmouseover, etc events to components created on RunTime

I am facing a weird situation here. I am unable to add tooltips, mouse (click,mouseover,mouseout) events to a runtime created button inside a container(HBox).
This init() function executes under creationComplete event.
private function init():void
{
for(var i:int=0;i<5;i++)
{
myButton = new Button();
myButton.id="mBtn"+i;
myButton.label="Test";
myButton.addEventListener(MouseEvent.CLICK,onDblClick);
camCont.addChildAt(myButton,i); //camCont is the HBox control
}
}
protected function onDblClick(event:MouseEvent):void
{
Alert.show("Click event works !!!");
}
When this application is executed, the 5 buttons are created, but click event is not fired. Can someone guide me where am i going wrong ?
Thanks.
you can try this code (this works!):
//Code
public function init():void{
var btn:Button = new Button();
btn.addEventListener(MouseEvent.CLICK, showAlert);
container.addChild(btn);
}
private function showAlert(event:Event):void{
Alert.show("CLICK!!!");
}
//MXML
<mx:HBox id="container"/>
You can try here. The source code is here.
I hope it will be helpful.

creating submenu's in flex context menu

Is there any workaround to create submenu in a flex context menu other than stopping right click from javascript.
Regards,
Hi Frank,
Yes, I want to create submenus in a context menu. Can you help me here.
Regards,
Hi Frank,
I need the context menu for the application not for datagrid.
In my initial question the phrase "other than stopping right click from javascript" means
"catch the right click in html, call a javascript function and over js call a as function."
The project that you have specified does the above procedure. I don't want to use this
procedure. Is there any other way for achieving submenus in a flex context menu. Could you
please tell me if so..
Regards,
Arvind
Yes, there is.
I don't know, what you exactly mean with this:
other than stopping right click from
javascript.
But, if you want to create a entry in submenu, do this:
//Instance of my own class
private var myContext:myContextMenu = new myContextMenu();
application.contextMenu = myContext.myContextMenu;
//Here is the Class:
package com.my.components
{
/* ////////////////////////////////////////////
///// My Context MenĂ¼ /////////////////////
///////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////
//to use: //
// private var myContext:MyContextMenu = new MyContextMenu(); //
// init() in creationComplete //
// application.contextMenu = myContext.myContextMenu; //
////////////////////////////////////////////////////////////////////////////// */
import flash.display.Sprite;
import flash.events.ContextMenuEvent;
import flash.net.URLRequest;
import flash.net.navigateToURL;
import flash.text.TextField;
import flash.ui.ContextMenu;
import flash.ui.ContextMenuBuiltInItems;
import flash.ui.ContextMenuItem;
public class MyContextMenu extends Sprite
{
public var myContextMenu:ContextMenu;
private var menuLabel:String = String.fromCharCode(169)+" My Company GmbH";
public function MyContextMenu()
{
myContextMenu = new ContextMenu;
removeDefaultItems();
addCustomItems();
myContextMenu.addEventListener(ContextMenuEvent.MENU_SELECT, menuSelectHandler);
super();
}
private function removeDefaultItems():void
{
myContextMenu.hideBuiltInItems();
var defaultItems:ContextMenuBuiltInItems = myContextMenu.builtInItems;
defaultItems.print = true;
}
private function addCustomItems():void
{
var item:ContextMenuItem = new ContextMenuItem(menuLabel);
myContextMenu.customItems.push(item);
item.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,menuItemSelectHandler);
}
private function menuSelectHandler(event:ContextMenuEvent):void
{
}
private function menuItemSelectHandler(event:ContextMenuEvent):void
{
navigateToURL(new URLRequest('http://www.my-company.de'));
}
private function createLabel():TextField
{
var txtField:TextField = new TextField();
//txtField.text = textLabel;
txtField.text = "RightClickHere";
return txtField;
}
}
}
Have fun
EDIT:
There is an interesting project here. They catch the right click in html, call a javascript function and over js call a as function.
Unfortunately, the limitation of FP or NativeMenu APi allowed just on level contextmenu. Read here
Frank

Flex switch item-renderer

I was wondering if anyone had any luck with the following senario in flex.
I'd like to be able to have a custom item renderer which delegates to another renderer inside.
The reason for this would be in a datagrid for instance displaying a checkbox if the dataprovider for the row had a boolean value. Using the default item renderer when the value was a non boolean.
Basically I was hoping to use a proxy object (though not necessarily the proxy class) so that I could a renderer which delegated all of its responsibilties to a sub renderer.
Hard to explain.
Edit 1
I think the following gives a clearer idea of what I had in mind. This is only knocked up quickly for the purpose of showing the idea.
SwitchingRenderer.as
package com.example
{
import mx.controls.CheckBox;
import mx.controls.dataGridClasses.DataGridItemRenderer;
import mx.controls.listClasses.BaseListData;
import mx.controls.listClasses.IDropInListItemRenderer;
import mx.core.IDataRenderer;
import mx.core.UIComponent;
public class SwitchingRenderer extends UIComponent implements IDataRenderer, IDropInListItemRenderer
{
private var checkboxRenderer:CheckBox;
private var defaultRenderer:DataGridItemRenderer;
private var currentRenderer:IDataRenderer;
public function SwitchingRenderer()
{
this.checkboxRenderer = new CheckBox();
this.defaultRenderer = new DataGridItemRenderer();
this.currentRenderer = defaultRenderer();
super();
}
public function get data():Object
{
//If the data for this cell is a boolean
// currentRender = checkBoxRenderer
// otherwise
// currentRenderer = defaultRenderer
}
public function set data(value:Object):void
{
currentRenderer.data = value;
}
public function get listData():BaseListData
{
return currentRenderer.listData;
}
public function set listData(value:BaseListData):void
{
currentRenderer.listData = value;
}
}
}
If you're using Flex 4 spark components look into the itemRendererFunction,
Here is a good sample from the interwebs.
Unfortunately, Flex 3 components, such as the DataGrid do not support that.
You're a bit vague on what you'd be displaying if the data sent into the itemRenderer was not a Boolean value. But, you can easily modify the visual appearance of a component based on the data change event, including swapping visible properties of a component's children, changing states or change the selectedIndex of a ViewStack. All these things can be done within an itemRenderer w/o issues.
Edit:
Based on the user's additional posting, I'd add that what he is after can be done like this:
public function get data():Object
{
if(this.data is Boolean){
checkBoxRenderer.visible = true;
defaultRenderer.visible = false;
} else {
checkBoxRenderer.visible = false;
defaultRenderer.visible = true;
}
}

Can I create LinkButtons that wrap like textfields?

I basically want to make things easier by just looping LinkButtons instead of making textfields because the linkbuttons have the rollovers already programmed.
But I have a lot of text and it just keeps going. I want it to wrap like I can do with textfields.
Thanks
package {
import mx.controls.LinkButton;
import flash.text.TextLineMetrics;
public class multiLineLinkButton extends LinkButton {
override protected function createChildren():void {
super.createChildren();
if (textField){
textField.wordWrap = true;
textField.multiline = true;
}
}
override public function measureText(s:String):TextLineMetrics {
textField.text = s;
var lineMetrics:TextLineMetrics = textField.getLineMetrics(0);
lineMetrics.width = 700;
lineMetrics.height = textField.textHeight;
return lineMetrics;
}
}
}
This is the component, but like I said everything is automatically centered.
I've tried paddingLEFT =0; and trying to setStyle("paddingLEFT", 0); but those methods don't work.
var test:multiLineLinkButton = new multiLineLinkButton();
test.label = "sdfdsfdsfdsfsdfsdfsdfdsfsdfdsfdsdsfdsfdsfdffsdfdsfdfdsfdsfdsfdsfdsfdsfsdfdsfdfdsfdfdsfdsfsdfsdfsdf";
test.setStyle("textAlign","left");
var metrics:TextLineMetrics = measureText(test.label);
trace(metrics.height);
myCanvas.addChild(test);
so metrics.height is giving me a height of 14, which i believe is a single line even though it wraps.
This guy did it:
http://ooine.com/index.php/2009/10/12/flex-linkbutton-word-wrap/
FYI, this was the first hit on Google for the search term "flex linkButton word wrap"

google maps flex API: handle both double and single clicks?

how do you tell a single mouse click from a double click? my single
click listener seems to be trapping all the double clicks as well:
tz locator
it's a known issue for the flash/flex API but the js workaround doesn't seem to handle both either: code.google.com
Might need a bit of clarification, but make sure you are using the Google Map's MapMouseEvent, not the Flash API's click events (please assume this code in inside a Map subclass):
public class GoogleMap extends Map
{
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapMouseEvent;
public function GoogleMap():void
{
super();
this.key = "YOUR_API_KEY";
addEventListener(MapEvent.MAP_READY, _onMapReady);
addEventListener(MapMouseEvent.CLICK, _onMapClick);
addEventListener(MapMouseEvent.DOUBLE_CLICK, _onMapDoubleClick);
}
protected function _onMapClick(event:MapMouseEvent):void
{
trace("single!");
var mousePoint:Point = new Point(mouseX, mouseY);
var mousePointLocal:Point = globalToLocal(mousePoint);
var mouseLatLng:LatLng = this.fromViewportToLatLng(mousePointLocal);
}
protected function _onMapDoubleClick(event:MapMouseEvent):void
{
trace("double!");
}
protected function _onMapReady(event:MapEvent):void
{
trace("ready!")
}
}

Resources