Form: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
← Older edit
No edit summary
No edit summary
 
(56 intermediate revisions by 3 users not shown)
Line 5: Line 5:
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.
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.


The information on a form can be submitted to a URL by calling the form.submit() function. The values for all controls on the form which have their Name property defined will be appended to the URL as an HTML query string.
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 ==
== Properties ==
Line 13: Line 15:
{| class="wikitable"  
{| class="wikitable"  
|-
|-
| background || Will override the background with a pattern or an image. <pre>background: -webkit-gradient(linear, left top, left bottom, from(#55aaee), to(#003366));
| attributes || The names of HTML attributes which apply to this form, separated by spaces. Design Time.
url(http://www.nsbasic.com/images/eiffel.gif)</pre>  
|-
At runtime, you need to force a redraw:
| backgroundColor || Sets the form's background color. Can be a color name, #RRGGBB, rgb(R,G,B), or transparent.
<pre>
|-
  Form1.style.background="red"
| backgroundImage || Sets the form's background pattern or image. Overrides the backgroundColor property. Works best if image is in the project folder. Do not use absolute paths. To stop image from repeating to fill the screen, put <code>background-repeat:no-repeat;</code> into the form's style property. Gradients like <code>linear-gradient(#55aaee,#003366)</code> can be set at design time or runtime. URLs like <code>url(https://www.nsbasic.com/images/eiffel.gif)</code> can be set at runtime only.
  Form1.style.width="100%" 
|-
</pre>
| centerScreen || If True, the form will be centered on the screen at runtime. Good for different screen sizes. Scrolling must be false. 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.
| class || The names of CSS classes which apply to this form separated by spaces. Design Time.
|-
|-
| height || The height of the form in pixels. Default is 460.
| designHeight || Used to calculate height if expressed as a percentage. If 0, then same as height in pixels. Design time only.
|-
| designWidth || Used to calculate width if expressed as a percentage. If 0, then same as width in pixels. Design time only.
|-
| 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. Design time only.
|-
| 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.
|-
|-
| language || The programming language used in the code for the form. Can be BASIC or JavaScript.
| locked || If set to true, the controls on the Design Screen cannot be moved
|-
|-
| method || Get or Post. The method that the http form is sent by.
| [[Modal Forms|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. Design time only.
|-
|-
| 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]].
| language || The programming language used in the code for the form. Can be BASIC or JavaScript. Design time only.
|-
|-
| script || Opens the Code Window for the form.
| 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]]. Design time only.
|-
| 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]] principles apply.
|-
| script || Opens the [[Code Window]] for the form.
|-
| [[screenMode]] || How will the form be displayed?
<br>''Full'' - Screen using full width and height.
<br>''Actual'' - Size of width, height, left and top. Use for Modal forms.
<br>''Center'' - in screen, using width and height.
<br>''Zoom'' - width and height to screen size and center horizontally. Max of 2.
<br>''noStyle'' - no automatic styling, Just use actual class and style properties.
|-
| scroll_options || iScroll options. See [https://github.com/cubiq/iscroll iScroll] docs at https://github.com/cubiq/iscroll.
|-
| scrolling || Allow scrolling? Design time only.
|-
| setFocusID || The control to get the focus when the form is shown.
|-
|-
| style || The CSS style for the form.  
| style || The CSS style for the form.  
|-
|-
| Url || The URL to be called when the form is submitted using the submit() function.
| 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.
|-
|-
| width || The width of the form in pixels. Default is 320. Percents can be set at runtime.
! Xpert
|-
|-
| reset() || Clear all fields on the form. Runtime only.
| HTML || HTML to display on the form. This HTML is displayed on the form before any controls are rendered. It can be used instead of the Drag and Drop method of the Design Screen.  
|-
|-
| submit() || Submit the data on the form to the specified URL. Runtime only. See [[Location]] as well.
| script || Opens the Code Window for the form.
|}
|}


Line 61: Line 90:
|}
|}


== Example (Basic) ==
== Example ==
 
<pre>
Function btnSendData_onclick()
  Form1.submit()
End Function
</pre>
 
To prevent a form from being submitted when the return key is entered in a field:
<pre>
Function Form1_onsubmit()
  window.event.cancelBubble=True
  window.event.returnValue=False
End Function
</pre>


To enable scrolling for all forms (this may not play well with scrollable controls):
<tabber>
<pre>
JavaScript=
document.ontouchmove = undefined
<syntaxhighlight lang="JavaScript">
</pre>
Form1.style.backgroundColor="red";
Form1.style.width="100%";


To enable scrolling on a single form only:
// To prevent the image from repeating to fill the full window:
NSBPage.style.backgroundRepeat = "no-repeat";


# Include [http://cubiq.org/iscroll-4 iScroll] in your extra headers: <code><script src="iscroll.js"></script></code>
// Set gradient background at runtime:
# Make sure you are either using jQuery Mobile controls, or have enabled jQuery in the Project Libraries chooser.
Form1.style.backgroundImage="linear-gradient(#55aaee, #003366)";
# Put the following code in your Main function:


<pre>
// Change the theme of a Form at runtime. Needs to be done each time you show a Form:
  Form2.style.height = "460px"  'make the form smaller than its content
$("#NSBPage").page({theme: "a"})  // jQuery Mobile
  'wrap the form in a div for iScroll, sizing the div to fit the content
</syntaxhighlight>
  $("#Form2").wrapInner("<div style='height: 920px'/>")
|-|
  Form2.show()
BASIC=
  ScrollingForm = new iScroll("Form2") 'setup scrolling AFTER we've shown the form
<syntaxhighlight lang="vb.net">
</pre>
'Change color at runtime
Form1.style.backgroundColor="red"
Form1.style.width="100%"   


== Example (JavaScript) ==
'To prevent the image from repeating to fill the full window:
NSBPage.style.backgroundRepeat = "no-repeat"


<pre>
'Set gradient background at runtime:
btnSendData.onclick = function() {
Form1.style.backgroundImage="linear-gradient(#55aaee, #003366)"
  Form1.submit();
}
</pre>


To prevent a form from being submitted when the return key is entered in a field:
'Change the theme of a Form at runtime. Needs to be done each time you show a Form:
<pre>
$("#NSBPage").page({theme: "a"}) ' jQuery Mobile
Form1.onsubmit = function() {
</syntaxhighlight>
  window.event.cancelBubble=true;
</tabber>
  window.event.returnValue=false;
}
</pre>


To change the background image on a form:
<pre>
    Form1.style.backgroundImage="url(https://www.nsbasic.com/images/lavalamp.gif)"
</pre>
== Output ==
== Output ==


<pre>
[[File:Gradient.png]]
(Url is called with values in the query string)
</pre>


== Related Items ==
== Related Items ==

Latest revision as of 15:20, 24 July 2019

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:

attributes The names of HTML attributes which apply to this form, separated by spaces. Design Time.
backgroundColor Sets the form's background color. Can be a color name, #RRGGBB, rgb(R,G,B), or transparent.
backgroundImage Sets the form's background pattern or image. Overrides the backgroundColor property. Works best if image is in the project folder. Do not use absolute paths. To stop image from repeating to fill the screen, put background-repeat:no-repeat; into the form's style property. Gradients like linear-gradient(#55aaee,#003366) can be set at design time or runtime. URLs like url(https://www.nsbasic.com/images/eiffel.gif) can be set at runtime only.
centerScreen If True, the form will be centered on the screen at runtime. Good for different screen sizes. Scrolling must be false. Design Time.
class The names of CSS classes which apply to this form separated by spaces. Design Time.
designHeight Used to calculate height if expressed as a percentage. If 0, then same as height in pixels. Design time only.
designWidth Used to calculate width if expressed as a percentage. If 0, then same as width in pixels. Design time only.
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. Design time only.
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. Design time only.
language The programming language used in the code for the form. Can be BASIC or JavaScript. Design time only.
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. Design time only.
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.
screenMode How will the form be displayed?


Full - Screen using full width and height.
Actual - Size of width, height, left and top. Use for Modal forms.
Center - in screen, using width and height.
Zoom - width and height to screen size and center horizontally. Max of 2.
noStyle - no automatic styling, Just use actual class and style properties.

scroll_options iScroll options. See iScroll docs at https://github.com/cubiq/iscroll.
scrolling Allow scrolling? Design time only.
setFocusID The control to get the focus when the form is shown.
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.
Xpert
HTML HTML to display on the form. This HTML is displayed on the form before any controls are rendered. It can be used instead of the Drag and Drop method of the Design Screen.
script Opens the Code Window for the form.

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

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"})   // jQuery Mobile


'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"})  ' jQuery Mobile

Output

Related Items

ChangeForm, GetUrlParameter, Properties

Retrieved from "https://wiki.appstudio.dev/index.php?title=Form&oldid=10530"