Your SlideShare is downloading. ×
  • Like
Flex 4 gumbo framework
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Flex 4 gumbo framework

  • 970 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
970
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
11
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide



  • Работа в ПО Flex SDK основана на трех принципах:
    Все внимание дизайну: среда разработки обеспечивает новый уровень выразительности конечных проектов, благодаря использованию новых инструментов
    Продуктивность разработки: улучшенная производительность компилятора и языковых функций, таких как привязка данных.
    Эволюция среды разработки: новые возможности проигрывателя Flash Player в сочетании с новыми функциями для типовых сценариев использования.
  • Принцип «Все внимание дизайну» реализован в новой архитектуре компонентов и оболочек под названием Spark. На данный момент Spark содержит примерно 30 новых компонентов и примитивов, которые составляют основу для следующего поколения компонентов Adobe и обеспечивают простую интеграцию с Adobe Flash Catalyst. Еще один интересный аспект заключается в поддержке FXG, нового формата обмена для платформы Flash. Архитектура Spark также содержит обновленную, более универсальную модель компоновки. Новая компоновка, назначаемая в процессе выполнения приложения, предусматривает полноценную поддержку поворота 2D-объектов и масштабирования, а также возможность применения новых 3D-функций проигрывателя Flash Player 10 к любому компоненту после выполнения компоновки. Наконец, Spark использует новый, оптимизированный механизм анимации, служащий основой для создания улучшенных эффектов и переходов. Flex 4 поддерживает автоматический возврат переходов в исходное состояние, применение фильтров Pixel Bender в качестве эффектов, преобразования во всех трех измерениях и сложную анимацию на основе ключевых кадров. Мы понимаем, что среда Flex должна развиваться, не ограничиваясь архитектурой Spark. Именно поэтому в ПО Flex 4 был модернизирован процесс использования видео в приложениях Flex. В состав Spark входит компонент VideoDisplay для работы с видео (с поддержкой скрытых элементов управления), а также компонент VideoPlayer для работы с видео (оболочка для VideoElement с изменяемым оформлением). Оба класса основаны на классе работы с видео под названием Open Source Media Framework.
  • Во флексе используются 2 языка: Action Sctipt 3.0 и MXML. MXML — основанный на xml декларативный язык описания интерфейсов. Flex 4 обеспечивает новый набор компонентов и эффектов, при этом названия многих из них совпадают с названиями классов компонентов Flex 3. Чтобы избежать конфликтов имен в MXML, Flex 4 SDK предусматривает четыре разных пространства имен: MXML 2006, MXML 2009, Spark и Mx.
  • Во флексе используются 2 языка: Action Sctipt 3.0 и MXML. MXML — основанный на xml декларативный язык описания интерфейсов. Flex 4 обеспечивает новый набор компонентов и эффектов, при этом названия многих из них совпадают с названиями классов компонентов Flex 3. Чтобы избежать конфликтов имен в MXML, Flex 4 SDK предусматривает четыре разных пространства имен: MXML 2006, MXML 2009, Spark и Mx.
  • Во флексе используются 2 языка: Action Sctipt 3.0 и MXML. MXML — основанный на xml декларативный язык описания интерфейсов. Flex 4 обеспечивает новый набор компонентов и эффектов, при этом названия многих из них совпадают с названиями классов компонентов Flex 3. Чтобы избежать конфликтов имен в MXML, Flex 4 SDK предусматривает четыре разных пространства имен: MXML 2006, MXML 2009, Spark и Mx.
  • Во флексе используются 2 языка: Action Sctipt 3.0 и MXML. MXML — основанный на xml декларативный язык описания интерфейсов. Flex 4 обеспечивает новый набор компонентов и эффектов, при этом названия многих из них совпадают с названиями классов компонентов Flex 3. Чтобы избежать конфликтов имен в MXML, Flex 4 SDK предусматривает четыре разных пространства имен: MXML 2006, MXML 2009, Spark и Mx.
  • Во флексе используются 2 языка: Action Sctipt 3.0 и MXML. MXML — основанный на xml декларативный язык описания интерфейсов. Flex 4 обеспечивает новый набор компонентов и эффектов, при этом названия многих из них совпадают с названиями классов компонентов Flex 3. Чтобы избежать конфликтов имен в MXML, Flex 4 SDK предусматривает четыре разных пространства имен: MXML 2006, MXML 2009, Spark и Mx.
  • В предыдущих версиях (до Flex 4 SDK) корневой тег Application мог содержать визуальные и невизуальные элементы. Визуальные элементы добавлялись в Application через addChild(), а невизуальные рассматривались как объявления свойств. Теперь невизуальные элементы, которые представляют новые объявления свойств, не могут являться непосредственными элементами Application. Их необходимо добавлять в тег <fx:Declarations>. В состав невизуальных элементов входят эффекты, средства проверки, средства форматирования, объявления данных и классы RPC.
  • В рамках концепции «Продуктивность разработки» нашей основной целью было повышение производительности компилятора. Мы оптимизировали часто встречающиеся схемы использования фреймворка, что привело к заметным улучшениям рабочего процесса. Мы также внесли множество доработок в инструмент ASDoc, включая поддержку ASDoc в документах MXML. Была обновлена процедура привязки, она теперь предусматривает двустороннюю коммуникацию. Просто поставьте символ @ перед выражением привязки, и обновления, внесенные в целевой объект привязки, будут скопированы в исходный документ. Также по многочисленным запросам пользователей была реализована еще одна очень полезная функция — поддержка большего числа селекторов CSS, а также дочерних селекторов и селекторов на основе идентификаторов.
  • В рамках концепции «Продуктивность разработки» нашей основной целью было повышение производительности компилятора. Мы оптимизировали часто встречающиеся схемы использования фреймворка, что привело к заметным улучшениям рабочего процесса. Мы также внесли множество доработок в инструмент ASDoc, включая поддержку ASDoc в документах MXML. Была обновлена процедура привязки, она теперь предусматривает двустороннюю коммуникацию. Просто поставьте символ @ перед выражением привязки, и обновления, внесенные в целевой объект привязки, будут скопированы в исходный документ. Также по многочисленным запросам пользователей была реализована еще одна очень полезная функция — поддержка большего числа селекторов CSS, а также дочерних селекторов и селекторов на основе идентификаторов.
  • В рамках концепции «Продуктивность разработки» нашей основной целью было повышение производительности компилятора. Мы оптимизировали часто встречающиеся схемы использования фреймворка, что привело к заметным улучшениям рабочего процесса. Мы также внесли множество доработок в инструмент ASDoc, включая поддержку ASDoc в документах MXML. Была обновлена процедура привязки, она теперь предусматривает двустороннюю коммуникацию. Просто поставьте символ @ перед выражением привязки, и обновления, внесенные в целевой объект привязки, будут скопированы в исходный документ. Также по многочисленным запросам пользователей была реализована еще одна очень полезная функция — поддержка большего числа селекторов CSS, а также дочерних селекторов и селекторов на основе идентификаторов.
  • В рамках концепции «Продуктивность разработки» нашей основной целью было повышение производительности компилятора. Мы оптимизировали часто встречающиеся схемы использования фреймворка, что привело к заметным улучшениям рабочего процесса. Мы также внесли множество доработок в инструмент ASDoc, включая поддержку ASDoc в документах MXML. Была обновлена процедура привязки, она теперь предусматривает двустороннюю коммуникацию. Просто поставьте символ @ перед выражением привязки, и обновления, внесенные в целевой объект привязки, будут скопированы в исходный документ. Также по многочисленным запросам пользователей была реализована еще одна очень полезная функция — поддержка большего числа селекторов CSS, а также дочерних селекторов и селекторов на основе идентификаторов.
  • В рамках концепции «Продуктивность разработки» нашей основной целью было повышение производительности компилятора. Мы оптимизировали часто встречающиеся схемы использования фреймворка, что привело к заметным улучшениям рабочего процесса. Мы также внесли множество доработок в инструмент ASDoc, включая поддержку ASDoc в документах MXML. Была обновлена процедура привязки, она теперь предусматривает двустороннюю коммуникацию. Просто поставьте символ @ перед выражением привязки, и обновления, внесенные в целевой объект привязки, будут скопированы в исходный документ. Также по многочисленным запросам пользователей была реализована еще одна очень полезная функция — поддержка большего числа селекторов CSS, а также дочерних селекторов и селекторов на основе идентификаторов.
  • В рамках концепции «Продуктивность разработки» нашей основной целью было повышение производительности компилятора. Мы оптимизировали часто встречающиеся схемы использования фреймворка, что привело к заметным улучшениям рабочего процесса. Мы также внесли множество доработок в инструмент ASDoc, включая поддержку ASDoc в документах MXML. Была обновлена процедура привязки, она теперь предусматривает двустороннюю коммуникацию. Просто поставьте символ @ перед выражением привязки, и обновления, внесенные в целевой объект привязки, будут скопированы в исходный документ. Также по многочисленным запросам пользователей была реализована еще одна очень полезная функция — поддержка большего числа селекторов CSS, а также дочерних селекторов и селекторов на основе идентификаторов.
  • В рамках концепции «Продуктивность разработки» нашей основной целью было повышение производительности компилятора. Мы оптимизировали часто встречающиеся схемы использования фреймворка, что привело к заметным улучшениям рабочего процесса. Мы также внесли множество доработок в инструмент ASDoc, включая поддержку ASDoc в документах MXML. Была обновлена процедура привязки, она теперь предусматривает двустороннюю коммуникацию. Просто поставьте символ @ перед выражением привязки, и обновления, внесенные в целевой объект привязки, будут скопированы в исходный документ. Также по многочисленным запросам пользователей была реализована еще одна очень полезная функция — поддержка большего числа селекторов CSS, а также дочерних селекторов и селекторов на основе идентификаторов.
  • В рамках концепции «Продуктивность разработки» нашей основной целью было повышение производительности компилятора. Мы оптимизировали часто встречающиеся схемы использования фреймворка, что привело к заметным улучшениям рабочего процесса. Мы также внесли множество доработок в инструмент ASDoc, включая поддержку ASDoc в документах MXML. Была обновлена процедура привязки, она теперь предусматривает двустороннюю коммуникацию. Просто поставьте символ @ перед выражением привязки, и обновления, внесенные в целевой объект привязки, будут скопированы в исходный документ. Также по многочисленным запросам пользователей была реализована еще одна очень полезная функция — поддержка большего числа селекторов CSS, а также дочерних селекторов и селекторов на основе идентификаторов.
  • В рамках концепции «Продуктивность разработки» нашей основной целью было повышение производительности компилятора. Мы оптимизировали часто встречающиеся схемы использования фреймворка, что привело к заметным улучшениям рабочего процесса. Мы также внесли множество доработок в инструмент ASDoc, включая поддержку ASDoc в документах MXML. Была обновлена процедура привязки, она теперь предусматривает двустороннюю коммуникацию. Просто поставьте символ @ перед выражением привязки, и обновления, внесенные в целевой объект привязки, будут скопированы в исходный документ. Также по многочисленным запросам пользователей была реализована еще одна очень полезная функция — поддержка большего числа селекторов CSS, а также дочерних селекторов и селекторов на основе идентификаторов.
  • В рамках концепции «Продуктивность разработки» нашей основной целью было повышение производительности компилятора. Мы оптимизировали часто встречающиеся схемы использования фреймворка, что привело к заметным улучшениям рабочего процесса. Мы также внесли множество доработок в инструмент ASDoc, включая поддержку ASDoc в документах MXML. Была обновлена процедура привязки, она теперь предусматривает двустороннюю коммуникацию. Просто поставьте символ @ перед выражением привязки, и обновления, внесенные в целевой объект привязки, будут скопированы в исходный документ. Также по многочисленным запросам пользователей была реализована еще одна очень полезная функция — поддержка большего числа селекторов CSS, а также дочерних селекторов и селекторов на основе идентификаторов.
  • Новый механизм создания анимации позволяет эффектам Flex 4 работать с произвольно выбранными объектами или типами свойств, а также использовать новые функции проигрывателя Flash Player 10. Механизм был переписан практически заново, чтобы превосходить более ранние классы эффектов Flex по четкости отображения и производительности. Этот механизм анимации можно запускать непосредственно в классах оболочки Spark при помощи переходов, основанных на состоянии. Эффекты можно также напрямую применять к частям компонента.
  • Новый механизм создания анимации позволяет эффектам Flex 4 работать с произвольно выбранными объектами или типами свойств, а также использовать новые функции проигрывателя Flash Player 10. Механизм был переписан практически заново, чтобы превосходить более ранние классы эффектов Flex по четкости отображения и производительности. Этот механизм анимации можно запускать непосредственно в классах оболочки Spark при помощи переходов, основанных на состоянии. Эффекты можно также напрямую применять к частям компонента.
  • Новый механизм создания анимации позволяет эффектам Flex 4 работать с произвольно выбранными объектами или типами свойств, а также использовать новые функции проигрывателя Flash Player 10. Механизм был переписан практически заново, чтобы превосходить более ранние классы эффектов Flex по четкости отображения и производительности. Этот механизм анимации можно запускать непосредственно в классах оболочки Spark при помощи переходов, основанных на состоянии. Эффекты можно также напрямую применять к частям компонента.
  • Новый механизм создания анимации позволяет эффектам Flex 4 работать с произвольно выбранными объектами или типами свойств, а также использовать новые функции проигрывателя Flash Player 10. Механизм был переписан практически заново, чтобы превосходить более ранние классы эффектов Flex по четкости отображения и производительности. Этот механизм анимации можно запускать непосредственно в классах оболочки Spark при помощи переходов, основанных на состоянии. Эффекты можно также напрямую применять к частям компонента.
  • Новый механизм создания анимации позволяет эффектам Flex 4 работать с произвольно выбранными объектами или типами свойств, а также использовать новые функции проигрывателя Flash Player 10. Механизм был переписан практически заново, чтобы превосходить более ранние классы эффектов Flex по четкости отображения и производительности. Этот механизм анимации можно запускать непосредственно в классах оболочки Spark при помощи переходов, основанных на состоянии. Эффекты можно также напрямую применять к частям компонента.
  • Новый механизм создания анимации позволяет эффектам Flex 4 работать с произвольно выбранными объектами или типами свойств, а также использовать новые функции проигрывателя Flash Player 10. Механизм был переписан практически заново, чтобы превосходить более ранние классы эффектов Flex по четкости отображения и производительности. Этот механизм анимации можно запускать непосредственно в классах оболочки Spark при помощи переходов, основанных на состоянии. Эффекты можно также напрямую применять к частям компонента.
  • Компоновка теперь отделена от контейнера. Одной из новых удобных функций, представленных в ПО Flex 4, является намного более гибкая и понятная система создания компоновок. В состав компоновок Flex 4 входит целый набор новых функций, включая набор прикладных программных функции (API) для полноценного преобразования 2D- и 3D-графики, возможность простой реализации пользовательских компоновок, и, что самое главное — назначаемые компоновки, но этим список полезных функций не исчерпывается. В основе идеи назначаемых компоновок лежит возможность назначения отдельных компоновок различным контейнерам и элементам управления (вместо встраивания компоновок непосредственно в определение контейнера или элемента управления).
  • Компоновка теперь отделена от контейнера. Одной из новых удобных функций, представленных в ПО Flex 4, является намного более гибкая и понятная система создания компоновок. В состав компоновок Flex 4 входит целый набор новых функций, включая набор прикладных программных функции (API) для полноценного преобразования 2D- и 3D-графики, возможность простой реализации пользовательских компоновок, и, что самое главное — назначаемые компоновки, но этим список полезных функций не исчерпывается. В основе идеи назначаемых компоновок лежит возможность назначения отдельных компоновок различным контейнерам и элементам управления (вместо встраивания компоновок непосредственно в определение контейнера или элемента управления).
  • Компоновка теперь отделена от контейнера. Одной из новых удобных функций, представленных в ПО Flex 4, является намного более гибкая и понятная система создания компоновок. В состав компоновок Flex 4 входит целый набор новых функций, включая набор прикладных программных функции (API) для полноценного преобразования 2D- и 3D-графики, возможность простой реализации пользовательских компоновок, и, что самое главное — назначаемые компоновки, но этим список полезных функций не исчерпывается. В основе идеи назначаемых компоновок лежит возможность назначения отдельных компоновок различным контейнерам и элементам управления (вместо встраивания компоновок непосредственно в определение контейнера или элемента управления).
  • Компоновка теперь отделена от контейнера. Одной из новых удобных функций, представленных в ПО Flex 4, является намного более гибкая и понятная система создания компоновок. В состав компоновок Flex 4 входит целый набор новых функций, включая набор прикладных программных функции (API) для полноценного преобразования 2D- и 3D-графики, возможность простой реализации пользовательских компоновок, и, что самое главное — назначаемые компоновки, но этим список полезных функций не исчерпывается. В основе идеи назначаемых компоновок лежит возможность назначения отдельных компоновок различным контейнерам и элементам управления (вместо встраивания компоновок непосредственно в определение контейнера или элемента управления).
  • Компоновка теперь отделена от контейнера. Одной из новых удобных функций, представленных в ПО Flex 4, является намного более гибкая и понятная система создания компоновок. В состав компоновок Flex 4 входит целый набор новых функций, включая набор прикладных программных функции (API) для полноценного преобразования 2D- и 3D-графики, возможность простой реализации пользовательских компоновок, и, что самое главное — назначаемые компоновки, но этим список полезных функций не исчерпывается. В основе идеи назначаемых компоновок лежит возможность назначения отдельных компоновок различным контейнерам и элементам управления (вместо встраивания компоновок непосредственно в определение контейнера или элемента управления).
  • Компоновка теперь отделена от контейнера. Одной из новых удобных функций, представленных в ПО Flex 4, является намного более гибкая и понятная система создания компоновок. В состав компоновок Flex 4 входит целый набор новых функций, включая набор прикладных программных функции (API) для полноценного преобразования 2D- и 3D-графики, возможность простой реализации пользовательских компоновок, и, что самое главное — назначаемые компоновки, но этим список полезных функций не исчерпывается. В основе идеи назначаемых компоновок лежит возможность назначения отдельных компоновок различным контейнерам и элементам управления (вместо встраивания компоновок непосредственно в определение контейнера или элемента управления).
  • В рамках концепции «Продуктивность разработки» нашей основной целью было повышение производительности компилятора. Мы оптимизировали часто встречающиеся схемы использования фреймворка, что привело к заметным улучшениям рабочего процесса. Мы также внесли множество доработок в инструмент ASDoc, включая поддержку ASDoc в документах MXML. Была обновлена процедура привязки, она теперь предусматривает двустороннюю коммуникацию. Просто поставьте символ @ перед выражением привязки, и обновления, внесенные в целевой объект привязки, будут скопированы в исходный документ. Также по многочисленным запросам пользователей была реализована еще одна очень полезная функция — поддержка большего числа селекторов CSS, а также дочерних селекторов и селекторов на основе идентификаторов.
  • The Flex framework now includes support for graphic primitives. These graphic primitives can be used directly within your Flex app and support all of the behavior associated with the more traditional Flex components.
  • The Flex framework now includes support for graphic primitives. These graphic primitives can be used directly within your Flex app and support all of the behavior associated with the more traditional Flex components.
  • The Flex framework now includes support for graphic primitives. These graphic primitives can be used directly within your Flex app and support all of the behavior associated with the more traditional Flex components.
  • The Flex framework now includes support for graphic primitives. These graphic primitives can be used directly within your Flex app and support all of the behavior associated with the more traditional Flex components.
  • The Flex framework now includes support for graphic primitives. These graphic primitives can be used directly within your Flex app and support all of the behavior associated with the more traditional Flex components.
  • The Flex framework now includes support for graphic primitives. These graphic primitives can be used directly within your Flex app and support all of the behavior associated with the more traditional Flex components.
  • FXG is the new interchange format for the Flash Platform. In addition to support for using FXG directly within your Flex application, the Flex framework includes graphic primitives that align with the tags in FXG. One thing to note is that enabling runtime graphics can be expensive, so we’ve also enabled the compiler to optimize FXG directly into SWF tags understood natively by the Flash Player. This provides flexibility to have your graphics tags editable by the editor of your choice, while enabling top performance where it’s important.
  • FXG is the new interchange format for the Flash Platform. In addition to support for using FXG directly within your Flex application, the Flex framework includes graphic primitives that align with the tags in FXG. One thing to note is that enabling runtime graphics can be expensive, so we’ve also enabled the compiler to optimize FXG directly into SWF tags understood natively by the Flash Player. This provides flexibility to have your graphics tags editable by the editor of your choice, while enabling top performance where it’s important.
  • FXG is the new interchange format for the Flash Platform. In addition to support for using FXG directly within your Flex application, the Flex framework includes graphic primitives that align with the tags in FXG. One thing to note is that enabling runtime graphics can be expensive, so we’ve also enabled the compiler to optimize FXG directly into SWF tags understood natively by the Flash Player. This provides flexibility to have your graphics tags editable by the editor of your choice, while enabling top performance where it’s important.
  • FXG is the new interchange format for the Flash Platform. In addition to support for using FXG directly within your Flex application, the Flex framework includes graphic primitives that align with the tags in FXG. One thing to note is that enabling runtime graphics can be expensive, so we’ve also enabled the compiler to optimize FXG directly into SWF tags understood natively by the Flash Player. This provides flexibility to have your graphics tags editable by the editor of your choice, while enabling top performance where it’s important.
  • FXG is the new interchange format for the Flash Platform. In addition to support for using FXG directly within your Flex application, the Flex framework includes graphic primitives that align with the tags in FXG. One thing to note is that enabling runtime graphics can be expensive, so we’ve also enabled the compiler to optimize FXG directly into SWF tags understood natively by the Flash Player. This provides flexibility to have your graphics tags editable by the editor of your choice, while enabling top performance where it’s important.
  • FXG is the new interchange format for the Flash Platform. In addition to support for using FXG directly within your Flex application, the Flex framework includes graphic primitives that align with the tags in FXG. One thing to note is that enabling runtime graphics can be expensive, so we’ve also enabled the compiler to optimize FXG directly into SWF tags understood natively by the Flash Player. This provides flexibility to have your graphics tags editable by the editor of your choice, while enabling top performance where it’s important.

  • Все компоненты Spark используют новый механизм для работы с текстом Flash Player 10. Новые классы предусматривают низкоуровневую поддержку управления характеристиками текста, вертикальным текстом и типографическими элементами, такими как лигатуры и двунаправленный текст. Flex 4 SDK использует эти функциональные возможности во всех компонентах Spark, которые работают с текстом.
  • Все компоненты Spark используют новый механизм для работы с текстом Flash Player 10. Новые классы предусматривают низкоуровневую поддержку управления характеристиками текста, вертикальным текстом и типографическими элементами, такими как лигатуры и двунаправленный текст. Flex 4 SDK использует эти функциональные возможности во всех компонентах Spark, которые работают с текстом.
  • Все компоненты Spark используют новый механизм для работы с текстом Flash Player 10. Новые классы предусматривают низкоуровневую поддержку управления характеристиками текста, вертикальным текстом и типографическими элементами, такими как лигатуры и двунаправленный текст. Flex 4 SDK использует эти функциональные возможности во всех компонентах Spark, которые работают с текстом.
  • One area of Flex that needed improvement is States. Although the concept of states is easy to understand, but the implementation in Flex 3 was not as straightforward as it could have been.

    [next slide explains the changes]
  • One area of Flex that needed improvement is States. Although the concept of states is easy to understand, but the implementation in Flex 3 was not as straightforward as it could have been.

    [next slide explains the changes]
  • One area of Flex that needed improvement is States. Although the concept of states is easy to understand, but the implementation in Flex 3 was not as straightforward as it could have been.

    [next slide explains the changes]
  • One area of Flex that needed improvement is States. Although the concept of states is easy to understand, but the implementation in Flex 3 was not as straightforward as it could have been.

    [next slide explains the changes]
  • One area of Flex that needed improvement is States. Although the concept of states is easy to understand, but the implementation in Flex 3 was not as straightforward as it could have been.

    [next slide explains the changes]
  • One area of Flex that needed improvement is States. Although the concept of states is easy to understand, but the implementation in Flex 3 was not as straightforward as it could have been.

    [next slide explains the changes]
  • One area of Flex that needed improvement is States. Although the concept of states is easy to understand, but the implementation in Flex 3 was not as straightforward as it could have been.

    [next slide explains the changes]
  • One area of Flex that needed improvement is States. Although the concept of states is easy to understand, but the implementation in Flex 3 was not as straightforward as it could have been.

    [next slide explains the changes]
  • Основополагающий принцип архитектуры Spark — четкое отделение кода, отвечающего за визуальные элементы компонента, от кода, управляющего логикой компонента. В силу такого различия каждый компонент Spark состоит из двух классов: класса оболочки, написанного на декларативном языке MXML, и класса компонента, который написан на ActionScript.
  • Основополагающий принцип архитектуры Spark — четкое отделение кода, отвечающего за визуальные элементы компонента, от кода, управляющего логикой компонента. В силу такого различия каждый компонент Spark состоит из двух классов: класса оболочки, написанного на декларативном языке MXML, и класса компонента, который написан на ActionScript.
  • Основополагающий принцип архитектуры Spark — четкое отделение кода, отвечающего за визуальные элементы компонента, от кода, управляющего логикой компонента. В силу такого различия каждый компонент Spark состоит из двух классов: класса оболочки, написанного на декларативном языке MXML, и класса компонента, который написан на ActionScript.
  • Основополагающий принцип архитектуры Spark — четкое отделение кода, отвечающего за визуальные элементы компонента, от кода, управляющего логикой компонента. В силу такого различия каждый компонент Spark состоит из двух классов: класса оболочки, написанного на декларативном языке MXML, и класса компонента, который написан на ActionScript.
  • Основополагающий принцип архитектуры Spark — четкое отделение кода, отвечающего за визуальные элементы компонента, от кода, управляющего логикой компонента. В силу такого различия каждый компонент Spark состоит из двух классов: класса оболочки, написанного на декларативном языке MXML, и класса компонента, который написан на ActionScript.
  • Основополагающий принцип архитектуры Spark — четкое отделение кода, отвечающего за визуальные элементы компонента, от кода, управляющего логикой компонента. В силу такого различия каждый компонент Spark состоит из двух классов: класса оболочки, написанного на декларативном языке MXML, и класса компонента, который написан на ActionScript.
  • Основополагающий принцип архитектуры Spark — четкое отделение кода, отвечающего за визуальные элементы компонента, от кода, управляющего логикой компонента. В силу такого различия каждый компонент Spark состоит из двух классов: класса оболочки, написанного на декларативном языке MXML, и класса компонента, который написан на ActionScript.
  • Основополагающий принцип архитектуры Spark — четкое отделение кода, отвечающего за визуальные элементы компонента, от кода, управляющего логикой компонента. В силу такого различия каждый компонент Spark состоит из двух классов: класса оболочки, написанного на декларативном языке MXML, и класса компонента, который написан на ActionScript.

















Transcript

  • 1. GUMBO (Flex Framework 4)
  • 2. GUMBO (Flex Framework 4) Бесплатный фреймворк с открытым кодом для разработки насыщенных интернет приложений (RIA), которые поддерживаются всеми ведущими браузерами, платформами и операционными системами. Skype: mr.dr.jr. Email: Mr_Dr_Jr@me.com
  • 3. Flex 4 концепция и структура Работа в Flex 4 основана на трех принципах: Все внимание дизайну: среда разработки обеспечивает новый уровень выразительности конечных проектов, благодаря использованию новых инструментов. Продуктивность разработки: улучшенная производительность компилятора и языковых функций, таких как привязка данных. Эволюция фреймворка: новые возможности проигрывателя Flash Player в сочетании с новыми функциями.
  • 4. Flex 4 концепция и структура Улучшенный компилятор Spark Продвинутый CSS Скин Двустороннее Типизированные связывание данных массивы (Vector) Модель компонента Расширенная работа с Компоненты Spark Поддержка FTE/TLF состояниями Трансформация Графические Улучшенная элементов примитивы анимация компоновки Динамический Поддержка FXG Встроенный OSMF layout
  • 5. Язык разметки MXML и пространства имен
  • 6. Язык разметки MXML и пространства имен  MXML 2006: Пространство имен языка MXML предыдущей версии. Префикс по умолчанию: mx
  • 7. Язык разметки MXML и пространства имен  MXML 2006: Пространство имен языка MXML предыдущей версии. Префикс по умолчанию: mx  MXML 2009: Новое пространство имен языка MXML. Представляет собой только пространство имен языка, не содержащее тегов компонента. Префикс по умолчанию: fx
  • 8. Язык разметки MXML и пространства имен  MXML 2006: Пространство имен языка MXML предыдущей версии. Префикс по умолчанию: mx  MXML 2009: Новое пространство имен языка MXML. Представляет собой только пространство имен языка, не содержащее тегов компонента. Префикс по умолчанию: fx  Spark: Данное пространство имен включает все новые компоненты Spark. Его необходимо использовать в сочетании с пространством имен языка MXML 2009. Префикс по умолчанию: s
  • 9. Язык разметки MXML и пространства имен  MXML 2006: Пространство имен языка MXML предыдущей версии. Префикс по умолчанию: mx  MXML 2009: Новое пространство имен языка MXML. Представляет собой только пространство имен языка, не содержащее тегов компонента. Префикс по умолчанию: fx  Spark: Данное пространство имен включает все новые компоненты Spark. Его необходимо использовать в сочетании с пространством имен языка MXML 2009. Префикс по умолчанию: s  MX: Данное пространство имен включает все компоненты MX. Его необходимо использовать в сочетании с пространством имен языка MXML 2009. Префикс по умолчанию: mx
  • 10. Язык разметки MXML и пространства имен  MXML 2009: Новое пространство имен языка MXML. Представляет собой только пространство имен языка, не содержащее тегов компонента. Префикс по умолчанию: fx  Spark: Данное пространство имен включает все новые компоненты Spark. Его необходимо использовать в сочетании с пространством имен языка MXML 2009. Префикс по умолчанию: s  MX: Данное пространство имен включает все компоненты MX. Его необходимо использовать в сочетании с пространством имен языка MXML 2009. Префикс по умолчанию: mx
  • 11. Пример использования пространств имен <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Declarations> <s:Fade id="fadeEffect" target="{main_calendar}" alphaFrom="1" alphaTo="0" /> </fx:Declarations> <mx:DateChooser id="main_calendar" x="279" y="23"/> <s:Button label="play effect" click="fadeEffect.play()" x="325" y="258"/> </s:Application>
  • 12. Flex 4 – улучшение продуктивности
  • 13. Flex 4 – улучшение продуктивности  Двустороннее связывание данных
  • 14. Flex 4 – улучшение продуктивности  Двустороннее связывание данных  text=“@{myModel.data}”
  • 15. Flex 4 – улучшение продуктивности  Двустороннее связывание данных  text=“@{myModel.data}”  <fx:Binding source=“foo.text” destination=“myModel.data” twoWay=“true” />
  • 16. Flex 4 – улучшение продуктивности  Двустороннее связывание данных  text=“@{myModel.data}”  <fx:Binding source=“foo.text” destination=“myModel.data” twoWay=“true” />  Улучшена работа с CSS
  • 17. Flex 4 – улучшение продуктивности  Двустороннее связывание данных  text=“@{myModel.data}”  <fx:Binding source=“foo.text” destination=“myModel.data” twoWay=“true” />  Улучшена работа с CSS  Многочисленные StyleName: <Button id=“upButton” styleName=“default tiny” />
  • 18. Flex 4 – улучшение продуктивности  Двустороннее связывание данных  text=“@{myModel.data}”  <fx:Binding source=“foo.text” destination=“myModel.data” twoWay=“true” />  Улучшена работа с CSS  Многочисленные StyleName: <Button id=“upButton” styleName=“default tiny” />  ID селекторы: #upButton { fontSize: 14 }
  • 19. Flex 4 – улучшение продуктивности  Двустороннее связывание данных  text=“@{myModel.data}”  <fx:Binding source=“foo.text” destination=“myModel.data” twoWay=“true” />  Улучшена работа с CSS  Многочисленные StyleName: <Button id=“upButton” styleName=“default tiny” />  ID селекторы: #upButton { fontSize: 14 }  Селекторы дочерних элементов: s|Scrollbar #upButton { baseColor: #FF8888 }
  • 20. Flex 4 – улучшение продуктивности  Двустороннее связывание данных  text=“@{myModel.data}”  <fx:Binding source=“foo.text” destination=“myModel.data” twoWay=“true” />  Улучшена работа с CSS  Многочисленные StyleName: <Button id=“upButton” styleName=“default tiny” />  ID селекторы: #upButton { fontSize: 14 }  Селекторы дочерних элементов: s|Scrollbar #upButton { baseColor: #FF8888 }  Псевдо селекторы: s|Scrollbar #upButton:over { baseColor: #8888FF }
  • 21. Flex 4 – улучшение продуктивности  Двустороннее связывание данных  text=“@{myModel.data}”  <fx:Binding source=“foo.text” destination=“myModel.data” twoWay=“true” />  Улучшена работа с CSS  Многочисленные StyleName: <Button id=“upButton” styleName=“default tiny” />  ID селекторы: #upButton { fontSize: 14 }  Селекторы дочерних элементов: s|Scrollbar #upButton { baseColor: #FF8888 }  Псевдо селекторы: s|Scrollbar #upButton:over { baseColor: #8888FF }  Неймспейсы в CSS
  • 22. Flex 4 – улучшение продуктивности  Двустороннее связывание данных  text=“@{myModel.data}”  <fx:Binding source=“foo.text” destination=“myModel.data” twoWay=“true” />  Улучшена работа с CSS  Многочисленные StyleName: <Button id=“upButton” styleName=“default tiny” />  ID селекторы: #upButton { fontSize: 14 }  Селекторы дочерних элементов: s|Scrollbar #upButton { baseColor: #FF8888 }  Псевдо селекторы: s|Scrollbar #upButton:over { baseColor: #8888FF }  Неймспейсы в CSS @namespace s "library://ns.adobe.com/flex/spark";
  • 23. Новый механизм создания анимации
  • 24. Новый механизм создания анимации  Работа с любыми объектами (не только UIComponents)
  • 25. Новый механизм создания анимации  Работа с любыми объектами (не только UIComponents)  Анимация свойств и частей компонента
  • 26. Новый механизм создания анимации  Работа с любыми объектами (не только UIComponents)  Анимация свойств и частей компонента  Автоматический возврат при смене состояний
  • 27. Новый механизм создания анимации  Работа с любыми объектами (не только UIComponents)  Анимация свойств и частей компонента  Автоматический возврат при смене состояний  Поддержка фильтров, в том числе и Pixel Bender
  • 28. Новый механизм создания анимации  Работа с любыми объектами (не только UIComponents)  Анимация свойств и частей компонента  Автоматический возврат при смене состояний  Поддержка фильтров, в том числе и Pixel Bender  Трансформации в трех измерениях
  • 29. Новый механизм создания анимации  Работа с любыми объектами (не только UIComponents)  Анимация свойств и частей компонента  Автоматический возврат при смене состояний  Поддержка фильтров, в том числе и Pixel Bender  Трансформации в трех измерениях  Поддержка ключевых кадров
  • 30. Компоновка (Layout)
  • 31. Компоновка (Layout)  Динамическая
  • 32. Компоновка (Layout)  Динамическая  Есть возможность создать Custom Layout
  • 33. Компоновка (Layout)  Динамическая  Есть возможность создать Custom Layout  Поддержка двумерных и трехмерных трансформаций
  • 34. Компоновка (Layout)  Динамическая  Есть возможность создать Custom Layout  Поддержка двумерных и трехмерных трансформаций  Управление вложенностью
  • 35. Компоновка (Layout)  Динамическая  Есть возможность создать Custom Layout  Поддержка двумерных и трехмерных трансформаций  Управление вложенностью  Виртуализация
  • 36. Компоновка (Layout)  Динамическая  Есть возможность создать Custom Layout  Поддержка двумерных и трехмерных трансформаций  Управление вложенностью  Виртуализация  Плавный скроллинг
  • 37. Flex 4 – Поддержка ASDoc в документах MXML <?xml version="1.0"?> <!–- Стандартный комментарий--> <!--- ASDoc Коментарий для класса. --> <mx:VBox xmlns="http://ns.adobe.com/mxml/2009" xmlns:mx="library:adobe/flex/halo" > <!--- Коментарий для кнопки--> <mx:Button id="myButton" label="This button has comment" /> <!--- Этот комментарий не принадлежит никакому компоненту и будет проигнорирован--> </mx:VBox>
  • 38. Графика в MXML
  • 39. Графика в MXML
  • 40. Графика в MXML <fx:Library> <fx:Definition name="MySquare"> <s:Group> <s:Rect width="100%" height="100%"> <s:stroke> <s:SolidColorStroke color="red"/> </s:stroke> </s:Rect> </s:Group> </fx:Definition> <fx:Definition name="MyCircle"> <s:Group> <s:Ellipse width="100%" height="100%"> <s:stroke> <s:SolidColorStroke color="blue"/> </s:stroke> </s:Ellipse> </s:Group> </fx:Definition> </fx:Library>
  • 41. Графика в MXML
  • 42. Графика в MXML  Простые Формы (прямоугольники, эллипсы, окружности и другие)  Сложные Линии (прямые, квадратичные, кривые Безье)  Широкий спектр заливок и контуров (сплошные, прозрачные, с использованием картинок, градиенты)  Маскирование, фильтры, режимы смешивания (размытие, сияние, тень)  Цвета и 2D трансформации (поворот, масштабирование, оттенок)  Интегрированный текст, картинки
  • 43. Flash XML Graphics (FXG)
  • 44. Flash XML Graphics (FXG) FXG: графический формат основанный на XML
  • 45. Flash XML Graphics (FXG) FXG: графический формат основанный на XML  Распознается графическими редакторами
  • 46. Flash XML Graphics (FXG) FXG: графический формат основанный на XML  Распознается графическими редакторами  Базируется на модели отрисовки 10 flash плейера
  • 47. Flash XML Graphics (FXG) FXG: графический формат основанный на XML  Распознается графическими редакторами  Базируется на модели отрисовки 10 flash плейера  Статический – без связываний, без компоновки, без слушателей событий, без стилизации
  • 48. Flash XML Graphics (FXG) FXG: графический формат основанный на XML  Распознается графическими редакторами  Базируется на модели отрисовки 10 flash плейера  Статический – без связываний, без компоновки, без слушателей событий, без стилизации  Оптимизируется компилятором (важно для высокой производительности)
  • 49. Flash XML Graphics (FXG) FXG: графический формат Инструменты для дизайна и разработки основанный на XML  Распознается графическими Flash CS4 Flash Flash Professional Catalyst редакторами Builder Интерактивное Создание Eclipse IDE  Базируется на модели отрисовки содержание прототипов 10 flash плейера Анимация Разработка Анализ кода рабочих  Статический – без связываний, Визуальная компоновка процессов Отладка без компоновки, без слушателей событий, без стилизации  Оптимизируется FXG компилятором (важно для высокой производительности) After Effects Illustrator Fireworks Photoshop
  • 50. Пример FXG:
  • 51. Пример FXG: <?xml version="1.0" encoding="utf-8"?> <!-- fxg/comps/ArrowAbsolute.fxg --> <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> <Path data="M 20 0 C 50 0 50 35 20 35 L 15 35 L 15 45 L 0 32 L 15 19 L 15 29 L 20 29 C 44 29"/> <!-- Define the border color of the arrow. --> <stroke> <SolidColorStroke color="#888888"/> </stroke> <!-- Define the fill for the arrow. --> <fill> <LinearGradient rotation="90"> <GradientEntry color="#000000" alpha="0.8"/> <GradientEntry color="#FFFFFF" alpha="0.8"/> </LinearGradient> </fill> </Path> </Graphic>
  • 52. High-Fidelity Text
  • 53. High-Fidelity Text  FTE: Новый механизм работы с текстом (Flash Player 10)
  • 54. High-Fidelity Text  FTE: Новый механизм работы с текстом (Flash Player 10)  TLF: Новые компоненты используют FTE.
  • 55. High-Fidelity Text  FTE: Новый механизм работы с текстом (Flash Player 10)  TLF: Новые компоненты используют FTE.  Преимущества:  Текст в нескольких связанных контейнерах  Вертикальный текст  Множество столбцов  Лигатуры и типографические элементы  Работа с пользовательскими шрифтами  Двунаправленный текст
  • 56. Стейты во Flex 3
  • 57. Стейты во Flex 3 Сложны в использовании  Многословные в описании  Сложное управление иерархией  Трудно оптимизируемые
  • 58. Стейты во Flex 3 Сложны в использовании  Многословные в описании  Сложное управление иерархией  Трудно оптимизируемые <states> <State name=”login”> <SetProperty target=“{goBtn}” name=“label” value=“log in” /> </State> <State name=”register”> <SetProperty target=“{goBtn}” name=“label” value=“sign up” /> <AddChild target=“vBox”> <Checkbox label=“Agree to terms” /> </AddChild> </State> </states> <VBox id=“vBox” > <Text text=“username:” /> <TextInput /> <Text text=“password:” /> <TextInput /> <Button label=“new user?” /> <Button id=“goBtn” /> </VBox>
  • 59. Стейты во Flex 3 Сложны в использовании  Многословные в описании  Сложное управление иерархией  Трудно оптимизируемые <states> <State name=”login”> <SetProperty target=“{goBtn}” name=“label” value=“log in” /> </State> <State name=”register”> <SetProperty target=“{goBtn}” name=“label” value=“sign up” /> <AddChild target=“vBox”> <Checkbox label=“Agree to terms” /> </AddChild> </State> </states> <VBox id=“vBox” > <Text text=“username:” /> <TextInput /> <Text text=“password:” /> <TextInput /> <Button label=“new user?” /> <Button id=“goBtn” label.login=”log in” label.register=”sign up”/> /> </VBox>
  • 60. Стейты во Flex 3 Сложны в использовании  Многословные в описании  Сложное управление иерархией  Трудно оптимизируемые <states> <State name=”login”> <SetProperty target=“{goBtn}” name=“label” value=“log in” /> </State> <State name=”register”> <SetProperty target=“{goBtn}” name=“label” value=“sign up” /> <AddChild target=“vBox”> <Checkbox label=“Agree to terms” /> </AddChild> </State> </states> <VBox id=“vBox” > <Text text=“username:” /> <TextInput /> <Text text=“password:” /> <TextInput /> <Button label=“new user?” /> <Button id=“goBtn” label.login=”log in” label.register=”sign up”/> /> <Checkbox includeIn=“register” label=“agree to terms” /> </VBox> <Button id=“goBtn” label.login=”log in” label.register=”sign up”/> </VBox>
  • 61. Стейты во Flex 4 <states> <State name=”login”/> <State name=”register”/> </states> <VBox id=“vBox” > <Text text=“username:” /> <TextInput /> <states> text=“password:” /> <Text <TextInput /> <State name=”login”> <Button label=“new user?” /> <SetProperty target=“{goBtn}” name=“label” value=“log in” /> </State> <Checkbox includeIn=“register” label=“agree to terms” /> <Button name=”register”> <State id=“goBtn” label.login=”log in” label.register=”sign up”/> </VBox> <SetProperty target=“{goBtn}” name=“label” value=“sign up” /> <AddChild target=“vBox”> <Checkbox label=“Agree to terms” /> </AddChild> </State> </states> <VBox id=“vBox” > <Text text=“username:” /> <TextInput /> <Text text=“password:” /> <TextInput /> <Button label=“new user?” /> <Button id=“goBtn” label.login=”log in” label.register=”sign up”/> /> <Checkbox includeIn=“register” label=“agree to terms” /> </VBox> <Button id=“goBtn” label.login=”log in” label.register=”sign up”/> </VBox>
  • 62. Скинование и архитектура компонентов MXML MX Component/Skin Component Model Graphics Layout Animation Parts States Behavior Logic Data
  • 63. Скинование и архитектура компонентов ActionScript MXML Spark Component Skin Component Model Behavior Graphics Logic Layout Animation Data CSS Parts properties States
  • 64. Skinning Lifecycle
  • 65. Skinnable Component Livecycle
  • 66. Skinnable Component Livecycle Invalidation
  • 67. Skinnable Component Livecycle Invalidation invalidateProperties()
  • 68. Skinnable Component Livecycle Invalidation invalidateProperties() invalidateSize()
  • 69. Skinnable Component Livecycle Invalidation invalidateProperties() invalidateSize() invalidateDisplayList()
  • 70. Skinnable Component Livecycle Invalidation invalidateProperties() invalidateSize() invalidateDisplayList() Execution
  • 71. Skinnable Component Livecycle Invalidation invalidateProperties() invalidateSize() invalidateDisplayList() Execution commitProperties()
  • 72. Skinnable Component Livecycle Invalidation invalidateProperties() invalidateSize() invalidateDisplayList() Execution commitProperties() measure()
  • 73. Skinnable Component Livecycle Invalidation invalidateProperties() invalidateSize() invalidateDisplayList() Execution commitProperties() measure() updateDisplayList()
  • 74. Skinnable Component Livecycle Invalidation invalidateProperties() invalidateSize() invalidateDisplayList() invalidateSkinState() Execution commitProperties() measure() updateDisplayList()
  • 75. Skinnable Component Livecycle Invalidation invalidateProperties() invalidateSize() invalidateDisplayList() invalidateSkinState() Execution commitProperties() measure() updateDisplayList()
  • 76. Skinnable Component Livecycle Invalidation invalidateProperties() invalidateSize() invalidateDisplayList() invalidateSkinState() Execution commitProperties() getCurrentSkinState() measure() updateDisplayList()
  • 77. Пример использования
  • 78. Пример использования <s:Button skinClass="ButtonSkin" />
  • 79. Пример использования <s:Button skinClass="ButtonSkin" /> <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled=".5"> <!-- states --> <s:states> <s:State name="up" /> <s:State name="over" /> <s:State name="down" /> <s:State name="disabled" /> </s:states> <!-- border and fill --> <s:Rect id="rect" radiusX="4" radiusY="4" top="0" right="0" bottom="0" left="0"> <s:fill> <s:SolidColor color="0x77CC22" /> </s:fill> <s:stroke> <s:SolidColorStroke color="0x131313" weight="2"/> </s:stroke> </s:Rect> <!-- text --> <s:Label text="Button!" color="0x131313" textAlign="center" verticalAlign="middle" horizontalCenter="0" verticalCenter="1" left="12" right="12" top="6" bottom="6" /> </s:Skin>
  • 80. Пример использования <s:Button skinClass="ButtonSkin" /> <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled=".5"> <!-- states --> <s:states> <s:State name="up" /> <s:State name="over" /> <s:State name="down" /> <s:State name="disabled" /> </s:states> <!-- border and fill --> <s:Rect id="rect" radiusX="4" radiusY="4" top="0" right="0" bottom="0" left="0"> <s:fill> <s:SolidColor color="0x77CC22" /> </s:fill> <s:stroke> <s:SolidColorStroke color="0x131313" weight="2"/> </s:stroke> </s:Rect> <!-- text --> <s:Label text="Button!" color="0x131313" textAlign="center" verticalAlign="middle" horizontalCenter="0" verticalCenter="1" left="12" right="12" top="6" bottom="6" /> </s:Skin>
  • 81. Datavisualization теперь часть Flex 4 SDK Теперь это бесплатно!