Strona używa cookies (ciasteczek). Dowiedz się więcej o celu ich używania i zmianach ustawień. Korzystając ze strony wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki.    X

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. 

linux programowanie

Komentarze

0 nowych
Druedain   13 #1 13.10.2014 16:49

Proponuję dodać choćby krótki wstęp, gdzie napiszesz o co chodzi. Zacząłem czytać nie mając pojęcia co czytam. Jeśli omawiasz bibliotekę do składania interfejsu, dodaj zrzuty ekranu...

Generalnie, treść jest tak nieczytela, że nie wiem czemu jest na głównej.

Autor edytował komentarz.
  #2 13.10.2014 17:57

Wpis bez fotek to tak średnio ładnie wygląda, ale całkiem sensowny. Brakuje mi jednak rozwinięcia bardziej tematu. Ja tam zrozumiałam go dobrze, a jestem kobietą. A sam temat nie jest mi obcy, już 10 lat w tej branży. Chyba jestem wyjątkiem wśród programistów. U nas we firmie na 20 osób tylko jedna dziewczyna. Troche to przykre.

DjLeo MODERATOR BLOGA  17 #3 13.10.2014 18:10

Generalnie kiedyś była dyskusja na ten temat z Cebulą, jak traktować takie wpisy (programistyczne z kodem). Ogólnie stanowisko "góry" jest mi znane, także tym się kieruje. Ale to nie zmienia faktu, że autor musi pewne detale poprawić we wpisie i dostał stosowną informację na priv. Jeżeli trochę (bo nie jest aż tak źle) tylko poprawi wpis, to zostanie na głównej. Ogólnie mało jest takich wpisów, a to, że target jest słaby (ułamek czytelników) to specjalnie nie dyskwalifikuje go. Ale zgodzę się, że jest mało atrakcyjny wizualnie. Czy ciężki w zrozumieniu nie wiem, pewnie dla programisty nie. Ale masz racje, można by go bardziej "zblogowacić".

nintyfan   10 #4 13.10.2014 18:35

@Druedain: Pisałem o co chodzi we wcześniejszych wpisach. Libgreattao to moja biblioteka do automatycznego generowania interfejsu. Generalnie aplikacja definiuje klasę dla każdego okna, a następnie uruchamia na tej klasie szablony przez określenie ścieżki elementów. Szablony następnie tworzą interfejs. W pliku klasy okna dla każdego widżetu można zdefiniować do czego ten widżet ma być podpięty: nazwa(label), opis(description), zdarzenie(event), ikona(icon), wprowadzanie(input), wyprowadzanie(output). Następnie aplikacja może zmieniać wartość wszystkich podpiętych dla danego typu i danej ścieżki elementów. Służy do tego wywołanie tao_set_hint, które przyjmuje okno, ścieżkę, typ slotu(wcześniej wymienione) i wartość. W funkcji tao_initialize aplikacja przekazuje swoją nazwę jako pierwszy argument, co wykorzystaliśmy dla zmiany interfejsu naszej aplikacji(i tylko jej).

nintyfan   10 #5 13.10.2014 18:38

@OlaMati (niezalogowany): Generalnie nie potrafię się połapać, gdzie na dobreprogramy można dodać obrazki. Przy pierwszym wpisie także nie potrafiłem, ale później znalazłem przycisk galeria. Teraz jednak nie potrafię go znaleźć.

nintyfan   10 #6 13.10.2014 19:08

Na szybko dodałem możliwość podłączania widżetu do nazwy/opisu innej akcji(ścieżki).

Kod:

<hbox>
<label>
<attr-connect name="label" function="last-dir" />
</label>
<label dir-for="label" />
</hbox<
'
Należy podmienić nap:
<hbox>
<variable name="column-path" action="change" value="/fileviews/" />
<variable name="column-path" action="append" function="nth-dir" param="2" />
<variable name="column-path" action="append" value="/list/columns/" />
<variable name="column-path" action="append" function="last-dir" />
<label>
<attr-connect name="label" function="last-dir" />
<attr-connect name="label" function="label" param="column-path" />'
</label>
<label dir-for="label" />
</hbox>
'

Żeby z tego skorzystać należy pobrać najnowszą wersję libgreattao z svn-a.



Dzięki temu będą wyświetlane ustawione przez program nazwy atrybutów plików w bocznym panelu.

Autor edytował komentarz.
nintyfan   10 #7 13.10.2014 19:43

Coś chyba dodawanie grafik nie działa. Zamiast dodać grafikę, wstawiło tekst.

DjLeo MODERATOR BLOGA  17 #8 13.10.2014 20:01

Grafiki wstawiasz w menadżerze grafik. Wystarczy przeciągnąć grafikę, a do tekstu wstawiasz kod [img=nazwagrafiki]. Pobaw się tym i popraw wpis. Na razie troszeczkę go zepsułeś, także chwilowo wywalam z głównej. Popraw to..

nintyfan   10 #9 14.10.2014 08:45

@DjLeo: Wpis chyba poprawiony. Wystarczy, że dla cytatów użyłem cudzysłowów czy może powinienem korzystać z tagu quote?

Autor edytował komentarz.
lucas__   13 #10 14.10.2014 10:33

@DjLeo: Nie wiem jak wyglądał wpis wcześniej, ale teraz jest jak najbardziej ok.

DjLeo MODERATOR BLOGA  17 #11 14.10.2014 10:33

@nintyfan: O wiele lepiej! Teraz to jakoś wygląda! Tylko linki musisz jeszcze nauczyć się tworzyć. Wejdź do edycji i zobacz jak Ci linki zmieniłem. Podawanie pełnych ścieżek nie jest fajne. Najlepiej linki zawierać w zdaniu. Jak już to "strona.pl", jako link (bez ścieżki po domenie). To po prostu ładniej wygląda, niż długa i nic nie mówiąca nikomu ścieżka. Ogólnie jest dużo lepiej niż na początku.

Autor edytował komentarz.
DjLeo MODERATOR BLOGA  17 #12 14.10.2014 10:38

@lucas__: No w porównaniu do tego co było to niebo, a ziemia ;) Także brawa dla nintyfan za poprawienie i postaranie się. Kolejny bloger (już trzeci), który wyciąga wnioski i przyjmuje feedback.