Difference between revisions of "Working with Forms"
| Line 10: | Line 10: | ||
**'''[[checkbox]]''': for true/false values | **'''[[checkbox]]''': for true/false values | ||
**'''[[radiobutton]]''': for a value from a list | **'''[[radiobutton]]''': for a value from a list | ||
| − | * | + | *field panels: |
**'''[[timepanel]]''': similar to time | **'''[[timepanel]]''': similar to time | ||
**'''[[datepanel]]''': similar to date | **'''[[datepanel]]''': similar to date | ||
| Line 22: | Line 22: | ||
Fields of type '''time''', '''date''' and '''keypad''' have a specific panel used to input the value, that will be visible in a popup when the field is clicked. | Fields of type '''time''', '''date''' and '''keypad''' have a specific panel used to input the value, that will be visible in a popup when the field is clicked. | ||
| − | These panels can also be added directly to the page, using the '''timepanel''', '''datepanel''' and '''keypadpanel''' objects. | + | These panels can also be added directly to the page, using the field panel objects: '''timepanel''', '''datepanel''' and '''keypadpanel''' objects. |
'''Containers''' are used to group fields and submit buttons. | '''Containers''' are used to group fields and submit buttons. | ||
| Line 30: | Line 30: | ||
Fields can also have an '''autosubmit''' mode, that sends the value when there's a change, instead of waiting for the user to click on a Submit button. | Fields can also have an '''autosubmit''' mode, that sends the value when there's a change, instead of waiting for the user to click on a Submit button. | ||
This mode is automatically activated if there's no Submit button on the page (if the field is on page), or in one of the parent containers, up to the page. This autosubmit mode can also be toggled using a specific UISet (for example see the [[input#UI Attributes|autosubmit UI Attribute on the input object]]). | This mode is automatically activated if there's no Submit button on the page (if the field is on page), or in one of the parent containers, up to the page. This autosubmit mode can also be toggled using a specific UISet (for example see the [[input#UI Attributes|autosubmit UI Attribute on the input object]]). | ||
| + | |||
| + | Field panels have an OK button that works as a Submit button. If there's another Submit button, the OK buttons on the panels won't be visible. | ||
== Creating a Form == | == Creating a Form == | ||
| Line 36: | Line 38: | ||
=== Server-side === | === Server-side === | ||
| − | + | In a form, when one of these things happen: | |
| + | *a change is detected on a field in autosend mode | ||
| + | *the OK button is pressed on a field panel | ||
| + | *a Submit button is pressed | ||
| + | HSYCO will call the method: | ||
<source lang="java"> | <source lang="java"> | ||
userCommand(String name, String param) | userCommand(String name, String param) | ||
</source> | </source> | ||
| − | in the user.class class, | + | in the user.class class. |
| − | *'''name''' - the id of the | + | |
| − | *'''param''' - the | + | If a single field is sending its value (the above first two cases), the method will receive: |
| − | The '''USER <id>''' event will be generated as well. If the | + | *'''name''' - the id of the field object |
| + | *'''param''' - the value of the field object | ||
| + | |||
| + | If a Submit button has been pressed, the method will receive: | ||
| + | *'''name''' - the id of the submit button object | ||
| + | *'''param''' - a list of ids and values of every field, separated by "@". ''E.g. field1@value1@field2@value2'' | ||
| + | |||
| + | |||
| + | The '''USER <id>''' event will be generated as well. If the id starts with '''$''', then the server will also automatically set a variable named $<id> to the appropriate value. | ||
Revision as of 19:55, 25 February 2014
Introduction to Forms
There are several objects that allow the creation of a form to send data to the server. These objects are of three types: fields, submit buttons and containers.
- fields:
- field panels:
- timepanel: similar to time
- datepanel: similar to date
- keypadpanel: similar to keypad
- submit buttons:
- submit: default size
- submitmini: "mini" size
- submitmicro: "micro" size
- submitimage: custom image
- container: to group multiple objects
Fields of type time, date and keypad have a specific panel used to input the value, that will be visible in a popup when the field is clicked. These panels can also be added directly to the page, using the field panel objects: timepanel, datepanel and keypadpanel objects.
Containers are used to group fields and submit buttons.
Submit buttons are used to commit changes and send all the fields' values to the server. Only the fields inside the same container and nested containers will be considered.
Fields can also have an autosubmit mode, that sends the value when there's a change, instead of waiting for the user to click on a Submit button. This mode is automatically activated if there's no Submit button on the page (if the field is on page), or in one of the parent containers, up to the page. This autosubmit mode can also be toggled using a specific UISet (for example see the autosubmit UI Attribute on the input object).
Field panels have an OK button that works as a Submit button. If there's another Submit button, the OK buttons on the panels won't be visible.
Creating a Form
Client-side
Server-side
In a form, when one of these things happen:
- a change is detected on a field in autosend mode
- the OK button is pressed on a field panel
- a Submit button is pressed
HSYCO will call the method:
userCommand(String name, String param)in the user.class class.
If a single field is sending its value (the above first two cases), the method will receive:
- name - the id of the field object
- param - the value of the field object
If a Submit button has been pressed, the method will receive:
- name - the id of the submit button object
- param - a list of ids and values of every field, separated by "@". E.g. field1@value1@field2@value2
The USER <id> event will be generated as well. If the id starts with $, then the server will also automatically set a variable named $<id> to the appropriate value.
