I have a simple TextArea
<s:TextArea id="taData" keyUp="keyListener(event)" focusEnabled="false" fontFamily="Courier New" fontSize="12" left="10" right="10" top="40" bottom="10"/>
the keyListener allows tab to be used like this
private function keyListener(event:KeyboardEvent):void
{
if (event.keyCode == Keyboard.TAB)
{
event.currentTarget..insertText("\t");
}
}
Everything works as expected, but the undo buffer is reset / stops at the point that a tab was inserted.
Is there a way to ensure that the undo buffer remains in tact even with the tab inserted
If all you want to do is insert a tab into your text when the user presses the tab key, there's a better way to do it (and I hope it will solve your undo issue at the same time).
You'll have to access the TextArea's model - the TextFlow object - and tinker with its configuration. The textflow Configuration class has a property called 'manageTabKey' which defaults to 'false'. If you set it to 'true' it will do what I think you're trying to do for you, i.e. when the user hits the tab key, insert a tab character instead of putting the focus on the next focusable element.
var textFlow:TextFlow = taData.textFlow;
var config:Configuration = Configuration(textFlow.configuration);
config.manageTabKey = true;
The cast to Configuration is necessary, because textFlow.configuration returns an IConfiguration interface that has no setter method for manageTabKey.
Additionally, you could even set the width of your tabs by using the 'tabStops' property.
textFlow.tabStops = "25 50 75 100";
EDIT:
I just noticed that you set 'focusEnabled' to false. This will also no longer be necessary.
Related
I have a spark datagrid on a mobile application, I set the
interactionMode="touch"
and the dataGrid scrolling is good, I got some problems adding a selectionChange eventListener to it, because scrolling the dataGrid will automatically change the selection and instead simply scrolling it, the function binded will start...
How can I add the touch dalay before select the index, so if I scroll the grid the selection won't change, and it change only if I press the item without scrolling?
I solved using a workaround....
Instead adding the selectionChange eventListener, I used the mouseUp and mouseDown to check the time between click and release, and if the release time is less than click plus some dalay, I return the selection otherwise not...
<s:DataGrid id="grigliaData"
sortableColumns="false"
rowHeight="100"
interactionMode="touch"
mouseDown="grigliaData_mouseDownHandler(event)"
mouseUp="grigliaData_mouseUpHandler(event)"
top="230" left="5" right="5" bottom="50"
dataProvider="{listaEventi}" width="100%" height="100%">
//AS Code
private var _lastClickEvent:int;
protected function grigliaData_mouseDownHandler(event:MouseEvent):void
{
_lastClickEvent = getTimer();
}
protected function grigliaData_mouseUpHandler(event:MouseEvent):void
{
if (getTimer() < _lastClickEvent + 200) // 200 = Dalay
{
// return selectedIndex
}
}
EDIT:
I also added the check on mouseX and mouseY position, now the grid dispatch the selectionChange if the time before release and the change of position is less that the default dalay (time/pixel)...
(Flex 3) I have a TextArea component which needs to hold the user's clipboard content. The TextArea does the job relatively well for most cases but when pasting a large amount of data, I can't seem to get the content in the component at all due to the script execution timeout.
I've done a fair deal on investigation to try and hopefully find how I could make this work.
I found that the TextArea is using a IUITextField (which is in my case an instance of TextField at runtime) do handle the job of obtaining the pasting data and then throws an event when it is done.
I have found no way to take a look at the source of TextField as it is a class in the playerglobal.swc library.
Is there a way for me to maybe see the source of that class or is there something I'm missing in my approach to figure out a way to make this work?
P.S: I know there would be alternate way to achieve the results I'm looking for but I would like to make this particular solution work.
Since the TextField doesn't want to accept our paste event we will find someone else who will. Here is the mx:TextArea workaround:
MXML:
<mx:Canvas id="canvas" paste="pasteHandler(event)">
<mx:TextArea id="textArea" textInput="if (event.text.length > 1) event.preventDefault();"
keyDown="keyDown(event)" mouseEnabled="false"/>
</mx:Canvas>
AS:
private function keyDown(event:KeyboardEvent):void{
//When CTRL-V is pressed set focus to canvas
if(event.keyCode==86 && event.ctrlKey)
canvas.setFocus();
}
You also need enable the clipboard items on the Canvas's ContextMenu and reset focus to TextArea when finished with the paste.
Got the paste-blocking solution from: flex: how to prevent PASTE (ctrl+V) in a flex3 textinput?
This problem will often occur when large amounts of antialiased text are added to the display list. Once the text is rendered, everything is fine again. You can go around this problem, if you're handling predefined text, by splitting large portions of text into a lot of small ones, and adding them to the stage piece by piece (say, 20 lines of text at a time), waiting one frame between each, allowing the screen to refresh.
I haven't tried this yet, but I would suggest adding an event listener to the TextArea and checking on Event.RENDER, if the text was changed. If this is true, you could remove all text that was added since the last render event, and frame by frame re-add it much like in the example above.
Also, try using native instead of embedded fonts and switching off antialiasing, or reducing its quality.
Unfortunately, I think that you can't intercept all types of user input event on text fields using Flex 3.
If you can switch to Flex 4 (thus using the new FTE), then you should add a listener on the TextOperationEvent.CHANGING event , that is a cancellable event. In the handler, you could verify the amount of text that is being added and, if it is too much, cancel the event (event.preventDefault()) and add it in multiple frames.
The nice thing about this event is that it fires also for event such as "delete key pressed with selected text", or cut/copy/paste/delete operations. In fact, I use it to apply early validation to some kind of text fields, that I couldn't detect in any way with Flex 3.
EDIT
Maybe I found a solution.. I noticed that the "restrict" property, that allows to filter the characters allowed in a text field, is supported in the built-in TextField class, and it is not a feature added by the wrapping Flex component: interesting for our porpuse.
So I tried to play with it, and I discovered that setting restrict="" on your TextArea will prevent blocking the UI on paste of a large block of text, because it is applied "early" at the player level. The nice thing is that, even with this setting, the TextArea will still dispatch the textInput event, so you can monitor the paste event and decide what to do with the new text: update the text property in a single step, start an incremental update or just ignore the event.
Copy and paste the following code to see an example (tested with Flex 3.6 and Flash Player 11):
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
minWidth="955" minHeight="600"
layout="vertical"
horizontalAlign="center">
<mx:Script>
<![CDATA[
protected function generateClipboard():void {
var largeData:String = "";
while (largeData.length < 1000000) {
largeData += "Lorem ipsum ... ";
}
System.setClipboard(largeData);
}
protected function ontextarea1_textInput(event:TextEvent):void {
if (event.text.length < 100) {
// NAIVE CODE: just to demonstrate that you can
// programmatically modify the text.. you should "merge"
// the new text with existing content here
textArea.text += event.text;
} else {
// do something here, like starting
// to add text block by block in
// multiple frames
}
}
]]>
</mx:Script>
<mx:TextArea id="textArea" width="100%" height="100%" restrict="" textInput="ontextarea1_textInput(event)"/>
<mx:Button click="generateClipboard()" label="Set clipboard"/>
</mx:Application>
The tricky part will be correctly set the text on the textInput event, and the "incremental" load of large text.
Its impossible with such large texts (you mentioned that the text is around 7MB).
If you look at the source of mx:TextArea, it inserts text simply be setting its TextField text property to the string you entered:
From TextArea.as around line 2050:
if (textChanged || htmlTextChanged)
{
// If the 'text' and 'htmlText' properties have both changed,
// the last one set wins.
if (isHTML)
textField.htmlText = explicitHTMLText;
else
textField.text = _text;
textFieldChanged(false, true)
textChanged = false;
htmlTextChanged = false;
}
If you make a sample app with a TextField and try to set its text property with a large string, you will get script timeouts. (i got timeout when i tried it with a string length of 1MB):
import flash.text.TextField;
tf = new TextField();
addChild(tf);
tf.multiline = true;
tf.wordWrap = true;
tf.width= 600
tf.height = 500
var str:String = "";
for (var i:int=0; i<100000; i++) {
str = str+"0123456789"
}
tf.text = str
This is the simplest possible way to display text, and it timeouts. Flex will try to do a dozen of more things with this textfield before laying out...so it will give up at much smaller size texts too.
The only possible solution is to make a custom textfield, and add the text gradually - Adobe recommends to use TextField.appendText():
import flash.text.TextField;
public function test(){
tf = new TextField();
addChild(tf);
tf.multiline = true;
tf.wordWrap = true;
tf.width= 600
tf.height = 500
addEventListener(Event.ENTER_FRAME,onEF);
}
private var cnt:int = 0;
private function onEF(event:Event):void{
if (cnt>200) return;
trace (cnt);
var str:String = "";
//pasting around 50K at once seems ideal.
for (var i:int=0; i<5000; i++) {
str = str+"0123456789"
}
tf.appendText(str);
cnt++;
}
This script manages to add 10MB of text into the TextField... although after adding 1MB it gets increasingly slower (it took around 1 sec for an iteration at the end). And if you try to do anything with this textfield (for example resizing, modifying text not with appendText(), adding it to the stage after its complete...) you will get script timeout.
So the complete solution is to capture the paste event canvas wrapper trick (William's solution), and then add the text gradually to a custom component, that uses appendText to add text. (use flash.text.TextField, and add it to the stage with mx_internal::$addChild() ). I have not tested, whether you can remove the resulting monstrosity with removeChild without triggering a script timeout :).
In the Spark TextArea the Paste Event fires correctly. There might be a cleaner way to do this but this is the solution I found.
MXML:
<s:TextArea id="textArea" changing="changeHandler(event)"
paste="pasteHandler(event)" />
AS:
private var pastedText:String;
private var textPosition:int=0;
//Number of characters to read per frame
private var chunkSize:int=1000;
private function changeHandler(event:TextOperationEvent):void{
if(String(event.operation)=="[object PasteOperation]"){
event.preventDefault();
}
}
private function pasteHandler(event:Event):void{
pastedText = String(Clipboard.generalClipboard.getData(ClipboardFormats.TEXT_FORMAT));
this.addEventListener(Event.ENTER_FRAME,frameHandler);
}
private function frameHandler(event:Event):void{
if( textPosition + chunkSize > pastedText.length ){
chunkSize = pastedText.length - textPosition;
this.removeEventListener(Event.ENTER_FRAME,frameHandler);
}
textArea.text += pastedText.substr(textPosition,chunkSize);
textPosition += chunkSize;
}
I am using HSlider to implement a one-thumb slider control. The thumb position is updated by a timer. However, the user can also update the thumb position by either clicking on a position in the slider track, or by dragging the thumb.
Judging by the Flex documentation, I figured all I needed to do was write a handler for the change event. The docs say:
change Event Event Object Type:
mx.events.SliderEvent property
SliderEvent.type =
mx.events.SliderEvent.CHANGE
Dispatched when the slider changes
value due to mouse or keyboard
interaction.
I wrote my code as follows:
<mx:HSlider thumbPress="handleThumbPress(event)" change="handleUserChange(event)"
showTrackHighlight="true" buttonMode="true" useHandCursor="true" minimum="0"
maximum="{_max}" snapInterval="1" enabled="true" width="100%" id="mySlider"
liveDragging="false" showDataTip="true" verticalCenter="0" horizontalCenter="0"
trackSkin="{SliderTrack}" trackHighlightSkin="{TrackHighlightConfigurable}"
sliderThumbClass="{MySliderThumb}" thumbSkin="#Embed('../imgempty.png')"
dataTipFormatFunction="dataToolTipFormat"/>
What I observe is that my change handler, which is only supposed to be invoked in response to user interaction keeps getting invoked whenever my timer sets the value of the slider. The timer code sets the values quite simply as:
private function updateValue( newValue : Number ) : void
{
mySlider.value = newValue;
}
Am I making an obvious mistake? Is there a better way to distinguish between user versus programmatic change of Flex Slider?
Thanks.
-Raj
Change event is not fired if you change value programmatically. When you change value of thumb beyond minimum or maximum value of slider the event is fired. Event also gets fired if you change Minimum or maximum of slider. Is this happening in your code ?
You could just put a boolean wrapping when you set the value programmatically:
private var inputByUser:Boolean = false;
private function updateValue( newValue : Number ) : void
{
if (!inputByUser)
mySlider.value = newValue;
}
I don't know your exact code so I couldn't solve it explicitly, but something along those lines is what I'd do. You'd set that inputByUser in your change handler, like so:
private function changeHandler() : void
{
inputByUser = true;
updateValue(mySlider.value + 10); // however you're doing it
inputByUser = false;
}
Hope that helps,
Lance
I have a DataGridColumn with an ItemRenderer that extends the Box component. The default display is a Text component. When the user clicks on the text component, I change the State to add a PopUpMenuButton child, and make the Text component invisible. This works fine. However, I only want to allow one PopUpMenuButton to be visible in the DataGrid at a time (similar to how an itemEditor works). I don't want to use an itemEditor, because I've run into too many problems trying to get that to work in this instance.
I am implementing IDropInListItemRenderer in my itemRenderer, in order to access the listData property, which will give me the owner (DataGrid), but I don't know how to "turn off" the "editing" state in other itemRenderers in the DataGrid.
How can I accomplish this?
Thanks.
Here we go. I simply added an Listener for Change Events in the listData.owner - if it is triggered, I update the currentState to null. Works like a charm. Much easier than trying to access the itemRenderers in the column and resetting them all. Better on performance too.
private function label_clickHandler():void
{
showEditor();
}
private function showEditor():void
{
this.currentState = "editingMode";
var ownerListBase:ListBase = ListBase(listData.owner);
ownerListBase.addEventListener(ListEvent.CHANGE, ownerListBase_changeHandler);
}
private function ownerListBase_changeHandler(event:ListEvent):void
{
this.currentState = null;
var ownerListBase:ListBase = ListBase(listData.owner);
ownerListBase.removeEventListener(ListEvent.CHANGE, ownerListBase_changeHandler);
}
I have a Flex ComboBox that gets populated by a dataprovider all is well...
I would now like to add a default " -- select a item --" option at the 0 index, how can I do this and still use a dataprovider? I have not seen any examples of such, but I can't imagine this being hard...
If you don't need the default item to be selectable you can use the prompt property of ComboBox and set the selectedIndex to -1. That will show the string you set propmt to as the selected value until the user chooses another. It will not appear in the list of options, however.
I came across this problem today and wanted to share my solution.
I have a ComboBox that has an ArrayCollection containing Objects as it's dataprovider. When the application runs, it uses a RemoteObject to go out and get the ArrayCollection/Objects. In my event handler for that call I just have it append another object to the beginning of the ArrayCollection and select it:
var defaultOption:Object = {MyLabelField: "Select One"};
myDataProvider.addItemAt(defaultOption, 0);
myComboBox.selectedIndex = 0;
This is what my ComboBox looks like for reference:
<mx:ComboBox id="myComboBox" dataProvider="{myDataProvider}" labelField="MyLabelField" />
The way I've dealt with this in the past is to create a new collection to serve as the data provider for the combobox, and then I listen for changes to the original source (using an mx.BindingUtils.ChangeWatcher). When I get such a notification, I recreate my custom data provider.
I wish I knew a better way to approach this; I'll monitor this question just in case.
This can be used following code for selected default value of combobox
var index:String = "foo";
for(var objIndex:int = 0; objIndex < comboBox.dataProvider.length; objIndex++) {
if(comboBox.dataProvider[objIndex].label == index)
{
comboBox.selectedIndex = objIndex;
break;
}
}
<mx:ComboBox id="comboBox" dataProvider="{_pageIndexArray}" />