33 коровы

AIR. Полезные советы. Custom chome, тень и html

Как сделать приложение с кастомным хромом можно найти за 5 минут.
Речь пойдет о том как к нему добавить тень.

Проблема: Добавить к аир приложению тень.

Решение: Используем следующий код:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
					   xmlns:s="library://ns.adobe.com/flex/spark" 
					   xmlns:mx="library://ns.adobe.com/flex/mx"
					   width="900" height="700" 
					   showStatusBar="false"
					   backgroundAlpha="0" >
	<fx:Script>
		<![CDATA[
			import spark.filters.GlowFilter;
		]]>
	</fx:Script>
	<fx:Declarations>
	</fx:Declarations>
	<s:Group left="5" right="5" top="5" bottom="5" 
			 filters="{[new spark.filters.GlowFilter(0, 1, 10, 10)]}"
			 id="shadowGroup"
			 >
		<s:Rect width="100%" height="100%">
			<s:fill>
				<s:SolidColor color="0xffffff">
 
				</s:SolidColor>
			</s:fill>
		</s:Rect>
	</s:Group>
	<s:Group left="5" right="5" top="5" bottom="5"
			 id="mainContentGroup" >
		<s:layout>
			<s:VerticalLayout verticalAlign="middle" horizontalAlign="center"/>
		</s:layout>
		<s:Button label="Close" click="{close()}" />
		<mx:HTML location="http://www.youtube.com/watch?v=Bil534HGMw4" width="100%" height="100%">
		</mx:HTML>
	</s:Group>
</s:WindowedApplication>

Пояснения:

• backgroundAlpha="0" делаем прозрачным фон приложения. Он закрывает 100% процентов всего окна и нам мешает
• Оставляем по 5 пикселей свободного места вокруг контента (shadowGroup и mainContentGroup свойства left, right…) и применяем фильтр к shadowGroup. Данное решение связано с тем, что аир рисует только то, что попало в основное окно, поэтому наша тень должна в него поместиться
• Появление shadowGroup совсем не случайность. Она нужна обязательно, если вы планируете использовать HTML компонент в приложении. Если применять фильтры к HTML компоненту или к контейнерам, которые его содержат, то …. тадам – у него не рендерятся флешки :), вместо них пустые черные окошки. Незнание данного факта может, иногда, сеять панику в рядах разработчиков.

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

Если вы планирует добавлять поддержку фулскрина, то при переходе в него стоит: выставлять left|right|top|bottom в 0 и убирать фильтр (тень). Чтобы не оставались поля вокруг приложения и тень не появлялась на соседних монитора в случае использования нескольких мониторов.

Так же стоит помнить, что кастом хром это не самое лучшее решение для сложных, приложений содержащих большое количество графических объектов, текста и т.д. Производительность отрисовки может пострадать.

На сегодня пока все. Продолжение следует