DWC: Labels

Overview

In web apps, the <label> element represents a caption for a specific element in a user interface. In the DWC, you can create label elements by setting the "label" attribute on a BBjControl with the setAttribute method.

Usage

To add a label on a control, use setAttribute("label", "<label text>").

wnd! = BBjAPI().openSysGui("X0").addWindow("DWC Labels", $01100000$)
webManager! = BBjAPI().getWebManager()

webManager!.injectStyle("dwc-field, dwc-button {padding: 1em;}", 0)

editFirstName! = wnd!.addEditBox("John")
editLastName! = wnd!.addEditBox("Doe")
btn! = wnd!.addButton("Say Hello")

REM editFirstName!.setStyle("padding","1em")
REM editLastName!.setStyle("padding","1em")

editFirstName!.setAttribute("label","First Name")
editLastName!.setAttribute("label","Last Name")
btn!.setCallback(BBjAPI.ON_BUTTON_PUSH,"sayhello")

process_events

sayhello:
    firstname$=editFirstName!.getText()
    lastname$=editLastName!.getText()
    a=msgbox("Hello "+firstname$+" "+lastname$,64,"Hello World")
return

Advantages of Labels

Labels provide several advantages over using BBjStaticText elements, including in accessibility, clarity, maintenance, and layout design.

When a control has a label, the label is associated with the control both visually and programmatically.

Visual association ensures that the control and label remain closely connected regardless of layout, and makes it more clear which text corresponds to which control.

Programmatic association connects their behavior, so that clicking on the label gives focus to the control, making it easier to understand and navigate complex forms and providing a larger clickable area for controls.

Labels also reduce code complexity by reducing the number of elements, saving developers time and effort.

Because labels are a standard part of HTML, they improve accessibility for users using screenreaders or other assistive technology by programmatically linking input fields with their descriptions.

Best Practices

  • Add labels to all of your form controls to improve the usability of your app.

  • Labels should describe the form control and what input is expected.

  • Don't put interactive elements like links or buttons inside a label. This makes the controls difficult to interact with.

  • Avoid putting HTML tags and elements inside a label, as they can interfere with assistive technology.

  • Use CSS to control label styles by targeting the part::label of the Shadow DOM on the control.

See Also

Dynamic Web Client (DWC) Overview

Registering and Launching a DWC App

BBjControl::setAttribute