Adobe Flex – примеры, находки, разработка, програмирование

Полезная функция

Posted by: Константин on: Август 21, 2011

Небольшая, но полезная функция, которую я использую постоянно. Переводит XML в ValueObject, который потом дает все преимущества Type Hinting’а, уменьшает вероятность ошибки и может использоваться для передачи данных через AMF.

public static function xmlToVO(vo:Object,item:XML):Object
{
	var xml:XML = describeType(vo);
	for each(var accessor:XML in xml..accessor)
	{
		var name:String = accessor.@name;
		var type:String = accessor.@type;
		vo[name] = item.child(name);
	}
	return vo;
}

Обычно я использую это примерно таким образом:

private function onAlbumsListGetResult(event:ResultEvent):Array
{
	var resultXML:XML = event.result as XML;
	var resultArray:Array = new Array();
	for each(var item:XML in resultXML.album) resultArray.push(CommonUtils.xmlToVO(new PhotoAlbumVO,item) as PhotoAlbumVO);
	return resultArray;
}

Ctrtl + R

Posted by: Константин on: Август 21, 2011

Собираетесь быть хорошим разработчиком? Привыкайте к Ctrl + R. В большом проекте у вас множество классов, компонентов, ItemRenderers, Skins и все такое. Я уверен, что это сочетание кнопок уже сохранило мне многие десятки часов.
Второе место Ctrl + F
Третье Ctrl + T

Наблюдение

Posted by: Константин on: Июль 19, 2011

Наверное, чаще всего я пишу эту строчку Alert.show(ObjectUtil.toString(event.result));

Метки: ,

Внедрение русских (кириллических) шрифтов в Flex

Posted by: Константин on: Январь 11, 2011

Вспомнил одну полезную вещь, из-за которой в свое время был готов рвать волосы на голове. Часто у внедренных (embedded) шрифтов не отображаются русские буквы, хотя они точно есть в шрифте. Лечится в CSS таким образом:

@font-face
{
fontFamily: MainFont;
fontWeight: normal;
fontStyle: normal;
src: url(“../assets/fonts/AGLETLR.TTF”);
unicodeRange: U+0020-U+007F,
U+00A0-U+00FF,
U+0400-U+04FF;
}

Только адрес шрифта конечно надо ставить свой.

Метки: , ,

Новое приложение вконтакте

Posted by: Константин on: Октябрь 16, 2010

Сегодня счастливый день, я наконец-то запустил своё новое приложение вконтакте. Приложение называется “Поцелуй меня в почку” и суть у него примерно такая же идиотская, как и название. Кому интересно, вот ссылка: http://vkontakte.ru/app1984405

По этому поводу, готов ответить на вопросы о создании приложений для контакта, если, конечно у кого-то есть вопросы, а у меня найдется ответ. Вопросы оставляйте в комментариях.

Преображаем стандартный Accordion из Flex

Posted by: Константин on: Август 5, 2010

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

  1. При наведении на заголовок вкладки, курсор не менялся на “руку”  и небыло понятно, что на неё можно нажать.
  2. Стандартный дизайн очень сер и не вписывается в мой проект.

Я взялся за переделку и получилось вот это:

flex accordion

результат

Читать далее…

Метки: , ,

Это достаточно тривиальная вещь, но потребность в изменении дизайна Scroll Bar’ов возникает довольно часто, и не все знают, как это сделать. В англоязычном интернете полно примеров на эту тему, но в русскоязычной части с этим похуже.
На самом деле есть два способа, можно сделать программный скин, например, при помощи Degrafa, а можно просто поменять скин при помощи картинок и замечательной технологии Scale Grid, которая встроена в Flex. Я опишу простой способ с картинками. Читать далее…

Эффект свечения для надписи на кнопке

Posted by: Константин on: Июль 21, 2010

Во-первых, ура, я научился вставлять исходники с подсветкой кода. А во-вторых, в одном из проектов мне понадобилось сделать, чтобы при наведении на кнопку надпись на ней начинала светиться, и, соответственно, переставала светиться, когда мышку убираешь. Для эффекта свечения есть два варианта: попроще – это GlowFilter, он никак не анимирован, просто добавляет свечение и всё, и есть поинтереснее – Glow Effect, он не просто добавляет свечение, но ещё и анимирует процесс. Просто применить Glow Effect к кнопке в данном случае было бы бесполезно, так как мне нужно, чтобы светилась надпись, а не кнопка. На мой взгляд, в большинстве таких случаев, самое простое и правильное решение, просто расширить исходный компонент и добавить туда необходимую функциональность, что я и сделал:

package view.components.custom
{
	import flash.events.MouseEvent;
	import flash.filters.GlowFilter;
	
	import mx.controls.Button;
	import mx.effects.Glow

	public class GlowButton extends Button
	{
		var glow:GlowFilter = new GlowFilter();
		var glowEffect:Glow = new Glow();
		var unglowEffect:Glow = new Glow();
				
		public function GlowButton()
		{			
			super();
			this.buttonMode = true;
			this.useHandCursor = true;
			glow.color = 0xFFFFFF;
			glow.alpha = 1;
			glow.blurX = 25;
			glow.blurY = 25;		
			
			glowEffect.alphaFrom = 0;
			glowEffect.alphaTo = 1;
			glowEffect.color = 0xFFFFFF;
			glowEffect.blurXFrom = 0;
			glowEffect.blurXTo = 15;
			glowEffect.blurYFrom = 0;
			glowEffect.blurYTo = 15;
			glowEffect.duration = 500;
				
			unglowEffect.alphaFrom = 1;
			unglowEffect.alphaTo = 0;
			unglowEffect.duration = 500;					
				
	        addEventListener(MouseEvent.ROLL_OVER, glowHandler);
	        addEventListener(MouseEvent.ROLL_OUT, unglowHandler);
		}
		private function glowHandler(event:MouseEvent):void
		{
			//this.textField.filters = [this.glow];
			if(this.unglowEffect.isPlaying) this.unglowEffect.end();			
			this.glowEffect.play([this.textField]);
		}
		private function unglowHandler(event:MouseEvent):void
		{
			if(this.glowEffect.isPlaying) this.glowEffect.end();
			this.unglowEffect.play([this.textField]);
			//this.textField.filters = [];
		} 
	}
}

Сначала я сделал с использованием GlowFilter, но потом закомментировал и вместо Glow Filter добавил GlowEffect. Кроме того (возможно это только у меня какой-то глюк) по- умолчанию у меня у всех кнопок стоит buttonMode и useHandCursor на false, чтобы каждый раз их не включать, я так добавил их включенными по умолчанию в расширенной версии кнопки.

Пользуйтесь, надеюсь кому-нибудь пригодится.

Метки: , ,

Delayed Instantiation и PureMVC

Posted by: Константин on: Январь 12, 2010

На днях столкнулся с небольшой проблемой. Мне надо было изменить свойства компонента, который ещё не был создан. Если говорить подробнее, то у меня был ViewStack с четырьмя компонентами, как известно, по-умолчанию создается только тот компонент, который виден первым, остальные компоненты создаются только, когда их надо отобразить. Действия в первом компоненте должны были вызвать переключение ViewStack на второй компонент и изменять текст в TextInput’е. Для этого у меня была создана команда, которая последовательно вызывала два медиатора, для переключения экрана на нужный компонент и для изменения свойств в нём соответственно.

var applicationMediator:ApplicationMediator = facade.retrieveMediator(ApplicationMediator.NAME) as ApplicationMediator;
applicationMediator.switchToSendMail();
var sendMailMediator:SendMailMediator = facade.retrieveMediator(SendMailMediator.NAME) as SendMailMediator;
sendMailMediator.setReplyContent(note.getBody() as LetterVO);

Проблема в том, что второй медиатор срабатывал раньше, чем компонент был создан, и появлялась ошибка.

Мой обходной путь заключается в том, чтобы проверять свойство initalized компонента, которое указавает на то, что компонент создан и, в зависимости от него, либо менять свойства, либо добавлять event listener для события creationComplete, который будет вызвать нужную функцию, после того, как компонент будет создан.

Вот, как это реализовано в медиаторе:

public function setReplyContent(mail:LetterVO):void
{
if(sendMail.initialized) sendMail.setReplyContent(mail);
else
{
this.delayedReplyInfo = mail;
sendMail.addEventListener(FlexEvent.CREATION_COMPLETE,delayedReply);
}
}
private function delayedReply(event:FlexEvent):void
{
sendMail.setReplyContent(this.delayedReplyInfo);
}

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

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

Теперь создадим функционал для третьего пункта меню «Читать свои буриме». В этом пункте будут отображаться буриме написанные самим пользователем, а так же те буриме, которые он добавит в избранные (это тоже ещё только предстоит реализовать). Изначально это будет список, каждый из пунктов списка будет содержать: рифмы, имя и фамилию автора и кнопку прочитать. При нажатии на кнопку, будет открываться текст буриме. Для удобства сделаем отдельный Value Object, который будет использован для пунктов списка. Назовём его SavedBurimeVO.as и поместим в папку model/VO/. Объект типа SavedBurimeVO должен содержать: id буриме, 2 пары рифм и информацию об авторе, думаю пока что этого будет достаточно.
Читать далее…

Мои контакты:

ICQ: 355679242

Email: flex4flex@mail.ru

Вконтакте: http://vkontakte.ru/id1933734


Принимаю заказы на разработку Flex приложений

Архивы

Follow

Get every new post delivered to your Inbox.