mozilla
Your Search Results

    XUL user interfaces Redirect 1

    This page illustrates Mozilla's specialized language for creating user interfaces.

    You create a simple demonstration that runs in your Mozilla browser.

    Information: User interfaces

    Although HTML has some support for user interfaces, it does not support all the features that you need to make a standalone application.

    Mozilla overcomes this limitation by providing a specialized language for creating user interfaces: XUL (XML User-interface Language, usually pronounced like "zool").

    In XUL, many common user interface features are built in. For example, XUL provides specialized windows like dialogs and wizards, as well as status bars, menus, tool bars, and even browsers.

    More specialized features can be built from parts by using XUL together with other technologies that you have seen in this tutorial: CSS style, JavaScript code, and XBL bindings.

    Like other XML-based languages, XUL uses CSS stylesheets.

    More details
    For more information about XUL user interfaces, see the XUL page in this wiki.

    Action: A XUL demonstration

    Make a new XUL document as a plain text file, doc7.xul. Copy and paste the content from here, making sure that you scroll to get all of it:

    <?xml version="1.0"?>
    <?xml-stylesheet type="text/css" href="style7.css"?>
    <!DOCTYPE window>
    
    <window
      xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
      title="CSS Getting Started - XUL demonstration"
      onload="init();">
    
    <script type="application/javascript" src="script7.js"/>
    
    <label class="head-1" value="XUL demonstration"/>
    
    <vbox>
    
      <groupbox class="demo-group">
        <caption label="Day of week calculator"/>
        <grid>
          <columns>
            <column/>
            <column/>
            </columns>
          <rows>
            <row>
              <label class="text-prompt" value="Date:" 
                accesskey="D" control="date-text"/>
              <textbox id="date-text" type="timed" 
                timeout="750" oncommand="refresh();"/>
              </row>
            <row>
              <label value="Day:"/>
              <hbox id="day-box">
                <label class="day" value="Sunday" disabled="true"/>
                <label class="day" value="Monday" disabled="true"/>
                <label class="day" value="Tuesday" disabled="true"/>
                <label class="day" value="Wednesday" disabled="true"/>
                <label class="day" value="Thursday" disabled="true"/>
                <label class="day" value="Friday" disabled="true"/>
                <label class="day" value="Saturday" disabled="true"/>
                </hbox>
              </row>
            </rows>
          </grid>
        <hbox class="buttons">
          <button id="clear" label="Clear" accesskey="C" 
            oncommand="clearDate();"/>
          <button id="today" label="Today" accesskey="T"
            oncommand="setToday();"/>
          </hbox>
        </groupbox>
    
      <statusbar>
        <statusbarpanel id="status"/>
        </statusbar>
    
    </vbox>
    
    </window>
    

    Make a new CSS file, style7.css. Copy and paste the content from here, making sure that you scroll to get all of it:

    /*** XUL demonstration ***/
    window {
      -moz-box-align: start;
      background-color: -moz-dialog;
      font: -moz-dialog;
      padding: 2em;
      }
    
    .head-1 {
      font-weight: bold;
      font-size: 200%;
      padding-left: 5px;
      }
    
    
    /* the group box */
    .demo-group {
      padding: 1em;
      }
    
    .demo-group grid {
      margin-bottom: 1em;
      }
    
    .demo-group column {
      margin-right: .5em;
      }
    
    .demo-group row {
      margin-bottom: .5em;
      }
    
    .demo-group .buttons {
      -moz-box-pack: end;
      }
    
    
    /* the day-of-week labels */
    .day {
      margin-left: 1em;
      }
    
    .day[disabled] {
      color: #777;
      }
    
    .day:first-child {
      margin-left: 4px;
      }
    
    
    /* the left column labels */
    .text-prompt {
      padding-top: .25em;
      }
    
    
    /* the date input box */
    #date-text {
      max-width: 8em;
      }
    
    
    /* the status bar */
    statusbar {
      width: 100%;
      border: 1px inset -moz-dialog;
      margin: 4px;
      padding: 0px 4px;
      }
    
    #status {
      padding: 4px;
      }
    
    #status[warning] {
      color: red;
      }
    

    Make a new text file, script7.js. Copy and paste the content from here, making sure that you scroll to get all of it:

    // XUL demonstration
    
    var dateBox, dayBox, currentDay, status; // elements
    
    // called by window onLoad
    function init() {
      dateBox = document.getElementById("date-text")
      dayBox = document.getElementById("day-box")
      status = document.getElementById("status")
      setToday();
      }
    
    // called by Clear button
    function clearDate() {
      dateBox.value = ""
      refresh()
      }
    
    // called by Today button
    function setToday() {
      var d = new Date()
      dateBox.value = (d.getMonth() + 1)
        + "/" + d.getDate()
        + "/" + d.getFullYear()
      refresh()
      }
    
    // called by Date textbox
    function refresh() {
      var d = dateBox.value
      var theDate = null
    
      showStatus(null)
      if (d != "") {
        try {
          var a = d.split("/")
          var theDate = new Date(a[2], a[0] - 1, a[1])
          showStatus(theDate)
          }
        catch (ex) {}
        }
      setDay(theDate)
      }
    
    // internal
    function setDay(aDate) {
      if (currentDay) currentDay.setAttribute("disabled", "true")
      if (aDate == null) currentDay = null
      else {
        var d = aDate.getDay()
        currentDay = dayBox.firstChild
        while (d-- > 0) currentDay = currentDay.nextSibling
        currentDay.removeAttribute("disabled")
        }
      dateBox.focus();
      }
    
    function showStatus(aDate) {
      if (aDate == null) {
        status.removeAttribute("warning")
        status.setAttribute("label", "")
        }
      else if (aDate === false || isNaN(aDate.getTime())) {
        status.setAttribute("warning", "true")
        status.setAttribute("label", "Date is not valid")
        }
      else {
        status.removeAttribute("warning")
        status.setAttribute("label", aDate.toLocaleDateString())
        }
      }
    

    To see the result exactly as intended, use the default theme in your browser. If you use a different theme, it changes some user-interface styles and the demonstration might look strange.

    Open the document in your Mozilla browser and use the interface.

    This wiki does not support XUL and JavaScript in pages, so it is not possible to show the demonstration here. It looks something like this:

    XUL demonstration

    Day of week calculator

    Date: 6/27/2005
    Day: Sunday Monday Tuesday Wednesday Thurdsay Friday Saturday
     

    Clear Today

    June 27, 2005

    Notes about this demonstration:

    • The XUL document links the stylesheet as usual, and it also links the script.
    • The script is not important in this demonstration.
    • Much of the style that you see is determined by your browser's theme.

    Examine the document's stylesheet to ensure that you understand all the rules there. If there is a rule that you do not understand, comment it out and refresh your browser to see the effect on the document.

    Challenge
    Use the DOM Inspector tool to examine the Date textbox. It is made up of other elements that are generated by its XBL binding.

    Discover the class of its html:input element. This is the element that actually receives user input.

    Using this knowledge, add a rule to the stylesheet that makes the background of the Date box pale blue when it has keyboard focus (but white when keyboard focus is somewhere else).

    What next?

    If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.

    In this demonstration, you see the standard rectangular shapes that are common to most user interfaces. Mozilla also supports a specialized graphics language for creating shapes, using CSS stylesheets to specify the style. The next page demonstrates this: SVG and CSS.

    Document Tags and Contributors

    Contributors to this page: Sheppy
    Last updated by: Sheppy,