Własne widoki drzewa

Widok drzewa przetrzymuje dane, które mają być wyświetlone w drzewie.

Dotychczas używaliśmy wbudowanych wyglądów drzewa. W tej sekcji przyjrzymy się tworzeniu własnego wyglądu. Jest to konieczne w sytuacji, gdy ilość danych jest bardzo duża, lub są one kompleksowo zaaranżowane. Na przykład, wydajność była by niezbyt duża w sytuacji gdybyśmy mieli użyć treeitems kilka tysięcy razy. Możesz też tworzyć własny widok w sytuacji, gdy chcesz wykonać obliczenia na danych, które maja być wyświetlone. Ponieważ widok może magazynować i odzyskiwać dane w sposób najbardziej odpowiedni dla użytych danych, drzewo może być użyte nawet setki tysięcy razy.

Żeby implementować własny wygląd, będziesz musiał stworzyć obiekt wprowadzający interfejs nsITreeView. Możesz tworzyć te obiekty w JavaScript, ale będziesz potrzebować oddzielnego obiektu dla każdego drzewa. Naturalnie, ponieważ własny widok będzie używany, wbudowany widok nie będzie już używany, więc treeitem, treerow i treecell będą bezużyteczne, ponieważ własny widok będzie otrzymywać dane z innego źródła. Tak więc treechildren może zostać pusty. Przykład:

<tree id="my-tree" flex="1">
  <treecols>
    <treecol id="namecol" label="Name" flex="1"/>
    <treecol id="datecol" label="Date" flex="1"/>
  </treecols>
  <treechildren/>
</tree>

By wyznaczyć dane do pokazania w drzewie, musi być stworzony obiekt widoku, który jest użyty dla każdej komórki, całkowita liczba wierszy plus inne opcjonalne informacje. Drzewo wywoła metody widoku w celu otrzymania informacji potrzebnych do wyświetlenia.

Generalnie, chociaż widok drzewa ma około trzydziestu funkcji mogących zostać zaimplementowanymi, musimy je uruchomić tylko jednokrotnie, gdy drzewo ją wywołuje.

rowCount

Własność powinna być ustawiona, do ustalenia dla całkowitej liczby wierszy w drzewie.

getCellText( row , column )

Metoda ta, zwraca tekst zawarty w podanej kolumnie i wierszu. Będzie używana do wyświetlania danych dla każdej komórki. Wiersze podaje się numerycznie, zaczynając od 0. Kolumny, to atrybut id przypisany kolumnom. W Mozilla 1.8 i późniejszych, zamiast tego będzie używany obiekt treeColumn.

setTree( tree )

Metoda ta, jest wywoływana jednokrotnie, w celu umieszczenia elementu drzewa w widoku.

Tutaj jest przykład definicji takiego obiektu, który może być wywołany, kiedy tylko chcesz:

//Moz 1.8
var treeView = {
    rowCount : 10000,
    getCellText : function(row,column){
      if (column.id == "namecol") return "Wiersz "+row;
      else return "18 luty";
    },
    setTree: function(treebox){ this.treebox = treebox; },
    isContainer: function(row){ return false; },
    isSeparator: function(row){ return false; },
    isSorted: function(){ return false; },
    getLevel: function(row){ return 0; },
    getImageSrc: function(row,col){ return null; },
    getRowProperties: function(row,props){},
    getCellProperties: function(row,col,props){},
    getColumnProperties: function(colid,col,props){}
};

Funkcje nieopisane powyżej nie pełnią żadnego zadania, lecz muszą być użyte, gdy drzewo będzie je wywoływać w celu zebrania dodatkowych informacji.

Ten przykład może zostać użyty dla drzewa z 10000 wierszy. Zawartość komórek pierwszej kolumny będzie wypełniona tekstem Row X, gdzie X jest numerem wiersza. Zawartość komórek drugiej kolumny będzie ustawiona na ‘18 luty’. Warunek if funkcji getCellText() porównuje kolumnę z tekstem ‘namecol’. Tekst ‘namecol’ odpowiada id pierwszego treecol w powyższym przykładzie. Przykład jest oczywiście bardzo prosty, w rzeczywistości miał być bardziej skomplikowane dane w każdej komórce.

Ostatnim krokiem będzie skojarzenie obiektu widoku z drzewem. Drzewo ma własność view, która może być przyporządkowana do obiektu widoku deklarowanego powyżej. Możemy wyznaczyć wartość tej własności, by w dowolnym czasie, ustawić lub zmienić widok.

<div class="note">Note: The tree-related interfaces changed in Gecko 1.8. See Tree Widget Changes for details.</div> To implement a custom view, you will need to create an object which implements the nsITreeView interface. You can create these objects in 'JavaScript, but you will need a separate object for each tree. Naturally, since a custom tree view is being used, the content tree view will not be used, so the <code>treeitem</code>, <code>treerow</code>, and <code>treecell</code> elements will have no purpose since the custom view will get its data from elsewhere. Thus, you can just leave the <code>treechildren</code> element empty. The following example shows this:

function setView()
{
    document.getElementById('my-tree').view = treeView;
}

W celu uproszczenia przykładu, użyto wbudowanego skryptu. Normalnie byłby on umieszczony w zewnętrznym pliku.

Źródła

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window title="Przykład okna" id="tree-window"
   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
   onload="setView();">

<script>
//Moz 1.8
var treeView = {
    rowCount : 10000,
    getCellText : function(row,column){
      if (column.id == "namecol") return "Row "+row;
      else return "February 18";
    },
    setTree: function(treebox){ this.treebox = treebox; },
    isContainer: function(row){ return false; },
    isSeparator: function(row){ return false; },
    isSorted: function(){ return false; },
    getLevel: function(row){ return 0; },
    getImageSrc: function(row,col){ return null; },
    getRowProperties: function(row,props){},
    getCellProperties: function(row,col,props){},
    getColumnProperties: function(colid,col,props){}
};

function setView(){
    document.getElementById('my-tree').view = treeView;
}
</script>

<tree id="my-tree" flex="1">
  <treecols>
    <treecol id="namecol" label="Nazwa" flex="1"/>
    <treecol id="datecol" label="Data" flex="1"/>
  </treecols>
  <treechildren/>
</tree>

</window>

Na obrazku widoczne są 2 kolumny każda z danymi, pobranymi z funkcji getCellText(). Funkcja setView() była wywołana w operatorze okna onload(), jednak mógłbyś ustawić widok jeżeli tak sobie zażyczysz. Widok możesz zmieniać w dowolnym momencie.

Rzeczą, którą należy zapamiętać to, to że funkcja getCellText() jest wywoływana tylko kiedy jest potrzeba pokazania zawartości. Z pośród 10000 wierszy powyżej, getCellText() jest uruchamiana tylko dla aktualnie widocznych komórek. Na obrazku jest pokazanych tylko 7 wierszy, ostatni tylko częściowo, więc getCellText będzie wywołana tylko 14 razy, po razie dla każdego wiersza i kolumny. Dla innych wierszy jest uruchamiana w momencie przewijania przez użytkownika. Dzięki temu drzewo działa bardziej efektywnie.

Zauważ to, że obiekt widoku jest dostępny też dla drzew używających wbudowanego wyglądu. Możesz używać tego by zdobyć etykiety i inne informacje nt. komórki.

Interfejs nsITreeView listuje wszystkie metody i własności, które możemy zastosować dla widoku drzewa.

Następnie, zobaczymy więcej szczegółów widoku drzewa.