Commit ffed325a authored by Carsten  Rose's avatar Carsten Rose
Browse files

Merge remote-tracking branch 'origin/raos_work' into crose_work

parents 42b38bf2 cf61161b
API: Client / Server API: Client / Server
==================== ====================
Form initial call Form initial call
----------------- -----------------
...@@ -13,8 +14,8 @@ data-hidden: 'yes'|'no' - yes: The element is not visible yet, maybe later. ...@@ -13,8 +14,8 @@ data-hidden: 'yes'|'no' - yes: The element is not visible yet, maybe later.
data-disabled: 'yes'|'no' - yes: The element is visible, but the user can't interact with it. data-disabled: 'yes'|'no' - yes: The element is visible, but the user can't interact with it.
data-required: 'yes'|'no' - yes: The element is required. The form can't be submitted if any required element is empty. data-required: 'yes'|'no' - yes: The element is required. The form can't be submitted if any required element is empty.
General ## General
-------
Asynchronous request (read AJAX) initiated by the client receive a JSON Response from the server containing at least: Asynchronous request (read AJAX) initiated by the client receive a JSON Response from the server containing at least:
...@@ -26,6 +27,66 @@ Asynchronous request (read AJAX) initiated by the client receive a JSON Response ...@@ -26,6 +27,66 @@ Asynchronous request (read AJAX) initiated by the client receive a JSON Response
`status` indicates whether or not the request has been fullfiled by the server (`"success"`) or encountered an error (`"error"`). `status` indicates whether or not the request has been fullfiled by the server (`"success"`) or encountered an error (`"error"`).
On `"error"` the client must display `"<message>"` to the user. On `"success"`, the client may display `"<message>"` to the user. On `"error"` the client must display `"<message>"` to the user. On `"success"`, the client may display `"<message>"` to the user.
### Form Group Configuration
As part of the server response, the JSON stream may contain a key
`form-update`. It contains an array of objects having following
structure
{
...
"form-update" : [
{
"form-element": "<element_name>",
"hidden": true | false,
"disabled": true | false,
"required": true | false,
"value": <value>
},
...
],
...
}
`"form-element"`
: the name of the HTML Form Element as it appears in the `name`
attribute.
`"hidden"`
: whether the Form Group is visible (value: `false`) or
invisible (value: `true`).
`"disabled"`
: whether or not the Form Element is disabled HTML-wise.
`"required"`
: whether or not the Form Element receives the HTML5 `required`
attribute.
`"value"`
: For textual HTML Form Input elements, it is supposed to be a
scalar value, which is set on the element.
When `"form-element"` references a `<select>` element, a scalar value
selects the corresponding value from the option list. In order to replace
the option list, use an array of objects, having this format
[
{
"value": 100,
"text": "a",
"selected": true
},
{
"value": 200,
"text": "b",
"selected": false
}
]
`"select"` is optional, as is `"text"`. If `"text"` is omitted, it
will be derived from value.
Form load (update) Form load (update)
...@@ -48,7 +109,10 @@ POST ...@@ -48,7 +109,10 @@ POST
none none
##### POST ##### POST
HTML Form without `<input>` elements of type `file`. The HTML Form is required to have a HTML Form Element named `s`, which must contain the SIP.
HTML Form without `<input>` elements of type `file`. The HTML Form is
required to have a HTML Form Element named `s`, which must contain the
SIP.
### Response ### Response
...@@ -71,14 +135,25 @@ JSON Stream ...@@ -71,14 +135,25 @@ JSON Stream
] ]
} }
Name | Description status
------- | ----------- : see [General]
status | see General
message | see General message
redirect | not used : see [General]
field-name | HTML Form Element Name which raised error on server side. Requires status to be `"error"`
field-message | reason of error. Requires status to be `"error"`. redirect
form-update | Array of Objects. Each object describes the state and value of a HTML Form Element identfied by its `name` attribute. : not used
field-name
: HTML Form Element Name which raised error on server side. Requires
status to be `"error"`
field-message
: reason of error. Requires status to be `"error"`.
form-update
: Array of Objects. Each object describes the state and value of a
HTML Form Element identfied by its `name` attribute.
Form save Form save
...@@ -199,3 +274,14 @@ Delete failed: Show message. ...@@ -199,3 +274,14 @@ Delete failed: Show message.
message = <message> message = <message>
redirect = 'no' redirect = 'no'
## Glossary
SIP
: tbd
HTML Form Element
: Any `<input>` or `<select>` HTML tag. Synonymous to *Form Element*.
Form Group
: The sourrounding `<div>` containing the `.control-label`,
`.form-control` `<div>`s, and `.help-block` `<p>`.
...@@ -99,7 +99,7 @@ ...@@ -99,7 +99,7 @@
class="glyphicon glyphicon-trash"></span></button> class="glyphicon glyphicon-trash"></span></button>
</div> </div>
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<a id="form-new-button" href="http://www.wikipedia.org" class="btn btn-default navbar-btn"><span <a id="form-new-button" href="personmock.html?s=badcaffe1" class="btn btn-default navbar-btn"><span
class="glyphicon glyphicon-plus"></span></a> class="glyphicon glyphicon-plus"></span></a>
</div> </div>
</div> </div>
...@@ -170,7 +170,8 @@ ...@@ -170,7 +170,8 @@
<label for="personHandle" class="control-label">Kurzform</label> <label for="personHandle" class="control-label">Kurzform</label>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<input id="personHandle" name="personhandle" type="text" class="form-control"> <input id="personHandle" name="personhandle" type="text" class="form-control"
data-required="no">
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
......
...@@ -165,7 +165,7 @@ ...@@ -165,7 +165,7 @@
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<input id="name" type="text" class="form-control"> <input id="name" type="text" class="form-control" name="name">
</div> </div>
</div> </div>
...@@ -176,7 +176,7 @@ ...@@ -176,7 +176,7 @@
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<input id="firstname" type="text" class="form-control"> <input id="firstname" type="text" class="form-control" name="firstname">
</div> </div>
</div> </div>
...@@ -185,7 +185,7 @@ ...@@ -185,7 +185,7 @@
<label for="nameShort" class="control-label">Vorname Kurz</label> <label for="nameShort" class="control-label">Vorname Kurz</label>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<input id="nameShort" type="text" name="personHandle" class="form-control"> <input id="nameShort" type="text" name="nameShort" class="form-control">
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
...@@ -198,7 +198,7 @@ ...@@ -198,7 +198,7 @@
<label for="personHandle" class="control-label">Kurzform</label> <label for="personHandle" class="control-label">Kurzform</label>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<input id="personHandle" type="text" class="form-control"> <input id="personHandle" type="text" class="form-control" name="personHandle">
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
...@@ -227,7 +227,7 @@ ...@@ -227,7 +227,7 @@
<label for="selectTest2" class="control-label">Titel</label> <label for="selectTest2" class="control-label">Titel</label>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<select id="selectTest2" class="form-control"> <select id="selectTest2" class="form-control" name="selectTest2">
<option value="1">a</option> <option value="1">a</option>
<option value="2" selected>b</option> <option value="2" selected>b</option>
<option value="3">c</option> <option value="3">c</option>
......
...@@ -10,7 +10,6 @@ ...@@ -10,7 +10,6 @@
</head> </head>
<body> <body>
<section class="container-fluid"> <section class="container-fluid">
<header class="page-header"> <header class="page-header">
<h1>Keep Track of Navigation State</h1> <h1>Keep Track of Navigation State</h1>
...@@ -139,7 +138,7 @@ ...@@ -139,7 +138,7 @@
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<input id="name" type="text" class="form-control"> <input id="name" type="text" class="form-control" name="name">
</div> </div>
</div> </div>
...@@ -150,7 +149,7 @@ ...@@ -150,7 +149,7 @@
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<input id="firstname" type="text" class="form-control"> <input id="firstname" type="text" class="form-control" name="firstname">
</div> </div>
</div> </div>
...@@ -159,7 +158,7 @@ ...@@ -159,7 +158,7 @@
<label for="nameShort" class="control-label">Vorname Kurz</label> <label for="nameShort" class="control-label">Vorname Kurz</label>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<input id="nameShort" type="text" name="personHandle" class="form-control"> <input id="nameShort" type="text" name="nameShort" class="form-control">
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
...@@ -172,7 +171,7 @@ ...@@ -172,7 +171,7 @@
<label for="personHandle" class="control-label">Kurzform</label> <label for="personHandle" class="control-label">Kurzform</label>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<input id="personHandle" type="text" class="form-control"> <input id="personHandle" type="text" class="form-control" name="personHandle">
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
...@@ -201,7 +200,7 @@ ...@@ -201,7 +200,7 @@
<label for="selectTest2" class="control-label">Titel</label> <label for="selectTest2" class="control-label">Titel</label>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<select id="selectTest2" class="form-control"> <select id="selectTest2" class="form-control" name="selectTest2">
<option value="1">a</option> <option value="1">a</option>
<option value="2" selected>b</option> <option value="2" selected>b</option>
<option value="3">c</option> <option value="3">c</option>
...@@ -219,6 +218,8 @@ ...@@ -219,6 +218,8 @@
<!-- a disturber hidden element --> <!-- a disturber hidden element -->
<input type="hidden" name="gender"> <input type="hidden" name="gender">
<div class="col-md-6"> <div class="col-md-6">
<!-- a disturber hidden element -->
<input type="hidden" name="gender">
<div class="radio"> <div class="radio">
<label> <label>
<input type="radio" name="gender" value="male">male <input type="radio" name="gender" value="male">male
...@@ -254,6 +255,7 @@ ...@@ -254,6 +255,7 @@
</b> </b>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="checkbox"> <div class="checkbox">
<label> <label>
...@@ -274,6 +276,7 @@ ...@@ -274,6 +276,7 @@
</b> </b>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="checkbox"> <div class="checkbox">
<label> <label>
......
@startuml @startuml
scale max 2100*2970
skinparam classAttributeIconSize 0 skinparam classAttributeIconSize 0
package "QfqNS" { package "QfqNS" {
class Alert { class Alert {
-makeAlertContainerSingleton() +isShown()
-countAlertsInAlertContainer() +show()
-getAlertClassbasedOnMessageTyp() -afterFadeIn()
-getButtons() -cancelButtonHandler()
-afterFadeIn() -countAlertsInAlertContainer()
-removeAlert() -getAlertClassbasedOnMessageTyp()
-okButtonHandler() -getButtons()
-saveButtonHandler() -makeAlertContainerSingleton()
-cancelButtonHandler() -okButtonHandler()
+isShown() -removeAlert()
+show() -saveButtonHandler()
} }
class EventEmitter class EventEmitter
class BSTabs class QfqEvents <<mixin>> {
class FileDelete +makePayload()
class FileUpload +onMixin()
class Form }
class PageState
class PageTitle <<singleton>> class BSTabs {
class QfqForm +activateTab()
class QfqPage +getActiveTab()
class QfqRecordList +getContainingTabIdForFormControl()
class Log <<singleton>> +getCurrentTab()
+getTabAnchors()
+getTabIds()
+getTabName()
-fillTabInformation()
-installTabHandlers()
-tabShowHandler()
-getActiveTabFromDOM()
}
class FileDelete {
-setupOnClickHandler()
-buttonClicked()
-performFileDelete()
-prepareData()
-ajaxSuccessHandler()
-ajaxErrorHandler()
}
class FileUpload {
-setupOnChangeHandler()
-performFileUpload()
-prepareData()
-ajaxSuccessHandler()
-ajaxErrorHandler()
}
class Form {
+getFormChanged()
+resetFormChanged()
+submitTo()
+validate()
-ajaxSuccessHandler()
-changeHandler()
-serialize()
-submitFailureHandler()
}
class PageState {
-popStateHandler()
+getPageState()
+getPageData()
+setPageState()
+newPageState()
}
class PageTitle <<static>> {
+set()
+get()
+setSubTitle()
}
class QfqForm {
+getSip()
+submit()
-ajaxDeleteSuccessDispatcher()
-applyElementConfiguration()
-changeHandler()
-clearAllValidationStates()
-destroyFormAndSetText()
-endUploadHandler()
-fileDeleteSuccessHandler()
-fileUploadSuccessHandler()
-formUpdateHandler()
-getCloseButton()
-getDeleteButton()
-getFormGroupByControlName()
-getNewButton()
-getNewButtonTarget()
-getSaveButton()
-handleCloseClick()
-handleDeleteClick()
-handleDeleteSuccess()
-handleFormUpdate()
-handleLogicDeleteError()
-handleLogicSubmitError()
-handleNewClick()
-handleSaveClick()
-handleSubmitSuccess()
-readElementConfigurationData()
-resetHandler()
-resetValidationState()
-setBsTabs()
-setButtonEnabled()
-setHelpBlockValidationMessage()
-setValidationState()
-setupFormUpdateHandler()
-startUploadHandler()
-submitSuccessDispatcher()
}
class QfqPage {
-destroyFormHandler()
-tabShowHandler()
-popStateHandler()
}
class QfqRecordList {
-connectClickHandler()
-handleDeleteButtonClick()
-ajaxDeleteSuccessDispatcher()
-handleDeleteSuccess()
-getRecordElement()
-handleLogicDeleteError()
}
class Log <<static>> {
+message()
+debug()
+warning()
+error()
}
Alert .. FileDelete Alert .. FileDelete
Alert .. QfqForm Alert .. QfqForm
...@@ -44,27 +156,56 @@ PageTitle .. QfqPage ...@@ -44,27 +156,56 @@ PageTitle .. QfqPage
BSTabs "1" <--* "1" QfqForm BSTabs "1" <--* "1" QfqForm
Form "1" <--* "1" QfqForm Form "1" <--* "1" QfqForm
EventEmitter "1" <--* "1" QfqForm QfqEvents "1" <--* "1" QfqForm
FileUpload "1" <--* "1" QfqForm FileUpload "1" <--* "1" QfqForm
FileDelete "1" <--* "1" QfqForm FileDelete "1" <--* "1" QfqForm
EventEmitter "1" <--* "1" PageState QfqEvents <-- Alert
QfqEvents "1" <--* "1" PageState
Log .. PageState Log .. PageState
EventEmitter "1" <--* "1" FileUpload QfqEvents "1" <--* "1" FileUpload
EventEmitter "1" <--* "1" FileDelete QfqEvents "1" <--* "1" FileDelete
EventEmitter "1" <--* "1" BSTabs QfqEvents "1" <--* "1" BSTabs
EventEmitter <-- QfqEvents
} }
package "QfqNS.Element" { package "QfqNS.Element" {
class Checkbox class Checkbox {
class FormGroup +setValue()
class Radio +getValue()
class Select }
class Textual
class FormGroup {
+hasHelpBlock()
+hasLabel()
+isType()
+setEnabled()
+setHidden()
+setReadOnly()
+setRequired()
-$findFormGroup()
-readOnlyHandler()
}
class Radio {
+setValue()
+getValue()
}
class Select {
+getValue()
+setValue()
-clearSelection()
-setSelection()
}
class Textual {
+setValue()
+getValue()
}
FormGroup <-- Checkbox FormGroup <-- Checkbox
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment