CLASS: Button

SUPER CLASS: Control

Subclasses

Busy Button

Synopsis

The button class represents an on-screen button with a label and an onclick event. The main difference between the button class and a label with an onclick event is that they are represented with different graphics.

Full Description

Properties

Button.autoSizeHeight

Button.autoSizeWidth

Button.border

described in Control

Sets the border-width in pixels for your widget. Enter a single value like 5 to have a 5 px border around the widget. To have borders with different widths, enter a comma-separated list of pixel values like this:

border-top, border-right, border-bottom, border-left

For example, entering

10, 0, 5, 1

Will result in a border that is 10px wide on top, 0px wide on the right, 5px wide on the bottom and 1px wide on the left.

Use within the javascript editor

this.<WidgetID>.setBorder("5,0,10,15")

Button.borderColor

described in Control

Enter a border color for your widget; rgb and hex values are accepted: rgb(0,255,0) and #00FF00 are both valid entries.

You can also enter css color names, including black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white.

Use within the javascript editor

this.<WidgetID>.setBorderColor("rgb(0,255,0)");       
this.panel1.setBorderColor("#00FF00");
main.editor2.setBorderColor("purple");

Button.caption

The caption is the text that the end user sees on your button.

You can click the bind icon to the right of the value to connect this property to a variety of values, such as the dataValue property of another widget or the result of a web service call.

Use within the javascript editor

this.<ButtonName>.setCaption("This is my new caption")

Button.disabled

This property allows you to enable/disable the button. A disabled button is visible, but does not perform an onclick event when it is clicked.

Use the checkbox to set the button to enabled/disabled if you plan to use javascript code to change it at runtime.

Use the bind dialog box to bind disabled to a value.

Use within the bind dialog

Bind disabled to a datagrid's emptySelection property to disable the button whenever nothing is selected, and enable whenever the user selects something in the datagrid. This is a handy way to insure that a button can only operate when there is a selected row.

Use within the javascript editor

this.<ButtonName>.setDisabled(true);

Button.height

described in Control

The height of your widget can be specified in px or % (i.e 50px, 75%).

You can have a column of widgets that combined are more than 100% width; components will be allocated space based on the ratio of sizes (a 80% height widget gets twice as much space as a 40% widget).

Use within the javascript editor

this.<WidgetID>.setHeight("50%");  
this.label1.setHeight("40px");

Button.Hint

This property sets the text to display as a tooltip when a user's cursor hovers over this button.

Use within the javascript editor

this.<WidgetID>.setHint("Click only in case of emergency!")

Button.iconHeight

Optional property; but you will need this if you are using the button's iconUrl. Please enter the height of your icon.

WARNING: Its best to specify size in pixels, not percent.

Use within the javascript editor

this.<WidgetID>.setIconHeight("50px");

Button.iconMargin

Optional property; only has meaning if you specify the button's iconUrl. Values should all have "px" next to them. Use this to adjust the space between the icon and the button text.

Use within the javascript editor

this.<WidgetID>.setIconMargin("0 20px 0 0");
this.<WidgetID2>.setIconMargin("20px");

Button.iconUrl

This optional property allows you to add an icon to the left side of your button. The easiest way to add an image is: 1. Go to the resource manager and upload an image to your images folder; 2. Click the bind button next to the iconUrl property and select the image you uploaded.

Use within the javascript editor

this.<WidgetID>.setIconUrl("resources/images/myIcon.png")

Button.iconWidth

Optional property; but you will need this if you are using the button's iconUrl. Please enter the width of your icon.

WARNING: Its best to specify size in pixels, not percent.

Use within the javascript editor

this.<WidgetID>.setIconWidth("50px");

Button.imageIndex

Button.imageList

An imagelist is a specially formatted jpg or gif file consisting of 4 rows of icon images, each with the same height and width. Each column in the imagelist is a separate image, numbered starting with zero.

The first row shows the "normal" image, the second row shows the image to display when the cursor hovers over the image, the third row shows the image to display when the image is clicked on and the fourth row shows the image to display after the image has been clicked.

Button.margin

described in Control

Sets the margin in pixels for your widget. The margin for an object is outside of its border (the padding is inside the border).

Enter a single value like 5 to have a 5 px margin around the widget. To have margins with different widths, enter a comma-separated list of pixel values like this:

margin-top, margin-right, margin-bottom, margin-left

For example, entering

10, 0, 5, 1

Will result in a margin that is 10px wide on top, 0px wide on the right, 5px wide on the bottom and 1px wide on the left.

Use within the javascript editor

this.<WidgetID>.setMargin("5,0,10,15")

Button.minHeight

Button.minWidth

described in Control

Defines the minimum size of a widget. The minWidth property is used when the width property is set to a percent (%) value. The widget will shrink based on the available space until the minWidth pixel value is reached, at which point the widget will not shrink further.

Button.name

described in Component

The name is a unique identifier for your widget. Each page element and component must be uniquely identified. WaveMaker automatically renames any non-unique element.

The name makes it easy

1. Find the component in a bind dialog box
2. Find the component in your model tree
3. Reference the component in javascript

Use within the javascript editor

this.<UniqueID>.setShowing(true)

Button.onclick

described in Control

Specifies what kind of action to take when the user clicks on this page element. The basic options are:

• Javascript: creates a new Javascript function that will be called when this event occurs.
• Javascript Shared: creates a new Javascript function that other widgets of the same type can use. Now you can have 20 buttons, any and all of which can use the same onclick function instead of having 20 separate onclick functions.
• New Service: creates a new service variable to call when this event occurs, for example to trigger a new database query.
• New Navigation: creates a new navigation variable to call when this event occurs, for example to navigate to a new page or layer.
• LiveVariable: refreshes a LiveVariable when this event occurs, for example by re-executing a query to fetch all customer data.

Button.padding

described in Control

Sets the padding in pixels for your widget. The padding for an object is inside of its border (the margin is outside the border).

Enter a single value like 5 to have a 5 px padding around the widget. To have padding with different widths, enter a comma-separated list of pixel values like this:

padding-top, padding-right, padding-bottom, padding-left

For example, entering

10, 0, 5, 1

Will result in padding that is 10px wide on top, 0px wide on the right, 5px wide on the bottom and 1px wide on the left.

Use within the javascript editor

this.<WidgetID>.setPadding("5,0,10,15")

Button.showing

described in Control

Showing determines whether or not a component is visible. A page element that is not showing has its css display style set to none; it is still a part of the DOM model of the page, but no longer affects the layout of other components.

Uncheck the checkbox to make this widget invisible. A widget that is not showing can still be selected by navigating to that widget in the model tree and clicking it.

Use within the javascript editor

this.<UniqueID>.setShowing(true)

Button.width

described in Control

The width of your widget can be specified in px or % (i.e 50px, 75%).

You can have a row of widgets that combined are more than 100% width; components will be allocated space based on the ratio of sizes (a 80% width widget gets twice as much space as a 40% widget; they will fit in the designated space even though the sum is 120%).

Use within the javascript editor

this.<WidgetID>.setWidth("80px");