SOLoist™

3.2      GUI Design

The GUI will have the following general appearance:

The main structure of the GUI is like follows:

·        The title bar (1) at the top of the screen is a static graphic.

·        The menu bar (2) below the title bar is the main navigational element. At this step, the menu will contain only one option, “HOME”, that will lead to the page displayed above.

·        The central panel (3) brings the main presentational contents.

·        The command bar (4) with the set of commands that is sensitive to the current contents of the central panel.

·        The status bar (5) at the bottom shows the status of the AJAX calls dispatched from the Web client as follows:

o       Each yellow circle represents one initiated AJAX call (request for information).

o       Each blue circle represents one dispatched command.

o       When an initiated request (an AJAX call or a dispatched command) is completed successfully, the circle changes its color to green and disappears after a few seconds.

o       When an initiated request (an AJAX call or a dispatched command) fails, the circle changes its color to red and disappears after a few seconds.

The central panel will have two alternative appearances. The first one is displayed initially, or on a click on the “HOME” menu. It is shown in the picture above and its elements are as follows. The tree view on the left (6) renders the hierarchical structure of Departments and their sub-departments. When a Department is selected in the tree view, its name and description can be edited in the text boxes on the right (7). In addition, the list of Employees assigned to the selected Department is displayed on the right (8).

The list of command buttons in the command bar of this panel is as follows:

·        “Create employee”: when a Department is selected in the tree view (and only then), this command will create a new Employee and assign it to that Department.

·        “Create subdepartment”: when a Department is selected in the tree view (and only then), this command will create a new Department as a sub-department of that Department.

·        “Delete department”: when a Department is selected in the tree view (and only then), this command will delete that Department from the system, as well as its sub-departments (but not their Employees, which will remain unassigned).

·        “Delete employee”: when an Employee is selected in the list (and only then), this command will delete that Employee from the system.

When an Employee is double-clicked in the list, the second panel is shown like this:

 

 

This panel has two tabs. The tab “General” shown above displays all attributes of the selected Employee. In addition, it displays an iconic and short textual representation of the selected object (9), as well as for the Department of that Employee (10). These two representations are for the convenience only; for example, double-clicking on the icon for the Department displays the first panel with that Department selected in the tree view. This is a convenient informational and navigational shortcut available in SOLoist. The widgets for the contract and photo attributes (11) provide buttons to browse and select a file for upload, upload that file to change the value of the attribute, and remove the value from the attribute.

The second tab displays the same iconic representation of the Employee (12) and the same hierarchy of all Departments (13) in the company as shown in the screenshot below, but with checkboxes next to the icons of Departments. The checked box indicates the Department to which the Employee is currently assigned. Checking another Department moves (assigns) that Employee to that Department. Again, double-clicking on any Department displays the first panel with that Department selected in the tree view.