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: 1,003
Registered: ‎01-16-2011
My Device: PlayBook (sim)
My Carrier: Rogers

Applying Gradient to selection of list

I'm trying to setup a gradient over my selected items in a tile list. What I'm picturing is a soft glow when the box is selected as opposed to the standard solid colour change.

 

Below is my custom skin code. I originally put the gradientFill under selectedSkin, and when that didn't work I added it to downSkin. I'm still not seeing anything in my app. Any suggestions?

 

(oh, this is the skin for my CustomCellRenderer)

 

 

package
{
	import flash.display.GradientType;
	import flash.display.Sprite;
	import flash.geom.Matrix;
	import flash.text.engine.SpaceJustifier;
	
	import qnx.ui.skins.SkinAssets;
	import qnx.ui.skins.SkinStates;
	import qnx.ui.skins.UISkin;
	
	
	public class MenuSkin extends UISkin
	{
		/**@private**/
		protected var upSkin:Sprite;
		/**@private**/
		protected var selectedSkin:Sprite;
		/**@private**/
		protected var disabledSkin:Sprite;
		/**@private**/
		protected var downSkin:Sprite;
		
		protected var upOddSkin:Sprite;
		
		public function MenuSkin()
		{
			super();
		}
		
		override protected function initializeStates():void 
		{

			var type:String = GradientType.RADIAL; 
			var colors:Array = Array[0x00FF00, 0x000088]; 
			var alphas:Array = Array[1, .2]; 
			var ratios:Array = Array[0, 25]; 
			var spreadMethod:String = SpreadMethod.PAD; 
			var interp:String = InterpolationMethod.LINEAR_RGB; 
			var focalPtRatio:Number = 0; 
			
			var matrix:Matrix = new Matrix(); 
			var boxWidth:Number = 175; 
			var boxHeight:Number = 50; 
			var boxRotation:Number = Math.PI/2; // 90° 
			var tx:Number = 25; 
			var ty:Number = 0; 
			matrix.createGradientBox(boxWidth, boxHeight, boxRotation, tx, ty); 
			
			upSkin = new Sprite();
			//upSkin.opaqueBackground = 1;
			upSkin.graphics.beginFill(0x2b2b2b, .99);
			upSkin.graphics.drawRect(0,0,200,200);
			upSkin.graphics.endFill();
			
			//upOddSkin = new Sprite();
			//upOddSkin.graphics.beginFill(0x222222, .99);
			//upOddSkin.graphics.drawRect(0,0,200,200);
			//upOddSkin.graphics.endFill();
			
			downSkin = new Sprite();
			downSkin.graphics.beginGradientFill(type,  
				colors, 
				alphas, 
				ratios,  
				matrix,  
				spreadMethod,  
				interp,  
				focalPtRatio);
			//downSkin.graphics.drawRect(0,0,200,200);
			downSkin.graphics.endFill();
			
			disabledSkin = new Sprite();
			disabledSkin.graphics.beginFill(0x000000);
			disabledSkin.graphics.drawRect(0,0,200,200);
			disabledSkin.graphics.endFill();
							
			selectedSkin = new Sprite();
			selectedSkin.graphics.beginGradientFill(type,  
				colors, 
				alphas, 
				ratios,  
				matrix,  
				spreadMethod,  
				interp,  
				focalPtRatio); 
			//selectedSkin.graphics.drawRect(0,0,200,200);
			selectedSkin.graphics.endFill();
			
			
			setSkinState(SkinStates.UP, upSkin );
			setSkinState(SkinStates.UP_ODD, upOddSkin );
			setSkinState(SkinStates.SELECTED,selectedSkin );
			setSkinState(SkinStates.DISABLED, disabledSkin );
			setSkinState(SkinStates.DOWN, downSkin );
			showSkin( upSkin );
			
		}
		
	}
}

 

 

 

- If you like my response/post, or it helped you find an answer you were looking for, please provide a Kudo - white star to the bottom right of this post. -
- Please use the search bar at the top, or check out the PlayBook FAQ's for help getting started -
- Hockey DrillBook -
Developer
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: Applying Gradient to selection of list

hey jffurian,

 

try this code:

 

 

package
{
import flash.display.GradientType;
import flash.display.InterpolationMethod;
import flash.display.SpreadMethod;
import flash.display.Sprite;
import flash.geom.Matrix;
import flash.text.engine.SpaceJustifier;

import qnx.ui.skins.SkinAssets;
import qnx.ui.skins.SkinStates;
import qnx.ui.skins.UISkin;


public class MenuSkin extends UISkin
{
/**@private**/
protected var upSkin:Sprite;
/**@private**/
protected var selectedSkin:Sprite;
/**@private**/
protected var disabledSkin:Sprite;
/**@private**/
protected var downSkin:Sprite;

protected var upOddSkin:Sprite;

public function MenuSkin()
{
super();
}

override protected function initializeStates():void
{

var type:String = GradientType.RADIAL;
var colors:Array = [0x00FF00, 0x000088];
var alphas:Array = [1, .2];
var ratios:Array = [0, 255];
var spreadMethod:String = SpreadMethod.PAD;
var interp:String = InterpolationMethod.LINEAR_RGB;
var focalPtRatio:Number = 0;

var matrix:Matrix = new Matrix();
var boxWidth:Number = 200;
var boxHeight:Number = 200;
var boxRotation:Number = Math.PI/2; // 90°
var tx:Number = 25;
var ty:Number = 0;
matrix.createGradientBox(boxWidth, boxHeight, 0, 0, 0);

upSkin = new Sprite();
//upSkin.opaqueBackground = 1;
upSkin.graphics.beginFill(0x2b2b2b, .99);
upSkin.graphics.drawRect(0,0,200,200);
upSkin.graphics.endFill();

//upOddSkin = new Sprite();
//upOddSkin.graphics.beginFill(0x222222, .99);
//upOddSkin.graphics.drawRect(0,0,200,200);
//upOddSkin.graphics.endFill();

downSkin = new Sprite();
downSkin.graphics.beginGradientFill(type,
colors,
alphas,
ratios,
matrix,
spreadMethod);

downSkin.graphics.drawRect(0,0,200,200);
downSkin.graphics.endFill();

disabledSkin = new Sprite();
disabledSkin.graphics.beginFill(0x000000);
disabledSkin.graphics.drawRect(0,0,200,200);
disabledSkin.graphics.endFill();

selectedSkin = new Sprite();
selectedSkin.graphics.beginGradientFill(type,
colors,
alphas,
ratios,
matrix,
spreadMethod,
interp);

selectedSkin.graphics.drawRect(0,0,200,200);
selectedSkin.graphics.endFill();


setSkinState(SkinStates.UP, upSkin );
setSkinState(SkinStates.UP_ODD, upOddSkin );
setSkinState(SkinStates.SELECTED,selectedSkin );
setSkinState(SkinStates.DISABLED, disabledSkin );
setSkinState(SkinStates.DOWN, downSkin );
showSkin( upSkin );

}

}
}

 

 

So im not too familiar with gradients in as3 (too much code for my liking - i just create the image and use that as a background haha). there were a few errors in your code, like when you are creating a new array, you dont need the Array part, just [   ] will do. also you didnt import hte SpreadMethod and InterpolationMethod classes. i then modified a few more things that are bolded. so from whats there, you should see something show up when you select. not sure if those are the colors or not.

 

hope that clears a few things up. 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: 1,003
Registered: ‎01-16-2011
My Device: PlayBook (sim)
My Carrier: Rogers

Re: Applying Gradient to selection of list

Thanks JRab, but that code didn't work either. I'm not sure why as the original code was copied from Abode's website.

 

I have no problem using an image as a background, and I think it might actually give me the result I'm looking for. How would I do that instead?

- If you like my response/post, or it helped you find an answer you were looking for, please provide a Kudo - white star to the bottom right of this post. -
- Please use the search bar at the top, or check out the PlayBook FAQ's for help getting started -
- Hockey DrillBook -
Highlighted
Developer
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: Applying Gradient to selection of list

hey jffurian,

 

here is an example of a custom skin to a list. i basically used the image they provide for their list and created my own (via photoshop). i then took that image and embedded it into the MenuSkin class and then used that skin in the SELECTED and DOWN states. I also will post just a regular list that uses it.

 

ListTests.as:

 

 

package
{
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;

import qnx.ui.data.DataProvider;
import qnx.ui.listClasses.DropDown;
import qnx.ui.listClasses.List;
import qnx.ui.listClasses.ListSelectionMode;


[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;

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: "Thomas Luddington"});
myArray.push({label: "Master Maruyn"});
myArray.push({label: "Master Gardyner"});
myArray.push({label: "Captain Vaughan"});
myArray.push({label: "Master Kendall"});
myArray.push({label: "Master Prideox"});
myArray.push({label: "Robert Holecroft"});
myArray.push({label: "Rise Courtenay"});
myArray.push({label: "Master Hugh Rogers"});
myArray.push({label: "Thomas Foxe"});
myArray.push({label: "Edward Nugen"});
myArray.push({label: "Darby Glande"});
myArray.push({label: "Edward Kelle"});
myArray.push({label: "Iohn Gostigo"});
myArray.push({label: "Erasmus Clefs"});
myArray.push({label: "Edward Ketcheman"});
myArray.push({label: "Iohn Linsey"});
myArray.push({label: "Thomas Rottenbury"});
myArray.push({label: "Roger Deane"});
myArray.push({label: "Iohn Harris"});

myDataProvider = new DataProvider(myArray);

myList.dataProvider = myDataProvider;

/**
* set the cell renderer to the renderer holding
* your new skin
*/
myList.setSkin(MyCustomCellRenderer);

myList.selectionMode = ListSelectionMode.SINGLE;
myList.setPosition(100,25);
myList.setSize(300, 400);

addChild(myList);



}
}
}

 

 

MyCustomCellRenderer.as:

 

 

package
{
import qnx.ui.listClasses.AlternatingCellRenderer;

public class MyCustomCellRenderer extends AlternatingCellRenderer
{
public function MyCustomCellRenderer()
{
super();

setSkin(MenuSkin);
}

}
}

 

 

MenuSkin.as (Most changes):

 

 

package
{
import flash.display.Sprite;

import qnx.ui.skins.SkinStates;
import qnx.ui.skins.listClasses.CellRendererSkinWhite;

public class MenuSkin extends CellRendererSkinWhite
{
/**
* Here is where you set your background cell.
* You need to "slice" up your image. Based
* on the way the orginal image looked I assumed
* the slice was the image itself. so i adjusted
* the slices to be the edges of the image.
*/

[Embed(source="images/CustomCellRendererSelected.png",
scaleGridTop="0", scaleGridBottom="47",
scaleGridLeft="0", scaleGridRight="26")]
private var OddShapeSkin:Class;


protected var skin1:Sprite;

override protected function initializeStates():void
{
/** since we are just changing the two states
* (SELECTED and DOWN) we want the other states
* to stay the same so we call the original
* intializeStates() method
*/
super.initializeStates();

/** set the skin1 sprite to be the embedded image */
skin1 = new OddShapeSkin();

/** set your states */

setSkinState(SkinStates.SELECTED, skin1);
setSkinState(SkinStates.DOWN, skin1);


}
}
}

 

 

There are comments throughout that should help you walk through it. i've also attached the image i used for this test. i saved it in the images/ folder under the root src folder. You will also notice i extended the CellRendererSkinWhite class instead of the UISkin. The UISkin is too premature and doesnt have all the functionality a list cell needs. so i instead extended the CellRendererSkinWhite that already has it all.

 

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: 1,003
Registered: ‎01-16-2011
My Device: PlayBook (sim)
My Carrier: Rogers

Re: Applying Gradient to selection of list

Nope lol. I copied yoru menuSkin exactly and it kept all my old settings, didn't change a thing. I've even tried merging the code and taking yours and mine and it isn't working. It'd be a lot easier to just setImage for each state lol.

- If you like my response/post, or it helped you find an answer you were looking for, please provide a Kudo - white star to the bottom right of this post. -
- Please use the search bar at the top, or check out the PlayBook FAQ's for help getting started -
- Hockey DrillBook -
Developer
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: Applying Gradient to selection of list

where did you place the image? also how does your cellrenderer look like?

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: 1,003
Registered: ‎01-16-2011
My Device: PlayBook (sim)
My Carrier: Rogers

Re: Applying Gradient to selection of list

I think I need to submit a bug: there is no facepalm icon.

 

My CellRenderer was calling the wrong skin. Everything works great lol. Now, can I do the following to set one image for upSkin, and a different one for selectedSkin?

package
{
	import flash.display.Sprite;
	
	import qnx.ui.skins.SkinStates;
	import qnx.ui.skins.listClasses.CellRendererSkinWhite;
	
	public class MenuSkin extends CellRendererSkinWhite
	{    
		/**
		 * Here is where you set your background cell.
		 * You need to "slice" up your image. Based
		 * on the way the orginal image looked I assumed
		 * the slice was the image itself. so i adjusted
		 * the slices to be the edges of the image.
		 */
		
		[Embed(source="images/CustomCellRendererSelected.png", 
                scaleGridTop="0", scaleGridBottom="47",
                scaleGridLeft="0", scaleGridRight="26")]
		private var OddShapeSkin:Class;
		
		protected var skin1:Sprite;
		
                [Embed(source="images/CustomCellRendererUp.png", 
                scaleGridTop="0", scaleGridBottom="47",
                scaleGridLeft="0", scaleGridRight="26")]
		private var upShapeSkin:Class;
		
		protected var skin2:Sprite;
		override protected function initializeStates():void
		{        
			/** since we are just changing the two states
			 * (SELECTED and DOWN) we want the other states
			 * to stay the same so we call the original
			 * intializeStates() method
			 */
			super.initializeStates();
			
			/** set the skin1 sprite to be the embedded image */
			skin1 = new OddShapeSkin();
			skin2 = newupShapeSkin();
			/** set your states */
			
			setSkinState(SkinStates.SELECTED, skin1);
			setSkinState(SkinStates.DOWN, skin1);
			setSkinState(SkinStates.UP, skin2);
		}
	}
}

 

 

- If you like my response/post, or it helped you find an answer you were looking for, please provide a Kudo - white star to the bottom right of this post. -
- Please use the search bar at the top, or check out the PlayBook FAQ's for help getting started -
- Hockey DrillBook -
Developer
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: Applying Gradient to selection of list

hey jffurian,

 

dont worry, we've all been there haha and yes you have the right idea. as long as you have an image there of that size. also change this line:

 

			skin2 = newupShapeSkin();

 

to

 

			skin2 = new newupShapeSkin();

 

and you should be golden! 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