diff --git a/404.html b/404.html index 190c1cbf..d9d6db20 100644 --- a/404.html +++ b/404.html @@ -1,2 +1,2 @@ 404 Page not found -

Error

Woops. Looks like this page doesn't exist ¯\_(ツ)_/¯.

Go to homepage

Page not found!

\ No newline at end of file +

Error

Woops. Looks like this page doesn't exist ¯\_(ツ)_/¯.

Go to homepage

Page not found!

\ No newline at end of file diff --git a/architecture/index.html b/architecture/index.html index 7c658a18..9add7b42 100644 --- a/architecture/index.html +++ b/architecture/index.html @@ -1,7 +1,7 @@ -Architecture :: Fore Documentation -
Version 1.0.0 @@ -42,4 +42,4 @@ initialization

Read More…
\ No newline at end of file +
\ No newline at end of file diff --git a/architecture/initialization/index.html b/architecture/initialization/index.html index 6cd4b616..2c5183b0 100644 --- a/architecture/initialization/index.html +++ b/architecture/initialization/index.html @@ -1,7 +1,7 @@ -Initialization :: Fore Documentation -
\ No newline at end of file +
\ No newline at end of file diff --git a/architecture/update-cycle/index.html b/architecture/update-cycle/index.html index caed817b..79771479 100644 --- a/architecture/update-cycle/index.html +++ b/architecture/update-cycle/index.html @@ -1,7 +1,7 @@ -Update Cycle :: Fore Documentation -
\ No newline at end of file +
\ No newline at end of file diff --git a/categories/index.html b/categories/index.html index 7fdc0801..58524140 100644 --- a/categories/index.html +++ b/categories/index.html @@ -1,7 +1,7 @@ -Categories :: Fore Documentation -

category :: -Fore

hello

    \ No newline at end of file +Fore

    hello

    \ No newline at end of file diff --git a/elements/actions/action/index.html b/elements/actions/action/index.html index 48ab8634..354d702c 100644 --- a/elements/actions/action/index.html +++ b/elements/actions/action/index.html @@ -1,7 +1,7 @@ -<fx-action> :: Fore Documentation -
    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/actions/append/index.html b/elements/actions/append/index.html index 09933a1e..4f70c656 100644 --- a/elements/actions/append/index.html +++ b/elements/actions/append/index.html @@ -1,7 +1,7 @@ -<fx-append> :: Fore Documentation -

    <fx-append>

    Description

    Appends an entry to an fx-repeat.

    Note: this is deprecated. Please use fx-insert.

    Attributes

    NameDescription
    refthe XPath ref to append to
    repeatthe fx-repeat to append to

    Events

    NameDescription
    index-changeddispatched after entry has been added to a repeat

    Examples

    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/actions/confirm/index.html b/elements/actions/confirm/index.html index abca2eab..e727086e 100644 --- a/elements/actions/confirm/index.html +++ b/elements/actions/confirm/index.html @@ -1,11 +1,11 @@ -<fx-confirm> :: Fore Documentation -

    <fx-confirm>

    Description

    Displays simple confirmation dialog. Action will only execute if confirmation returns true.

    Attributes

    NameDescription
    messageMessage to display for confirmation.

    Action Attributes

    NameDescription
    targetid reference to element this action attaches to

    Events

    none

    Examples

    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/actions/delete/index.html b/elements/actions/delete/index.html index 55203190..f39c89e4 100644 --- a/elements/actions/delete/index.html +++ b/elements/actions/delete/index.html @@ -1,7 +1,7 @@ -<fx-delete> :: Fore Documentation -

    <fx-delete>

    Description

    Deletes a node from a nodeset.

    fx-delete Attributes

    NameDescription
    refXPath reference to instance node(s) to delete

    Examples

    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/actions/dispatch/index.html b/elements/actions/dispatch/index.html index 21028d8e..e30193fa 100644 --- a/elements/actions/dispatch/index.html +++ b/elements/actions/dispatch/index.html @@ -1,7 +1,7 @@ -<fx-dispatch> :: Fore Documentation -

    <fx-dispatch>

    Description

    Action to dispatch an event with optional parameters to specific targets.

    To specify event properties the fx-property element is used.

    fx-dispatch will use id resolution within fx-repeat elements to resolve the id in scope of current occurence.

    Attributes

    NameDescription
    namename of event to dispatch
    targetidid reference of element to dispatch to

    Events

    none

    Examples

    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/actions/hide/index.html b/elements/actions/hide/index.html index a04bd03f..63561244 100644 --- a/elements/actions/hide/index.html +++ b/elements/actions/hide/index.html @@ -1,11 +1,11 @@ -<fx-hide> :: Fore Documentation -

    <fx-hide>

    Description

    Action to hide a fx-dialog.

    Attributes

    NameDescription
    dialogidref of an fx-dialog element.

    Events

    NameDescription
    dialog-hiddendispatched when dialog is hidden

    Examples

    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/actions/index.html b/elements/actions/index.html index 212d7222..ade04c3a 100644 --- a/elements/actions/index.html +++ b/elements/actions/index.html @@ -1,7 +1,7 @@ -Actions :: Fore Documentation -
    Read More…
    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/actions/insert/index.html b/elements/actions/insert/index.html index ea8b1663..fd39b281 100644 --- a/elements/actions/insert/index.html +++ b/elements/actions/insert/index.html @@ -1,11 +1,11 @@ -<fx-insert> :: Fore Documentation -

    <fx-insert>

    Description

    Action to insert node(s) into instance data.

    Attributes

    NameDescriptionDefault
    atindex position in nodeset where to insert new node(s)0
    contextoptional XPath pointing to parent node of node to insert
    positionwith regard to ‘at’ can be either ‘before’ or ‘after’after
    originXPath pointing to nodes to be inserted into referenced nodeset
    keepValuesBoolean attribute. When present will keep text-values of origin nodesfalse
    refXPath pointing to node(s) to insert. If context is given ref is relative to that

    Events

    NameDescription
    insertdispatched when nodes have been inserted
    detail[insertedNodes] - the inserted nodes
    detail[position] - the position of the insert in the nodeset

    Examples

    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/actions/load/index.html b/elements/actions/load/index.html index 4b2a4c0d..b167193f 100644 --- a/elements/actions/load/index.html +++ b/elements/actions/load/index.html @@ -1,7 +1,7 @@ -<fx-load> :: Fore Documentation -
    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/actions/message/index.html b/elements/actions/message/index.html index 842ee16c..f133acff 100644 --- a/elements/actions/message/index.html +++ b/elements/actions/message/index.html @@ -1,7 +1,7 @@ -<fx-message> :: Fore Documentation -

    <fx-message>

    Description

    Display a message to the user.

    Attributes

    NameDescriptiondefault
    level‘modal’, ‘modeless’ or ’ephemeral’ephemeral
    ‘modal’ - modal dialog window
    ‘sticky’ - sticky popup message
    ’ephemeral’ - auto-closing popup messagedefault
    valueXPath expression which resolves to message

    Events

    none

    Examples

    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/actions/refresh/index.html b/elements/actions/refresh/index.html index 881831c6..e11afc77 100644 --- a/elements/actions/refresh/index.html +++ b/elements/actions/refresh/index.html @@ -1,7 +1,7 @@ -<fx-refresh> :: Fore Documentation -

    <fx-refresh>

    Description

    Triggers immediate refresh.

    Attributes

    NameDescription
    controlid of an control to be refreshed explicitly
    forcemarker attribute to force a full refresh - overrules control
    selfsearches upwards for fx-control and refreshes it

    Events

    none

    Examples

    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/actions/replace/index.html b/elements/actions/replace/index.html index a3013e2e..87902e2b 100644 --- a/elements/actions/replace/index.html +++ b/elements/actions/replace/index.html @@ -1,11 +1,11 @@ -<fx-replace> :: Fore Documentation -

    <fx-replace>

    Description

    Replaces a node with another.

    Attributes

    NameDescription
    refXPath reference pointing to the bound node
    withXPath expression to point to a node for replacement

    Examples

    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/actions/reset/index.html b/elements/actions/reset/index.html index 1d3d85b0..314b7ebd 100644 --- a/elements/actions/reset/index.html +++ b/elements/actions/reset/index.html @@ -1,7 +1,7 @@ -<fx-reset> :: Fore Documentation -

    <fx-reset>

    Description

    Replaces a node with another.

    Attributes

    NameDescription
    instancethe id of the instance to reset to its initial state

    Examples

    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/actions/return/index.html b/elements/actions/return/index.html index 42ccfd23..4bf2b987 100644 --- a/elements/actions/return/index.html +++ b/elements/actions/return/index.html @@ -1,11 +1,11 @@ -<fx-return> :: Fore Documentation -

    <fx-return>

    Description

    The fx-return action is exclusively used within the context of bound Fore elements.

    Attributes

    NameDescription
    refXPath reference pointing to the bound node
    withXPath expression to point to a node for replacement

    Action Attributes

    see Action

    Examples

    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/actions/send/index.html b/elements/actions/send/index.html index 1d007e96..2a533ee4 100644 --- a/elements/actions/send/index.html +++ b/elements/actions/send/index.html @@ -1,7 +1,7 @@ -<fx-send> :: Fore Documentation -

    <fx-send>

    Description

    Triggers a submission. Submission with given id must exist otherwise error is thrown.

    Attributes

    NameDescription
    submissionrequired idref to fx-submission element. Also supports ‘#reload’ which just reloads the window.
    targetoverwrites target attribute of submission - may contain template expressions
    urloverwrites url attribute of submission - may contain template expressions

    Attributes that overwrite submission attributes are set once per execution. Calling the same submission again without such an attribute falls back to the value on fx-submission element.

    Events

    NameDescription
    loglog event is dispatched in case submission id cannot be found

    Examples

    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/actions/setfocus/index.html b/elements/actions/setfocus/index.html index 97665639..2d8d8c8c 100644 --- a/elements/actions/setfocus/index.html +++ b/elements/actions/setfocus/index.html @@ -1,7 +1,7 @@ -<fx-setfocus> :: Fore Documentation -

    <fx-setfocus>

    Description

    Sets the focus to a control with given id. If the id is within an repeat it will look for the active repeatitem and search that for the control.

    Since: Version 2.0.0

    Attributes

    NameDescription
    controlidref that a control
    selectif attribute is given the value of the control will be selected

    Events

    none

    Examples

    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/actions/setvalue/index.html b/elements/actions/setvalue/index.html index ab456e44..cf977888 100644 --- a/elements/actions/setvalue/index.html +++ b/elements/actions/setvalue/index.html @@ -1,11 +1,11 @@ -<fx-setvalue> :: Fore Documentation -

    <fx-setvalue>

    Description

    Sets a value to a bound node.

    Attributes

    NameDescription
    refXPath reference pointing to the bound node
    valueXPath expression to be set as value

    Events

    none

    Examples

    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/actions/show/index.html b/elements/actions/show/index.html index a86f3211..ef07fb1c 100644 --- a/elements/actions/show/index.html +++ b/elements/actions/show/index.html @@ -1,11 +1,11 @@ -<fx-show> :: Fore Documentation -

    <fx-show>

    Description

    Action to display a fx-dialog.

    Attributes

    NameDescription
    dialogidref of an fx-dialog element.

    Events

    NameDescription
    dialog-showndispatched when dialog is shown

    Examples

    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/actions/toggle/index.html b/elements/actions/toggle/index.html index ba66811f..48ab1d14 100644 --- a/elements/actions/toggle/index.html +++ b/elements/actions/toggle/index.html @@ -1,11 +1,11 @@ -<fx-toggle> :: Fore Documentation -

    <fx-toggle>

    Description

    Action to toggle a fx-switch element.

    Attributes

    NameDescription
    caseid of fx-case element to show

    Events

    none

    Examples

    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/actions/toggleboolean/index.html b/elements/actions/toggleboolean/index.html index 29de2473..c0ad7b16 100644 --- a/elements/actions/toggleboolean/index.html +++ b/elements/actions/toggleboolean/index.html @@ -1,7 +1,7 @@ -<fx-toggleboolean> :: Fore Documentation -

    <fx-toggleboolean>

    Description

    Action to toggle a Boolean value in the data.

    Attributes

    NameDescription
    refrequired: XPath reference to toggle

    Events

    none

    Examples

    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/actions/update/index.html b/elements/actions/update/index.html index db37dcc0..47c4797b 100644 --- a/elements/actions/update/index.html +++ b/elements/actions/update/index.html @@ -1,11 +1,11 @@ -<fx-update> :: Fore Documentation -

    <fx-update>

    Description

    Triggers an explicit update of the model

    Attributes

    No Attributes

    Events

    none

    Examples

    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/fore/index.html b/elements/fore/index.html index 5a1749d8..9be4045c 100644 --- a/elements/fore/index.html +++ b/elements/fore/index.html @@ -1,7 +1,7 @@ -fx-fore :: Fore Documentation -
    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/index.html b/elements/index.html index c5887063..c7bdae69 100644 --- a/elements/index.html +++ b/elements/index.html @@ -1,7 +1,7 @@ -Elements :: Fore Documentation -

    Fore Elements

    Fore Elements are a set of Web Components that allow to build @@ -15,4 +15,4 @@ fx-fore

    Read More…
    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/model/bind/index.html b/elements/model/bind/index.html index afa58e09..db987c41 100644 --- a/elements/model/bind/index.html +++ b/elements/model/bind/index.html @@ -1,7 +1,7 @@ -<fx-bind> :: Fore Documentation -

    <fx-bind>

    Description

    The fx-bind element attaches constraints and calculations to instance nodes.

    By using XPath expressions for the attributes users can build complex calculation and validation rules (business logic) using a declarative syntax.

    fx-bindelements can be nested thereby taking part in inscope resolution resolving their ref attributes relative to their parent element.

    The bindings are used to build the MDG (Main Dependency Graph) which detects dependencies between nodes and builds a graph that connects the dependent nodes to the currently processed one. This directed graph will then be ordered for computation. Circular dependencies are not allowed.

    When nodes are changed by user interaction only affected nodes are recomputed - affected nodes are nodes that have a connection to the changed node in the graph.

    This change detection mechanism also drives efficient updating of the UI by selectively updating only controls that are bound to affected nodes.

    Attributes

    NameDescriptionDefault
    refXPath pointing to node(s) the bind is attaching to-
    calculateXPath expression to be calculated. Result will become value of node(s) referenced by ref-
    constraintboolean XPath expression to determine validity of node(s)true
    readonlyboolean XPath expression to determine readonly/readwrite statefalse
    relevantboolean XPath expression to determine relevant/non-relevant statetrue
    requiredboolean XPath expression to determine required/optional statefalse
    typedatatype - reserved for future versionsstring

    Events

    none

    Examples

    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/model/functions/index.html b/elements/model/functions/index.html index 0ba65b39..a0ed0de2 100644 --- a/elements/model/functions/index.html +++ b/elements/model/functions/index.html @@ -1,7 +1,7 @@ -<fx-function> :: Fore Documentation -
    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/model/index.html b/elements/model/index.html index 028b7684..be6f1206 100644 --- a/elements/model/index.html +++ b/elements/model/index.html @@ -1,7 +1,7 @@ -Model :: Fore Documentation -
    Read More…
    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/model/instance/index.html b/elements/model/instance/index.html index 292444f3..be2533fe 100644 --- a/elements/model/instance/index.html +++ b/elements/model/instance/index.html @@ -1,7 +1,7 @@ -<fx-instance> :: Fore Documentation -

    <fx-instance>

    Description

    Holds the data of the model. A fx-model may have as many fx-instance elements as necessary.

    Attributes

    NameDescriptiondefault
    credentialssets credentials policy - one of ‘omit’, ‘same-origin’ or ‘include’same-origin
    idid of the instance for addressing in refsdefault
    srcurl to load instance from via http get
    type‘xml’ or ‘json’ or ‘html’ are supported by nowxml
    xpath-default-namespacenamespace to be used with unprefixed XPathesemtpy

    URI Schemes

    In addition to ‘http’, ‘https’ further URI schemes are:

    • ‘#querystring’ will create a XML structure for the URL parameter of the page
    • ’localStore:[key]’ to read some data from browsers’ localstorage

    Examples

    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/model/model/index.html b/elements/model/model/index.html index 8665a9f2..9c93a1b1 100644 --- a/elements/model/model/index.html +++ b/elements/model/model/index.html @@ -1,25 +1,28 @@ -<fx-model> :: Fore Documentation -

    <fx-model>

    Description

    The model is responsible for:

    • creating and maintaining the Main Dependency Graph (MDG).
    • creating ModelItems for bound data nodes
    • calculation
    • validation

    This is done with the help of bind elements.

    The <fx-model> element is a direct child of <fx-fore> and is itself a container for:

    • one or more <fx-instance> elements
    • zero, one or more <fx-bind> elements
    • zero, one or more <fx-submission> elements
    • zero, one or more <fx-function> elements
    <fx-model>
-    <fx-instance><fx-instance>
-    <fx-instance id="second"><fx-instance>
-    <fx-instance id="third"><fx-instance>
-    
-    <fx-bind></fx-bind>
-    <fx-bind></fx-bind>
-    ...
-    
-    <fx-submission id="load"></fx-submission>
-    <fx-submission id="save"></fx-submission>
-</fx-model>
+fx-model

    <fx-model>

    Description

    The model is responsible for:

    This is done with the help of bind elements.

    The <fx-model> element is a direct child of <fx-fore> and is itself a container for:

    Warning: <fx-model> must be first child element of <fx-fore> due to not fully understood Web Components behaviour.

    <fx-fore>
+    <fx-model>
+        <fx-instance><fx-instance>
+        <fx-instance id="second"><fx-instance>
+        <fx-instance id="third"><fx-instance>
+        
+        <fx-bind></fx-bind>
+        <fx-bind></fx-bind>
+        ...
+        
+        <fx-submission id="load"></fx-submission>
+        <fx-submission id="save"></fx-submission>
+    </fx-model>
+    <!-- UI here -->
+</fx-fore>

    If there’s more than one <fx-instance> or <fx-submission> you need to add an id attribute for identification.

    Attributes

    none

    Events

    EventDescriptionDetails
    model-constructfirst event to be emitted by Fore-
    model-construct-doneemitted when model has been initialized-
    rebuild-donewhen a rebuild has taken place‘maingraph’ - the maingraph object being used
    recalculate-donewhen a recalculation has taken place‘subgraph’ - the subgraph object being used
    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/model/submission/index.html b/elements/model/submission/index.html index 43e9e0ed..2623038b 100644 --- a/elements/model/submission/index.html +++ b/elements/model/submission/index.html @@ -1,7 +1,7 @@ -<fx-submission> :: Fore Documentation -

    <fx-submission>

    Description

    Send and receive data.

    Attributes

    NameDescriptionDefault
    credentialssets credentials policy - one of ‘omit’, ‘same-origin’ or ‘include’same-origin
    idrequired: id of submission for referral‘default’
    refXPath reference pointing to the bound noderoot node of default instance
    instanceid of instance when replace='instance'. Required when replace=‘instance’
    intoXPath expr where to insert response nodes into
    methodhttp methods GET, POST, PUT, DELETE, url-encoded-postGET
    nonrelevanthandling of non relevant nodes during serialization. Can be one of ‘keep’, ’empty’ or ‘remove’remove
    replaceone of ‘all’, ‘download’, ‘instance’, ’target’, ‘redirect’ or ’none’all
    ‘all’ - response replaces the viewport
    ‘download’ - save dialog is shown for response
    ‘instance’ - response replaces the instance given by the instance attribute or if not present the default instance
    ’target’ - response will be attached to element identified by target (CSS Selector syntax e.g. ‘#mydiv’)
    ‘redirect’ - use response as redirect url.
    ’none’ - response will be ignored.
    serialization’none’ or ‘xml’ at this pointxml
    targetselector in CSS selector syntax. valid only when replace is ’target’.
    targetrefXPath pointing to target node when replace="instance"
    validateBoolean to turn validator mode on/offtrue

    Events

    NameDescription
    submitdispatch before submission takes place
    submit-errordispatched if the request returned an error
    submit-donedispatched when submission was successfully completed

    URL Schemes

    Beside http, https Fore supports:

    • ’localStore:[key]’ to manage data in the browsers’ localstorage (supports ‘get’, ‘post’, ‘delete’ and ‘consume’ methods
    • ‘#echo’ to echo back whatever got sent

    Examples

    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/ui/alert/index.html b/elements/ui/alert/index.html index f4dad112..04d7180f 100644 --- a/elements/ui/alert/index.html +++ b/elements/ui/alert/index.html @@ -1,7 +1,7 @@ -<fx-alert> :: Fore Documentation -

    <fx-alert>

    Description

    fx-alert element is used for messaging validation errors and may be used within fx-bind element or as a child of a UI control like fx-control.

    Attributes

    No Attributes

    Events

    none

    Examples

    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/ui/case/index.html b/elements/ui/case/index.html index 268ea974..1215e886 100644 --- a/elements/ui/case/index.html +++ b/elements/ui/case/index.html @@ -1,7 +1,7 @@ -<fx-case> :: Fore Documentation -

    <fx-case>

    Description

    Defines one ‘page’ of a fx-switch element.

    Attributes

    NameDescription
    labeloptional label
    namea unique name to be used with fx-toggle

    Events

    NameDescription
    selectdispatched to fx-case when a case gets selected
    deselectdispatched to fx-case when case gets deselected

    Examples

    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/ui/container/index.html b/elements/ui/container/index.html index 8185a8f3..c9a6be2a 100644 --- a/elements/ui/container/index.html +++ b/elements/ui/container/index.html @@ -1,7 +1,7 @@ -<fx-container> :: Fore Documentation -

    <fx-container>

    <fx-container> is an abstract class used for container controls like <fx-group> and <fx-switch>.

    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/ui/control/index.html b/elements/ui/control/index.html index 58ef7d25..14b80297 100644 --- a/elements/ui/control/index.html +++ b/elements/ui/control/index.html @@ -1,7 +1,7 @@ -<fx-control> :: Fore Documentation -
    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/ui/dialog/index.html b/elements/ui/dialog/index.html index 05fe7757..f7f93c3e 100644 --- a/elements/ui/dialog/index.html +++ b/elements/ui/dialog/index.html @@ -1,7 +1,7 @@ -<fx-dialog> :: Fore Documentation -

    <fx-dialog>

    Description

    Simple modal dialog with arbitrary content.

    To be used with fx-show and fx-hide actions.

    Attributes

    NameDescription
    idrequired to be used by fx-show' and fx-hide`actions

    Events

    none

    Examples

    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/ui/hint/index.html b/elements/ui/hint/index.html index 9b3fa036..6df289a4 100644 --- a/elements/ui/hint/index.html +++ b/elements/ui/hint/index.html @@ -1,7 +1,7 @@ -<fx-hint> :: Fore Documentation -

    <fx-hint>

    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/ui/index.html b/elements/ui/index.html index 6b3f6c68..6bce1470 100644 --- a/elements/ui/index.html +++ b/elements/ui/index.html @@ -1,7 +1,7 @@ -UI Elements :: Fore Documentation -
    Read More…
    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/ui/inspector/index.html b/elements/ui/inspector/index.html index 0701c818..7dfec8a4 100644 --- a/elements/ui/inspector/index.html +++ b/elements/ui/inspector/index.html @@ -1,7 +1,7 @@ -<fx-inspector> :: Fore Documentation -

    <fx-inspector>

    Description

    Instance Inspector is a helper element for development which displays all used instances at the bottom of the viewport.

    It uses the log() function under the hood and renders a html details element for each instance.

    Attributes

    NameDescriptiondefault
    openwether or not to be open by defaultfalse

    Events

    none

    Examples

    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/ui/items/index.html b/elements/ui/items/index.html index 4cc9c8f1..f5380e57 100644 --- a/elements/ui/items/index.html +++ b/elements/ui/items/index.html @@ -1,7 +1,7 @@ -<fx-items> :: Fore Documentation -

    <fx-items>

    Description

    Helper element to build a list of items by repeating given template for each node in the bound nodeset.

    Attributes

    NameDescription
    refXPath reference pointing to nodeset to be repeated

    Events

    none

    Examples

    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/ui/output/index.html b/elements/ui/output/index.html index 37c4b59e..092137b9 100644 --- a/elements/ui/output/index.html +++ b/elements/ui/output/index.html @@ -1,7 +1,7 @@ -<fx-output> :: Fore Documentation -

    <fx-output>

    Description

    Outputs bound or calculated values.

    Also supports mimtypes ‘html’ and ‘markdown’ to render bound nodes accordingly.

    Events

    none

    Attributes

    NameDescriptionDefault
    refXPath reference pointing to the bound node-
    valueXPath expression calculating a string value
    mediatypeeither ‘html’ or ‘markdown’ are accepted by now.

    Examples

    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/ui/repeat/index.html b/elements/ui/repeat/index.html index 07676dac..90bfbf76 100644 --- a/elements/ui/repeat/index.html +++ b/elements/ui/repeat/index.html @@ -1,7 +1,7 @@ -<fx-repeat> :: Fore Documentation -

    <fx-repeat>

    Description

    Repeats template for each node of the referenced nodeset.

    For each data node in the referenced nodeset one <fx-repeatitem> element will be created that will contain the evaluated template as content.

    Attributes

    NameDescription
    ididentifier for repeat
    refXPath reference pointing to the bound node

    Events

    NameDescriptionDetails
    path-mutateddispatched when repeat nodeset changes‘path’ - the mutation path
    ‘index’ - the index of the changed repeat item.
    refresh-donedispatched after a refresh() run-
    readydispatched after Fore has fully been initialized-
    errordispatches error when template expression fails to evaluate‘message’ - the error message

    Examples

    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/ui/switch/index.html b/elements/ui/switch/index.html index 6a1e06fc..eaedd010 100644 --- a/elements/ui/switch/index.html +++ b/elements/ui/switch/index.html @@ -1,7 +1,7 @@ -<fx-switch> :: Fore Documentation -

    <fx-switch>

    Description

    Container that has fx-case children of which only one is shown at a given time.

    Can be unbound and toggled via an action or bound and react to data value.

    Attributes

    No Attributes

    Events

    none

    Examples

    \ No newline at end of file +
    \ No newline at end of file diff --git a/elements/ui/trigger/index.html b/elements/ui/trigger/index.html index dfb5e0c2..e657bfda 100644 --- a/elements/ui/trigger/index.html +++ b/elements/ui/trigger/index.html @@ -1,7 +1,7 @@ -<fx-trigger> :: Fore Documentation -

    <fx-trigger>

    Description

    Generic container for action buttons, links etc. which can execute an action when activated.

    <fx-trigger> can also be bound and therefore become readonly or non-relevant.

    Attributes

    NameDescriptionDefault
    refXPath reference pointing to the bound node-

    Examples

    \ No newline at end of file +
    \ No newline at end of file diff --git a/events/index.html b/events/index.html index 6b0e9846..c388fac9 100644 --- a/events/index.html +++ b/events/index.html @@ -1,11 +1,11 @@ -Events :: Fore Documentation -

    Events

    Fore is an event-driven state-engine. It reacts to events and dispatches itself events to reflect it’s state. Each operation in Fore is triggered by some event. You can hook your functionality into the page by defining actions for a given event.

    Lifecycle Events

    Lifecylce events can be used for initialization tasks. When Fore is loaded into the DOM of a web page it will dispatch the following sequence of events:

    NameDescriptiontarget
    model-constructis not of much practical use but just signals that Fore is alivefx-model
    model-construct-donefires after all fx-instance elements have initialized and the model is setup. At this point we can rely on the existence of the referenced data.fx-model
    rebuild-doneis emitted when the model was rebuild. During this stage Fore creates its dependency graph.fx-model
    recalculate-doneis emitted when the model was recalculated. During this stage Fore evaluates the dependency graph.fx-model
    refresh-doneis emitted when the UI has been updated fully. Data in the model are now reflected in the UI.fx-fore
    readyis dispatched when the current Fore element is fully initialized and renderedfx-fore

    For all work that should be done before the first rendering takes place use a ‘model-construct-done’ handler. This is the best place to load additional data and do more complex initialization tasks as all actions triggered by ‘model-construct-done’ will run within a single update cycle.

    On ‘ready’ you can rely on the UI being fully rendered. This also means that all ‘init’ events attached to controls have been executed and eventual custom initialization tasks have been run.

    General Events

    A Fore Action can listen to any event. These might the native ones or custom events.

    If events specify a details object this can be accessed with the Fore event('propname') function. See under Functions.

    NameDescriptionTarget
    clickjust listed here as it might be of frequent interest.parentNode by default
    any native JS event-parentNode by default
    any custom event-parentNode by default

    Update Cycle Events

    Some actions mutate data and report this to the model by setting a ’needsUpdate’ flag. When an action block is done it will check for the flag and update the model and UI accordingly by:

    • optionally fully rebuild the model constraints (usually avoided)
    • recalculate changed items
    • revalidate changed items
    • refresh controls/containers bound to changed items
    NameDescriptionTargetdetails
    rebuild-donefires after a rebuild has taken placefx-modelmaingraph - the main dependency graph
    recalculate-donefires after a recalculate has taken placefx-modelgraph - the depencency main- or subgraph, computes - the amount of computes
    refresh-donefires after a refresh has been done. The UI reflects the model state.fx-fore-

    Control State Events

    State events are dispatched whenever the state of a bound element changes.

    NameDescriptionTargetDetails
    initfires when a control initializesfx-control-
    readonlyfires after an fx-control became readonlyfx-control-
    readwritefires after an fx-control became readwritefx-control-
    optionalfires after an fx-control became optionalfx-control-
    requiredfires after an fx-control became requiredfx-control-
    nonrelevantfires after an fx-control became nonrelevantfx-control-
    relevantfires after a fx-control has become relevantfx-control-
    invalidfires after a fx-control has become invalidfx-control-
    validfires after a fx-control has become validfx-control-
    value-changedfires after a fx-control has changed its valuefx-controlpath- the normalized path of the bound node, value - the value of the bound node

    Instance Events

    NameDescriptionTarget
    deletedfires after a delete action has been executedfx-instance
    insertfires when an fx-insert is executedfx-instance
    instance-loadedfires after an fx-instance has been loadedfx-instance

    Submission Events

    NameDescriptionTargetDetails
    submitdispatch before submission is taking placefx-submissionsubmission - the fx-submission element
    submit-donefires after a submission has successfully been executedfx-submission-
    submit-errorfires when a submission returned an errorfx-submissionmessage - the submit error

    Repeat Events

    NameDescriptionTarget
    item-createdfires when a repeat item was createdfx-repeat
    item-changedfires when a repeat item was changedfx-repeat
    path-mutatedfires when a path in a repeat has been mutatedfx-repeat
    no-template-errorfires when repeat has no template childfx-repeat

    Switch events

    NameDescriptionTarget
    deselectfires when fx-case is deselectedfx-case element that was deselected
    selectfires when fx-case is deselectedfx-case element that was selected

    Dialog Events

    NameDescriptionTarget
    dialog-hiddenfires after fx-dialog has been hiddenfx-dialog
    dialog-shownfired when a dialog has been shownfx-dialog

    Other

    NameDescriptionTargetDetails
    errorfires after an error occurredfx-foremessage - the error message
    execute-actionfires when an action executes. For internal use.any action elementaction' - the action element, event`- the event object
    loadedfires after a fx-load has loaded or a sub-Fore has been loadedfx-loadurl - the evaluated url used by the load action, fore - the Fore element that has been loaded
    outermost-action-startfires when an outermost action block is startedfx-actioncause - the event object causing the action
    outermost-action-endfires when an outermost action block is finishedfx-action-
    reloadfires when a fx-reload action executesfx-reload-
    returnfired by embedded Fore controls to return their bound valuefx-forenodeset - the nodeset returned by a subpage
    warndispatched internally by Fore to display warning messagesfx-foremessage - the warning message
    \ No newline at end of file +
    \ No newline at end of file diff --git a/faq/index.html b/faq/index.html index 9b47530b..34f52401 100644 --- a/faq/index.html +++ b/faq/index.html @@ -1,10 +1,10 @@ -Frequently Asked Questions :: Fore Documentation -

    Frequently Asked Questions

    General

    How can i get the version number of Fore at runtime?

    Open a console in the devtools of your browser, enter this line and hit return:

    document.querySelector('fx-fore').version

    This will output something like:

    ‘Version: 1.7.1 - built on September 28, 2023 13:52:58’

    \ No newline at end of file +
    \ No newline at end of file diff --git a/functions/index.html b/functions/index.html index af8ea30f..7ef4dfbb 100644 --- a/functions/index.html +++ b/functions/index.html @@ -1,7 +1,7 @@ -Functions :: Fore Documentation -

    Functions

    An overview of all functions available in Fore.

    XPath Functions

    As Fore uses @@ -13,4 +13,4 @@ of the event details object which is passed in by the event dispatcher.

    Param:

    • required: property - a property of the event details object by name

    Returns:

    • value of the respective property. Might be a string, object or nodes depending on event type

    event is often used in conjunction with fx-dispatch action which allows to set properties of a custom event.

    fore-attr(attribute-name)

    Returns the value of an attribute on the fx-fore element in scope. Can be used to pass values to a Fore page loaded via the src attribute which in turn can use these values inside of its logic with the help of this function.

    Param:

    • required: attribute name - an attribute name present on the Fore element in scope

    Returns:

    • the value of the attribute

    index(id)

    The index function is used in combination with fx-repeat elements. It returns the current index of a given repeat.

    Param:

    • required: id - the id of an fx-repeat element

    Returns:

    • an integer denoting the currently active repeat item

    instance(id)

    The instance function is the most important function. It allows to address a certain fx-instance element for data-binding.

    Param:

    • optional: id - when given must point to an existing fx-instance element with given id. If not given it will default the first fx-instance element in document order

    Returns:

    • the root context for matching fx-instance element. The type of the root context depends on the type of instance which can currently be ‘xml’ or ‘json’. For XML the root node of the instance data is returned. For JSON the outermost map or array will be returned.

    log(id)

    The log function is just for development purposes and can be used to log some instance data to the document.

    Param:

    • required: id - the id of the instance to log

    Returns:

    • renders instance data to the document.

    Outputs it’s content to a <code> block.

    <code>{log('default')}</code>
    \ No newline at end of file +
    \ No newline at end of file diff --git a/getstarted/basics/index.html b/getstarted/basics/index.html index 9b6bf88a..470401ce 100644 --- a/getstarted/basics/index.html +++ b/getstarted/basics/index.html @@ -1,7 +1,7 @@ -Basics :: Fore Documentation -
    \ No newline at end of file +
    \ No newline at end of file diff --git a/getstarted/hello/index.html b/getstarted/hello/index.html index 71c6a7d3..81ca712d 100644 --- a/getstarted/hello/index.html +++ b/getstarted/hello/index.html @@ -1,7 +1,7 @@ -Hello World :: Fore Documentation -
    \ No newline at end of file +
    \ No newline at end of file diff --git a/getstarted/index.html b/getstarted/index.html index a42af95a..fbed48e8 100644 --- a/getstarted/index.html +++ b/getstarted/index.html @@ -1,7 +1,7 @@ -Get Started :: Fore Documentation -
    Read More…
    \ No newline at end of file +
    \ No newline at end of file diff --git a/getstarted/mvc/index.html b/getstarted/mvc/index.html index 3878ae90..eac859d5 100644 --- a/getstarted/mvc/index.html +++ b/getstarted/mvc/index.html @@ -1,7 +1,7 @@ -The anatomy of Fore :: Fore Documentation -
    \ No newline at end of file +
    \ No newline at end of file diff --git a/getstarted/submission/index.html b/getstarted/submission/index.html index 5e5a52f1..337a9537 100644 --- a/getstarted/submission/index.html +++ b/getstarted/submission/index.html @@ -1,7 +1,7 @@ -Submissions :: Fore Documentation -
    \ No newline at end of file +
    \ No newline at end of file diff --git a/getstarted/todo-refined/index.html b/getstarted/todo-refined/index.html index 17f473e2..ae914ad6 100644 --- a/getstarted/todo-refined/index.html +++ b/getstarted/todo-refined/index.html @@ -1,7 +1,7 @@ -Todo refined :: Fore Documentation -
    \ No newline at end of file +
    \ No newline at end of file diff --git a/getstarted/todo/index.html b/getstarted/todo/index.html index 475aed36..1f6bda3d 100644 --- a/getstarted/todo/index.html +++ b/getstarted/todo/index.html @@ -1,7 +1,7 @@ -todo :: Fore Documentation -
    \ No newline at end of file +
    \ No newline at end of file diff --git a/glossary/index.html b/glossary/index.html index 21597ca6..3b9e4267 100644 --- a/glossary/index.html +++ b/glossary/index.html @@ -1,7 +1,7 @@ -Concepts & Terms :: Fore Documentation -
    \ No newline at end of file +
    \ No newline at end of file diff --git a/guides/index.html b/guides/index.html index a0030f86..addddc19 100644 --- a/guides/index.html +++ b/guides/index.html @@ -1,11 +1,11 @@ -Guides :: Fore Documentation -

    Guides

    This section gives some hints on how to approach certain aspects of developing with Fore.

    “Declarative Programming” (DP) has some advantages over the traditional approaches of implementing the dynamic functionality of components or applications:

    • in DP you describe how to do things without saying ‘how’.
    • DP does not hide away details of the functionality - it all there right at the surface
    • it minimizes side-effects and makes the products more stable
    • it abstracts operations into single tags that be relied upon to deliver the exact predictable outcome that is intended
    • it frees the developer from using a complex toolchain for building, testing, bundling etc. just to make it run

    However - especially for those that are used to an imperative programming style - users new to DP often wonder about the right approach to achieve certain things. Without knowing upfront about all the elements and how they interact, it sometimes is hard to get started or find the best approach to your problem.

    This section tries to help out with several guides that highlight specific problems.

    \ No newline at end of file +
    \ No newline at end of file diff --git a/guides/modularization/index.html b/guides/modularization/index.html index 049f0f46..c4b7bfef 100644 --- a/guides/modularization/index.html +++ b/guides/modularization/index.html @@ -1,7 +1,7 @@ -Modularization :: Fore Documentation -
    \ No newline at end of file +
    \ No newline at end of file diff --git a/index.html b/index.html index a1e7e991..5c96b868 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ -Fore :: Fore Documentation -
    navigation

    Documentation

    Declarative user interfaces in pure HTML

    \ No newline at end of file diff --git a/index.json b/index.json index 963fb65f..687d1d8a 100644 --- a/index.json +++ b/index.json @@ -1 +1 @@ -[{"uri":"https://jinntec.github.io/fore-docs/elements/model/model/","title":"<fx-model>","tags":["model","fx-model"],"description":"","content":"Description The model is responsible for:\ncreating and maintaining the Main Dependency Graph (MDG). creating ModelItems for bound data nodes calculation validation This is done with the help of bind elements.\nThe \u0026lt;fx-model\u0026gt; element is a direct child of \u0026lt;fx-fore\u0026gt; and is itself a container for:\none or more \u0026lt;fx-instance\u0026gt; elements zero, one or more \u0026lt;fx-bind\u0026gt; elements zero, one or more \u0026lt;fx-submission\u0026gt; elements zero, one or more \u0026lt;fx-function\u0026gt; elements \u0026lt;fx-model\u0026gt; \u0026lt;fx-instance\u0026gt;\u0026lt;fx-instance\u0026gt; \u0026lt;fx-instance id=\u0026#34;second\u0026#34;\u0026gt;\u0026lt;fx-instance\u0026gt; \u0026lt;fx-instance id=\u0026#34;third\u0026#34;\u0026gt;\u0026lt;fx-instance\u0026gt; \u0026lt;fx-bind\u0026gt;\u0026lt;/fx-bind\u0026gt; \u0026lt;fx-bind\u0026gt;\u0026lt;/fx-bind\u0026gt; ... \u0026lt;fx-submission id=\u0026#34;load\u0026#34;\u0026gt;\u0026lt;/fx-submission\u0026gt; \u0026lt;fx-submission id=\u0026#34;save\u0026#34;\u0026gt;\u0026lt;/fx-submission\u0026gt; \u0026lt;/fx-model\u0026gt; If there\u0026rsquo;s more than one \u0026lt;fx-instance\u0026gt; or \u0026lt;fx-submission\u0026gt; you need to add an id attribute for identification.\nAttributes none\nEvents Event Description Details model-construct first event to be emitted by Fore - model-construct-done emitted when model has been initialized - rebuild-done when a rebuild has taken place \u0026lsquo;maingraph\u0026rsquo; - the maingraph object being used recalculate-done when a recalculation has taken place \u0026lsquo;subgraph\u0026rsquo; - the subgraph object being used "},{"uri":"https://jinntec.github.io/fore-docs/getstarted/basics/","title":"Basics","tags":["basic"],"description":"","content":"Fore is a set of Web Components sharing the prefix \u0026lsquo;fx-\u0026rsquo; that together implement a complete engine to build highly dynamic, full-featured user interfaces without any script coding.\n\u0026lt;fx-fore\u0026gt; is the root element containing all other elements.\n\u0026lt;fx-fore\u0026gt; ... put other Fore elements or HTML here ... \u0026lt;/fx-fore\u0026gt; In this tutorial we will subsequently add elements to this template to explore the features of Fore.\n"},{"uri":"https://jinntec.github.io/fore-docs/elements/fore/","title":"fx-fore","tags":["fore","fx-fore"],"description":"","content":"The \u0026lt;fx-fore\u0026gt; element establishes a scope of processing similar to a HTML \u0026lt;form\u0026gt; element. It is a container for all other Fore elements and provides the following facilities:\ninits a Fore session refreshes the UI global messaging with toast or modal messages Attributes Name Description default src url to load a \u0026lt;fx-fore\u0026gt; element from another HTML file - show-confirmation either just marker attribute or boolean XPath - [foreign attributes] Foreign attributes are all other attributes being present. These will be copied to the resulting fx-fore element if src is used for loading an external page. These can be accessed with the fore-attr() function - ignore-expressions if given is expected to contain a CSS selector that matches element to excluded from Template Expression handling - if show-confirmation is just used as a marker attribute Fore will check whether data fields have been modified after initial loading. Attribute may be empty, the empty string, \u0026rsquo;true\u0026rsquo; or \u0026lsquo;show-confirmation\u0026rsquo;.\nLikewise when an XPath expression is given as the attribute value it is evaluated to a boolean to decide wether to show the confirmation.\nEvents Name Description compute-exception dispatched in case the dependency graph is cirular refresh-done dispatched after a refresh() run ready dispatched after Fore has fully been initialized error dispatches error when template expression fails to evaluate Examples All Demo files page exit confirmation ignore expressions "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/action/","title":"<fx-action>","tags":["elements","actions","action","1.0.0"],"description":"","content":"Description \u0026lt;fx-action\u0026gt; is a container action element that can take other actions as children and defer their update cycle to the end of the action block.\nThis is useful when you e.g. want to set several values at once without the cost of each action to be recalculated, revalidated and refreshed.\nScript Actions It is possible to call JavaScript from an \u0026lt;fx-action\u0026gt; by using the src attribute. For an example see script actions or the source of this file (doc/reference.html).\nAttributes Name Description src optional attribute to point to a JavaScript file containing a single function to be called. Examples Actions the \u0026lsquo;delay\u0026rsquo; attribute Events Custom Events Submission Demo Submission Chaining "},{"uri":"https://jinntec.github.io/fore-docs/elements/ui/alert/","title":"<fx-alert>","tags":["elements","ui","fx-alert","validation"],"description":"","content":"Description fx-alert element is used for messaging validation errors and may be used within fx-bind element or as a child of a UI control like fx-control.\nAttributes No Attributes\nEvents none\nExamples Binding Revalidation "},{"uri":"https://jinntec.github.io/fore-docs/getstarted/","title":"Get Started","tags":[],"description":"","content":"This tutorial will walk you through the first steps of using Fore and introduce some of the elements.\nFor further study it is highly recommended to use the huge list of demos that come with Fore. These showcase all features and how to use them in concrete working examples.\nUsing Fore To use Fore you have to add one CSS stylesheet and the Fore module to your page.\nLoading from CDN Add these tags to the head of your HTML file.\n\u0026lt;link rel=\u0026#34;stylesheet\u0026#34; href=\u0026#34;https://cdn.jsdelivr.net/npm/@jinntec/fore@latest/resources/fore.css\u0026#34;\u0026gt; \u0026lt;script type=\u0026#34;module\u0026#34; src=\u0026#34;https://cdn.jsdelivr.net/npm/@jinntec/fore@latest/dist/fore.js\u0026#34;\u0026gt; You are good to go and may skip to next section!\nIf you are situated within the European Union you should always bundle a Fore distribution with your code to avoid conflict with data privacy protection regulations.\nUsing local copy Download Fore from github and unpack it to a convenient location on your disk.\nSetup a basic HTML page like this:\n\u0026lt;!doctype html\u0026gt; \u0026lt;html lang=\u0026#34;en\u0026#34;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026#34;utf-8\u0026#34;/\u0026gt; \u0026lt;meta content=\u0026#34;width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes\u0026#34; name=\u0026#34;viewport\u0026#34;/\u0026gt; \u0026lt;title\u0026gt;template\u0026lt;/title\u0026gt; \u0026lt;link href=\u0026#34;[path-to-fore]/resources/fore.css\u0026#34; rel=\u0026#34;stylesheet\u0026#34;\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;script type=\u0026#34;module\u0026#34; src=\u0026#34;[path-to-fore]/dist/fore.js\u0026#34;\u0026gt;\u0026lt;/script\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; \u0026lsquo;[path-to-fore]\u0026rsquo; has to be the relative path to the Fore location on your disk.\nUsing NPM npm i --save @jinntec/fore\nUsing the dev version During development it can be helpful to get console messages that give some feedback about what is happening behind the scenes. The dev version also includes additional tools to support the developer:\nfx-inspector which is a simple instance data viewer showing all data in a collapsible side-panel on the right. It can display XML and JSON data fx-devtools aka \u0026lsquo;Fore Glass\u0026rsquo; which allows you to log all events and actions, inspect the DOM elements and showing a live view of all data. Fore Glass is available from version 2.0.0. To get those message on developers tools console just use:\n\u0026lt;script type=\u0026#34;module\u0026#34; src=\u0026#34;[path-to-fore]/dist/fore-dev.js\u0026#34;\u0026gt;\u0026lt;/script\u0026gt; Once in production you can simply switch back. There\u0026rsquo;s no difference between these versions beyond logging.\n"},{"uri":"https://jinntec.github.io/fore-docs/getstarted/mvc/","title":"The anatomy of Fore","tags":["basic","mvc","model","ui","actions"],"description":"","content":"Before stepping deeper a basic understanding of the main parts of Fore is helpful.\nFore uses a classical Model-View-Controller (MVC) architecture.\nThere are 3 basic things to remember:\nThe model (\u0026lt;fx-model\u0026gt;) holds the data and their state. This state will be used during refresh to apply changes to the UI.\nWhen the user interacts with a page the UI will trigger Actions to change the data in the model.\nActions will do the actual mutation of the data like setting a value, replacing, inserting or deleting a data node. But not all actions mutate the model - there are also actions for messaging the user, showing a dialog or switching a view.\nThe term \u0026lsquo;data node\u0026rsquo; does not mean it needs to be a DOM node. It can also point to a JSON property or some other data item.\n"},{"uri":"https://jinntec.github.io/fore-docs/getstarted/hello/","title":"Hello World","tags":["basic","model","instance"],"description":"","content":"What can be learned here:\nthe basic structure of Fore \u0026lt;fx-model\u0026gt; and \u0026lt;fx-instance\u0026gt; elements using a Template Expression Hello World - Step by Step Each \u0026lt;fx-fore\u0026gt; element has a single model.\n1. Add the model First step to create a data-bound \u0026lsquo;Hello World\u0026rsquo; example is to add a model.\n\u0026lt;fx-fore\u0026gt; \u0026lt;fx-model\u0026gt;\u0026lt;/fx-model\u0026gt; \u0026lt;/fx-fore\u0026gt; The \u0026lt;fx-model\u0026gt; is a direct child of the \u0026lt;fx-fore\u0026gt; element.\n2. Add some data Not very exciting so far, so add some data:\n\u0026lt;fx-fore\u0026gt; \u0026lt;fx-model\u0026gt; \u0026lt;fx-instance\u0026gt; \u0026lt;data\u0026gt; \u0026lt;greeting\u0026gt;hello world!\u0026lt;/greeting\u0026gt; \u0026lt;/data\u0026gt; \u0026lt;/fx-instance\u0026gt; \u0026lt;/fx-model\u0026gt; \u0026lt;/fx-fore\u0026gt; Data are kept in instances. A model can have as many instances as needed.\nCurrently Fore supports XML and JSON as data formats. However other formats like e.g. CSV can be added.\n3. Add some UI The final step is to add some UI to bind to our data.\n\u0026lt;fx-fore\u0026gt; \u0026lt;fx-model\u0026gt; \u0026lt;fx-instance\u0026gt; \u0026lt;data\u0026gt; \u0026lt;greeting\u0026gt;hello world!\u0026lt;/greeting\u0026gt; \u0026lt;/data\u0026gt; \u0026lt;/fx-instance\u0026gt; \u0026lt;/fx-model\u0026gt; \u0026lt;h1\u0026gt;My first Fore page\u0026lt;/h1\u0026gt; \u0026lt;h2\u0026gt;{greeting}\u0026lt;/h2\u0026gt; \u0026lt;/fx-fore\u0026gt; Here we use a simple Template Expression to output the data of the node \u0026lsquo;greeting\u0026rsquo;. In a later step we\u0026rsquo;ll use controls to edit the data.\nA Template Expression is enclosed in curly brackets and binds to some data node in an instance. You can put them everywhere within the UI of a \u0026lt;fx-fore\u0026gt; element either within text nodes or attributes nodes.\nLive Result: The blueish shaded area below shows Fore running inside of this page. We use live example throughout this documentation.\nhello world! My first Fore page {greeting} {greeting} "},{"uri":"https://jinntec.github.io/fore-docs/getstarted/todo/","title":"todo","tags":["basic","repeat","actions","controls"],"description":"","content":"What can be learned here:\nthe use of \u0026lt;fx-repeat\u0026gt; element data binding and resolution using a constraint using controls using insert and delete action Todo Application Let\u0026rsquo;s go for a bit more fancy example and learn about some new elements.\nIn this tutorial we add some real interaction, give some feedback messages to the user and actually change our data.\nIt will introduce you to \u0026lt;fx-repeat\u0026gt; element that is one of the container elements available in Fore.\nSetting up the model For our todo app we\u0026rsquo;d like to have a list of todos along with a completion and a due date.\nOur data model for a single todo looks like this:\n\u0026lt;task complete=\u0026#34;\u0026#34; due=\u0026#34;\u0026#34;\u0026gt;\u0026lt;/task\u0026gt; Lets put that into Fore and add some dummy data to play with.\n\u0026lt;fx-fore\u0026gt; \u0026lt;fx-model id=\u0026#34;record\u0026#34;\u0026gt; \u0026lt;fx-instance\u0026gt; \u0026lt;data\u0026gt; \u0026lt;task complete=\u0026#34;false\u0026#34; due=\u0026#34;2022-06-05\u0026#34;\u0026gt;Make tutorial part 1\u0026lt;/task\u0026gt; \u0026lt;task complete=\u0026#34;false\u0026#34; due=\u0026#34;2022-06-15\u0026#34;\u0026gt;Pick up Milk\u0026lt;/task\u0026gt; \u0026lt;/data\u0026gt; \u0026lt;/fx-instance\u0026gt; \u0026lt;/fx-model\u0026gt; \u0026lt;/fx-fore\u0026gt; Introducing \u0026lt;fx-repeat\u0026gt; For displaying a list of todos we\u0026rsquo;ll use the \u0026lt;fx-repeat\u0026gt; element which will show all todos in a list.\nWe add the repeat alongside the model in our markup.\n\u0026lt;fx-fore\u0026gt; \u0026lt;fx-model id=\u0026#34;record\u0026#34;\u0026gt; \u0026lt;fx-instance\u0026gt; \u0026lt;data\u0026gt; \u0026lt;task complete=\u0026#34;false\u0026#34; due=\u0026#34;2022-06-05\u0026#34;\u0026gt;Make tutorial part 1\u0026lt;/task\u0026gt; \u0026lt;task complete=\u0026#34;false\u0026#34; due=\u0026#34;2022-06-15\u0026#34;\u0026gt;Pick up Milk\u0026lt;/task\u0026gt; \u0026lt;/data\u0026gt; \u0026lt;/fx-instance\u0026gt; \u0026lt;/fx-model\u0026gt; \u0026lt;h1\u0026gt;My Todos\u0026lt;/h1\u0026gt; \u0026lt;fx-repeat id=\u0026#34;task\u0026#34; ref=\u0026#34;task\u0026#34;\u0026gt; \u0026lt;template\u0026gt; \u0026lt;div\u0026gt;{.}\u0026lt;/div\u0026gt; \u0026lt;/template\u0026gt; \u0026lt;/fx-repeat\u0026gt; \u0026lt;/fx-fore\u0026gt; Data Binding - the ref Attribute The ref attribute is used throughout Fore on many elements. It uses binding expressions to link to some data node.\nIn our case the binding expression is simply \u0026rsquo;task\u0026rsquo; and will point to task elements in our data.\n\u0026lt;fx-fore\u0026gt; \u0026lt;fx-model id=\u0026#34;record\u0026#34;\u0026gt; \u0026lt;fx-instance\u0026gt; \u0026lt;data\u0026gt; \u0026lt;task complete=\u0026#34;false\u0026#34; due=\u0026#34;2022-06-05\u0026#34;\u0026gt;Make tutorial part 1\u0026lt;/task\u0026gt; \u0026lt;task complete=\u0026#34;false\u0026#34; due=\u0026#34;2022-06-15\u0026#34;\u0026gt;Pick up Milk\u0026lt;/task\u0026gt; \u0026lt;/data\u0026gt; \u0026lt;/fx-instance\u0026gt; \u0026lt;/fx-model\u0026gt; \u0026lt;h1\u0026gt;My Todos\u0026lt;/h1\u0026gt; \u0026lt;fx-repeat id=\u0026#34;task\u0026#34; ref=\u0026#34;task\u0026#34;\u0026gt; \u0026lt;template\u0026gt; \u0026lt;div\u0026gt;{.}\u0026lt;/div\u0026gt; \u0026lt;/template\u0026gt; \u0026lt;/fx-repeat\u0026gt; \u0026lt;/fx-fore\u0026gt; Result so far\nMake tutorial part 1 Pick up Milk My Todos {.} A repeat always has a \u0026lt;template\u0026gt; child which is the blueprint for rendering one bound item.\nIt just contains a div and the Template Expression of \u0026lsquo;{.}\u0026rsquo;.\n\u0026quot;.\u0026quot; means the current node which is the bound task node.\nThis is known as \u0026lsquo;scoped resolution\u0026rsquo; and means that binding expressions are always evaluated relatively to their parent binding expression (aka ref attributes).\nAdding controls In this step we add some controls to the repeat template.\nFore uses a generic \u0026lt;fx-control\u0026gt; element to bind a concrete widget (like a native \u0026lt;input\u0026gt;) to the model.\nThis has the advantage that there\u0026rsquo;s no need for a big list of different controls to be supported but instead just use existing ones.\nIn this example simple native browser input controls are used.\n\u0026lt;fx-fore\u0026gt; \u0026lt;fx-model id=\u0026#34;record\u0026#34;\u0026gt; \u0026lt;fx-instance\u0026gt; \u0026lt;data\u0026gt; \u0026lt;task complete=\u0026#34;false\u0026#34; due=\u0026#34;2022-06-05\u0026#34;\u0026gt;Make tutorial part 1\u0026lt;/task\u0026gt; \u0026lt;task complete=\u0026#34;false\u0026#34; due=\u0026#34;2022-06-15\u0026#34;\u0026gt;Pick up Milk\u0026lt;/task\u0026gt; \u0026lt;/data\u0026gt; \u0026lt;/fx-instance\u0026gt; \u0026lt;/fx-model\u0026gt; \u0026lt;h1\u0026gt;My Todos\u0026lt;/h1\u0026gt; \u0026lt;fx-repeat id=\u0026#34;task\u0026#34; ref=\u0026#34;task\u0026#34;\u0026gt; \u0026lt;template\u0026gt; \u0026lt;div\u0026gt; \u0026lt;fx-control ref=\u0026#34;@complete\u0026#34; value-prop=\u0026#34;checked\u0026#34; update-event=\u0026#34;input\u0026#34;\u0026gt; \u0026lt;input type=\u0026#34;checkbox\u0026#34;\u0026gt; \u0026lt;/fx-control\u0026gt; \u0026lt;fx-control class=\u0026#34;{@complete}\u0026#34; id=\u0026#34;task\u0026#34; ref=\u0026#34;.\u0026#34;\u0026gt;\u0026lt;/fx-control\u0026gt; \u0026lt;fx-control ref=\u0026#34;@due\u0026#34;\u0026gt; \u0026lt;input type=\u0026#34;date\u0026#34;\u0026gt; \u0026lt;/fx-control\u0026gt; \u0026lt;fx-trigger class=\u0026#34;btn delete\u0026#34;\u0026gt; \u0026lt;button\u0026gt;x\u0026lt;/button\u0026gt; \u0026lt;fx-delete ref=\u0026#34;.\u0026#34;\u0026gt;\u0026lt;/fx-delete\u0026gt; \u0026lt;/fx-trigger\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/template\u0026gt; \u0026lt;/fx-repeat\u0026gt; \u0026lt;/fx-fore\u0026gt; Note the second \u0026lt;fx-control\u0026gt; which is empty. If no control is given as child it will default to a \u0026lt;input type=\u0026quot;text\u0026quot;\u0026gt; control which is auto-created to save some typing.\nHere 3 \u0026lt;fx-control\u0026gt;s and 2 \u0026lt;fx-trigger\u0026gt; elements have been added.\nThe controls bind to the respective nodes in the data and use:\na checkbox for \u0026lsquo;@complete\u0026rsquo; a text field for task text a date input for \u0026lsquo;@due\u0026rsquo; date The \u0026lsquo;@\u0026rsquo; character addresses an attribute of an XML node. Scoped resolution will result in the binding expression \u0026rsquo;task[1]/@complete\u0026rsquo; for the first todo.\n\u0026lt;fx-fore\u0026gt; \u0026lt;fx-model id=\u0026#34;record\u0026#34;\u0026gt; \u0026lt;fx-instance\u0026gt; \u0026lt;data\u0026gt; \u0026lt;task complete=\u0026#34;false\u0026#34; due=\u0026#34;2022-06-05\u0026#34;\u0026gt;Make tutorial part 1\u0026lt;/task\u0026gt; \u0026lt;task complete=\u0026#34;false\u0026#34; due=\u0026#34;2022-06-15\u0026#34;\u0026gt;Pick up Milk\u0026lt;/task\u0026gt; \u0026lt;/data\u0026gt; \u0026lt;/fx-instance\u0026gt; \u0026lt;/fx-model\u0026gt; \u0026lt;h1\u0026gt;My Todos \u0026lt;fx-trigger class=\u0026#34;btn add\u0026#34;\u0026gt; \u0026lt;button\u0026gt;add\u0026lt;/button\u0026gt; \u0026lt;fx-insert ref=\u0026#34;task\u0026#34; at=\u0026#34;1\u0026#34; position=\u0026#34;before\u0026#34;\u0026gt;\u0026lt;/fx-insert\u0026gt; \u0026lt;/fx-trigger\u0026gt; \u0026lt;/h1\u0026gt; \u0026lt;fx-repeat id=\u0026#34;task\u0026#34; ref=\u0026#34;task\u0026#34;\u0026gt; \u0026lt;template\u0026gt; \u0026lt;div\u0026gt; \u0026lt;fx-control ref=\u0026#34;@complete\u0026#34; value-prop=\u0026#34;checked\u0026#34; update-event=\u0026#34;input\u0026#34;\u0026gt; \u0026lt;input class=\u0026#34;widget\u0026#34; type=\u0026#34;checkbox\u0026#34;\u0026gt; \u0026lt;/fx-control\u0026gt; \u0026lt;fx-control class=\u0026#34;{@complete}\u0026#34; id=\u0026#34;task\u0026#34; ref=\u0026#34;.\u0026#34;\u0026gt;\u0026lt;/fx-control\u0026gt; \u0026lt;fx-control ref=\u0026#34;@due\u0026#34;\u0026gt; \u0026lt;input type=\u0026#34;date\u0026#34;\u0026gt; \u0026lt;/fx-control\u0026gt; \u0026lt;fx-trigger class=\u0026#34;btn delete\u0026#34;\u0026gt; \u0026lt;button\u0026gt;delete\u0026lt;/button\u0026gt; \u0026lt;fx-delete ref=\u0026#34;.\u0026#34;\u0026gt;\u0026lt;/fx-delete\u0026gt; \u0026lt;/fx-trigger\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/template\u0026gt; \u0026lt;/fx-repeat\u0026gt; \u0026lt;/fx-fore\u0026gt; The first \u0026lt;fx-trigger\u0026gt; is contained within the \u0026lt;h1\u0026gt; and inserts a new todo at the top of the list.\nThe \u0026lt;fx-trigger\u0026gt; within the repeat will display a button and allow to delete a todo from the list with the \u0026lt;fx-delete\u0026gt; action.\nThe todo list with add and delete Make tutorial part 1 Pick up Milk My Todos add delete This is the barebones of the todo app. Next chapter will introduce some refinements.\n"},{"uri":"https://jinntec.github.io/fore-docs/getstarted/todo-refined/","title":"Todo refined","tags":["basic","repeat","actions","controls"],"description":"","content":"What can be learned here:\nadding a counter insert from a template node use \u0026lt;fx-bind\u0026gt; to require a value Todo refined In the previous chapter the bare minimum for the todo app were created.\nIn this chapter we\u0026rsquo;d like to make some improvements:\nshow a counter for our todos hide or show completed todos make sure we can handle an empty list Extending our data model Let\u0026rsquo;s add a couple of nodes to our data model to cover our objectives. We\u0026rsquo;ll use them later on.\n\u0026lt;data\u0026gt; \u0026lt;task complete=\u0026#34;false\u0026#34; due=\u0026#34;2022-06-05\u0026#34;\u0026gt;Make tutorial part 1\u0026lt;/task\u0026gt; \u0026lt;task complete=\u0026#34;false\u0026#34; due=\u0026#34;2022-06-15\u0026#34;\u0026gt;Pick up Milk\u0026lt;/task\u0026gt; \u0026lt;template\u0026gt; \u0026lt;task complete=\u0026#34;false\u0026#34; due=\u0026#34;\u0026#34;\u0026gt;new task\u0026lt;/task\u0026gt; \u0026lt;/template\u0026gt; \u0026lt;showclosed\u0026gt;false\u0026lt;/showclosed\u0026gt; \u0026lt;/data\u0026gt; Adding a counter We add a counter simply above our repeat.\n\u0026lt;div class=\u0026#34;info\u0026#34;\u0026gt; You have {count(task[@complete=\u0026#39;false\u0026#39;])} open tasks \u0026lt;/div\u0026gt; The Template Expression will output the number of open task nodes in the data.\nLet\u0026rsquo;s dissect the expression a bit more:\ncount() is a built-in XPath 3 function we are just using here to count the amount of tasks task[@complete='false'] filters all task by their attribute complete and returns only those with a value of false Fore uses XPath 3.1 as its expression language used in binding expressions but also in many other places like in Template Expressions. It is beyond the scope of this tutorial to give an introduction to XPath you can find some resources in the link section.\ncount() is an built-in XPath 3.1 function we\u0026rsquo;re using to get the number of todos. XPath offers a big library of functions.\nMake tutorial part 1 Pick up Milk new task false Todo add You have {count(instance()/task[@complete='false'])} open tasks delete Of course you can add further counters, for example, for closed tasks, or for all tasks. I\u0026rsquo;ll leave that as an excercise.\nFixing our repeat If you\u0026rsquo;ve played with the last example and have deleted all todos and trying to re-add one you have run into problems. It simply refuses to create a new repeat entry.\nThis is due to the default behavior of \u0026lt;fx-insert\u0026gt;. It tries to use the last item in the list as a template for insertion. If there\u0026rsquo;s none left, the nodeset is empty and the \u0026lt;fx-insert\u0026gt; will do nothing.\nThe origin attribute handles this situation and allows us to bind to a template node to use for the insert.\nBy changing the trigger from\n\u0026lt;fx-trigger class=\u0026#34;btn add\u0026#34;\u0026gt; \u0026lt;button\u0026gt;add\u0026lt;/button\u0026gt; \u0026lt;fx-insert ref=\u0026#34;task\u0026#34; at=\u0026#34;1\u0026#34; position=\u0026#34;before\u0026#34;\u0026gt;\u0026lt;/fx-insert\u0026gt; \u0026lt;/fx-trigger\u0026gt; into\n\u0026lt;fx-trigger class=\u0026#34;btn add\u0026#34;\u0026gt; \u0026lt;button\u0026gt;add\u0026lt;/button\u0026gt; \u0026lt;fx-insert ref=\u0026#34;task\u0026#34; at=\u0026#34;1\u0026#34; position=\u0026#34;before\u0026#34; origin=\u0026#34;template/task\u0026#34;\u0026gt;\u0026lt;/fx-insert\u0026gt; \u0026lt;/fx-trigger\u0026gt; Now the insert will evaluate the origin attribute and take that node to insert into the list.\nBy using this technique you can also apply some defaults for new entries e.g. a todo will now be complete=\u0026quot;false\u0026quot; and \u0026rsquo;new task\u0026rsquo; as task by default.\nMake tutorial part 1 Pick up Milk new task false Todo add You have {count(instance()/task[@complete='false'])} open tasks delete Adding constraints Certainly at some point you\u0026rsquo;d like to save your todo list and it makes not much sense to have a todo without a text.\nLet\u0026rsquo;s create a constraint for that by introducing a bind element:\n\u0026lt;fx-bind ref=\u0026#34;task\u0026#34; constraint=\u0026#34;string-length(.) \u0026gt; 0\u0026#34; alert=\u0026#34;what\u0026#39;s your todo?\u0026#34;\u0026gt;\u0026lt;/fx-bind\u0026gt; The constraint attribute takes an boolean XPath expression which will automatically be applied by the model and re-evaluated whenever this is required e.g. when data are submitted.\nFore uses XPath to bind nodes or make calculations. To learn more about XPath and play with it, have a look at fontoXPath playground\nA bind applies a constraint on a bind node or applies a calculation to it. It may also have an alert message when a constraint fails.\nAdd the bind to the model somewhere.\nTip: though not strictly necessary it makes sense to group your \u0026lt;fx-instance\u0026gt;, \u0026lt;fx-bind\u0026gt;,\u0026lt;fx-submission\u0026gt; and \u0026lt;fx-function\u0026gt; elements for a better overview when things get more complex.\n\u0026lt;fx-fore\u0026gt; \u0026lt;fx-model id=\u0026#34;record\u0026#34;\u0026gt; \u0026lt;fx-instance\u0026gt; \u0026lt;data\u0026gt; \u0026lt;task complete=\u0026#34;false\u0026#34; due=\u0026#34;2022-06-05\u0026#34;\u0026gt;Make tutorial part 1\u0026lt;/task\u0026gt; \u0026lt;task complete=\u0026#34;false\u0026#34; due=\u0026#34;2022-06-15\u0026#34;\u0026gt;Pick up Milk\u0026lt;/task\u0026gt; \u0026lt;template\u0026gt; \u0026lt;task complete=\u0026#34;false\u0026#34; due=\u0026#34;\u0026#34;\u0026gt;new task\u0026lt;/task\u0026gt; \u0026lt;/template\u0026gt; \u0026lt;count\u0026gt;1\u0026lt;/count\u0026gt; \u0026lt;showclosed\u0026gt;false\u0026lt;/showclosed\u0026gt; \u0026lt;/data\u0026gt; \u0026lt;/fx-instance\u0026gt; \u0026lt;fx-bind ref=\u0026#34;task\u0026#34; required=\u0026#34;true()\u0026#34;\u0026gt;\u0026lt;/fx-bind\u0026gt; \u0026lt;fx-bind ref=\u0026#34;task\u0026#34; constraint=\u0026#34;string-length(.) \u0026gt; 0\u0026#34; alert=\u0026#34;what\u0026#39;s your todo?\u0026#34;\u0026gt;\u0026lt;/fx-bind\u0026gt; \u0026lt;/fx-model\u0026gt; \u0026lt;h1\u0026gt;Todo\u0026lt;/h1\u0026gt; \u0026lt;fx-trigger class=\u0026#34;btn add\u0026#34;\u0026gt; \u0026lt;button\u0026gt;+\u0026lt;/button\u0026gt; \u0026lt;fx-insert ref=\u0026#34;task\u0026#34; at=\u0026#34;1\u0026#34; position=\u0026#34;before\u0026#34; origin=\u0026#34;template/task\u0026#34;\u0026gt;\u0026lt;/fx-insert\u0026gt; \u0026lt;/fx-trigger\u0026gt; \u0026lt;div class=\u0026#34;info\u0026#34;\u0026gt; You have {count(instance()/task[@complete=\u0026#39;true\u0026#39;])} completed tasks \u0026lt;/div\u0026gt; \u0026lt;fx-repeat id=\u0026#34;task\u0026#34; ref=\u0026#34;task\u0026#34;\u0026gt; \u0026lt;template\u0026gt; \u0026lt;div\u0026gt; \u0026lt;fx-control ref=\u0026#34;@complete\u0026#34; value-prop=\u0026#34;checked\u0026#34; update-event=\u0026#34;input\u0026#34;\u0026gt; \u0026lt;input class=\u0026#34;widget\u0026#34; type=\u0026#34;checkbox\u0026#34;\u0026gt; \u0026lt;/fx-control\u0026gt; \u0026lt;fx-control class=\u0026#34;{@complete}\u0026#34; id=\u0026#34;task\u0026#34; ref=\u0026#34;.\u0026#34;\u0026gt;\u0026lt;/fx-control\u0026gt; \u0026lt;fx-control ref=\u0026#34;@due\u0026#34;\u0026gt; \u0026lt;input type=\u0026#34;date\u0026#34;\u0026gt; \u0026lt;/fx-control\u0026gt; \u0026lt;fx-trigger class=\u0026#34;btn delete\u0026#34;\u0026gt; \u0026lt;button\u0026gt;delete\u0026lt;/button\u0026gt; \u0026lt;fx-delete ref=\u0026#34;.\u0026#34;\u0026gt;\u0026lt;/fx-delete\u0026gt; \u0026lt;/fx-trigger\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/template\u0026gt; \u0026lt;/fx-repeat\u0026gt; \u0026lt;/fx-fore\u0026gt; Result Empty a task field to trigger the alert - once you leave the field the alert is shown.\nMake tutorial part 1 Pick up Milk new task 1 false Todo add You have {count(instance()/task[@complete='true'])} completed tasks delete Now you can delete all entries and create new ones afterwards.\n"},{"uri":"https://jinntec.github.io/fore-docs/elements/model/","title":"Model","tags":["elements","model"],"description":"","content":"Model Elements This chapter describes all elements belonging to the Fore Model.\nModel elements have no visual representation and are always hidden from view.\n"},{"uri":"https://jinntec.github.io/fore-docs/elements/ui/","title":"UI Elements","tags":["elements","UI"],"description":"","content":"This chapter describes all user interface elements. "},{"uri":"https://jinntec.github.io/fore-docs/elements/ui/case/","title":"<fx-case>","tags":["elements","ui","fx-case","fx-switch"],"description":"","content":"Description Defines one \u0026lsquo;page\u0026rsquo; of a fx-switch element.\nAttributes Name Description label optional label name a unique name to be used with fx-toggle Events Name Description select dispatched to fx-case when a case gets selected deselect dispatched to fx-case when case gets deselected Examples Repeat in Switch TEI header editor sample Switch "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/append/","title":"<fx-append>","tags":["elements actions","1.0.0"],"description":"","content":"Description Appends an entry to an fx-repeat.\nNote: this is deprecated. Please use fx-insert.\nAttributes Name Description ref the XPath ref to append to repeat the fx-repeat to append to Events Name Description index-changed dispatched after entry has been added to a repeat Examples todo nested todo TEI header editor sample "},{"uri":"https://jinntec.github.io/fore-docs/elements/ui/container/","title":"<fx-container>","tags":["elements","ui"],"description":"","content":"\u0026lt;fx-container\u0026gt; is an abstract class used for container controls like \u0026lt;fx-group\u0026gt; and \u0026lt;fx-switch\u0026gt;.\n"},{"uri":"https://jinntec.github.io/fore-docs/getstarted/submission/","title":"Submissions","tags":["getstarted","submission"],"description":"","content":"What can be learned here:\ndefining a basic \u0026lt;fx-submission\u0026gt; triggering a submission by using \u0026lt;fx-send\u0026gt; action replacing data with submission sending a message to the user with \u0026lt;fx-message\u0026gt; action Ok, nice - we have a todo list that will be gone when we reload the browser or leave the page.\nMake tutorial part 1 Pick up Milk new task Todo add You have {count(instance()/task[@complete='true'])} completed tasks delete Adding a submission We need a way to store our data. Let\u0026rsquo;s add a submission which will go into our model\n\u0026lt;fx-submission id=\u0026#34;save\u0026#34; method=\u0026#34;post\u0026#34; url=\u0026#34;#echo\u0026#34; replace=\u0026#34;instance\u0026#34; instance=\u0026#34;todo-list\u0026#34;\u0026gt; \u0026lt;/fx-submission\u0026gt; Due to technical limitations on this static site we use the builtin \u0026lsquo;#echo\u0026rsquo; target for this tutorial that will just return the data it gets in and replaces another instance with it. This is to simulate what is usually happening when sending data via http.\nWhat does this do?\nWe need to add an id to identify a submission This submission will send a POST request of the instance data to the URL \u0026lsquo;#echo\u0026rsquo; The response will replace the instance. The instance to be replaced is \u0026rsquo;todo-list' Triggering the save submission To trigger a save operation you usually want a button.\n... UI ... \u0026lt;fx-trigger\u0026gt; \u0026lt;button\u0026gt;Save\u0026lt;/button\u0026gt; \u0026lt;fx-send submission=\u0026#34;save\u0026#34;\u0026gt;\u0026lt;/fx-send\u0026gt; \u0026lt;/fx-trigger\u0026gt; Put together\nMake tutorial part 1 Pick up Milk new task 1 false your todo list has been saved Todo add You have {count(instance()/task[@complete='true'])} completed tasks delete Save Watch the \u0026lsquo;Data Inspector\u0026rsquo; on the right. Intially there will be 2 data instances listed by their id. Data Inspector is a tool that helps during development to see the live content of your data instances. The instance live separate from the DOM and therefore cannot be seen in their actual state by inspecting with developer tools. You can just add it within any \u0026lt;fx-fore\u0026gt; element.\nAfter hitting the \u0026lsquo;Save\u0026rsquo; button the instance \u0026rsquo;todo-list\u0026rsquo; will be identical to the \u0026lsquo;default\u0026rsquo; instance.\nThis means that our submission has been executed and has send its data to the \u0026lsquo;#echo\u0026rsquo; submission, that gets back the same data and replaced the \u0026lsquo;saved-list\u0026rsquo; instance.\nMessaging the user You may have noticed a message in the lower left after hitting \u0026lsquo;save\u0026rsquo;.\nLet\u0026rsquo;s add the missing line i omitted from above code.\n\u0026lt;fx-submission id=\u0026#34;save\u0026#34; method=\u0026#34;post\u0026#34; url=\u0026#34;#echo\u0026#34; replace=\u0026#34;instance\u0026#34; instance=\u0026#34;saved-list\u0026#34;\u0026gt; \u0026lt;fx-message event=\u0026#34;submit-done\u0026#34;\u0026gt;your todo list has been saved\u0026lt;/fx-message\u0026gt; \u0026lt;/fx-submission\u0026gt; This adds a \u0026lt;fx-message\u0026gt; element to the submission that will react to the \u0026lsquo;submit-done\u0026rsquo; event that is fired when a submission successfully returned.\nThe message element defaults to a toast message that disappears after a delay.\nWith the event attribute the message action attaches to its parent element and reacts to \u0026lsquo;submit-done\u0026rsquo; in this case.\nThis technique is used all over Fore to attach event handlers that in turn will run an action.\n"},{"uri":"https://jinntec.github.io/fore-docs/guides/","title":"Guides","tags":[],"description":"","content":"Guides This section gives some hints on how to approach certain aspects of developing with Fore.\n\u0026ldquo;Declarative Programming\u0026rdquo; (DP) has some advantages over the traditional approaches of implementing the dynamic functionality of components or applications:\nin DP you describe how to do things without saying \u0026lsquo;how\u0026rsquo;. DP does not hide away details of the functionality - it all there right at the surface it minimizes side-effects and makes the products more stable it abstracts operations into single tags that be relied upon to deliver the exact predictable outcome that is intended it frees the developer from using a complex toolchain for building, testing, bundling etc. just to make it run However - especially for those that are used to an imperative programming style - users new to DP often wonder about the right approach to achieve certain things. Without knowing upfront about all the elements and how they interact, it sometimes is hard to get started or find the best approach to your problem.\nThis section tries to help out with several guides that highlight specific problems.\n"},{"uri":"https://jinntec.github.io/fore-docs/elements/ui/control/","title":"<fx-control>","tags":["elements","ui","fx-control"],"description":"","content":"Description fx-control is no concrete control displayed in the browser but instead wraps such a control and binds it to a data node in the model with the help of a ref attribute.\nAttributes Name Description Default as \u0026rsquo;text\u0026rsquo; or \u0026rsquo;node\u0026rsquo;. When using \u0026rsquo;node\u0026rsquo; a whole dom tree can be passed to a widget text context XPath reference pointing to parent context incopeContext credentials sets credentials policy - one of \u0026lsquo;omit\u0026rsquo;, \u0026lsquo;same-origin\u0026rsquo; or \u0026lsquo;include\u0026rsquo; same-origin create if present on control or anchestor will create non-existing attribute nodes in the data - debounce optional numeric value in milliseconds to delay input events - initial XPath binding expression referring to data that get passed to Fore control as default instance. Only effective when url is specified. - label optional label - listen-on a CSS selector to attach the update event listener to element with \u0026lsquo;widget\u0026rsquo; class ref XPath reference pointing to the bound node - shadow marker attribute to attach Fore control to shadowDOM instead of lightDOM - update-event optional event name when to trigger updating of bound node. blur \u0026rsquo;enter\u0026rsquo; can be used to catch enter key url URL pointing to HTML page containing fx-fore element that gets imported as widget - value-prop optional property name used to set the value of the widget (default:\u0026lsquo;value\u0026rsquo;) value Attributes on widgets A widget is an element contained within a \u0026lt;fx-control\u0026gt; and must be marked with a class=\u0026quot;widget\u0026quot;.\nSome attributes might occur on a widget to further control its behavior.\nName Description selection applies to \u0026lt;select\u0026gt; elements. If selection=\u0026quot;open\u0026quot; is given an additional empty \u0026lt;option\u0026gt; will be added to allow the empty value. Events Name Description init dispatched once when a control is initialized. Can be used for customization of wrapped widgets. value-changed dispatched during refresh after the value of the control has changed optional dispatched during refresh when node has become optional required dispatched during refresh when node has become required readonly dispatched during refresh when node has become readonly readwrite dispatched during refresh when node has become readwrite valid dispatched during refresh when node has become valid invalid dispatched during refresh when node has become invalid relevant dispatched during refresh when node has become relevant nonrelevant dispatched during refresh when node has become non-relevant Special features passing referenced node as node instead of value With the ´as´ attribute the referenced node will be directly passed to the widget. This can be useful with control that manipulate nodes like e.g. text editors.\ncreating selects with an empty option Sometimes values can and should be empty initially. With selection=\u0026quot;open\u0026quot; on the select element it will create such en empty option.\nusing Fore as control By setting a url attribute you can use another ForeBody as the widget of given control. The url is resolved and will fetch the first fx-fore element it finds within that page and embeds it as widget of the control. You can pass in an fx-instance for the loaded widget with initial and get the return value with the return action.\nExamples the fx-control element Actions Fore API Demo Template Expressions Country selector Selects Trigger handling credentials "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/confirm/","title":"<fx-confirm>","tags":["elements actions"],"description":"","content":"Description Displays simple confirmation dialog. Action will only execute if confirmation returns true.\nAttributes Name Description message Message to display for confirmation. Action Attributes Name Description target id reference to element this action attaches to Events none\nExamples Project Task planner "},{"uri":"https://jinntec.github.io/fore-docs/elements/ui/dialog/","title":"<fx-dialog>","tags":["elements","ui","fx-dialog"],"description":"","content":"Description Simple modal dialog with arbitrary content.\nTo be used with fx-show and fx-hide actions.\nAttributes Name Description id required to be used by fx-show' and fx-hide`actions Events none\nExamples fx-dialog "},{"uri":"https://jinntec.github.io/fore-docs/elements/","title":"Elements","tags":[],"description":"","content":"Fore Elements Fore Elements are a set of Web Components that allow to build feature-complete HTML-driven applications.\nIt can be used to build small components or large and complex applications.\nAll Fore component use the prefix \u0026lsquo;fx-\u0026rsquo; to identify them as a related set of Web Components.\nFore elements allow to perform all various tasks that are needed for a full state-driven application like (not limited to):\nloading and holding data sending and receiving data applying constraints to data changing of data data-binding controls All functionality is fully available without writing any JavaScript.\nElements fall into 3 categories:\nModel Elements UI Elements Action Elements Model Elements Fore uses a model to hold all data sources, data-constraints, calculations and submissions.\nThe model (fx-model) is a \u0026lsquo;blind\u0026rsquo; element. It does not appear on screen.\nUI Elements Fore UI Elements are generic - they allow to bind a part of an HTML page to data being hold by fx-instance elements.\nThey wrap the actual controls they are bound to. The many examples show how this is done.\nAction Elements With Actions you can insert or delete data, change values, show/hide dialogs etc.\nActions that update data will automatically trigger the necessary updates of the UI and keep the model in sync.\n"},{"uri":"https://jinntec.github.io/fore-docs/elements/ui/hint/","title":"<fx-hint>","tags":["elements","ui","fx-hint"],"description":"","content":" "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/delete/","title":"<fx-delete>","tags":["elements actions","1.0.0"],"description":"","content":"Description Deletes a node from a nodeset.\nfx-delete Attributes Name Description ref XPath reference to instance node(s) to delete Examples todo nested todo TEI header editor sample "},{"uri":"https://jinntec.github.io/fore-docs/elements/ui/inspector/","title":"<fx-inspector>","tags":["elements","ui","fx-inspector","inspector"],"description":"","content":"Description Instance Inspector is a helper element for development which displays all used instances at the bottom of the viewport.\nIt uses the log() function under the hood and renders a html details element for each instance.\nAttributes Name Description default open wether or not to be open by default false Events none\nExamples Simple TEI Header editor "},{"uri":"https://jinntec.github.io/fore-docs/events/","title":"Events","tags":["events"],"description":"","content":"Events Fore is an event-driven state-engine. It reacts to events and dispatches itself events to reflect it\u0026rsquo;s state. Each operation in Fore is triggered by some event. You can hook your functionality into the page by defining actions for a given event.\nLifecycle Events Lifecylce events can be used for initialization tasks. When Fore is loaded into the DOM of a web page it will dispatch the following sequence of events:\nName Description target model-construct is not of much practical use but just signals that Fore is alive fx-model model-construct-done fires after all fx-instance elements have initialized and the model is setup. At this point we can rely on the existence of the referenced data. fx-model rebuild-done is emitted when the model was rebuild. During this stage Fore creates its dependency graph. fx-model recalculate-done is emitted when the model was recalculated. During this stage Fore evaluates the dependency graph. fx-model refresh-done is emitted when the UI has been updated fully. Data in the model are now reflected in the UI. fx-fore ready is dispatched when the current Fore element is fully initialized and rendered fx-fore For all work that should be done before the first rendering takes place use a \u0026lsquo;model-construct-done\u0026rsquo; handler. This is the best place to load additional data and do more complex initialization tasks as all actions triggered by \u0026lsquo;model-construct-done\u0026rsquo; will run within a single update cycle.\nOn \u0026lsquo;ready\u0026rsquo; you can rely on the UI being fully rendered. This also means that all \u0026lsquo;init\u0026rsquo; events attached to controls have been executed and eventual custom initialization tasks have been run.\nGeneral Events A Fore Action can listen to any event. These might the native ones or custom events.\nIf events specify a details object this can be accessed with the Fore event('propname') function. See under Functions.\nName Description Target click just listed here as it might be of frequent interest. parentNode by default any native JS event - parentNode by default any custom event - parentNode by default Update Cycle Events Some actions mutate data and report this to the model by setting a \u0026rsquo;needsUpdate\u0026rsquo; flag. When an action block is done it will check for the flag and update the model and UI accordingly by:\noptionally fully rebuild the model constraints (usually avoided) recalculate changed items revalidate changed items refresh controls/containers bound to changed items Name Description Target details rebuild-done fires after a rebuild has taken place fx-model maingraph - the main dependency graph recalculate-done fires after a recalculate has taken place fx-model graph - the depencency main- or subgraph, computes - the amount of computes refresh-done fires after a refresh has been done. The UI reflects the model state. fx-fore - Control State Events State events are dispatched whenever the state of a bound element changes.\nName Description Target Details init fires when a control initializes fx-control - readonly fires after an fx-control became readonly fx-control - readwrite fires after an fx-control became readwrite fx-control - optional fires after an fx-control became optional fx-control - required fires after an fx-control became required fx-control - nonrelevant fires after an fx-control became nonrelevant fx-control - relevant fires after a fx-control has become relevant fx-control - invalid fires after a fx-control has become invalid fx-control - valid fires after a fx-control has become valid fx-control - value-changed fires after a fx-control has changed its value fx-control path- the normalized path of the bound node, value - the value of the bound node Instance Events Name Description Target deleted fires after a delete action has been executed fx-instance insert fires when an fx-insert is executed fx-instance instance-loaded fires after an fx-instance has been loaded fx-instance Submission Events Name Description Target Details submit dispatch before submission is taking place fx-submission submission - the fx-submission element submit-done fires after a submission has successfully been executed fx-submission - submit-error fires when a submission returned an error fx-submission message - the submit error Repeat Events Name Description Target item-created fires when a repeat item was created fx-repeat item-changed fires when a repeat item was changed fx-repeat path-mutated fires when a path in a repeat has been mutated fx-repeat no-template-error fires when repeat has no template child fx-repeat Switch events Name Description Target deselect fires when fx-case is deselected fx-case element that was deselected select fires when fx-case is deselected fx-case element that was selected Dialog Events Name Description Target dialog-hidden fires after fx-dialog has been hidden fx-dialog dialog-shown fired when a dialog has been shown fx-dialog Other Name Description Target Details error fires after an error occurred fx-fore message - the error message execute-action fires when an action executes. For internal use. any action element action' - the action element, event`- the event object loaded fires after a fx-load has loaded or a sub-Fore has been loaded fx-load url - the evaluated url used by the load action, fore - the Fore element that has been loaded outermost-action-start fires when an outermost action block is started fx-action cause - the event object causing the action outermost-action-end fires when an outermost action block is finished fx-action - reload fires when a fx-reload action executes fx-reload - return fired by embedded Fore controls to return their bound value fx-fore nodeset - the nodeset returned by a subpage warn dispatched internally by Fore to display warning messages fx-fore message - the warning message "},{"uri":"https://jinntec.github.io/fore-docs/elements/ui/items/","title":"<fx-items>","tags":["elements","ui","fx-items"],"description":"","content":"Description Helper element to build a list of items by repeating given template for each node in the bound nodeset.\nAttributes Name Description ref XPath reference pointing to nodeset to be repeated Events none\nExamples Select Multiple "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/dispatch/","title":"<fx-dispatch>","tags":["elements actions"],"description":"","content":"Description Action to dispatch an event with optional parameters to specific targets.\nTo specify event properties the fx-property element is used.\nfx-dispatch will use id resolution within fx-repeat elements to resolve the id in scope of current occurence.\nAttributes Name Description name name of event to dispatch targetid id reference of element to dispatch to Events none\nExamples dispatch with properties fx-dispatch action "},{"uri":"https://jinntec.github.io/fore-docs/elements/ui/output/","title":"<fx-output>","tags":["elements","ui","fx-output"],"description":"","content":"Description Outputs bound or calculated values.\nAlso supports mimtypes \u0026lsquo;html\u0026rsquo; and \u0026lsquo;markdown\u0026rsquo; to render bound nodes accordingly.\nEvents none\nAttributes Name Description Default ref XPath reference pointing to the bound node - value XPath expression calculating a string value mediatype either \u0026lsquo;html\u0026rsquo; or \u0026lsquo;markdown\u0026rsquo; are accepted by now. Examples The fx-output Element Get started Instances Instance super powers Binding fx-control "},{"uri":"https://jinntec.github.io/fore-docs/elements/ui/repeat/","title":"<fx-repeat>","tags":["elements","ui","fx-repeat","repeat"],"description":"","content":"Description Repeats template for each node of the referenced nodeset.\nFor each data node in the referenced nodeset one \u0026lt;fx-repeatitem\u0026gt; element will be created that will contain the evaluated template as content.\nAttributes Name Description id identifier for repeat ref XPath reference pointing to the bound node Events Name Description Details path-mutated dispatched when repeat nodeset changes \u0026lsquo;path\u0026rsquo; - the mutation path \u0026lsquo;index\u0026rsquo; - the index of the changed repeat item. refresh-done dispatched after a refresh() run - ready dispatched after Fore has fully been initialized - error dispatches error when template expression fails to evaluate \u0026lsquo;message\u0026rsquo; - the error message Examples API Demo docbook Bibliography insert todo Project Task planner Atomic repeat repeat in switch repeat sequence the while attribute "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/hide/","title":"<fx-hide>","tags":["elements actions"],"description":"","content":"Description Action to hide a fx-dialog.\nAttributes Name Description dialog idref of an fx-dialog element. Events Name Description dialog-hidden dispatched when dialog is hidden Examples fx-dialog "},{"uri":"https://jinntec.github.io/fore-docs/elements/ui/switch/","title":"<fx-switch>","tags":["elements","ui"],"description":"","content":"Description Container that has fx-case children of which only one is shown at a given time.\nCan be unbound and toggled via an action or bound and react to data value.\nAttributes No Attributes\nEvents none\nExamples auth repeat in switch Simple TEI Header switch "},{"uri":"https://jinntec.github.io/fore-docs/elements/ui/trigger/","title":"<fx-trigger>","tags":["elements","ui","trigger"],"description":"","content":"Description Generic container for action buttons, links etc. which can execute an action when activated.\n\u0026lt;fx-trigger\u0026gt; can also be bound and therefore become readonly or non-relevant.\nAttributes Name Description Default ref XPath reference pointing to the bound node - Examples trigger actions binding delay delay dispatch \u0026hellip; "},{"uri":"https://jinntec.github.io/fore-docs/functions/","title":"Functions","tags":["functions"],"description":"","content":"Functions An overview of all functions available in Fore.\nXPath Functions As Fore uses XPath 3.1 as its expression language you also have access to the large library of functions that are defined by the standard.\nXPath 3 function reference Not 100% of the XPath 3.1 functions are available in fontoXPath. There are a few that might not be (fully) implemented. In doubt please refer to their github page or test in their wonderful fontoXPath playground.\nIn addition to XPath Fore defines some built-in functions that are essential for building fully event-driven user-interfaces.\nFore Functions base64encode(string) This is probably the least used function but sometimes you need to base64-encode a string e.g. for sending it as a GET param.\nParam:\nrequired: string - a string to be encoded Returns:\nbase64Encoded string context(id) The context() function is needed in situations where several instance data sources are involved.\nParam:\noptional: \u0026lsquo;id\u0026rsquo; - an id of an element to use as context. If not given returns the parent context of the current context. event(property) The event function is essential when working with events and params need to be passed. It allows to access properties of the event details object which is passed in by the event dispatcher.\nParam:\nrequired: property - a property of the event details object by name Returns:\nvalue of the respective property. Might be a string, object or nodes depending on event type event is often used in conjunction with fx-dispatch action which allows to set properties of a custom event.\nfore-attr(attribute-name) Returns the value of an attribute on the fx-fore element in scope. Can be used to pass values to a Fore page loaded via the src attribute which in turn can use these values inside of its logic with the help of this function.\nParam:\nrequired: attribute name - an attribute name present on the Fore element in scope Returns:\nthe value of the attribute index(id) The index function is used in combination with fx-repeat elements. It returns the current index of a given repeat.\nParam:\nrequired: id - the id of an fx-repeat element Returns:\nan integer denoting the currently active repeat item instance(id) The instance function is the most important function. It allows to address a certain fx-instance element for data-binding.\nParam:\noptional: id - when given must point to an existing fx-instance element with given id. If not given it will default the first fx-instance element in document order Returns:\nthe root context for matching fx-instance element. The type of the root context depends on the type of instance which can currently be \u0026lsquo;xml\u0026rsquo; or \u0026lsquo;json\u0026rsquo;. For XML the root node of the instance data is returned. For JSON the outermost map or array will be returned. log(id) The log function is just for development purposes and can be used to log some instance data to the document.\nParam:\nrequired: id - the id of the instance to log Returns:\nrenders instance data to the document. Outputs it\u0026rsquo;s content to a \u0026lt;code\u0026gt; block.\n\u0026lt;code\u0026gt;{log(\u0026#39;default\u0026#39;)}\u0026lt;/code\u0026gt; "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/insert/","title":"<fx-insert>","tags":["elements actions"],"description":"","content":"Description Action to insert node(s) into instance data.\nAttributes Name Description Default at index position in nodeset where to insert new node(s) 0 context optional XPath pointing to parent node of node to insert position with regard to \u0026lsquo;at\u0026rsquo; can be either \u0026lsquo;before\u0026rsquo; or \u0026lsquo;after\u0026rsquo; after origin XPath pointing to nodes to be inserted into referenced nodeset keepValues Boolean attribute. When present will keep text-values of origin nodes false ref XPath pointing to node(s) to insert. If context is given ref is relative to that Events Name Description insert dispatched when nodes have been inserted detail[insertedNodes] - the inserted nodes detail[position] - the position of the insert in the nodeset Examples Insert into inhomogenious nodeset insert action insert with context TEI header editor sample todo the while attribute "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/load/","title":"<fx-load>","tags":["elements actions","load","1.6.0"],"description":"","content":"Description Loads some content into a page, open a new tab with content or replaces current browser window with content.\nContent may be loaded from url or be specified inline surrounded with a template element.\nIf the HTML being loaded contains a fx-fore element it will be extracted from the page and used as content to be inserted.\nAttributes Name Description default attach-to \u0026lsquo;_self\u0026rsquo;, \u0026lsquo;_blank\u0026rsquo; or idref prefixed with \u0026lsquo;#\u0026rsquo; _self await eventname to await from templated content - url URL to load content from The await attribute Sometimes if you load a component with fx-load and the component has some initialization to do, you might want to wait for a certain event dispatched by that component before moving on. await will make sure this event fires before the load action becomes effective.\nEvents Name Description url-loaded dispatched after successful load of content Examples load \u0026lsquo;Unloading\u0026rsquo; a section With load you can also delete parts of the DOM and replace them with an empty element.\nThis is useful to reset a formerly loaded section again when you\u0026rsquo;re done with it.\n\u0026lt;fx-load attach-to=\u0026#34;#htmlout\u0026#34;\u0026gt; \u0026lt;template\u0026gt;\u0026lt;div\u0026gt;\u0026lt;/div\u0026gt;\u0026lt;/template\u0026gt; \u0026lt;/fx-load\u0026gt; Examples The load action "},{"uri":"https://jinntec.github.io/fore-docs/tools/","title":"Tools","tags":["Version 1.5.x","tools","glass"],"description":"","content":"Tools With Fore you can build quite complex pages, with other pages acting as controls, dynamically loaded content and data and more. However with power comes responsibility and things can get hard to debug without good tooling.\nFore Glass \u0026lsquo;Fore Glass\u0026rsquo; allows to:\nlog Action and Event flow - the panel on the left inspect the DOM tree of the page including highlighting for Fore elements - the center panel inspecting the state of all data sources used by the respective Fore element - the right panel inspect a specific control (Ctrl + i) and jump to its source element in the DOM and if bound to the bound data node clear Log with Ctrl+d configure the events you want to log Using Fore Glass There are two ways to use it:\ninclude a \u0026lt;fx-devtools\u0026gt; element in your page ideally directly as a child of the body element. or even simpler - just append the parameter \u0026lsquo;inspect\u0026rsquo; to the URL of the page, which will inject the element for you. What it does Everything that happens in a Fore page is the result of some events firing. Therefore, it is essential to understand, where and when certain events are fired. These are the hooks that can be used to attach the wanted behavior.\nUsually - and by default - the Log panel will only show Actions that got actually triggered by an event. The action name occurs on the left and the event name on the right.\nThe center panel shows the DOM tree of the Fore markup with highlighting the Fore elements. When a bound control the the DOM tree is clicked it will reveal it\u0026rsquo;s attributes in the smaller panel and also jump to the bound data node in the right-hand panel.\nEvent logging configuration By default the Log will only show events that actually trigger an action which is usually what you want. The event configuration panel show you all available events at once along with a short description when you hover them.\nTo discover which events you have at hand or in which sequence they happen at which time, you can check/uncheck the intereting events to display them in the Log.\nFor this example the \u0026lsquo;model-construct\u0026rsquo;, \u0026lsquo;model-construct-done\u0026rsquo; and \u0026lsquo;ready\u0026rsquo; have been checked,\nPlease note the rendering of the items - events that do not have actions attached to them will occur with rounded corners. Actions that are executed as one block with a single update-cycle will be marked with a blue border on the left.\n"},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/message/","title":"<fx-message>","tags":["elements actions","message"],"description":"","content":"Description Display a message to the user.\nAttributes Name Description default level \u0026lsquo;modal\u0026rsquo;, \u0026lsquo;modeless\u0026rsquo; or \u0026rsquo;ephemeral\u0026rsquo; ephemeral \u0026lsquo;modal\u0026rsquo; - modal dialog window \u0026lsquo;sticky\u0026rsquo; - sticky popup message \u0026rsquo;ephemeral\u0026rsquo; - auto-closing popup message default value XPath expression which resolves to message Events none\nExamples fx-message actions Binding the delay attribute fx-control Hello World the if attribute instances lazy modelItem creation during UI init the while attribute "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/refresh/","title":"<fx-refresh>","tags":["elements actions","refresh"],"description":"","content":"Description Triggers immediate refresh.\nAttributes Name Description control id of an control to be refreshed explicitly force marker attribute to force a full refresh - overrules control self searches upwards for fx-control and refreshes it Events none\nExamples the delay attribute Randomizer the while attribute "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/replace/","title":"<fx-replace>","tags":["elements actions"],"description":"","content":"Description Replaces a node with another.\nAttributes Name Description ref XPath reference pointing to the bound node with XPath expression to point to a node for replacement Examples Replace Action "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/reset/","title":"<fx-reset>","tags":["elements actions","1.6.0"],"description":"","content":"Description Replaces a node with another.\nAttributes Name Description instance the id of the instance to reset to its initial state Examples Reset Action "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/return/","title":"<fx-return>","tags":["Actions"],"description":"","content":"Description The fx-return action is exclusively used within the context of bound Fore elements.\nAttributes Name Description ref XPath reference pointing to the bound node with XPath expression to point to a node for replacement Action Attributes see Action\nExamples Replace Action "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/send/","title":"<fx-send>","tags":["elements actions"],"description":"","content":"Description Triggers a submission. Submission with given id must exist otherwise error is thrown.\nAttributes Name Description submission required idref to fx-submission element. Also supports \u0026lsquo;#reload\u0026rsquo; which just reloads the window. target overwrites target attribute of submission - may contain template expressions url overwrites url attribute of submission - may contain template expressions Attributes that overwrite submission attributes are set once per execution. Calling the same submission again without such an attribute falls back to the value on fx-submission element.\nEvents Name Description log log event is dispatched in case submission id cannot be found Examples auth Submission Relevance Processing Submission serialization Submission Demo Submission Demo 2 Submission serialization Submission Chaining submit with ref overwrite url overwrite target "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/setfocus/","title":"<fx-setfocus>","tags":["elements actions"],"description":"","content":"Description Sets the focus to a control with given id. If the id is within an repeat it will look for the active repeatitem and search that for the control.\nSince: Version 2.0.0\nAttributes Name Description control idref that a control select if attribute is given the value of the control will be selected Events none\nExamples todo "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/setvalue/","title":"<fx-setvalue>","tags":["elements actions"],"description":"","content":"Description Sets a value to a bound node.\nAttributes Name Description ref XPath reference pointing to the bound node value XPath expression to be set as value Events none\nExamples Action auth binding the delay attribute events events 2 hello "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/show/","title":"<fx-show>","tags":["elements actions"],"description":"","content":"Description Action to display a fx-dialog.\nAttributes Name Description dialog idref of an fx-dialog element. Events Name Description dialog-shown dispatched when dialog is shown Examples fx-dialog "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/toggle/","title":"<fx-toggle>","tags":["elements actions"],"description":"","content":"Description Action to toggle a fx-switch element.\nAttributes Name Description case id of fx-case element to show Events none\nExamples auth repeat in switch Simple TEI Header switch "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/toggleboolean/","title":"<fx-toggleboolean>","tags":["elements actions","1.7.0"],"description":"","content":"Description Action to toggle a Boolean value in the data.\nAttributes Name Description ref required: XPath reference to toggle Events none\nExamples Toggle a Boolean value "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/","title":"Actions","tags":["elements actions"],"description":"","content":"Action Elements This chapter describes all Action elements.\nCommon Attributes The following attribues can be used on any Fore action element.\nName Description defaultAction \u0026lsquo;perform\u0026rsquo; (default) or \u0026lsquo;cancel\u0026rsquo; delay delay before action is executed in milliseconds. event the event name this action is listening to if boolean XPath expression. Action is only executed if this returns true. phase \u0026lsquo;default\u0026rsquo; or \u0026lsquo;capture\u0026rsquo; propagate \u0026lsquo;stop\u0026rsquo; or \u0026lsquo;continue\u0026rsquo; (default) target id of element to attach to or special values \u0026lsquo;#window\u0026rsquo; and \u0026lsquo;#document\u0026rsquo; while boolean XPath expression. Action is only executed if ìf and while return true. Common Events Name Description action-performed dispatched after execution of an action while-performed dispatched after execution of a while loop "},{"uri":"https://jinntec.github.io/fore-docs/tags/guides/","title":"guides","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/guides/modularization/","title":"Modularization","tags":["guides"],"description":"","content":"\n\u0026ldquo;Modularization is the activity of dividing a product or system into interchangeable modules.\u0026rdquo; (stolen somewhere)\nAs long as things stay simple and you have just a bunch of controls, there\u0026rsquo;s not much logic and just a few data fields you don\u0026rsquo;t have to worry much about Modularization.\nHowever, if you\u0026rsquo;re building a whole application things will quickly change - the markup grows and grows with some undesired effects on productivity:\na large file is less readable and maintainable merge conflicts may arise more often when working with several developers on the same thing you probably would need to repeat yourself just to have a block of related content in different places scrolling up and down can become a nightmare just to see where certain idrefs point to Modularization with Fore Luckily Fore has several ways of dealing with this. You don\u0026rsquo;t need a detailed plan upfront, but can use one of the features below to modularize when time has come.\nIncluding an external ForeBody Starting with the easiest method of factoring out a block of markup and loading it from an external file:\n\u0026lt;fx-fore src=\u0026#34;hello.html\u0026#34;\u0026gt;\u0026lt;/fx-fore\u0026gt; When the browser hits the fx-fore element it will first look for a src attribute and if present, load the external page.\nThe page is searched for the first fx-fore element which gets extracted and replaces the original fx-fore element.\nPlease note that this approach allows to develop a standalone page and make it work individually and later use the unmodified page included in some other page. WARNING: please be aware that the CSS of the loaded page is not imported as just the fx-fore element is extracted. That could be a future enhancement.\nAs a consequence the import of the external file is always happening and cannot be cancelled or (directly) reverted. Using \u0026lt;fx-fore src=\u0026quot;mypage.html\u0026quot;\u0026gt; can be thought of as a simple include. It\u0026rsquo;s fine to break down larger pages into smaller units but does not offer support for reducing the page load.\npassing attributes and classes to the imported page All attributes and CSS classes given to a fx-fore element will be passed down to the replacing element.\nFor easy access to these attributes from within the loaded page there is the fore-attr() function.\n\u0026lt;fx-fore src=\u0026#34;hello1.html\u0026#34; class=\u0026#34;myClass\u0026#34; attr1=\u0026#34;world\u0026#34;\u0026gt;\u0026lt;/fx-fore Fore element in hello1.html:\n\u0026lt;fx-fore\u0026gt; Hello {fore-attr(\u0026#39;attr1\u0026#39;)} \u0026lt;/fx-fore\u0026gt; If you inspect the live demo with devtools you\u0026rsquo;ll see that myClass and attr1 are preserved.\nYou\u0026rsquo;ll see an additional attr \u0026lsquo;from-src\u0026rsquo; which contains the value of the original src attribute. This is not of significance for now but might get used in the future.\n\u0026lt;/fx-fore\nFore as control A fx-fore element can be used as a control like this:\n\u0026lt;fx-fore\u0026gt; ... \u0026lt;fx-control ref=\u0026#34;item\u0026#34; url=\u0026#34;myForeControl.html\u0026#34;\u0026gt; \u0026lt;label\u0026gt;A nested Fore acting as control\u0026lt;/label\u0026gt; \u0026lt;/fx-control\u0026gt; ... \u0026lt;/fx-fore\u0026gt; At runtime this will be expanded to this:\n\u0026lt;fx-fore\u0026gt; ... \u0026lt;fx-control ref=\u0026#34;item\u0026#34; url= \u0026#34;myForeControl.html\u0026#34;\u0026gt; \u0026lt;label\u0026gt;A nested Fore acting as control\u0026lt;/label\u0026gt; \u0026lt;fx-fore class=\u0026#34;widget\u0026#34;\u0026gt; \u0026lt;!-- content of myForeControl.html --\u0026gt; \u0026lt;/fx-fore\u0026gt;. \u0026lt;/fx-control\u0026gt; ... \u0026lt;/fx-fore\u0026gt; There are no restrictions regarding the complexity or size of the embedded ForeBody.\nfor Web Components experts: Fore lives by default in the lightDOM but still restricts its events to the respective scope of a fx-fore element. Styling therefore can be applied globally. By adding a boolean attribute shadow the loaded content will be put into shadowDOM. Usually that is NOT what you want when assembling a larger UI from parts.\nPassing data to the Fore widget To be useful there needs to be a way to pass in initial data for the embedded Fore. This is accomplished with the initial attribute.\n\u0026lt;fx-control ref=\u0026#34;item\u0026#34; url=\u0026#34;myForeControl.html\u0026#34; initial=\u0026#34;.\u0026#34;\u0026gt; \u0026lt;label\u0026gt;A nested Fore acting as control\u0026lt;/label\u0026gt; \u0026lt;/fx-control\u0026gt; initial is an XPath expression that resolves relative to the ref node. Here (wich is a common case) we just pass in the node that we are binding to in our outer ForeBody.\nAfter the Fore control has initialized it will get the following default instance.\n\u0026lt;fx-instance\u0026gt; \u0026lt;data\u0026gt; \u0026lt;item\u0026gt;[value of bound node in outer ForeBody]\u0026lt;/item\u0026gt; \u0026lt;/data\u0026gt; \u0026lt;/fx-instance\u0026gt; The embedded ForeBody can now work with this data as usual.\nReturning data to outer ForeBody When an fx-control embeds a ForeBody it will start listening for a return event.\nWhenever the embedded ForeBody decides to be done (on value-changed in example below) it will fire the return event passing back the resulting data in the nodeset property. The control will use that and mount the data to its binding. Let\u0026rsquo;s assume the user typed \u0026lsquo;result\u0026rsquo;:\n\u0026lt;fx-fore\u0026gt; \u0026lt;fx-model\u0026gt; \u0026lt;fx-instance\u0026gt; \u0026lt;data\u0026gt; \u0026lt;item\u0026gt;result\u0026lt;/item\u0026gt; \u0026lt;/data\u0026gt; \u0026lt;/fx-instance\u0026gt; \u0026lt;fx-model\u0026gt; \u0026lt;fx-control ref=\u0026#34;item\u0026#34; url=\u0026#34;myForeControl.html\u0026#34; initial=\u0026#34;.\u0026#34;\u0026gt; \u0026lt;label\u0026gt;A nested Fore acting as control\u0026lt;/label\u0026gt; \u0026lt;fx-fore\u0026gt; \u0026lt;fx-control ref=\u0026#34;item\u0026#34;\u0026gt; \u0026lt;label\u0026gt;Your item\u0026lt;/label\u0026gt; \u0026lt;fx-return event=\u0026#34;value-changed\u0026#34; ref=\u0026#34;.\u0026#34;\u0026gt;\u0026lt;/fx-return\u0026gt; \u0026lt;/fx-control\u0026gt; \u0026lt;/fx-fore\u0026gt; \u0026lt;/fx-control\u0026gt; The returned data can be element nodes, an attribute node or text nodes and replace the bound node of the control.\nThis means that complete subtrees of data can be mounted back into the outer Fore.\n\u0026lt;data\u0026gt; \u0026lt;!-- this data do not match the above example - just for illustration --\u0026gt; \u0026lt;item instock=\u0026#34;true\u0026#34;\u0026gt; \u0026lt;article-number\u0026gt;1234\u0026lt;/article-number\u0026gt; \u0026lt;name\u0026gt;Sneeeaakr\u0026lt;/name\u0026gt; \u0026lt;/item\u0026gt; \u0026lt;/data\u0026gt; Warning: this feature is limited to the use of HTML or XML as data model. JSON support is still limited though planned for the future.\nUsing nested Fore elements like this the most powerful technique to modularize applications into smaller functional pieces. A \u0026lsquo;control\u0026rsquo; can handle arbitrary complex logic within itself and only present the results back to its outer Fore. Existing ForeBodies can be embeded within another with minimal effort and still stay independent pages that can be developed and tested separately.\nLoad on Demand For bigger applications you probably want to limit the pageload as this often involves optional or dynamic views that you ideally only want \u0026rsquo;to pay for\u0026rsquo; when really needed.\nYou can also just start with minimal UI and load everything dynamically.\nWith the fx-load action a lot of different scenarios can be accomplished and i\u0026rsquo;ll not going into navigational features of the load action here, as these are well documented in the load demo.\nFor modularization purposes fx-load offers two options:\nLoading a template A fx-load action specifying an HTML template element is useful if you have rather small snippet of HTML content to insert into your UI.\nAs all actions fx-load reacts to a certain event and it depends on your use case which one to choose.\n\u0026lt;fx-load attach-to=\u0026#34;#lazyControl\u0026#34; id=\u0026#34;first\u0026#34; event=\u0026#34;anyEvent\u0026#34;\u0026gt; \u0026lt;template\u0026gt; \u0026lt;fx-control ref=\u0026#34;item\u0026#34;\u0026gt; \u0026lt;label\u0026gt;an item:\u0026lt;/label\u0026gt; \u0026lt;/fx-control\u0026gt; \u0026lt;fx-output ref=\u0026#34;item\u0026#34;\u0026gt;\u0026lt;/fx-output\u0026gt; \u0026lt;/template\u0026gt; \u0026lt;/fx-load\u0026gt; \u0026lt;div id=\u0026#34;lazyControl\u0026#34;\u0026gt;\u0026lt;/div\u0026gt; The template may contain any kind of HTML including of course all Fore elements.\nWhen the event fires the fx-load action will clone the template and insert it into the DOM at the position specified by attach-to. It expects an id given in CSS selector syntax starting with a \u0026lsquo;#\u0026rsquo;.\nThe content of the target element will be replaced with the cloned template content.\n\u0026lt;div id=\u0026#34;lazyControl\u0026#34;\u0026gt; \u0026lt;fx-control ref=\u0026#34;item\u0026#34;\u0026gt; \u0026lt;label\u0026gt;an item:\u0026lt;/label\u0026gt; \u0026lt;/fx-control\u0026gt; \u0026lt;fx-output ref=\u0026#34;item\u0026#34;\u0026gt;\u0026lt;/fx-output\u0026gt; \u0026lt;/div\u0026gt; Loading external content If bigger chunks of content shall be loaded or you like to keep the content in a separate file, you can use the url attribute.\n\u0026lt;fx-fore\u0026gt; \u0026lt;fx-load event=\u0026#34;ready\u0026#34; url=\u0026#34;load-snippet.html\u0026#34; attach-to=\u0026#34;#thetarget\u0026#34;\u0026gt;\u0026lt;/fx-load\u0026gt; \u0026lt;fx-message event=\u0026#34;loaded\u0026#34;\u0026gt;url {event(\u0026#39;url\u0026#39;)}\u0026lt;/fx-message\u0026gt; \u0026lt;div id=\u0026#34;thetarget\u0026#34;\u0026gt;\u0026lt;/div\u0026gt; \u0026lt;/fx-fore\u0026gt; Inserting a full HTML page into another breaks the page and must be avoided. Thus, the content of the body is used for insertion at attach-to node.\nHowever if the loaded content contains another fx-fore element it is assumed that this should be loaded instead.\nWhen content became available fx-load will fire a loaded event in case some post-import actions need to be done.\nUnloading content To unload content and remove it from DOM again, the load action can simply provide a template with an empty HTML element.\nAs the content replaces the content of the target element, this will effectively remove whatever there has been before.\n\u0026lt;fx-load attach-to=\u0026#34;#lazyControl\u0026#34; event=\u0026#34;anyEvent\u0026#34;\u0026gt; \u0026lt;template\u0026gt;\u0026lt;div\u0026gt;\u0026lt;/div\u0026gt;\u0026lt;/template\u0026gt; \u0026lt;/fx-load\u0026gt; \u0026lt;div id=\u0026#34;lazyControl\u0026#34;\u0026gt;\u0026lt;/div\u0026gt; Summary For simple inclusion of a ForeBody use \u0026lt;fx-fore src=\u0026quot;myfore.html\u0026quot;\u0026gt; When assembling complex data-structures \u0026lt;fx-control url=\u0026quot;myfore.html\u0026quot;\u0026gt; is helpful to break things down With efficiency and lazy-loading on mind you should go for \u0026lt;fx-load\u0026gt; Of course these approaches can also be combined.\n"},{"uri":"https://jinntec.github.io/fore-docs/tags/","title":"Tags","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/actions/","title":"actions","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/glossary/","title":"Concepts & Terms","tags":[],"description":"","content":"Binding Expression A binding expression is represented in markup as a ref or data-ref attribute. The expression language is XPath 3 which allows for complex bindings that include filters with function calls, conditional etc.\nBinding Expressions are relative to their parent bindings - see under \u0026lsquo;Scoped Resolution\u0026rsquo;.\nDefault Instance The \u0026lsquo;default instance\u0026rsquo; in Fore is always the first in document order within a given fx-fore element. It will get an id=\u0026quot;default\u0026quot; being set if no id attribute exists. The default instance can be accessed by the instance() function without passing an argument.\nThe instance() function can be omitted in binding expressions if there\u0026rsquo;s no non-default instance in scope.\nId Resolution As Fore offers repeating sections via fx-repeat or data-ref there will be the situation that id attributes present in the template of a repeat get duplicated at runtime.\nFor example:\n\u0026lt;fx-repeat ref=\u0026#34;items\u0026#34;\u0026gt; \u0026lt;template\u0026gt; \u0026lt;div id=\u0026#34;myDiv\u0026#34;\u0026gt;....\u0026lt;/div\u0026gt; \u0026lt;/template\u0026gt; \u0026lt;/fx-repeat\u0026gt; This will result in as many \u0026lt;div\u0026gt; elements with id myDiv as you got items in your data.\nTo avoid clashes Fore implements an Ìd Resolution` algorithm to make sure that you can still refer to the right repeated element.\nExample:\n\u0026lt;fx-repeat ref=\u0026#34;items\u0026#34;\u0026gt; \u0026lt;template\u0026gt; ... \u0026lt;div id=\u0026#34;myId-\u0026#34;\u0026gt; ... \u0026lt;!-- dispatch \u0026#39;hello\u0026#39; event to \u0026#39;myId\u0026#39; --\u0026gt; \u0026lt;fx-dispatch name=\u0026#34;hello\u0026#34; targetid=\u0026#34;myId\u0026#34;\u0026gt;\u0026lt;/fx-dispatch\u0026gt; \u0026lt;/template\u0026gt; \u0026lt;/fx-repeat\u0026gt; \u0026lt;!-- rolled out at runtime --\u0026gt; \u0026lt;fx-repeat ref=\u0026#34;items\u0026#34;\u0026gt; \u0026lt;fx-repeatitem\u0026gt; \u0026lt;div id=\u0026#34;myId\u0026#34;\u0026gt; ... \u0026lt;fx-dispatch name=\u0026#34;hello\u0026#34; targetid=\u0026#34;myId\u0026#34;\u0026gt;\u0026lt;/fx-dispatch\u0026gt; \u0026lt;fx-repeatitem\u0026gt; \u0026lt;fx-repeatitem\u0026gt; \u0026lt;div id=\u0026#34;myId\u0026#34;\u0026gt; ... \u0026lt;fx-dispatch name=\u0026#34;hello\u0026#34; targetid=\u0026#34;myId\u0026#34;\u0026gt;\u0026lt;/fx-dispatch\u0026gt; \u0026lt;fx-repeatitem\u0026gt; \u0026lt;fx-repeatitem\u0026gt; \u0026lt;div id=\u0026#34;myId\u0026#34;\u0026gt; ... \u0026lt;fx-dispatch name=\u0026#34;hello\u0026#34; targetid=\u0026#34;myId\u0026#34;\u0026gt;\u0026lt;/fx-dispatch\u0026gt; \u0026lt;fx-repeatitem\u0026gt; Here the dispatch action refers to an id - Id Resolution will make sure that the id resolves within the context of the enclosing repeat item. This works also for nested repeats.\nForeBody A \u0026lsquo;ForeBody\u0026rsquo; means a fx-fore element including all of its content and it just a name picked for easier referral when talking about Fore.\nLazy Instance Lazily created data structure created from bindings in the UI.\nSee \u0026lsquo;Lazy Mode\u0026rsquo;.\nLazy Mode In lazy mode the user does not need to specify a fx-model explicitly. When no fx-model is found at init time, Fore switches to lazy mode and creates a default data structure from the bindings found in the UI.\nExample:\n\u0026lt;fx-fore\u0026gt; \u0026lt;fx-control ref=\u0026#34;forename\u0026#34;\u0026gt; \u0026lt;label\u0026gt;Forename\u0026lt;/label\u0026gt; \u0026lt;/fx-control\u0026gt; \u0026lt;fx-control ref=\u0026#34;lastname\u0026#34;\u0026gt; \u0026lt;label\u0026gt;Lastname\u0026lt;/label\u0026gt; \u0026lt;/fx-control\u0026gt; \u0026lt;/fx-fore\u0026gt; In this case Fore will come up with an auto-generated model and data structure looking like this:\n\u0026lt;fx-fore\u0026gt; \u0026lt;fx-model\u0026gt; \u0026lt;fx-instance\u0026gt; \u0026lt;data\u0026gt; \u0026lt;forename\u0026gt;\u0026lt;/forename\u0026gt; \u0026lt;lastname\u0026gt;\u0026lt;/lastname\u0026gt; \u0026lt;/data\u0026gt; \u0026lt;/fx-instance\u0026gt; \u0026lt;/fx-model\u0026gt; \u0026lt;fx-control ref=\u0026#34;forename\u0026#34;\u0026gt; \u0026lt;label\u0026gt;Forename\u0026lt;/label\u0026gt; \u0026lt;/fx-control\u0026gt; \u0026lt;fx-control ref=\u0026#34;lastname\u0026#34;\u0026gt; \u0026lt;label\u0026gt;Lastname\u0026lt;/label\u0026gt; \u0026lt;/fx-control\u0026gt; \u0026lt;fx-fore\u0026gt; Lazy mode is meant to be used for quick prototyping and very simple use cases. They do not allow to use binding facets or explicit submisssions.\nRelevance Selection Relevance is a powerful features that comes into play in several places:\nBound UI Elements UI Elements can be bound by their ref attribute. If a ref expresssion does not point to a data item it becomes \u0026rsquo;nonrelevant\u0026rsquo; which means:\nit\u0026rsquo;s not shown to the User the elements\u0026rsquo; states (like \u0026lsquo;readonly\u0026rsquo;, \u0026lsquo;required\u0026rsquo;, \u0026lsquo;valid\u0026rsquo;\u0026hellip;) won\u0026rsquo;t be updated unless a data item becomes available This can be used hide/show complete sections in the UI depending directly on existence of a node. Once a bound node becomes available the respective UI container or control will be shown.\nWhen sending a request Whenever data are send, the RelevanceSelector will first filter all data items according to the relevance mode for that request.\nBy default all data items being nonrelevant will be filtered out before sending the data over the wire. During this filtering also empty attributes will be pruned.\nUsing the relevant facet of fx-bind Besides simple existence of a data item the fx-bind element may specify a relevant condition for a data item of a set of items.\nThe expression needs to evaluate to a Boolean and will be taken into account when refreshing the UI or sending data.\nExample:\n\u0026lt;fx-fore\u0026gt; \u0026lt;fx-model\u0026gt; \u0026lt;fx-instance\u0026gt; \u0026lt;data\u0026gt; \u0026lt;vehicle type=\u0026#34;bicycle\u0026#34;\u0026gt; \u0026lt;bicycle\u0026gt; \u0026lt;frame size=\u0026#34;28\u0026#34;\u0026gt;\u0026lt;/frame\u0026gt; \u0026lt;bicycle\u0026gt; \u0026lt;car\u0026gt; \u0026lt;engine\u0026gt; \u0026lt;/car\u0026gt; \u0026lt;/data\u0026gt; \u0026lt;/fx-instance\u0026gt; \u0026lt;fx-bind ref=\u0026#34;bicycle\u0026#34; relevant=\u0026#34;../vehicle/@type = \u0026#39;bicycle\u0026#39;\u0026gt;\u0026lt;/fx-bind\u0026gt; \u0026lt;fx-bind ref=\u0026#34;car\u0026#34; relevant=\u0026#34;../vehicle/@type = \u0026#39;car\u0026#39;\u0026gt;\u0026lt;/fx-bind\u0026gt; \u0026lt;/fx-model\u0026gt; \u0026lt;/fx-fore\u0026gt; When sending data these bindings will make sure that only the relevant portions of the data are sent by default, depending on the value of vehicle/@type.\nLikewise when a user makes a selection for `vehicle/@type\u0026rsquo; the user interface will adapt and show the relevant controls and hide the nonrelevant ones.\nScoped Resolution \u0026lsquo;Scoped Resolution\u0026rsquo; takes place whenever ref or data-ref attributes are resolved. It allows to use relative binding expressions that are resolved upwards the document tree.\nIt is a similar concept as with usual relative linking in HTML or navigating a directory-structure.\nAn example illustrates this best:\n\u0026lt;fx-instance\u0026gt; \u0026lt;data\u0026gt; \u0026lt;address\u0026gt; \u0026lt;name\u0026gt;Alice\u0026lt;/name\u0026gt; \u0026lt;address\u0026gt; \u0026lt;/data\u0026gt; \u0026lt;/fx-instance\u0026gt; \u0026lt;fx-bind ref=\u0026#34;address\u0026#34;\u0026gt; \u0026lt;!-- scoped resolution happens here --\u0026gt; \u0026lt;fx-bind ref=\u0026#34;name\u0026#34;\u0026gt;\u0026lt;/fx-bind\u0026gt; \u0026lt;fx-bind\u0026gt; When the nested fx-bind element is found it will resolve the tree upwards until it reaches the fx-fore element. While climbing upwards each ref attribute that is found will be picked up to build a complete absolute expression from it.\nFor the example it will resolve to address/name and return the node which has the value \u0026lsquo;Alice\u0026rsquo; here.\nThe instance() function without arguments return us the default instance which is always the first in document order.\nPlease note that you never need to spell out the root node when refering to a data item. So just address instead of data/address.\n"},{"uri":"https://jinntec.github.io/fore-docs/tags/1.6.0/","title":"1.6.0","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/elements-actions/","title":"elements actions","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/load/","title":"load","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/links/","title":"Links","tags":[],"description":"","content":"Fore Fore at github Fore at npmjs.com Twitter Discussions Issues Blog Articles Fore - User Interfaces in put HTML Programming with HTML but why? A Todo App in plain HTML Standards A beautiful XPath 3 reference XForms 2.0 - source of inspiration HTML Custom Elements Spec. Web Components at mdn XQuery Update for the impatient "},{"uri":"https://jinntec.github.io/fore-docs/tags/functions/","title":"functions","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/basic/","title":"basic","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/controls/","title":"controls","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/fore/","title":"fore","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/fx-fore/","title":"fx-fore","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/fx-model/","title":"fx-model","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/instance/","title":"instance","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/model/","title":"model","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/mvc/","title":"MVC","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/repeat/","title":"repeat","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/ui/","title":"UI","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/elements/model/bind/","title":"<fx-bind>","tags":["elements","model","fx-bind"],"description":"","content":"Description The fx-bind element attaches constraints and calculations to instance nodes.\nBy using XPath expressions for the attributes users can build complex calculation and validation rules (business logic) using a declarative syntax.\nfx-bindelements can be nested thereby taking part in inscope resolution resolving their ref attributes relative to their parent element.\nThe bindings are used to build the MDG (Main Dependency Graph) which detects dependencies between nodes and builds a graph that connects the dependent nodes to the currently processed one. This directed graph will then be ordered for computation. Circular dependencies are not allowed.\nWhen nodes are changed by user interaction only affected nodes are recomputed - affected nodes are nodes that have a connection to the changed node in the graph.\nThis change detection mechanism also drives efficient updating of the UI by selectively updating only controls that are bound to affected nodes.\nAttributes Name Description Default ref XPath pointing to node(s) the bind is attaching to - calculate XPath expression to be calculated. Result will become value of node(s) referenced by ref - constraint boolean XPath expression to determine validity of node(s) true readonly boolean XPath expression to determine readonly/readwrite state false relevant boolean XPath expression to determine relevant/non-relevant state true required boolean XPath expression to determine required/optional state false type datatype - reserved for future versions string Events none\nExamples nested Binding Binding Hello Simple Calculate todo Recalculate Revalidation Submission Relevance Processing "},{"uri":"https://jinntec.github.io/fore-docs/elements/model/functions/","title":"<fx-function>","tags":["elements","model","fx-function"],"description":"","content":"Description Allows to define custom inline function in either XPath/XQuery or Javascript.\nAttributes Name Description signature the function signature. Must use \u0026rsquo;local\u0026rsquo; prefix type can be \u0026rsquo;text/xpath\u0026rsquo;, \u0026rsquo;text/javascript\u0026rsquo;, \u0026rsquo;text/xquf\u0026rsquo; (XQuery Update Facility) Events none\nExamples Xquery Update Facility \u0026lt;fx-function signature=\u0026#34;update($element as element()) as element()*\u0026#34; type=\u0026#34;text/xquf\u0026#34;\u0026gt; copy $xml := $element modify ( for $ref in $xml/element return insert node $ref/@name with $xml/element/name/text() ) return $xml \u0026lt;/fx-function\u0026gt; JavaScript \u0026lt;fx-function signature=\u0026#34;now() as xs:string\u0026#34; type=\u0026#34;text/javascript\u0026#34;\u0026gt; const now = new Date(); return `${String(now.getHours()).padStart(2, \u0026#39;0\u0026#39;)}:${String(now.getMinutes()).padStart(2, \u0026#39;0\u0026#39;)}:${String(now.getSeconds()).padStart(2, \u0026#39;0\u0026#39;)}`; \u0026lt;/fx-function\u0026gt; Custom inline functions Randomizer "},{"uri":"https://jinntec.github.io/fore-docs/elements/model/instance/","title":"<fx-instance>","tags":["elements","model","fx-instance"],"description":"","content":"Description Holds the data of the model. A fx-model may have as many fx-instance elements as necessary.\nAttributes Name Description default credentials sets credentials policy - one of \u0026lsquo;omit\u0026rsquo;, \u0026lsquo;same-origin\u0026rsquo; or \u0026lsquo;include\u0026rsquo; same-origin id id of the instance for addressing in refs default src url to load instance from via http get type \u0026lsquo;xml\u0026rsquo; or \u0026lsquo;json\u0026rsquo; or \u0026lsquo;html\u0026rsquo; are supported by now xml xpath-default-namespace namespace to be used with unprefixed XPathes emtpy URI Schemes In addition to \u0026lsquo;http\u0026rsquo;, \u0026lsquo;https\u0026rsquo; further URI schemes are:\n\u0026lsquo;#querystring\u0026rsquo; will create a XML structure for the URL parameter of the page \u0026rsquo;localStore:[key]\u0026rsquo; to read some data from browsers\u0026rsquo; localstorage Examples Instances Instance super powers the fx-output element localStore Handling credentials "},{"uri":"https://jinntec.github.io/fore-docs/elements/model/submission/","title":"<fx-submission>","tags":["elements","model","fx-submission"],"description":"","content":"Description Send and receive data.\nAttributes Name Description Default credentials sets credentials policy - one of \u0026lsquo;omit\u0026rsquo;, \u0026lsquo;same-origin\u0026rsquo; or \u0026lsquo;include\u0026rsquo; same-origin id required: id of submission for referral \u0026lsquo;default\u0026rsquo; ref XPath reference pointing to the bound node root node of default instance instance id of instance when replace='instance'. Required when replace=\u0026lsquo;instance\u0026rsquo; into XPath expr where to insert response nodes into method http methods GET, POST, PUT, DELETE, url-encoded-post GET nonrelevant handling of non relevant nodes during serialization. Can be one of \u0026lsquo;keep\u0026rsquo;, \u0026rsquo;empty\u0026rsquo; or \u0026lsquo;remove\u0026rsquo; remove replace one of \u0026lsquo;all\u0026rsquo;, \u0026lsquo;download\u0026rsquo;, \u0026lsquo;instance\u0026rsquo;, \u0026rsquo;target\u0026rsquo;, \u0026lsquo;redirect\u0026rsquo; or \u0026rsquo;none\u0026rsquo; all \u0026lsquo;all\u0026rsquo; - response replaces the viewport \u0026lsquo;download\u0026rsquo; - save dialog is shown for response \u0026lsquo;instance\u0026rsquo; - response replaces the instance given by the instance attribute or if not present the default instance \u0026rsquo;target\u0026rsquo; - response will be attached to element identified by target (CSS Selector syntax e.g. \u0026lsquo;#mydiv\u0026rsquo;) \u0026lsquo;redirect\u0026rsquo; - use response as redirect url. \u0026rsquo;none\u0026rsquo; - response will be ignored. serialization \u0026rsquo;none\u0026rsquo; or \u0026lsquo;xml\u0026rsquo; at this point xml target selector in CSS selector syntax. valid only when replace is \u0026rsquo;target\u0026rsquo;. targetref XPath pointing to target node when replace=\u0026quot;instance\u0026quot; validate Boolean to turn validator mode on/off true Events Name Description submit dispatch before submission takes place submit-error dispatched if the request returned an error submit-done dispatched when submission was successfully completed URL Schemes Beside http, https Fore supports:\n\u0026rsquo;localStore:[key]\u0026rsquo; to manage data in the browsers\u0026rsquo; localstorage (supports \u0026lsquo;get\u0026rsquo;, \u0026lsquo;post\u0026rsquo;, \u0026lsquo;delete\u0026rsquo; and \u0026lsquo;consume\u0026rsquo; methods \u0026lsquo;#echo\u0026rsquo; to echo back whatever got sent Examples auth submission localStore submission serialization submission demo submission demo2 submission chaining submission chaining submission with targetref handling credentials "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/update/","title":"<fx-update>","tags":["elements actions"],"description":"","content":"Description Triggers an explicit update of the model\nAttributes No Attributes\nEvents none\nExamples delay randomizer while "},{"uri":"https://jinntec.github.io/fore-docs/tags/1.0.0/","title":"1.0.0","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/1.7.0/","title":"1.7.0","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/action/","title":"action","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/architecture/","title":"architecture","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/elements/","title":"elements","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/events/","title":"events","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/fx-alert/","title":"fx-alert","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/fx-bind/","title":"fx-bind","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/fx-case/","title":"fx-case","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/fx-control/","title":"fx-control","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/fx-dialog/","title":"fx-dialog","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/fx-function/","title":"fx-function","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/fx-hint/","title":"fx-hint","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/fx-inspector/","title":"fx-inspector","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/fx-instance/","title":"fx-instance","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/fx-items/","title":"fx-items","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/fx-output/","title":"fx-output","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/fx-repeat/","title":"fx-repeat","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/fx-submission/","title":"fx-submission","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/fx-switch/","title":"fx-switch","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/getstarted/","title":"getstarted","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/initialization/","title":"initialization","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/architecture/initialization/","title":"Initialization","tags":["architecture","lifecycle","initialization"],"description":"","content":"A defined lifecycle is essential for consistent and efficient processing of state changes during the lifetime of a \u0026lt;fx-fore\u0026gt; element.\nThe diagram below might read a bit complex at first sight but pretty much touches all important areas of Fore and might be a useful read for the interested developer.\nInitialization of Fore sequenceDiagram autonumber participant Fore participant Model participant Instances participant Bindings participant UI Note over Fore: find or generate Model activate Model Fore-\u003e\u003eModel: modelConstruct() loop Model-\u003e\u003eInstances: init() end Instances--\u003e\u003eModel: instance-loaded activate Model Model-\u003e\u003eModel: rebuild() loop Model-\u003e\u003eBindings: init() activate Bindings Bindings-\u003e\u003eModel: ModelItems deactivate Bindings end deactivate Model Model-\u003e\u003eModel: recalculate() Model-\u003e\u003eModel: revalidate() Model--\u003e\u003eFore: modelConstructDone activate Fore Fore-\u003e\u003eFore: initUI() loop Fore-\u003e\u003eUI: refresh() activate UI UI-\u003e\u003eUI: updateState deactivate UI end Fore--\u003e\u003eFore: refresh-done Fore--\u003e\u003eFore: ready deactivate Fore deactivate Model When a \u0026lt;fx-fore\u0026gt; element gets connected, it will wait for all children to be connected and then call modelConstruct() on the \u0026lt;fx-model\u0026gt; element to kick off the initialization process. If no \u0026lt;fx-model\u0026gt; is present one will be created. A model-construct event will be emitted. The model will look for all \u0026lt;fx-instance\u0026gt; elements within its child elements and call init() for each of them. This might involve loading data from an URL. A instance-loaded event will be dispatched for each instance once it\u0026rsquo;s loaded. During rebuild() the model will build its dependency graph by inspecting all \u0026lt;fx-bind\u0026gt; elements within the model. For each data node a ref attribute is pointing to a ModelItem object is created that holds the state of the data node. By inspecting the calculate, constraint, readonly, relevant and required attributes of a Bind the dependencies between data nodes are detected and added to the Main Dependency Graph (MDG). ModelItems will be registered in a map object in the Model. The data node itself will be the key to the ModelItem state object. recalculate() evaluates all calculate attributes in the order given by the MDG. revalidate() evaluates all constraint, readonly, relevant and required attributes to determine the validity of a ModelItem. model-construct-done event is emitted and catched by \u0026lt;fx-fore\u0026gt; element. Fore executes initUI which will find all bound elements within the scope of the \u0026lt;fx-fore\u0026gt; element. Call refresh() for each of them. Synchronize UI element state with ModelItem state by evaluating binding expression, fetching ModelItem object from Model and applying the relevant changes to a control. Fore dispatches a refresh-done event once all UI elements have been refreshed Fore dispatches a \u0026lsquo;ready\u0026rsquo; event "},{"uri":"https://jinntec.github.io/fore-docs/tags/inspector/","title":"inspector","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/lifecycle/","title":"lifecycle","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/message/","title":"message","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/refresh/","title":"refresh","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/submission/","title":"submission","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/trigger/","title":"trigger","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/update/","title":"update","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/architecture/update-cycle/","title":"Update Cycle","tags":["architecture","lifecycle","update"],"description":"","content":"The update cycle is triggered whenever a user interacts with a control e.g. by changing its value.\nLikewise this can be triggered by Actions being triggered by some state event like e.g. value-changed event.\nsequenceDiagram autonumber participant User participant Control participant Action participant Model participant Fore User-\u003e\u003eControl: interact Control-\u003e\u003eAction: execute activate Action Action-\u003e\u003eAction: mutate ModelItem Action-\u003e\u003eModel: add to changed list activate Action Action-\u003e\u003eAction: actionPerformed() Action-\u003e\u003eModel: rebuild() Action-\u003e\u003eModel: recalculate() Action-\u003e\u003eFore: changed[] -\u003e toRefresh[] Action-\u003e\u003eModel: revalidate() Action-\u003e\u003eFore: refresh() Fore--\u003e\u003eFore: refresh-done deactivate Action Action--\u003e\u003eAction: action-performed deactivate Action When the value of a UI control changes, it will use an action to propagate that change to the model. Usually a control will execute a \u0026lt;fx-setvalue\u0026gt; action to change its value The action mutates the ModelItem state object that is associated to the control. The changed ModelItem is added to a changed array in the Model When the action has done its job it will call the model to update while executing actionPerformed(). Only actions that mutate the structure of the data will call rebuild() as the Main Dependency Graph needs to be reconstructed. Instead of using MDG (see Initialization) recalculate will re-compute all calculations for the changed nodes by creating a subgraph of the MDG that will only contain the affected ModelItems. The array of changed ModelItems will be cloned and passed as toRefresh[] to the Fore object. All ModelItems will be revalidated. refresh() is called on Fore object that will use the toRefresh array of changed ModelItems to selectively update only affected controls. This will also incorporate controls that are dependent on the changed one by using the MDG. A refresh-done event is emitted A action-performed event is emitted "},{"uri":"https://jinntec.github.io/fore-docs/tags/validation/","title":"validation","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/architecture/","title":"Architecture","tags":["Version 1.0.0","MVC"],"description":"","content":"Architecture This chapter gives some insights into the inner workings of Fore. An understanding of the principles certainly helps to get the most out of Fore.\nFore is build as a classical MVC architecture.\nModel -\u0026gt; \u0026lt;fx-model\u0026gt; Element View -\u0026gt; Fore UI Elements Controller -\u0026gt; Fore Action Elements The ForeBody At the very minimum there needs to be a fx-fore element to get Fore into live. Without content this won\u0026rsquo;t do anything so we can consider these a unit and call it a \u0026lsquo;ForeBody\u0026rsquo;. Adding Fore to your page means to add a ForeBody.\nThe fx-fore element creates a scope for everything contained within it. By default Fore lives in lightDOM and is fully accessible to global styling. However there are options to put Fore also into shadowDOM if that\u0026rsquo;s necessary or preferred.\n\u0026lt;fx-fore\u0026gt; \u0026lt;!-- the ForeBody --\u0026gt; \u0026lt;/fx-fore\u0026gt; Styling-wise the fx-fore element is layout-neutral.\nWhat fx-fore does The fx-fore element is responsible for:\nkick off processing initing UI refreshing the UI messaging The detailed initialization process is described under \u0026lsquo;Initialization\u0026rsquo;.\nFore Model The Fore model is a container element for data, constraints, requests and custom functions. As Actions can occur in all places there might be also a couple of Actions.\n\u0026lt;fx-fore\u0026gt; \u0026lt;fx-model\u0026gt; \u0026lt;!-- 1 to n --\u0026gt; \u0026lt;fx-action\u0026gt;\u0026lt;/fx-action\u0026gt; \u0026lt;!-- 1 to n --\u0026gt; \u0026lt;fx-instance\u0026gt;\u0026lt;/fx-instance\u0026gt; \u0026lt;!-- 0 to n --\u0026gt; \u0026lt;fx-bind\u0026gt;\u0026lt;/fx-bind\u0026gt; \u0026lt;!-- 0 to n --\u0026gt; \u0026lt;fx-submission\u0026gt;\u0026lt;/fx-submission\u0026gt; \u0026lt;!-- 0 to n --\u0026gt; \u0026lt;fx-function\u0026gt;\u0026lt;/fx-function\u0026gt; \u0026lt;/fx-model\u0026gt; \u0026lt;/fx-fore\u0026gt; the fx-model element is a head-less element - it does not display at all and is layout-neutral.\nWhat the model does When a model is constructed it will perform some steps to enable efficient processing throughout the lifecycle.\nrebuild During rebuild all fx-bind elements are traversed and a DependencyGraph for the data is constructed.\nFor each bind the ref attribute is evaluated with XPath and results in a nodeset of matching data nodes (if any). For each of those a ModelItem object will be created that wraps the data node and additionally holds it\u0026rsquo;s state.\nDuring the next step the other attributes of bind are examined to detect \u0026lsquo;foreign nodes\u0026rsquo;. Each \u0026lsquo;foreign node\u0026rsquo; will become a new dependency in a directed Dependency Graph.\nrebuild finishes by dispatch rebuild-done event.\nrecalculate recalculate will first check if there have been changes since last run.\nIf there are no changes - usually only the case when initializing - the freshly-build mainGraph is used to determine the correct calculation order of the graph. The resulting list is iterated and each ModelItem will recompute its calculate expression.\nIf there have been changes to data nodes these are reported in a \u0026lsquo;changed\u0026rsquo; list. This list is used to build s subgraph of the mainGraph only containing the affected nodes. These are then computed as above.\nrevalidate During revalidation the other possbile attributes of fx-bind are evaluated using the ref expression as context.\nThese facets result in Boolean values that are assigned to the ModelItem. At refresh time the ModelItem is then used to synchronize the model state with the UI state and reflecting states like \u0026lsquo;readonly\u0026rsquo; to the HTML attribute.\nEvaluating the \u0026lsquo;constraint\u0026rsquo; attribute will add an alert to the ModelItem if defined.\n"},{"uri":"https://jinntec.github.io/fore-docs/tags/faq/","title":"FAQ","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/","title":"Fore","tags":[],"description":"","content":"Documentation Declarative user interfaces in pure HTML "},{"uri":"https://jinntec.github.io/fore-docs/faq/","title":"Frequently Asked Questions","tags":["Version 1.7.1","FAQ"],"description":"","content":"Frequently Asked Questions General How can i get the version number of Fore at runtime? Open a console in the devtools of your browser, enter this line and hit return:\ndocument.querySelector(\u0026#39;fx-fore\u0026#39;).version This will output something like:\n\u0026lsquo;Version: 1.7.1 - built on September 28, 2023 13:52:58\u0026rsquo;\n"},{"uri":"https://jinntec.github.io/fore-docs/tags/glass/","title":"glass","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/tools/","title":"tools","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/version-1.0.0/","title":"Version 1.0.0","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/version-1.5.x/","title":"Version 1.5.x","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/version-1.7.1/","title":"Version 1.7.1","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/categories/","title":"Categories","tags":[],"description":"","content":""}] \ No newline at end of file +[{"uri":"https://jinntec.github.io/fore-docs/elements/model/model/","title":"<fx-model>","tags":["model","fx-model"],"description":"","content":"Description The model is responsible for:\ncreating and maintaining the Main Dependency Graph (MDG). creating ModelItems for bound data nodes calculation validation This is done with the help of bind elements.\nThe \u0026lt;fx-model\u0026gt; element is a direct child of \u0026lt;fx-fore\u0026gt; and is itself a container for:\none or more \u0026lt;fx-instance\u0026gt; elements zero, one or more \u0026lt;fx-bind\u0026gt; elements zero, one or more \u0026lt;fx-submission\u0026gt; elements zero, one or more \u0026lt;fx-function\u0026gt; elements Warning: \u0026lt;fx-model\u0026gt; must be first child element of \u0026lt;fx-fore\u0026gt; due to not fully understood Web Components behaviour.\n\u0026lt;fx-fore\u0026gt; \u0026lt;fx-model\u0026gt; \u0026lt;fx-instance\u0026gt;\u0026lt;fx-instance\u0026gt; \u0026lt;fx-instance id=\u0026#34;second\u0026#34;\u0026gt;\u0026lt;fx-instance\u0026gt; \u0026lt;fx-instance id=\u0026#34;third\u0026#34;\u0026gt;\u0026lt;fx-instance\u0026gt; \u0026lt;fx-bind\u0026gt;\u0026lt;/fx-bind\u0026gt; \u0026lt;fx-bind\u0026gt;\u0026lt;/fx-bind\u0026gt; ... \u0026lt;fx-submission id=\u0026#34;load\u0026#34;\u0026gt;\u0026lt;/fx-submission\u0026gt; \u0026lt;fx-submission id=\u0026#34;save\u0026#34;\u0026gt;\u0026lt;/fx-submission\u0026gt; \u0026lt;/fx-model\u0026gt; \u0026lt;!-- UI here --\u0026gt; \u0026lt;/fx-fore\u0026gt; If there\u0026rsquo;s more than one \u0026lt;fx-instance\u0026gt; or \u0026lt;fx-submission\u0026gt; you need to add an id attribute for identification.\nAttributes none\nEvents Event Description Details model-construct first event to be emitted by Fore - model-construct-done emitted when model has been initialized - rebuild-done when a rebuild has taken place \u0026lsquo;maingraph\u0026rsquo; - the maingraph object being used recalculate-done when a recalculation has taken place \u0026lsquo;subgraph\u0026rsquo; - the subgraph object being used "},{"uri":"https://jinntec.github.io/fore-docs/getstarted/basics/","title":"Basics","tags":["basic"],"description":"","content":"Fore is a set of Web Components sharing the prefix \u0026lsquo;fx-\u0026rsquo; that together implement a complete engine to build highly dynamic, full-featured user interfaces without any script coding.\n\u0026lt;fx-fore\u0026gt; is the root element containing all other elements.\n\u0026lt;fx-fore\u0026gt; ... put other Fore elements or HTML here ... \u0026lt;/fx-fore\u0026gt; In this tutorial we will subsequently add elements to this template to explore the features of Fore.\n"},{"uri":"https://jinntec.github.io/fore-docs/elements/fore/","title":"fx-fore","tags":["fore","fx-fore"],"description":"","content":"The \u0026lt;fx-fore\u0026gt; element establishes a scope of processing similar to a HTML \u0026lt;form\u0026gt; element. It is a container for all other Fore elements and provides the following facilities:\ninits a Fore session refreshes the UI global messaging with toast or modal messages Attributes Name Description default src url to load a \u0026lt;fx-fore\u0026gt; element from another HTML file - show-confirmation either just marker attribute or boolean XPath - [foreign attributes] Foreign attributes are all other attributes being present. These will be copied to the resulting fx-fore element if src is used for loading an external page. These can be accessed with the fore-attr() function - ignore-expressions if given is expected to contain a CSS selector that matches element to excluded from Template Expression handling - if show-confirmation is just used as a marker attribute Fore will check whether data fields have been modified after initial loading. Attribute may be empty, the empty string, \u0026rsquo;true\u0026rsquo; or \u0026lsquo;show-confirmation\u0026rsquo;.\nLikewise when an XPath expression is given as the attribute value it is evaluated to a boolean to decide wether to show the confirmation.\nEvents Name Description compute-exception dispatched in case the dependency graph is cirular refresh-done dispatched after a refresh() run ready dispatched after Fore has fully been initialized error dispatches error when template expression fails to evaluate Examples All Demo files page exit confirmation ignore expressions "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/action/","title":"<fx-action>","tags":["elements","actions","action","1.0.0"],"description":"","content":"Description \u0026lt;fx-action\u0026gt; is a container action element that can take other actions as children and defer their update cycle to the end of the action block.\nThis is useful when you e.g. want to set several values at once without the cost of each action to be recalculated, revalidated and refreshed.\nScript Actions It is possible to call JavaScript from an \u0026lt;fx-action\u0026gt; by using the src attribute. For an example see script actions or the source of this file (doc/reference.html).\nAttributes Name Description src optional attribute to point to a JavaScript file containing a single function to be called. Examples Actions the \u0026lsquo;delay\u0026rsquo; attribute Events Custom Events Submission Demo Submission Chaining "},{"uri":"https://jinntec.github.io/fore-docs/elements/ui/alert/","title":"<fx-alert>","tags":["elements","ui","fx-alert","validation"],"description":"","content":"Description fx-alert element is used for messaging validation errors and may be used within fx-bind element or as a child of a UI control like fx-control.\nAttributes No Attributes\nEvents none\nExamples Binding Revalidation "},{"uri":"https://jinntec.github.io/fore-docs/getstarted/","title":"Get Started","tags":[],"description":"","content":"This tutorial will walk you through the first steps of using Fore and introduce some of the elements.\nFor further study it is highly recommended to use the huge list of demos that come with Fore. These showcase all features and how to use them in concrete working examples.\nUsing Fore To use Fore you have to add one CSS stylesheet and the Fore module to your page.\nLoading from CDN Add these tags to the head of your HTML file.\n\u0026lt;link rel=\u0026#34;stylesheet\u0026#34; href=\u0026#34;https://cdn.jsdelivr.net/npm/@jinntec/fore@latest/resources/fore.css\u0026#34;\u0026gt; \u0026lt;script type=\u0026#34;module\u0026#34; src=\u0026#34;https://cdn.jsdelivr.net/npm/@jinntec/fore@latest/dist/fore.js\u0026#34;\u0026gt; You are good to go and may skip to next section!\nIf you are situated within the European Union you should always bundle a Fore distribution with your code to avoid conflict with data privacy protection regulations.\nUsing local copy Download Fore from github and unpack it to a convenient location on your disk.\nSetup a basic HTML page like this:\n\u0026lt;!doctype html\u0026gt; \u0026lt;html lang=\u0026#34;en\u0026#34;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026#34;utf-8\u0026#34;/\u0026gt; \u0026lt;meta content=\u0026#34;width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes\u0026#34; name=\u0026#34;viewport\u0026#34;/\u0026gt; \u0026lt;title\u0026gt;template\u0026lt;/title\u0026gt; \u0026lt;link href=\u0026#34;[path-to-fore]/resources/fore.css\u0026#34; rel=\u0026#34;stylesheet\u0026#34;\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;script type=\u0026#34;module\u0026#34; src=\u0026#34;[path-to-fore]/dist/fore.js\u0026#34;\u0026gt;\u0026lt;/script\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; \u0026lsquo;[path-to-fore]\u0026rsquo; has to be the relative path to the Fore location on your disk.\nUsing NPM npm i --save @jinntec/fore\nUsing the dev version During development it can be helpful to get console messages that give some feedback about what is happening behind the scenes. The dev version also includes additional tools to support the developer:\nfx-inspector which is a simple instance data viewer showing all data in a collapsible side-panel on the right. It can display XML and JSON data fx-devtools aka \u0026lsquo;Fore Glass\u0026rsquo; which allows you to log all events and actions, inspect the DOM elements and showing a live view of all data. Fore Glass is available from version 2.0.0. To get those message on developers tools console just use:\n\u0026lt;script type=\u0026#34;module\u0026#34; src=\u0026#34;[path-to-fore]/dist/fore-dev.js\u0026#34;\u0026gt;\u0026lt;/script\u0026gt; Once in production you can simply switch back. There\u0026rsquo;s no difference between these versions beyond logging.\n"},{"uri":"https://jinntec.github.io/fore-docs/getstarted/mvc/","title":"The anatomy of Fore","tags":["basic","mvc","model","ui","actions"],"description":"","content":"Before stepping deeper a basic understanding of the main parts of Fore is helpful.\nFore uses a classical Model-View-Controller (MVC) architecture.\nThere are 3 basic things to remember:\nThe model (\u0026lt;fx-model\u0026gt;) holds the data and their state. This state will be used during refresh to apply changes to the UI.\nWhen the user interacts with a page the UI will trigger Actions to change the data in the model.\nActions will do the actual mutation of the data like setting a value, replacing, inserting or deleting a data node. But not all actions mutate the model - there are also actions for messaging the user, showing a dialog or switching a view.\nThe term \u0026lsquo;data node\u0026rsquo; does not mean it needs to be a DOM node. It can also point to a JSON property or some other data item.\n"},{"uri":"https://jinntec.github.io/fore-docs/getstarted/hello/","title":"Hello World","tags":["basic","model","instance"],"description":"","content":"What can be learned here:\nthe basic structure of Fore \u0026lt;fx-model\u0026gt; and \u0026lt;fx-instance\u0026gt; elements using a Template Expression Hello World - Step by Step Each \u0026lt;fx-fore\u0026gt; element has a single model.\n1. Add the model First step to create a data-bound \u0026lsquo;Hello World\u0026rsquo; example is to add a model.\n\u0026lt;fx-fore\u0026gt; \u0026lt;fx-model\u0026gt;\u0026lt;/fx-model\u0026gt; \u0026lt;/fx-fore\u0026gt; The \u0026lt;fx-model\u0026gt; is a direct child of the \u0026lt;fx-fore\u0026gt; element.\n2. Add some data Not very exciting so far, so add some data:\n\u0026lt;fx-fore\u0026gt; \u0026lt;fx-model\u0026gt; \u0026lt;fx-instance\u0026gt; \u0026lt;data\u0026gt; \u0026lt;greeting\u0026gt;hello world!\u0026lt;/greeting\u0026gt; \u0026lt;/data\u0026gt; \u0026lt;/fx-instance\u0026gt; \u0026lt;/fx-model\u0026gt; \u0026lt;/fx-fore\u0026gt; Data are kept in instances. A model can have as many instances as needed.\nCurrently Fore supports XML and JSON as data formats. However other formats like e.g. CSV can be added.\n3. Add some UI The final step is to add some UI to bind to our data.\n\u0026lt;fx-fore\u0026gt; \u0026lt;fx-model\u0026gt; \u0026lt;fx-instance\u0026gt; \u0026lt;data\u0026gt; \u0026lt;greeting\u0026gt;hello world!\u0026lt;/greeting\u0026gt; \u0026lt;/data\u0026gt; \u0026lt;/fx-instance\u0026gt; \u0026lt;/fx-model\u0026gt; \u0026lt;h1\u0026gt;My first Fore page\u0026lt;/h1\u0026gt; \u0026lt;h2\u0026gt;{greeting}\u0026lt;/h2\u0026gt; \u0026lt;/fx-fore\u0026gt; Here we use a simple Template Expression to output the data of the node \u0026lsquo;greeting\u0026rsquo;. In a later step we\u0026rsquo;ll use controls to edit the data.\nA Template Expression is enclosed in curly brackets and binds to some data node in an instance. You can put them everywhere within the UI of a \u0026lt;fx-fore\u0026gt; element either within text nodes or attributes nodes.\nLive Result: The blueish shaded area below shows Fore running inside of this page. We use live example throughout this documentation.\nhello world! My first Fore page {greeting} {greeting} "},{"uri":"https://jinntec.github.io/fore-docs/getstarted/todo/","title":"todo","tags":["basic","repeat","actions","controls"],"description":"","content":"What can be learned here:\nthe use of \u0026lt;fx-repeat\u0026gt; element data binding and resolution using a constraint using controls using insert and delete action Todo Application Let\u0026rsquo;s go for a bit more fancy example and learn about some new elements.\nIn this tutorial we add some real interaction, give some feedback messages to the user and actually change our data.\nIt will introduce you to \u0026lt;fx-repeat\u0026gt; element that is one of the container elements available in Fore.\nSetting up the model For our todo app we\u0026rsquo;d like to have a list of todos along with a completion and a due date.\nOur data model for a single todo looks like this:\n\u0026lt;task complete=\u0026#34;\u0026#34; due=\u0026#34;\u0026#34;\u0026gt;\u0026lt;/task\u0026gt; Lets put that into Fore and add some dummy data to play with.\n\u0026lt;fx-fore\u0026gt; \u0026lt;fx-model id=\u0026#34;record\u0026#34;\u0026gt; \u0026lt;fx-instance\u0026gt; \u0026lt;data\u0026gt; \u0026lt;task complete=\u0026#34;false\u0026#34; due=\u0026#34;2022-06-05\u0026#34;\u0026gt;Make tutorial part 1\u0026lt;/task\u0026gt; \u0026lt;task complete=\u0026#34;false\u0026#34; due=\u0026#34;2022-06-15\u0026#34;\u0026gt;Pick up Milk\u0026lt;/task\u0026gt; \u0026lt;/data\u0026gt; \u0026lt;/fx-instance\u0026gt; \u0026lt;/fx-model\u0026gt; \u0026lt;/fx-fore\u0026gt; Introducing \u0026lt;fx-repeat\u0026gt; For displaying a list of todos we\u0026rsquo;ll use the \u0026lt;fx-repeat\u0026gt; element which will show all todos in a list.\nWe add the repeat alongside the model in our markup.\n\u0026lt;fx-fore\u0026gt; \u0026lt;fx-model id=\u0026#34;record\u0026#34;\u0026gt; \u0026lt;fx-instance\u0026gt; \u0026lt;data\u0026gt; \u0026lt;task complete=\u0026#34;false\u0026#34; due=\u0026#34;2022-06-05\u0026#34;\u0026gt;Make tutorial part 1\u0026lt;/task\u0026gt; \u0026lt;task complete=\u0026#34;false\u0026#34; due=\u0026#34;2022-06-15\u0026#34;\u0026gt;Pick up Milk\u0026lt;/task\u0026gt; \u0026lt;/data\u0026gt; \u0026lt;/fx-instance\u0026gt; \u0026lt;/fx-model\u0026gt; \u0026lt;h1\u0026gt;My Todos\u0026lt;/h1\u0026gt; \u0026lt;fx-repeat id=\u0026#34;task\u0026#34; ref=\u0026#34;task\u0026#34;\u0026gt; \u0026lt;template\u0026gt; \u0026lt;div\u0026gt;{.}\u0026lt;/div\u0026gt; \u0026lt;/template\u0026gt; \u0026lt;/fx-repeat\u0026gt; \u0026lt;/fx-fore\u0026gt; Data Binding - the ref Attribute The ref attribute is used throughout Fore on many elements. It uses binding expressions to link to some data node.\nIn our case the binding expression is simply \u0026rsquo;task\u0026rsquo; and will point to task elements in our data.\n\u0026lt;fx-fore\u0026gt; \u0026lt;fx-model id=\u0026#34;record\u0026#34;\u0026gt; \u0026lt;fx-instance\u0026gt; \u0026lt;data\u0026gt; \u0026lt;task complete=\u0026#34;false\u0026#34; due=\u0026#34;2022-06-05\u0026#34;\u0026gt;Make tutorial part 1\u0026lt;/task\u0026gt; \u0026lt;task complete=\u0026#34;false\u0026#34; due=\u0026#34;2022-06-15\u0026#34;\u0026gt;Pick up Milk\u0026lt;/task\u0026gt; \u0026lt;/data\u0026gt; \u0026lt;/fx-instance\u0026gt; \u0026lt;/fx-model\u0026gt; \u0026lt;h1\u0026gt;My Todos\u0026lt;/h1\u0026gt; \u0026lt;fx-repeat id=\u0026#34;task\u0026#34; ref=\u0026#34;task\u0026#34;\u0026gt; \u0026lt;template\u0026gt; \u0026lt;div\u0026gt;{.}\u0026lt;/div\u0026gt; \u0026lt;/template\u0026gt; \u0026lt;/fx-repeat\u0026gt; \u0026lt;/fx-fore\u0026gt; Result so far\nMake tutorial part 1 Pick up Milk My Todos {.} A repeat always has a \u0026lt;template\u0026gt; child which is the blueprint for rendering one bound item.\nIt just contains a div and the Template Expression of \u0026lsquo;{.}\u0026rsquo;.\n\u0026quot;.\u0026quot; means the current node which is the bound task node.\nThis is known as \u0026lsquo;scoped resolution\u0026rsquo; and means that binding expressions are always evaluated relatively to their parent binding expression (aka ref attributes).\nAdding controls In this step we add some controls to the repeat template.\nFore uses a generic \u0026lt;fx-control\u0026gt; element to bind a concrete widget (like a native \u0026lt;input\u0026gt;) to the model.\nThis has the advantage that there\u0026rsquo;s no need for a big list of different controls to be supported but instead just use existing ones.\nIn this example simple native browser input controls are used.\n\u0026lt;fx-fore\u0026gt; \u0026lt;fx-model id=\u0026#34;record\u0026#34;\u0026gt; \u0026lt;fx-instance\u0026gt; \u0026lt;data\u0026gt; \u0026lt;task complete=\u0026#34;false\u0026#34; due=\u0026#34;2022-06-05\u0026#34;\u0026gt;Make tutorial part 1\u0026lt;/task\u0026gt; \u0026lt;task complete=\u0026#34;false\u0026#34; due=\u0026#34;2022-06-15\u0026#34;\u0026gt;Pick up Milk\u0026lt;/task\u0026gt; \u0026lt;/data\u0026gt; \u0026lt;/fx-instance\u0026gt; \u0026lt;/fx-model\u0026gt; \u0026lt;h1\u0026gt;My Todos\u0026lt;/h1\u0026gt; \u0026lt;fx-repeat id=\u0026#34;task\u0026#34; ref=\u0026#34;task\u0026#34;\u0026gt; \u0026lt;template\u0026gt; \u0026lt;div\u0026gt; \u0026lt;fx-control ref=\u0026#34;@complete\u0026#34; value-prop=\u0026#34;checked\u0026#34; update-event=\u0026#34;input\u0026#34;\u0026gt; \u0026lt;input type=\u0026#34;checkbox\u0026#34;\u0026gt; \u0026lt;/fx-control\u0026gt; \u0026lt;fx-control class=\u0026#34;{@complete}\u0026#34; id=\u0026#34;task\u0026#34; ref=\u0026#34;.\u0026#34;\u0026gt;\u0026lt;/fx-control\u0026gt; \u0026lt;fx-control ref=\u0026#34;@due\u0026#34;\u0026gt; \u0026lt;input type=\u0026#34;date\u0026#34;\u0026gt; \u0026lt;/fx-control\u0026gt; \u0026lt;fx-trigger class=\u0026#34;btn delete\u0026#34;\u0026gt; \u0026lt;button\u0026gt;x\u0026lt;/button\u0026gt; \u0026lt;fx-delete ref=\u0026#34;.\u0026#34;\u0026gt;\u0026lt;/fx-delete\u0026gt; \u0026lt;/fx-trigger\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/template\u0026gt; \u0026lt;/fx-repeat\u0026gt; \u0026lt;/fx-fore\u0026gt; Note the second \u0026lt;fx-control\u0026gt; which is empty. If no control is given as child it will default to a \u0026lt;input type=\u0026quot;text\u0026quot;\u0026gt; control which is auto-created to save some typing.\nHere 3 \u0026lt;fx-control\u0026gt;s and 2 \u0026lt;fx-trigger\u0026gt; elements have been added.\nThe controls bind to the respective nodes in the data and use:\na checkbox for \u0026lsquo;@complete\u0026rsquo; a text field for task text a date input for \u0026lsquo;@due\u0026rsquo; date The \u0026lsquo;@\u0026rsquo; character addresses an attribute of an XML node. Scoped resolution will result in the binding expression \u0026rsquo;task[1]/@complete\u0026rsquo; for the first todo.\n\u0026lt;fx-fore\u0026gt; \u0026lt;fx-model id=\u0026#34;record\u0026#34;\u0026gt; \u0026lt;fx-instance\u0026gt; \u0026lt;data\u0026gt; \u0026lt;task complete=\u0026#34;false\u0026#34; due=\u0026#34;2022-06-05\u0026#34;\u0026gt;Make tutorial part 1\u0026lt;/task\u0026gt; \u0026lt;task complete=\u0026#34;false\u0026#34; due=\u0026#34;2022-06-15\u0026#34;\u0026gt;Pick up Milk\u0026lt;/task\u0026gt; \u0026lt;/data\u0026gt; \u0026lt;/fx-instance\u0026gt; \u0026lt;/fx-model\u0026gt; \u0026lt;h1\u0026gt;My Todos \u0026lt;fx-trigger class=\u0026#34;btn add\u0026#34;\u0026gt; \u0026lt;button\u0026gt;add\u0026lt;/button\u0026gt; \u0026lt;fx-insert ref=\u0026#34;task\u0026#34; at=\u0026#34;1\u0026#34; position=\u0026#34;before\u0026#34;\u0026gt;\u0026lt;/fx-insert\u0026gt; \u0026lt;/fx-trigger\u0026gt; \u0026lt;/h1\u0026gt; \u0026lt;fx-repeat id=\u0026#34;task\u0026#34; ref=\u0026#34;task\u0026#34;\u0026gt; \u0026lt;template\u0026gt; \u0026lt;div\u0026gt; \u0026lt;fx-control ref=\u0026#34;@complete\u0026#34; value-prop=\u0026#34;checked\u0026#34; update-event=\u0026#34;input\u0026#34;\u0026gt; \u0026lt;input class=\u0026#34;widget\u0026#34; type=\u0026#34;checkbox\u0026#34;\u0026gt; \u0026lt;/fx-control\u0026gt; \u0026lt;fx-control class=\u0026#34;{@complete}\u0026#34; id=\u0026#34;task\u0026#34; ref=\u0026#34;.\u0026#34;\u0026gt;\u0026lt;/fx-control\u0026gt; \u0026lt;fx-control ref=\u0026#34;@due\u0026#34;\u0026gt; \u0026lt;input type=\u0026#34;date\u0026#34;\u0026gt; \u0026lt;/fx-control\u0026gt; \u0026lt;fx-trigger class=\u0026#34;btn delete\u0026#34;\u0026gt; \u0026lt;button\u0026gt;delete\u0026lt;/button\u0026gt; \u0026lt;fx-delete ref=\u0026#34;.\u0026#34;\u0026gt;\u0026lt;/fx-delete\u0026gt; \u0026lt;/fx-trigger\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/template\u0026gt; \u0026lt;/fx-repeat\u0026gt; \u0026lt;/fx-fore\u0026gt; The first \u0026lt;fx-trigger\u0026gt; is contained within the \u0026lt;h1\u0026gt; and inserts a new todo at the top of the list.\nThe \u0026lt;fx-trigger\u0026gt; within the repeat will display a button and allow to delete a todo from the list with the \u0026lt;fx-delete\u0026gt; action.\nThe todo list with add and delete Make tutorial part 1 Pick up Milk My Todos add delete This is the barebones of the todo app. Next chapter will introduce some refinements.\n"},{"uri":"https://jinntec.github.io/fore-docs/getstarted/todo-refined/","title":"Todo refined","tags":["basic","repeat","actions","controls"],"description":"","content":"What can be learned here:\nadding a counter insert from a template node use \u0026lt;fx-bind\u0026gt; to require a value Todo refined In the previous chapter the bare minimum for the todo app were created.\nIn this chapter we\u0026rsquo;d like to make some improvements:\nshow a counter for our todos hide or show completed todos make sure we can handle an empty list Extending our data model Let\u0026rsquo;s add a couple of nodes to our data model to cover our objectives. We\u0026rsquo;ll use them later on.\n\u0026lt;data\u0026gt; \u0026lt;task complete=\u0026#34;false\u0026#34; due=\u0026#34;2022-06-05\u0026#34;\u0026gt;Make tutorial part 1\u0026lt;/task\u0026gt; \u0026lt;task complete=\u0026#34;false\u0026#34; due=\u0026#34;2022-06-15\u0026#34;\u0026gt;Pick up Milk\u0026lt;/task\u0026gt; \u0026lt;template\u0026gt; \u0026lt;task complete=\u0026#34;false\u0026#34; due=\u0026#34;\u0026#34;\u0026gt;new task\u0026lt;/task\u0026gt; \u0026lt;/template\u0026gt; \u0026lt;showclosed\u0026gt;false\u0026lt;/showclosed\u0026gt; \u0026lt;/data\u0026gt; Adding a counter We add a counter simply above our repeat.\n\u0026lt;div class=\u0026#34;info\u0026#34;\u0026gt; You have {count(task[@complete=\u0026#39;false\u0026#39;])} open tasks \u0026lt;/div\u0026gt; The Template Expression will output the number of open task nodes in the data.\nLet\u0026rsquo;s dissect the expression a bit more:\ncount() is a built-in XPath 3 function we are just using here to count the amount of tasks task[@complete='false'] filters all task by their attribute complete and returns only those with a value of false Fore uses XPath 3.1 as its expression language used in binding expressions but also in many other places like in Template Expressions. It is beyond the scope of this tutorial to give an introduction to XPath you can find some resources in the link section.\ncount() is an built-in XPath 3.1 function we\u0026rsquo;re using to get the number of todos. XPath offers a big library of functions.\nMake tutorial part 1 Pick up Milk new task false Todo add You have {count(instance()/task[@complete='false'])} open tasks delete Of course you can add further counters, for example, for closed tasks, or for all tasks. I\u0026rsquo;ll leave that as an excercise.\nFixing our repeat If you\u0026rsquo;ve played with the last example and have deleted all todos and trying to re-add one you have run into problems. It simply refuses to create a new repeat entry.\nThis is due to the default behavior of \u0026lt;fx-insert\u0026gt;. It tries to use the last item in the list as a template for insertion. If there\u0026rsquo;s none left, the nodeset is empty and the \u0026lt;fx-insert\u0026gt; will do nothing.\nThe origin attribute handles this situation and allows us to bind to a template node to use for the insert.\nBy changing the trigger from\n\u0026lt;fx-trigger class=\u0026#34;btn add\u0026#34;\u0026gt; \u0026lt;button\u0026gt;add\u0026lt;/button\u0026gt; \u0026lt;fx-insert ref=\u0026#34;task\u0026#34; at=\u0026#34;1\u0026#34; position=\u0026#34;before\u0026#34;\u0026gt;\u0026lt;/fx-insert\u0026gt; \u0026lt;/fx-trigger\u0026gt; into\n\u0026lt;fx-trigger class=\u0026#34;btn add\u0026#34;\u0026gt; \u0026lt;button\u0026gt;add\u0026lt;/button\u0026gt; \u0026lt;fx-insert ref=\u0026#34;task\u0026#34; at=\u0026#34;1\u0026#34; position=\u0026#34;before\u0026#34; origin=\u0026#34;template/task\u0026#34;\u0026gt;\u0026lt;/fx-insert\u0026gt; \u0026lt;/fx-trigger\u0026gt; Now the insert will evaluate the origin attribute and take that node to insert into the list.\nBy using this technique you can also apply some defaults for new entries e.g. a todo will now be complete=\u0026quot;false\u0026quot; and \u0026rsquo;new task\u0026rsquo; as task by default.\nMake tutorial part 1 Pick up Milk new task false Todo add You have {count(instance()/task[@complete='false'])} open tasks delete Adding constraints Certainly at some point you\u0026rsquo;d like to save your todo list and it makes not much sense to have a todo without a text.\nLet\u0026rsquo;s create a constraint for that by introducing a bind element:\n\u0026lt;fx-bind ref=\u0026#34;task\u0026#34; constraint=\u0026#34;string-length(.) \u0026gt; 0\u0026#34; alert=\u0026#34;what\u0026#39;s your todo?\u0026#34;\u0026gt;\u0026lt;/fx-bind\u0026gt; The constraint attribute takes an boolean XPath expression which will automatically be applied by the model and re-evaluated whenever this is required e.g. when data are submitted.\nFore uses XPath to bind nodes or make calculations. To learn more about XPath and play with it, have a look at fontoXPath playground\nA bind applies a constraint on a bind node or applies a calculation to it. It may also have an alert message when a constraint fails.\nAdd the bind to the model somewhere.\nTip: though not strictly necessary it makes sense to group your \u0026lt;fx-instance\u0026gt;, \u0026lt;fx-bind\u0026gt;,\u0026lt;fx-submission\u0026gt; and \u0026lt;fx-function\u0026gt; elements for a better overview when things get more complex.\n\u0026lt;fx-fore\u0026gt; \u0026lt;fx-model id=\u0026#34;record\u0026#34;\u0026gt; \u0026lt;fx-instance\u0026gt; \u0026lt;data\u0026gt; \u0026lt;task complete=\u0026#34;false\u0026#34; due=\u0026#34;2022-06-05\u0026#34;\u0026gt;Make tutorial part 1\u0026lt;/task\u0026gt; \u0026lt;task complete=\u0026#34;false\u0026#34; due=\u0026#34;2022-06-15\u0026#34;\u0026gt;Pick up Milk\u0026lt;/task\u0026gt; \u0026lt;template\u0026gt; \u0026lt;task complete=\u0026#34;false\u0026#34; due=\u0026#34;\u0026#34;\u0026gt;new task\u0026lt;/task\u0026gt; \u0026lt;/template\u0026gt; \u0026lt;count\u0026gt;1\u0026lt;/count\u0026gt; \u0026lt;showclosed\u0026gt;false\u0026lt;/showclosed\u0026gt; \u0026lt;/data\u0026gt; \u0026lt;/fx-instance\u0026gt; \u0026lt;fx-bind ref=\u0026#34;task\u0026#34; required=\u0026#34;true()\u0026#34;\u0026gt;\u0026lt;/fx-bind\u0026gt; \u0026lt;fx-bind ref=\u0026#34;task\u0026#34; constraint=\u0026#34;string-length(.) \u0026gt; 0\u0026#34; alert=\u0026#34;what\u0026#39;s your todo?\u0026#34;\u0026gt;\u0026lt;/fx-bind\u0026gt; \u0026lt;/fx-model\u0026gt; \u0026lt;h1\u0026gt;Todo\u0026lt;/h1\u0026gt; \u0026lt;fx-trigger class=\u0026#34;btn add\u0026#34;\u0026gt; \u0026lt;button\u0026gt;+\u0026lt;/button\u0026gt; \u0026lt;fx-insert ref=\u0026#34;task\u0026#34; at=\u0026#34;1\u0026#34; position=\u0026#34;before\u0026#34; origin=\u0026#34;template/task\u0026#34;\u0026gt;\u0026lt;/fx-insert\u0026gt; \u0026lt;/fx-trigger\u0026gt; \u0026lt;div class=\u0026#34;info\u0026#34;\u0026gt; You have {count(instance()/task[@complete=\u0026#39;true\u0026#39;])} completed tasks \u0026lt;/div\u0026gt; \u0026lt;fx-repeat id=\u0026#34;task\u0026#34; ref=\u0026#34;task\u0026#34;\u0026gt; \u0026lt;template\u0026gt; \u0026lt;div\u0026gt; \u0026lt;fx-control ref=\u0026#34;@complete\u0026#34; value-prop=\u0026#34;checked\u0026#34; update-event=\u0026#34;input\u0026#34;\u0026gt; \u0026lt;input class=\u0026#34;widget\u0026#34; type=\u0026#34;checkbox\u0026#34;\u0026gt; \u0026lt;/fx-control\u0026gt; \u0026lt;fx-control class=\u0026#34;{@complete}\u0026#34; id=\u0026#34;task\u0026#34; ref=\u0026#34;.\u0026#34;\u0026gt;\u0026lt;/fx-control\u0026gt; \u0026lt;fx-control ref=\u0026#34;@due\u0026#34;\u0026gt; \u0026lt;input type=\u0026#34;date\u0026#34;\u0026gt; \u0026lt;/fx-control\u0026gt; \u0026lt;fx-trigger class=\u0026#34;btn delete\u0026#34;\u0026gt; \u0026lt;button\u0026gt;delete\u0026lt;/button\u0026gt; \u0026lt;fx-delete ref=\u0026#34;.\u0026#34;\u0026gt;\u0026lt;/fx-delete\u0026gt; \u0026lt;/fx-trigger\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/template\u0026gt; \u0026lt;/fx-repeat\u0026gt; \u0026lt;/fx-fore\u0026gt; Result Empty a task field to trigger the alert - once you leave the field the alert is shown.\nMake tutorial part 1 Pick up Milk new task 1 false Todo add You have {count(instance()/task[@complete='true'])} completed tasks delete Now you can delete all entries and create new ones afterwards.\n"},{"uri":"https://jinntec.github.io/fore-docs/elements/model/","title":"Model","tags":["elements","model"],"description":"","content":"Model Elements This chapter describes all elements belonging to the Fore Model.\nModel elements have no visual representation and are always hidden from view.\n"},{"uri":"https://jinntec.github.io/fore-docs/elements/ui/","title":"UI Elements","tags":["elements","UI"],"description":"","content":"This chapter describes all user interface elements. "},{"uri":"https://jinntec.github.io/fore-docs/elements/ui/case/","title":"<fx-case>","tags":["elements","ui","fx-case","fx-switch"],"description":"","content":"Description Defines one \u0026lsquo;page\u0026rsquo; of a fx-switch element.\nAttributes Name Description label optional label name a unique name to be used with fx-toggle Events Name Description select dispatched to fx-case when a case gets selected deselect dispatched to fx-case when case gets deselected Examples Repeat in Switch TEI header editor sample Switch "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/append/","title":"<fx-append>","tags":["elements actions","1.0.0"],"description":"","content":"Description Appends an entry to an fx-repeat.\nNote: this is deprecated. Please use fx-insert.\nAttributes Name Description ref the XPath ref to append to repeat the fx-repeat to append to Events Name Description index-changed dispatched after entry has been added to a repeat Examples todo nested todo TEI header editor sample "},{"uri":"https://jinntec.github.io/fore-docs/elements/ui/container/","title":"<fx-container>","tags":["elements","ui"],"description":"","content":"\u0026lt;fx-container\u0026gt; is an abstract class used for container controls like \u0026lt;fx-group\u0026gt; and \u0026lt;fx-switch\u0026gt;.\n"},{"uri":"https://jinntec.github.io/fore-docs/getstarted/submission/","title":"Submissions","tags":["getstarted","submission"],"description":"","content":"What can be learned here:\ndefining a basic \u0026lt;fx-submission\u0026gt; triggering a submission by using \u0026lt;fx-send\u0026gt; action replacing data with submission sending a message to the user with \u0026lt;fx-message\u0026gt; action Ok, nice - we have a todo list that will be gone when we reload the browser or leave the page.\nMake tutorial part 1 Pick up Milk new task Todo add You have {count(instance()/task[@complete='true'])} completed tasks delete Adding a submission We need a way to store our data. Let\u0026rsquo;s add a submission which will go into our model\n\u0026lt;fx-submission id=\u0026#34;save\u0026#34; method=\u0026#34;post\u0026#34; url=\u0026#34;#echo\u0026#34; replace=\u0026#34;instance\u0026#34; instance=\u0026#34;todo-list\u0026#34;\u0026gt; \u0026lt;/fx-submission\u0026gt; Due to technical limitations on this static site we use the builtin \u0026lsquo;#echo\u0026rsquo; target for this tutorial that will just return the data it gets in and replaces another instance with it. This is to simulate what is usually happening when sending data via http.\nWhat does this do?\nWe need to add an id to identify a submission This submission will send a POST request of the instance data to the URL \u0026lsquo;#echo\u0026rsquo; The response will replace the instance. The instance to be replaced is \u0026rsquo;todo-list' Triggering the save submission To trigger a save operation you usually want a button.\n... UI ... \u0026lt;fx-trigger\u0026gt; \u0026lt;button\u0026gt;Save\u0026lt;/button\u0026gt; \u0026lt;fx-send submission=\u0026#34;save\u0026#34;\u0026gt;\u0026lt;/fx-send\u0026gt; \u0026lt;/fx-trigger\u0026gt; Put together\nMake tutorial part 1 Pick up Milk new task 1 false your todo list has been saved Todo add You have {count(instance()/task[@complete='true'])} completed tasks delete Save Watch the \u0026lsquo;Data Inspector\u0026rsquo; on the right. Intially there will be 2 data instances listed by their id. Data Inspector is a tool that helps during development to see the live content of your data instances. The instance live separate from the DOM and therefore cannot be seen in their actual state by inspecting with developer tools. You can just add it within any \u0026lt;fx-fore\u0026gt; element.\nAfter hitting the \u0026lsquo;Save\u0026rsquo; button the instance \u0026rsquo;todo-list\u0026rsquo; will be identical to the \u0026lsquo;default\u0026rsquo; instance.\nThis means that our submission has been executed and has send its data to the \u0026lsquo;#echo\u0026rsquo; submission, that gets back the same data and replaced the \u0026lsquo;saved-list\u0026rsquo; instance.\nMessaging the user You may have noticed a message in the lower left after hitting \u0026lsquo;save\u0026rsquo;.\nLet\u0026rsquo;s add the missing line i omitted from above code.\n\u0026lt;fx-submission id=\u0026#34;save\u0026#34; method=\u0026#34;post\u0026#34; url=\u0026#34;#echo\u0026#34; replace=\u0026#34;instance\u0026#34; instance=\u0026#34;saved-list\u0026#34;\u0026gt; \u0026lt;fx-message event=\u0026#34;submit-done\u0026#34;\u0026gt;your todo list has been saved\u0026lt;/fx-message\u0026gt; \u0026lt;/fx-submission\u0026gt; This adds a \u0026lt;fx-message\u0026gt; element to the submission that will react to the \u0026lsquo;submit-done\u0026rsquo; event that is fired when a submission successfully returned.\nThe message element defaults to a toast message that disappears after a delay.\nWith the event attribute the message action attaches to its parent element and reacts to \u0026lsquo;submit-done\u0026rsquo; in this case.\nThis technique is used all over Fore to attach event handlers that in turn will run an action.\n"},{"uri":"https://jinntec.github.io/fore-docs/guides/","title":"Guides","tags":[],"description":"","content":"Guides This section gives some hints on how to approach certain aspects of developing with Fore.\n\u0026ldquo;Declarative Programming\u0026rdquo; (DP) has some advantages over the traditional approaches of implementing the dynamic functionality of components or applications:\nin DP you describe how to do things without saying \u0026lsquo;how\u0026rsquo;. DP does not hide away details of the functionality - it all there right at the surface it minimizes side-effects and makes the products more stable it abstracts operations into single tags that be relied upon to deliver the exact predictable outcome that is intended it frees the developer from using a complex toolchain for building, testing, bundling etc. just to make it run However - especially for those that are used to an imperative programming style - users new to DP often wonder about the right approach to achieve certain things. Without knowing upfront about all the elements and how they interact, it sometimes is hard to get started or find the best approach to your problem.\nThis section tries to help out with several guides that highlight specific problems.\n"},{"uri":"https://jinntec.github.io/fore-docs/elements/ui/control/","title":"<fx-control>","tags":["elements","ui","fx-control"],"description":"","content":"Description fx-control is no concrete control displayed in the browser but instead wraps such a control and binds it to a data node in the model with the help of a ref attribute.\nAttributes Name Description Default as \u0026rsquo;text\u0026rsquo; or \u0026rsquo;node\u0026rsquo;. When using \u0026rsquo;node\u0026rsquo; a whole dom tree can be passed to a widget text context XPath reference pointing to parent context incopeContext credentials sets credentials policy - one of \u0026lsquo;omit\u0026rsquo;, \u0026lsquo;same-origin\u0026rsquo; or \u0026lsquo;include\u0026rsquo; same-origin create if present on control or anchestor will create non-existing attribute nodes in the data - debounce optional numeric value in milliseconds to delay input events - initial XPath binding expression referring to data that get passed to Fore control as default instance. Only effective when url is specified. - label optional label - listen-on a CSS selector to attach the update event listener to element with \u0026lsquo;widget\u0026rsquo; class ref XPath reference pointing to the bound node - shadow marker attribute to attach Fore control to shadowDOM instead of lightDOM - update-event optional event name when to trigger updating of bound node. blur \u0026rsquo;enter\u0026rsquo; can be used to catch enter key url URL pointing to HTML page containing fx-fore element that gets imported as widget - value-prop optional property name used to set the value of the widget (default:\u0026lsquo;value\u0026rsquo;) value Attributes on widgets A widget is an element contained within a \u0026lt;fx-control\u0026gt; and must be marked with a class=\u0026quot;widget\u0026quot;.\nSome attributes might occur on a widget to further control its behavior.\nName Description selection applies to \u0026lt;select\u0026gt; elements. If selection=\u0026quot;open\u0026quot; is given an additional empty \u0026lt;option\u0026gt; will be added to allow the empty value. Events Name Description init dispatched once when a control is initialized. Can be used for customization of wrapped widgets. value-changed dispatched during refresh after the value of the control has changed optional dispatched during refresh when node has become optional required dispatched during refresh when node has become required readonly dispatched during refresh when node has become readonly readwrite dispatched during refresh when node has become readwrite valid dispatched during refresh when node has become valid invalid dispatched during refresh when node has become invalid relevant dispatched during refresh when node has become relevant nonrelevant dispatched during refresh when node has become non-relevant Special features passing referenced node as node instead of value With the ´as´ attribute the referenced node will be directly passed to the widget. This can be useful with control that manipulate nodes like e.g. text editors.\ncreating selects with an empty option Sometimes values can and should be empty initially. With selection=\u0026quot;open\u0026quot; on the select element it will create such en empty option.\nusing Fore as control By setting a url attribute you can use another ForeBody as the widget of given control. The url is resolved and will fetch the first fx-fore element it finds within that page and embeds it as widget of the control. You can pass in an fx-instance for the loaded widget with initial and get the return value with the return action.\nExamples the fx-control element Actions Fore API Demo Template Expressions Country selector Selects Trigger handling credentials "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/confirm/","title":"<fx-confirm>","tags":["elements actions"],"description":"","content":"Description Displays simple confirmation dialog. Action will only execute if confirmation returns true.\nAttributes Name Description message Message to display for confirmation. Action Attributes Name Description target id reference to element this action attaches to Events none\nExamples Project Task planner "},{"uri":"https://jinntec.github.io/fore-docs/elements/ui/dialog/","title":"<fx-dialog>","tags":["elements","ui","fx-dialog"],"description":"","content":"Description Simple modal dialog with arbitrary content.\nTo be used with fx-show and fx-hide actions.\nAttributes Name Description id required to be used by fx-show' and fx-hide`actions Events none\nExamples fx-dialog "},{"uri":"https://jinntec.github.io/fore-docs/elements/","title":"Elements","tags":[],"description":"","content":"Fore Elements Fore Elements are a set of Web Components that allow to build feature-complete HTML-driven applications.\nIt can be used to build small components or large and complex applications.\nAll Fore component use the prefix \u0026lsquo;fx-\u0026rsquo; to identify them as a related set of Web Components.\nFore elements allow to perform all various tasks that are needed for a full state-driven application like (not limited to):\nloading and holding data sending and receiving data applying constraints to data changing of data data-binding controls All functionality is fully available without writing any JavaScript.\nElements fall into 3 categories:\nModel Elements UI Elements Action Elements Model Elements Fore uses a model to hold all data sources, data-constraints, calculations and submissions.\nThe model (fx-model) is a \u0026lsquo;blind\u0026rsquo; element. It does not appear on screen.\nUI Elements Fore UI Elements are generic - they allow to bind a part of an HTML page to data being hold by fx-instance elements.\nThey wrap the actual controls they are bound to. The many examples show how this is done.\nAction Elements With Actions you can insert or delete data, change values, show/hide dialogs etc.\nActions that update data will automatically trigger the necessary updates of the UI and keep the model in sync.\n"},{"uri":"https://jinntec.github.io/fore-docs/elements/ui/hint/","title":"<fx-hint>","tags":["elements","ui","fx-hint"],"description":"","content":" "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/delete/","title":"<fx-delete>","tags":["elements actions","1.0.0"],"description":"","content":"Description Deletes a node from a nodeset.\nfx-delete Attributes Name Description ref XPath reference to instance node(s) to delete Examples todo nested todo TEI header editor sample "},{"uri":"https://jinntec.github.io/fore-docs/elements/ui/inspector/","title":"<fx-inspector>","tags":["elements","ui","fx-inspector","inspector"],"description":"","content":"Description Instance Inspector is a helper element for development which displays all used instances at the bottom of the viewport.\nIt uses the log() function under the hood and renders a html details element for each instance.\nAttributes Name Description default open wether or not to be open by default false Events none\nExamples Simple TEI Header editor "},{"uri":"https://jinntec.github.io/fore-docs/events/","title":"Events","tags":["events"],"description":"","content":"Events Fore is an event-driven state-engine. It reacts to events and dispatches itself events to reflect it\u0026rsquo;s state. Each operation in Fore is triggered by some event. You can hook your functionality into the page by defining actions for a given event.\nLifecycle Events Lifecylce events can be used for initialization tasks. When Fore is loaded into the DOM of a web page it will dispatch the following sequence of events:\nName Description target model-construct is not of much practical use but just signals that Fore is alive fx-model model-construct-done fires after all fx-instance elements have initialized and the model is setup. At this point we can rely on the existence of the referenced data. fx-model rebuild-done is emitted when the model was rebuild. During this stage Fore creates its dependency graph. fx-model recalculate-done is emitted when the model was recalculated. During this stage Fore evaluates the dependency graph. fx-model refresh-done is emitted when the UI has been updated fully. Data in the model are now reflected in the UI. fx-fore ready is dispatched when the current Fore element is fully initialized and rendered fx-fore For all work that should be done before the first rendering takes place use a \u0026lsquo;model-construct-done\u0026rsquo; handler. This is the best place to load additional data and do more complex initialization tasks as all actions triggered by \u0026lsquo;model-construct-done\u0026rsquo; will run within a single update cycle.\nOn \u0026lsquo;ready\u0026rsquo; you can rely on the UI being fully rendered. This also means that all \u0026lsquo;init\u0026rsquo; events attached to controls have been executed and eventual custom initialization tasks have been run.\nGeneral Events A Fore Action can listen to any event. These might the native ones or custom events.\nIf events specify a details object this can be accessed with the Fore event('propname') function. See under Functions.\nName Description Target click just listed here as it might be of frequent interest. parentNode by default any native JS event - parentNode by default any custom event - parentNode by default Update Cycle Events Some actions mutate data and report this to the model by setting a \u0026rsquo;needsUpdate\u0026rsquo; flag. When an action block is done it will check for the flag and update the model and UI accordingly by:\noptionally fully rebuild the model constraints (usually avoided) recalculate changed items revalidate changed items refresh controls/containers bound to changed items Name Description Target details rebuild-done fires after a rebuild has taken place fx-model maingraph - the main dependency graph recalculate-done fires after a recalculate has taken place fx-model graph - the depencency main- or subgraph, computes - the amount of computes refresh-done fires after a refresh has been done. The UI reflects the model state. fx-fore - Control State Events State events are dispatched whenever the state of a bound element changes.\nName Description Target Details init fires when a control initializes fx-control - readonly fires after an fx-control became readonly fx-control - readwrite fires after an fx-control became readwrite fx-control - optional fires after an fx-control became optional fx-control - required fires after an fx-control became required fx-control - nonrelevant fires after an fx-control became nonrelevant fx-control - relevant fires after a fx-control has become relevant fx-control - invalid fires after a fx-control has become invalid fx-control - valid fires after a fx-control has become valid fx-control - value-changed fires after a fx-control has changed its value fx-control path- the normalized path of the bound node, value - the value of the bound node Instance Events Name Description Target deleted fires after a delete action has been executed fx-instance insert fires when an fx-insert is executed fx-instance instance-loaded fires after an fx-instance has been loaded fx-instance Submission Events Name Description Target Details submit dispatch before submission is taking place fx-submission submission - the fx-submission element submit-done fires after a submission has successfully been executed fx-submission - submit-error fires when a submission returned an error fx-submission message - the submit error Repeat Events Name Description Target item-created fires when a repeat item was created fx-repeat item-changed fires when a repeat item was changed fx-repeat path-mutated fires when a path in a repeat has been mutated fx-repeat no-template-error fires when repeat has no template child fx-repeat Switch events Name Description Target deselect fires when fx-case is deselected fx-case element that was deselected select fires when fx-case is deselected fx-case element that was selected Dialog Events Name Description Target dialog-hidden fires after fx-dialog has been hidden fx-dialog dialog-shown fired when a dialog has been shown fx-dialog Other Name Description Target Details error fires after an error occurred fx-fore message - the error message execute-action fires when an action executes. For internal use. any action element action' - the action element, event`- the event object loaded fires after a fx-load has loaded or a sub-Fore has been loaded fx-load url - the evaluated url used by the load action, fore - the Fore element that has been loaded outermost-action-start fires when an outermost action block is started fx-action cause - the event object causing the action outermost-action-end fires when an outermost action block is finished fx-action - reload fires when a fx-reload action executes fx-reload - return fired by embedded Fore controls to return their bound value fx-fore nodeset - the nodeset returned by a subpage warn dispatched internally by Fore to display warning messages fx-fore message - the warning message "},{"uri":"https://jinntec.github.io/fore-docs/elements/ui/items/","title":"<fx-items>","tags":["elements","ui","fx-items"],"description":"","content":"Description Helper element to build a list of items by repeating given template for each node in the bound nodeset.\nAttributes Name Description ref XPath reference pointing to nodeset to be repeated Events none\nExamples Select Multiple "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/dispatch/","title":"<fx-dispatch>","tags":["elements actions"],"description":"","content":"Description Action to dispatch an event with optional parameters to specific targets.\nTo specify event properties the fx-property element is used.\nfx-dispatch will use id resolution within fx-repeat elements to resolve the id in scope of current occurence.\nAttributes Name Description name name of event to dispatch targetid id reference of element to dispatch to Events none\nExamples dispatch with properties fx-dispatch action "},{"uri":"https://jinntec.github.io/fore-docs/elements/ui/output/","title":"<fx-output>","tags":["elements","ui","fx-output"],"description":"","content":"Description Outputs bound or calculated values.\nAlso supports mimtypes \u0026lsquo;html\u0026rsquo; and \u0026lsquo;markdown\u0026rsquo; to render bound nodes accordingly.\nEvents none\nAttributes Name Description Default ref XPath reference pointing to the bound node - value XPath expression calculating a string value mediatype either \u0026lsquo;html\u0026rsquo; or \u0026lsquo;markdown\u0026rsquo; are accepted by now. Examples The fx-output Element Get started Instances Instance super powers Binding fx-control "},{"uri":"https://jinntec.github.io/fore-docs/elements/ui/repeat/","title":"<fx-repeat>","tags":["elements","ui","fx-repeat","repeat"],"description":"","content":"Description Repeats template for each node of the referenced nodeset.\nFor each data node in the referenced nodeset one \u0026lt;fx-repeatitem\u0026gt; element will be created that will contain the evaluated template as content.\nAttributes Name Description id identifier for repeat ref XPath reference pointing to the bound node Events Name Description Details path-mutated dispatched when repeat nodeset changes \u0026lsquo;path\u0026rsquo; - the mutation path \u0026lsquo;index\u0026rsquo; - the index of the changed repeat item. refresh-done dispatched after a refresh() run - ready dispatched after Fore has fully been initialized - error dispatches error when template expression fails to evaluate \u0026lsquo;message\u0026rsquo; - the error message Examples API Demo docbook Bibliography insert todo Project Task planner Atomic repeat repeat in switch repeat sequence the while attribute "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/hide/","title":"<fx-hide>","tags":["elements actions"],"description":"","content":"Description Action to hide a fx-dialog.\nAttributes Name Description dialog idref of an fx-dialog element. Events Name Description dialog-hidden dispatched when dialog is hidden Examples fx-dialog "},{"uri":"https://jinntec.github.io/fore-docs/elements/ui/switch/","title":"<fx-switch>","tags":["elements","ui"],"description":"","content":"Description Container that has fx-case children of which only one is shown at a given time.\nCan be unbound and toggled via an action or bound and react to data value.\nAttributes No Attributes\nEvents none\nExamples auth repeat in switch Simple TEI Header switch "},{"uri":"https://jinntec.github.io/fore-docs/elements/ui/trigger/","title":"<fx-trigger>","tags":["elements","ui","trigger"],"description":"","content":"Description Generic container for action buttons, links etc. which can execute an action when activated.\n\u0026lt;fx-trigger\u0026gt; can also be bound and therefore become readonly or non-relevant.\nAttributes Name Description Default ref XPath reference pointing to the bound node - Examples trigger actions binding delay delay dispatch \u0026hellip; "},{"uri":"https://jinntec.github.io/fore-docs/functions/","title":"Functions","tags":["functions"],"description":"","content":"Functions An overview of all functions available in Fore.\nXPath Functions As Fore uses XPath 3.1 as its expression language you also have access to the large library of functions that are defined by the standard.\nXPath 3 function reference Not 100% of the XPath 3.1 functions are available in fontoXPath. There are a few that might not be (fully) implemented. In doubt please refer to their github page or test in their wonderful fontoXPath playground.\nIn addition to XPath Fore defines some built-in functions that are essential for building fully event-driven user-interfaces.\nFore Functions base64encode(string) This is probably the least used function but sometimes you need to base64-encode a string e.g. for sending it as a GET param.\nParam:\nrequired: string - a string to be encoded Returns:\nbase64Encoded string context(id) The context() function is needed in situations where several instance data sources are involved.\nParam:\noptional: \u0026lsquo;id\u0026rsquo; - an id of an element to use as context. If not given returns the parent context of the current context. event(property) The event function is essential when working with events and params need to be passed. It allows to access properties of the event details object which is passed in by the event dispatcher.\nParam:\nrequired: property - a property of the event details object by name Returns:\nvalue of the respective property. Might be a string, object or nodes depending on event type event is often used in conjunction with fx-dispatch action which allows to set properties of a custom event.\nfore-attr(attribute-name) Returns the value of an attribute on the fx-fore element in scope. Can be used to pass values to a Fore page loaded via the src attribute which in turn can use these values inside of its logic with the help of this function.\nParam:\nrequired: attribute name - an attribute name present on the Fore element in scope Returns:\nthe value of the attribute index(id) The index function is used in combination with fx-repeat elements. It returns the current index of a given repeat.\nParam:\nrequired: id - the id of an fx-repeat element Returns:\nan integer denoting the currently active repeat item instance(id) The instance function is the most important function. It allows to address a certain fx-instance element for data-binding.\nParam:\noptional: id - when given must point to an existing fx-instance element with given id. If not given it will default the first fx-instance element in document order Returns:\nthe root context for matching fx-instance element. The type of the root context depends on the type of instance which can currently be \u0026lsquo;xml\u0026rsquo; or \u0026lsquo;json\u0026rsquo;. For XML the root node of the instance data is returned. For JSON the outermost map or array will be returned. log(id) The log function is just for development purposes and can be used to log some instance data to the document.\nParam:\nrequired: id - the id of the instance to log Returns:\nrenders instance data to the document. Outputs it\u0026rsquo;s content to a \u0026lt;code\u0026gt; block.\n\u0026lt;code\u0026gt;{log(\u0026#39;default\u0026#39;)}\u0026lt;/code\u0026gt; "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/insert/","title":"<fx-insert>","tags":["elements actions"],"description":"","content":"Description Action to insert node(s) into instance data.\nAttributes Name Description Default at index position in nodeset where to insert new node(s) 0 context optional XPath pointing to parent node of node to insert position with regard to \u0026lsquo;at\u0026rsquo; can be either \u0026lsquo;before\u0026rsquo; or \u0026lsquo;after\u0026rsquo; after origin XPath pointing to nodes to be inserted into referenced nodeset keepValues Boolean attribute. When present will keep text-values of origin nodes false ref XPath pointing to node(s) to insert. If context is given ref is relative to that Events Name Description insert dispatched when nodes have been inserted detail[insertedNodes] - the inserted nodes detail[position] - the position of the insert in the nodeset Examples Insert into inhomogenious nodeset insert action insert with context TEI header editor sample todo the while attribute "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/load/","title":"<fx-load>","tags":["elements actions","load","1.6.0"],"description":"","content":"Description Loads some content into a page, open a new tab with content or replaces current browser window with content.\nContent may be loaded from url or be specified inline surrounded with a template element.\nIf the HTML being loaded contains a fx-fore element it will be extracted from the page and used as content to be inserted.\nAttributes Name Description default attach-to \u0026lsquo;_self\u0026rsquo;, \u0026lsquo;_blank\u0026rsquo; or idref prefixed with \u0026lsquo;#\u0026rsquo; _self await eventname to await from templated content - url URL to load content from The await attribute Sometimes if you load a component with fx-load and the component has some initialization to do, you might want to wait for a certain event dispatched by that component before moving on. await will make sure this event fires before the load action becomes effective.\nEvents Name Description url-loaded dispatched after successful load of content Examples load \u0026lsquo;Unloading\u0026rsquo; a section With load you can also delete parts of the DOM and replace them with an empty element.\nThis is useful to reset a formerly loaded section again when you\u0026rsquo;re done with it.\n\u0026lt;fx-load attach-to=\u0026#34;#htmlout\u0026#34;\u0026gt; \u0026lt;template\u0026gt;\u0026lt;div\u0026gt;\u0026lt;/div\u0026gt;\u0026lt;/template\u0026gt; \u0026lt;/fx-load\u0026gt; Examples The load action "},{"uri":"https://jinntec.github.io/fore-docs/tools/","title":"Tools","tags":["Version 1.5.x","tools","glass"],"description":"","content":"Tools With Fore you can build quite complex pages, with other pages acting as controls, dynamically loaded content and data and more. However with power comes responsibility and things can get hard to debug without good tooling.\nFore Glass \u0026lsquo;Fore Glass\u0026rsquo; allows to:\nlog Action and Event flow - the panel on the left inspect the DOM tree of the page including highlighting for Fore elements - the center panel inspecting the state of all data sources used by the respective Fore element - the right panel inspect a specific control (Ctrl + i) and jump to its source element in the DOM and if bound to the bound data node clear Log with Ctrl+d configure the events you want to log Using Fore Glass There are two ways to use it:\ninclude a \u0026lt;fx-devtools\u0026gt; element in your page ideally directly as a child of the body element. or even simpler - just append the parameter \u0026lsquo;inspect\u0026rsquo; to the URL of the page, which will inject the element for you. What it does Everything that happens in a Fore page is the result of some events firing. Therefore, it is essential to understand, where and when certain events are fired. These are the hooks that can be used to attach the wanted behavior.\nUsually - and by default - the Log panel will only show Actions that got actually triggered by an event. The action name occurs on the left and the event name on the right.\nThe center panel shows the DOM tree of the Fore markup with highlighting the Fore elements. When a bound control the the DOM tree is clicked it will reveal it\u0026rsquo;s attributes in the smaller panel and also jump to the bound data node in the right-hand panel.\nEvent logging configuration By default the Log will only show events that actually trigger an action which is usually what you want. The event configuration panel show you all available events at once along with a short description when you hover them.\nTo discover which events you have at hand or in which sequence they happen at which time, you can check/uncheck the intereting events to display them in the Log.\nFor this example the \u0026lsquo;model-construct\u0026rsquo;, \u0026lsquo;model-construct-done\u0026rsquo; and \u0026lsquo;ready\u0026rsquo; have been checked,\nPlease note the rendering of the items - events that do not have actions attached to them will occur with rounded corners. Actions that are executed as one block with a single update-cycle will be marked with a blue border on the left.\n"},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/message/","title":"<fx-message>","tags":["elements actions","message"],"description":"","content":"Description Display a message to the user.\nAttributes Name Description default level \u0026lsquo;modal\u0026rsquo;, \u0026lsquo;modeless\u0026rsquo; or \u0026rsquo;ephemeral\u0026rsquo; ephemeral \u0026lsquo;modal\u0026rsquo; - modal dialog window \u0026lsquo;sticky\u0026rsquo; - sticky popup message \u0026rsquo;ephemeral\u0026rsquo; - auto-closing popup message default value XPath expression which resolves to message Events none\nExamples fx-message actions Binding the delay attribute fx-control Hello World the if attribute instances lazy modelItem creation during UI init the while attribute "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/refresh/","title":"<fx-refresh>","tags":["elements actions","refresh"],"description":"","content":"Description Triggers immediate refresh.\nAttributes Name Description control id of an control to be refreshed explicitly force marker attribute to force a full refresh - overrules control self searches upwards for fx-control and refreshes it Events none\nExamples the delay attribute Randomizer the while attribute "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/replace/","title":"<fx-replace>","tags":["elements actions"],"description":"","content":"Description Replaces a node with another.\nAttributes Name Description ref XPath reference pointing to the bound node with XPath expression to point to a node for replacement Examples Replace Action "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/reset/","title":"<fx-reset>","tags":["elements actions","1.6.0"],"description":"","content":"Description Replaces a node with another.\nAttributes Name Description instance the id of the instance to reset to its initial state Examples Reset Action "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/return/","title":"<fx-return>","tags":["Actions"],"description":"","content":"Description The fx-return action is exclusively used within the context of bound Fore elements.\nAttributes Name Description ref XPath reference pointing to the bound node with XPath expression to point to a node for replacement Action Attributes see Action\nExamples Replace Action "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/send/","title":"<fx-send>","tags":["elements actions"],"description":"","content":"Description Triggers a submission. Submission with given id must exist otherwise error is thrown.\nAttributes Name Description submission required idref to fx-submission element. Also supports \u0026lsquo;#reload\u0026rsquo; which just reloads the window. target overwrites target attribute of submission - may contain template expressions url overwrites url attribute of submission - may contain template expressions Attributes that overwrite submission attributes are set once per execution. Calling the same submission again without such an attribute falls back to the value on fx-submission element.\nEvents Name Description log log event is dispatched in case submission id cannot be found Examples auth Submission Relevance Processing Submission serialization Submission Demo Submission Demo 2 Submission serialization Submission Chaining submit with ref overwrite url overwrite target "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/setfocus/","title":"<fx-setfocus>","tags":["elements actions"],"description":"","content":"Description Sets the focus to a control with given id. If the id is within an repeat it will look for the active repeatitem and search that for the control.\nSince: Version 2.0.0\nAttributes Name Description control idref that a control select if attribute is given the value of the control will be selected Events none\nExamples todo "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/setvalue/","title":"<fx-setvalue>","tags":["elements actions"],"description":"","content":"Description Sets a value to a bound node.\nAttributes Name Description ref XPath reference pointing to the bound node value XPath expression to be set as value Events none\nExamples Action auth binding the delay attribute events events 2 hello "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/show/","title":"<fx-show>","tags":["elements actions"],"description":"","content":"Description Action to display a fx-dialog.\nAttributes Name Description dialog idref of an fx-dialog element. Events Name Description dialog-shown dispatched when dialog is shown Examples fx-dialog "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/toggle/","title":"<fx-toggle>","tags":["elements actions"],"description":"","content":"Description Action to toggle a fx-switch element.\nAttributes Name Description case id of fx-case element to show Events none\nExamples auth repeat in switch Simple TEI Header switch "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/toggleboolean/","title":"<fx-toggleboolean>","tags":["elements actions","1.7.0"],"description":"","content":"Description Action to toggle a Boolean value in the data.\nAttributes Name Description ref required: XPath reference to toggle Events none\nExamples Toggle a Boolean value "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/","title":"Actions","tags":["elements actions"],"description":"","content":"Action Elements This chapter describes all Action elements.\nCommon Attributes The following attribues can be used on any Fore action element.\nName Description defaultAction \u0026lsquo;perform\u0026rsquo; (default) or \u0026lsquo;cancel\u0026rsquo; delay delay before action is executed in milliseconds. event the event name this action is listening to if boolean XPath expression. Action is only executed if this returns true. phase \u0026lsquo;default\u0026rsquo; or \u0026lsquo;capture\u0026rsquo; propagate \u0026lsquo;stop\u0026rsquo; or \u0026lsquo;continue\u0026rsquo; (default) target id of element to attach to or special values \u0026lsquo;#window\u0026rsquo; and \u0026lsquo;#document\u0026rsquo; while boolean XPath expression. Action is only executed if ìf and while return true. Common Events Name Description action-performed dispatched after execution of an action while-performed dispatched after execution of a while loop "},{"uri":"https://jinntec.github.io/fore-docs/tags/guides/","title":"guides","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/guides/modularization/","title":"Modularization","tags":["guides"],"description":"","content":"\n\u0026ldquo;Modularization is the activity of dividing a product or system into interchangeable modules.\u0026rdquo; (stolen somewhere)\nAs long as things stay simple and you have just a bunch of controls, there\u0026rsquo;s not much logic and just a few data fields you don\u0026rsquo;t have to worry much about Modularization.\nHowever, if you\u0026rsquo;re building a whole application things will quickly change - the markup grows and grows with some undesired effects on productivity:\na large file is less readable and maintainable merge conflicts may arise more often when working with several developers on the same thing you probably would need to repeat yourself just to have a block of related content in different places scrolling up and down can become a nightmare just to see where certain idrefs point to Modularization with Fore Luckily Fore has several ways of dealing with this. You don\u0026rsquo;t need a detailed plan upfront, but can use one of the features below to modularize when time has come.\nIncluding an external ForeBody Starting with the easiest method of factoring out a block of markup and loading it from an external file:\n\u0026lt;fx-fore src=\u0026#34;hello.html\u0026#34;\u0026gt;\u0026lt;/fx-fore\u0026gt; When the browser hits the fx-fore element it will first look for a src attribute and if present, load the external page.\nThe page is searched for the first fx-fore element which gets extracted and replaces the original fx-fore element.\nPlease note that this approach allows to develop a standalone page and make it work individually and later use the unmodified page included in some other page. WARNING: please be aware that the CSS of the loaded page is not imported as just the fx-fore element is extracted. That could be a future enhancement.\nAs a consequence the import of the external file is always happening and cannot be cancelled or (directly) reverted. Using \u0026lt;fx-fore src=\u0026quot;mypage.html\u0026quot;\u0026gt; can be thought of as a simple include. It\u0026rsquo;s fine to break down larger pages into smaller units but does not offer support for reducing the page load.\npassing attributes and classes to the imported page All attributes and CSS classes given to a fx-fore element will be passed down to the replacing element.\nFor easy access to these attributes from within the loaded page there is the fore-attr() function.\n\u0026lt;fx-fore src=\u0026#34;hello1.html\u0026#34; class=\u0026#34;myClass\u0026#34; attr1=\u0026#34;world\u0026#34;\u0026gt;\u0026lt;/fx-fore Fore element in hello1.html:\n\u0026lt;fx-fore\u0026gt; Hello {fore-attr(\u0026#39;attr1\u0026#39;)} \u0026lt;/fx-fore\u0026gt; If you inspect the live demo with devtools you\u0026rsquo;ll see that myClass and attr1 are preserved.\nYou\u0026rsquo;ll see an additional attr \u0026lsquo;from-src\u0026rsquo; which contains the value of the original src attribute. This is not of significance for now but might get used in the future.\n\u0026lt;/fx-fore\nFore as control A fx-fore element can be used as a control like this:\n\u0026lt;fx-fore\u0026gt; ... \u0026lt;fx-control ref=\u0026#34;item\u0026#34; url=\u0026#34;myForeControl.html\u0026#34;\u0026gt; \u0026lt;label\u0026gt;A nested Fore acting as control\u0026lt;/label\u0026gt; \u0026lt;/fx-control\u0026gt; ... \u0026lt;/fx-fore\u0026gt; At runtime this will be expanded to this:\n\u0026lt;fx-fore\u0026gt; ... \u0026lt;fx-control ref=\u0026#34;item\u0026#34; url= \u0026#34;myForeControl.html\u0026#34;\u0026gt; \u0026lt;label\u0026gt;A nested Fore acting as control\u0026lt;/label\u0026gt; \u0026lt;fx-fore class=\u0026#34;widget\u0026#34;\u0026gt; \u0026lt;!-- content of myForeControl.html --\u0026gt; \u0026lt;/fx-fore\u0026gt;. \u0026lt;/fx-control\u0026gt; ... \u0026lt;/fx-fore\u0026gt; There are no restrictions regarding the complexity or size of the embedded ForeBody.\nfor Web Components experts: Fore lives by default in the lightDOM but still restricts its events to the respective scope of a fx-fore element. Styling therefore can be applied globally. By adding a boolean attribute shadow the loaded content will be put into shadowDOM. Usually that is NOT what you want when assembling a larger UI from parts.\nPassing data to the Fore widget To be useful there needs to be a way to pass in initial data for the embedded Fore. This is accomplished with the initial attribute.\n\u0026lt;fx-control ref=\u0026#34;item\u0026#34; url=\u0026#34;myForeControl.html\u0026#34; initial=\u0026#34;.\u0026#34;\u0026gt; \u0026lt;label\u0026gt;A nested Fore acting as control\u0026lt;/label\u0026gt; \u0026lt;/fx-control\u0026gt; initial is an XPath expression that resolves relative to the ref node. Here (wich is a common case) we just pass in the node that we are binding to in our outer ForeBody.\nAfter the Fore control has initialized it will get the following default instance.\n\u0026lt;fx-instance\u0026gt; \u0026lt;data\u0026gt; \u0026lt;item\u0026gt;[value of bound node in outer ForeBody]\u0026lt;/item\u0026gt; \u0026lt;/data\u0026gt; \u0026lt;/fx-instance\u0026gt; The embedded ForeBody can now work with this data as usual.\nReturning data to outer ForeBody When an fx-control embeds a ForeBody it will start listening for a return event.\nWhenever the embedded ForeBody decides to be done (on value-changed in example below) it will fire the return event passing back the resulting data in the nodeset property. The control will use that and mount the data to its binding. Let\u0026rsquo;s assume the user typed \u0026lsquo;result\u0026rsquo;:\n\u0026lt;fx-fore\u0026gt; \u0026lt;fx-model\u0026gt; \u0026lt;fx-instance\u0026gt; \u0026lt;data\u0026gt; \u0026lt;item\u0026gt;result\u0026lt;/item\u0026gt; \u0026lt;/data\u0026gt; \u0026lt;/fx-instance\u0026gt; \u0026lt;fx-model\u0026gt; \u0026lt;fx-control ref=\u0026#34;item\u0026#34; url=\u0026#34;myForeControl.html\u0026#34; initial=\u0026#34;.\u0026#34;\u0026gt; \u0026lt;label\u0026gt;A nested Fore acting as control\u0026lt;/label\u0026gt; \u0026lt;fx-fore\u0026gt; \u0026lt;fx-control ref=\u0026#34;item\u0026#34;\u0026gt; \u0026lt;label\u0026gt;Your item\u0026lt;/label\u0026gt; \u0026lt;fx-return event=\u0026#34;value-changed\u0026#34; ref=\u0026#34;.\u0026#34;\u0026gt;\u0026lt;/fx-return\u0026gt; \u0026lt;/fx-control\u0026gt; \u0026lt;/fx-fore\u0026gt; \u0026lt;/fx-control\u0026gt; The returned data can be element nodes, an attribute node or text nodes and replace the bound node of the control.\nThis means that complete subtrees of data can be mounted back into the outer Fore.\n\u0026lt;data\u0026gt; \u0026lt;!-- this data do not match the above example - just for illustration --\u0026gt; \u0026lt;item instock=\u0026#34;true\u0026#34;\u0026gt; \u0026lt;article-number\u0026gt;1234\u0026lt;/article-number\u0026gt; \u0026lt;name\u0026gt;Sneeeaakr\u0026lt;/name\u0026gt; \u0026lt;/item\u0026gt; \u0026lt;/data\u0026gt; Warning: this feature is limited to the use of HTML or XML as data model. JSON support is still limited though planned for the future.\nUsing nested Fore elements like this the most powerful technique to modularize applications into smaller functional pieces. A \u0026lsquo;control\u0026rsquo; can handle arbitrary complex logic within itself and only present the results back to its outer Fore. Existing ForeBodies can be embeded within another with minimal effort and still stay independent pages that can be developed and tested separately.\nLoad on Demand For bigger applications you probably want to limit the pageload as this often involves optional or dynamic views that you ideally only want \u0026rsquo;to pay for\u0026rsquo; when really needed.\nYou can also just start with minimal UI and load everything dynamically.\nWith the fx-load action a lot of different scenarios can be accomplished and i\u0026rsquo;ll not going into navigational features of the load action here, as these are well documented in the load demo.\nFor modularization purposes fx-load offers two options:\nLoading a template A fx-load action specifying an HTML template element is useful if you have rather small snippet of HTML content to insert into your UI.\nAs all actions fx-load reacts to a certain event and it depends on your use case which one to choose.\n\u0026lt;fx-load attach-to=\u0026#34;#lazyControl\u0026#34; id=\u0026#34;first\u0026#34; event=\u0026#34;anyEvent\u0026#34;\u0026gt; \u0026lt;template\u0026gt; \u0026lt;fx-control ref=\u0026#34;item\u0026#34;\u0026gt; \u0026lt;label\u0026gt;an item:\u0026lt;/label\u0026gt; \u0026lt;/fx-control\u0026gt; \u0026lt;fx-output ref=\u0026#34;item\u0026#34;\u0026gt;\u0026lt;/fx-output\u0026gt; \u0026lt;/template\u0026gt; \u0026lt;/fx-load\u0026gt; \u0026lt;div id=\u0026#34;lazyControl\u0026#34;\u0026gt;\u0026lt;/div\u0026gt; The template may contain any kind of HTML including of course all Fore elements.\nWhen the event fires the fx-load action will clone the template and insert it into the DOM at the position specified by attach-to. It expects an id given in CSS selector syntax starting with a \u0026lsquo;#\u0026rsquo;.\nThe content of the target element will be replaced with the cloned template content.\n\u0026lt;div id=\u0026#34;lazyControl\u0026#34;\u0026gt; \u0026lt;fx-control ref=\u0026#34;item\u0026#34;\u0026gt; \u0026lt;label\u0026gt;an item:\u0026lt;/label\u0026gt; \u0026lt;/fx-control\u0026gt; \u0026lt;fx-output ref=\u0026#34;item\u0026#34;\u0026gt;\u0026lt;/fx-output\u0026gt; \u0026lt;/div\u0026gt; Loading external content If bigger chunks of content shall be loaded or you like to keep the content in a separate file, you can use the url attribute.\n\u0026lt;fx-fore\u0026gt; \u0026lt;fx-load event=\u0026#34;ready\u0026#34; url=\u0026#34;load-snippet.html\u0026#34; attach-to=\u0026#34;#thetarget\u0026#34;\u0026gt;\u0026lt;/fx-load\u0026gt; \u0026lt;fx-message event=\u0026#34;loaded\u0026#34;\u0026gt;url {event(\u0026#39;url\u0026#39;)}\u0026lt;/fx-message\u0026gt; \u0026lt;div id=\u0026#34;thetarget\u0026#34;\u0026gt;\u0026lt;/div\u0026gt; \u0026lt;/fx-fore\u0026gt; Inserting a full HTML page into another breaks the page and must be avoided. Thus, the content of the body is used for insertion at attach-to node.\nHowever if the loaded content contains another fx-fore element it is assumed that this should be loaded instead.\nWhen content became available fx-load will fire a loaded event in case some post-import actions need to be done.\nUnloading content To unload content and remove it from DOM again, the load action can simply provide a template with an empty HTML element.\nAs the content replaces the content of the target element, this will effectively remove whatever there has been before.\n\u0026lt;fx-load attach-to=\u0026#34;#lazyControl\u0026#34; event=\u0026#34;anyEvent\u0026#34;\u0026gt; \u0026lt;template\u0026gt;\u0026lt;div\u0026gt;\u0026lt;/div\u0026gt;\u0026lt;/template\u0026gt; \u0026lt;/fx-load\u0026gt; \u0026lt;div id=\u0026#34;lazyControl\u0026#34;\u0026gt;\u0026lt;/div\u0026gt; Summary For simple inclusion of a ForeBody use \u0026lt;fx-fore src=\u0026quot;myfore.html\u0026quot;\u0026gt; When assembling complex data-structures \u0026lt;fx-control url=\u0026quot;myfore.html\u0026quot;\u0026gt; is helpful to break things down With efficiency and lazy-loading on mind you should go for \u0026lt;fx-load\u0026gt; Of course these approaches can also be combined.\n"},{"uri":"https://jinntec.github.io/fore-docs/tags/","title":"Tags","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/actions/","title":"actions","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/glossary/","title":"Concepts & Terms","tags":[],"description":"","content":"Binding Expression A binding expression is represented in markup as a ref or data-ref attribute. The expression language is XPath 3 which allows for complex bindings that include filters with function calls, conditional etc.\nBinding Expressions are relative to their parent bindings - see under \u0026lsquo;Scoped Resolution\u0026rsquo;.\nDefault Instance The \u0026lsquo;default instance\u0026rsquo; in Fore is always the first in document order within a given fx-fore element. It will get an id=\u0026quot;default\u0026quot; being set if no id attribute exists. The default instance can be accessed by the instance() function without passing an argument.\nThe instance() function can be omitted in binding expressions if there\u0026rsquo;s no non-default instance in scope.\nId Resolution As Fore offers repeating sections via fx-repeat or data-ref there will be the situation that id attributes present in the template of a repeat get duplicated at runtime.\nFor example:\n\u0026lt;fx-repeat ref=\u0026#34;items\u0026#34;\u0026gt; \u0026lt;template\u0026gt; \u0026lt;div id=\u0026#34;myDiv\u0026#34;\u0026gt;....\u0026lt;/div\u0026gt; \u0026lt;/template\u0026gt; \u0026lt;/fx-repeat\u0026gt; This will result in as many \u0026lt;div\u0026gt; elements with id myDiv as you got items in your data.\nTo avoid clashes Fore implements an Ìd Resolution` algorithm to make sure that you can still refer to the right repeated element.\nExample:\n\u0026lt;fx-repeat ref=\u0026#34;items\u0026#34;\u0026gt; \u0026lt;template\u0026gt; ... \u0026lt;div id=\u0026#34;myId-\u0026#34;\u0026gt; ... \u0026lt;!-- dispatch \u0026#39;hello\u0026#39; event to \u0026#39;myId\u0026#39; --\u0026gt; \u0026lt;fx-dispatch name=\u0026#34;hello\u0026#34; targetid=\u0026#34;myId\u0026#34;\u0026gt;\u0026lt;/fx-dispatch\u0026gt; \u0026lt;/template\u0026gt; \u0026lt;/fx-repeat\u0026gt; \u0026lt;!-- rolled out at runtime --\u0026gt; \u0026lt;fx-repeat ref=\u0026#34;items\u0026#34;\u0026gt; \u0026lt;fx-repeatitem\u0026gt; \u0026lt;div id=\u0026#34;myId\u0026#34;\u0026gt; ... \u0026lt;fx-dispatch name=\u0026#34;hello\u0026#34; targetid=\u0026#34;myId\u0026#34;\u0026gt;\u0026lt;/fx-dispatch\u0026gt; \u0026lt;fx-repeatitem\u0026gt; \u0026lt;fx-repeatitem\u0026gt; \u0026lt;div id=\u0026#34;myId\u0026#34;\u0026gt; ... \u0026lt;fx-dispatch name=\u0026#34;hello\u0026#34; targetid=\u0026#34;myId\u0026#34;\u0026gt;\u0026lt;/fx-dispatch\u0026gt; \u0026lt;fx-repeatitem\u0026gt; \u0026lt;fx-repeatitem\u0026gt; \u0026lt;div id=\u0026#34;myId\u0026#34;\u0026gt; ... \u0026lt;fx-dispatch name=\u0026#34;hello\u0026#34; targetid=\u0026#34;myId\u0026#34;\u0026gt;\u0026lt;/fx-dispatch\u0026gt; \u0026lt;fx-repeatitem\u0026gt; Here the dispatch action refers to an id - Id Resolution will make sure that the id resolves within the context of the enclosing repeat item. This works also for nested repeats.\nForeBody A \u0026lsquo;ForeBody\u0026rsquo; means a fx-fore element including all of its content and it just a name picked for easier referral when talking about Fore.\nLazy Instance Lazily created data structure created from bindings in the UI.\nSee \u0026lsquo;Lazy Mode\u0026rsquo;.\nLazy Mode In lazy mode the user does not need to specify a fx-model explicitly. When no fx-model is found at init time, Fore switches to lazy mode and creates a default data structure from the bindings found in the UI.\nExample:\n\u0026lt;fx-fore\u0026gt; \u0026lt;fx-control ref=\u0026#34;forename\u0026#34;\u0026gt; \u0026lt;label\u0026gt;Forename\u0026lt;/label\u0026gt; \u0026lt;/fx-control\u0026gt; \u0026lt;fx-control ref=\u0026#34;lastname\u0026#34;\u0026gt; \u0026lt;label\u0026gt;Lastname\u0026lt;/label\u0026gt; \u0026lt;/fx-control\u0026gt; \u0026lt;/fx-fore\u0026gt; In this case Fore will come up with an auto-generated model and data structure looking like this:\n\u0026lt;fx-fore\u0026gt; \u0026lt;fx-model\u0026gt; \u0026lt;fx-instance\u0026gt; \u0026lt;data\u0026gt; \u0026lt;forename\u0026gt;\u0026lt;/forename\u0026gt; \u0026lt;lastname\u0026gt;\u0026lt;/lastname\u0026gt; \u0026lt;/data\u0026gt; \u0026lt;/fx-instance\u0026gt; \u0026lt;/fx-model\u0026gt; \u0026lt;fx-control ref=\u0026#34;forename\u0026#34;\u0026gt; \u0026lt;label\u0026gt;Forename\u0026lt;/label\u0026gt; \u0026lt;/fx-control\u0026gt; \u0026lt;fx-control ref=\u0026#34;lastname\u0026#34;\u0026gt; \u0026lt;label\u0026gt;Lastname\u0026lt;/label\u0026gt; \u0026lt;/fx-control\u0026gt; \u0026lt;fx-fore\u0026gt; Lazy mode is meant to be used for quick prototyping and very simple use cases. They do not allow to use binding facets or explicit submisssions.\nRelevance Selection Relevance is a powerful features that comes into play in several places:\nBound UI Elements UI Elements can be bound by their ref attribute. If a ref expresssion does not point to a data item it becomes \u0026rsquo;nonrelevant\u0026rsquo; which means:\nit\u0026rsquo;s not shown to the User the elements\u0026rsquo; states (like \u0026lsquo;readonly\u0026rsquo;, \u0026lsquo;required\u0026rsquo;, \u0026lsquo;valid\u0026rsquo;\u0026hellip;) won\u0026rsquo;t be updated unless a data item becomes available This can be used hide/show complete sections in the UI depending directly on existence of a node. Once a bound node becomes available the respective UI container or control will be shown.\nWhen sending a request Whenever data are send, the RelevanceSelector will first filter all data items according to the relevance mode for that request.\nBy default all data items being nonrelevant will be filtered out before sending the data over the wire. During this filtering also empty attributes will be pruned.\nUsing the relevant facet of fx-bind Besides simple existence of a data item the fx-bind element may specify a relevant condition for a data item of a set of items.\nThe expression needs to evaluate to a Boolean and will be taken into account when refreshing the UI or sending data.\nExample:\n\u0026lt;fx-fore\u0026gt; \u0026lt;fx-model\u0026gt; \u0026lt;fx-instance\u0026gt; \u0026lt;data\u0026gt; \u0026lt;vehicle type=\u0026#34;bicycle\u0026#34;\u0026gt; \u0026lt;bicycle\u0026gt; \u0026lt;frame size=\u0026#34;28\u0026#34;\u0026gt;\u0026lt;/frame\u0026gt; \u0026lt;bicycle\u0026gt; \u0026lt;car\u0026gt; \u0026lt;engine\u0026gt; \u0026lt;/car\u0026gt; \u0026lt;/data\u0026gt; \u0026lt;/fx-instance\u0026gt; \u0026lt;fx-bind ref=\u0026#34;bicycle\u0026#34; relevant=\u0026#34;../vehicle/@type = \u0026#39;bicycle\u0026#39;\u0026gt;\u0026lt;/fx-bind\u0026gt; \u0026lt;fx-bind ref=\u0026#34;car\u0026#34; relevant=\u0026#34;../vehicle/@type = \u0026#39;car\u0026#39;\u0026gt;\u0026lt;/fx-bind\u0026gt; \u0026lt;/fx-model\u0026gt; \u0026lt;/fx-fore\u0026gt; When sending data these bindings will make sure that only the relevant portions of the data are sent by default, depending on the value of vehicle/@type.\nLikewise when a user makes a selection for `vehicle/@type\u0026rsquo; the user interface will adapt and show the relevant controls and hide the nonrelevant ones.\nScoped Resolution \u0026lsquo;Scoped Resolution\u0026rsquo; takes place whenever ref or data-ref attributes are resolved. It allows to use relative binding expressions that are resolved upwards the document tree.\nIt is a similar concept as with usual relative linking in HTML or navigating a directory-structure.\nAn example illustrates this best:\n\u0026lt;fx-instance\u0026gt; \u0026lt;data\u0026gt; \u0026lt;address\u0026gt; \u0026lt;name\u0026gt;Alice\u0026lt;/name\u0026gt; \u0026lt;address\u0026gt; \u0026lt;/data\u0026gt; \u0026lt;/fx-instance\u0026gt; \u0026lt;fx-bind ref=\u0026#34;address\u0026#34;\u0026gt; \u0026lt;!-- scoped resolution happens here --\u0026gt; \u0026lt;fx-bind ref=\u0026#34;name\u0026#34;\u0026gt;\u0026lt;/fx-bind\u0026gt; \u0026lt;fx-bind\u0026gt; When the nested fx-bind element is found it will resolve the tree upwards until it reaches the fx-fore element. While climbing upwards each ref attribute that is found will be picked up to build a complete absolute expression from it.\nFor the example it will resolve to address/name and return the node which has the value \u0026lsquo;Alice\u0026rsquo; here.\nThe instance() function without arguments return us the default instance which is always the first in document order.\nPlease note that you never need to spell out the root node when refering to a data item. So just address instead of data/address.\n"},{"uri":"https://jinntec.github.io/fore-docs/tags/1.6.0/","title":"1.6.0","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/elements-actions/","title":"elements actions","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/load/","title":"load","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/links/","title":"Links","tags":[],"description":"","content":"Fore Fore at github Fore at npmjs.com Twitter Discussions Issues Blog Articles Fore - User Interfaces in put HTML Programming with HTML but why? A Todo App in plain HTML Standards A beautiful XPath 3 reference XForms 2.0 - source of inspiration HTML Custom Elements Spec. Web Components at mdn XQuery Update for the impatient "},{"uri":"https://jinntec.github.io/fore-docs/tags/functions/","title":"functions","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/basic/","title":"basic","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/controls/","title":"controls","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/fore/","title":"fore","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/fx-fore/","title":"fx-fore","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/fx-model/","title":"fx-model","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/instance/","title":"instance","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/model/","title":"model","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/mvc/","title":"MVC","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/repeat/","title":"repeat","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/ui/","title":"UI","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/elements/model/bind/","title":"<fx-bind>","tags":["elements","model","fx-bind"],"description":"","content":"Description The fx-bind element attaches constraints and calculations to instance nodes.\nBy using XPath expressions for the attributes users can build complex calculation and validation rules (business logic) using a declarative syntax.\nfx-bindelements can be nested thereby taking part in inscope resolution resolving their ref attributes relative to their parent element.\nThe bindings are used to build the MDG (Main Dependency Graph) which detects dependencies between nodes and builds a graph that connects the dependent nodes to the currently processed one. This directed graph will then be ordered for computation. Circular dependencies are not allowed.\nWhen nodes are changed by user interaction only affected nodes are recomputed - affected nodes are nodes that have a connection to the changed node in the graph.\nThis change detection mechanism also drives efficient updating of the UI by selectively updating only controls that are bound to affected nodes.\nAttributes Name Description Default ref XPath pointing to node(s) the bind is attaching to - calculate XPath expression to be calculated. Result will become value of node(s) referenced by ref - constraint boolean XPath expression to determine validity of node(s) true readonly boolean XPath expression to determine readonly/readwrite state false relevant boolean XPath expression to determine relevant/non-relevant state true required boolean XPath expression to determine required/optional state false type datatype - reserved for future versions string Events none\nExamples nested Binding Binding Hello Simple Calculate todo Recalculate Revalidation Submission Relevance Processing "},{"uri":"https://jinntec.github.io/fore-docs/elements/model/functions/","title":"<fx-function>","tags":["elements","model","fx-function"],"description":"","content":"Description Allows to define custom inline function in either XPath/XQuery or Javascript.\nAttributes Name Description signature the function signature. Must use \u0026rsquo;local\u0026rsquo; prefix type can be \u0026rsquo;text/xpath\u0026rsquo;, \u0026rsquo;text/javascript\u0026rsquo;, \u0026rsquo;text/xquf\u0026rsquo; (XQuery Update Facility) Events none\nExamples Xquery Update Facility \u0026lt;fx-function signature=\u0026#34;update($element as element()) as element()*\u0026#34; type=\u0026#34;text/xquf\u0026#34;\u0026gt; copy $xml := $element modify ( for $ref in $xml/element return insert node $ref/@name with $xml/element/name/text() ) return $xml \u0026lt;/fx-function\u0026gt; JavaScript \u0026lt;fx-function signature=\u0026#34;now() as xs:string\u0026#34; type=\u0026#34;text/javascript\u0026#34;\u0026gt; const now = new Date(); return `${String(now.getHours()).padStart(2, \u0026#39;0\u0026#39;)}:${String(now.getMinutes()).padStart(2, \u0026#39;0\u0026#39;)}:${String(now.getSeconds()).padStart(2, \u0026#39;0\u0026#39;)}`; \u0026lt;/fx-function\u0026gt; Custom inline functions Randomizer "},{"uri":"https://jinntec.github.io/fore-docs/elements/model/instance/","title":"<fx-instance>","tags":["elements","model","fx-instance"],"description":"","content":"Description Holds the data of the model. A fx-model may have as many fx-instance elements as necessary.\nAttributes Name Description default credentials sets credentials policy - one of \u0026lsquo;omit\u0026rsquo;, \u0026lsquo;same-origin\u0026rsquo; or \u0026lsquo;include\u0026rsquo; same-origin id id of the instance for addressing in refs default src url to load instance from via http get type \u0026lsquo;xml\u0026rsquo; or \u0026lsquo;json\u0026rsquo; or \u0026lsquo;html\u0026rsquo; are supported by now xml xpath-default-namespace namespace to be used with unprefixed XPathes emtpy URI Schemes In addition to \u0026lsquo;http\u0026rsquo;, \u0026lsquo;https\u0026rsquo; further URI schemes are:\n\u0026lsquo;#querystring\u0026rsquo; will create a XML structure for the URL parameter of the page \u0026rsquo;localStore:[key]\u0026rsquo; to read some data from browsers\u0026rsquo; localstorage Examples Instances Instance super powers the fx-output element localStore Handling credentials "},{"uri":"https://jinntec.github.io/fore-docs/elements/model/submission/","title":"<fx-submission>","tags":["elements","model","fx-submission"],"description":"","content":"Description Send and receive data.\nAttributes Name Description Default credentials sets credentials policy - one of \u0026lsquo;omit\u0026rsquo;, \u0026lsquo;same-origin\u0026rsquo; or \u0026lsquo;include\u0026rsquo; same-origin id required: id of submission for referral \u0026lsquo;default\u0026rsquo; ref XPath reference pointing to the bound node root node of default instance instance id of instance when replace='instance'. Required when replace=\u0026lsquo;instance\u0026rsquo; into XPath expr where to insert response nodes into method http methods GET, POST, PUT, DELETE, url-encoded-post GET nonrelevant handling of non relevant nodes during serialization. Can be one of \u0026lsquo;keep\u0026rsquo;, \u0026rsquo;empty\u0026rsquo; or \u0026lsquo;remove\u0026rsquo; remove replace one of \u0026lsquo;all\u0026rsquo;, \u0026lsquo;download\u0026rsquo;, \u0026lsquo;instance\u0026rsquo;, \u0026rsquo;target\u0026rsquo;, \u0026lsquo;redirect\u0026rsquo; or \u0026rsquo;none\u0026rsquo; all \u0026lsquo;all\u0026rsquo; - response replaces the viewport \u0026lsquo;download\u0026rsquo; - save dialog is shown for response \u0026lsquo;instance\u0026rsquo; - response replaces the instance given by the instance attribute or if not present the default instance \u0026rsquo;target\u0026rsquo; - response will be attached to element identified by target (CSS Selector syntax e.g. \u0026lsquo;#mydiv\u0026rsquo;) \u0026lsquo;redirect\u0026rsquo; - use response as redirect url. \u0026rsquo;none\u0026rsquo; - response will be ignored. serialization \u0026rsquo;none\u0026rsquo; or \u0026lsquo;xml\u0026rsquo; at this point xml target selector in CSS selector syntax. valid only when replace is \u0026rsquo;target\u0026rsquo;. targetref XPath pointing to target node when replace=\u0026quot;instance\u0026quot; validate Boolean to turn validator mode on/off true Events Name Description submit dispatch before submission takes place submit-error dispatched if the request returned an error submit-done dispatched when submission was successfully completed URL Schemes Beside http, https Fore supports:\n\u0026rsquo;localStore:[key]\u0026rsquo; to manage data in the browsers\u0026rsquo; localstorage (supports \u0026lsquo;get\u0026rsquo;, \u0026lsquo;post\u0026rsquo;, \u0026lsquo;delete\u0026rsquo; and \u0026lsquo;consume\u0026rsquo; methods \u0026lsquo;#echo\u0026rsquo; to echo back whatever got sent Examples auth submission localStore submission serialization submission demo submission demo2 submission chaining submission chaining submission with targetref handling credentials "},{"uri":"https://jinntec.github.io/fore-docs/elements/actions/update/","title":"<fx-update>","tags":["elements actions"],"description":"","content":"Description Triggers an explicit update of the model\nAttributes No Attributes\nEvents none\nExamples delay randomizer while "},{"uri":"https://jinntec.github.io/fore-docs/tags/1.0.0/","title":"1.0.0","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/1.7.0/","title":"1.7.0","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/action/","title":"action","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/architecture/","title":"architecture","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/elements/","title":"elements","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/events/","title":"events","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/fx-alert/","title":"fx-alert","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/fx-bind/","title":"fx-bind","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/fx-case/","title":"fx-case","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/fx-control/","title":"fx-control","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/fx-dialog/","title":"fx-dialog","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/fx-function/","title":"fx-function","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/fx-hint/","title":"fx-hint","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/fx-inspector/","title":"fx-inspector","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/fx-instance/","title":"fx-instance","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/fx-items/","title":"fx-items","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/fx-output/","title":"fx-output","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/fx-repeat/","title":"fx-repeat","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/fx-submission/","title":"fx-submission","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/fx-switch/","title":"fx-switch","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/getstarted/","title":"getstarted","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/initialization/","title":"initialization","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/architecture/initialization/","title":"Initialization","tags":["architecture","lifecycle","initialization"],"description":"","content":"A defined lifecycle is essential for consistent and efficient processing of state changes during the lifetime of a \u0026lt;fx-fore\u0026gt; element.\nThe diagram below might read a bit complex at first sight but pretty much touches all important areas of Fore and might be a useful read for the interested developer.\nInitialization of Fore sequenceDiagram autonumber participant Fore participant Model participant Instances participant Bindings participant UI Note over Fore: find or generate Model activate Model Fore-\u003e\u003eModel: modelConstruct() loop Model-\u003e\u003eInstances: init() end Instances--\u003e\u003eModel: instance-loaded activate Model Model-\u003e\u003eModel: rebuild() loop Model-\u003e\u003eBindings: init() activate Bindings Bindings-\u003e\u003eModel: ModelItems deactivate Bindings end deactivate Model Model-\u003e\u003eModel: recalculate() Model-\u003e\u003eModel: revalidate() Model--\u003e\u003eFore: modelConstructDone activate Fore Fore-\u003e\u003eFore: initUI() loop Fore-\u003e\u003eUI: refresh() activate UI UI-\u003e\u003eUI: updateState deactivate UI end Fore--\u003e\u003eFore: refresh-done Fore--\u003e\u003eFore: ready deactivate Fore deactivate Model When a \u0026lt;fx-fore\u0026gt; element gets connected, it will wait for all children to be connected and then call modelConstruct() on the \u0026lt;fx-model\u0026gt; element to kick off the initialization process. If no \u0026lt;fx-model\u0026gt; is present one will be created. A model-construct event will be emitted. The model will look for all \u0026lt;fx-instance\u0026gt; elements within its child elements and call init() for each of them. This might involve loading data from an URL. A instance-loaded event will be dispatched for each instance once it\u0026rsquo;s loaded. During rebuild() the model will build its dependency graph by inspecting all \u0026lt;fx-bind\u0026gt; elements within the model. For each data node a ref attribute is pointing to a ModelItem object is created that holds the state of the data node. By inspecting the calculate, constraint, readonly, relevant and required attributes of a Bind the dependencies between data nodes are detected and added to the Main Dependency Graph (MDG). ModelItems will be registered in a map object in the Model. The data node itself will be the key to the ModelItem state object. recalculate() evaluates all calculate attributes in the order given by the MDG. revalidate() evaluates all constraint, readonly, relevant and required attributes to determine the validity of a ModelItem. model-construct-done event is emitted and catched by \u0026lt;fx-fore\u0026gt; element. Fore executes initUI which will find all bound elements within the scope of the \u0026lt;fx-fore\u0026gt; element. Call refresh() for each of them. Synchronize UI element state with ModelItem state by evaluating binding expression, fetching ModelItem object from Model and applying the relevant changes to a control. Fore dispatches a refresh-done event once all UI elements have been refreshed Fore dispatches a \u0026lsquo;ready\u0026rsquo; event "},{"uri":"https://jinntec.github.io/fore-docs/tags/inspector/","title":"inspector","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/lifecycle/","title":"lifecycle","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/message/","title":"message","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/refresh/","title":"refresh","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/submission/","title":"submission","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/trigger/","title":"trigger","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/update/","title":"update","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/architecture/update-cycle/","title":"Update Cycle","tags":["architecture","lifecycle","update"],"description":"","content":"The update cycle is triggered whenever a user interacts with a control e.g. by changing its value.\nLikewise this can be triggered by Actions being triggered by some state event like e.g. value-changed event.\nsequenceDiagram autonumber participant User participant Control participant Action participant Model participant Fore User-\u003e\u003eControl: interact Control-\u003e\u003eAction: execute activate Action Action-\u003e\u003eAction: mutate ModelItem Action-\u003e\u003eModel: add to changed list activate Action Action-\u003e\u003eAction: actionPerformed() Action-\u003e\u003eModel: rebuild() Action-\u003e\u003eModel: recalculate() Action-\u003e\u003eFore: changed[] -\u003e toRefresh[] Action-\u003e\u003eModel: revalidate() Action-\u003e\u003eFore: refresh() Fore--\u003e\u003eFore: refresh-done deactivate Action Action--\u003e\u003eAction: action-performed deactivate Action When the value of a UI control changes, it will use an action to propagate that change to the model. Usually a control will execute a \u0026lt;fx-setvalue\u0026gt; action to change its value The action mutates the ModelItem state object that is associated to the control. The changed ModelItem is added to a changed array in the Model When the action has done its job it will call the model to update while executing actionPerformed(). Only actions that mutate the structure of the data will call rebuild() as the Main Dependency Graph needs to be reconstructed. Instead of using MDG (see Initialization) recalculate will re-compute all calculations for the changed nodes by creating a subgraph of the MDG that will only contain the affected ModelItems. The array of changed ModelItems will be cloned and passed as toRefresh[] to the Fore object. All ModelItems will be revalidated. refresh() is called on Fore object that will use the toRefresh array of changed ModelItems to selectively update only affected controls. This will also incorporate controls that are dependent on the changed one by using the MDG. A refresh-done event is emitted A action-performed event is emitted "},{"uri":"https://jinntec.github.io/fore-docs/tags/validation/","title":"validation","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/architecture/","title":"Architecture","tags":["Version 1.0.0","MVC"],"description":"","content":"Architecture This chapter gives some insights into the inner workings of Fore. An understanding of the principles certainly helps to get the most out of Fore.\nFore is build as a classical MVC architecture.\nModel -\u0026gt; \u0026lt;fx-model\u0026gt; Element View -\u0026gt; Fore UI Elements Controller -\u0026gt; Fore Action Elements The ForeBody At the very minimum there needs to be a fx-fore element to get Fore into live. Without content this won\u0026rsquo;t do anything so we can consider these a unit and call it a \u0026lsquo;ForeBody\u0026rsquo;. Adding Fore to your page means to add a ForeBody.\nThe fx-fore element creates a scope for everything contained within it. By default Fore lives in lightDOM and is fully accessible to global styling. However there are options to put Fore also into shadowDOM if that\u0026rsquo;s necessary or preferred.\n\u0026lt;fx-fore\u0026gt; \u0026lt;!-- the ForeBody --\u0026gt; \u0026lt;/fx-fore\u0026gt; Styling-wise the fx-fore element is layout-neutral.\nWhat fx-fore does The fx-fore element is responsible for:\nkick off processing initing UI refreshing the UI messaging The detailed initialization process is described under \u0026lsquo;Initialization\u0026rsquo;.\nFore Model The Fore model is a container element for data, constraints, requests and custom functions. As Actions can occur in all places there might be also a couple of Actions.\n\u0026lt;fx-fore\u0026gt; \u0026lt;fx-model\u0026gt; \u0026lt;!-- 1 to n --\u0026gt; \u0026lt;fx-action\u0026gt;\u0026lt;/fx-action\u0026gt; \u0026lt;!-- 1 to n --\u0026gt; \u0026lt;fx-instance\u0026gt;\u0026lt;/fx-instance\u0026gt; \u0026lt;!-- 0 to n --\u0026gt; \u0026lt;fx-bind\u0026gt;\u0026lt;/fx-bind\u0026gt; \u0026lt;!-- 0 to n --\u0026gt; \u0026lt;fx-submission\u0026gt;\u0026lt;/fx-submission\u0026gt; \u0026lt;!-- 0 to n --\u0026gt; \u0026lt;fx-function\u0026gt;\u0026lt;/fx-function\u0026gt; \u0026lt;/fx-model\u0026gt; \u0026lt;/fx-fore\u0026gt; the fx-model element is a head-less element - it does not display at all and is layout-neutral.\nWhat the model does When a model is constructed it will perform some steps to enable efficient processing throughout the lifecycle.\nrebuild During rebuild all fx-bind elements are traversed and a DependencyGraph for the data is constructed.\nFor each bind the ref attribute is evaluated with XPath and results in a nodeset of matching data nodes (if any). For each of those a ModelItem object will be created that wraps the data node and additionally holds it\u0026rsquo;s state.\nDuring the next step the other attributes of bind are examined to detect \u0026lsquo;foreign nodes\u0026rsquo;. Each \u0026lsquo;foreign node\u0026rsquo; will become a new dependency in a directed Dependency Graph.\nrebuild finishes by dispatch rebuild-done event.\nrecalculate recalculate will first check if there have been changes since last run.\nIf there are no changes - usually only the case when initializing - the freshly-build mainGraph is used to determine the correct calculation order of the graph. The resulting list is iterated and each ModelItem will recompute its calculate expression.\nIf there have been changes to data nodes these are reported in a \u0026lsquo;changed\u0026rsquo; list. This list is used to build s subgraph of the mainGraph only containing the affected nodes. These are then computed as above.\nrevalidate During revalidation the other possbile attributes of fx-bind are evaluated using the ref expression as context.\nThese facets result in Boolean values that are assigned to the ModelItem. At refresh time the ModelItem is then used to synchronize the model state with the UI state and reflecting states like \u0026lsquo;readonly\u0026rsquo; to the HTML attribute.\nEvaluating the \u0026lsquo;constraint\u0026rsquo; attribute will add an alert to the ModelItem if defined.\n"},{"uri":"https://jinntec.github.io/fore-docs/tags/faq/","title":"FAQ","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/","title":"Fore","tags":[],"description":"","content":"Documentation Declarative user interfaces in pure HTML "},{"uri":"https://jinntec.github.io/fore-docs/faq/","title":"Frequently Asked Questions","tags":["Version 1.7.1","FAQ"],"description":"","content":"Frequently Asked Questions General How can i get the version number of Fore at runtime? Open a console in the devtools of your browser, enter this line and hit return:\ndocument.querySelector(\u0026#39;fx-fore\u0026#39;).version This will output something like:\n\u0026lsquo;Version: 1.7.1 - built on September 28, 2023 13:52:58\u0026rsquo;\n"},{"uri":"https://jinntec.github.io/fore-docs/tags/glass/","title":"glass","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/tools/","title":"tools","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/version-1.0.0/","title":"Version 1.0.0","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/version-1.5.x/","title":"Version 1.5.x","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/tags/version-1.7.1/","title":"Version 1.7.1","tags":[],"description":"","content":""},{"uri":"https://jinntec.github.io/fore-docs/categories/","title":"Categories","tags":[],"description":"","content":""}] \ No newline at end of file diff --git a/links/index.html b/links/index.html index d566789e..b4c43b17 100644 --- a/links/index.html +++ b/links/index.html @@ -1,9 +1,9 @@ -Links :: Fore Documentation -

    Links

    Fore

    Blog Articles

    Standards

    \ No newline at end of file +
    \ No newline at end of file diff --git a/tags/1.0.0/index.html b/tags/1.0.0/index.html index 96f7dc77..12448e03 100644 --- a/tags/1.0.0/index.html +++ b/tags/1.0.0/index.html @@ -1,7 +1,7 @@ -1.0.0 :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/1.6.0/index.html b/tags/1.6.0/index.html index 55a6a060..62673506 100644 --- a/tags/1.6.0/index.html +++ b/tags/1.6.0/index.html @@ -1,7 +1,7 @@ -1.6.0 :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/1.7.0/index.html b/tags/1.7.0/index.html index ad274cf2..6010c9f7 100644 --- a/tags/1.7.0/index.html +++ b/tags/1.7.0/index.html @@ -1,7 +1,7 @@ -1.7.0 :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/action/index.html b/tags/action/index.html index 965bb46e..1341a4dd 100644 --- a/tags/action/index.html +++ b/tags/action/index.html @@ -1,7 +1,7 @@ -action :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/actions/index.html b/tags/actions/index.html index f319991c..4ca391a6 100644 --- a/tags/actions/index.html +++ b/tags/actions/index.html @@ -1,7 +1,7 @@ -actions :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/architecture/index.html b/tags/architecture/index.html index 6ef4ca5e..25c6999f 100644 --- a/tags/architecture/index.html +++ b/tags/architecture/index.html @@ -1,7 +1,7 @@ -architecture :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/basic/index.html b/tags/basic/index.html index f7705efc..69ed54ef 100644 --- a/tags/basic/index.html +++ b/tags/basic/index.html @@ -1,7 +1,7 @@ -basic :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/controls/index.html b/tags/controls/index.html index c5269a30..9c3716d1 100644 --- a/tags/controls/index.html +++ b/tags/controls/index.html @@ -1,7 +1,7 @@ -controls :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/elements-actions/index.html b/tags/elements-actions/index.html index cdd3c52f..807e0098 100644 --- a/tags/elements-actions/index.html +++ b/tags/elements-actions/index.html @@ -1,7 +1,7 @@ -elements actions :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/elements/index.html b/tags/elements/index.html index 33ca4474..da22b0a0 100644 --- a/tags/elements/index.html +++ b/tags/elements/index.html @@ -1,7 +1,7 @@ -elements :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/events/index.html b/tags/events/index.html index 5450d2f9..7954f619 100644 --- a/tags/events/index.html +++ b/tags/events/index.html @@ -1,7 +1,7 @@ -events :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/faq/index.html b/tags/faq/index.html index be444181..1e077801 100644 --- a/tags/faq/index.html +++ b/tags/faq/index.html @@ -1,7 +1,7 @@ -FAQ :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/fore/index.html b/tags/fore/index.html index 16bfabb9..b96bc79c 100644 --- a/tags/fore/index.html +++ b/tags/fore/index.html @@ -1,7 +1,7 @@ -fore :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/functions/index.html b/tags/functions/index.html index 90763159..7f9ca4ee 100644 --- a/tags/functions/index.html +++ b/tags/functions/index.html @@ -1,7 +1,7 @@ -functions :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/fx-alert/index.html b/tags/fx-alert/index.html index 3be074a0..1bd18d92 100644 --- a/tags/fx-alert/index.html +++ b/tags/fx-alert/index.html @@ -1,7 +1,7 @@ -fx-alert :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/fx-bind/index.html b/tags/fx-bind/index.html index 93cafd80..ddfa51fe 100644 --- a/tags/fx-bind/index.html +++ b/tags/fx-bind/index.html @@ -1,7 +1,7 @@ -fx-bind :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/fx-case/index.html b/tags/fx-case/index.html index 1e8f6782..afbba6d9 100644 --- a/tags/fx-case/index.html +++ b/tags/fx-case/index.html @@ -1,7 +1,7 @@ -fx-case :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/fx-control/index.html b/tags/fx-control/index.html index be7a5b1b..475f9f3a 100644 --- a/tags/fx-control/index.html +++ b/tags/fx-control/index.html @@ -1,7 +1,7 @@ -fx-control :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/fx-dialog/index.html b/tags/fx-dialog/index.html index f43405c3..ee01eb4f 100644 --- a/tags/fx-dialog/index.html +++ b/tags/fx-dialog/index.html @@ -1,7 +1,7 @@ -fx-dialog :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/fx-fore/index.html b/tags/fx-fore/index.html index e6c6907e..fa3b84e9 100644 --- a/tags/fx-fore/index.html +++ b/tags/fx-fore/index.html @@ -1,7 +1,7 @@ -fx-fore :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/fx-function/index.html b/tags/fx-function/index.html index e3f37ce9..21a48649 100644 --- a/tags/fx-function/index.html +++ b/tags/fx-function/index.html @@ -1,7 +1,7 @@ -fx-function :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/fx-hint/index.html b/tags/fx-hint/index.html index 949d92d6..b05db5df 100644 --- a/tags/fx-hint/index.html +++ b/tags/fx-hint/index.html @@ -1,7 +1,7 @@ -fx-hint :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/fx-inspector/index.html b/tags/fx-inspector/index.html index 810b1664..fba1ffb6 100644 --- a/tags/fx-inspector/index.html +++ b/tags/fx-inspector/index.html @@ -1,7 +1,7 @@ -fx-inspector :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/fx-instance/index.html b/tags/fx-instance/index.html index 59dca00c..130aadf3 100644 --- a/tags/fx-instance/index.html +++ b/tags/fx-instance/index.html @@ -1,7 +1,7 @@ -fx-instance :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/fx-items/index.html b/tags/fx-items/index.html index a1e0e285..3c2b60e9 100644 --- a/tags/fx-items/index.html +++ b/tags/fx-items/index.html @@ -1,7 +1,7 @@ -fx-items :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/fx-model/index.html b/tags/fx-model/index.html index 291cd73a..2f03409c 100644 --- a/tags/fx-model/index.html +++ b/tags/fx-model/index.html @@ -1,7 +1,7 @@ -fx-model :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/fx-model/index.xml b/tags/fx-model/index.xml index 12ff991b..b0890536 100644 --- a/tags/fx-model/index.xml +++ b/tags/fx-model/index.xml @@ -1,4 +1,4 @@ fx-model on Fore Documentationhttps://jinntec.github.io/fore-docs/tags/fx-model/Recent content in fx-model on Fore DocumentationHugo -- gohugo.ioen-usFri, 20 May 2022 16:08:59 +0200<fx-model>https://jinntec.github.io/fore-docs/elements/model/model/Fri, 20 May 2022 16:08:59 +0200https://jinntec.github.io/fore-docs/elements/model/model/Description The model is responsible for: creating and maintaining the Main Dependency Graph (MDG). creating ModelItems for bound data nodes calculation validation This is done with the help of bind elements. The &lt;fx-model&gt; element is a direct child of &lt;fx-fore&gt; and is itself a container for: -one or more &lt;fx-instance&gt; elements zero, one or more &lt;fx-bind&gt; elements zero, one or more &lt;fx-submission&gt; elements zero, one or more &lt;fx-function&gt; elements &lt;fx-model&gt; &lt;fx-instance&gt;&lt;fx-instance&gt; &lt;fx-instance id=&#34;second&#34;&gt;&lt;fx-instance&gt; &lt;fx-instance id=&#34;third&#34;&gt;&lt;fx-instance&gt; &lt;fx-bind&gt;&lt;/fx-bind&gt; &lt;fx-bind&gt;&lt;/fx-bind&gt; . \ No newline at end of file +one or more &lt;fx-instance&gt; elements zero, one or more &lt;fx-bind&gt; elements zero, one or more &lt;fx-submission&gt; elements zero, one or more &lt;fx-function&gt; elements Warning: &lt;fx-model&gt; must be first child element of &lt;fx-fore&gt; due to not fully understood Web Components behaviour. \ No newline at end of file diff --git a/tags/fx-output/index.html b/tags/fx-output/index.html index f4d69d2e..48b069e1 100644 --- a/tags/fx-output/index.html +++ b/tags/fx-output/index.html @@ -1,7 +1,7 @@ -fx-output :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/fx-repeat/index.html b/tags/fx-repeat/index.html index a4bd70ce..6baef1d3 100644 --- a/tags/fx-repeat/index.html +++ b/tags/fx-repeat/index.html @@ -1,7 +1,7 @@ -fx-repeat :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/fx-submission/index.html b/tags/fx-submission/index.html index 6ad16fad..56eaf396 100644 --- a/tags/fx-submission/index.html +++ b/tags/fx-submission/index.html @@ -1,7 +1,7 @@ -fx-submission :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/fx-switch/index.html b/tags/fx-switch/index.html index 022c47bf..28c870c8 100644 --- a/tags/fx-switch/index.html +++ b/tags/fx-switch/index.html @@ -1,7 +1,7 @@ -fx-switch :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/getstarted/index.html b/tags/getstarted/index.html index 91750769..37b12ccb 100644 --- a/tags/getstarted/index.html +++ b/tags/getstarted/index.html @@ -1,7 +1,7 @@ -getstarted :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/glass/index.html b/tags/glass/index.html index 7990c5e4..3a1f5617 100644 --- a/tags/glass/index.html +++ b/tags/glass/index.html @@ -1,7 +1,7 @@ -glass :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/guides/index.html b/tags/guides/index.html index 15448845..a4dd78bd 100644 --- a/tags/guides/index.html +++ b/tags/guides/index.html @@ -1,7 +1,7 @@ -guides :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/index.html b/tags/index.html index 7f3bdea3..f60aa835 100644 --- a/tags/index.html +++ b/tags/index.html @@ -1,7 +1,7 @@ -Tags :: Fore Documentation -

    tag :: -Fore

    hello

    \ No newline at end of file +Fore

    hello

    \ No newline at end of file diff --git a/tags/initialization/index.html b/tags/initialization/index.html index 14c76ee0..18d752e1 100644 --- a/tags/initialization/index.html +++ b/tags/initialization/index.html @@ -1,7 +1,7 @@ -initialization :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/inspector/index.html b/tags/inspector/index.html index 2ef1e2a1..d49ac22f 100644 --- a/tags/inspector/index.html +++ b/tags/inspector/index.html @@ -1,7 +1,7 @@ -inspector :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/instance/index.html b/tags/instance/index.html index 8f4cb750..b601fe0f 100644 --- a/tags/instance/index.html +++ b/tags/instance/index.html @@ -1,7 +1,7 @@ -instance :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/lifecycle/index.html b/tags/lifecycle/index.html index 6495722e..89f37c3c 100644 --- a/tags/lifecycle/index.html +++ b/tags/lifecycle/index.html @@ -1,7 +1,7 @@ -lifecycle :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/load/index.html b/tags/load/index.html index 01b849f6..6e8c15a7 100644 --- a/tags/load/index.html +++ b/tags/load/index.html @@ -1,7 +1,7 @@ -load :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/message/index.html b/tags/message/index.html index 8c9146be..3b939c47 100644 --- a/tags/message/index.html +++ b/tags/message/index.html @@ -1,7 +1,7 @@ -message :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/model/index.html b/tags/model/index.html index 6c85d956..7501ad7c 100644 --- a/tags/model/index.html +++ b/tags/model/index.html @@ -1,7 +1,7 @@ -model :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/model/index.xml b/tags/model/index.xml index caed8047..fb9bbef9 100644 --- a/tags/model/index.xml +++ b/tags/model/index.xml @@ -1,7 +1,7 @@ model on Fore Documentationhttps://jinntec.github.io/fore-docs/tags/model/Recent content in model on Fore DocumentationHugo -- gohugo.ioen-usFri, 20 May 2022 16:08:59 +0200<fx-model>https://jinntec.github.io/fore-docs/elements/model/model/Fri, 20 May 2022 16:08:59 +0200https://jinntec.github.io/fore-docs/elements/model/model/Description The model is responsible for: creating and maintaining the Main Dependency Graph (MDG). creating ModelItems for bound data nodes calculation validation This is done with the help of bind elements. The &lt;fx-model&gt; element is a direct child of &lt;fx-fore&gt; and is itself a container for: -one or more &lt;fx-instance&gt; elements zero, one or more &lt;fx-bind&gt; elements zero, one or more &lt;fx-submission&gt; elements zero, one or more &lt;fx-function&gt; elements &lt;fx-model&gt; &lt;fx-instance&gt;&lt;fx-instance&gt; &lt;fx-instance id=&#34;second&#34;&gt;&lt;fx-instance&gt; &lt;fx-instance id=&#34;third&#34;&gt;&lt;fx-instance&gt; &lt;fx-bind&gt;&lt;/fx-bind&gt; &lt;fx-bind&gt;&lt;/fx-bind&gt; .The anatomy of Forehttps://jinntec.github.io/fore-docs/getstarted/mvc/Fri, 20 May 2022 16:08:59 +0200https://jinntec.github.io/fore-docs/getstarted/mvc/Before stepping deeper a basic understanding of the main parts of Fore is helpful. +one or more &lt;fx-instance&gt; elements zero, one or more &lt;fx-bind&gt; elements zero, one or more &lt;fx-submission&gt; elements zero, one or more &lt;fx-function&gt; elements Warning: &lt;fx-model&gt; must be first child element of &lt;fx-fore&gt; due to not fully understood Web Components behaviour.The anatomy of Forehttps://jinntec.github.io/fore-docs/getstarted/mvc/Fri, 20 May 2022 16:08:59 +0200https://jinntec.github.io/fore-docs/getstarted/mvc/Before stepping deeper a basic understanding of the main parts of Fore is helpful. Fore uses a classical Model-View-Controller (MVC) architecture. There are 3 basic things to remember: The model (&lt;fx-model&gt;) holds the data and their state. This state will be used during refresh to apply changes to the UI. diff --git a/tags/mvc/index.html b/tags/mvc/index.html index f1b16514..4fdce247 100644 --- a/tags/mvc/index.html +++ b/tags/mvc/index.html @@ -1,7 +1,7 @@ -MVC :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/refresh/index.html b/tags/refresh/index.html index d30ec615..acaef735 100644 --- a/tags/refresh/index.html +++ b/tags/refresh/index.html @@ -1,7 +1,7 @@ -refresh :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/repeat/index.html b/tags/repeat/index.html index e12e4f89..d523a146 100644 --- a/tags/repeat/index.html +++ b/tags/repeat/index.html @@ -1,7 +1,7 @@ -repeat :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/submission/index.html b/tags/submission/index.html index aa2a2084..dafaf2cd 100644 --- a/tags/submission/index.html +++ b/tags/submission/index.html @@ -1,7 +1,7 @@ -submission :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/tools/index.html b/tags/tools/index.html index 35477035..07c06be7 100644 --- a/tags/tools/index.html +++ b/tags/tools/index.html @@ -1,7 +1,7 @@ -tools :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/trigger/index.html b/tags/trigger/index.html index 9280ec07..156832bb 100644 --- a/tags/trigger/index.html +++ b/tags/trigger/index.html @@ -1,7 +1,7 @@ -trigger :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/ui/index.html b/tags/ui/index.html index 0dcb39fb..43dee462 100644 --- a/tags/ui/index.html +++ b/tags/ui/index.html @@ -1,7 +1,7 @@ -UI :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/update/index.html b/tags/update/index.html index 0b8f1e79..97ab5c15 100644 --- a/tags/update/index.html +++ b/tags/update/index.html @@ -1,7 +1,7 @@ -update :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/validation/index.html b/tags/validation/index.html index 43fb92ec..2629e983 100644 --- a/tags/validation/index.html +++ b/tags/validation/index.html @@ -1,7 +1,7 @@ -validation :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/version-1.0.0/index.html b/tags/version-1.0.0/index.html index ab176e3c..d42866ce 100644 --- a/tags/version-1.0.0/index.html +++ b/tags/version-1.0.0/index.html @@ -1,7 +1,7 @@ -Version 1.0.0 :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/version-1.5.x/index.html b/tags/version-1.5.x/index.html index 1bd23719..9639fccd 100644 --- a/tags/version-1.5.x/index.html +++ b/tags/version-1.5.x/index.html @@ -1,7 +1,7 @@ -Version 1.5.x :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tags/version-1.7.1/index.html b/tags/version-1.7.1/index.html index e5ea4a26..ea37d452 100644 --- a/tags/version-1.7.1/index.html +++ b/tags/version-1.7.1/index.html @@ -1,7 +1,7 @@ -Version 1.7.1 :: Fore Documentation -

    tag :: -Tags

    hello

    \ No newline at end of file +Tags

    hello

    \ No newline at end of file diff --git a/tools/index.html b/tools/index.html index a846c093..fd31cb36 100644 --- a/tools/index.html +++ b/tools/index.html @@ -1,7 +1,7 @@ -Tools :: Fore Documentation -
    Version 1.5.x @@ -15,4 +15,4 @@ configuration panel show you all available events at once along with a short description when you hover them.

    Fore Glass

    To discover which events you have at hand or in which sequence they happen at which time, you can check/uncheck the intereting events to display them in the Log.

    For this example the ‘model-construct’, ‘model-construct-done’ and ‘ready’ have been checked,

    Fore Glass

    Please note the rendering of the items - events that do not have actions attached to them will occur with rounded corners. Actions that are executed as one block with a single update-cycle will be marked with a blue border on the left.

    \ No newline at end of file +
    \ No newline at end of file