Skip to end of metadata
Go to start of metadata
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

See Also:

Behavior

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 CIAD UX UI Facepages for a list of UI facepages by resource type with content expectations.

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

Implementation Details

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 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.

Source Code Location

The source code for OOICI UI can be found in the "ion-ux" repository on Github (https://github.com/ooici/ion-ux).

Third-party Libraries

Library Description Link
Backbone.js Client/Browser-side JavaScript MVC Library http://documentcloud.github.com/backbone/
Underscore.js  JavaScript library for functional programming support http://documentcloud.github.com/underscore/
jQuery JavaScript library for DOM elements and events http://jquery.com/
Flask Python micro-framework for building RESTful web apps http://flask.pocoo.org/
Jinja2 Pythonic HTML Templates http://jinja.pocoo.org/2/
Twitter Bootstrap CSS grid and style library http://twitter.github.com/bootstrap/
CILogon User authentication http://www.cilogon.org/

Front-end Behavior (Request/Response)

References

Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.