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
Rendered as a straight button element. Hook up a script to a button click Event and make your page do stuff.
Display data on a chart.
Capture a True or False input from a user.
A Check box list renders a list of options and allows user to select multiple values.
A Container renders as a div tag, which can be styled to control layout and display.
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.
For DatePicker we use the standard JQuery-UI .datepicker() function with some CSS tweaks.
This renders as a standard select tag containing option tags.
A Flexbox can be used to display a list of items in a single row.
Grid allows you to create columns on your page for precise layout.
Display a pre-chosen image to the user.
A label renders as a set of span tags.
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.
A menu renders as an unordered list. It can be displayed top-to-bottom menu or left-to-right multi-level drop-down menu.
A panel renders as a fieldset tag. You can place items into the panel to group them.
A Check box list renders a list of options and allows user to select one value.
You can use the Repeater control to repeat the display of controls.
You can use the Table control to layout other controls and apply consistent spacing.
A textbox renders as a set of textarea tags with the height of a single line input.
An upload file renders as a form tag containing an input tag of type='file' and a button tag. The functionality for uploading the file is already built into the control. All you need to do is set the control properties.
Last updated
