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
- In the Application Explorer section, select your page.
- From the Controls section, drag and drop the required control onto the main canvas.
- 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:
- Create a destination page.
- Set a parameter(s) on the destination page.
- 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.)
- 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
Button
Rendered as a straight button element. Hook up a script to a button click event and make your page do stuff.
Data Grid
Datagrids are rendered as tables with column ordering. Optionally these can also have a search box and an export button. Clicking the export button pushes the data into a CSV file and prompts the user to download it.
Date Picker
For DatePicker we use the standard JQuery-UI .datepicker() function with some CSS tweaks.
Link
A link renders as a set of a- tags. In order to add some behaviour to the page, you can attach a script to the click event.
Menu
A menu renders as an unordered list. It can be displayed top-to-bottom menu or left-to-right multi-level drop-down menu.
