Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

Dodawanie własności

 

UWAGA: Tłumaczenie tej strony nie zostało zakończone.
Może być ona niekompletna lub wymagać korekty.
Chcesz pomóc? | Dokończ tłumaczenie | Sprawdź ortografię | Więcej takich stron+.
W tym artykule dowiemy się jak dodać ustawienia właściwości użytkownika do elementów XBL.

Interfejs XBL

JavaScript i DOM dają nam dostęp do pobrania i ustawienia własności elementów. Z XBL, możemy zdefiniować własne właściwości, dla elementów przez nas tworzonych. Mamy możliwość dodania własnych nazw meteod. To jest wszystko czego byś potrzebował aby dostać referencję do elementu, (używając getElementById lub podobnych funkcji) i następnie pobranie lub ustawienie dodatkowych właściwości i nazwaniu jego metod.

Tutaj są trzy typy pozycji, które dodaj.

  • Pola są użyte do podtrzymania prostych wartości.
  • Właściwości can also be used to hold a value but may have code execute when an attempt is made to retrieve or modify the value.
  • Methods are functions which may be executed.

Wszystkie trzy są zdefiniowane wewnątrz implementation elementu, który powinien być dzieckiem binding elementem. Wewnątrz implementacji, definiujesz swoje własne field, property i method elementów, dla każdej jednej, którą wybierzesz. Składnia główna wygląda następująco:

<binding id="element-name">
  <content>
    -- content goes here --
  </content>
  <implementation>
    <field name="field-name-1"/>
    <field name="field-name-2"/>
    <field name="field-name-3"/>

    <property name="property-name-1"/>
    <property name="property-name-2"/>
    <property name="property-name-3"/>
    .
    .
    .
    <method name="method-name-1">
      -- method content goes here --
    </method>
    .
    .
    .
  </implementation>
</binding>

Pola

Każde pole jest definiowane używając elementów field. Często, pola będą odpowiadać atrybutom położonym wewnątrz elementu, są to label lub disabled, ale on do not have to.

Atrybut name w field (polu) elementu jest użyty do wskazania nazwy pola. Możesz użyć nazwę ze skryptu aby pobrać i ustawić wartość. Przykład poniżej tworzy przycisk, który generuje i ukrywa losową liczbę. You can retrieve this same number multiple times by getting the number property from the button. Most of the work here is done in the oncommand handlers. Later, we'll find out how to move this to XBL.

XUL:

<box id="random-box" class="randomizer"/>

<button label="Generate"
           oncommand="document.getElementById('random-box').number=Math.random();"/>
<button label="Show"
           oncommand="alert(document.getElementById('random-box').number)"/>

XBL:

<binding id="randomizer">
  <implementation>
    <field name="number"/>
  </implementation>
</binding>

Pola number zostały zdefiniowane w wiązaniach, które przechowują random number. Dwa dodatkowe przyciski ustawiamy i pobieramy wartości tych pól. Składnia jest bardzo podobna do pobieranej i wysyłanej do własności języka HTML. W tym przykładzie, no content has been placed inside either the XUL box or its definition in XBL, which is perfectly valid.

Ten przykład nie jest do końca poprawny, ponieważ polu nie jest przypisana wartość domyślna. Aby to zrobić, dodaj domyślną wartość jako zawartość zakładki field. Na przykład:

<field name="number">
  25
</field>

To przypisze wartość 25 jako wartość domyślną pola liczbowego. W rzeczywistości zamiast tego możesz wpisać skrypt wewnątrz zakładki field, który oszacuje domyślną wartość. Może się to okazać konieczne, jeśli wartość musi być obliczona. Na przykład, następującemu polu przypisana jest wartość domyślna równa aktualnemu czasowi:

<field name="currentTime">
  new Date().getTime();
</field>

Własności

Czasem będziesz chciał odświeżyć dane, dołączone do własności, albo chciałbyś, żeby wartość była obliczana dynamicznie, gdy o to poprosi użytkownik. Na przykład, jeśli masz własność, która przechowuje aktualny czas, będziesz pewnie chciał, żeby jej wartość była generowana w czasie rzeczywistym. W takim przypadku musisz użyć zakładki property zamiast zakładki field. Jego składnia jest podobna, ale ma inne dodatkowe cechy.

Onget Attribute and Onset Attribute

Możesz użyć atrybutu onget and onset aby wywołać kod, gdy własność jest odzyskiwana lub modyfikowana. Dodaj każdy atrybut do elementu property i ustaw jej wartość na skrypt, który albo pobiera albo ustawia wartość danej własności.

Na przykład, możesz przypisać skrypt do wartości onget aby obliczyć aktualny czas. Gdy tylko skrypt będzie chciał uzyskać dostęp do wartości tej własności, wywołany zostanie skrypt onget, aby odzyskać wartość. Powinien on zwrócić wartość, która będzie uważana za wartość tej własności.

Trener onset jest podobny, ale jest wywoływany wtedy, gdy skrypt próbuje przypisać nową wartość danej własności. Ten skrypt powinien przechowywać gdzieś wartość albo uaktualniać ją. Na przykład niektóre własności mogą przechowywać tylko liczby. Próba przypisania tekstu do takiej własności powinna być przerwana.

<property name="size"
          onget="return 77;"
          onset="alert('Changed to:'+val);"/>

Ta własność będzie zawsze zwracała 77, przy próbie pobrania. Przy próbie ustawienia wartości, wyświetli się komunikat ostrzegawczy, który pokaże jaką wartość przypisano własności. Specjalna zmienna val przechowuje wartość, która powinna być przypisana własności. Użyj tego do uaktualnienia jej lub przechowywania.

Następujący fragment opisuje typową sytuację:

Są dwa elementy: jeden nazywa się "banana", a drugi "orange". Każdy ma odpowiednią własność nazwaną "size" (rozmiar). Napiszmy następujący skrypt:

banana.size = orange.size;
  1. Skrypt onget jest wywoływany dla własności rozmiaru dla "orange". Skrypt oblicza wartość i ją zwraca.
  2. Uchwyt onset własności "size" obiektu "banana" jest wywoływany. Skrypt użyje wartości znajdującej się w zmiennej val i przypisze ją własności "size" obiektu "banana".

Zauważmy, że w odróżnieniu od pola, własność nie przechowuje wartości. Próba ustawienia własności, która nie posiada trenera onset spowoduje wyświetlenie błędu. Często będziesz korzystał z oddzielnego pola, aby przechowywać wartość własności. Równie często sprawia się, że własność odpowiada atrybutowi elementu zdefiniowanego przez XBL. Następujący przykład mapuje własność na atrybut pewnego elementu:

<property name="size"
          onget="return this.getAttribute('size');"
          onset="this.setAttribute('size',val);"
/>

Gdy tylko skrypt próbuje pobrać wartość własności, pobiera ją z atrybutu elementu o tej samej nazwie. Natomiast gdy próbuje ustawić jej wartość, jest ona przypisywana do atrybutu tego elementu. Jest to bardzo wygodne, ponieważ wtedy możesz modyfikować własność lub atrybut i obydwoje będą miały taką samą wartość.

Getter Element and Setter Element

Możesz użyć alternatywnej składni dla atrybutów onget i onset, która jest przydatna, jeśli skrypt jest dłuższy. Możesz wymienić atrybut onget na element potomny nazywany getter. Podobnie, możesz wymienić atrybut onset na element setter. Poniższy przykład ilustruje tą zamianę:

<property name="number">
  <getter>
    return this.getAttribute('number');
  </getter>
  <setter>
    var v = parseInt(val,10);
    if (!isNaN(v)) {
      this.setAttribute('number',''+v);
    }
  </setter>
</property>

Własność w tym przykładzie będzie mogła przechowywać wyłącznie liczby całkowite. Jeśli inne cyfry lub litery będą wpisane, zostaną usunięte. Jeśli nie będzie żadnych cyfr, wartość pozostanie niezmieniona. Jest to wykonywane przez część kodu wewnątrz elementu setter. Prawdziwa wartość własności jest przechowywana w atrybucie number.

Możesz używać obu składni do tworzenia uchwytów pobrania i ustawienia.

Atrybut tylko do odczytu

Utwórz pole z własnościami 'Tylko do odczytu', dodając atrybut readonly do znacznika pola (field) lub własności znacznika (property) i ustawienie go na true. Próbując ustawić wartość własności 'Tylko do odczytu' zakończone nie powodzeniem.

W następnym artykule zobaczymy jak dodać metody do definicji elementu XBL.

Autorzy i etykiety dokumentu

 Autorzy tej strony: teoli, Mgjbot, Ptak82, Bedi, Julcia r
 Ostatnia aktualizacja: teoli,