im developing a simple Mxml application using flex 3. I have used simple text and combo box.
combobox contains items left right up and down while i click each element in combo box the scrolling text will scroll in selected direction it is working fine.
my question is how i can modify this application by pressing key board Arrow keys up, down, right and left. instead of using combobox elements??
my application code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Script>
<![CDATA[
public var mytimer:Timer=new Timer(10);
[Bindable]public var arr:Array=new Array("upScroll","LeftScroll","right","down");
private function initApp():void
{
mytimer.start();
mytimer.addEventListener(TimerEvent.TIMER,scrollme);
}
private function scrollme(event:TimerEvent):void
{
if(cmb.selectedLabel=="LeftScroll")
{
if(mytext.x==0)
mytext.x=this.width-mytext.width;
mytext.x--;
}
if(cmb.selectedLabel=="upScroll")
{
if(mytext.y==0)
mytext.y=600;
mytext.y--;
}
if(cmb.selectedLabel=="right")
{
if(mytext.x==this.width-mytext.width)
mytext.x=0;
mytext.x++;
}
if(cmb.selectedLabel=="down")
{
if(mytext.y==600)
mytext.y=0;
mytext.y++;
}
}
]]>
</mx:Script>
<mx:Text id="mytext" text="SCROLLING" fontSize="16" fontStyle="italic" fontWeight="bold"/>
<mx:ComboBox dataProvider="{arr}" prompt="Select" id="cmb" change="initApp()"/>
</mx:Application>
You can subscribe to Keyboard events of an Application:
<s:Application
...
creationComplete="creactionComplete()">
function creactionComplete():void
{
addEventListener(KeyboardEvent.KEY_DOWN, keyHitHandler);
}
private function keyHitHandler(event:KeyboardEvent):void
{
if(event.keyCode == Keyboard.DOWN)
//...
if(event.keyCode == Keyboard.UP)
//...
}
Related
How can i remove a button in actionscript when we pass that button id.
<fx:Script>
<![CDATA[
public function removebutton(buttonid:String):void
{
hb1.removeElementAt(buttonid);
}
]]>
</fx:Script>
<s:HGroup id="hb1">
</s:HGroup>
As SharpEdge said, there is no public function available to get the element by id, but the work around is:
public function removebutton(buttonid:String):void
{
for (var i:int = 0; i < hb1.numChildren; i++)
{
var object:Object = hb1.getChildAt(i);
if (object.id == buttonid)
{
hb1.removeElementAt(i);
break;
}
}
}
You can use getChildByName(), there is no getElementByID() in Flex.
public function removebutton(buttonid:String):void
{
hb1.removeElement(hb1.getChildByName(buttonid) as IVisualElement);
}
I'm using mx:DataGrid and I cannot change to spark (it's a legacy project). The DataGrid is editable and when the users get in the last column I want to add a new column and start the edit mode in the first column of the new row. I can do this.
My problem is that sometimes the last column cannot be edited, so I added an itemEditBeginning listener to stop the edit and add the new row. That's my problem. When the user get in the last field, the new row is added but I cannot see it. I have to click in the column header to sort datagrid data, then the new rows appears. It's kind of a delay.
My code is bigger, but this simple code can reproduce the same 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"
creationComplete="application1_creationCompleteHandler(event)"
minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.CollectionEvent;
import mx.events.CollectionEventKind;
import mx.events.DataGridEvent;
import mx.events.FlexEvent;
[Bindable] public var itens:ArrayCollection;
protected function application1_creationCompleteHandler(event:FlexEvent):void {
itens = new ArrayCollection();
itens.addEventListener(CollectionEvent.COLLECTION_CHANGE, onCollectionChange);
itens.addItem({a: '1', b: '2'});
}
protected function onCollectionChange(event:CollectionEvent):void {
if (event.kind == CollectionEventKind.ADD) {
var row:int = itens.length - 1;
var column:int = 0;
var args:Array = [row, column];
callLater(moveTo, args);
}
}
protected function moveTo(row:int, col:int):void {
itensDg.editedItemPosition = { rowIndex:row, columnIndex:col };
}
protected function addInfo():void {
itens.addItem({a: '10', b: '20'});
}
protected function itensDg_itemEditBeginningHandler(event:DataGridEvent):void {
if (event.columnIndex == 1) {
event.preventDefault();
addInfo();
}
}
]]>
</fx:Script>
<mx:DataGrid id="itensDg" dataProvider="{itens}" editable="true"
itemEditBeginning="itensDg_itemEditBeginningHandler(event)" />
</s:Application>
Any tips about how to solve this?
Thanks.
Try updating addInfo() as follows:
protected function addInfo():void {
itens.addItem({a: '10', b: '20'});
itens.refresh();
}
Trish answer led me to a solution that works. DataGrid has its own itemEditBeginning listener that modifies the editedItemPosition. Firstly I tried to stop the propagation of the itemEditBeginning event, but I realized some focus and mouse events modifies the editItemPosition too. So, the item was added in the array, my onCollectionChange listener was called, but then other events modified the editedItemPosition later.
So, instead of changing the editedItemPosition in the CollectionEvent listener, I simply changed it after adding the element:
protected function addInfo():void {
itens.addItem({a: '10', b: '20'});
var row:int = itens.length - 1;
var column:int = 0;
var args:Array = [row, column];
callLater(moveTo, args);
}
I need to close the popup(adobe flex), non modal window if I click on the parent page of the popup. I have to do the out of focus check and then do some validation before close the popup. So what I was thinking that is there any inbuilt focus check event or do we need to create custom event for that ?
In your popup you need to listen for mouse up event on the popup itself, and the stage. On the popup if you catch a mouse up event, stop it from getting to the stage. Then, if you receive a mouse up event on the stage you will know that it was outside of the popup and can close the popup.
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" creationComplete="onCreationComplete()">
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
private function onCreationComplete():void {
//listen for MouseUp events on the popup, and the stage
this.addEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
stage.addEventListener(MouseEvent.MOUSE_UP, handleStageMouseUp);
}
private function handleMouseUp(e:MouseEvent):void {
//catch any MouseUp events on the popup,
//and prevent them from getting to the stage
e.stopPropagation(); //don't let this event get to the stage
}
private function handleStageMouseUp(e:MouseEvent):void {
//if the stage fires a MouseUp event, the mouse event
//came from outside of the popup, so we can close it
closePopup();
}
private function validate():Boolean {
//add your validate code here
return true;
}
private function closePopup():void {
if ( validate() ) {
//clean up event listeners, and close popup
stage.removeEventListener(MouseEvent.MOUSE_UP, handleStageMouseUp);
PopUpManager.removePopUp(this);
}
}
]]>
</mx:Script>
</mx:Canvas>
I'm quite new to Flex and ActionScript, and I'm trying to do an application whose purpose is simply to be able to dynamically create rectangles on a panel: on mouse down the rectangle is created and updated on mouse move events (left button hold down), then the rectangle is achieved with mouse up.
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication 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="550" height="400"
creationComplete="this.onCreationComplete(event);">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.graphics.SolidColor;
import spark.primitives.Graphic;
import spark.primitives.Rect;
public static const WIDTH:int = 480;
public static const HEIGHT:int = 300;
public static const BACKGROUND:int = 0xEFEFEF;
public static const CURRENT_FILL:SolidColor = new SolidColor(0x00AA00, 0.75);
protected var rectangles:ArrayCollection = null;
protected var currentRect:Rect = null;
protected var dragging:Boolean = false;
protected function onCreationComplete(event:FlexEvent):void
{
this.rectangles = new ArrayCollection();
this.sprite.graphics.beginFill(BACKGROUND);
this.sprite.graphics.drawRect(0, 0, this.sprite.width, this.sprite.height);
this.sprite.graphics.endFill();
this.sprite.addEventListener(MouseEvent.MOUSE_DOWN, this.onMouseDown);
this.sprite.addEventListener(MouseEvent.MOUSE_UP, this.onMouseUp);
}
protected function onMouseDown(event:MouseEvent):void
{
this.currentRect = new Rect();
this.currentRect.y = 10;
this.currentRect.height = this.sprite.height - (10 * 2);
this.currentRect.x = event.localX;
this.currentRect.width = 1;
this.panel.addElement(this.currentRect);
this.dragging = true;
this.sprite.addEventListener(MouseEvent.MOUSE_MOVE, this.onMouseMove);
}
protected function onMouseUp(event:MouseEvent):void
{
if (this.dragging)
{
this.sprite.removeEventListener(MouseEvent.MOUSE_MOVE, this.onMouseMove);
this.rectangles.addItem(this.currentRect);
this.dragging = false;
}
}
protected function onMouseMove(event:MouseEvent):void
{
if (this.dragging)
{
this.currentRect.width = event.localX - this.currentRect.x;
}
}
]]>
</fx:Script>
<s:Panel id="panel" x="10" y="10" title="Calendar">
<s:SpriteVisualElement id="sprite" width="{WIDTH}" height="{HEIGHT}" />
</s:Panel>
</s:WindowedApplication>
All works fine but now I want to do some actions when the user clicks (or double clicks, or what you want) on a rectangle. I tried to add an event on each rectangle (this.currentRect.addEventListener(MouseEvent.DOUBLE_CLICK, myMethod) added in onMouseUp), but the corresponding method is never executed...
What's the problem?
Objects drawn with the graphics API are not event dispatchers. So use addElement to add the Spark primitive rects that you're creating but not using in any way (to a container such a Group) instead of using the graphics api to draw the shapes.
You might find it's better, however, to simply have the ArrayCollection contain a bunch of bindable data objects and use a DataGroup with itemRenderers to display the data.
You could keep track of the rectangles you have drawn in a collection and do a hit test with the rectangles on mouse clicks and determine if any rectangle is being clicked on.
How can I prevent CTRL+A from functioning with editable TextField()
The previous example only works with Flex Text and TextArea objects, this works with all flash.text.* objects.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
private var t:TextField;
private function init():void
{
t = new TextField();
t.height = 80;
t.width = 100;
t.type = TextFieldType.INPUT;
t.multiline = true;
var c:UIComponent = new UIComponent();
c.addChild( t );
foo.addChild( c );
addEventListener( KeyboardEvent.KEY_UP, edit );
addEventListener( KeyboardEvent.KEY_DOWN, edit );
}
private function edit( event:KeyboardEvent ):void
{
if( event.type == KeyboardEvent.KEY_DOWN && event.ctrlKey )
{
t.type = TextFieldType.DYNAMIC; // Dynamic texts cannot be edited. You might be able to remove this line.
t.selectable = false; // If selectable is false, then Ctrl-a won't do anything.
}
else
{
t.type = TextFieldType.INPUT;
t.selectable = true;
}
}
]]>
</mx:Script>
<mx:Canvas id="foo" height="90" width="110" backgroundColor="#FFFFFF" />
</mx:Application>
Not tested, but perhaps you could catch the selectAll event on the TextField and prevent it bubbling up, or clear the selection (not sure when the event is fired).
Use the setFocus function paired with a KeyboardEvent listener:
<xml version="1.0"?>
<!-- menus/SimpleMenuControl.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="800" initialize="init()" >
<mx:TextInput id="nom"/>
<mx:Script>
<![CDATA[
private function init():void
{
addEventListener( KeyboardEvent.KEY_UP, edit );
addEventListener( KeyboardEvent.KEY_DOWN, edit );
}
private function edit( event:KeyboardEvent ):void
{
if( event.type == KeyboardEvent.KEY_DOWN && event.ctrlKey ) setFocus();
else nom.setFocus();
nom.selectionEndIndex = nom.selectionBeginIndex = nom.text.length;
}
]]>
</mx:Script>
</mx:Application>
The setFocus means that the Text object will no longer listen to any keyboard events.
I would not recommend using the enabled property as that will gray-out the textarea.