Controls

Controls are the visual elements in an application, e.g. a textbox, button, image or menu.

There are specific events available to certain controls, for example the Click event is available to a button control. An event handler can be created for the event so that actions can then be added to the event handler to execute specific logic when the event is triggered. For example, on the click of a button the action could be to navigate to a different page.


How to add Controls

  1. In the Application Explorer section, select your page.
  2. From the Controls section, drag and drop the required control onto the main canvas.
  3. In the Properties section, set the available properties of your control.

Note: In the Designer, the controls are displayed independent of the styles that apply to them. Therefore, the display in the Designer looks different to the display in a browser (when all styles are applied).


Methods for laying out Controls on a page

To design a well-functioning and visually appealing application, it is important to carefully design your page layout. Stadium provides these methods for laying out controls on a page:

Note: In the Designer, the layout is not to scale and styling does not apply. Therefore, the display in the Designer looks different to the display in a browser (when all styles are applied).


Assigning data to Controls

Certain controls have specific properties that can hold data. Data can be assigned to these controls by using actions like SetValue.

See how: CheckBox | CheckBoxList | DataGrid | DatePicker | DropDown | RadioButtonList | TextBox


Collecting data from Controls

The data that are contained in controls can be retrieved for further action, e.g. to display it on a page or to process it in various ways, like inserting it into a database.


Example:

Assume that you have a page with a text box that contains data, as well as a button click event handler. You want the data that is entered in the text box to be collected on a destination page.

Steps:

  1. Create a destination page.
    • Set a parameter(s) on the destination page.
  2. On the page that contains the text box control, add the NavigateToPage action to the event handler of the button's click event.
    • Specify the destination page.
    • Assign data to the input parameter. (The input parameter corresponds to the parameter you set on the destination page.)
  3. On the destination page, add to the Load event handler the actions to retrieve the data and assign it to relevant controls, actions, web service functions or database queries.

Available Controls