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: 63
Registered: ‎12-10-2012
My Device: Blackberry 9900
My Carrier: Vodafone-in
Accepted Solution

How to set upskin and downskin

Hai I need to know how to set upskin and downskin on list...I tried this 

 

package com.cellapp.list.skin
{
	import flash.display.Sprite;
	import flash.geom.Rectangle;
	
	import qnx.fuse.ui.display.Image;
	import qnx.fuse.ui.listClasses.CellRenderer;
	import qnx.fuse.ui.text.Label;
	import qnx.fuse.ui.text.TextAlign;
	import qnx.fuse.ui.text.TextFormat;

	public class ListSkin extends CellRenderer
	{
		/*UPSKIN*/
		protected var upSkin:Sprite;
		
		/*DOWNSKIN*/
		protected var downSkin:Sprite;
		
		/*SELECTEDSKIN*/
		protected var selectedSKin:Sprite;
		
		
		protected var gridRect:Rectangle;
		
		public function ListSkin ()
		{
			super();
			
			gridRect = new Rectangle(0,0, 768, 100);
			
			
		}
		
		override public function set data(value:Object):void
		{
			// TODO Auto Generated method stub
			super.data = value.data;			
			updateUI();
			
			try{
				upSkin			=	new Sprite();
				upSkin.graphics.beginFill(0x000000);
				upSkin.graphics.drawRect(0,0,768, 100);
				upSkin.graphics.endFill();
				upSkin.alpha	=	1;
				upSkin.scale9Grid	=	gridRect;
				
				downSkin			=	new Sprite();
				downSkin.graphics.beginFill(0x000000);
				downSkin.graphics.drawRect(0,0,768, 100);
				downSkin.graphics.endFill();
				downSkin.alpha	=	1;
				downSkin.scale9Grid = gridRect;
			}
			catch(e:Error)
			{
				trace("EEEE : " , e.message);
			}
			
		}	
		
		
		private function updateUI():void
		{	
			trace("here");
			var img:Image = new Image();
			img.setImage(data.img);
			img.alpha				=	data.alpha;
			img.x = 568;
			img.y = 20;
			
			/*var backGround:Image			=	new Image();
			backGround.setImage(data.background);
			backGround.setPosition(0,0);*/
			
			var textFormat:TextFormat 		= new TextFormat();
			textFormat.color				=	0x000000;
			textFormat.align				=	TextAlign.LEFT;	
			textFormat.italic				= 	true;			
			textFormat.size					=	47;
			
			
			var oneLable:Label				=	new Label();
			oneLable.alpha					=	1;
			oneLable.text					=	data.text;
			oneLable.x						=	30;
			oneLable.y						=	15;
			oneLable.format					=	textFormat;
			oneLable.width					=	768;	
			oneLable.height					=	100;			
			
			//addChild(img1);
		//	addChild(backGround);
			addChild(oneLable);
			addChild(img);
			
			
		}		
		
		override public function set state(value:String):void
		{
			// TODO Auto Generated method stub
			super.state = value;
			
			try
			{
				trace("VALUE ", value);
				if(value=="up")
				{
					setSkin(upSkin);
				}
				else
				{
					if(value=="down")
					{
						setSkin(downSkin);	
					}
					else
					{
						
					}
				}
			}
			catch(e:Error)
			{
				trace("VALERR : ",  e.message);
			}
			
			
		}
		
		
	}
}

 Any help is appreciated

Thanks in advance.....

_______________________________________________________
Help is available everywhere but you have to look at the correct place.
By Me :-)
Retired
Posts: 427
Registered: ‎02-22-2012
My Device: BlackBerry Z10, BlackBerry Dev Alpha C, BlackBerry PlayBook
My Carrier: Bell

Re: How to set upskin and downskin

 I haven't tried this but I would start by having a look at the skins API here - https://developer.blackberry.com/air/apis/playbook/qnx/fuse/ui/skins/package-detail.html

Follow me on Twitter: @dustinmalik
-----------------------------------------------------------------------------------------------------
Keep up to date on BlackBerry development: http://devblog.blackberry.com/
New Contributor
Posts: 2
Registered: ‎06-30-2013
My Device: Z10 Limited Edition
My Carrier: Telcel

Re: How to set upskin and downskin

Hello!

 

You are almost there! 

 

I see that in both sprites (upSkin and downSkin) the color is black (0x000000) so you won't see the change.

 

Also, there is no setSkin function (at least there is not in the latest version of the SDK). So, I have used sprites as background. In the set state function (that you are evaluating correctly) you must add the upSkin sprite when the state is UP (by default) and also you must change it for downSkin when the state of the cell is DOWN.

 

Something like this:

 

override public function set state(value:String):void
{
	super.state = value;
	if(value=="up")
	{
upSkin = new Sprite();
upSkin.graphics.beginFill(0x000000);
upSkin.graphics.drawRect(0,0,768, 100);
upSkin.graphics.endFill();
upSkin.alpha = 1;
addChild(upSkin); }
else if(value=="down")
{
downSkin = new Sprite(); downSkin.graphics.beginFill(0x01A8DF); downSkin.graphics.drawRect(0,0,768, 100); downSkin.graphics.endFill(); downSkin.alpha = 1;
addChild(downSkin);
}
}

In this way you will see the change of the background color when selecting a cell in the list.

 

I hope this will work for you.

_________________________________________________________
Engineer. I know ActionScript, PHP, HTML5 and Flex. Mobile Developer as a hobbie and Co-Founder of @SecretsOfCode by passion.