Button


The Button requires Run BASIC Beta2 or later

A Button is a Link in boxed form. It has the following syntax:

BUTTON #handle, labelExpr$, handler - Add a submit button to the page with #handle, label$ and handler

The labelExpr$ is the text the user sees. When the user clicks on the button, the event handler specified is activated. It can be either a sub or a branch label. If the handler is a sub, the handle of the button is passed into the sub. If the handler is a branch label, the global variable EventKey$ is set to be the handle of the button.

Here is a short demo.

'create a button with sub event handler
button #doStuff, " Do Stuff ", doStuff
print:print
 
'create a button with branch label event handler
button #doMore, " Do More ", [doMore]
 
wait
 
sub doStuff handle$
print:print "Handle is ";handle$
end sub
 
[doMore]
print:print "Handle is ";EventKey$
wait

BUTTON methods


Buttons have the following methods:

#handle CSSCLASS() - Set the CSS class tag
#handle SETKEY(stringExpr$) - Set the button's event key to stringExpr$
#handle SETID(expr$) - Set the HTML id property to be the value of expr$
#handle ISNULL() - Returns zero (or false)
#handle DEBUG$() - Returns the string "Button"

CSSClass()


You can set the CSSClass tag for a button. This is handy if you want to add color or assign a size. This requires some basic knowledge of CSS. (CSS means Cascading Style Sheets.) You can learn more here: http://www.w3schools.com/css/default.asp

You'll also want to visit SimpleCSSDesigns on this wiki.

The HTML tag for a button is "input type='button'" as in the HTML for a button

html "<INPUT type='button' name='mybutton' value='Click!'>"

The CSSCLASS definition should also begin with "input". The "input" can be omitted, but the be sure to use the dot. Some possible button class names:

input.blueButton
.blueButton
input.fancyButton
.fancyButton

To invoke those styles, use the CSSCLASS statement, placing the CSSClass name inside of quotation marks, without the "input.":

#handle CSSClass("blueButton")
#handle CSSClass("fancyButton")

Here is a short demo that changes the color, size, and border of a button.

'create a button with sub event handler
button #doStuff, " Do Stuff ", doStuff
print " ":print
 
'create a button with branch label event handler
button #doMore, " Do More ", [doMore]
 
'minimum CSSClass to change the background color of a button
CSSClass "input.blueButton", "{
        Background-Color: blue;
    }"
 
'more styles added
CSSClass "input.fancyButton", "{
        Font-Size: 16pt;
        Font-Weight: Bold;
        Font-Style: Italic;
        Width: 140px;
        Height: 100px;
        Background: #C0C0C00;
        Color: #FF0000;
        Border-Width: Thick;
        Border-Style: Outset;
        Border-Color: #AAAAAA;
    }"
 
#doStuff CSSClass("blueButton")
#doMore CSSClass("fancyButton")
wait
 
[doMore]
print "EventKey$ is ";EventKey$
wait
 
sub doStuff key$
print " ":print
print "Key$ is ";key$
end sub

SETKEY()

When the user clicks on a button and there is a key set on that button then the handler will use that key instead of the name of the handle. It will be passed into the sub if the handler is a sub. It will be assigned to the global variable EventKey$ if the handler is a branch label.

Here is a demo of SETKEY() in action.

'create a button with sub event handler
button #doStuff, " Do Stuff ", doStuff
print " " :print " "
 
'create a button with branch label event handler
button #doMore, " Do More ", [doMore]
 
#doStuff setkey("New Do Stuff Key")
#doMore setkey("New Do More Key")
wait
 
sub doStuff handle$
print " ":print "Handle is ";handle$
end sub
 
[doMore]
print " ":print "Handle is ";EventKey$
wait

setkey() can also pass numeric values

button #btn1,"Button 1",doIt
#btn1 setkey(20)
wait
 
sub doIt key
print key*2
'more code
end sub

SETID()

The CSSClass() function assigns properties and attributes to HTML elements. Each additional CSSClass negates the previous.
print:print
'define some cssclass
CSSClass "input.fancyButton", "{
        Font-Size: 8pt;
        Font-Weight: Bold;
        Font-Style: Italic;
        Width: 80px;
        Height: 40px;
        Background: #C0C0C00;
        Color: #FFFFFF;
        Border-Width: Thick;
        Border-Style: Outset;
        Border-Color: #AAAAAA;
    }"
 
'assign a class to just change the background color
CSSClass "input.redButton", "{Background: #FF0000;}"
 
'create a button with branch label event handler
button #doChange, " Do Change ", [doChange]
 
'assign class to the button
#doChange CSSClass("fancyButton")
wait
 
[doChange]
'change the class
#doChange CSSClass("redButton")
print:print
print "The original style is lost and replaced with"
print "just the one attribute defined in #redButton."
wait

The SetID() function allows the element to change one or more attributes while retaining the original class style.

print:print
'define some CSSClass
CSSClass "input.fancyButton", "{
        Font-Size: 8pt;
        Font-Weight: Bold;
        Font-Style: Italic;
        Width: 80px;
        Height: 40px;
        Background: #C0C0C00;
        Color: #FFFFFF;
        Border-Width: Thick;
        Border-Style: Outset;
        Border-Color: #AAAAAA;
    }"
 
'assign an id to just change the background color
CSSID #redButton, "{Background: #FF0000;}"
 
'create a button with branch label event handler
button #doChange, " Do Change ", [doChange]
 
'assign class to the button
#doChange CSSClass("fancyButton")
wait
 
[doChange]
'assign one or more attributes with SetID
#doChange SetID("redButton")
print:print
print "The attributes defined in #redButton are"
print "added to the original style .fancyButton."
wait

The SetID() function can also be used to assign attributes of a javascript defined element to a Run BASIC element. This next demo defines a javascript function to get the Coordinated Universal Time (UTC), also known as Greenwich Mean Time (GMT), and write that date and time to a button defined with the same id. Using SetID(), Run BASIC assigns that same javascript id to its native element, bringing the date and time with it.
    Cls
    html "</div>"
 
' Use a javascript function to get the
' Greenwich Mean Time (GMT), also known as
' Coordinated Universal Time (UTC)
' Assign the ID "utcHTML" to the document output
 
    html "<script type='text/javascript'>
        function getGMT() {
            date = new Date();
            gmt = date.toGMTString();
            document.getElementById('utcHTML').value = gmt;
            }
    </script>"
 
    Print "Coordinated Universal Time"
 
' Create a link (or button) to call the javascript function when clicked
    Print
    Button #doDateTime, " Get UTC ", [doDateTime]
    Print: Print
 
Wait
 
 
[doDateTime]
' Set the ID of the button to that of the javascript document element "utcHTML"
    #doDateTime SetID("utcHTML")
' Print the date and time
    html "<script type='text/javascript'> getGMT() </script>"
 
Wait

ISNULL() and DEBUG$()

This code demonstrates the Debug$() and IsNull() methods:

'#handle ISNULL() //- Returns zero (or false)//
print "Before creation, IsNull() returns:"
print #doStuff isnull()
 
'create a button with sub event handler
button #doStuff, " Do Stuff ", doStuff
print:print
print "Object is a ";#doStuff debug$()
print "After creation, IsNull() returns:"
print #doStuff isnull()
wait
 
sub doStuff handle$
print " ":print "Handle is ";handle$
end sub