BBjWindow::addEditBox

Description

Creates an edit box control in the BBjWindow.

Syntax

Return Value

Method

BBjEditBox

addEditBox(int ID, number x, number y, number w, number h, string title)

BBjEditBox

addEditBox(int ID, number x, number y, number w, number h, string title, string flags)

BBjEditBox

addEditBox(int ID, number x, number y, number w, number h, string title, string flags, string type)

BBjEditBox addEditBox(int ID, string title)
BBjEditBox addEditBox(int ID, string title, string flags)
BBjEditBox addEditBox(int ID, string title, string flags, string type)
BBjEditBox addEditBox(string title)
BBjEditBox addEditBox(string title, string flags)
BBjEditBox addEditBox(string title, string flags, string type)

Parameters

Variable

Description

ID

Control ID number. It must be an integer between 1 and 32767 and be unique within a given top-level window.

x

Horizontal position of the upper-left corner of the control in current units.

y

Vertical position of the upper-left corner of the control in current units.

width

Width of the control in current units.

height

Height of the control in current units.

title

Title of the control. Including the '&' before a character in the title causes it to be an accelerator.

flags

Control flags, as follows:

Flag Description
$0000$ Left justifies edit text (default).
$0001$ Causes the control to be initially disabled.
$0010$ Causes the control to be initially invisible.
$0020$ Designates the control to be part of a keyboard navigation group.
$0100$ Passes the Home and Delete keys as Keypress Notify events.
$0200$ Defines the edit text as read-only.
$0400$ Replaces input text with asterisks for a masked password.
$0800$ Draws a recessed client edge around the control.
$1000$ Draws a raised edge around the control.
$4000$ Centers edit text.
$8000$ Right justifies edit text.

type

In BBj 15.00 and above, the optional type parameter specifies a particular HTML5 input element style. This is only meaningful in BUI, and availability is determined by the browser. When running in GUI, or when running in a browser that doesn't support a particular type, this is assumed to be "text", a simple text edit control. Use BBjEditBox::getEditType to determine the actual generated control type.

Input Type Description

text

Specifies the default type for all non-password edit boxes.

color

Specifies a color picker. Color values are specified in the format '#rrggbb' (e.g. '#ffff00' = yellow).

date

Specifies a date picker.  Date values are specified in the format 'YYYY-MM-DD' (BBx date format %Yl-%Mz-%Dz). December 31, 2015 would be '2015-12-31'.

datetime-local

A date/time picker.  Date/time values are specified in the format 'YYYY-MM-DDTHH:mm' (BBx date/time format %Yl-%Mz-%DzT%Hz:%mz) or 'YYYY-MM-DDTHH:mm:ss' (BBx date/time format %Yl-%Mz-%DzT%Hz:%mz:%sz).  December 31, 2015 at 11:59:59pm would typically be '2015-12-31T23:59' or '2015-12-31T23:59:00'. Some browsers return time values with millisecond precision as a decimal value after the seconds.

email

Specifies that this input field is expected to contain an email address. Mobile browsers may optimize input for email addresses, e.g. by generating a different soft keyboard.

month

Specifies a month picker. Month values are specified in the format 'YYYY-MM' (BBx date format %Yl-%Mz). December 31, 2015 would be '2015-12'.

number

Specifies numeric input. Mobile browsers may optimize for numeric entry, e.g. by generating a different soft keyboard.

range

Specifies a slider control with a default range of 0..100.

search

Specifies a search box. Browsers may adjust the formatting as a hint to the user.

tel

Specifies that this input field is expected to contain a phone number. Mobile browsers may optimize input for phone numbers, e.g. by generating a different soft keyboard.

time

A time picker.  Time values are specified in the format 'HH:mm'  (BBx date format %Hz:%mz) or 'HH:mm:ss'  (BBx date format %Hz:%mz:%sz). 11:59pm would typically be " 23:59 '' or " 23:59:00".  Some browsers return time values with millisecond precision as a decimal value after the seconds.

url

Specifies that this input field is expected to contain a URL. Mobile browsers may optimize input for URLs, e.g. by generating a different soft keyboard.

week

Specifies a week picker. Week values are specified in the format 'YYYY-Www' (BBx date format %Yl-W%wz). December 31, 2015 would be '2015-W53'.

Return Value

Returns the created BBjEditBox object.

Remarks

If the ID parameter is not specified, a control ID is assigned dynamically using getAvailableControlID().

If the x, y, width, and height parameters are not specified, they are all initialized to 0. This is typically for use with DWC windows that dynamically arrange their contents (window creation flag $00100000$).

Example 1

rem 'Add a edit box to a window

rem 'Obtain the instance of the BBjAPI object
let myAPI!=BBjAPI()

rem 'Open the SysGui device
SYSGUI=UNT
OPEN (SYSGUI) "X0"

rem 'Obtain the instance of the BBjSysGui object
let mySysGui!=myAPI!.getSysGui()

rem 'Set addWindow param values
X=10
Y=10
WIDTH=200
HEIGHT=200
TITLE$="BBj Window"

rem 'Set the current context
mySysGui!.setContext(0)

rem 'Create a window
myWindow! = mySysGui!.addWindow(X,Y,WIDTH,HEIGHT,TITLE$)

rem 'Add a edit box on the window
myEditBox! = myWindow!.addEditBox(101,50,100,90,30,"",$0008$)

rem 'Register the CALLBACK routines
CALLBACK(ON_EDIT_MODIFY,EDIT_BOX_MODIFIED,mySysGui!.getContext(),myEditBox!.getID())
CALLBACK(ON_CLOSE,APP_CLOSE,mySysGui!.getContext())

rem 'Process Events
process_events

rem 'Callback routine called when the contents of the Edit Box are modified
EDIT_BOX_MODIFIED:
    rem 'Display a message with the edit box contents
    MESSAGE$="The edit box contents are: " + STR(myEditBox!.getText())
    let X=MSGBOX(MESSAGE$)
return

rem 'Callback routine called when the user closes the application window
APP_CLOSE:
release

Example 2

sysgui = unt
open (sysgui)"X0"
sysgui! = bbjapi().getSysGui()
window! = sysgui!.addWindow(50,50,300,550,"Window",$00090003$)
window!.setCallback(window!.ON_CLOSE,"eoj")
status! = window!.addStatusBar(100)
data "text","color","date","datetime-local","email","month"
data "number","range","search","tel","time","url","week"
i = 101, x = 100, y = 25, w = 175, h = 25
tbutton! = window!.addToolButton(1,x,y,w,h,"getText",$$)
tbutton!.setCallback(tbutton!.ON_TOOL_BUTTON_PUSH,"getText")
while 1
    dread type$,err=*break
    y = y + h + 10
    window!.addStaticText(i+100,0,y+5,90,h,type$,$8000$)
    editbox! = window!.addEditBox(i,x,y,w,h,"",$$,type$)
    if (type$ = "text") then
        editbox!.setText("The quick brown fox jumps over the lazy dog.")
    endif
    if (type$="color") then
        color$ = "#" + hta(chr(rnd(255))) + hta(chr(rnd(255))) + hta(chr(rnd(255)))
        editbox!.setText(color$)
    endif
    if (type$="date") then
        mask$ = "%Yl-%Mz-%Dz"
        editbox!.setText(date(0:mask$))
        print "min=",editbox!.getAttribute("min"),",max=",editbox!.getAttribute("max")
        editbox!.setAttribute("min",date(jul(0,0,0)-365:mask$))
        editbox!.setAttribute("max",date(jul(0,0,0)+365:mask$))
        print "min=",editbox!.getAttribute("min"),",max=",editbox!.getAttribute("max")
    endif
    if (type$="datetime-local") then
        mask$="%Yl-%Mz-%DzT%Hz:%mz"
        editbox!.setText(date(0:mask$))
        print "min=",editbox!.getAttribute("min"),",max=",editbox!.getAttribute("max")
        editbox!.setAttribute("min",date(jul(0,0,0)-365:mask$))
        editbox!.setAttribute("max",date(jul(0,0,0)+365:mask$))
        print "min=",editbox!.getAttribute("min"),",max=",editbox!.getAttribute("max")
    endif
    if (type$="month") then
        mask$="%Yl-%Mz"
        editbox!.setText(date(0:mask$))
        print "min=",editbox!.getAttribute("min"),",max=",editbox!.getAttribute("max")
        editbox!.setAttribute("min",date(jul(0,0,0)-365:mask$))
        editbox!.setAttribute("max",date(jul(0,0,0)+365:mask$))
        print "min=",editbox!.getAttribute("min"),",max=",editbox!.getAttribute("max")
    endif
    if (type$="number") then
        editbox!.setText(str(50))
        editbox!.setAlignment(editbox!.ALIGN_RIGHT)
        print "min=",editbox!.getAttribute("min"),",max=",editbox!.getAttribute("max")
        editbox!.setAttribute("min","-100")
        editbox!.setAttribute("max","100")
        editbox!.setAttribute("step","any")
        print "min=",editbox!.getAttribute("min"),",max=",editbox!.getAttribute("max")
    endif
    if (type$="range") then
        editbox!.setText(str(50))
        print "min=",editbox!.getAttribute("min"),",max=",editbox!.getAttribute("max")
        editbox!.setAttribute("min","-100")
        editbox!.setAttribute("max","100")
        print "min=",editbox!.getAttribute("min"),",max=",editbox!.getAttribute("max")
    endif
    if (type$="time") then
        mask$="%Hz:%mz"
        editbox!.setText(date(0:mask$))
    endif
    if (type$="week") then
        mask$="%Yl-W%Wz"
        editbox!.setText(date(0:mask$))
    endif
    editbox!.setName(type$)
    editbox!.setAttribute("placeholder","placeholder text goes here")
    editbox!.setToolTipText(editbox!.getEditType())
    editbox!.setCallback(editbox!.ON_EDIT_MODIFY,"modify")
    i = i + 1
wend
process_events

eoj:
release

getText:
    control! = window!.getFocusedControl()
    i = msgbox(control!.getText(err=*next),0,control!.getName(err=*next))
return

modify:
    event! = sysgui!.getLastEvent()
    editbox! = event!.getControl()
    event$ = editbox!.getName()+" = '"+event!.getText()+"'"
    status!.setText(event$)
    print event$
return

See Also

BBjAPI

BBjSysGui

BBjControl

BBjWindow

`EDIT' Mnemonic

BBjEditBox::getEditType

BBjControl::getAttribute

BBjControl::setAttribute

See the BBj Object Diagram for an illustration of the relationship between BBj Objects.