Компиляция совместимых с Flash CS3 swc-библиотек с помощью Flex 3 SDK

Создание swc-библиотек — задача, с которой рано или поздно сталкивается каждый actionscript-разработчик, и способы ее решения зависят во многом от тех инструментов, которые есть в распоряжении программиста. В своей работе я стараюсь минимально использовать возможности среды, насколько это возможно, разумно и позволяют условия, поэтому описанные в статье действия минимально привязаны к возможностям конкретной среды разработки и могут быть с легкость выполнены в рамках любой IDE, использующей Flex 3 SDK.

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

В качестве примера создадим swc, содержащий в себе два простых, но, на мой взгляд, весьма полезных класса — CookieManager и FirebugConsole. Начнем с создания нового проекта — File → New → New Flash Project. В появившемся окне диалога задаем имя проекта, его расположение, версию ActionScript, а также указываем, что хотим использовать Pure AS(Flex 3).

Приступим к созданию структуры проекта. Для этого создадим основные директории:

• bin — в эту папку будет скомпилен наш итоговый swc;
• src — директория с файлами исходных кодов (после создания, необходимо добавить эту папку в Classpath);
• build — здесь будут располагаться файлы, отвечающие за процесс сборки swc-библиотеки.

Как только все директории созданы, можно приступать к их наполнению. Для начала в папке src разместим исходные коды, думаю здесь сложностей возникнуть не должно. Следующий этап — создание файлов в директории build. Нам потребуются следующие файлы:

• local.properties — файл, в котором будут прописаны пути до компилятора в локальной системе;
• build.properties — файл, с параметрами сборки;
• build.xml — собственно сам build-файл;
• compc-config.xml – конфигурационный файл для компилятора compc.

Самое время приступить к наполнению вышеперечисленных файлов. Начнем с local.properties:

flex.sdk.dir=E:/tools/flex3sdk
compc.path=${flex.sdk.dir}/bin/compc.exe

В первой строке мы прописали путь до Flex SDK, во второй — относительно него указали путь до компилятора compc, так что правим только первую строку согласно своим условиям и переходим к build.properties:

source.dir=${basedir}/src
output.dir=${basedir}/bin

output.file=riafactory.swc

Здесь тоже все весьма просто, указали пути до src и bin, а так же прописали имя файла нашей swc-библиотеки.

Если все готово, переходим к написанию build-файла. В нашем случае он будет небольшим, и состоять из двух задач: build и compile.swc.

<?xml version="1.0" encoding="utf-8" ?>
<project name="RIAFactory classes" basedir=".." default="build">

	<property file="build/local.properties" />
	<property file="build/build.properties" />

	<property name="compc.args" value="-load-config '${output.dir}/compc-config.xml'" />

	<target name="build">
		<antcall target="compile.swc" />
	</target>

	<target name="compile.swc">
		<filter token="flex.sdk.dir" value="${flex.sdk.dir}" />
		<filter token="source.dir" value="${source.dir}" />
		<filter token="output.dir" value="${output.dir}" />
		<filter token="output.file" value="${output.file}" />
		<copy file="${basedir}/build/compc-config.xml" tofile="${output.dir}/compc-config.xml" filtering="true" />
		<exec executable="${compc.path}">
			<arg line="${compc.args}" />
		</exec>
		<delete file="${output.dir}/compc-config.xml" />
	</target>

</project>

Как вы наверно обратили внимание, компилятору передается единственный параметр –load-config указывающий путь до конфигурационного файла. По сути, использование конфигурационного файла является альтернативой передачи множества параметров компилятору, а поскольку build.xml в идеале должен отвечать только за последовательность этапов процесса сборки, то, на мой взгляд, этот подход является предпочтительным.

Переходим к compc-config.xml:

<?xml version="1.0" encoding="utf-8"?>
<flex-config>
	<compiler>
		<external-library-path>
			<path-element>@flex.sdk.dir@/frameworks/libs/player/playerglobal.swc</path-element>
		</external-library-path>
		<source-path>
			<path-element>@source.dir@</path-element>
		</source-path>
	</compiler>
	<output>@output.dir@/@output.file@</output>
	<include-classes>
		<class>ru.riafactory.external.FirebugConsole</class>
		<class>ru.riafactory.net.CookieManager</class>
	</include-classes>
</flex-config>

В конфигурационном файле мы прописали путь до playerglobal.swc, относительно корневой директории Flex SDK, указали пути до src и до итоговой swc-библиотеки, а также перечислили те классы, который хотим включить в наш swc-файл.

Примечание: узел <include-classes> можно опустить, в этом случае компилятор вкомпилит все найденные классы в директориях указанных в source-path, однако наличие этого узла позоляет вам точно знать, какие классы будут вкомпилены.

Теперь все готово, чтобы собрать swc. Открываем панель Ant (Window → Show View → Ant), в ней нажимаем на кнопку Add Buildfile, выбираем build.xml, после чего выделяем его в панели и нажимаем Run the Default Target of the Selected Buildfile. В консоли должны появиться сообщения о ходе сборки, среди которых самым приятным для нас должно стать BUILD SUCCESSFUL. Если все так, смотрим в папку bin (не забывая сделать Refresh во Flash Explorer) и видим там свежесобранный swc.

На этом можно было и закончить, если бы не один момент. Получившийся swc будет отлично подключаться к проектам, разрабатываемых в средах, использующих Flex SDK, однако все попытки подключить его к проекту во Flash IDE путем копирования в папку Flash-компонентов будут тщетны.

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

Для этого нам потребуется manifest.xml. Справедливости ради, стоит отметить, что манифест служит ни сколько целям компиляции Flash CS3 совместимых swc, сколько огранизационным целям, по крайней мере, так гласит документация. И так, приступим к написанию manifest.xml, предварительно создав его в директории src.

<?xml version="1.0" encoding ="utf-8"?>
<componentPackage>
	<component id="FirebugConsole" class="ru.riafactory.external.FirebugConsole" />
	<component id="CookieManager" class="ru.riafactory.net.CookieManager" />
</componentPackage>

В манифесте мы прописываем необходимые компоненты, указав их идентификатор и класс, понятное дело, что id должен быть уникальным.

Теперь, когда у нас есть manifest.xml, нам потребуется немного изменить параметры компиляции. Начнем с build.properties, добавим в него пару строк:

namespace.uri=http://www.riafactory.ru
namespace.manifest.file=manifest.xml

В первой строке, мы указываем uri пространства имен наших компонентов, во второй — имя файла манифеста.

Далее внесем изменения в build.xml. Теперь задача compile.swc выглядит следующим образом:

<target name="compile.swc">
	<filter token="flex.sdk.dir" value="${flex.sdk.dir}" />
	<filter token="source.dir" value="${source.dir}" />
	<filter token="output.dir" value="${output.dir}" />
	<filter token="output.file" value="${output.file}" />
	<filter token="namespace.uri" value="${namespace.uri}" />
	<filter token="namespace.manifest.file" value="${namespace.manifest.file}" />
	<copy file="${basedir}/build/compc-config.xml" tofile="${output.dir}/compc-config.xml" filtering="true" />
	<exec executable="${compc.path}">
		<arg line="${compc.args}" />
	</exec>
	<delete file="${output.dir}/compc-config.xml" />
</target>

Ну и последнее, что нам потребуется сделать — это внести соответсвующие поправки в compc-config.xml, после которых он должен выглядеть так:

<?xml version="1.0" encoding="utf-8"?>
<flex-config>
	<compiler>
		<external-library-path>
			<path-element>@flex.sdk.dir@/frameworks/libs/player/playerglobal.swc</path-element>
		</external-library-path>
		<source-path>
			<path-element>@source.dir@</path-element>
		</source-path>
		<namespaces>
			<namespace>
				<uri>@namespace.uri@</uri>
				<manifest>@source.dir@/@namespace.manifest.file@</manifest>
			</namespace>
		</namespaces>
	</compiler>
	<include-namespaces>
		<uri>@namespace.uri@</uri>
	</include-namespaces>
	<output>@output.dir@/@output.file@</output>
	<compute-digest>false</compute-digest>
	<include-classes>
		<class>ru.riafactory.external.FirebugConsole</class>
		<class>ru.riafactory.net.CookieManager</class>
	</include-classes>
</flex-config>

Теперь снова откомпилируем наш swc и попробуем его подключить к Flash CS3. Для этого скопируем его в директорию с Flash компонентами (можете создать там отдельную папку для сторонних swc):

• для Windows C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\Components
• для MacOS HD:Applications:Adobe Flash CS3:Configuration:Components

Теперь запускаем Flash, открываем панель Components (Window → Components или Ctrl+F7) и видим в ней компоненты из нашего swc (если Flash уже запущен необходимо сделать Reload из контекстного меню панели).

Теперь перетаскиваем компоненты в Library, после чего смело можем пользоваться классами из swc во Flash CS3. Ну а в качестве проверки можем вставить в первый кадр следующий код:

После чего нажимаем Ctrl+Enter и видим в Output:

[class CookieManager]
[class FirebugConsole]

Что означает, что Flash прекрасно видит классы из swc. Архив с FDT проектом.

Напоследок несколько заключительных слов. Использование конфигурационного файла вместо множества параметров, как показала моя практика, является более удачным подходом, поскольку все параметры компиляции собраны в одном специально предназначенном для этого файле. Конечно, работая во Flex Builder, большинство параметров можно задать используя диалоговые окна, однако многие разработчики используют альтернативные IDE.

Еще один момент, который стоит отметить. В панели Components Flash IDE, отображаются все компоненты, входящие в состав swc, а точнее перечисленные в файле catalog.xml, который находится внутри swc-библиотеки. Здесь есть важный момент, перетаскивая в Library один из компонентов, мы фактически импортируем все классы, расположенных в том же swc. Это легко проверить, удалите из Library один из добавленных компонентов и попробуйте снова скомпилировать приложение, результаты вызовов trace останутся неизменными. В этом случае, если в состав вашего swc входит библиотека классов, не являющихся компонентами как таковыми, то более красивым решением будет создание пустого класса, своим названием характеризующего обшие задачи библиотеки. Скажем, если в swc расположена библиотека классов логгинга, то общий класс может называться LoggingClasses или что-нибудь в этом роде, и именно его следует указать в качестве единственного компонента входящего в swc.

Что касается создания визуальных компонентов для Flash CS3 силами Flex SDK, здесь, к сожалению, не могу дать каких либо полезных замечаний. Единственный известный мне способ создания таких компонентов — использование Flash IDE и класса fl.livepreview.LivePreviewParent. Если, кто-то знает решение обозначенной задачи, милости прошу в комментарии.

Ну и наконец, тем из вас, кто дожил до этих строк и кому представленного материала показалось мало или остались вопросы, несколько ссылок по теме:

• Apache Ant User Manual;
• Using compc, the component compiler;
• Configuration file syntax;
• About manifest files.