Go!Verla Flex Blog

В основном это список произвольных мелких нюансов без сортировки и развития. Рекомендуется к быстрому прочтению, что-бы задействовалось подсознание :-).

Реализация itemRenderer-ов для грида

Никогда не ленитесь и создавайте все свои рендереры наследуя UIComponent или соответствующих контролов Label, CheckBox, TextInput. Никогда не используйте в рендерерах Box, Canvas — они безбожно тормозят.

Что такое mxml?

Что-бы понять суть, добавте параметр -keep-generated-actionscript компилятору флекса. После этого большинство вопросов как это работает, когда допустим биндинг и т.п. исчезнут сами собой.

Слушание событий

По возможности всегда подписывайтесь на события через mxml. Это плохой код:

private function onCreationComplete() : void {
	listView.addEventListener(RotatorsEvent.NEW_ROTATOR, baseEventsHandler);
	listView.addEventListener(RotatorsEvent.EDIT_ROTATOR, baseEventsHandler);
	listView.addEventListener(RotatorsEvent.DELETE_ROTATOR, baseEventsHandler);
	editView.addEventListener(RotatorsEvent.SAVE_ROTATOR, baseEventsHandler);
	editView.addEventListener(RotatorsEvent.CANCEL_ROTATOR, baseEventsHandler);
}

private function baseEventsHandler(event : RotatorsEvent) : void {
	switch (event.type) {
		case RotatorsEvent.NEW_ROTATOR : newRotatorAction(); break;
		case RotatorsEvent.EDIT_ROTATOR : editRotatorAction(); break;
		case RotatorsEvent.SAVE_ROTATOR : saveRotatorAction(event); break;
		case RotatorsEvent.DELETE_ROTATOR : deleteRotatorAction(); break;
		case RotatorsEvent.CANCEL_ROTATOR :
		default  : currentState = LIST_VIEW_STATE;
	}
}

Нужно писать так:

<view:RateCardListToolBar
	newRateCard="onNewRateCard(event)"
	loadRateCardSimpleItems="onLoadRateCardSimpleItems(event)"
	editRateCard="onEditRateCard(event)"/>

Жизненный цикл компонента

Обязательно найдите время для знакомства с очерёдностью и смыслом методов invalidateProperties(), commitProperties(), measure(), invalidateDisplayList(), updateDisplayList() и т.п. Не нужно пытаться что-либо рисовать в объекте graphics в конструкторе, для этого есть другое, более удачное место. Интересуйтесь!

Используйте code-behind

Зачастую использование тега <mx:Script /> допустимо только тогда, когда в нём будет не более одного-двух екранов кода. Если у вас огромный компонент обязательно выносите код в отдельный базовый класс:

Component.mxml:
<ComponentBase
	xmlns="*"
	xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Button
		label="button"
		click="onClick()" />
</ComponentBase>

ComponentBase.as:
package
{
	import mx.controls.Alert;

	public class ComponentBase
	{
		protected function onClick() : void
		{
			Alert.show("Я буду больше интересоваться внутренностями флекса",
				"Напоминание");
		}
	}
}

Event handlers

По-момему, нет ничего лучше чем называть методы хендлеров по такому конвеншену:

Для MouseEvent.CLICK — метод:

onClick(event : MouseEvent) : void

Для ListEvent.CHANGE для объекта с id=”customComponent” — метод:

onCustomComponentChange(event : ListEvent) : void

Избавляемся от противных предупреждений

Если у вас накопилось больше нуля предупреждений — срочной начинайте чистку. Вот, кстати, пример нелогичности Action Script, но тем не менее решаемый:

for each (var item : ItemType in items) {
	...code...
}

...code...

for each (var item : ItemType in items) {
	...code...
}

В таком коде вас ожидает Duplicate code definition warning. Исправить можно заменив последний цикл на такое:

for each (item in items) {
	...code...
}

Непреодолимый public

Все контролы в компоненте mxml имеют область видимости public, к сожалению так устроен мир. Это не значит что к ним можно свободно обращаться снаружи: customComponent.customButton.label = “very bad”, всегда нужно создавать соответствующие гетеры и сетеры: customComponent.buttonLabel = “very well”.

Binding

Во-первых, его нужно использовать. Подходы типа «Мы любим сами контролировать процесc присваивания данных» — пафос и лишняя головная боль. Пример максимально не эффективного кода:

if (!isExpand)
{
	activeDates.visible = false;
	hiatus.visible = false;
	startAirTime.visible = false;
	endAirTime.visible = false;
	daysAirTime.visible = false;
}
else
{
	activeDates.visible = true;
	hiatus.visible = true;
	startAirTime.visible = true;
	endAirTime.visible = true;
	daysAirTime.visible = true;
}

Нужно всего лишь пометь isExpand как [Bindable] и связать все контролы с ним в mxml.

Использование for each

Странно, но многие начинающие флексеры не знают о нём, что приводит к проблемам производительности. Нельзя:

for (var i : int = 0; i < result.length; i++)
{
	result[i].children = rateCard.rateCardsComparison;
}

Нужно:

for each(var item : DataType in result)
{
	item.children = rateCard.rateCardsComparison;
}

Изменение размера и позиции в updateDisplayList()

Глянем пример кода:

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

	if (horizontalScrollBar != null)
	{
		horizontalScrollBar.x = watchColumnEdge;
		horizontalScrollBar.width = width - watchColumnEdge;
	}
}

Так делать нельзя (диспачатся лишние события), нужно использовать методы move() и setActualSize().

Dynamic классы

Желательно отказаться от использования этого механизма. Только если нужно бысто заполнять коллекции или что-либо объектами типа {label : “Label”, handler : onSomething}.