Changes

Jump to: navigation, search

XBL

1,240 bytes added, 12:03, 6 October 2006
How Does XBL Work?
=What is XBL?=
 XBL stands for eXtensible Bindings Language, which is an XML language that is used for declaring the behavious behaviours of XUL widgets. Bindings can be attached to elements using either cascading stylesheets or the document object model. The element that the binding is attached to, called the bound element, acquires the new behavior specified by the binding.
=What Does XBL Do?=
Basically, XBL is a langauge that describes a set of bindings that can be attached and bound to elements on the screen. When bound, the binding implements new methods and properties to the associated element. In essence, the widgets on the screen are layed out using XUL and then given functionality using XBL.
Basically, =How Does XBL Work?=::The XBL file used in developing XUL based applications is used to provide a langauge that describes a specified set of bindings that can be attached and bound functionality to individual elements on the screen. When bound, the binding implements new methods and properties to the associated element. In essence, the widgets on the that are rendered onto your screen are layed out using XUL and then given functionality using XBL.
=How does ::In order to understand how XBL work?=works we must first understand the XUL ecosystem and the design pattern on which it is based upon. ==XBL Elements==::Let us observe the figure below::'''Bindings'''::The '''Bindings''' element contains many Binding elements[[Image:Xbl_model.gif|http::Also can store contain script and stylesheet elements//www.mozilla.org/docs/xul/xulnotes/xbl_model.gif]]::'''DTD decleration''':[http:<pre><!ELEMENT bindings ( binding* ) > [ where * indicates zero or more of the binding element]</pre>/www.mozilla.org/docs/xul/xulnotes/xbl_model.gif http::'''XML representation'''//www.mozilla.org/docs/xul/xulnotes/xbl_model.gif]::<pre><Within a XUL, classes of elements are skinned with the definitions in the CSS file. However the definitions in the CSS file are just pointers to the bindings in the XBL.Bindings that are used to give the elements functionality or perhaps add or make change in their property..><binding id="binding1"><binding><binding id="binding2"><binding></bindings></pre>
:'''Binding'''::The design pattern used is '''Bindingindirection (Delegation pattern)''' element describes where one object relies upon another to provide a single specified set of functionality. In this case the CSS file relies on the bindings in the XBL bindingfile to provide it with definitions and functionalities for the elements.::The '''Binding''' element This makes skinning XUL applications easy. All one has the ability to add additional methods do is to an element.::The '''Binding''' element has change the bindings in the ability XBL file in order to make changes to add additional or modify the properties behaviour of an elementin the application interface.
=What's in a XBL file?=
*An XBL file is just an ordinary XML file.
*An XBL file can contain many binding elements.
<pre>
<!ENTITY % binding-content ?xml version="1.0"(content?,implementation?,handlers?)> <bindings id="xulBindings" xmlns="http://www.mozilla.org/xbl" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <!ELEMENT binding %binding-id="thumb" extends="xul:box"> <content;> <!ATTLIST bindingxul:spring flex="1"/> id ID #REQUIRED <xul:image inherits="src"/> extends CDATA #IMPLIED <xul:spring flex="1"/> display CDATA #IMPLIED applyauthorstyles false #IMPLIED </content> styleexplicitcontent false #IMPLIED</binding>
</pre>
This syntax example is borrowed from :[http://www.mozilla.org/docs/xul/xulnotes/xulnote_xbl.html#syntax http://www.mozilla.org/docs/xul/xulnotes/xulnote_xbl.html#syntax].
 
=Resources/Examples=
==API Reference==
 
The [http://www.mozilla.org/projects/xbl/xbl.html Mozilla Webpage] has a list of Tags and examples that document the usage of XBL.
 
==Test Cases==
===Example 1===
[http://developer.mozilla.org/en/docs/CSS:Getting_Started:XBL_bindings XBL bindings Example]
===Example 2===
In this example, we can use XUL to define the layout of user interface and then use XBL to change the widgets functionality. <br/><br/>
<box class="okcancelbuttons"/>
</window>
</pre>
<pre>
button[type="okcancelbuttons"] {
-moz-binding: url("http://www.mozilla.org/xbl/htmlBindings.xml#okcancel");
}
</pre>
</bindings>
</pre>
 
==API Reference/Tutorials==
The [http://www.mozilla.org/projects/xbl/xbl.html Mozilla Webpage] has a list of Tags and examples that document the usage of XBL.
 
[http://www.mozilla.org/docs/xul/xulnotes/xulnote_xbl.html An XBL Primer]
==Newsgroup==
 
[http://groups.google.ca/group/netscape.public.mozilla.xbl netscape.public.mozilla.xbl]
1
edit

Navigation menu