Obiekty pudełkowe drzewa

Wystąpiły błędy skryptów na tej stronie. Mimo, że są one kierowane do redaktorów serwisu, można je częściowo przeglądać poniżej.

{{ Aktualizuj }}

W tym artykule opisane będą elementy okna drzewa, odpowiedzialne za to jak drzewo wygląda.

O obiektach

Obiekty okna były opisane we wcześniejszym artykule. Obiekty okna drzewa, specjalnym rodzajem przeznaczony dla drzew. Okno drzewa wdrąża interfejs TreeBoxObject.

Przerysowywanie drzewa

Poznaliśmy już rowCountChanged(), funkcję okna drzewa. Jest używana, żeby wykazać, że jeden lub więcej wierszy było dodanych lub usuniętych. Drzewo przerysuje dany obszar. Nie musisz wywoływać tej funkcji, gdy wiersz został nieznacznie zmieniony, tzn. zmieniona została etykieta komórki. A takim przypadku lepiej wywołać prostszą funkcję invalidateRow() w celu przerysowania pojedynczego wiersza. Drzewo wywoła widok, by dodać uaktualnienie a następnie zaktualizuje zawartość ekranu.

Inne przerysowujące funkcje to:

  • invalidateCell() do przerysowywania pojedynczych komórek,
  • invalidateColumn() przerysowuje kolumny,
  • invalidateRange() przerysowuje obszar wierszy,
  • invalidate() przerysowuje the entire tree.

Zauważ, że przerysowanie nie nastąpi do momentu, aż Mozilla nie przerysuje tego w tle.

Przewijanie drzewa

Możesz przewijać drzewo używając różnych metod, podobnych do tych z pól listy. Funkcja scrollToRow może być użyta do przewinięcia konkretnego rzędu. Oto prosty przykład:

var el = env.locale; Przykład 1 : Źródła Podgląd

<script>
function doScroll(){
  var value = document.getElementById("tbox").value;
  var tree = document.getElementById("thetree");

  var boxobject = tree.boxObject;
  boxobject.QueryInterface(Components.interfaces.nsITreeBoxObject);
  boxobject.scrollToRow(value);
}
</script>

<tree id="thetree" rows="4">
  <treecols>
    <treecol id="row" label="Row" primary="true" flex="1"/>
  </treecols>
  <treechildren>
    <treeitem label="Row 0"/>
    <treeitem label="Row 1"/>
    <treeitem label="Row 2"/>
    <treeitem label="Row 3"/>
    <treeitem label="Row 4"/>
    <treeitem label="Row 5"/>
    <treeitem label="Row 6"/>
    <treeitem label="Row 7"/>
    <treeitem label="Row 8"/>
    <treeitem label="Row 9"/>
  </treechildren>
</tree>

<hbox align="center">
  <label value="Scroll to row:"/>
  <textbox id="tbox"/>
  <button label="Scroll" oncommand="doScroll();"/>
</hbox>

Zauważ, że używamy atrybutów wierszy tree żeby wyszczególnić, że tylko cztery wiersze są pokazane jednocześnie. To czyni przykład prostszym, w dostrzeżeniu jak pracuje. Zauważ też, że pierwszym wierszem jest 0.

Funkcja doScroll() pobiera obiekt okna i wywołuje funkcję scrollToRow() z argumentem ustawionym na wartość textbox. Zauważ, że obiekt okna drzewa może być odzyskany tą samą drogą jak obiekty okna używające własności boxObject, jednak musimy wywołać QueryInterface(), by przenieść obiekt okna do bardziej wyspecjalizowanego obiektu okna drzewa. Ogólne funkcje obiektów okien są także dostępne dla drzew.

Dodatkowe metody przewijania dają funkcje scrollByLines(), scrollByPages() i ensureRowIsVisible(). scrollByLines() przewija w dół lub w górę o pewna liczbę wierszy. Użyj dodatnich liczb by przewinąć w dół, a ujemnych w górę. Funkcja scrollByPages() przewija o pewna liczbę stron i jest automatycznie wywoływana, gdy użytkownik wciska klawisze PAGE UP i PAGE DOWN, gdy drzewo jest wybrane. Strona jest równoważna liczbie widzianych wierszy. Liczbę wierszy nie jest trudno obliczyć, funkcja getPageLength() zwraca liczbę wierszy na stronie. W przykładzie zwróciła być cztery.

Zauważ, ze w Firefox 1.0 i Mozilla 1.7 i wcześniejszych, funkcja getPageLength() jest wywoływana zamiast getPageCount(). Nazwa została zmieniona, ponieważ była mylnie interpretowana, że zwraca liczbę stron, a nie rozmiar. Można określić także liczbę stron, dzieląc liczbę wierszy, przez liczbę wierszy na stronę.

Funkcja ensureRowIsVisible() przewinie do rzędu tak, jak scrollToRow(), ale nie w przypadku, gdy wiersz jest już widoczny.

Współrzędne komórki

Kilka z najbardziej interesujących funkcji obiektów okna drzewa, mogą być użyte w celu otrzymania niektórych elementów drzewa.

  • Funkcja getCellAt()może być użyta do otrzymania komórki przy określonej lokalizacji piksela, podczas gdy getRowAt służy do uzyskania wiersz przy danej lokalizacji.
  • Funkcja getRowAt() może służyć do pobierania wiersza w określonej lokalizacji. Funkcja getRowAt() pobiera dwa argumenty, współrzędną x i y.
tree.boxObject.getRowAt( 50, 100 );

Ten przykład zwróci indeks wiersza, z poziomą pozycją 50, a pionową 100. Jedną ważna rzeczą jest to, że współrzędne mierzone jest od górnego, lewego rogu dokumentu, a nie krawędzi drzewa.

One important thing to note is that the coordinates are measured from the upper left corner of the containing document, not the edge of the tree itself.

To czyni łatwiejszym przekazanie współrzędnych do funkcji, jak jest przedstawione na przykładzie funkcji getCellAt().

var el = env.locale; Przykład 2 : Źródła Podgląd

<script>
function updateFields(event){
  var row = {}, column = {}, part = {};
  var tree = document.getElementById("thetree");

  var boxobject = tree.boxObject;
  boxobject.QueryInterface(Components.interfaces.nsITreeBoxObject);
  boxobject.getCellAt(event.clientX, event.clientY, row, column, part);

  if (column.value && typeof column.value != "string")
    column.value = column.value.id;

  document.getElementById("row").value = row.value;
  document.getElementById("column").value = column.value;
  document.getElementById("part").value = part.value;
}
</script>

<tree id="thetree" flex="1" onmousemove="updateFields(event);">
  <treecols>
    <treecol id="utensil" label="Utensil" primary="true" flex="1"/>
    <treecol id="count" label="Count" flex="1"/>
  </treecols>
  <treechildren>
    <treeitem>
      <treerow>
        <treecell label="Fork"/>
        <treecell label="5"/>
      </treerow>
    </treeitem>
    <treeitem>
      <treerow>
        <treecell label="Knife"/>
        <treecell label="2"/>
      </treerow>
    </treeitem>
    <treeitem>
      <treerow>
        <treecell label="Spoon"/>
        <treecell label="8"/>
      </treerow>
    </treeitem>
  </treechildren>
</tree>

<label value="Row:"/>
<label id="row"/>
<label value="Column:"/>
<label id="column"/>
<label value="Child Type:"/>
<label id="part"/>

Funkcja getCellAt() pobiera pięć argumentów, współrzędne i trzy inne argumenty. Pozostałe parametry są użyte dla funkcji żeby zwrócić więcej niż jedna wartość. Zobaczysz pewną liczbę interfejsów, które używają pozostałych parametrów w odniesieniu do obiektu XUL-a. Są one wskazane przez słowo ‘out’ przed argumentem. Dla nich, będziesz potrzebować dostarczyć pusty obiekt i funkcja zapełni własność ‘value’ konieczną wartością.

Trzy parametry będą zapełnione wierszem, kolumną i typem pochodnej pozycji. Wiersz jest indeksem wiersza pod kursorem myszy, ponieważ nazywamy ją współrzędnymi znaczenia mousemove. Jeżeli współrzędna nie jest ponad wierszem, wartość wiersza będzie ustawiona na -1. Kolumna jest obiektem kolumny Mozilla 1.8 i późniejszej. We wcześniejszych wersjach kolumny są identyfikowane przez id kolumny. W późniejszych wersjach istnieje oddzielny obiekt kolumny, który może być zapytany o dane kolumny.

Następująca linia jest użyta tak, że przykład zadziała na wszystkich wersjach.

if (column.value && typeof column.value != "string")
  column.value = column.value.id;

Jeżeli kolumna jest ciągiem znaków, używamy Mozilla 1.7 lub wcześniejszej, ale dla wersji późniejszych uzyskujemy id kolumny z obiektu kolumny. Jeżeli tworzysz kod dla wielorakich wersji, powinieneś sprawdzić ten powyżej.

Ostatni argument dla getCellAt() pochodna pozycji wypisze, które pole jest zapełnione ciągiem znaków zależnym od tego, przy której części komórki jest współrzędna. Jeżeli poruszasz myszą dookoła powyższego przykładu, możesz zauważyć, że etykieta zmienia się pomiędzy ‘text’ i ‘cell’. Wartość ‘text’ wskazuje miejsce gdzie tekst mógłby być umieszczony, a cell wskazuje obszar dookoła tekstu. Ostateczną wartością może być ‘image’, jeżeli obraz znajduje się w komórce drzewa, a współrzędna jest odpowiednia dla miejsca gdzie znajduje się obraz.

W celu odwrócenia tego, czyli uzyskania komórki dla danej współrzędnej, użyj funkcji getCoordsForCellItem(). Pobiera ona siedem argumentów jak opisane poniżej.

var x = {}, y = {}, width = {}, height = {};
if (typeof tree.columns != "undefined") column = tree.columns[column];
tree.boxObject.getCoordsForCellItem( row, column, part, x, y, width, height );

Wiersz, kolumna, I cześć argumentów, podobnych do tych zwróconych z funkcji getCellAt(). Znowu kolumna powinna być ciągiem znaków lub obiektem kolumny, zależnie od tego, której wersji używasz. Typ części komórki może być użyty do otrzymania współrzędnych tekstu, całej komórki, krętki lub obrazu w komórce. Te same wartości jak używa funkcja getCellAt(). Funkcja getCoordsForCellItem() zwraca współrzędne x i y, jako parametry wyjściowe.

Następnie, zobaczymy RDF, który może zostać użyty do automatycznego rozmieszczenia drzew i innych elementów.


Autorzy i etykiety dokumentu

Autorzy tej strony: Ptak82, Mgjbot
Ostatnia aktualizacja: Mgjbot,