(view as slideshow)

Cockpit Image 5 - All Widgets Minimized Cockpit Image 4 - Depicting Widget in Configuration State Cockpit Image 3 - Depicting Minimized Widgets Cockpit Image 2 - Depicting Widget in Fullscreen Mode

Cockpit Image 1 - Cockpit in Default View

TopCoder Client Cockpit

1. Overview

1.1 - This application will provide an entry point for TopCoder Customers to interact with the TopCoder Community through a "Client Cockpit".
From this page a registered TopCoder client-member will be able to launch and track projects, send/receive messages and monitor a variety of information sources via a customizable framework of widgets, which can be dragged and dropped into place in any order the customer wishes. The following is an explanation of the behavior of the individual widgets and widget framework of the TopCoder Client Cockpit.

1.2 - The "Main Content Area" refers to the space depicted in the attached images in which the "widgets" exist. This area is two columns wide, accommodating rows of either two "single-wide" widgets side-by-side, or one "double-wide" widget as depicted in the images.

1.3 - Widgets in the main content area can be dragged & dropped, moved around on the page, minimized or expanded to "double-wide" or "fullscreen" views.

1.3 - All widgets should follow a "snap to grid" behavior pattern, no widget covering up another and widgets lower on the page moving up or down accordingly when widgets above are open, closed, minimized or removed from the page.

1.4 - The "Left Nav" refers to the left navigation column. This will include mostly static html, but should allow for the possibility of future widgets designed to fit in the more narrow left nav column, above or below the "red widget buttons" at the user's discretion.

1.5 - The "Red Widget Buttons" refer to the stack of buttons in the left navigation column corresponding to the widgets the user has chosen to appear on his cockpit. The user may choose to close a widget in the main content area, while keeping the corresponding red widget button available in the left nav. These will operate as a "taskbar" of widgets, each with specific functionality in different sitations. (see 5.3)

1.6 - You do not need to design the actual widgets but provide the sample widgets just to show how the framework will work.* *The functionality for Adding/Removing widgets is outside of the scope of this competition.

2. - Persistence

2.1 - The state, size and position of all widgets for a specific point in time is refered to as the layout. Any change to the layout should be persisted to an SQL data store via a data persistence layer as the changes occur. This will allow the layout to be restored to the most recent state upon closing and restarting of the cockpit. The data should be stored in such a way that information about the usage and popularity of widgets can be reported upon and potentially utilized in future widgets.

3. - Technologies

3.1 - The client widget framework should be designed for JavaScript. The client should utilize AJAX communication with the data access layer which should reside within JBoss Application Server.

4. Widget Behavior in Main Content Area

4.1 - There is no minimum or maximum number of widgets allowable in main content area

4.2 - How Widgets Move

         4.2.1 - A widget in the main content area can exist in one of four states:
            4.2.1.1 - ("single-wide") One column wide
            4.2.1.2 - ("double-wide") Two columns wide
              4.2.1.3 - ("minimized") Header only
              4.2.1.4 - ("fullscreen") Filling entire main content area

4.2.2 - Anytime a widget is moved, closed, minimized or expanded, the other widgets should "snap to grid to fill the empty spaces.

4.2.2.1 - As a rule, single-wide widgets will move up and down in their respective columns; up to fill a void left by a closed, removed or minimized widget above -- down when pushed by the adding or opening of a widget above.

4.2.2.2 - When a single-wide widget is expanded to double-wide (see 4.4.1), the new double-wide widget will maintain its row position, and the adjacent single-wide will be pushed down one position in its column.

4.2.2.2.1 - All widgets below will shift downward in the column. Any double-wides below will be pushed down as well, in turn pushing widgets in both columns down in the same manner.

4.2.2.3 - A double-wide widget moving upward can only move as far empty space exists in both columns.

4.2.2.4 - When a widget is dragged into a new position, the adjacent widgets should displace up, down, left or right depending on the position to which the user has dragged and dropped the widget

4.3 - TopCoder Cockpit default view is as depicted in Image 1 with the 'double-wide' (spanning two columns) "My Projects" widget at the top of the main content area.

4.4. Small Arrow on bottom right of widget

4.4.1 - "single wide" widgets will expand to "double-wide" with the click of the small black arrow at the bottom right of the widget

4.4.2 - When "double-wide" this arrow now points left

4.4.3 - "double wide" widgets will revert to "single-wide" with the click of this arrow.

4.4.4 - This function is not available while in fullscreen mode, and this arrow icon should not appear on a widget in fullscreen mode.

4.5 - "FullScreen/Back" button on bottom right of widget

4.5.1 - Clicking this expands the widget to fullscreen mode (as depicted in Image 2)

4.5.2 - All other widgets snap to the corresponding red widget buttons on the left nav

4.5.3 - In Fullscreen Mode this button changes to read "Back"

4.5.4 - Clicking "Back" will bring the user to his last cockpit view (not the default view)

4.6 - Widget Tools (top right corner of each widget)

4.6.1 - The "X" Icon

4.6.1.1 - Clicking this button will remove the widget from the main content area, but will NOT remove its corresponding red widget button from the left nav

4.6.1.2 - In fullscreen mode, the "X" will perform the same function as the "Back" button (see 4.5.4 above)

4.6.2 The "Gears" Icon

4.6.2.1 - Clicking this will open the configuration tools for the widget.

4.6.2.2 - The options menu will slide open inside the widget itself (depicted in Image 4)

          4.6.2.3 - The options will vary depending on the functionality of the widget, but sample options should include:
              - choose how many items are shown
                - choose to show only unread messages
                - remove this widget from my cockpit

4.6.2.4 - Depending on the number of options available, vertical scrollbars may be used.

4.6.3 The "Arrow" Icon

4.6.3.1 - Clicking this will 'minimize' the widget to a header view only, (as depicted in image 3). Widgets below will move upward accordingly to rest below the minimized widget header. As stated in 4.2.2.3, a "double-wide" widget can only move upward as far as equal space in both columns exists - empty space will be inevitable in the case of the two columns being uneven.

4.6.3.2 - The Arrow switches to upward pointing when widget is minimized. Clicking this arrow expands widget back to full size, widgets below shift downward accordingly

5. Top of Page/Left Nav

5.1 - "Launch a Project", "Show Me How" and "Update Profile"

5.1.1 - These buttons all launch fullscreen widgets in main content area (as depicted in Image 2). These widgets have yet to be designed and can be represented by a blank fullscreen widget.

5.2 - "My Cockpit"

5.2.1 - This is a mini-widget on the left nav.

5.2.2 - It cannot be moved or removed from its place in the left nav.

5.2.3 - The options in this widget are not required to function as part of this competition, however the mini-widget should minimize and maximize in the left nav by clicking the arrow icon button in the mini-widget header.

5.2.3.1 - Its default view should be minimized (header only)

5.2.4 - Red widget buttons below should move upward/downward to snap to grid under the minimized or maximized "My Cockpit" widget

5.3 - Red Widget Buttons in left nav

5.3.1 - There is one button to represent every widget to which the user has "subscribed", whether currently viewable in the main content area or not. For example, if a widget has been closed using the "X" icon (see 4.5.1.1), the widget will disappear from the main content area, but will remain represented by a red widget button in the left nav. In order to fully remove a widget from the cockpit, a user would choose that option in the individual widget configuration (see 4.6.2.3).

5.3.2 - The button remains in it's place in the left nav when its corresponding widget is taken to fullscreen view.

5.3.3 - The order of the red widget buttons in the left nav from top to bottom should follow the order in which the widgets appear in the main content area from top to bottom. In the case of two single-column widgets side-by-side in the main content area, the red widget button representing the left-most widget would take the higher position in the left nav.

5.3.3.1 - As an example - as shown in Image 1, the order of the red widget buttons in the left nav during the current layout should be:

              1. My Projects
                2. Message Center
              3. RSS Feed
              4. New in the Catalog
              5. My Team

5.3.3.2 - In the case of a widget that has been closed in the main content area but remains in the left nav, the corresponding red widget button should take a position below the lowest button corresponding to a widget active in the main content area.

5.3.4 - Text on the red widget button should change to 'bold' as appropriate to indicate new information available in corresponding widget. Example: when new mail arrives into the "Message Center" widget, the "Message Center" red widget button in left nav will indicate as such

5.3.5 - Clicking on a widget button in left nav:

5.3.5.1 - Will add that widget to the main content area if that widget is not already shown in the main content area.

5.3.5.1.1 - Added widgets will snap to first available (top,left) "single wide" widget position, below "double wide" widget at top of main content area

5.3.5.2 - Will scroll page to the corresponding widget's position in the main content area if it is already on the page

5.3.5.3 - Will launch fullscreen version of the widget (Image 2) if fullscreen is the current view when button is clicked.

5.3.5.4 - Will perform the same function as "X" and "Back" (see above, 4.5.4 and 4.6.1.2), if the red widget button clicked corresponds to the widget currently in fullscreen view.

5.3.6 - Drag/Drop a Widget Button in left nav

5.3.6.1 - Widget button can be dragged into main content area, and widget in "single wide" view will snap to grid at position of the drop

5.3.6.2 - This function is not available if widget already exists in main content area, or if cockpit is in fullscreen view (Image 2), widget will simply snap back to left nav

6. Other Notes

6.1 - An extra set of configuration icons is depicted in the fullscreen widget view (Image 2). This is a mistake, only the upper right hand set is necessary.

DISCUSS THIS IN THE FORUMS