Каков ваш рабочий процесс создания скинов Flex-приложений? - PullRequest
4 голосов
/ 13 декабря 2010

Кроме того, с чего начать, если вы хотите создать скин complete Flex 4? Есть ли список всех «частей» (составных частей), которые вам нужны для создания графики для чего-либо, или некоторые полные примеры скинов для использования в качестве шаблона? И правильно ли отображаются ваши скины в представлении дизайна Flash Builder? (включая встроенные шрифты)

Ответы [ 3 ]

5 голосов
/ 13 декабря 2010

Большинство людей укажут на Flash Catalyst, но в прошлый раз, когда я посмотрел, он не был всеобъемлющим с точки зрения создания полной темы оформления / темы, не говоря уже о других проблемах, присущих программному обеспечению 1.0. Я начинаю с копирования файлов скина по умолчанию и их изменения, а также создания нового файла CSS на основе файла defaults.css, который поставляется вместе с SDK. Самое сложное в том, что не все компоненты (Tree, DataGrid, DateChooser, ColorPicker и т. Д.) Доступны как компоненты Spark, а это значит, что для создания полного скина / темы вам также необходимо создать несколько скинов mx. Итог: если вы серьезно относитесь к тому, чтобы сделать это правильно, вам придется потратить много времени на понимание defaults.css и классов скинов, на которые он ссылается.

Чтобы ответить на ваш оригинальный вопрос, мой личный рабочий процесс - создать макет обложки в OmniGraffle, а затем использовать его в качестве руководства для изменения копий файлов обложек по умолчанию (см. Spark.skins и mx.spark.skins. ) манипулируя mxml напрямую (в отличие от использования графического инструмента, такого как Illustrator или Catalyst.)

Надеюсь, это поможет.

1 голос
/ 14 декабря 2010

По сути, у вас есть много вариантов оформления приложений Flex 4:

  • Использование "общих" стилей (chromeColor, selectionColor, focusColor, ...). Это обычно называется «Стиль» вместо Skinning, потому что вы только измените общий вид приложения. На сегодняшний день это самый простой способ быстро изменить внешний вид вашего приложения, ничего не зная о FXG, MXMLG, ... Недостатком является то, что оно все равно будет выглядеть как приложение Flex, но с разными цветами / шрифтами
  • Использование инструментов Adobe для создания файлов FXG. Этими инструментами могут быть Illustrator, Photoshop, Flash CS5. Вы разрабатываете каждый из компонентов spark с помощью этих инструментов и экспортируете результат в формате .fxg. FXG хорош, потому что он оптимизирован , но вы не можете использовать такие вещи, как привязка данных в нем
  • Напишите свой скин в MXMLG, вручную (начиная с нуля или скопировав стандартный скин для спарка) или с помощью Flash Catalyst. Catalyst может взять ваш дизайн в Illustrator или Photoshop и преобразовать его в MXMLG. Опыт показывает, что это все еще больно, даже с последней версией. И вам часто приходится делать такие вещи, как this .

В нашей команде нет такой вещи, как рабочий процесс дизайнера / разработчика с Flash Catalyst. Следующая версия выглядит лучше, но она все еще далека от того, что Microsoft делает с Visual Studio / Blend. При этом новая архитектура Spark просто потрясающая. Скинирование намного проще, гибче и читабельнее. С помощью этой архитектуры разработчик кодирует компонент, а дизайнер обрабатывает его, только зная контракт (скины, скины, данные) Это также верно для представлений, если вы используете шаблон модели презентации.

Нет скинов-шаблонов, доступных в Flex 3, поскольку в скинах больше не используется символ. Что можно сделать, так это проводник стиля Flex 4.

Последнее слово, это уже было сказано здесь, но не забывайте, что в текущей версии (4.1) не существует искрового эквивалента для всех компонентов, поэтому вы по-прежнему будете использовать техники скинов Flex 3 для компонентов. такие как DataGrid, Tree, ...

0 голосов
/ 13 декабря 2010

Это то место, где я обычно "начинаю"

http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html

Как только я выясняю, какие компоненты нужно обработать, я не могу изменить то, что хочу изменить во Flexс помощью CSS, затем я перехожу во Flash и начинаю разбивать компоненты на части и настраивать их.

http://www.adobe.com/devnet/flex/articles/skins_styles.html

(Кроме того, у меня никогда не было что-нибудь рендеринга "правильно "в представлении дизайна)

...