 |  |
| | |
Every window in OLAT is controlled by a so-called
ChiefController . The ChiefController is
responsible for the dispatching of window events and layouting of the main layout.
Currently there are three ChiefControllers:
TODO: This part is outdated with the switch to YAML GUI framework in OLAT 6.0
DMZChiefController: controlls requests from unauthorized
windows. Has as special top navigation to switch to a different language. When
changing the language all content elements will change the language as well (unlike
the other ChiefControllers).
FullChiefController: controlls all requests in the main
window after a successful login. The FullChiefController has
the ability to put sites and dynamic tabs in the top navigation. The
FullChiefController provides a logout link in the top
navigation.
PopupChiefController: controlls requests from a popup
window. Popup windows have only some top navigation tools in the top navigation, but
no dynamic tabs or sites. Instead of the logout link it uses a close link that, when
fired, disposes the window representation on the server.
The purpose of the top navigation used in the
FullChiefController is to access the main areas (sites and dynamic
tabs) in OLAT and to provide some special tools for the current window. Every window has a
top navigation, but only in the main window we have the sites and dynamic tab navigation.
The top navigation is always visible.
These are the elements in the top navigation:
Sites: static places which offer a specific functionality: Home, Groups, Learning resource, Administration.
Dynamic tabs: dynamic sites, that can be launched from within a site and open as a dynamic and closable tab in the top navigation. Examples are opened courses, opened groups etc. Dynamic tabs can be closed using the close button on the tab.
Top navigation tools: special tools that are always visible like the print or logout link
Instant Messaging status: information about your IM and your buddies status
Most sites and dynamic tabs use classes from the GUI framework to control the main layout. These are the following:
ContentOnlyController: wraps content with a DIV tag with
DOM ID o_xcontent
MenuAndToolController: renders a layout with three
columns for the menu, content and tools. Each of this three items are wrapped within
a TD or a DIV element that are labeled o_menu,
o_content, o_tools or
o_xmenu, o_xcontent,
o_xtools respectively. The x version is used when the menu and
tools are in the hidden (dynamic) state. When both the menu and the tools are hidden
the content uses also the x version as ID.
WizardController: used to create a multi-step a wizard
layout e.g. to copy a group.
The content menu is provided by a site or dynamic tab controller and rendered by the
MenuTreeRenderer. When using the
MenuAndToolController for the main layouting it can be put in a
dynamic state. In this state the menu is hidden and symbolized by a small bar. When
hovering over this bar with the mouse, the menu appears dynamically.
The menu has unlimited numbers of hierarchies, however since space is limited hierarchies should be kepts as small as possible. A little opener icon symbolizes that a certain menu entry can be expanded since it has children elements. Only one menu element can be expanded and active at the moment.
Due to performance issues with very larg content packagings the menu is rendered on the server side. This means that navigating through the menu can be slow since for every menu action the whole page must be loaded again from the server.
Clicking on a menu leads to a change in the content area. A click on a menu item can never cause the launching of a popup window. For usability consistency this rule is never broken. If a popup is desired an intermediate page shows up in the content area where the user explicitely opens a new window by puthing a button.
 |
An example menu from the course editor that uses icons and icon decorators
Menu items can be styled using CSS classes
treeNode.getCssClass() e.g. to emphasize the active item.
Menu items can have an icon attached. This is also done using CSS classes
treeNode.getIconCssClass(). The icon is rendered on the left side of the
text. To change this behaviour e.g. for languages that goes from right to left you must
implement your own MenuTreeRenderer.
Menu icons can be decorated using four additional icons using CSS classes
treeNode.getIconDecorator1CssClass(),
treeNode.getIconDecorator2CssClass(),
treeNode.getIconDecorator3CssClass() and
treeNode.getIconDecorator4CssClass(). This is used in the course editor to
indicate errors or warning on the course menu tree or in the SCORM runtime to merge the
activity state of a page with the menu tree.
In the content are the content of a site or dynamic tab is displayed. The content usually changes when clickin in the content menu or when activating a toolbox action, however the content can also have content related actions within the content area.
Links in the content area can create popup windows or open new dynamic tabs. In rare cases it can also activate menu items when acting as an overview page. But in general links in the content only modify the content area and nothing else.
Certain actions from the content area can lead to full screen dialogs, so-called modal dialogs. The user then has no other choice than to answer the question (do you really want to delete this file?). After giving an answer the old layout is reestablished.
A site or dynamic tab can offer certain general workflow actions or higher level tools in a toolbox. Such workflow actions could be: create new group, move current course building block. Examples for higher level tools would be: open course editor, open group management, open course chat etc.
Workflow actions usually result in a change in the content area wheras higher level tools usually replace the whole layout of the site or dynamic tab. Such higher level tools have their own menu, content and toolbox. In the higher level tools toolbox a close link is offered to close the tool and go back to the origin layout. In the screenshot above this link is labeled as "Current tool close action".
It really depends on how much an action is related to the overal workflow. The more the action is a general action like creating a group in the groupmanagement, the more the action should be in the actions toolbox. The more an action is a very local action like deleting a file in a folder that is currently displayed, the more the action should be located in the content area.
After loggin the home site is activated. However, it is also possible to diretly jump
into a course, forum in a group etc. When creating new sites or dynamic tabs this is
handled via ControllerFactory.createLaunchController(). When the
site or dynamic tab already exists the activation is done through the
Activateable interface that must be implemented by such sites.
OLAT should be easy to use without the need to read help. However, the functionality of OLAT is so big and some of it is quite complex that it is not possible to make everything self exlanatory. The context sensitive help is used wherever some help might be needed. The context sensitive help is appears with a small symbol. By klicking the symbol a popup window opens containing the help.
The context sensitive help is placed in the html files using the velocity helper
rendering method velocityRenderDecorator.help(). The context
sensitive help is written using the translation tool explained in Customizing.
The comprehensive help in OLAT is accessed via the top navigation tools. The help opens in a new window and is organized as a regular OLAT course. This is very handy since the help has also a forum. Make sure you register to this forum notifications!
The OLAT help course is imported when starting OLAT. Modify the lines in the module
I18nManager in the WEB-INF/olat_config.xml file if you want to
have your own help course used instead of the default one.
Some GUI elements in OLAT offer configuration / personalization options. These options usually have a very local scope and do not influence the whole system. In contrary the users settings that can be changed in the home site (see Section 2.9.1, “Settings”) have a global scope and affect OLAT as a whole for this user.
Every user has one object GuiPreferences that can be retriefed
from the users user session
ureq.getUserSession().getGuiPreferences(). The
GuiPreferences object offers then methods to get and set values for
this user.
The users list in the groupmanagement for example features much more data than is shown in the default view. However, presenting all data would make the table very large and would force you to scroll vertically. In this table a small icon right on top of the table lets you customize this tables view. Some other tables also use this feature, e.g. the listing of learning resources has an additional date field that is not visible in the default view.
Another place where the GUI perferences are used are the menu and toolbox state. Menus and toolboxes can be put into a dynamic / hidden state. This state information is stored in the GUI prefereces.
Another example is the home site portal configuration. The users personal settings are also stored in the GUI preferences.
The OLAT layout uses CSS for most of its styling. We tried hard to not use tables, however unfortunately the layout is so complex that it was not possible to completely do it without. The layout expands in all directions (no fixed width), uses no frames and has a sticky footer that is only pushed down when not enouth space is available.
The CSS is not only used for nice formatting but also for (almost) all icons which are set as CSS backgrounds instead of using IMG tags. This allows overriding the complete look on a course level, even the icons, e.g. in the course menu.
OLAT does not offer themes that can be choosen by the user. The idea is that OLAT has one default look and feel that can be customized for the whole installation. On the course level, the look can be changed completely by adding a CSS file to the course folder and configuring this CSS as the course CSS in the course settings. It is more important to give authors the possibility of styling their course in a consistent manner than to give users the possibility to style their OLAT.
See Customizing to learn how to customize OLAT on a installation level.
| |  | |
 |