Dodawanie metod

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

« Poprzedni Następny »

Następnie, znajdziemy w jaki sposób dodać metody użytkownika definiujące elementy XBL.

Metody

Dodatkowo dodając własności skryptu do definiowanego elementu XBL, możemy dodać metody. Te metody są nazywamy od skryptu. Metody są funkcjami obiektów, takie jak 'window.open()'. Możemy definiować zwyczajne metody dla elementów używając elementów method. Generalna składnia metod jest następująca:

<implementation>
  <method name="method-name">
    <parameter name="parameter-name1"/>
    <parameter name="parameter-name2"/>
    .
    .
    .
    <body>
      -- method script goes here --
    </body>
  </method>
</implementation>

Deklaracja metod odbywa się wewnątrz implementation elementu, jak the fields and properties do. Element method stanowią dwa typy elementów potomnych, parameter elementów które opisuje parametry metody oraz body, które są zawartością skryptu dla metod.

Wartość atrybutu name staje się nazwą metody. Podobnie, atrybuty name w elementach parameter stają się nazwą każdego parametru. Każdy element parameter jest używany do deklaracji jednego parametru na metodę. Na przykład, jeśli metoda posiada trzy parametry, co będzie trzema elementami parameter. Nie musisz go posiadać, w którym wypadku metoda będzie bez parametrów.

Element body stanowi skrypt, który jest wykonywany w momencie kiedy nazywana jest metoda. Nazwy parametrów są zdefiniowane jako zmienne w skrypcie, jeśli posiadają one przepustkę jako parametry. Na przykład, nadchodzące funkcje JavaScript będą zapisywane jako ulubione programy:

function getMaximum(num1,num2)
{
  if (num1<=num2) return num2;
  else return num1;
}

XBL:

<method name="getMaximum">
  <parameter name="num1"/>
  <parameter name="num2"/>
  <body>
    if (num1&lt;=num2) return num2;
    else return num1;
  </body>
</method>

This function, getMaximum, returns the largest of the values, each passed as a parameter to the method. Note that the less-than symbol has to be escaped because otherwise it would look like the start of a tag. You can also use a CDATA section to escape the entire block of code. You can call the method by using code such as 'element.getMaximum(5,10)' where element is a reference to an element defined by the XBL containing the getMaximum method. (The bound element.)

The parameter tag allows you to define parameters for a method. Because Mozilla uses JavaScript as its scripting language, and JavaScript is a non-typed language, you do not need to specify the types of the parameters. However, in the future, other languages may be used with XBL.

Dostęp do jakichkolwiek wartości

There may be times when you want to modify some aspect of the elements defined in the content element, either from a method body or elsewhere. These elements are created anonymously and are not accessible from the regular DOM functions. They are hidden so that developers do not need to know how the element is implemented to use it. However, there is a special way of getting this anonymous content.

Elements with an XBL behavior attached to them have a special property which holds an array of the anonymous child elements inside it. Each element of the array stores each direct child element of the XBL-defined element. This special property cannot be accessed directly. Instead, you must call the document's getAnonymousNodes() method:

var value=document.getAnonymousNodes(element);

Here, 'element' should be set to a reference to the element that you want to get the anonymous content of. The function returns an array of elements, which is the anonymous content. To get elements below that, you can use the regular DOM functions because they aren't hidden. Note that it is possible for an XBL-bound element to be placed inside another one, in which case you will have to use the getAnonymousNodes() function again.

The following example creates a row of buttons:

<binding id="buttonrow">
  <content>
    <button label="Yes"/>
    <button label="No"/>
    <button label="Sort Of"/>
  </content>
</binding>

To refer to each button, you can use the getAnonymousNodes() function, passing it a reference to the element the binding is bound to as the parameter. In the returned array, the first button is stored in the first array element ('getAnonymousNodes(element)[0]'), the second button is stored in the second array element and the third button is stored in the third array element. For code inside a binding method, you can pass 'this' as the parameter to getAnonymousNodes().

The next example can be used to create text with a label. The method 'showTitle' can be used to show or hide the label. It works by getting a reference to the title element using the anonymous array and changing the visibility of it.

XUL:

<box id="num" class="labeledbutton" title="Number of Things:" value="52"/>

<button label="Show" oncommand="document.getElementById('num').showTitle(true)"/>
<button label="Hide" oncommand="document.getElementById('num').showTitle(false)"/>

XBL:

<binding id="labeledbutton">
  <content>
    <xul:label xbl:inherits="value=title"/>
    <xul:label xbl:inherits="value"/>
  </content>
  <implementation>
    <method name="showTitle">
      <parameter name="state"/>
      <body>
        if (state) document.getAnonymousNodes(this)[0].
          setAttribute("style","visibility: visible");
        else document.getAnonymousNodes(this)[0].
          setAttribute("style","visibility: collapse");
      </body>
    </method>
  </implementation>
</binding>

Two buttons added to the XUL have oncommand handlers which are used to change the visibility of the label. Each calls the 'showTitle' method. This method checks to see whether the element is being hidden or shown from the 'state' parameter that is passed in. In either case, it grabs the first element of the anonymous array. This refers to the first child in the content element, which here is the first label widget. The visibility is changed by modifying the style on the element.

Accessing from Inside the Anonymous Content

To go the other way, and get the bound element from inside the anonymous content, use the DOM parentNode property. This gets the parent element of an element. For example, we could move the Show and Hide buttons into the XBL file and do the following:

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

<binding id="labeledbutton">
  <content>
    <xul:label xbl:inherits="value=title"/>
    <xul:label xbl:inherits="value"/>
    <xul:button label="Show" oncommand="parentNode.showTitle(true);"/>
    <xul:button label="Hide" oncommand="parentNode.showTitle(false);"/>
  </content>
  <implementation>
    <method name="showTitle">
      <parameter name="state"/>
      <body>
        if (state) document.getAnonymousNodes(this)[0].setAttribute("style","visibility: visible");
        else document.getAnonymousNodes(this)[0].setAttribute("style","visibility: collapse");
      </body>
    </method>
  </implementation>
</binding>

The oncommand handlers here first get a reference to their parent element. This is not the content element but the XUL element that the XBL is bound to. (In this example, it is the box with the labeledbutton class). Then, the 'showTitle' method is called, which functions as it did before.

Custom properties and methods are added only to the outer XUL element the XBL is bound to. None of the elements declared inside the content tag have these properties or methods. This is why we have to get the parent first.

The children of an element placed in the XUL file can be retrieved in the normal way and don't move even if you use the children tag. For example:

XUL:

<box id="outer" class="container">
  <button label="One"/>
  <button label="Two"/>
  <button label="Three"/>
  <button label="Four"/>
</box>

XBL:

<binding id="labeledbutton">
  <content>
    <description value="A stack:"/>
    <stack>
      <children/>
    </stack>
  </content>
</binding>

If you use the DOM functions such as childNodes to get the children of an element, you'll find that the XUL box, the one with the id of outer, has 4 children. These correspond to its four buttons, even though those buttons are drawn inside the stack. The stack has only one child, the children element itself. The length of the anonymous array of the outer box is two, the first element the description element and the second the stack element.

Konstruktory i destruktory

XBL supports two special methods created with separate tags, constructor and destructor. A constructor is called whenever the binding is attached to an element. It is used to initialize the content such as loading preferences or setting the default values of fields. The destructor is called when a binding is removed from an element. This might be used to save information.

There are two points when a binding is attached to an element. The first occurs when a window is displayed. All elements that have XBL-bound content will have their constructors invoked. The order that they are called in should not be relied upon, as they are loaded from various files. The window's onload handler is not called until after all the bindings have been attached and their constructors finished. The second point a binding is attached is if you change the -moz-binding style property of an element. The existing binding will be removed, after its destructor is called. Then, the new binding will be added in its place and its constructor invoked.

The script for a constructor or destructor should be placed directly inside the appropriate tag. There should only be at most one of each per binding and they take no arguments. Here are some examples:

<constructor>
  if (this.childNodes[0].getAttribute("open") == "true"){
    this.loadChildren();
  }
</constructor>

<destructor action="saveMyself(this);"/>

Następny artykuł pokaże jak dodać funkcje obsługi zdarzenia do definiowanego elementu XBL.