Form: Difference between revisions
Line 17: | Line 17: | ||
| backgroundColor || backgroundColor. Can be name or RGB value. | | backgroundColor || backgroundColor. Can be name or RGB value. | ||
|- | |- | ||
| backgroundImage || Will override the background with a pattern or an image. <pre>linear-gradient(#55aaee, #003366); | | backgroundImage || Will override the background with a pattern or an image. | ||
<pre>linear-gradient(#55aaee, #003366); | |||
url(http://www.nsbasic.com/images/eiffel.gif);</pre> | url(http://www.nsbasic.com/images/eiffel.gif);</pre> | ||
If | |- | ||
| 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. | | 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 | | 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. | | 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 | | 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. | | 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 [[Properties Window|Project Properties]]. | | 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 [[Properties Window|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 Made Simple|Responsive Design]] principals apply. | |||
|- | |- | ||
| script || Opens the Code Window for the form. | | script || Opens the Code Window for the form. | ||
Line 40: | Line 48: | ||
|- | |- | ||
| scrolling || Allow scrolling? | | scrolling || Allow scrolling? | ||
|- | |||
| setFocusID || The control to get the focus when the form is shown. | |||
|- | |- | ||
| script || Opens the Code Window for the form. | | script || Opens the Code Window for the form. | ||
Line 45: | Line 55: | ||
| style || The CSS style 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. | |||
| width || The width of the form in pixels | |||
|- | |- | ||
| reset() || Clear all fields on the form. Runtime only. | | reset() || Clear all fields on the form. Runtime only. |
Revision as of 20:07, 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)";