Как создать GroupBox

[litebox]

Можно ли стандартными компонентами Flex сделать такое:

Пробовал слепить на основе Panel, но как-то не вышло

[Ales Protiv]

Думаю можно взять любой контейнер и прикрутить к нему нехитрый скин.

[cihexe]

угу,и добавь на него ещё саб-контейнер обзови его items, и добавь пару методов по добавлению и удалению...должно получиться

[r_r_f_r]

Ключевое слово viewMetricsAndPadding.

И криво написанный результат(стили не работают, уж даж не помню как их делать)

package
{
	import flash.display.Graphics;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
 
	import mx.containers.Box;
	import mx.core.EdgeMetrics;
 
[Style(name="linePadding", type="Number", format="Length", inherit="no")]
[Style(name="titleFontFamily", type="String", inherit="yes")]
[Style(name="titleFontColor", type="uint", format="Color", inherit="no")]
[Style(name="titleFontSize", type="Number", format="Length", inherit="no")]
[Style(name="paddingLeft", type="Number", format="Length", inherit="no")]
 
[Style(name="lineColor", type="uint", format="Color", inherit="no")]
 
	public class XaBox extends Box
	{
		private var _linePadding:Number = 5;
		private var _tf:TextField;
		private var _tfFormat:TextFormat = new TextFormat();
		private var _lineColor:uint = 0x000000;
		public function XaBox()
		{
			super();
		}
 
		override protected function createChildren():void
		{
			super.createChildren();
			_tf = new TextField();
			_tf.autoSize = TextFieldAutoSize.LEFT;
			rawChildren.addChild(_tf);
 
			_tf.defaultTextFormat = _tfFormat;
 
		}
 
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
		{
			super.updateDisplayList(unscaledWidth,unscaledHeight);
			if (_titleChange)
			{
				_tf.text = _title;
 
				_titleChange = false;
			}
 
			var gr:Graphics = graphics;
			gr.clear();
 
			gr.lineStyle(1,_lineColor,1);
			gr.moveTo(_linePadding/2 + 10,_linePadding/2);
			_tf.x = _linePadding/2 + 10;
			_tf.y = _linePadding/2-_tf.height/2;
			gr.lineTo(_linePadding/2,_linePadding/2);
			gr.lineTo(_linePadding/2,unscaledHeight - _linePadding/2);
			gr.lineTo(unscaledWidth - _linePadding/2,unscaledHeight - _linePadding/2);
			gr.lineTo(unscaledWidth - _linePadding/2,_linePadding/2);
			gr.lineTo(unscaledWidth - _linePadding/2,_linePadding/2);
			gr.lineTo(_linePadding/2 + _tf.getBounds(this).right,_linePadding/2);
		}
 
		private var _font:String;
		private var _color:uint;
		private var _size:Object;
		override public function stylesInitialized():void
		{
			super.stylesInitialized();
			_linePadding = getStyle('linePadding') ? getStyle('linePadding') : 10;
			_font = getStyle('titleFontFamily') ? getStyle('titleFontFamily') : "Arial";
			_color = getStyle('titleFontColor') ? getStyle('titleFontColor') : 0x000000;
			_size = getStyle('titleFontSize') ? getStyle('titleFontSize') : 10;
			_lineColor = getStyle('lineColor') ? getStyle('lineColor') : 0xFF0000;
		}
 
		override public function styleChanged(styleProp:String):void
		{
			if (styleProp == "paddingLeft" || styleProp == "paddingTop")
			{
				super.setStyle(styleProp, getStyle(styleProp)+_linePadding);
			}
			else if (styleProp == "linePadding")
			{
				_linePadding = getStyle("linePadding");
			}
			else if (styleProp == "lineColor") // дописываем свои всякие интересности
			{
				_lineColor = getStyle("lineColor");
			}
			else
			{
				super.styleChanged(styleProp);
			}
			if (_tf)
			{
				_tfFormat.font = _font;
				_tfFormat.color = _color;
				_tfFormat.size = _size;
				_tf.defaultTextFormat = _tfFormat;
			}
			invalidateDisplayList();
		}
 
		private var _title:String = "Title";
		private var _titleChange:Boolean = false;
		public function set title(value:String):void
		{
			if (_title != value)
			{
				_titleChange = true;
				_title = value;
				invalidateDisplayList();
			}
		}
 
		public function get title():String
		{
			return _title;
		}
 
		override public function get viewMetricsAndPadding():EdgeMetrics
		{
			var metr:EdgeMetrics = super.viewMetricsAndPadding;
			metr.right += _linePadding;
			metr.bottom += _linePadding;
			return metr;
		}
	}
}

Нужно либо в теме, либо в цсс, либо при объявлении указать paddingLeft & top.

[GBee]

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
	<mx:Canvas left="10" top="10" bottom="10" right="10" borderStyle="inset" />
	<mx:Canvas backgroundColor="#FFFFFF" left="15" top="2">
		<mx:Label text="GroupBox"/>
	</mx:Canvas>
</mx:Canvas>

:о)) Эффект достигнут

[r_r_f_r]

Быстрая работа, но сколько у вас есть свободного времени для подгона цвета фона? и сколько метров оперативы пользователя вам не жалко?

[GBee]

Обычно у меня нет свободного времени писать новые компоненты. А один такой не убьет приложение (думаю даже 100 не убьет). Подгон цвета - не нужен, он может браться из контейнера :о). Мне вообще не жалко современные машины. И как сказал один блоггер (не совсем точная интерпретация): "Никому не нужен оптимизированный проект, если он не работает". Сколько времени заказчика вы потратите на отладку вашего компонента?

Добавлено через 1 минуту
Ах да! Первый ответ про скинизациюю я поддерживаю на 100%

[litebox]

Всем спасибо за ответы!
Отдельное спасибо r_r_f_r за развернутый пример - как делать компоненты мне пригодится на будущее, а пока заюзаю вариант GBee - на данный момент мне этого достаточно

[r_r_f_r]

Ну мне потребовалось чтоб это написать 20 минут, что как мне кажется не существенно, а вот если надумаете анимировать набор флекс компонентов как-нить специфически, то что-нибудь обычно начинает "корчить рожи".

Но результат действительно для быстрой реализации хорош, я не знал стиля borderStyle, спасибо.

2 litebox, на эдобе есть маленький док-пдф по разработке флекс компонентов, на буржуйском только, но есть, называется "жизнь флекс компонентов"(разбит на несколько частей по темам).