Bluuum 2.0 tworzenie skórek – part 3


 

Plik konfiguracyjny *.cfg

Teraz trochę o ustawieniach związanych z rozmieszczeniem elementów w aplikacji. Aplikacja budowana jest „warstwowo”. Chodzi o to że na samych dole jest główna warstwa ( spód aplikacji, element główny ) a potem kolejno na spód nakładane są inne warstwy a na nie znów następne i następne (o ile zachodzi taka potrzeba). Aby to zrozumieć trzeba przyjrzeć się trochę jak wygląda ten plik *.cfg od wewnątrz. Składa się on ze składni w formacie:

< id  = nazwaWidżetu ; parent = nazwaRodzica; x = 10 ; y= 20 ; visible = true >

Opis:

  1. id – określa nam do jakiego widżetu tyczy się ta linia a nazwaWidżetu jest taka sam jak w pliku *.css
  2. parent – określa nam kto jest „rodzicem widżetu, czyli na jakim innym widżecie znajduje się ten widżet
  3. x – określa odległość liczoną od lewej strony widżetu (rodzica)  na którym znajduje się ten widżet
  4. y - określa odległość liczoną od góry widżetu (rodzica)  na którym znajduje się ten widżet
  5. visible – określa czy dany widżet ma zostać wyświetlony na aplikacji

W jednej linii pliku powinna znajdować się tylko jedna taka linia. Gdy chcemy aby jakiś widżet nie był pokazywany nie usuwamy jego ustawień tylko ustawiamy visible = false. Wszystkie nazwyWidżetów zostaną podane poźniej. Teraz pora na przykład bo pewnie trochę to zawiłe.

 

Mamy główny widżet o rozmiarach szerokość=100px, wysokość=200px. Do rozmieszczenia mamy 4 elementy:  przyciski (b1,b2,b3) oraz inny widżet (widżet 2). Ułożenie jakie chcemy uzyskać pokazuje rysunek poniżej:

 

Pozycji głównego widżetu nie ustawiamy gdyż jego pozycja to pozycja na naszym ekranie oraz nie posiada on „rodzica” czyli obiektu na którym się znajduje, więc nie dodajemy linii ustawiającej jego położenie w pliku konfiguracyjnym *.cfg. Zaznaczam że wszystkie odległości liczone są od lewego-górnego rogu (czerwona kropka na każdym widżecie). jako pierwszy element ustawiamy widżet o nazwie „b1″. Chcemy aby znajdował się on na głównym widżecie o współrzędnych x=20,y=20 (x – odległość od lewej grawędzi, y – odległość od górnej krawędzi) takie ustawienie zapewnia poniższa linia w pliku konfiguracyjnym :

< id = b1 ; parent = główny widżet ; x = 20 ; y = 20 ; visible =true >
  1. aby pozycja elementu b1 była liczona od lewego-górnego rogu głównego widżetu ustawiamy parent (rodzic) jako „główny widżet
  2. oddalenie o 20px od lewej krawędzi zapewnia: x = 20
  3. oddalenie od górnej krawędzi zapewnia: y = 20
  4. aby element był wyświetlany ustawiamy: visible = true

Element o nazwie b2 ma być rozmieszczony 70px od lewej i 20 px od góry głównego widżetu. Analogicznie do poprzedniego przykładu:

< id = b2 ; parent = główny widżet ; x = 70 ; y = 20 ; visible =true >

Element o nazwie „widżet 2″ chcemy ustawić 10px od lewej krawędzi i 120px od gornej krawędzi głównego widżetu. I znów analogicznie do poprzednich przypadków:

< id = widżet 2 ; parent = główny widżet ; x = 10 ; y = 120 ; visible =true >

A teraz chcemy aby element o nazwie b3 znajdował się w odległości 15px od lewej krawędzi i 15px od górnej krawędzi ale już nie widżetu głównego tylko widżetu o nazwie „widżet 2″. Aby tego dokonać ustawiamy jako jego rodzica element o nazwie „widżet 2″ i postępujemy analogicznie:

< id = b3 ; parent = widżet 2 ; x = 15 ; y = 15 ; visible =true >

Taką właśnie zasadą budujemy rozmieszczenie elementów na aplikacji. Istnieje jeszcze coś takiego jak Layout ale o tym w następnej części.