Open main menu

CDOT Wiki β

Changes

XBL

1,367 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 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 stands for eXtensible Bindings LanguageDo?=Basically, which XBL is an XML language a langauge that is used for declaring the behavious describes a set of XUL widgets. Bindings bindings that can be attached and bound to elements using either cascading stylesheets or on the document object modelscreen. The element that When bound, the binding is attached implements new methods and properties to, called the bound associated element. In essence, acquires the new behavior widgets on the screen are layed out using XUL and then given functionality using XBL. =How Does XBL Work?=::The XBL file used in developing XUL based applications is used to provide a specified by the bindingset of functionality to individual elements that are rendered onto your screen.
=What Does ::In order to understand how XBL Do?=works we must first understand the XUL ecosystem and the design pattern on which it is based upon. ::Let us observe the figure below::::[[Image:Xbl_model.gif|http://www.mozilla.org/docs/xul/xulnotes/xbl_model.gif]]:::[http://www.mozilla.org/docs/xul/xulnotes/xbl_model.gif http://www.mozilla.org/docs/xul/xulnotes/xbl_model.gif]::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.
Basically, XBL ::The design pattern used is '''indirection (Delegation pattern)''' where one object relies upon another to provide a langauge that describes a specified set of functionality. In this case the CSS file relies on the bindings that can be attached in the XBL file to provide it with definitions and bound functionalities for the elements. This makes skinning XUL applications easy. All one has to elements on do is to change the screen. When bound, bindings in the binding implements new methods and properties XBL file in order to make changes to the associated behaviour of an element. In essence, the widgets on in the screen are layed out using XUL and then given functionality using XBLapplication interface.
=How does What's in a XBL workfile?===*An XBL Elements==file is just an ordinary XML file.:'''Bindings'''::The '''Bindings''' element contains *An XBL file can contain many Binding binding elements.'''DTD decleration'''
<pre>
<!ELEMENT bindings ( binding* ) ?xml version="1.0"?> [ where * indicates zero or more of the binding element] <bindings id="xulBindings" xmlns="http://www.mozilla.org/pre>xbl"'''XML representation''' xmlns:html="http://www.w3.org/1999/xhtml"<pre><bindings xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <binding id="binding1thumb" extends="xul:box"> <content> <xul:spring flex="1"/> <xul:image inherits="src"/> <xul:spring flex="1"/> </content>
</binding>
<binding id="binding2">
</binding>
</bindings>
</pre>
 
:'''Binding'''
::The '''Binding''' element describes a single XBL binding and can add (anonymous content, fields, properties, methods and event handlers) to any html or xml element.
<pre>
<!ENTITY % binding-content "(content?,implementation?,handlers?)">
<!ELEMENT binding %binding-content;>
<!ATTLIST binding
id ID #REQUIRED
extends CDATA #IMPLIED
display CDATA #IMPLIED
applyauthorstyles false #IMPLIED
styleexplicitcontent false #IMPLIED
>
</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]
Moe
1
edit
Retrieved from "https://wiki.cdot.senecapolytechnic.ca/wiki/Special:MobileDiff/4683...4856"