View Source

{info}This page describes the architecture, i.e. the core structure, of generating and executing the OOINet Web UI{info}

h2. ´╗┐Overview

*The Core Principles for the design of the OOINet User Interface are:*

* Modularity: The different elements of the presentation layer need to be wrapped in a modular, reusable way
* Declarative: The UI is defined out in a specification rather than programmed in code
* Internationalization: Text in the UI can be replaced modularly for a selected language
* A machine process exists to load the UI definitions into the system on startup so that the UI framework can interpret them
* A machine process exists to add and update UI definitions (within reason) with the running system

h2. User Interface Concepts

|| Concept || Purpose \\ ||
| Screen Element | A generic term for any layout element of the UI. Screen Elements can be of specific type and can be embedded within parent Screen Elements |
| View | A Screen Element representing a UI screen, such as a Resource Facepage |
| Group | A Screen Element representing an ordered collection of blocks. Usually represented as a tab on the screen. |
| Block | A Screen Element representing an ordered collection of attributes. |
| Attribute | A named value that may originate from a persistent resource attribute or from a computed attribute generated by an OOINet service |
| Screen Label | A text associated with an identifier, to be displayed on screen |
| Help Tag | A help text associated with an identifier, to be displayed on screen e.g. as a hover item |
| Representation | A display variant for a Block (e.g. graph, table, data, etc) |

See the R2 UX Detailed Design Specification

h2. Decomposition

The Web UI layer consists of the following elements:

h3. Web UI Platform

The web server hosting the web application on the OOINet side. See here for details:

* [syseng:CIAD UX SV Web UI Platform]

h3. Web User Interface

The web application running in a user's browser. See here for details:

* [syseng:CIAD UX SV Web User Interface]
* [syseng:CIAD UX UI Facepages]

h2. UI Layout Strategy

* The system architecture elements are captured in interface YML pages (services, resources, associations)
* The UI screen definitions are captured in the UX database
* The UI screen definitions are exported to machine-readable form from the UX database as needed
* A generate-ui program parses the UI screen definitions and stores them as one large object in the system database 
* The OOINet services are started
* A consistent version of the UI framework is started
* The operator can regenerate UI screen definitions during OOINet runtime

!https://docs.google.com/drawings/pub?id=1H9Q15O6Oy0hfJ7gY4lflo8qMFlg3qHzRPKDkSxeXjmQ&w=1248&h=684!

h2. Implementation

See here for details:

* [ION-UX Documentation|CIDev:ION-UX Documentation]
* [CIDev:OOINet UX Release Process]
* [CIDev:UI Developer Guide]