Functional Overview
SCAr comprises of 3 main functional units.
- Spaces browser
- Content browser
- Properties panel
Spaces browser
Spaces browser is located on the left side of SCAr which displays spaces and folders in a hierarchy. The default location of spaces browser is /app:company_home. This can be configured by SCAr administrators.
Upon login the entire space structure under the root is retrieved from Alfresco and used to populate the rich faces tree as illustrated below:
Content browser
The content browser utilizes a standard JSF h:datatable ui component to display the contents of the folder selected in the rich tree. A4jis is used to enable the components to raise events asking other components to re-render themselves. The image below shows an example of what the data table looks like when populated with spaces and content:
A custom CSS was used to give the table this look and feel.
Details Modal Panel
The details panel is rendered inside a richfaces modal panel component which will display a subset of properties of the selected node. If a selection is made in the content browser by double clicking a row, the details modal panel is updated with that selection's properties. The following image shows what the details panel looks like:
Single-Page UI
The SCAr user interface is composed of a single page that provides its users with many of the Alfresco document repository features and makes use of modal panels to allow users to take actions upon the folders and documents they are viewing. The following is a screenshot of what SCAr looks like to a typical end user:
Technical Overview
The internal architecture of SCAr is broken down into a number of RichFaces components each exposing one or more of Alfresco's document management features. Each RichFaces component is backed by a Seam action class (POJO), where each Seam listener has access to a RAAr abstraction layer providing it with an easy to use domain specific API into Alfresco ECM. By making use of Seam observers each user action triggers one or more events at the back-end allowing one UI component to manipulate the state of the other components on the screen as needed.
The following diagram shows a high-level overview of SCAr:
