Libgreattao: custom UI

For this task we need newest version of libgreattao and tao-manager application. You can download tao-manager from my home page. You can download newest version of libgreattao from svn of SourceForge,.


Our configuration window

Firstly, we take care about configuration window. In this example we looks on ready class of configuration dialog belonged to “modern” design.

This window contains buttons on the left side, labels and edits. In standard design are placed tabs instead of buttons. In modern design clicking on the button will switch view.

The code are below:

<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>
We can see one handler, few variables, conditions and show/hide elements. Show/hide elements are changing visibility:
  1. For parent element,, if there’s no “name” and “variable” attribute
  2. For elements with given path, if there’s “variable” attribute
  3. For elements with given name, if there’s “name” attribute

What we can do to show/hide elements once button is clicked? After all we must select method(using path or name). We select path and controling elements using children path “/category/*/, because buttons are present in “/category/*” and elemetns to control are in path “/catrgory/*/*”. In first step we hide all elements using “hide” element without attributes for template:

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

This way will hide all elements without category buttons. We must also show firstly created category. This code will complete this task:

<if type="is_children" variable1="displayed_path" variable2="current_path">
   <show />
 </if>
Condition typw “is_children” checks that path are child of other path. In case we need it touches only children of matched element(without parent), we must end value with slash. Jn this case we check if “current_path” are child of “displayed_path”. “current_path” is set above and the value of it is cuirrent path. We set also “active variable”, which points to children fof active element(we add slash at the end, using”append”). Before setting value of variable “displayed_path” we checks if that variable are not s,lash(this variable will contains slash near after view is loaded).
In next step we take care about showing/hidding elements on button’s click event. Our handler will complete this task. In first step, we hide active element using “active” variable. We must remember that firstly created element will be active. In next step we set “active” variable using clicked button’s action path. We also append slash to it. In  next step we show elements belonged to clicked button. “active” variable will contain path of clicked element, so after clicked another button displayed elements(without buttons) will be hide.
This is the end of describing configuration window. There’s only one matter. Once application delete active elements, there’s no elements visible(buttons are only visible). Other situation is with tabs. There’s framework will display another tab automatically.
Wygląd naszego okna konfiguracji

Custom file management window for tao-manager

Wygląd menadżera plików bez lewego panelu
Next example are about adding file information dialog for my file manager. We will change view of file manager windolw, but only for this one application. Firstly, we need to create directory “$HOME/.tao”. In this directory we need to create directory “$HOME/.tao/tao-manager” and “$HOME/.tao/tao-manager/mWidgets” and “$HOME/.tao/tao-manager/mWidgets/app”. In next step we need to create file with UI paths definitions(“$HOME/.tao/app”). In this directory we will create UI defintion directory for my file manager:
tao-manger = tao-manger
We must now copy configuration file for mWidgets design:
cp /usr/share/tao-design/mWidgets/config ~/.tao/tao-manager/mWidgets
We must now create file called “file manager” in “$HOME/.tao/tao-manager/mWidgets/app” directory. This file should looks like below:
<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>
Our information panel are definied in template with path pattern “/fileviews/*/list/items/*. In this step I must mentoin about widgets names. Many widgets can have the same name and one widget can have many names. Name are used to control visibility of widget, but in future it will be used in other tasks. We can define widget’s name usaing “attr-connect” tag with “name” attribute equal to “widget-name” and giving variable name. Our name is actions’s path with appented string “/name”. Why we don’t use action’s paths? We are using the same path for elements in lists, so using name could causing list’s elements to show/hide. I must mentoin, that displaying/hidding elements of lists are not implemented, but maybe it will be implemented in future.
Described tempalte contains template with relative path pattern “data/*”. In this pattern exist label with text equal to last directory of path to this action. There’s also label connected to value of current attribute of active file. All attributes of file are hidden by default.
Take also look at only one handler in this file. It exist in template with relative path “selected”, “selected” is event invoked, when a file is selected. “path” variable point to active file. It is empty by default, so nothink will be hidden.  This handler first will hide element(vbox for file attribute). In next step it will get path without last element(“/selected”) and next append value “/name” for it. This is way of generation path of element to show. “call-path” variable contains path pointed to “selected” action. This variable is used to call event connected with this action,.
Wynik naszych prac
There’s only one problem. Names of file attributes in left panel are not set by application.
 We use names obtained from path of template(last directory). It can be solved in very simplem way. You must only replace first code bellow with second code below:
1)
<hbox>
<label>
<attr-connect name=”label” function=”last-dir” />
</label>
<label dir-for=”label” />
</hbox>
2)
<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>
Advertisements