Label and Textbox

HTML has an object named input to allow the user to enter data, but the equivalent XUL widget is named textbox.
Contrary to HTML, textbox can comprise several lines once the attribute multiline is added to the declaration:

<textbox multiline= " true "/>

Attributes of textbox

multiline

Allows several lines. One must distinguish the number of possible lines and the number of lines displayed which depends on the attribute rows. When the first exceeds the second, a vertical scroll bar appears on the right.

rows

The number of lines displayed at the beginning. This number does not limit the number of lines you can enter. Note that an additional line is displayed at bottom to make room to the horizontal scroll bar when the length of the text exceeds the width of the field.

value

Another attribute coming from HTML, indicates the default text, displayed at start in the text field.

maxlength

Size permitted of the text inside the field.

size

The width in number of characters of the text field.

timeout

Used in conjunction with the timed type (see below).

Type of textbox

There are four types of text input fields. In addition to the regular type, three others can be specified by the type attribute:

autocomplete

Field allowing the functionality of auto-completion.

password

Similar to the HTML attribute, a field of password does not display the characters in echo but a star instead.

timed

Used in conjunction with the timeout attribute it indicates that an event must be started after a given delay when something is entered in the text field.

Label

The tag label is often used in conjunction with textbox, it is a simple line of text to be displayed.

<label value= "My displayed text"/>

The difference with the description tag is that label can be associated to another component thanks to the control attribute to which one assigns the id of this component.
For example if a textbox has a identifier "tb", the control attribute of label will be assigned:

<label control="tb" value= "My text"/>

Example

Example of text input field with a single line at start but several allowed for the entered text.

<label control="tb" value="Enter a text:" />
<textbox id="tb" multiline="true" rows="1" size="40" value="empty" />
<button label="Display" oncommand="document.getElementById('tb').value);" />

We have associated a button to the form for testing the use of the text entered in the field, in fact one displays it in a JavaScript message box.
The access to the contents of the field is obtained with the DOM's method getElementByID, which is classical JavaScript code. We will see the use of the DOM with XUL in a chapter to come.

• Demo code.zip.

//create a XUI document and insert XUI elements into it       
        String dtdPath = Application.getPath() + "/doctypes/xui/xui.dtd";
        Document xuiDoc = Application.openDocument("", 0x100, "", "", dtdPath);    
       String defaultValue ="equation";

 Range range = ((ADocument) xuiDoc).getInsertionPoint();
        ((ARange) range).insertParsedString(
            "<window orient='vertical' align='center' modal='true' title='Equation Name'>"
                + "<grid columns='2'>"
                + "<label id='eqLabel' label='&N_ame:' control='Name'/>"
                 + "<textbox id='eqName' width='200'>"
                 + "<value>" + defaultName + "</value>"
                 + "</textbox>"                 
                 + "</grid>"                
                 + "<spacer resize='none' height='10'/>"
                 + "<box orient='horizontal' pack='center'>"
                + "<button id='ok' label='OK' typ='accept'/>"
                + "<button id='cancel' label='Cancel' type='cancel'/>"
                + "</box>"
                + "</window>");
        range.detach();

        
        //create a XUI dialog from the XUI document          
        Window xuiWin = Application.createDialogFromDocument(xuiDoc);        
        
        // locate the nodes by using their IDs         
        final Node okNode = xuiDoc.getElementById("ok");
        final Node cancelNode = xuiDoc.getElementById("cancel");
        final Node textBoxNode = xuiDoc.getElementById("eqName");
        final Node valueNode = textBoxNode.getFirstChild();
        final Node equationNode = valueNode.getFirstChild(); 


   EventListener okListener = new EventListener() {
            public void handleEvent(Event event) {
                event.stopPropagation();                
                if (valueNode != null ) {                    
                    //get the value for the equation name
                    String nodeValue = equationNode.getNodeValue();                  }

        }
        };

<textbox uri="?" value="?apellidos" id="apellidos" disabled = "true" />

document.getElementById("apellidos").removeAttribute("disabled");

x = document.getElementById("apellidos")
x.setAttribute("disabled", "true")

echo(x);