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: 167
Registered: ‎12-17-2010
My Device: Bold 9000
My Carrier: Vodafone
Accepted Solution

Scroll list horizontally AND vertically?

I have defined a list() and set the width to a specific value. This list scrolls vertically. It is possible though to add an entry that exceeds the width of the list. What would be the recommended way to make the entire list entry text visible?

 

Eugene

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

Re: Scroll list horizontally AND vertically?

hey,

 

this has been sort of discussed in the past. the problem we ran into was having a value in a cell being larger than the cell itself. the problem is that if we want to extend the cell width or the cell height, we could not do it indvidually. if we were to increase the height or width, it would be applied to every cell and not just one. Although increasing the size is doable, it may not be easy on the eyes to see some cells having more "whitespace" than others.

 

the solution proposed was to "truncate" the given cell text based on its size. it looks more uniform that way. here is a link to the thread discussing how to do so using the list's cell renderer:

 

http://supportforums.blackberry.com/t5/Tablet-OS-SDK-for-Adobe-AIR/Format-large-text-blocks-to-fit-q...

 

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: 167
Registered: ‎12-17-2010
My Device: Bold 9000
My Carrier: Vodafone

Re: Scroll list horizontally AND vertically?

JRab, can you provide an example on how I use the MyCustomCellRenderer for my List()?

Eugene

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

Re: Scroll list horizontally AND vertically?

Hey eugenevk,

 

sure thing! here is a simple list that has some values that are longer than others:

 

ListTests.as:

 

 

package
{
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    
    import qnx.ui.buttons.LabelButton;
    import qnx.ui.data.DataProvider;
    import qnx.ui.listClasses.List;
    
    
    [SWF(width="1024",height="600",backgroundColor="#E8E8E8",frameRate="30")]
    public class ListTests extends Sprite
    {
        private var myList:List;
        private var myDataProvider:DataProvider;
        private var myArray:Array;
        private var myBtn:LabelButton;
        
        public function ListTests()
        {
            super();
            
            // support autoOrients
            stage.align = StageAlign.TOP_LEFT;
            stage.scaleMode = StageScaleMode.NO_SCALE;
            
            myList = new List();
            myArray = new Array();
            
            myArray.push({label: "I am a really long label that needs to be cut short."});
            myArray.push({label: "Anothe label here"});
            myArray.push({label: "Test label"});
            myArray.push({label: "Something else should go here"});
            myArray.push({label: "This may or may not be cut off depending on the list's width"});
            
            myDataProvider = new DataProvider(myArray);
            
            myList.dataProvider = myDataProvider;
            
            myList.setPosition(10,10);
            myList.setSize(300,500);
            
            /*
             * This is where you will apply your custom cell renderer
            */
            
            myList.setSkin(MyCustomCellRenderer);
            
            addChild(myList);
            
            
            
        }
    }
}

 

 

This is the custom cell renderer:

 

 

package
{
	import flash.text.TextFieldAutoSize;
	
	import qnx.ui.listClasses.AlternatingCellRenderer;
	
	public class MyCustomCellRenderer extends AlternatingCellRenderer
	{
		public function MyCustomCellRenderer()
		{
			super();
		}
		override protected function onAdded():void
		{
			super.onAdded();
			
			/*
			* If the width of the text (in pixels) is larger than the width 
			* of the cell perform the cut off
			*/
			if (this.label.textWidth > this.width)
			{
				/*
				* Get the character per pixel (charPerPixel) value to use later when
				* we want to calculate how many MAX characters can show up in one row.
				*/
				var charPerPixel:Number = this.label.text.length / this.label.textWidth;
				
				/*
				* Calculate the max amount of characters to show on screen.
				* - 3 to accomodate for the leading dots (...)
				*/
				var charMax:int = Math.floor(charPerPixel * this.width) - 3;
				
				this.label.text = this.label.text.substr(0,charMax) + "...";
			}
			
		}
	}
}

 

After applying the renderer it should cut off the visible text length depending on your list width. 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: 167
Registered: ‎12-17-2010
My Device: Bold 9000
My Carrier: Vodafone

Re: Scroll list horizontally AND vertically?

Man, you're quick. Really helpful.

 

Three questions though:

 

1) I assume there is a separate file for the MyCustomCellRenderer class, called MyCustomCellRenderer.as. Right?

2) If so, should that not be imported in the main package? If I do so (import MyCustomCellRenderer.*) Flash Builder shows an error that it can't find it (1172: Definition MyCustomCellRenderer could not be found)

3) I don't see the use of import flash.text.TextFieldAutoSize in the MyCustomCellRenderer package. Why is it there?

 

Thanks for your help.

 

Are you hired by RIM to respond to all these questions? Smiley Very Happy

Eugene

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

Re: Scroll list horizontally AND vertically?

hey eugenevk,

 

I'll answer your q's in the same (nice) format as yours. Im usually sloppy hah.

 

1. Yes the way the previous code is set up you just need to drop the MyCustomCellRenderer.as in the default package (should be under the src directory if you are browsing it on your comp and not flash builder)

 

2. Since you are putting this in the default package, you dont need to import anything. It will be readily available. The only time you need to import a class or package is when the .as file you are referencing is another directoy other than the default directory.

 

3. Sorry about that one hah. I was doing something else before and it was left in there by mistake. you are correct that it is not required in this case.

 

LMAO @ working for RIM. Wish i did but i dont. just doing it all for the playbook Smiley Happy

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: 167
Registered: ‎12-17-2010
My Device: Bold 9000
My Carrier: Vodafone

Re: Scroll list horizontally AND vertically?

Some strange behavior happens. When I initially load the list the rendering works fine. But when an entry is added with (I use an inputDialog for letting define a new entry for the list):

 

dp.addItemAt({label : name}, i);

 

the rendering is 1) not applied to the new item and 2) deleted from the other items.

 

Any idea why this happens?

 

Eugene

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

Re: Scroll list horizontally AND vertically?

[ Edited ]

hey eugenevk,

 

yeah sorry about that one. i didnt take into account what happens when a user were to update the list. the onAdded() method is only called once when the list is first added on to the screen and the method is never called thereafter. because of that our label manipulation is not done when we need it to be done subsequent times. to fix this problem instead of the onAdded() method we are going to override the drawLabel() method of the cell renderer. This method is called everyime a label is changed. One thing to remember is that most of this is guess work based on past forum threads. RIM unfortunately has not disclosed any information about their cell renderers and we've just been hacking away haha. That being said if you find any bugs let us here at the forums know and we'll try to fix it Smiley Happy

 

try the following new code:

 

MyCustomCellRenderer.as:

 

 

package
{
    import flash.text.TextFieldAutoSize;
    
    import qnx.ui.listClasses.AlternatingCellRenderer;
    
    public class MyCustomCellRenderer extends AlternatingCellRenderer
    {
        public function MyCustomCellRenderer()
        {
            super();
        }
        override protected function drawLabel():void
        {
            super.drawLabel();
            
            /*
             * Add the check for a label object. Sometimes this
             * function is called via the draw function prematurely
            */
            
            if (this.label != null)
            {
                
                /*
                * If the width of the text (in pixels) is larger than the width
                * of the cell perform the cut off
                */
                if (this.label.textWidth > this.width)
                {
                    /*
                    * Get the character per pixel (charPerPixel) value to use later when
                    * we want to calculate how many MAX characters can show up in one row.
                    */
                    var charPerPixel:Number = this.label.text.length / this.label.textWidth;
                    
                    /*
                    * Calculate the max amount of characters to show on screen.
                    * - 3 to accomodate for the leading dots (...)
                    */
                    var charMax:int = Math.floor(charPerPixel * this.width) - 3;
                    
                    this.label.text = this.label.text.substr(0,charMax) + "...";
                    
                }
            }
            
        }
    }
}

 

 

Hope that helps. good luck!

 

on a side note: there seems to be an issue i just noticed that it doenst calculate the width of the cell properly. ill try to fix that but for now the above code should do. ill keep you posted!

 

EDIT: Had an error in the code, updated with the correct code.

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: 167
Registered: ‎12-17-2010
My Device: Bold 9000
My Carrier: Vodafone

Re: Scroll list horizontally AND vertically?

[ Edited ]

Works beautifully. Fantastic.

Thanks again.

 

Rgrds,
Eugene

Eugene

My PlayBook App: Checklists