Button

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.

code format="vbnet" '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 code

BUTTON methods
Buttons have the following methods:


 * 1) handle CSSCLASS - Set the CSS class tag
 * 2) handle SETKEY(stringExpr$) - Set the button's event key to stringExpr$
 * 3) handle SETID(expr$) - Set the HTML id property to be the value of expr$
 * 4) handle ISNULL - Returns zero (or false)
 * 5) 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

code html "" code

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.":


 * 1) handle CSSClass("blueButton")
 * 2) handle CSSClass("fancyButton")

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

code format="vbnet" '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;    }"

wait
 * 1) doStuff CSSClass("blueButton")
 * 2) doMore CSSClass("fancyButton")

[doMore] print "EventKey$ is ";EventKey$ wait

sub doStuff key$ print " ":print print "Key$ is ";key$ end sub code

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.

code format="vbnet" '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
 * 1) doStuff setkey("New Do Stuff Key")
 * 2) doMore setkey("New Do More Key")

sub doStuff handle$ print " ":print "Handle is ";handle$ end sub

[doMore] print " ":print "Handle is ";EventKey$ wait code


 * setkey** can also pass numeric values

code format="vbnet" button #btn1,"Button 1",doIt wait
 * 1) btn1 setkey(20)

sub doIt key print key*2 'more code end sub code

SETID
The CSSClass function assigns properties and attributes to HTML elements. Each additional CSSClass negates the previous. code format="vbnet" 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 wait
 * 1) doChange CSSClass("fancyButton")

[doChange] 'change the class print:print print "The original style is lost and replaced with" print "just the one attribute defined in #redButton." wait code
 * 1) doChange CSSClass("redButton")

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

code format="vbnet" 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 wait
 * 1) doChange CSSClass("fancyButton")

[doChange] 'assign one or more attributes with SetID print:print print "The attributes defined in #redButton are" print "added to the original style .fancyButton." wait code
 * 1) doChange SetID("redButton")

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. code format="vbnet" Cls html " "

' 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 "       function getGMT {            date = new Date;            gmt = date.toGMTString;            document.getElementById('utcHTML').value = gmt;            }    "

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 " getGMT "

Wait code

ISNULL and DEBUG$
This code demonstrates the **Debug$** and **IsNull** methods:

code format="vbnet" '#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 code