Kurs XUL:Własne widoki drzewa
z Mozilla Developer Center, polskiego centrum programistów Mozilli.
Widok drzewa przetrzymuje dane, które mają być wyświetlone w drzewie.
[edytuj] Tworzenie własnych widoków
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.
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.
[edytuj] Przykład drzewa użytkownika
<?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.