Form
Description
Forms act as containers for controls. To go to a new form, use the ChangeForm() function.
To add a Form to your app, choose Add Form from the Project menu at the top of the screen. Forms can be deleted in the Project Explorer.
Scrolling forms are allowed, with a couple of notes. Footerbars won't work (since the bottom needs to scroll up), nor will scrolling controls (which confuse the scroller).
The information on a form can be submitted to a URL by using the Ajax function.
Properties
Standard properties are supported, plus:
| backgroundColor | backgroundColor. Can be name or RGB value. |
| backgroundImage | Will override the background with a pattern or an image.
linear-gradient(#55aaee, #003366); url(http://www.nsbasic.com/images/eiffel.gif); |
| designheight | Used to calculate height if expressed as a percentage. If 0, then same as height in pixels. |
| designWidth | Used to calculate width if expressed as a percentage. If 0, then same as width in pixels. |
| fullscreen | True/False. If True, the form will automatically fill the entire device screen. The IDE will still use height and width at design time. |
| height | The height of the form in pixels or a percent of designHeight. |
| left | The left position of the form. Use this for forms that are not full screen. |
| locked | If set to true, the controls on the Design Screen cannot be moved |
| modal | If set to true, the form will be displayed centered on top of any other forms. Other forms will be grayed out and cannot be accessed until the form is hidden. |
| language | The programming language used in the code for the form. Can be BASIC or JavaScript. |
| openMode | Should the form be open at startup? Use this for forms which are to remain open. There is no need to set this for the first form of the project: that is set in Project Properties. |
| parentForm | The name of the parent form. If blank, the main page (NSBPage) is used. Can be used to make a form a child of another control or form. |
| position | Determines how a form is positioned. Normally set to 'absolute': the form is positioned according to the left and top properties. If set to 'relative', Responsive Design principles apply. |
| script | Opens the Code Window for the form. |
| scroll_options | iScroll options. See iScroll docs at http://iscrolljs.com. |
| scrolling | Allow scrolling? |
| setFocusID | The control to get the focus when the form is shown. |
| script | Opens the Code Window for the form. |
| style | The CSS style for the form. |
| width | The width of the form in pixels or percent of designWidtth. Percents can be set at runtime. |
| reset() | Clear all fields on the form. Runtime only. |
Events
Standard events are supported, plus:
| onhide() | Called when form hidden as a result of ChangeForm() |
| onkeypress(event) | Called when a key is tapped on a form. |
| onshow() | Called by firstform and when form is shown as a result of ChangeForm() |
| onsubmit() | Called when a form is submitted. |
Example (Basic)
Change color at runtime
Form1.style.backgroundColor="red" Form1.style.width="100%"
To prevent the image from repeating to fill the full window:
NSBPage.style.backgroundRepeat = "no-repeat"
Set gradient background at runtime:
Form1.style.backgroundImage="linear-gradient(#55aaee, #003366)"
Change the theme of a Form at runtime. Needs to be done each time you show a Form:
$("#NSBPage").page({theme: "a"})
Example (JavaScript)
Form1.style.backgroundColor="red"; Form1.style.width="100%";
To prevent the image from repeating to fill the full window:
NSBPage.style.backgroundRepeat = "no-repeat";
Set gradient background at runtime:
Form1.style.backgroundImage="linear-gradient(#55aaee, #003366)";
Change the theme of a Form at runtime. Needs to be done each time you show a Form:
$("#NSBPage").page({theme: "a"})
Output
