Poradnik Informatyczny: Kurs Flex 3

W utworzonym projekcie możemy zmieniać wygląd całej aplikacji, jak i poszczególnych komponentów za pomocą stylów lub skórek.

Pierwszym sposobem jest użycie właściwości stylów pozwalającym, np. na ustawienie rozmiaru czcionki, koloru tła i wielu innych. Drugim sposobem na zmianę szaty graficznej jest wykorzystanie skórek, będących elementami graficznymi. Może to być plik graficzny z rozszerzeniem, np. *.jpg, *.png, *.swf lub narysowana grafika w języku ActionScript. Na przykład, każdy komponent wyświetlający tekst ma następujące style:

color - kolor tekstu wyświetlany poprzez określenie wartości za pomocą liczby dziesiętnej.
disabledColor - kolor nieaktywnego komponentu określony za pomocą liczby dziesiętnej.
fontFamily - nazwa używanej czcionki określona za pomocą ciągu znaków. Dowolna nazwa czcionki, np. Arial, Courier.
fontSize - wielkość tekstu określona w pikselach, np. 12.
fontStyle - określa, czy czcionka ma być pochylona. Dopuszczalne wartości, to normal i italic.
fontWeight - określa, czy czcionka ma być pogrubiona. Dopuszczalne wartości, to normal i bold.
paddingLeft, paddingRight, paddingTop, paddingBottom - odstęp w pikselach między bokiem (lewym, prawym, górnym, dolnym) wnętrza komponentu, a krawędzią (lewą, prawą, górną, dolną) tekstu.
textAlign - określa sposób wyrównywania tekstu w komponencie. Dopuszczalne wartości, to left, right oraz center.
textDecoration - określa, czy czcionka ma być podkreślona. Dopuszczalne wartości, to none i underline.
textIndent - odstęp pierwszego wiersza tekstu od lewej krawędzi komponentu określony w pikselach.

Wymienione powyżej właściwości stylów są dostępne we wszystkich komponentach wyświetlających tekst. Jednak każdy komponent ma własny zestaw dostępnych właściwości stylów.

Na obrazku widzimy podpowiedzi stylów dla tekstu komponentu Button.

[kliknij na obrazek aby powiększyć]

Zwróćmy uwagę na znaczek składający się z trzech kwadratów przed nazwą właściwości. Oznacza to, że ta właściwość jest stylem.

1. Zmiana stylu poprzez atrybut znacznika

Style możemy nadawać do wybranych komponentów poprzez wpisanie w znaczniku nazwy właściwości stylu i odpowiedniej wartości. Aby w przycisku pojawił się tekst zapisany, np. większą i pogrubioną czcionką musimy określić styl fontSize i fontWeight.

 <mx:Button label="Click Me" fontSize="20" fontWeight="bold" />

A tak wygląda nasz przycisk:

2. Zmiana stylu za pomocą znacznika <mx:Style>

W aplikacji tworzonych we Flex'ie możemy zastosować tych samych rozwiązań, jakie stosuje się w arkuszach CSS. Jednym z możliwych sposobów jest użycie znacznika <mx:Style> w pliku MXML. Między otwierającym i zamykającym znacznikiem możemy wstawiać standardowe deklaracje stylów stosowane w CSS.

 <mx:Style>
  .btnStyle {
   //możemy stosować standardowy zapis właściwości
   font-size: 20;
   //jak również w konwencji tzw. lowerCamelCase
   fontWeight: bold;
  }
 </mx:Style>

Zauważmy, że podczas pracy ze stylami CCS możemy stosować również selektory. Flex obsługuje selektory klas oraz elementów (selektory proste). Selektor klasy definiuje zestaw właściwości stylów jako pojedynczą klasą, którą możemy zastosować do kilku komponentów, korzystając z atrybutu styleName:

 <mx:Style>
  .btnStyle {
   font-size: 20;
   font-weight: bold;
  }
 </mx:Style>

Selektor elementu pozwala na zdefiniowanie zestawu stylów, który zostaje zastosowany do wszystkich komponentów określonego typu. Na stronach budowanych w HTML’u można, np. zdefiniować wygląd znacznika <h1> dla całej strony. We Flex’ie do nadawania stylów danego komponentu stosuje się taką samą składnię:

 <mx:style>
  Button {
   font-size: 20;
   font-weight: bold;
  }
 </mx:style>

 <mx:button id="btn1" label="Click Me.">
 <mx:button id="btn2" label="Click Me, too.">

Tak wyglądają komponenty po wykonaniu ostatniego kodu:

3. Zmiana stylu za pomocą pliku CSS

Znacznika <mx:Style> możemy używać do zdefiniowania bloku stylów wewnątrz pliku MXML, jak również skorzystać z atrybutu source aby określić zewnętrzny plik dołączony do aplikacji:

 <mx:Style source="style.css" />

 <mx:Button id="btn1" label="Click Me." />
 <mx:Button id="btn2" label="Click Me, too." />

Plik style.css dołączamy do projektu i umieszczamy go bezpośrednio w katalogu src. Możemy też utworzyć folder (w katalogu src) o nazwie np. styles i w nim umieścić nasz plik. Wtedy zamiast style.css będziemy musieli podać styles/style.css.

4. Zmiana stylu za pomocą skórki graficznej

Skórkę graficzną stosujemy wtedy, gdy nie możemy zmienić szaty graficznej aplikacji za pomocą stylów. Korzystanie ze skórek ma na celu zmianę wyglądu komponentu poprzez modyfikację lub zmianę widocznych elementów. W przeciwieństwie do stylów, które zmieniają cechy istniejących elementów komponentu, tworzenie skórek pozwala na wymianę używanych elementów.

Każdy komponent ma kilka układów graficznych odpowiadającym różnym stanom tego komponentu. Na przykład komponent przycisku ma oddzielny wygląd:

upSkin - dla normalnego stanu,
overSkin - gdy wskaźnik myszy znajduje się nad przyciskiem,
downSkin - wciśniętego przycisku,
disabledSkin - nieaktywnego przycisku.

Aby móc zmienić wygląd komponentu możemy skorzystać z wcześniej przygotowanej grafiki, np. w formacie *.png i zastąpić nią dowolne elementy komponentu.Skórki są nadawane podobnie jak style, czyli możemy je przypisać w wierszu wybranego komponentu, bloku <mx:Script> lub pliku CSS, a także za pomocą metody setStyle.

w wierszu znacznika

 <mx:Button id="btn1" label="Click Me." 
  upSkin="@Embed(’upSkin.png’)"
  overSkin="@Embed(’overSkin.png’)" 
  downSkin="@Embed(’downSkin.png’)"
  disabledSkin="@Embed(’disabledSkin.png’)" />

w bloku stylów

 <mx:Style>
  Button {
   upSkin: Embed(source="upSkin.png");
   overSkin: Embed(source="overSkin.png");
   downSkin: Embed(source="downSkin.png");
   disabledSkin: Embed(source="disabledSkin.png");
  }
 </mx:Style>

w języku ActionScript (najczęściej skórka dodawana jest wraz z uruchomieniem aplikacji, wywołując funkcję przy pomocy atrybutu creationComplete)

 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
 layout="absolute" creationComplete="initApp()">

 <mx:Script>
 <![CDATA[
  //musimy dodać [Embed] przed definicją 
  //zmiennej typu Class
  [Embed("styles/upSkin.png")]
  private var img1:Class;

  [Embed("styles/upSkin.png")]
  private var img2:Class;

  [Embed("styles/upSkin.png")]
  private var img3:Class;

  [Embed("styles/upSkin.png")]
  private var img4:Class;
  
  private function initApp():void {
   //setStyle(nazwa_stylu, wartosc_stylu)
   btn1.setStyle("upSkin", img1);
   btn1.setStyle("overSkin", img2);
   btn1.setStyle("downSkin", img3);
   btn1.setStyle("disabledSkin", img4);
  }
 ]]>
 </mx:Script>

 <mx:Button id="btn1" label="Click me." />

Poniżej widzimy wykonanie ostatniego kodu: