Form: Difference between revisions
Line 31: | Line 31: | ||
|- | |- | ||
| method || Get or Post. The method that the http form is sent by. | | method || Get or Post. The method that the http form is sent by. | ||
|- | |||
| onhide || Event when the form is hidden. | |||
|- | |||
| onkeypress || Event when a key is pressed. | |||
|- | |||
| onshow || Event when the form is shown. | |||
|- | |- | ||
| 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]]. | ||
|- | |||
| script || Opens the Code Window for the form. | |||
|- | |||
| scroll_options || iScroll options. See iScroll docs at http://iscrolljs.com. | |||
|- | |||
| scrolling || Allow scrolling? | |||
|- | |- | ||
| script || Opens the Code Window for the form. | | script || Opens the Code Window for the form. | ||
|- | |- | ||
| style || The CSS style for the form. | | style || The CSS style for the form. | ||
|- | |||
| setFocusID || The control to get the focus when the form is shown. | |||
|- | |- | ||
| Url || The URL to be called when the form is submitted using the submit() function. | | Url || The URL to be called when the form is submitted using the submit() function. |
Revision as of 21:27, 5 May 2014
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.
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.
Properties
Standard properties are supported, plus:
background | Will override the background with a pattern or an image. background: -webkit-gradient(linear, left top, left bottom, from(#55aaee), to(#003366)); url(http://www.nsbasic.com/images/eiffel.gif); At runtime, you need to force a redraw: Form1.style.background="red" Form1.style.width="100%" If you are using jQuery Mobile, the best way to control the background color is to use themes. It will work better on PhoneGap Build. |
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. Default is 460. |
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. |
method | Get or Post. The method that the http form is sent by. |
onhide | Event when the form is hidden. |
onkeypress | Event when a key is pressed. |
onshow | Event when the form is shown. |
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. |
script | Opens the Code Window for the form. |
scroll_options | iScroll options. See iScroll docs at http://iscrolljs.com. |
scrolling | Allow scrolling? |
script | Opens the Code Window for the form. |
style | The CSS style for the form. |
setFocusID | The control to get the focus when the form is shown. |
Url | The URL to be called when the form is submitted using the submit() function. |
width | The width of the form in pixels. Default is 320. Percents can be set at runtime. |
reset() | Clear all fields on the form. Runtime only. |
submit() | Submit the data on the form to the specified URL. Runtime only. See Location as well. |
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)
Function btnSendData_onclick() Form1.submit() End Function
To prevent a form from being submitted when the return key is entered in a field:
Function Form1_onsubmit() window.event.cancelBubble=True window.event.returnValue=False End Function
To enable scrolling for all forms (this may not play well with scrollable controls):
document.ontouchmove = undefined
To enable scrolling on a single form only:
- Include [1] in your extra headers:
<script src="iscroll.js"></script>
- Put the following code in your Main function:
Form2.style.height = "460px" 'make the form smaller than its content 'wrap the form in a div for iScroll, sizing the div to fit the content $("#Form2").wrapInner("<div style='height: 920px'/>") Form2.show() 'setup scrolling AFTER we've shown the form 'Change IScroll to iScroll for AppStudio 3.x ScrollingForm = new IScroll(Form2, {mouseWheel:true, scrollbars:true, bounce:true, zoom:false})
Example (JavaScript)
btnSendData.onclick = function() { Form1.submit(); }
To prevent a form from being submitted when the return key is entered in a field:
Form1.onsubmit = function() { window.event.cancelBubble=true; window.event.returnValue=false; }
To change the background image on a form:
Form1.style.backgroundImage="url(https://www.nsbasic.com/images/lavalamp.gif)"
Output
(Url is called with values in the query string)