Spark TextInput incomplete value using Barcode Reader - apache-flex

Question

working with Flex4 AIR app, using this component I get data from the barcode reader,
<s:TextInput id="barcode" enter="showBarcode()"/>
Then for handle the enter event, wich is automatically triggered when reader finishes its reading
private function showBarcode():void{
Alert.show(barcode.text);
}
Ok, very simple. But my problem is: the text showed in the Alert Box is incomplete, it misses one or two digits (last) or it just shows the entire text in the TextInput component (correct view)
I already test my BC reader using the notepad, and it's fine.
I have tested same code using MX components in Flex3 web app, and there's no problem.
Some help will be appreciated.
Tnx

Answer 1

We ran into the same problem and we ended up saving the chars received from the barcode scanner in a buffer instead of accessing the TextInput text property. We always received the chars in the correct order but, with the Spark TextInput, the text property was sometimes scrambled.
<s:TextInput id="barcode" keyDown="barcode_keyDownHandler(event)" />
This is the buffer we used and these are the relevant functions:
private var textBuffer:ArrayList = new ArrayList();
protected function getTextBufferContent():String
{
var content:String="";
for (var i:int = 0; i < textBuffer.length; i++)
{
content=content.concat(textBuffer.getItemAt(i));
}
return content;
}
protected function handleKeyboardEnter():void
{
var barcodeScan:String=getTextBufferContent();
textBuffer.removeAll();
if (barcodeScan != "")
{
Alert.show(barcodeScan);
}
}
protected function barcode_keyDownHandler(event:KeyboardEvent):void
{
trace("barcode_keyDownHandler: " + event.keyCode + " " + String.fromCharCode(event.keyCode));
if (event.keyCode == Keyboard.ENTER)
{
handleKeyboardEnter();
}
else textBuffer.addItem(String.fromCharCode(event.keyCode));
}
The mx:TextInput also worked, but we wanted to keep the Spark component.

Answer 2

Instead of using "enter" try listening to the onKeyUp event.
You'll have to figure out the appropriate end of line character read in from the bar code scanner. But, just key in on that and do your alert that way; otherwise do nothing.

Answer 3

Is text at least displayed as you would expect in Spark TextInput by using the same workflow with barcode reader as shown in this video "Flash Nicey Nice With HID" http://www.youtube.com/watch?v=sEw0RB-Uj00 ?
Anyway, I do not think Adobe Flash player supports officially other HID devices rather then keyboard or mouse.
Thus I would not expect Adobe engineers to make Spark TextInput compliant with your barcode reader input any time soon.

Answer 4

We ran into this same thing where I work, with barcode scanning in Flex 4 / Spark. There are two workarounds we found.
The first is to use the old "Halo" TextInput control (<mx:TextInput />). You can do this even in a Flex 4 project.
The second method, is to keep the "Spark" TextInput control, but to use a very short Timer in your keyUp or keyDown event to let the text property be fully filled with the barcode scan data -- I don't know exactly why this works, but it does. And you get to keep all of the benefits of the Spark control/skinning. So the original poster's example could be fixed if it became:
<s:TextInput id="barcode" keyDown="showBarcode(event)"/>
and
private function showBarcode(evt:KeyboardEvent):void {
var t:Timer = new Timer(10, 1); // 10ms
t.addEventListener(TimerEvent.TIMER, function():void {
Alert.show(barcode.text);
});
t.start();
}
Bonus:
If you didn't want to use this Timer all over your code in event handlers, you could make a utility function for it in a Barcoder.as class like so:
public static function checkScan(evt:KeyboardEvent, callback:Function):void
{
if (evt.keyCode == Keyboard.ENTER)
{
var t:Timer = new Timer(10, 1); // 10 ms
t.addEventListener(TimerEvent.TIMER, function():void { callback(); } );
t.start();
}
}
Then, if you had two separate barcode fields, with two separate handlers (bc1_handler() and bc2_handler()) your mxml would be something like:
<s:TextInput id="barcode1" keyDown="Barcoder.checkScan(event, bc1_handler)" />
<s:TextInput id="barcode2" keyDown="Barcoder.checkScan(event, bc2_handler)" />