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
Contributor
sillyPanda
Posts: 42
Registered: ‎02-23-2011
My Device: Not Specified

Font size in cell of TileList automatically changed after zooming

Hi All,

 

I encountered an issue that the font size of text for each cell inside TileList automatically changed after zooming on the screen. This behaviours did not see on other controls like button and lable. 

 

I tried to trace the issue. It seems like that after zooming, the setData and draw function of cellRander is called automatically which will call it's child lable's draw function.

 

If bypass the setData call by checking isOnZoom during zoom, it will walkaround this issue, However, after zooming, if click each cell, the onclick event will trigger the label to redraw again which cause the issue again.

 

Is there anyway to prevent this? For showing the issue, I attached a very simple testing code here.

 

Any suggestions will be truly appreciated.

 

package 
{
	import flash.display.Sprite;
	import flash.events.GesturePhase;
	import flash.events.MouseEvent;
	import flash.events.TransformGestureEvent;
	import flash.filesystem.File;
	import flash.geom.Matrix;
	import flash.text.TextFormat;
	import flash.ui.Multitouch;
	import flash.ui.MultitouchInputMode;
	
	import qnx.events.MediaPlayerEvent;
	import qnx.media.MediaPlayer;
	import qnx.media.VideoDisplay;
	import qnx.ui.core.Container;
	import qnx.ui.data.DataProvider;
	import qnx.ui.data.IDataProvider;
	import qnx.ui.events.MediaControlEvent;
	import qnx.ui.listClasses.TileList;
	import qnx.ui.media.*;
	import qnx.ui.text.KeyboardType;
	import qnx.ui.text.Label;
	import qnx.ui.text.ReturnKeyType;
	import qnx.ui.text.TextInput;
	import qnx.ui.text.TextInputIconMode;

	// The following metadata specifies the size and properties of the canvas that
	// this application should occupy on the BlackBerry PlayBook screen.
	[SWF(width='1024', height='600', backgroundColor='#FFFFFF', frameRate='30')]
	public class Testing extends Sprite 
	{
		public function Testing()
		{
			initializeUI();
			Multitouch.inputMode = MultitouchInputMode.GESTURE;
			this.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);
		}
		
		public function onZoom(event:TransformGestureEvent):void
		{
			event.stopImmediatePropagation();
			
			var affineTransform:Matrix = this.transform.matrix;
			
			// move the object to (0/0) relative to the origin
			affineTransform.translate( -event.stageX, -event.stageY );
			
			// scale
			affineTransform.scale(event.scaleX, event.scaleY );
			
			// move the object back to its original position
			affineTransform.translate( event.stageX, event.stageY );
			
			// apply the new transformation to the object
			this.transform.matrix = affineTransform;
		}
		
		private function initializeUI():void
		{
			//Adding a label 
			var labelFormat:TextFormat = new TextFormat();
			labelFormat.size = 22;
			
			var firstLabel:Label = new Label();
			firstLabel.format = labelFormat;
			firstLabel.text = "First label";
			firstLabel.setPosition(100, 100);
			this.addChild(firstLabel);
			
			var arrMonth:Array=[];
			
			arrMonth.push({label: "January"});
			arrMonth.push({label: "February"});
			arrMonth.push({label: "March"});
			arrMonth.push({label: "April"});
			arrMonth.push({label: "May"});
			arrMonth.push({label: "June"});
			arrMonth.push({label: "July"});
			arrMonth.push({label: "August"});
			arrMonth.push({label: "September"});
			arrMonth.push({label: "October"});
			arrMonth.push({label: "November"});
			arrMonth.push({label: "December"});
			arrMonth.push({label: "January1"});
			arrMonth.push({label: "February1"});
			arrMonth.push({label: "March1"});
			arrMonth.push({label: "April1"});
			arrMonth.push({label: "May1"});
			arrMonth.push({label: "June1"});
			arrMonth.push({label: "July1"});
			arrMonth.push({label: "August1"});
			arrMonth.push({label: "September1"});
			arrMonth.push({label: "October1"});
			arrMonth.push({label: "November1"});
			arrMonth.push({label: "December1"});
			arrMonth.push({label: "January2"});
			arrMonth.push({label: "February2"});
			arrMonth.push({label: "March2"});
			arrMonth.push({label: "April2"});
			arrMonth.push({label: "May2"});
			arrMonth.push({label: "June2"});
			arrMonth.push({label: "July2"});
			arrMonth.push({label: "August2"});
			arrMonth.push({label: "September2"});
			arrMonth.push({label: "October2"});
			arrMonth.push({label: "November2"});
			arrMonth.push({label: "December2"});
			
			
			var bg:Sprite = new Sprite();
			bg.graphics.lineStyle(2,0xCCCCCC);
			bg.graphics.beginFill(0x333333,1);
			bg.graphics.drawRect(0,0,340,320);
			bg.graphics.endFill();
			bg.x = 90;
			bg.y = 190;
			this.addChild(bg);
			
			var myTileList:TileList = new TileList();            
			myTileList.setPosition(100, 200);
			myTileList.width = 330;
			myTileList.height = 300;
			myTileList.columnCount = 3;
			myTileList.cellPadding = 5;
			myTileList.dataProvider = new DataProvider(arrMonth);
			
			this.addChild(myTileList);
		}
		
	}
	
}

 

Contributor
sillyPanda
Posts: 42
Registered: ‎02-23-2011
My Device: Not Specified

Re: Font size in cell of TileList automatically changed after zooming

Can anyone help? please... I am pretty much stuck. Override draw function for all controls wont help at all.

Contributor
sillyPanda
Posts: 42
Registered: ‎02-23-2011
My Device: Not Specified

Re: Font size in cell of TileList automatically changed after zooming

Can anyone help on this topic? please... I attached two pictures here for demostrating the issue.

 

Thanks.

 

First picture is before zooming:

IMG_00000016.jpg

Second Picture is after zooming:

IMG_00000017.jpg

Contributor
sillyPanda
Posts: 42
Registered: ‎02-23-2011
My Device: Not Specified

Re: Font size in cell of TileList automatically changed after zooming

This picture is my actual application, the behavious are the same as testing code. No matter how I override the draw function. Is there a way to override the draw function of TextField in the Label field?

 

Thanks

 

IMG_00000018.jpg