Многие знают, что, за исключением Flex Chartings (платных компонентов для построения графиков), Adobe Flex SDK распространяется в виде открытых исходных кодов. Это означает, что вы всегда можете:

• посмотреть логику работы того или иного компонента;
• исправить найденную в SDK ошибку;
• послать разработчикам патч, исправляющий эту ошибку;
• самостоятельно скомпилировать из исходников рабочую версию SDK.

Доступ к исходникам Flex SDK предоставляется посредством системы контроля версий SVN, и вы всегда можете загрузить их, обратившись к trunk-у по следующему URL-адресу.

Вы спросите: «Для чего мне это нужно, если можно скачать одну из уже скомпилированных сборок Flex 4 SDK с сайта Adobe, и не придется проделывать никаких дополнительных манипуляций?». Самостоятельная сборка SDK на основе рабочей копии, полученной из системы контроля версий, обладает следующими преимуществами:

• сюда относится весь предыдущий список возможностей;
• на вашем компьютере всегда будет самая свежая сборка Flex 4 SDK;
• для этого вам не нужно будет каждый раз заново скачивать весь архив со сборкой — достаточно будет только обновить измененные разработчиками исходные файлы и перекомпилировать SDK. Это особенно критично, если вдруг вы окажетесь в таком месте, где в наличии есть только медленное и нестабильное соединение с сетью;
• вы сможете отслеживать и быть в курсе того, над какими элементами трудились в последнее время разработчики Flex 4 SDK.

Однако не нужно забывать о том, что в trunk-е может оказаться нерабочая версия SDK. В этом случае вам нужно будет откатиться на одну из предыдущих ревизий. Немного позже я объясню, как это сделать. Для начала наладим весь процесс сборки. Т.к. я все еще являюсь замшелым «виндузятником» и никак не могу пересесть на другую операционную систему, то весь описываемый процесс будет ориентирован на пользователей Windows. Думаю, пользователи других операционных систем смогут по аналогии с этой статьей настроить сборку на своих компьютерах.

Первым делом нам нужен хороший SVN-клиент, который позволит загрузить исходники из хранилища. Если у вас уже установлена подобная программа, вы можете пропустить этот шаг. Я уже достаточно давно в качестве подобного клиента под Windows использую TortoiseSVN, который встраивается в оболочку операционной системы и позволяет работать с файлами и папками в Проводнике при помощи контекстного меню, появляющегося по щелчку правой кнопкой мыши. Скачиваем и устанавливаем программу. Обратите внимание, что на странице загрузки программы есть множество языковых пакетов (в том числе и русский), позволяющих локализовать язык интерфейса программы. Далее перезагружаем ОС.

Создаем папку, в которой будет располагаться Flex 4 SDK. Я рекомендую создать ее в корне логического диска или файловой системы, а из названия папки исключить пробелы. Например, создать папку c:/flex_sdk_4. Это обусловлено тем, что в таком случае будет удобнее работать с SDK через командную строку.

Щелкаем правой клавишей мыши по папке и в контекстном меню выбираем пункт TortoiseSVN → SVN Checkout… (SVN Извлечь…). В появившемся диалоговом окне указываем адрес до папки trunk Flex 4 SDK, глубину охвата при извлечении указываем Fully recursive (Полностью, рекурсивно) и выбираем пункт HEAD revision (HEAD-ревизия) для извлечения. Нажимаем кнопку OK и идем пить кофе, пока будут извлекаться исходные коды Flex SDK.

Теперь нам необходимо установить и настроить Apache Ant (страничка на Википедии) — очень полезный инструмент, позволяющий разработчикам автоматизировать различные процессы во время сборки и тестирования своих приложений. В свою очередь, разработчики Adobe Flex SDK автоматизировали процесс сборки Flex 4 SDK при помощи этого инструмента. Загружаем архив с программой и распаковываем его содержимое в папку C:\Program Files\Ant\. Теперь прописываем путь к папке bin в переменную среды Path. Для этого щелкаем правой клавишей по иконке Мой компьютер и в появившемся меню выбираем пункт Свойства. Переходим на вкладку Дополнительно и нажимаем кнопку Переменные среды. В списке Системные переменные так же через точку с запятой добавляем путь C:\Program Files\Ant\bin к переменной Path. Нажимаем, где нужно, кнопки Применить и OK. Перезагружаем Windows.

Компиляторы Flex SDK представляют собой программы, которые компилируются и работают в среде Java. Поэтому нам нужно установить на свой компьютер JDK. Для этого идем на сайт компании Sun и скачиваем последнюю версию Java SE Development Kit. На момент написания статьи такой версией была JDK SE 6.12. После окончания загрузки устанавливаем среду. Во время всей процедуры инсталляции можно руководствоваться действиями мастера установки по умолчанию. После завершения установки, снова открываем окно редактирования переменных среды и добавляем переменную JAVA_HOME в список системных переменных, а ее значением устанавливаем строку с путем к папке JDK: C:\Program Files\Java\jdk1.6.0_12.

Остался последний этап подготовки системы к компиляции Flex 4 SDK. Дело в том, что во время сборки Flex 4 SDK производится выполнение нескольких UNIX-овых shell-скриптов, которые, естественно, не будут работать под Windows, однако без проблем выполнятся под Mac OS и Linux. Но этот пункт тоже решаем. В корневой папке Flex 4 SDK находится файл README.txt, который содержит строку «This version of Flex is officially built in Cygwin on Windows XP Pro SP2». Т.е. разработчики в Adobe так же собирают SDK под Windows, единственной тонкостью является наличие в системе установленного Cygwin (страничка на Википедии) — эмулятора командной строки UNIX. Устанавливаем Cygwin, воспользовавшись для этой цели специальным загрузчиком и инсталлятором. Для установки указываем папку, находящуюся в корне логического диска. Путь к этой папке не должен содержать пробелов. Можно воспользоваться путем, предлагаемым по умолчанию: C:\cygwin\.

После установки запускаем консоль Cygwin, переходим в папку с исходными кодами Flex 4 SDK и запускаем сборку при помощи Apache Ant:

Осталось дождаться окончания билда и собранная своими руками копия Flex 4 SDK готова к работе!

Чтобы синхронизировать свою рабочую копию Flex 4 SDK с теми изменениями, которые внесли в trunk разработчики, необходимо выбрать пункт SVN Update (Обновить) в контекстном меню папки с рабочей копией, дождаться завершения процесса обновления и пересобрать проект. Таким образом вы всегда будете иметь на своем компьютере самую свежую версию Flex 4 SDK.

Теперь пару слов о том, что нужно делать, если вдруг вы обновились до нестабильной ревизии в хранилище Flex 4 SDK. Щелкаем правой клавишей по папке с локальной рабочей копией Flex 4 SDK и в контекстном меню выбираем пункт TortoiseSVN → Update to revision… (Обновить до ревизии…), в появившемся окне переключитесь на пункт Revision (Ревизия), введите номер одной из предыдущих стабильных ревизий в текстовое поле и нажмите кнопку OK. После завершения обновления пересоберите Flex 4 SDK.

На этом статья закончена. Желаю вам удачных экспериментов с новой версией Flex SDK!

22 комментария

Создание 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.

12 комментариев