Flex 2, 3, 4 & Co

вторник, декабря 26, 2006

Введение в контейнеры

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

Использование Flex 2 и AMFPHP

Перевел летнюю статью Майка Поттера о работе с PHP из Flex 2 через AMFPHP.
А тем временем вышла бета AMFPHP 1.9, поддерживающая json, xml-rpc, amf3. Сервис-браузер теперь на флексе. Примеры работы с AMFPHP можно скачать на гугловской страничке проекта.

вторник, декабря 19, 2006

Первое Fisix приложение

Недавно я писал про альфа-релиз движка Fisix. Вот перевод вводного урока по его использованию.

воскресенье, декабря 17, 2006

Flex-девелоперы, терпите, ваше время - 2008 год...

Яков Файн, прослушав финансовый отчет от Адоби сделал маленький обзор:
- на данный момент прибыльными являются продукты из Creative Suite;
- Acrobat вообще рабочая лошадка;
- LiveCycle является победителем в enterprise-секторе;
- Flash Lite рулит на мобильных девайсах;
- прибылей от Flex и Apollo ожидают в 2007 году.

Поэтому флексеры вольются в мейнстрим только к 2008 году, а значит сейчас самое время учиться.

P.S. Интересно, в России кто-нибудь имеет доходы от этого? Не считая работу с забугорными закзчиками.

Вышла альфа 2d движка Fisix

Движок реализован на ActionScript 3. Скачать можно отсюда.
Примеры:
Mona the Ragdoll
Bike Game
Boxes Demo
Hourglass

Несколько уроков:
Первое Fisix приложение
Работа с Fisix в FlashDevelop
Партиклы
FisixObject
Мануал по Fisix

Думаю, скоро переведу.

Компонент FileUpload

Coding cowboys причесали свое приложение по загрузке файлов и выпустили компонент FileUpload (исходник).

вторник, декабря 12, 2006

Как правильно переносить текст в ячейке DataGrid

Брюс Филлип недавно потратил целых полтора часа на поиск решения проблемы правильного переноса в DataGrid.

Суть проблемы в следующем. Текст в ячейке с атрибутом wordWrap=true будет переноситься в остальных рядах, только если он переносится в первом. Посмотрим на следующий пример. Измените ширину правой колонки Title так, чтобы текст ячейки не требовал переноса, затем перейдите туда и обратно, чтобы обновить вид. При этом, если следующие ряды требуют переноса, то его не будет и текст просто обрежется. Если же текст первой ячейки переносится изначально, то все остальные будут переноситься тоже. То есть никакой wordWrap не поможет...

А поможет нам variableRowHeight = true!

Papervision3D - примеры использования

Papervision3D - 3D движок для Flash 8/9 проектов. Как заявляют разработчики, он отличается легкостью применения и высокой производительностью. Примеры его использования мягко говоря впечатляют:
раз, два, три, четыре и пять (с Flex'ом).

Ссылки по теме:
Страница на OSFlash
Блог разработчиков
Email лист

Исходников пока нет, но обещают в декабре.

Первая часть урока Flex Cairngorm/WebORB Issue Tracker

Дерек начал выкладывать урок по созданию Flex Cairngorm/WebORB Issue Tracker приложения. Я начал его переводить.

воскресенье, декабря 10, 2006

Переходы между цветами

Даррон Шелл выложил пример создания так называемых Color Transitions.

Примеры по скинованию Flex-приложений

Эндрю Трайс выложил в довес к своей презентации по скинованию несколько примеров скинования с исходниками, в числе которых использование scale9, изображений при скиновании, программного создания скинов и др. Загрузить весь код можно отсюда. Посмотреть работу можно со страницы оригинального поста.

четверг, декабря 07, 2006

Эмуляция repeat-x/repeat-y для фона Flex-приложения

Чтобы создать дублируемый фон для приложения можно использовать заливку beginBitmapFill для заведомо большого прямоугольника, который будет играть роль фона. Посмотреть можно здесь. Исходники там же.

среда, декабря 06, 2006

Просмотр сгенерированного из MXML-приложения AS кода

Как известно, Flex при компиляции создает из MXML-кода ActionScript. Просмотреть созданный код можно, задав параметр компиляции -keep-generated-actionscript в свойствах проекта в разделе Flex Copmiler. Теперь при компиляции будет создана папка generated, где будет расположен весь код.

вторник, декабря 05, 2006

Интеграция WPF/E и Flash

Ли Бримлоу выложил пример интеграции Flash и WPF через JavaScript и исходники.

Использование mx:Metadata для задания стилей компонентов

Я уверен, что вы умеете создавать пользовательские компоненты во Flex и применять к ним CSS. Но знаете ли вы, что можно использовать стили компонента для задания стилей элементов, находящихся внутри этого компонента?

Давайте взглянем на пример. Здесь расположены два компонента (example 1 и example 2). Это два экземпляра компонента "MXML_Example". Да, выглядят они по разному, но родитель у них один. Каждый "MXML_Example" сожержит mx:Panel, mx:TextArea и mx:Button.

Посмотрим на исходный код компонентов:

<components:MXML_Example width="{(width/2)-20}" left="10" top="80" title="Example 1" styleName="example1" height="200" />
<components:MXML_Example width="{(width/2)-20}" right="10" top="80" title="Example 2" styleName="example2" height="200" />

Разница лишь в атрибуте styleName.

Давайте посмотрим на исходный код компонента "MXML_example". В теге mx:Metadata можно увидеть определения трех стилей.

<mx:Metadata>
  [Style(name="panelStyleName", type="String", inherit="no" )]
  [Style(name="buttonStyleName", type="String", inherit="no" )]  
  [Style(name="textAreaStyleName", type="String", inherit="no" )]  
</mx:Metadata>

По наступлению события creationComplete эти стили применяются к компонентам внутри "MXML_Example".

private function onCreationComplete() : void
{
  panel.styleName = getStyle("panelStyleName");
  button.styleName = getStyle("buttonStyleName");
  textArea.styleName = getStyle("textAreaStyleName");
}

А вот и сам CSS:

.example1
{
  panelStyleName:"panel1";
  buttonStyleName:"button1";
  textAreaStyleName:"textArea1";
}
.example2
{
  panelStyleName:"panel2";
  buttonStyleName:"button2";
  textAreaStyleName:"textArea2";
}

Можно увидеть, что для запчастей компонентов применены разные стили.

Открыть в новом окне
Посмотреть исходный код
Скачать исходный код

Статья

пятница, декабря 01, 2006

Еще одна реализация paging в DataGrid

Некто Gurufaction, вдохновленный постраничной прокруткой данных в DataGrid предложил свой пример решения данного вопроса.

Выложены исходники Flex/RoR конвертера изображений

Derek Wischusen выложил исходники Flex/RoR конвертера изображений.

четверг, ноября 30, 2006

Поисковые инструменты

Продолжая тему поиска flex приложений, кода и другой инфы увидел пост Браяна Рили:

Постраничный вывод в DataGrid

Смотрим, код - по правой кнопке. Насколько я понял из оригинального поста, исходный источник данных в виде массива разделяется на необходимое число подмассивов, которые и выводятся по очереди.

Уменьшение размера swf с помощью удаленных библиотек

Накнулся на интересный пост Джеймса Ворда, в котором рассказано, как уменьшить размер выходного swf файла с помощью использования Runtime Shared Libraries (RSL) - удаленных библиотек. Вот перевод.

Flex 2 позволяет загружать эти библиотеки с других доменов. Подразумевается, что приложение будет указывать на какой-нибудь определенный набор библиотек, который браузер будет быстро доставать из кэша. Перед началом необходимо заметить, что это не поддерживается Adobe, хотя команда разработчиков и работает в этом направлении, пока это просто хак. Во-вторых, пока нет нормального централизованного хранилища для RSL- библиотек, они хранятся на моем сервере, который может быть взломан и вместо изначальных библиотек вы получите какие-нибудь опасные компоненты. Несмотря на эти препоны, этот способ удовлетворяет большинство приложений и позволяет значительно уменьшить их размер. Как же это применить?

Мною было создано три библиотеки: малая, средняя и большая. Библиотеки взаимодополняемы, то есть, если необходимо использовать среднюю, то загружать надо малую и среднюю. См. таблицу у автора.

1) Скачайте необходимые SWC для RSL
2) Измените build path проекта
2.1) Если вы компилируете с помощью Ant или командной строки, определите пути к библиотекам следующим образом:

flex2-sdk/bin/mxmlc -external-library-path+=build/framework-2_0_0_a-small.swc,
build/framework-2_0_0_a-medium.swc -runtime-shared-libraries=
http://ws.jamesward.org/framework-2_0_0_a-small.swf,
http://ws.jamesward.org/framework-2_0_0_a-medium.swf-o=
build/testHostedFlexLibs-medium.swf -file-specs=test/testHostedFlexLibs.mxml

2.2) Если вы используете Flex Builder, перейдите в Project -> Properties -> Flex Build Path -> Library Path -> Add SWC -> [добавьте необходимые SWC]. Затем выберите SWC’s RSL URL и нажмите кнопку Edit. Измените Link Type на "Runtime shared library (RSL)", введите правильный URL, уберите галку с "Auto extract checkbox", затем нажмите OK.

2.3) Если вы используете FDS, добавьте SWC в папку flex/user_classes и обновите runtime-shared-libraries соответственно в файле flex-config.xml.

3) Перекомпилируйте приложение (если этого не произошло автоматически) и размер файла значительно уменьшится!

4) Еще одна преграда - приложение будет работать только из интернета, потому что политика безопасности запрещает загружать внешние ресурсы.