Form: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
Line 43: Line 43:
| 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 Made Simple|Responsive Design]] principals apply.
| 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 Made Simple|Responsive Design]] principals apply.
|-
|-
| script || Opens the Code Window for the form.
| script || Opens the [[Code Window]] for the form.
|-
|-
| scroll_options || iScroll options. See iScroll docs at http://iscrolljs.com.  
| scroll_options || iScroll options. See [http://iscrolljs.com iScroll] docs at http://iscrolljs.com.  
|-
|-
| scrolling || Allow scrolling?
| scrolling || Allow scrolling?

Revision as of 20:32, 7 April 2015

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 principals 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)"

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)";

Output

Related Items

ChangeForm, GetUrlParameter, Properties