Bluuum 2.0 tworzenie skórek – part 2


 

Selektory

Jak już zostało wspomniane aplikacja zbudowana jest z widżetów (odpowiednik DIV w HTML). Aby była możliwość ustawienia każdemu elementowi innego stylu lub grupie elementów tego samego wyglądu musimy się jakoś do nich odnieść. I tu mamy selektory, które określają jaki element personalizujemy. Qt dostarcza nam kilka selektorów, ale nam wystarczy jeden z racji tego że w aplikacji każdy element jest inny i nie ma potrzeby stosowania innych. Dla wnikliwych pozostałe selektory można znaleźć na stronie Qt Selector Types. My zajmiemy się selektorem, który odnosi się do każdego elementu za pomocą jego nazwy. Oto składnia:

  • nazwaKlasy#nazwaObiektu { /*tu ustawiamy własności obiektu*/ background-color : blue; font-size : 24px; }

Każdy widżet jest jakiegoś typu – nazwaKlasy oraz posiada swoją nazwę – nazwaObiektu. Nie ma jednak potrzeby zagłębiania się w to jakiego typu jest przycisk czy suwak, gdyż wszystko zostanie opisane później. Dodatkowo możemy dla jednego ustawienia np rozmiaru podać kilka elementów :

  • nazwaKlasy#obiekt1, nazwaKlasy#obiekt2, nazwaKlasy#obiekt3 {height : 30px; width:25px;}

Dla takiego ustawienia elementu o nazwach obiekt1, obiekt2 oraz obiekt3 będą miały wysokość 30 pixeli oraz szerokość 25 pixeli.

Box Model

Każdy widżet wspiera Box Model, który przedstawia się następująco :

Nokia Qt Box Model

 

Pseudo Stany

Dodatkowo każdy widżet zawiera tak zwane pseudo stany. Kilka pseudo stanów na przykładzie przycisku typu QPushPutton o nazwie myButton:

  • QPushButton#myButton:pressed {/*tutaj ustawienia*/} -gdy przycisk zostanie naciśnięty
  • QPushButton#myButton:hover {/*tutaj ustawienia*/} -gdy nad przyciskiem znajdzie się kursor myszy
  • QPushButton#myButton:focus {/*tutaj ustawienia*/} -gdy przycisk jest aktywny (np przy kliknięciu kursorem dostaje focus)

Więcej na temat pseudo stanów poszczególnych elementów można znaleźć tutaj  Qt Pseudo-States.

 

Właściwości obiektów

W większości przypadków właściwości są takie same jak w przypadku HTML CSS jednak jest kilka dodatkowych własności (raczej rzadko używane) oraz kilka drobnych różnic. W razie problemów lub niejasności odsyłam na stronę Qt StyleSheet Properties

 

Ścieżka do obrazków – WAŻNE !

Gdy chcemy aby własność tło ( backgroung ) lub obrazek (image) wyświetlały nam zamiast koloru zdjęcie (obrazek) to przed ścieżką do zdjęcia musimy umieścić „PathToSkin:” (ścieżka do naszego katalogu ze skórką) a następnie resztę ścieżki lub samą nazwę zdjęcia jeśli znajduję się ono bezpośrednio w katalogu naszej skórki. Na przykład tak :

  • QToolButton#btnFind{image: url(PathToSkin:find.png);}

lub gdy zdjęcie znajduje się jeszcze w katalogu images :

  • QToolButton#btnFind{image: url(PathToSkin:/images/find.png);}

 

Za pomocą stylu css ustawiamy kolor tła, czcionkę, obramowanie elementu jego rozmiary jednak rozmieszczenie nie ustawiamy za pomocą stylu. Za rozmieszczenie elementów odpowiedzialny jest plik *.cfg o którym mowa w następnej części.