1,844
การแก้ไข
ล (→Sending Data) |
|||
| บรรทัดที่ 262: | บรรทัดที่ 262: | ||
== Design & Pre-made Scripts == | == Design & Pre-made Scripts == | ||
Now that a CuneiForm is defined, initiated, and sent along with a template, it comes to the frontend part. To put a form up on an HTML page, CuneiFox's standard pattern comes in 3 steps: | |||
# Initiate a {{code|lang=html|<form>}} DOM element and a JavaScript form object. Both are done via the Jinja2 macro {{code|general_form_head}}. | |||
# Place form fields at will (preferably with Jinja2 macros included in {{code|cunei_forms.html}} pack). | |||
# Finalize the Javascript object and bind relevant events with the Jinja2 macro {{code|general_form_tail}}. | |||
'''NOTE THAT''', in this section, unless explicitly specified: | |||
* '''{{code|form}}''' refers to a CuneiForm instance sent from Flask and accissible by Jinja2 | |||
* '''{{code|form_dom}}''' refers to the {{code|lang=html|<form>}} DOM element | |||
* '''{{code|form_obj}}''' refers to the JavaScript form object. | |||
=== General Form Head & Form Object === | |||
In essence, this Jinja2 script is responsible for the following actions: | |||
# Create a {{code|lang=html|<form>}} DOM element corresponding to the form. | |||
# Register the form to the {{code|all_tbfm_ids}} list for future reference. | |||
# Create a {{code|form_obj}} corresponding to the form, and assign default values to its many attributes. | |||
# Point the variable {{code|master_tbfm}} toward the newly created {{code|form_obj}} (if applicable). | |||
# Point the ''main component object'' attribute of the ''modal object'' referenced by ''form.in_modal'' ({{code|modal_obj.main_comp_obj}}) toward the newly created {{code|form_obj}} (if applicable). | |||
Below is the list of and notes on form object attributes: | |||
* '''Basic Attributes''' | |||
** '''_id''': Takes on the value of {{code|form._id}}. | |||
** '''self_type''': Takes on value {{code|lang=javascript|'form'}}. | |||
** '''token''': The CSRF Token of the form, used to verify the form submission request. | |||
* '''Copied Attributes''' ''(See [[#Notes on Keyword Arguments]] for details)'' | |||
** '''skipseqs''', '''firstonly''', '''in_table''', '''table_linked''', '''sequence_bound''', '''slim''', '''subslim''', '''seq''', '''populate_route''', '''redirect''', '''wait_long_process''', '''track_route''', and '''wait_redirect''': Takes on the exact value. | |||
** '''instacalc''' and '''populate_suppress''': Takes on the exact value, but set to a blank dict {{code|lang=javascript|{} }} and a blank array {{code|lang=javascript|[]}}, respectively, when the value is {{code|lang=python|False}}. | |||
** '''submit_id''': Takes on the exact value ''if the corresponding submit button does not require a confirm pop-up''. If a confirm pop-up is needed, the value is suffixed with {{code|_fake}}, e.g. {{code|lang=javascript|'submit_fake'}}. (See [[#Buttons & Submits]] for more details.) | |||
** '''cnames''': Takes on the exact value. However, members of which corresponding fields are not drawn are changed to {{code|lang=javascript|null}}. | |||
** '''populate_id''': Takes on the exact value, with all prefix {{code|#}} cut once event-binding is taken care of. | |||
** '''in_modal''': Points to the corresponding ''modal object''. | |||
** '''post_route''': The original value is stored in the attribute '''orig_post_route'''. This attribute itself is modified with data when a submit request is being prepared. | |||
* '''References to DOM Elements''' | |||
* '''Field-related Attributes''' | |||
* '''Status Attributes''' | |||
* '''Data Attributes''' | |||
* '''Additional Functions & Routines''' | |||
=== CuneiForm Jinja2 Macro Pack === | |||
=== General Form Tail === | |||
== Notable Sub-routines == | == Notable Sub-routines == | ||