Libgreattao: tworzenie interfejsu

Do tego zadania będzie potrzebna najnowsza wersja libgreattao i program tao-manager. Proszę załadować stronę: www.slawek.lach.art.pl, by pobrać menadżer plików, a najnowszą wersję libgreattao można ściągnąć z svn-a, z sourceforge.

Nasze okno konfiguracji

Najpierw zajmiemy się oknami konfiguracji. W tym przykładzie omówię już gotową klasę okna konfiguracji dla motywu modern.

Okno to składa się z przycisków po prawej stronie, z tekstów i z pól edycyjnych. W standardowym motywie są karty zamiast przycisków.Tutaj naciśnięcie na przycisk przełącza widok (pojawiają się inne teksty i pola edycyjne).

Oto kod:

<root>
<variable name="displayed_path" action="change" value="" />
<hbox>
<vbox>
<template path="/category/*">
   <variable name="blank_path" action="change" value="" />
   <if type="equal" variable1="blank_path" variable2="displayed_path">
      <variable name="displayed_path" action="change" function="path" />
      <variable name="active" action="change" function="path" />
      <variable name="active_directory" action="change" value="/" />
       <variable name="active" action="append" variable="active_directory" />
   </if>
   <button dir-for="label">
     <handler>
        <hide variable="active"  />
        <variable name="active" action="change" function="path" />
        <variable name="active_directory" action="change" value="/" />
        <variable name="active" action="append" variable="active_directory" />
        <show variable="active" />
     </handler>
   </button>
</template>
</vbox>
<vbox>
<template path="/category/*/*/text">
<variable name="current_path" action="change" function="path" />
<hide />
<if type="is_children" variable1="displayed_path" variable2="current_path">
   <show />
</if>
<hbox>
<label dir-for="label" />
<edit dir-for="event,input,output" />
<label dir-for="description" />
</hbox>
</template>
</vbox>
</hbox>
<hbox>
<button label="Ok" dir-for="label,event" path="/actions/ok" />
<button label="Cancel" dir-for="label,event" path="/actions/cancel" />
<button label="Save" dir-for="label,event" path="/actions/save" />
</hbox>
</root>

Widzimy jeden handler, kilka zmiennych, warunki i elementy show/hide. Elementy show/hide zmieniają widoczność:

1. Elementu, którego są dzieckiem, gdy nie podano atrybutu name lub variable.

2. Elementów o podanej ścieżce, gdy użyto atrybutu variable

3. Elementów o podanej nazwie, gdy użyto atrybutu name

O atrybucie name powiemy sobie później.

Co zrobić, by chować/pokazywać elementy po naciśnięciu przycisku. Przede wszystkim musimy się zdecydować na metodę (ścieżką lub nazwą). Ponieważ przyciski są pod ścieżkami "/category/*", a elementy do sterowania pod "/category/*/*", to decydujemy się na ścieżkę i sterowanie elementami o ścieżkach-dzieciach "/category/*/" . Najpierw chowamy wszystkie elementy dzięki podaniu hide bez atrybutów dla

<template path="/category/*/*/text">

. Dzięki temu wszystkie elementy będą schowane. Następnie trzeba wyświetlić pierwszą utworzoną kategorię. Odpowiada za to ten kod:

<if type="is_children" variable1="displayed_path" variable2="current_path">
   <show />
</if>

Typ warunku "is_children" sprawdza czy ścieżka jest dzieckiem innej ścieżki. Jeżeli chcemy, by dotyczyło to tylko dzieci dopasowanego elementu, to musimy zakończyć wartość slash-em. W tym wypadku sprawdzane jest czy "current_path" jest dzieckiem "displayed_path". "current_path" jest ustawiane wyżej i jest nadawana mu wartość aktualnej ścieżki. Ustawiamy też zmienną "active", która wskazuje na dzieci aktywnego elementu(dlatego dodajemy przez "append" slash na koniec). Trzeba zwrócić jeszcze uwagę, że przed nadaniem ścieżki pierwszej kategorii dla zmiennej "displayed_path", sprawdzamy czy zmienna ta nie jest slashem(ustawiamy slash dla tej zmiennej na początku naszego widoku).

Teraz zajmiemy się ukrywaniem/pokazywaniem elementów po kliknięciu. Odpowiada za to nasz jedyny handler. Najpierw chowamy aktywny element, dzięki zmiennej "active". Trzeba pamiętać, że pierwszy utworzony element jest aktywny. Następnie aktualizujemy zmienną "active", by zawierała ścieżkę akcji z klikniętym przyciskiem, doklejając slash na końcu. Teraz możemy wyświetlić element przyporządkowany klikniętemu przyciskowi. Zmienna "active" będzie zawierała ścieżkę klikniętego elementu, więc po ponownym kliknięciu jakiegoś elementu, nasz element zostanie schowany.

To już koniec omawiania dialogu konfiguracji. Jest tylko jeden problem. Jeżeli aplikacja usunie aktywny element, to nie będzie widocznego elementu. Inaczej jest z kartami - tutaj framework automatycznie powinien zmienić widoczną kartę.

Własne okno zarządzania plikami dla tao-manager

Następny przykład będzie polegał na dodaniu panelu informacyjnego dla mojego menadżera plików. Zmienimy widok okna menadżera plików tylko dla tej jednej aplikacji. By to uczynić tworzymy katalog(jeżeli jeszcze nie istnieje) "$HOME/.tao", a w nim "$HOME/.tao/tao-manager", a w nim "$HOME/.tao/tao-manager/mWidgets", a w nim "$HOME/.tao/tao-manager/mWidgets/app". Następnie tworzymy plik z definicjami ścieżek interfejsów użytkownika("$HOME/.tao/app"). W tym pliku definiujemy katalog interfejsu dla naszego menadżera plików:

tao-manger = tao-manger

Teraz trzeba skopiować plik konfiguracyjny dla motywu "mWidgets".

cp /usr/share/tao-design/mWidgets/config ~/.tao/tao-manager/mWidgets

Następnie tworzymy w katalogu "$HOME/.tao/tao-manager/mWidgets/app" plik "file_manager". Powinien on mieć następującą postać:

<root>
<menu>
<template path="/actions/*">
<submenu dir-for="label">
<attr-connect name="label" function="last-dir" />
<template path="*">
<item dir-for="label,event">
<icon dir-for="icon" width="8" height="8" />
<attr-connect name="label" function="last-dir" />
</item>
</template>
</submenu>
</template>
</menu>

<hbox>
<vbox>
<template path="/fileviews/*/list/items/*">
<variable name="name" action="change" function="path" />
<variable name="name" action="append" value="/name" />
<attr-connect name="widget-name" variable="name" />
<template path="data/*">
<hbox>
<label>
   <attr-connect name="label" function="last-dir" />'
</label>
<label dir-for="label" />
</hbox>
</template>
<hide />
</template>
</vbox>
<template path="/fileviews/*">
<vbox>
<template path="path_edit">
<edit dir-for="input,output,event" />
</template>
<list>
<template path="list/columns/*">
<column>
    <attr-connect name="name" function="last-dir" />
    <attr-connect name="label" function="last-dir" />
</column>
</template>
<template path="list/items/*">
<selection>
    <template path="selected">
       <handler>
          <hide name="path" />
          <variable name="path" action="change" function="remove_last_dir" />
          <variable name="path" action="append" value="/name" />
          <variable name="call-path" action="change" function="path" />
          <show name="path" />
          <call var="call-path" />
       </handler>
    </template>
    <template path="data/*">
       <data dir-for="label">
         <attr-connect name="column-name" function="last-dir" />
         <attr-connect name="label" function="last-dir" />
       </data>
    </template>
</selection>
</template>
</list>
</vbox>
</template>
</hbox>
</root>

Panel definiowany jest w templacie o szablonie ścieżki "/fileviews/*/list/items/*". Teraz przejdźmy do nazw. Otóż każdy widżet w danym oknie może mieć wiele nazw. Wiele widżetów w danym oknie może mieć taką samą nazwę. Nazwa służy do sterowania widocznością elementu, a w przyszłości także będzie służyć do robienia innych rzeczy. Nazwę widżetu określa się poprzez element "attr-connect" z atrybutem "name" równym "widget-name". Następnie trzeba przypisać nazwę ze zmiennej. Naszą nazwą będzie ścieżka do akcji z doklejonym na końcu ciągiem znaków "/name". Dlaczego nie korzystamy ze ścieżek do akcji? Otóż tę samą ścieżkę mają elementy w listach, więc użycie ścieżek mogłoby skutkować pokazywaniem./ukrywaniem elementów tych list, gdyby ukrywanie/pokazywanie elementów list było zaimplementowane.

W omawianym szablonie definiujemy szablon z szablonem ścieżki bezwzględnej "data/*". Tam mamy etykietę, której przyporządkujemy tekst o ostatnim katalogu ścieżki do tej akcji. Następnie mamy etykietę, która jest podłączona do wartości atrybutu w naszym menadżerze plików dla danego pliku. Wszystkie atrybuty plików są domyślnie niewidoczne.

Należy też zwrócić uwagę na jedyny handler w tym pliku. Jest on w szablonie ze ścieżką względną "selected". "Selected" jest zdarzeniem wywoływanym, gdy dany plik zostanie zaznaczony. Na aktywny plik wskazuje zmienna "path". Domyślnie ta zmienna jest pusta, więc nic nie zostanie ukryte. Najpierw ukrywa on element(naszego vboksa dla atrybutów danego pliku). Następnie pobiera on ścieżkę bez ostatniego elementu("/selected"), by później dodać do niej wartość "/name",. Tak tworzymy nazwę elementu, który powinien być wyświetlony. Zmienna "call-path" natomiast zawiera ścieżkę do naszej akcji "selected", by później wywołać zdarzenie skojarzone z nią.

Jedynym problemem jest to, że nazwy atrybutów plików nie są takie same, jak na liście plików. Korzystamy z nazw wewnętrznych, a mianowicie ostatniego katalogu ścieżki do tego atrybutu dla danego pliku. W przyszłości powinno się to zmienić.

To już wszystko na dzisiaj.