Using Metatags in Flex Developing

Використання метатеґів у розробці RIA-застосунків за

допомогою Flex

Роман {nouba} Шупер, The Midnight Codershttp://noubase.com

спеціально дла 8-ої зустрічі UAFPUG в Миколаєві (20.12.2008)

Рівень слухачів: середній - експерт

Галузь: Adobe Flex

http://themidnightcoders.com/

Роман {nouba} Шупер, http://noubase.com

2

Спробуємо дати собі відповіді на наступні запитання:

1. Що таке метатеґи?2. Для чого вони?3. Як їх застосовувати?4. Які види метатеґів бувають?5. Для чого кожен з них служить?6. Коли і як варто їх застосовувати?7. Про що я забув сказати або не знав?


3

1. Що таке метатеґи?

Метатеґ – спеціальна конструкція, чітко визначеного формату, яка дає змогу додати певні дані до загального коду програми чи структурувати їх, а також вносити зміни в поведінку компілятора чи доповнювати її потрібними нам директивами.

Узагальнене визначення:


4

[Event(name="myClickEvent", type="flash.events.Event")]

1. Що таке метатеґи?

Структура:

• […] – Тіло метатеґа• Event – Тип метатеґа• (…) – Перелік всіх полів метатеґа• type – Поле метатеґа• "myClickEvent" – Значення поля метатега


5

2. Для чого вони?

Для зручності[Event], [Style], [ArrayElementType], [Effect] …

Для спеціальних можливостей[Bindable], [RemoteClass], [Embed], [IconFile] …

Для структуризації[Exclude], [ExcludeClass], [Deprecated] …


6

3. Як їх застосовувати?

В ActionScript 3:


7

3. Як їх застосовувати?

В MXML:

Всередині теґа <mx:Metadata>


8

Документовані

09. [ExcludeClass]

10. [IconFile]

11. [Inspectable]

12. [InstanceType]

13. [NonCommittingChangeEvent]

14. [RemoteClass]

15. [Style]

16. [Transient]

4. Які види метатеґів бувають?

Список і ті, які ми розглянемо далі:

1. [ArrayElementType]

2. [Bindable]

3. [DefaultProperty]

4. [Deprecated]

5. [Effect]

6. [Embed]

7. [Event]

8. [Exclude]


9

4. Які види метатеґів бувають?

Список і ті, які ми розглянемо далі:

17. [Mixin]

18. [MaxChildren]

19. [PercentProxy]

20. [SWF]

21. [AccessibilityClass]

22. [ChangeEvent]

23. [CollapseWhiteSpace]

24. [Frame]

25. …

НЕдокументовані


10

[ArrayElementType]

1. Працює тільки в MXML

Вказує на допустимий тип елементів масива

Мінуси:

Плюси:

1. Структурує типи

2. Позбавляє від малопомітних і каверзних помилок з типами

Розвінчуємо міфи:

1. Не є аналогом типізованого масива чи Vector’a в АctionScript 3 FP10.

2. Не додає жодного прискорення в роботі


11

[ArrayElementType]ActionSctipt3 Class (Fragment)

Вказувати повністю з пакетом, за винятком примітивів!


12

[ArrayElementType]MXML Layout (Fragment)

In initializer for 'testArray': type Number is not assignable to target type Array or target element type

. ArrayElementType/src main.mxml line 8


13

[DefaultProperty]Визначає властивість, по замовчуванню, для класа

package mx.collections{

[DefaultProperty("source")]

public class ArrayCollection ….

public function set source(s:Array):void{ list = new ArrayList(s);}


14

[DefaultProperty]


15

[DefaultProperty]


16

[Inspectable]


17

[Inspectable]

Як це виглядає в коді

Увага! Не використовуйте одинарні лапки в описі полів метатеґа! По не зрозумілим причинам метатеґ

перестає працювати


18

[Inspectable]Детальніше про поля метатеґа

category

Визначає до якої групи належатиме ця властивість в Property Inspector’i Flex Builder’a.Дефолна категорія – “Other”.


19


enumeration

Це перелік усіх можливих валідних значень для цієї властивості. Сортується завжди за алфавітом.Наприклад:enumeration=“UAFPUG, BAFPUG, RAFPUG” перетвориться в наступний список


20


1. environment2. defaultValue3. format4. listOffset5. name6. type7. variable8. verbose

Ще 8 полів у метатеґа Inspectable,які, нажаль, не мають жодного змісту для Flex-розробника. Усі всі вони використовуються для Flash-компонент, але це вже тема для іншої доповіді .


21

[Event]Служить для декларації подій які можуть виникнути в компоненті

1. “Кривий” і не зручний парсер значення поля name.

2. Відсутність перевірки правильності вказаного класа в полі type в момент компіляції (в Flex Builder’i, а в IntelliJ IDEA 8 - працює)

Мінуси:

Плюси:

1. Пришвидшує підписку на події.

2. Структурує інформацію про всі можливі події в класі


22

[Event]

В дії (MXML):


23

[Event]

В дії (ActionScript 3):


24

В коді:

[Event]

Прописуємо метатеґ в нашому класі. В полі type вказує клас повністю з пакетом

Створюємо наш власний клас події і добавляємо константу:

Зрозуміло, що значення константи TEST_EVENT і поля name повинні співпадати


25

[Event]2 правила парсера:

1. Між маленькою і великою буквою, або двома великими буквами буде вставлено знак “_”

2. Усі літери між знаками “_” буде піднято в верхні регістр

“testEvent” -> TEST_EVENT

“TestEvent” -> _TEST_EVENT

“TEstEvent” -> _T_EST_EVENT


26

[Event]Увага! Це погана практика. Якщо, дуже не хочеться створювати

окремий клас події.


27

[Style]Декларує властивість стиля, а також поведінку цієї властивості та її ознаки.

Приклади з Flex framework’a:

1.name2. type3.arrayType

4. format5. enumeration6. inherit

7. states

Усі поля метатеґа


28

[Style]

name

Визначає як буде відображатись дана властивість в списку


29

[Style]

enumeration

Перелічує усі валідні значення для даної властивості


30

inherit

[Style]

Вказує на те чи будуть усі потомки компонента наслідувати цю властивість від нього чи ні


31

inherit

[Style]

Червоний <mx:Canvas> не унаслідував суцільну зелену рамку від свого батьківського контейнера


32

inherit

[Style]

Як бачимо <mx:Label> унаслідував червоний колір тексту від батьківської <mx:Panel>


33

type

[Style]

Визначає який тип готова прийняти ця властивість

Абсолютно очікувано, отримуємо помилку


34

[Style]

arrayType

Нажаль, на даному етапі розвитку Flex Builder ніяк не реагує на порушення типу даних, але все-таки рекомендую використовувати це поле. Можливо колись вони це поправлять.


35

format

[Style]

Має зміст лише для компонентів розроблених для Flash. Знову ж таки це уже тема для іншої доповіді.

states

Вказує на те, що при розробці класу, який буде використаний для скінування ви можете

використовувати стейти з відповідними іменами.


36

[PercentProxy]В дії на прикладі mx.core.UIComponent:

Передає параметр в іншу сеттер-функцію, попередньо вирізавши знак процентів


37

[CollapseWhiteSpace]

1. Працює виключно всередині MXML теґів

Мінуси:

Плюси:

1. Деколи робить за нас нашу роботу ;)


38



39



40

[Mixin]Викликає статичний метод init() ще до конструктора.


41

[Mixin]

Хто вгадає який буде output?


42

[MaxChildren]

Жодної корисної дії від цього метатеґа не виявлено хоч його і було виявлено в

3 класах Flex Framework’a, a саме:

1. mx.controls.ButtonBar2. mx.controls.LinkBar3. mx.controls.TabBar

Якщо хтось все-таки знайде користь в цьому чудному метатезі – негайно сповістіть мене


43

[RemoteClass]Слугує для зв’язування пари класів які повинні мапитись між собою при

використанні ORB технологій.

ActionScript 3 Class

Alias вказується з повним ім’ям включно з пакетом


44

[RemoteClass]Java Class

При серіалізації та десереалізації усі поля і методи будуть правильно розпізнані рефлектором


45

[Transient]Слугує для того щоб управляти списком полів та методів які

підпадуть під серіалізацію в AMF пакет на стороні Flash-плеєра

Поле sum може надалі використовуватись на стороні клієнта і воно ніколи не буде серіалізовано і передано на сервер.


46

[ExcludeClass]

Ховає клас від intellisense’a Flex Builder’а. Тим не менше, Ви можете спокійного імпортувати й

використовувати його. Використовується розробниками Flex framework’a, швидше за

все, для внутрішніх цілей, або для тих класів які ще не до кінця відтестовані і не випущені.


47

[Exclude]Дає змогу приховати частину API, яку клас унаслідував від

свого суперкласа

VBox ховає властивість direction, яку він унаслідував від Box, адже вона уже немає жодного логічного значення


48

[Exclude]

[Exclude(name="direction", kind="property")]

[Exclude(name="setFocus", kind="method")]

[Exclude(name="focusIn", kind="event")]

[Exclude(name="horizontalGap", kind="style")]

[Exclude(name="focusInEffect", kind="effect")]

Цим метатеґом також можна приховати дію інших метатеґів, таких як: [Style], [Event] та [Effect], як показано

нижче


49

[Deprecated]Дуже важливий метатеґ для тих хто розробляє власні

бібліотеки і підтримує їх, випускаючи нові версії.

Використовуйте цей метатеґ на усі методах і властивостях, які являються застарілими для нової версії бібліотеки і мають

новий покращений аналог або просто стали непотрібні


50

[Deprecated]

При подальшому використанні застарілого метода розробник буде попереджений як значком

Так і повідомленням яке ви йому там напишете


51

[Deprecated]

Якщо розробник й надалі ігноруватиме наші попередження, то Flex Builder буде постійно нагадувати йому в панельці

Problems про використання забороненого метода

Уже під час виконання жодних помилок не виникає


52

[SWF]Цей метатеґ не несе жодної користі Flex-розробникам, але часто використовується в чистих ActionScript 3 проектах. За

його допомогою ми сконфігурувати деякі параметри кінцевого .swf документа

width – ширину нашого застосунка

height – висоту нашого застосунка

frameRate – частоту кадрів

backgroundColor – та колір тла

Що ще треба для щастя?


53

6. Коли і як варто їх застосовувати?

Метатеґи потрібно використовувати побільше й

почастіше


54

Усім дякую за увагу.Запитання?

Technology

Using Metatags in Flex Developing