From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../w\305\202asne_widoki_drzewa/index.html" | 149 +++++++++++++++++++++ 1 file changed, 149 insertions(+) create mode 100644 "files/pl/mozilla/tech/xul/kurs_xul/w\305\202asne_widoki_drzewa/index.html" (limited to 'files/pl/mozilla/tech/xul/kurs_xul/własne_widoki_drzewa') diff --git "a/files/pl/mozilla/tech/xul/kurs_xul/w\305\202asne_widoki_drzewa/index.html" "b/files/pl/mozilla/tech/xul/kurs_xul/w\305\202asne_widoki_drzewa/index.html" new file mode 100644 index 0000000000..d1ac85888d --- /dev/null +++ "b/files/pl/mozilla/tech/xul/kurs_xul/w\305\202asne_widoki_drzewa/index.html" @@ -0,0 +1,149 @@ +--- +title: Własne widoki drzewa +slug: Mozilla/Tech/XUL/Kurs_XUL/Własne_widoki_drzewa +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Custom_Tree_Views +--- +

+

« PoprzedniNastępny »

+

+ +

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

+ +

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.

+ +
Uwaga: The tree-related interfaces changed in Gecko 1.8. Zobacz Tree Widget Changes, aby uzyskać więcej informacji.
+ +

Ż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.

+ +

Przykład drzewa użytkownika

+ +

Źródła

+ +
grafika:treeview1.png
+ +
<?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.

+ +

+

« PoprzedniNastępny »

+

-- cgit v1.2.3-54-g00ecf