Nadawanie stylu drzewa

This is an archived page. It's not actively maintained.

Opis jak stosujemy style w drzewach.

Nadawanie stylu drzewa

Mo偶esz nada膰 style obramowaniu drzewa i nag艂贸wkom kolumn, robi膮c to w identyczny spos贸b jako osobne elementy. Dodanie stylu do elementu tree b臋dzie zastosowany w encji drzewa. Dodanie stylu do elementu treecol nie spowoduje, 偶e styl znajdzie zastosowanie do kolumny, a tylko do nag艂贸wka.

Cia艂o drzewa musi by膰 stylowane troch臋 w inny spos贸b, jak inne elementy. Zewn臋trzny treechildren jest tylko prawdziwym elementem w ciele drzewa. Wewn臋trzny elementy s膮 tylko do rezerwacji miejsca.

Ustawianie w艂asno艣ci

Zamiast tego, musisz u偶y膰 properties atrybutu wierszy i kom贸rek, aby ustawi膰 jedn膮 lub wi臋cej nazw w艂a艣ciwo艣ci. Mo偶emy tego u偶ywa膰 z drzewami z warto艣ciami statycznymi, RDF buduje zawarto艣膰 w podany spos贸b wraz z widokiem. Powiedzmy, 偶e chcemy uzyska膰 szczeg贸lny pasek(wiersz(?)) o niebieskim kolorze t艂a. Zosta艂o to zaimplementowane we w艂a艣ciwo艣ciach etykiety Mozilla Mail's. B臋dziemy u偶ywa膰 w艂asno艣ci nazwanej 'makeItBlue'. Mo偶esz jej u偶y膰 zawsze, gdy potrzebujesz nazwy. Mo偶esz ustawi膰 wielokrotne w艂asno艣ci oddzielaj膮c je za pomoc膮 spacji.

Ustaw w艂asno艣膰 wiersza lub kom贸rki tabeli, jak jest to pokazane w poni偶szym przyk艂adzie:

<treerow properties="makeItBlue">

Selektory CSS dla drzewa

Arkusze styl贸w potrafi膮 pobiera膰 t膮 w艂asno艣膰 i u偶ywa膰 do zmiany wygl膮du wiersza dla nieczytelnej wiadomo艣ci e-mail lub etykiety. Wymy艣l w艂a艣ciwo艣ci jako funkcjonuj膮ce bardziej, ni偶 klasa stylu, chocia偶 odpowiada ona czemu艣 wi臋cej, kompleksowa sk艂adnia do u偶ycia w pliku arkusza styl贸w. Jest tak poniewa偶 mo偶esz wyszczeg贸lni膰 style dla pewnych cz臋艣ci lub indywidualnych kom贸rek. Nie mo偶esz u偶ywa膰 styl贸w dla tekstu, je艣li s膮 one kom贸rkami, ale z艂o偶one z wci臋ciem. Nast臋puj膮cy przyk艂ad jest sk艂adnia, kt贸ra musi by膰 u偶yta:

treechildren::-moz-tree-row(makeItBlue)
{
  background-color: blue;
}

Ten dodatkowy pseudostyl jest u偶yty do stylowania kolorem t艂a dla wiersza, kt贸ry ma w艂asno艣膰 'makeItBlue'. Ta specjalna sk艂adnia jest potrzebna poniewa偶 kom贸rki nie potrafi膮 rozdzieli膰 element贸w. Ca艂a zawarto艣膰 wewn膮trz cia艂a drzewa, jest interpretowane przez element treechildren (uwaga treechildren si臋 staje sformatowany stylami w zasadzie poni偶ej.) Pseudostyl ustawia zasady styl贸w dla okre艣lonych cz臋艣ci, co ma zosta膰 wy艣wietlone. Ta zasada styl贸w znaczy, 偶e wewn膮trz element treechildren, ustawia kolor t艂a na niebieski dla wszystkich wierszy drzewa maj膮cych w艂asno艣膰 'makeItBlue'.

Tekst '::-moz-tree-row' okre艣la zawarto艣膰 obszaru jaki jest potrzebny, kt贸ry w tym przypadku jest wierszem. Mo偶esz tak偶e u偶y膰 nast臋puj膮cych warto艣ci:

  • ::-moz-tree-cell: Kom贸rka. U偶yj do okre艣lenia obramowania i koloru t艂a.
  • ::-moz-tree-cell-text: Tekst w kom贸rce. U偶yj do ustawienia czcionki i koloru tekstu.
  • ::-moz-tree-twisty: Pojawienie si臋 zwoju uzyskamy rozszerzenie lub upadek potomka wiersza.
  • ::-moz-tree-image: Obrazek w kom贸rce. Mo偶esz ustawi膰 obrazek z w艂asno艣ciami list-style-image.
  • ::-moz-tree-row: Wiersz. U偶yj go aby ustawi膰 kolor t艂a wiersza.
  • ::-moz-tree-indentation: Wci臋cie do lewej strony wierszy s膮 potomkami reszty wierszy.
  • ::-moz-tree-column: Kolumna.
  • ::-moz-tree-line: Linie s膮 rysowane z po艂膮czenie potomka-dziecka wiersza do wiersza potomka-rodzica.
  • ::-moz-tree-separator: Separator w drzewie.
  • ::-moz-tree-progressmeter: Warto艣膰 metra post臋pu kom贸rek. Mo偶esz utworzy膰 metr post臋pu poprzez ustawienia atrybutu type w kolumnie progressmeter.
  • ::-moz-tree-drop-feedback: Sprz臋偶enie zwrotne 'chwy膰 i upu艣膰'.

Sprawd藕 u偶ycie kilku w艂asno艣ci oddzielaj膮c je przecinkiem. Przyk艂ad poni偶ej ustawia kolor t艂a na szary dla wierszy, kt贸re posiadaj膮 okre艣lon膮 w艂a艣ciwo艣膰 'readonly' i 'unread'. Dla w艂asno艣ci, kt贸re s膮 'readonly' (tylko do odczytu), zostanie dodana czerwona linia obramowania woko艂o wiersza. Wa偶na jest, kolejno艣膰 okre艣lania zasad i ich zapisanie jako jaki艣 wiersz, kt贸ry posiada atrybut 'readonly' ustawiony bez wzgl臋du na to czy s膮 inne w艂asno艣ci takie jak 'unread'.

treechildren::-moz-tree-row(readonly)
{
  border: 1px solid red;
}

treechildren::-moz-tree-row(readonly, unread)
{
  background-color: rgb(80%, 80%, 80%);
}

Domy艣lne w艂asno艣ci

Lista w艂a艣ciwo艣ci dla element贸w stanowi膮cych drzewo jest domy艣lnie bardzo ma艂a dla domy艣lnych ustawie艅, kt贸re mo偶na tak偶e u偶y膰 jako arkusze styl贸w. Mo偶emy u偶ywa膰 tych dodatkowych w艂a艣ciwo艣ci do ustawienia appearance of containers or selected rows. The following properties are automatically set as needed:

focus
ta w艂asno艣膰 jest ustawiona je艣li the tree currently has the focus.
selected
ta w艂asno艣膰 jest ustawiona dla wierszy i kom贸rek, kt贸re s膮 aktualnie zaznaczone.
current
ta w艂asno艣膰 jest ustawiona je艣li tkursor jest w wierszu. Tylko jeden wiersz b臋dzie mia艂 ustawion膮 w艂asno艣膰 na czas.
container
ta w艂asno艣膰 jest ustawiona dla wierszy i kom贸rek posiadaj膮cych, kt贸ry element dziedziczy艂 z wiersza tabeli.
leaf
ta w艂asno艣膰 jest ustawiona dla wierszy i kom贸rek kt贸rych nie ma potomek wiersza.
open
ta w艂asno艣膰 jest ustawiona dla wierszy i kom贸rek kt贸re s膮 expanded.
closed
ta w艂asno艣膰 jest ustawiona dla wierszy i kom贸rek kt贸re s膮 zawini臋te.
primary
ta w艂asno艣膰 jest ustawiona dla kom贸rek w primary column.
sorted
ta w艂asno艣膰 jest ustawiona dla kom贸rek w the current sorted column.
even
ta w艂asno艣膰 jest ustawiona dla even numbered rows.
odd
ta w艂asno艣膰 jest ustawiona dla odd numbered rows. This property, along with the even property allow you to set, dla przyk艂adu, alternating colors for each row.
dragSession
ta w艂asno艣膰 jest ustawiona je艣li co艣 something is currently being dragged.
dropOn
if a drag is occuring over the tree, ta w艂asno艣膰 jest ustawiona dla the row currently being dragged over, as long as the mouse pointer is hovering over the row.
dropBefore
ta w艂asno艣膰 jest ustawiona je艣li kursor myszki ...
dropAfter
ta w艂asno艣膰 jest ustawiona je艣li kursor myszki jest nad lub pod jest kursor myszki jest przed obecn膮 m臋k膮.
progressNormal
ta w艂asno艣膰 jest ustawiona dla progress meter cells.
progressUndetermined
ta w艂asno艣膰 jest ustawiona dla undeterminate progress meter cells.
progressNone
ta w艂asno艣膰 jest ustawiona dla non-progress meter cells.

The properties are set for rows or cells in rows with the necessary state. For columns and cells, one additional property, the id of the column or column the cell is in will be set.

Ustawienie w艂asno艣ci dla kompilacji drzew RDF

Dla zbudowania drzewa RDF, mo偶emy u偶y膰 tej samej sk艂adni. Jednak偶e, cz臋sto b臋dziesz musia艂 ustawia膰 w艂a艣ciwo艣ci opartych na warto艣ciach znajduj膮cych si臋 w kodzie 藕r贸d艂owym.

Ustawienie w艂asno艣ci dla W艂asnego widoku drzewa

For trees with a custom view script, you can set properties by supplying the functions 'getRowProperties', getColumnProperties() and getCellProperties() in the view. These return information about an individual row, column and cell. Arguments to these functions indicate which row and/or column. The last argument to each of these functions is a properties list which the view is expected to fill with a list of properties. The function getColumnProperties() also supplies the corresponding treecol element for the column.

getRowProperties聽: function(row,prop){}
getColumnProperties聽: function(column,columnElement,prop){}
getCellProperties聽: function(row,column,prop){}

Let's look at an example of changing a specific cell. Let's make every fourth row have blue text, using the example from a previous section. We'll need to add code to the getCellProperties() function, to add a property 'makeItBlue' for cells in every fourth row. (We don't use getRowProperties as the text color will not be inherited into each cell.)

The properties object that is passed as the last argument to the getCellProperties is an XPCOM object that implements nsISupportsArray. It is really just an XPCOM version of an array. It contains a function AppendElement which can be used to add an element to the array. We can use the interface nsIAtomService to constuct string atoms for the properties.

getCellProperties: function(row,col,props){
  if ((row聽%4) == 0){
    var aserv=Components.classes["@mozilla.org/atom-service;1"].
              getService(Components.interfaces.nsIAtomService);
    props.AppendElement(aserv.getAtom("makeItBlue"));
  }
}

This function would be defined as part of a view object. It first checks to see which row is being requested and sets a property for cells in every fourth row. The properties list requires an array of atom objects, which can be thought of as constant strings. We create them using the XPCOM interface nsIAtomService and add them to the array using the AppendElement function. Here, we create an atom 'makeItBlue'. You can call AppendElement again to add additional properties.

Przyk艂ad arkusza styl贸w

treechildren::-moz-tree-row(selected)            { background-color: #FFFFAA; }
treechildren::-moz-tree-row(odd)                 { background-color: #EEEEEE; }
treechildren::-moz-tree-row(odd, selected)       { background-color: #FFFFAA; }
treechildren::-moz-tree-cell-text(selected)      { color: #000000; }
treechildren::-moz-tree-cell-text(odd, selected) { color: #000000; }

Na nast臋pnej stronie zobaczymy w jaki spos贸b zmodyfikowa膰 domy艣lny motyw.