Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Adobe AIR Development

Reply
Developer
Posts: 193
Registered: ‎12-29-2010
My Device: Bold 9900
My Carrier: Rogers
Accepted Solution

Events with Label, List and TextInput

Hi,

 

Here I go with yet another problem.

So I have a list on a page with a bunch of items in it.

 

On the same page is a TextInput that takes something from the user.

Based on what is selected on the list, this input (in the TextInput) is modified and thrown out to label and displayed on the screen.

 

I've done some work, but it doesn't seem to be working, The code I'm using is below.

 

Additionally, if you look at the code, I'm using my array as:

 

 

var fromArray:Array = new Array({label: 'Thing1'},
				{label: 'Thing2'});

 

And I always use the index number in the eventListener. This seems kinda cumbersome. Is there anyway for it to look for the the "label" name...i.e. Thing1 or Thing2 rather than index = 0 and index =1.

 

Here is the rest of my code:

 

package
{	
	
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.filesystem.File;
	import flash.net.SharedObject;
	import flash.text.TextField;
	import flash.text.TextFieldType;
	
	import qnx.ui.data.*;
	import qnx.ui.display.Image;
	import qnx.ui.events.ListEvent;
	import qnx.ui.listClasses.*;
	import qnx.ui.skins.picker.*;
	import qnx.ui.text.*;
	
	
	public class DistanceWindow extends Sprite
	{
		private var textInput:TextInput;
		private var inputNumber:int = new int();
		
		private var outMeterLabel:Label;
		private var outMeterNumber:int = new int();
		
		
		public function DistanceWindow()
		{
			drawDistanceWindow();			
		}
		
		public function drawDistanceWindow():void {			
			
			
			var fromArray:Array = new Array({label: 'Thing1'},
				{label: 'Thing2'});
			
			var fromList:List = new List();
			fromList.setSkin(ListCellRenderer);
			fromList.width = 250;
			fromList.height = 400;
			fromList.alpha = 1.0;
			fromList.x = 100;
			fromList.y = 100;
			fromList.rowHeight = 25;
			fromList.dataProvider = new DataProvider(fromArray);
			fromList.selectionMode = ListSelectionMode.SINGLE;
			fromList.allowDeselect = false;
			fromList.selectedIndex = 0;
			fromList.addEventListener(ListEvent.ITEM_CLICKED, listItemClicked);
			addChild(fromList);
			
			
			
			textInput = new TextInput();
			textInput.setSize(250,40);
			textInput.prompt = "Input";
			textInput.setPosition(387,150);
			textInput.textField.restrict = "0-9 \.";		// Restrict to only numbers from 0 to 9 AND the period (decimal) i.e. hex 2E
			textInput.addEventListener(Event.CHANGE, inputNumberEntered);
			addChild(textInput);
			
			
			
			outMeterLabel = new Label();
			outMeterLabel.text = "outMeterLabel";
			addChild(outMeterLabel);		
		}	
		
		
		private function inputNumberEntered(e:Event): void {
			inputNumber = e.target.toString();
			
		}
		
		
		private function listItemClicked(e:ListEvent): void {
			var indexClicked:int = new int()
			indexClicked = e.index;
			
			if(indexClicked == 0) {
				outMeterNumber = inputNumber*0.01;
				outMeterLabel.text = outMeterNumber.toString();	
			}
		}
		
	}
}

 

 

Any help would be great!

 

Thanks!

 

G

 

 

 

Developer
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: Events with Label, List and TextInput

hey gpatton,

 

i went through the code and made a few changs to acheive what i think you want. first thing i did was make the fromList object available to all functions within this application by moving it outside of the constructor. second thing is i converted your ourmeternumber to a number instead of an Int object so we can see decimals and not just the whole number portion of the result. last thing i did, assuming you wanted to see a change every time a user changes their input value from the text input was take the function of the listItemClicked function and place it into the inputNumberEntered function. so now everytime the input is changed so is the label value. the changes i've made are in bold. also note i removed the "new int()" portions of your code. they are not required. this also applies to string and number objects.

 

DistanceWindow.as:

 

 

package
{

import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.filesystem.File;
import flash.net.SharedObject;
import flash.text.TextField;
import flash.text.TextFieldType;

import qnx.ui.data.*;
import qnx.ui.display.Image;
import qnx.ui.events.ListEvent;
import qnx.ui.listClasses.*;
import qnx.ui.skins.picker.*;
import qnx.ui.text.*;


public class DistanceWindow extends Sprite
{
private var textInput:TextInput;
private var inputNumber:Number;


private var outMeterLabel:Label;
private var outMeterNumber:Number;


private var fromList:List;


public function DistanceWindow()
{
drawDistanceWindow();
}

public function drawDistanceWindow():void {


var fromArray:Array = new Array({label: 'Thing1'},
{label: 'Thing2'});

fromList = new List();
fromList.width = 250;
fromList.height = 400;
fromList.alpha = 1.0;
fromList.x = 100;
fromList.y = 100;
fromList.rowHeight = 25;
fromList.dataProvider = new DataProvider(fromArray);
fromList.selectionMode = ListSelectionMode.SINGLE;
fromList.allowDeselect = false;
fromList.selectedIndex = 0;
fromList.addEventListener(ListEvent.ITEM_CLICKED, listItemClicked);
addChild(fromList);



textInput = new TextInput();
textInput.setSize(250,40);
textInput.prompt = "Input";
textInput.setPosition(387,150);
textInput.textField.restrict = "0-9 \."; // Restrict to only numbers from 0 to 9 AND the period (decimal) i.e. hex 2E
textInput.addEventListener(Event.CHANGE, inputNumberEntered);
addChild(textInput);



outMeterLabel = new Label();
outMeterLabel.text = "outMeterLabel";
addChild(outMeterLabel);
}


private function inputNumberEntered(e:Event): void {
inputNumber = e.target.text.toString();

if (fromList.selectedIndex > -1)
{
if (fromList.selectedIndex == 0)
{
outMeterNumber = inputNumber*0.01;
outMeterLabel.text = outMeterNumber.toString();
}
}


}


private function listItemClicked(e:ListEvent): void {
var indexClicked:int;
indexClicked = e.index;

if(indexClicked == 0) {
outMeterNumber = inputNumber*0.01;
outMeterLabel.text = outMeterNumber.toString();
}
}

}
}

 

 

Oh yah also in your inputNumberEntered function i changed the first line to :

 

 

inputNumber = e.target.text.toString();

 

You had right idea just forgot to go one step deeper and get the text property of the TextInput.

 

also its worth noting i saw a weird phenomena when the TextInput value gets really high. the numbers reported back are not accurate at all. Try going from 1..12..123...1234.. and so on until u hit 123456789. It will start doing weird things after u pass that point. Assuming your numbers will never get that high it may not be a problem.

 

hope that helps. good luck!

 

J. Rab (Blog) (Twitter)
--
1. If you liked my post or found it useful please click on the thumbs up and provide a Like!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!

Approved Apps: OnTrack | ssShots | Hangman
Developer
Posts: 193
Registered: ‎12-29-2010
My Device: Bold 9900
My Carrier: Rogers

Re: Events with Label, List and TextInput

Hey JRab,

 

Thanks for your reply.

Got it to work.

And you're right about the large numbers. I want to be able to have users put big numbers. I found this problem in Java as well, so I ended up rounding the numbers to two decimal places.

 

Now that I have the framework, I'll tinker around with other things as well.

 

Any clue though about not having to choose the index, but choose the Label from the array? i.e. Thing1 and Thing2 rather than index==0 or index==1?

 

Thanks!!

 

G

Developer
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: Events with Label, List and TextInput

hey gpatton,

 

to get the label of the selected item from the list you can utilizet he getItemAt method of the list like so below:

 

 

fromList.getItemAt(fromList.selectedIndex).label;

 

This will return the label of the selected item on the list. hope thats what you were looking for good luck again!

 

J. Rab (Blog) (Twitter)
--
1. If you liked my post or found it useful please click on the thumbs up and provide a Like!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!

Approved Apps: OnTrack | ssShots | Hangman
Developer
Posts: 193
Registered: ‎12-29-2010
My Device: Bold 9900
My Carrier: Rogers

Re: Events with Label, List and TextInput

Yup sounds good.

Thanks!!

 

Also, I know this was asked before but I dont think I understood the response in the previous post.

 

1. Can you limit as to how many digits a textInput can take?

2. When you press the "InputText", can you have it display the Number pad straight up rather than clicking on the "123Sym" button?

 

G

Developer
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: Events with Label, List and TextInput

hey gpatton,

 

in the TextInput object there is a reference to its inner TextField which you can apply restrictions (much like how you limited the type of character allowed). There is also another property called maxChars which restricts the total amount of characters in the TextInput. Here is an example:

 

 

textInput.textField.maxChars = 10;

 

 

As for the for the keyboard, there is no way to change the look of it at this point. there is documentation for it but no existing API in the current build. so we are going to have to work with what we have as far as the keyboard.

 

good luck!

J. Rab (Blog) (Twitter)
--
1. If you liked my post or found it useful please click on the thumbs up and provide a Like!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!

Approved Apps: OnTrack | ssShots | Hangman
Developer
Posts: 193
Registered: ‎12-29-2010
My Device: Bold 9900
My Carrier: Rogers

Re: Events with Label, List and TextInput

[ Edited ]

EDIT: Seems like JRab beat me to replying to my own question :smileyhappy: Shoulda hit "Refresh".

 

Thanks!

 

--------------------

 

Ok So I found it....

 

textInput.textField.maxChars = 15;

 

And as for the keyboard, I've decided to just go with a number pad. Will make it look better as well.

 

Thanks!