Oct
10
Arcadio October 10, 2012 8:17 pm

Source for a button like ComboBox to mobile apps:

flex mobile button

Button:

package component
{
	import skin.ComboBoxButtonSkin;
	import spark.components.Button;

	public class MyButton extends Button
	{
		[Bindable]
		[Embed(source="/skin/button_arrow.png")]
		private var Icon:Class;

		public function MisButton()
		{
			super();

			setStyle('skinClass', ComboBoxButtonSkin);
			setStyle('icon',Icon);
			setStyle('iconPlacement', 'right');
		}
	}
}

Skin:

package skin
{
	import flash.display.DisplayObject;
	import spark.skins.mobile.ButtonSkin;

	public class ComboBoxButtonSkin extends ButtonSkin
	{
		[Bindable]
		[Embed(source="/es/prosegur/uriana/skin/mobile_button_up.png")]
		private var up:Class;

		[Bindable]
		[Embed(source="/es/prosegur/uriana/skin/mobile_button_down.png")]
		private var down:Class;

		public function ComboBoxButtonSkin()
		{
			super();

			upBorderSkin = up;
			downBorderSkin = down;
		}

		override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
		{
			super.layoutContents(unscaledWidth, unscaledHeight);

			// Align to left
			var labelX:Number = labelDisplay.x-labelDisplay.x+10;
			var labelY:Number = labelDisplay.y + 5;
			setElementPosition(labelDisplay, labelX , labelY);
			setElementPosition(labelDisplayShadow, labelDisplay.x, labelDisplay.y + 1);

			// Icon placement right
			var iconX:Number = 0;
			var iconY:Number = 0;
			var unscaledIconWidth:Number = 0;
			var unscaledIconHeight:Number = 0;
			var iconDisplay:DisplayObject = getIconDisplay();
			var adjustablePaddingBottom:Number = layoutPaddingBottom;
			var viewWidth:Number = Math.max(unscaledWidth - layoutPaddingLeft - layoutPaddingRight, 0);
			var viewHeight:Number = Math.max(unscaledHeight - layoutPaddingTop - adjustablePaddingBottom, 0);
			var iconViewWidth:Number = Math.min(unscaledIconWidth, viewWidth);
			var iconViewHeight:Number = Math.min(unscaledIconHeight, viewHeight);

			iconY = (viewHeight - iconViewHeight) / 2;
			iconX = (viewWidth - iconViewWidth);
			setElementPosition(iconDisplay, iconX, iconY);
		}
	}
}

Otros interesting tutorials: Skinning a Flex Mobile Button with Bitmaps and Create skins for a mobile application.

  • Share/Bookmark

Comments (2)

  1. Tink said:

    Really not sure why you would create a custom button class for this.

    Why not use the standard s:Button and apply the icon and styles using an external style sheet.

Post a comment



Creative Commons License
This blog is under Creative Commons licence, unless indicated otherwise.
Special thanks to Mark James for the icon set used in this blog.