Kurs XUL:Obiekty pudełka
z Mozilla Developer Center, polskiego centrum programistów Mozilli.
Artykuł ten opisuje obiekty pola, które mieszczą w sobie powiązane informacje o wyświetlaniu i rozmieszczaniu pola XUL jak również pewne szczegóły o rozmieszczeniu XUL.
Spis treści |
[edytuj] O układzie graficznym Mozilli
Mozilla dzieli rzeczy na dwa zbiory drzew, drzewo content (zawartości) i drzewo layout (rozmieszczenia). Drzewo content (zawartości) przechowuje węzły jakie znajdują się w kodzie źródłowym. Drzewo layout (rozmieszczenia) przechowuje inne drzewo content (węzłów) dla każdego pojedynczego komponentu jaki może być wyświetlony. Drzewo layout (rozmieszczenia) mieści w sobie strukturę taką jak nodes (węzły) oczekiwane przy wyświetlaniu. Nie jest konieczny związek jeden do jednego pomiędzy nodes (węzłami) content (zawartości) a layout (rozmieszczenia).Pewne nodes (węzły) content (zawartości) mogą mieć klika obiektów layout (rozmieszczenia), na przykład każda linia paragrafu ma oddzielny obiekt layout (rozmieszczenia). Odwrotnie, pewne nodes content (węzły zawartości) nie mają wcale obiektów layout (rozmieszczenia). Na przykład element key nie ma żadnego obiektu layout (rozmieszczenia) ponieważ nie jest wyświetlany w żaden sposób. Podobnie, dowolny element, który był wykrywany również nie będzie miał obiektu layout (rozmieszczenia).
DOM jest generalnie używany tylko do pobrania i modyfikacji informacji odnoszącej się do zawartości lub struktury dokumentu. Jest względnie proste do
określenia jaki rodzaj węzła drzewa zawartości będzie stworzony dla danego elementu. Element XUL, na przykład, będzie miał typ XUL Element węzła zawartości.
Obiekty layout (rozmieszczenia) które będą stworzone są określane w bardziej złożone. Są używane różne fragmenty informacji takie jak nazwa znacznika, atrybuty elementu, różne właściwości CSS, elementy obiektów LAYOUT (rozmieszczenia) i XBL powiązany z elementem (XBL został opisany w dalszej części kursu). O ile nie zmienisz stylu dla elementu, większość elementów XUL zazwyczaj będą jako obiekty pola layout (rozmieszczenia) lub jednego z jego podtypów. Przypomnij sobie, że elementy XUL są typu pola, to znaczy, pole jest podstawą dla wyświetlania wszystkich elementów XUL. Jednakże jest kilka podtypów, około 25 lub więcej, dla określonych elementów XUL.
Niektóre z tych podtypów, takie jak stack or listbox są bardziej potrzebne dla złożonych layouts niż podstawowe pole, podczas gdy pozostałe takie jak przycisk są używane tylko do dodania dodatkowego programu obsługi zdarzeń myszy i klawisza.
Obiekt layout (rozmieszczenia) powiązany z elementem może zostać usunięty a całkowicie inny typ obiektu stworzony przez zmianę właściwości display CSS, pośród innych. Na przykład zmiana właściwości wyświetlania elementu przycisku na block spowoduje, że obiekt layout (rozmieszczenia) przycisku będzie usunięty a zamiast tego stworzony zostanie obiekt block. Naturalnie, zmieni to wygląd i funkcję elementu
Nie jest koniecznym znać szczegóły tego jak obiekty layout (rozmieszczenia) są skonstruowane ale jest całkiem użytecznym posiadać przynajmniej trochę wiedzy na temat tego co jest napisane o XUL dla projektantów XUL bardziej zaawansowanych.
[edytuj] Obiekty pudełka
Obiekty layout nie są dostępne do manipulowania przez projektantów. Są one wewnętrznymi komponentami layout XUL. Jednakże, XUL dostarcza pewnych pomocnych obiektów, nazywanych obiektami pola, które mogą dostarczać pewnych powiązanych informacji layout. jak implikuje nazwa, są one dostępne dla wszystkich elementów opartych o pola.
Jest kilka podtypów obiektu pola, chociaż generalnie jest używanych tylko parę z nich. Pozostałe mają funkcje które są łatwiej dostępne poprzez metody odwzorowane bezpośrednio do elementu, ponieważ te typy są generalnie używane tylko z określonym elementem. Podstawowy obiekt pola, lub interfejs BoxObject, ma jednak kilka właściwości które są użyteczne dla projektantów XUL.
Podstawowy obiekt pola ma dwie pożyteczne cechy. Po pierwsze możesz wyszukać pozycję i rozmiar elementu XUL jaki wyświetlasz a po drugie możesz określić porządek elementów w polu jakie wyświetlasz, zamiast porządku w jakim są przechowywane w DOM.
[edytuj] Retrieving Position and Size
Obiekt pola dostarcza czterech właściwości, x, y, width, height, dla określenia pozycji i rozmiaru elementu. Współrzędne x i y są związane z lewym górnym rogiem dokumentu w oknie (wyłączając brzeg okna i pasek tytułowy) i są mierzone w pikselach. Własność width i height również są mierzone w pikselach a zawracają one szerokość i wysokość elementu obejmując wypełnianie i brzeg.
Te wartości są zawsze pozycją i rozmiarem aktualnego wyświetlania, więc te wartości będą się różniły jeśli element jest przesuwany lun zmieniany jest jego rozmiar. Na przykład, elastyczny element będzie zmieniał swój rozmiar, a obiekt pola będzie aktualizował odpowiednio swoje wymiary. Pokazuje to poniższy przykład
<button label="Click Me"
oncommand="alert('The width is ' + this.boxObject.width);"/>
Możesz użyć atrybutów width i height do określenia, odpowiednio, szerokości i wysokości elementu. Normalnie, atrybuty te nie będą używane więc ten element określałby odpowiedni rozmiar do odpowiedniej jego zawartości. A zatem, atrybuty te zastępują domyślny rozmiar i stosują określony rozmiar. Odpowiednie własności width i height, mogą być używane do modyfikacji wymiarów elementu w dowolnym czasie, jeśli życzysz sobie wyświetlać element o określonym rozmiarze. Pobranie wartości tych właściwości zwróci rozmiar jeśli został wyraźnie określony. Zauważ że te właściwości będą zwracać pusty łańcuch jeśli atrybuty szerokości i wysokości lub właściwości nie zostały już ustawione. To znaczy, nie możesz pobrać aktualnego rozmiaru z tych właściwości; zamiast tego musisz użyć właściwości obiektu pola.
Może to być trochę mylące, ale KEY pamięta, że własności width i height elementu zwracają rozmiar, jaki został ustawiony w XUL podczas gdy własności width i height obiektu pola zawracają bieżący rozmiar.
[edytuj] Hidden or Collapsed Element
Atrybut hidden ukryje element tak ,że nie będzie wyświetlany. Ponieważ nie jest wyświetlany, wszystkie cztery właściwości pozycji i rozmiaru obiektu pola będą miały wartość 0. Kiedy element jest ukryty, jest usuwany z ekranu a obiekty layout (rozmieszczania) są również z niego usuwane. A zatem, ponieważ nie jest nigdzie wyświetlany, nie będzie miał ani pozycji ani rozmiaru.
Atrybut collapsed będzie miał taki sam wpływ na wizualizację elementu użytkownika, z wyjątkiem tego, że pozostawi element na ekranie i pozostawia obiekty layout (rozmieszczenia) nietknięte, ale zmienia rozmiar elementu na 0.
Oznacza to ,że zarówno elementy hidden i collapsed mają zerową szerokość i wysokość, elementy ukryte mają pozycję x i y również 0, podczas gdy elementy zwinięte zachowają swoją pozycję w oknie.
Dla wyszukania lub modyfikacji stanu ukrycia lub zwinięcia użyj odpowiednich własności jak w poniższym przykładzie.
<script>
function showPositionAndSize()
{
var labelbox = document.getElementById('thelabel').boxObject;
alert("Position is (" + labelbox.x + "," + labelbox.y +
") and size is (" + labelbox.width + "," +
labelbox.height + ")");
}
</script>
<button label="Hide"
oncommand="document.getElementById('thelabel').hidden = true;"/>
<button label="Show"
oncommand="document.getElementById('thelabel').hidden = false;"/>
<button label="Collapse"
oncommand="document.getElementById('thelabel').collapsed = true;"/>
<button label="Uncollapse"
oncommand="document.getElementById('thelabel').collapsed = false;"/>
<button label="Show Position/Size"
oncommand="showPositionAndSize();"/>
<label id="thelabel" value="I am a label"/>
Zauważ, że jeśli ukryjesz lub zwiniesz etykietę, będzie ona traktowana jako ukryta. Będziesz musiał potem odkryć i rozwinąć etykietę aby mogła pojawić się ponownie.
[edytuj] Porządkowane elementów XUL
Obiekt pola może być również użyty dla określania wyświetlania porządku elementów, który może nie być taki sam jak w źródle. Przypomnij sobie ,że właściwości DOM takie, jak childNodes, firstChild, and nextSibling mogą być użyte do nawigowania po drzewie dokumentu. Obiekt pola pozwala również nawigować w podobny sposób ale wyszukuje elementy w kolejności wyświetlania.
Obiekt pola dostarcza kilku własności firstChild, lastChild, nextSibling, previousSibling i parentBox. Funkcje te powinny być samo wyjaśniające przez swoje nazwy. Właściwości te zwracają elementy, na przykład, własność firstChild zwraca pierwszy wyświetlany element potomny. Nie ma odpowiedniej właściwości childNodes dla pola nawigacyjnego; zamiast tego musisz nawigować przez siostrzane właściwości nextSibling lub previousSibling.
W odróżnieniu od nawigowania przez drzewo DOM, elementy ukryte nie są obejmowane kiedy nawigujemy przez obiekty pola. Oznacza to, że dla pola z sześcioma elementami potomnymi gdzie pierwsze dwa są ukryte, właściwość firstChild zwróci trzeci element. Jednak elementy zwinięte są objęte ponieważ są jeszcze wyświetlane ale nie maja rozmiaru. Na przykład kolejnym siostrzanym polem przycisku 1, w kolejnym przykładzie, będzie przycisk 3 ponieważ przycisk 2 jest ukryty. Ale kolejnym siostrzanym polem dla przycisku 3 będzie przycisk 4 ponieważ jest on tylko zwinięty.
<hbox>
<button label="Button 1"
oncommand="alert('Next is: ' + this.boxObject.nextSibling.label);"/>
<button label="Button 2" hidden="true"/>
<button label="Button 3"
oncommand="alert('Next is: ' + this.boxObject.nextSibling.label);"/>
<button label="Button 4" collapsed="true"/>
</hbox>
[edytuj] Box Ordering Attributes
Kiedy pole XUL jest wystawione w oknie, elementy są uporządkowane według kilku własności, na przykład orientacji, ich grupy porządkowej i ich kierunku.
[edytuj] Atrybut orient
Orientacja jest zwykle modyfikowana przez atrybuty orient. jest również odpowiednia właściwość CSS -moz-box-orient, która może być używa w zastępstwie, w zależności od sytuacji. Atrybut ten był wyjaśniany wcześniej w tym rozdziale o polach.
[edytuj] Atrybut ordinal
Atrybut ordinal elementu może być zastosowany do określenia grupy porządkowej tego elementu, lub możesz użyć właściwości CSS -moz-box-ordinal-group.
Elementy z niższymi wartościami porządkowymi są umieszczone w polu przed elementami z wyższymi wartościami porządkowymi. Na przykład jeśli jedne element ma liczbę porządkową 2, będzie umieszczony przed elementem z liczbą porządkową 3 lub wyższą ale po elemencie z liczbą porządkową 1. Wartością domyślną, jeśli nie został określony porządek, jest 1. Oznacza to ze jeśli chcesz zmienić porządek wyświetlania elementów, często będziesz potrzebował modyfikacji liczb porządkowych kilku elementów.
Modyfikacja liczby porządkowej nie jest wykonywana powszechnie ponieważ zazwyczaj elementy są umieszczone w różnym porządku w źródle. Może być użyta do przestawienia później pozycji bez modyfikowania DOM. Demonstruje to poniższy przykład.
<hbox> <button label="One" oncommand="this.ordinal++;"/> <button label="Two" oncommand="this.ordinal++;"/> <button label="Three" oncommand="this.ordinal++;"/> </hbox>
Jeśli naciśniesz pierwszy przycisk, jego liczb porządkowa zwiększy się o jeden, z 1 do 2. Pojawi się na końcu wiersza ponieważ inne przyciski maja liczbę porządkową 1. Jeśli naciśniesz drugi przycisk, jego liczba porządkowa zwiększy się o jeden i będzie przeniesiony na koniec wiersza. Pozycje z tą samą wartością porządkową pojawią się w tym samym porządku jak w źródle. Jeśli potem naciśniesz ponowie przycisk oznaczony One, jego liczba porządkową zwiększy się do 3 i zostanie przeniesiony na koniec. W końcu, naciśnięcie przycisku oznaczonego Three zwiększy jego liczbę porządkową na 2 i pojawi się pomiędzy pozostałymi dwoma przyciskami.
[edytuj] Atrybut dir
Końcowym atrybutem porządkowym pola jest atrybut dir, lub właściwość -moz-box-direction CSS. Jeśli jest ustawiony na reverse, wszystkie elementy potomne w polu lub wyświetlane, są w odwróconym porządku. W polu poziomym, elementy będą wyświetlane od prawej do lewej a w polu pionowym, elementy będą wyświetlane od dołu do góry. Tu mamy przykład:
<hbox dir="reverse"> <button label="Left"/> <button label="Center"/> <button label="Right"/> </hbox>
Nawigowanie przez nodes (węzły) używając porządkowania obiektu pola zwróci elementy w kolejności w jakiej są wyświetlane stanowiąc o porządku tworzenia regulacji. Zatem, jeśli zmienisz liczbę porządkową elementu, będzie on miał inną pozycję w porządku pola. Odwrócenie kierunku jednak nie zmienia porządku pola.
Następnie dowiemy się jak stosujemy obiekty XPCOM z XUL i skryptami.