View Source

{info}This page describes the architecture of the OOINet Web User Interface front-end, i.e. the user interface component executing within a user's browser{info}

*See Also:*

* [syseng:CIAD UX SV Web UI Platform]
* [syseng:CIAD UX User Interface Presentation Architecture]

h2. Behavior

h3. Viewing Resources

The UI defines different types of pages to display various resource information:

* Facepage: The primary overview page used for viewing resource information and related resource information.
* Command page: Used to interact with resources that can be commanded such as instruments and platforms

See [syseng:CIAD UX UI Facepages] for a list of UI facepages by resource type with content expectations.

h3. Create and Edit of Resources

The Web UI provides a page to edit resource metadata and associations to other resources. The figure below shows the interactions with the OOINet backends during creation and edit of a resource.


_Figure 1. Create and edit interactions between UI and backend_

h2. Implementation Details

h3. Overview

The Web UI Framework is based on a Python Flask extension to an Apache server. It provides the security session management and delegates to [CIlogon|syseng:CIAD COI TV CIlogon] for authentication.

The browser side UI has abilities to dynamically compose screens based on view and resource type and fill fields with resource attribute values.

h3. Source Code Location

The source code for OOICI UI can be found in the "ion-ux" repository on Github ([]).

h3. Third-party Libraries

|| Library || Description || Link ||
| *Backbone.js* | Client/Browser-side JavaScript MVC Library | [] |
| *Underscore.js * | JavaScript library for functional programming support | [] |
| *jQuery* | JavaScript library for DOM elements and events | [] \\ |
| *Flask* | Python micro-framework for building RESTful web apps | [] |
| *Jinja2* | Pythonic HTML Templates | [] |
| *Twitter Bootstrap* | CSS grid and style library | [] |
| *CILogon* | User authentication | [] |

h3. Front-end Behavior (Request/Response)


h2. References

* [CIlogon (TV)|syseng:CIAD COI TV CIlogon]: For authentication
* [syseng:CIAD COI SV Service Interfaces]
* [CIAD COI Service Gateway]