This is an example of the layout and interface elements we are using. In fact you have been using it all along on this site. It consists of css elements and structured xhtml along with some JavaScript widgets.

Fedora Community is built from a collection of MyFedora applications. Container applications, such as the main navigation, can hold and display other applications. The application below will allow you to highlight the individual applications and get a detailed description of what they do. As more base Moksha functionality is added we will be displaying examples here.

The chrome is a container which wraps the entire app with the site style and branding. It also sets up all of the common CSS and JavaScript resources which are expected to be available to child applications. In Fedora Community the chrome consists of the top logo and header bar (along with a search and login status on the actual site), the side black borders and a footer legal notice.

The main navigation container is derived from the jQuery.UI.tabbed() widget. The tabs are located on the right hand side of the screen with the content panes filling up the rest of the space to the right. Clicking on one of the tabs loads a new content pane without having to refresh the Chrome.

The sub navigation container is a tabbed container much like the main navigation container except for its tabs are on the top and content page on the bottom. Like the main nav widget, it is derived from the jQuery.UI.tabbed() widget but has different caching characteristics. Not all apps loaded from the main nav have to have a sub nav but it is encouraged. An application derived from the sub nav app could do things like allow the user to add or remove tabs, giving them the ability to customize their views.

Dashboard containers are just another container but instead of showing one application at a time it allows multiple applications to be displaced at once in columns. Applications on a dashboard can become aware of each other and communicate to form a larger application (such as interface information app and the interface description app that you are reading right now). Work is already underway for deriving this application from the jQuery.UI.sortable widget so that on certain pages you will be able to configure where you want your applications placed on the dashboard.

Note: that due to the floating div's which take element outside the normal HTML block model, right now the highlighted area is shorter than it should be. It should extend right to the start of the footer.

These are just each of the individual applications that make up the final view. These applications are self contained and can run and be developed on their own though some are ment to be hooked up to another application to be useful.

Note: For some reason the Login app's CSS is preventing the highlight from showing. Rest assured it is one of the apps.