Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
typo3
qfq
Commits
ffed325a
Commit
ffed325a
authored
May 09, 2016
by
Carsten Rose
Browse files
Merge remote-tracking branch 'origin/raos_work' into crose_work
parents
42b38bf2
cf61161b
Changes
5
Hide whitespace changes
Inline
Side-by-side
API.md
View file @
ffed325a
API: Client / Server
====================
Form initial call
-----------------
...
...
@@ -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-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:
...
...
@@ -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"`
).
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)
...
...
@@ -48,7 +109,10 @@ POST
none
##### 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
...
...
@@ -71,14 +135,25 @@ JSON Stream
]
}
Name | Description
------- | -----------
status | see General
message | see General
redirect | 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.
status
: see [General]
message
: see [General]
redirect
: 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
...
...
@@ -199,3 +274,14 @@ Delete failed: Show message.
message =
<message>
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>`
.
mockup/personmock.html
View file @
ffed325a
...
...
@@ -99,7 +99,7 @@
class=
"glyphicon glyphicon-trash"
></span></button>
</div>
<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>
</div>
</div>
...
...
@@ -170,7 +170,8 @@
<label
for=
"personHandle"
class=
"control-label"
>
Kurzform
</label>
</div>
<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
class=
"col-md-4"
>
...
...
tests/jasmine/SpecRunner.html
View file @
ffed325a
...
...
@@ -165,7 +165,7 @@
</div>
<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>
...
...
@@ -176,7 +176,7 @@
</div>
<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>
...
...
@@ -185,7 +185,7 @@
<label
for=
"nameShort"
class=
"control-label"
>
Vorname Kurz
</label>
</div>
<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
class=
"col-md-4"
>
...
...
@@ -198,7 +198,7 @@
<label
for=
"personHandle"
class=
"control-label"
>
Kurzform
</label>
</div>
<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
class=
"col-md-4"
>
...
...
@@ -227,7 +227,7 @@
<label
for=
"selectTest2"
class=
"control-label"
>
Titel
</label>
</div>
<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=
"2"
selected
>
b
</option>
<option
value=
"3"
>
c
</option>
...
...
tests/jasmine/SpecRunner.tmpl
View file @
ffed325a
...
...
@@ -10,7 +10,6 @@
</head>
<body>
<section
class=
"container-fluid"
>
<header
class=
"page-header"
>
<h1>
Keep Track of Navigation State
</h1>
...
...
@@ -139,7 +138,7 @@
</div>
<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>
...
...
@@ -150,7 +149,7 @@
</div>
<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>
...
...
@@ -159,7 +158,7 @@
<label
for=
"nameShort"
class=
"control-label"
>
Vorname Kurz
</label>
</div>
<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
class=
"col-md-4"
>
...
...
@@ -172,7 +171,7 @@
<label
for=
"personHandle"
class=
"control-label"
>
Kurzform
</label>
</div>
<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
class=
"col-md-4"
>
...
...
@@ -201,7 +200,7 @@
<label
for=
"selectTest2"
class=
"control-label"
>
Titel
</label>
</div>
<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=
"2"
selected
>
b
</option>
<option
value=
"3"
>
c
</option>
...
...
@@ -219,6 +218,8 @@
<!-- a disturber hidden element -->
<input
type=
"hidden"
name=
"gender"
>
<div
class=
"col-md-6"
>
<!-- a disturber hidden element -->
<input
type=
"hidden"
name=
"gender"
>
<div
class=
"radio"
>
<label>
<input
type=
"radio"
name=
"gender"
value=
"male"
>
male
...
...
@@ -254,6 +255,7 @@
</b>
</div>
<div
class=
"col-md-6"
>
<div
class=
"checkbox"
>
<label>
...
...
@@ -274,6 +276,7 @@
</b>
</div>
<div
class=
"col-md-6"
>
<div
class=
"checkbox"
>
<label>
...
...
uml/javascript/classdiagram.pu
View file @
ffed325a
@
startuml
scale
max
2100
*
2970
skinparam
classAttributeIconSize
0
package
"QfqNS"
{
class
Alert
{
-
makeAlertContainerSingleto
n
()
-
countAlertsInAlertContainer
()
-
getAlertClassbasedOnMessageTyp
()
-
getButtons
()
-
afterFadeIn
()
-
removeAlert
()
-
okButtonHandler
()
-
saveButtonHandler
()
-
cancel
ButtonHandler
()
+
isShown
()
+
show
()
+
isShow
n
()
+
show
()
-
afterFadeIn
()
-
cancelButtonHandler
()
-
countAlertsInAlertContainer
()
-
getAlertClassbasedOnMessageTyp
()
-
getButtons
()
-
makeAlertContainerSingleton
()
-
ok
ButtonHandler
()
-
removeAlert
()
-
saveButtonHandler
()
}
class
EventEmitter
class
BSTabs
class
FileDelete
class
FileUpload
class
Form
class
PageState
class
PageTitle
<<
singleton
>>
class
QfqForm
class
QfqPage
class
QfqRecordList
class
Log
<<
singleton
>>
class
QfqEvents
<<
mixin
>>
{
+
makePayload
()
+
onMixin
()
}
class
BSTabs
{
+
activateTab
()
+
getActiveTab
()
+
getContainingTabIdForFormControl
()
+
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
..
QfqForm
...
...
@@ -44,27 +156,56 @@ PageTitle .. QfqPage
BSTabs
"1"
<--*
"1"
QfqForm
Form
"1"
<--*
"1"
QfqForm
Event
Emitter
"1"
<--*
"1"
QfqForm
Qfq
Event
s
"1"
<--*
"1"
QfqForm
FileUpload
"1"
<--*
"1"
QfqForm
FileDelete
"1"
<--*
"1"
QfqForm
EventEmitter
"1"
<--*
"1"
PageState
QfqEvents
<--
Alert
QfqEvents
"1"
<--*
"1"
PageState
Log
..
PageState
Event
Emitter
"1"
<--*
"1"
FileUpload
Qfq
Event
s
"1"
<--*
"1"
FileUpload
Event
Emitter
"1"
<--*
"1"
FileDelete
Qfq
Event
s
"1"
<--*
"1"
FileDelete
EventEmitter
"1"
<--*
"1"
BSTabs
QfqEvents
"1"
<--*
"1"
BSTabs
EventEmitter
<--
QfqEvents
}
package
"QfqNS.Element"
{
class
Checkbox
class
FormGroup
class
Radio
class
Select
class
Textual
class
Checkbox
{
+
setValue
()
+
getValue
()
}
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
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment