→ Пошук по сайту       Увійти / Зареєструватися
Застосування стилів до користувацького компонента
Знання → Adobe Flex — технологія швидкої розробки RIA → Прості компоненти MXML

Застосування стилів до користувацького компонента

 Flex  RIA  Flash

Разом зі скінами, стилі визначають вигляд і сприйняття застосунків Flex. Стилі можна використовувати для зміни зовнішнього вигляду одного компонента, або застосовувати їх у всіх компонентах.

При роботі з користувацькими компонентами існує кілька варіантів використання стилів. Можна задати користувацькі компоненти так, що вони взагалі не міститимуть інформацію про стиль. Цей вид оформлення дозволяє розробнику застосунку, який використовує компонент для прийняття стилю, підібрати іншу частину свого застосунку. Наприклад, при бажанні визначити компонент користувача для відображення тексту, розробник програми може створювати стилі, щоб переконатися, що шрифт, його розмір і стиль компонента відповідають іншій частині програми.

Крім того, компонент, який потрібно використовувати з вбудованим виглядом, можна розробити так, що для розробників програми необов’язково застосовувати будь–які додаткові стилі до неї. Цей тип компоненту може бути корисним для застосунків, що вимагають «шапки» (header) або нижнього колонтитулу (footer) з фіксованим виглядом, а тіло застосунку є більш гнучким в своєму зображення.

Або можна розробити користувацький компонент шляхом поєднання цих підходів. Цей тип оформлення дозволяє розробникам застосунку встановити не всі, а лише деякі стилі.

Для отримання загальної інформації про стилі Flex див. Using Styles and Themes. Інформацію про створення стилів користувача див. у розділі Custom Style Properties.

Застосування стилів з компонента користувача

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

У визначенні компоненту користувача стилі можна визначити, використовуючи один або обидва з наступних механізмів:

    • Властивості тегу (Tag properties)

    • Селектори класу (Class selectors)

Наступний компонент користувача визначає стиль шляхом використання властивості тегу елементу керування ComboBox.

<?xml version=«1.0»?>
<!–– mxml/myComponents/StateComboBoxWithStyleProps.mxml ––>
<mx:ComboBox xmlns:mx=«http://www.adobe.com/2006/mxml» openDuration=«1000» fontSize=«15»>
<mx:dataProvider> 
<mx:Array>
<mx:String>AK</mx:String>
<mx:String>AL</mx:String>
</mx:Array>
</mx:dataProvider>
</mx:ComboBox>

Крім того, можна визначити ці стилі за допомогою об’явлення селектора стилю класу, як показано в наступному прикладі:

<?xml version=«1.0»?>
<!–– mxml/myComponents/StateComboBoxWithStyleClassSel.mxml ––>
<mx:ComboBox xmlns:mx=«http://www.adobe.com/2006/mxml» styleName=«myCBStyle»>
    <mx:Style>
   .myCBStyle {
    openDuration: 1000; 
    fontSize: 15; 
      } 
</mx:Style>
<mx:dataProvider> <mx:Array>
<mx:String>AK</mx:String>
<mx:String>AL</mx:String>
</mx:Array>
</mx:dataProvider>
</mx:ComboBox>
    Примітка:
    Не можна визначити селектор типу в компоненті MXML. Якщо визначати селектор типу, відбувається помилка компілятора.

Розробники програми можуть застосовувати додаткові стилі компонента. Наприклад, якщо компонент визначає стилі для відкритої протяжності і розміру шрифту, розробники програми можуть ще визначити колір шрифту або інші стилі. Наступний приклад використовує в застосунку StateComboBoxWithStyleProps.mxml і визначає стиль кольору шрифту для елементу керування:

<?xml version=«1.0»?>
<!–– mxml/MainStyleWithPropsAddColor.mxml ––>
   <mx:Application xmlns:mx=«http://www.adobe.com/2006/mxml» xmlns:MyComp=«myComponents.*»>

   <MyComp:StateComboBoxWithStyleProps color=«red»/>

</mx:Application>

Нижче приводиться SWF–файл для попереднього прикладу:

Застосування стилів з файлу посилання (referencing file)

Коли є посилання на компонент MXML, файл посилання може призначити опис стилю до компонента MXML за допомогою наступних механізмів:

  •  Властивості тегу (Tag properties)
  •  Селектори класу (Class selectors)
  •  Селектори типу (Type selectors)
  • Дерево (Tree)

Стилі, які можуть використовуватися розробниками програми, відповідають стилям, які підтримуються кореневим тегом компонента MXML. В наступному прикладі, щоб встановити стиль для користувацького компонента MXML, використовується властивість тегу:

<?xml version=«1.0»?>
<!–– mxml/MainStyleWithPropsOverrideOpenDur.mxml ––>
<mx:Application xmlns:mx=«http://www.adobe.com/2006/mxml» xmlns:MyComp=«myComponents.*»>
<MyComp:StateComboBoxWithStyleProps openDuration=«1000»/>

</mx:Application>

Нижче приводиться SWF–файл для попереднього прикладу:

Коли стилі задаються як атрибути тегу, то вони заміщують [перевизначають] будь–які набори конфліктних стилів у визначенні компоненту MXML.

Для визначення стилів можна використовувати селектор класу. Селектор класу часто використовується, щоб застосовувати стилі до конкретного екземпляру елементу керування, як показано в наступному прикладі:

<?xml version=«1.0»?>
<!–– mxml/MainStyleOverrideUsingClassSel.mxml ––>
<mx:Application xmlns:mx=«http://www.adobe.com/2006/mxml» xmlns:MyComp=«myComponents.*»>
<mx:Style>
   .myStateComboBox {
   openDuration: 1000;
}
</mx:Style> <MyComp:StateComboBoxWithStyleProps styleName=«myStateComboBox»/>
   <mx:ComboBox>
   …
</mx:ComboBox>
</mx:Application>

Нижче приводиться SWF–файл для попереднього прикладу:

У цьому прикладі у визначенні тегу компонента MXML можна використовувати властивість styleName, щоб застосовувати стилі до конкретного екземпляру MXML–компонента. Тим не менше, ці стилі не застосовуються до елемента ComboBox, визначеного в основному файлі програми, і не застосовуються до будь–якого іншого елементу StateComboBox.mxml, якщо властивість styleName також вказана як частина визначення елементу MXML–компонента.

Коли всі стилі визначаються за допомогою селектора класу, вони перевизначають всі стилі, які були встановлені використовуючи селектор класу у файлі MXML. Ці стилі не перевизначають стилі, які були встановлені за допомогою властивостей тегу у файлі MXML.

Для визначення стилів можна також використовувати селектор типу. Селектор типу застосовує стилі до всіх елементів компонента, як показано в наступному прикладі:

<?xml version=«1.0»?>
<!–– mxml/MainStyleOverrideUsingTypeSel.mxml ––>
<mx:Application xmlns:mx=«http://www.adobe.com/2006/mxml» xmlns:MyComp=«myComponents.*»>
<mx:Style>
  StateComboBoxWithStyleProps {
  openDuration: 1000;
}
</mx:Style> <MyComp:StateComboBoxWithStyleProps/>
</mx:Application>

Нижче приводиться SWF–файл для попереднього прикладу:

У цьому прикладі селектор типу визначає в застосунку стиль openDuration для всіх елементів контролю StateComboBox. Коли вказується будь–який стиль шляхом використання селектору типу, ці стилі перевизначають всі стилі, які встановлюються за допомогою селектора класу у файлі MXML. Ці стилі не перевизначити стилі, які було встановлено, використовуючи властивості тегу у файлі MXML.

Застосування селектора типу до кореневого тегу користувацького компоненту

Всі користувацькі компоненти містять кореневий тег, який визначає суперклас компонента. У разі StateComboBox.mxml, кореневий тег — це . Якщо визначається селектор типу для елементу керування ComboBox, або для суперкласу керування ComboBox, в основному файлі застосунку, це визначення стилю також застосовується для будь–яких користувацьких компонентів, які використовують елемент керування ComboBox як кореневий тег, як показано в наступному прикладі:

<?xml version=«1.0»?>
<!–– mxml/MainStyleOverrideUsingCBTypeSel.mxml ––>
<mx:Application xmlns:mx=«http://www.adobe.com/2006/mxml» xmlns:MyComp=«myComponents.*»>
<mx:Style>
ComboBox {
   openDuration: 1000;
   fontSize: 15;
   color: red;
}
</mx:Style> <MyComp:StateComboBoxWithStyleProps/>
<mx:ComboBox/>
</mx:Application>

Нижче приводиться SWF–файл для попереднього прикладу:

У даному прикладі всі елементи керування ComboBox та StateComboBox.mxml мають openDuration 1000 мс, розмір шрифту 15 пунктів, і червоний колір тексту.

Якщо визначається селектор типу для елементу керування користувача та для його суперкласу, Flex пропускає всі конфліктні налаштування від селектора типу для суперкласу, як показано в наступному прикладі:

<?xml version=«1.0»?>
<!–– mxml/MainStyleOverrideUsingCBTypeSelConflict.mxml ––>
<mx:Application xmlns:mx=«http://www.adobe.com/2006/mxml» xmlns:MyComp=«myComponents.*»>
<mx:Style>
 ComboBox {
   color: red;
   openDuration: 1000;
   fontSize: 15;
   }
StateComboBoxWithStyleProps {
   color: green; 
} 
</mx:Style> <MyComp:StateComboBoxWithStyleProps/>
<mx:ComboBox/>
</mx:Application>

Нижче приводиться SWF–файл для попереднього прикладу:

У цьому прикладі елемент керування StateComboBox використовує зелений колір тексту, а значення для стилів fontSize і openDuration визначені в селекторі типу для ComboBox.

Застосування стилів з файлу defaults.css

Flex включає в себе глобальні таблиці стилів під назвою defaults.css, всередині файлу framework.swc у каталозі /frameworks/libs. Ці глобальні таблиці стилів містять визначення стилів для глобального селектору класу і селекторів типу для більшості компонентів Flex. Flex неявно завантажує файл defaults.css і на етапі компіляції застосовує його до всіх Flex–застосунків.

Одним з універсальних шляхів поширення користувацьких компонентів MXML та ActionScript є створення файлу SWC. SWC–файл являє собою архівний файл компонентів Flex, який полегшує обмін компонентами між розробниками Flex. Потрібно змінити тільки один файл, а не файли MXML або ActionScript, зображення та інші ресурсні файли. SWF–файл скомпільовано всередині файлу SWC, що означає, що код прихований від випадкових перегляду.

Для більш детальної інформації про файли SWC, див. розділи Using the Flex Compilers і Building Projects.


SWC–файл може містити локальну таблицю стилів під назвою defaults.css, яка містить стандартні налаштування стилів для компонентів користувача, визначені у файлі SWC. При компіляції Flex–застосунку локальний файл defaults.css автоматично застосовується до компонентів у файлі SWC. Таким чином, можна перевизначити глобальні таблиці стилів defaults.css з локальним варіантом у файлі SWC.

Вимоги до локальних варіантів:

  •  У файл SWC можна включити тільки одну таблицю стилів.
  •   Файл має бути названий defaults.css.
  • • Файл має бути в самому верхньому каталозі файлу SWC.

Наприклад, елемент керування користувача ComboBox, під назвою StateComboBox.mxml, визначається, як показано в наступному прикладі:

<?xml version=«1.0»?>
<!–– StateComboBox.mxml ––>
<mx:ComboBox xmlns:mx=«http://www.adobe.com/2006/mxml»>
<mx:dataProvider>
<mx:String>AK</mx:String>>
<mx:String>AL</mx:String>
<!–– Add all other states. ––>
</mx:dataProvider>
</mx:ComboBox>

Відмітьте, що цей елемент керування не визначає жодних налаштувань стилів.

Потім, щоб визначити налаштування стилів за замовчуванням для компоненту користувача, в тій самій директорії створюється файл defaults.css, як показано в наступному прикладі:

StateComboBox



{
  arrowButtonWidth: 40; 
  cornerRadius: 10; 
  fontSize: «14»; 
  fontWeight: «bold»; 
  leading: 0; 
  paddingLeft: 10; 
  paddingRight: 10; 
}

Щоб створити файл SWC, запускається компілятор командного рядка compc з директорії, яка містить файли defaults.css і StateComboBox.mxml. Щоб визначити таблицю стилів, використовується опція включення файлу, як показано в наступному прикладі:

flex_install_dir\bin\compc –source–path .
  –include–classes StateComboBox –include–file     defaults.css defaults.css –o MyComponentsSWC.swc

Цей приклад створює файл SWC під назвою MyComponentsSWC.swc.

Примітки: Щоб включити таблицю стилів, також можна використовувати опцію включення таблиці стилів, якщо ресурси посилаються на таблиці стилів, які повинні бути скомпільовані (програмні скіни або інші файли класів). Для отримання додаткової інформації див. розділ Using the Flex Compilers.

Потім пишеться за стосунок під назвою DefaultCSSApplication.mxml, який використовує елемент керування StateComboBox, як показано в наступному прикладі:

<?xml version=«1.0»?>
<!–– styles/DefaultCSSApplication.mxml ––>
<mx:Application xmlns:mx=«http://www.adobe.com/2006/mxml» xmlns:MyComp=«*»>
<mx:Label text=«Custom MXML component using defaults.css from SWC file.»/>
<MyComp:StateComboBox/>
<mx:Label text=«Default ComboBox control using the default defaults.css file.»/>
<mx:ComboBox>
<mx:dataProvider>
<mx:String>AK</mx:String>
<mx:String>AL</mx:String>
</mx:dataProvider>
</mx:ComboBox>
</mx:Application>

Нижче приводиться SWF–файл для попереднього прикладу:

Зверніть увагу, що для посилання на компонент для елементу керування StateComboBox (в DefaultCSSApplication.mxml) включається визначення простору імен. Оскільки компонент MXML знаходиться в верхньому каталозі файлу SWC, його назва пакету порожня, і посилання відбувається шляхом використання визначення імен xmlns: MyComp =«*».

Для компіляції застосунку, який використовує MyComponentsSWC.swc, до каталогу, який містить застосунок, потрібно скопіювати MyComponentsSWC.swc. Потім додати файл SWC в бібліотеку в Adobe ® Flex ® Builder ™ або застосувати опцію шляху до бібліотеки до компілятора командного рядка mxmlc, як показано в наступному прикладі:

flex_install_dir\bin\mxmlc –file–specs DefaultCSSApplication.mxml ––library–path+=.

У попередньому прикладі файл defaults.css і файл компонента були в одному каталозі. Як правило, компоненти в структурі каталогів розміщуються, де назва пакету компонента відображає розташування каталогу компонента у файлі SWC.

У наступному прикладі, файл StateComboBox.mxml поміщується в підкаталог myComponents файлу SWC, де підкаталогу відповідає назва пакета компонента. Тим не менше, defaults.css має все ще знаходитися в верхньому каталозі файлу SWC, незалежно від структури каталогів файлу SWC. Файл SWC компілюється за допомогою наступного командного рядка:

flex_install_dir\bin\compc –source–path .
–include–classes myComponents.StateComboBox –include–file defaults.css defaults.css –o MyComponentsSWC.swc

Для використання компонента StateComboBox.mxml в застосунку, визначається DefaultCSSApplication.mxml, як показано в наступному прикладі:

<?xml version=«1.0»?>
<!–– styles/DefaultCSSApplicationSubDir.mxml ––>
<mx:Application xmlns:mx=«http://www.adobe.com/2006/mxml» xmlns:MyComp=«myComponents.*»>
<mx:Label text=«Custom MXML component using defaults.css from SWC file.»/>
<MyComp:StateComboBox/>
<mx:Label text=«Default ComboBox control using the default defaults.css file.»/>
<mx:ComboBox>
<mx:dataProvider>
<mx:String>AK</mx:String>
<mx:String>AL</mx:String>
</mx:dataProvider>
</mx:ComboBox>
</mx:Application>

Відмітьте, що визначення простору імен для елементу керування StateComboBox в DefaultCSSApplication.mxml компонента у файлі SWC включає myComponents .*, щоб відповідати структурі каталогів, і назві пакунка.

Можна змінити і перевірити файл defaults.css без відновлення файлу SWC шляхом застосування до компілятора опції CSS–файлу за замовчуванням. CSS–файли, додані опцією файлів css за замовчуванням мають більш високий пріоритет, ніж в SWC файлах, так що вони можуть перевстановлювати відповідне визначення у файлі SWC.

Коли зміну файлу defaults.css закінчено, файл SWC відновлюється з оновленим файлом defaults.css.

Зверніть увагу на додаткові посилання

Якщо вас цікавить...

Flex
RIA
Flash

Головний розділ

Прості компоненти MXML
загрузка...
Сторінки, близькі за змістом
Прості компоненти MXML
Застосунки Adobe ® Flex ® зазвичай складаються з кількох файлів MXML та ActionScript, і кожен MXML-файл є окремим компонентом MXML. MXML-компоненти дозволяють інкапсулювати функціональність в багаторазово використовуваному компоненті, розширити існуючі компоненти Flex шляхом додавання їм нової функціональності, а також посилатися на MXML-компонент за допомогою тегу MXML.