Components

Take your time to generate consistent elements.

Overview

Components are used extensively throughout the NetDimensions Talent Suite. The purpose of components is to provide a consistent look and feel of html elements across the application. A component usually consists of one or more html elements with specific styles. Developers should always use components to create elements on the screen for consistent presentation.

Actions

Users should be able to see the tools icon and know immediately that actions can be performed on the respective object. Clicking on the tools icon should present a drop down menu indicating the specific actions.

  1. Use ComponentDropDownButton and ComponentActionItem for the tools icon and menu items respectively.
  2. The "action" can be in the form of an <a> as the ComponentActionItem label or by specifying a javascript function.
  3. If the action will modify data, ensure the request is a POST.
  4. Do not use non standard attributes.
  5. If using a javascript function to capture the action, remember to use name spacing.
  6. Visually, position the tools icon to the left of the object that it belongs to.
  7. If the tools button is in a table column, the column width can be styled by ensuring <th> and <td> elements have class="action_column"
Header 1
Content

Create Button

All buttons for creating a new object should be located to the top right of the screen inside a toolbar. By applying this consistently across the application, users will naturally look to the top right of the screen when wanting to create a new object, even for screens that they have never seen before.

  1. Use ComponentButton.imageTextButtonWithId() and add a click event handler (use ID's to aid QA with QTP scripts)
  2. Wrap the button in a ComponentToolbar
  3. Use ComponentIcon.PLUS for the button icon
  4. Rename the button to "Create {0}" for consistency

Filters

Data presented in the UI can typically be filtered to enable users to focus on subsets of the data. Such forms should be styled consistently across the application and be immediately identifiable as a mechanism to reduce the amount of data on the screen.

  1. Instantiate ComponentFilterForm object based on existing form with hidden elements
  2. Add visual elements to the ComponentFilterForm using one of the add() methods
  3. Call ComponentFilterForm.addClearDiv() before visual elements that you would like to appear on a new line
  4. Remove any existing buttons - the ComponentFilterForm will add the "Filter" button
  5. Make sure it works for IE7

Definition Lists

A list of definitions should be structured in a <dl> and not a <table> as is often the case. The <dl> element allows brevity and a structure that is semantically more correct.

  1. Instantiate a ComponentDefinitionList object
  2. Add the term-definition pairs to the object
Job Profile Reference Code:
Interaction_Designer
Job Profile Name:
Interaction Designer
Job Profile Catalog:
Design

Accordions

Accordions are used to group elements into sections and give the ability to expand/collapse each section.

  1. Instantiate a ComponentAccordion object
  2. Construct a content div and add it to the object
  3. To collapse all accordions except for the first one, add the following javascript to the page js
    $(document).ready(function(){
    	netd.component.collapseAllAccordion();
    	netd.component.expandAccordion('.netd-accordion:first');
    });
    						

Header 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut mollis metus. Cras pharetra, purus sed semper adipiscing, ante metus sodales diam, vel eleifend magna mauris vel magna. Proin congue tellus magna, a commodo nisl hendrerit id. Curabitur quis orci massa. Nam sapien elit, rutrum non sodales blandit, consequat in metus. Morbi ornare id nulla non pretium. Mauris quis consequat purus. Nulla sed purus eu elit dictum dignissim. Ut lorem purus, varius at turpis vel, ornare tincidunt ligula. Sed ullamcorper quam sed lacus sodales, eget auctor nulla vehicula. Mauris adipiscing aliquet quam, eu egestas neque. Nulla ac diam vel est auctor mattis. Duis accumsan fermentum arcu vel suscipit. Aliquam id leo sem. Pellentesque mollis turpis vel turpis viverra, in vehicula urna mattis.

Header 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut mollis metus. Cras pharetra, purus sed semper adipiscing, ante metus sodales diam, vel eleifend magna mauris vel magna. Proin congue tellus magna, a commodo nisl hendrerit id. Curabitur quis orci massa. Nam sapien elit, rutrum non sodales blandit, consequat in metus. Morbi ornare id nulla non pretium. Mauris quis consequat purus. Nulla sed purus eu elit dictum dignissim. Ut lorem purus, varius at turpis vel, ornare tincidunt ligula. Sed ullamcorper quam sed lacus sodales, eget auctor nulla vehicula. Mauris adipiscing aliquet quam, eu egestas neque. Nulla ac diam vel est auctor mattis. Duis accumsan fermentum arcu vel suscipit. Aliquam id leo sem. Pellentesque mollis turpis vel turpis viverra, in vehicula urna mattis.

Tables

Tables within the Netdimensions Talent Suites are built using components. All tables generated by the component will automatically have the right header, body html structure and alternate row color.

  1. Instantiate a ComponentTable object
  2. Pass it a list of ComponentColumnDelegate
  3. ComponentColumnDelegate object is used to render the header cell column and row cell content
  4. ComponentTable will automatically display "There are no items to display" message when there are no table content. To override the default message, use ComponentTable.setNoItemMessage(String, Object...)
Header 1 Header 2
Content Content
Content Content
Content Content
Content Content

Table with row contents

Header 1 Header 2
There are no items to display.

Table with no content

Table Pagination

Pagination is used extensively with tables within the Talent Suite application. It gives users the ability to control the amount of data displayed on the screen.

  1. Extends the Paginator class and implement pageContent method
  2. For consistency, the number of records and navigator area should be appended to the top and bottom of the table
  3. Also display the "Results per Page" selector
Showing: 1 - 5 of 20
Header 1 Header 2 Header 3
Content Content Content
Content Content Content
Content Content Content
Content Content Content
Content Content Content
Content Content Content
Content Content Content
Content Content Content
Content Content Content
Content Content Content
Showing: 1 - 5 of 20

Checkboxes

There are many instances where we require the ability to "Check All" checkboxes on the screen. This functionality is widely used across the application so in order to centralize this, a ComponentCheckAllCheckBox is introduced to give developers an easy way to include "Check All" functionality without needing to write javascripts associated with it.

  1. Instantiate a ComponentCheckAllCheckBox object and give the name of the checkbox within the same group
  2. Add a checkbox onto the screen with same group name
  3. The checkboxes will have javascript automatically bind to them to provide a consistent "Check All" functionality across the system
Header 2 Header 3
Content Content
Content Content
Content Content

Multi-Select Dropdown

We have introduced a new way of displaying multiple selectable values on the UI using the multi-select dropdown. Instead of traditional lists allowing multi-select or displaying multiple checkboxes on screen, the selectable values are now hidden in a little popup div that will be shown when the textfield is clicked.

  1. Instantiate a ComponentMultiSelectDropdown object and give it a list of options
  2. Selected values will be appended into the TextField, seperated by comma
  3. If all values are selected, "All" will be displayed in the TextField

Tooltips

Sometimes the UI calls for more details upon mouseovering an element on the screen. This can be achieved using ComponentToolTip. The HTML generated from the ComponentToolTip will automatically have mouseover event bind to it.

  1. Instantiate a ComponentToolTip object and pass it a unique id and the source of mouseover
  2. Add the content of the tooltip using one of the pre-defined specified methods
  3. Javascript library "Just Another Tooltip" needs to be added to the view for the tooltip to work - through jQuery.justAnotherTooltip() method.
Text Label
Tooltip for when mouseover

Tree

Hierarchical data structure can be displayed as a Tree within the Talent Suite application. An example of this would be the Organizational Structures or the Catalog Structure which can be represented using a tree. The ComponentTree has been introduced to provide a centralized area to generate/style a tree structure within the system.

  1. Instantiate a ComponentTree object
  2. Add ComponentTreeNode objects to the ComponentTree
  3. A node may contain another node to form the tree hierarchy
  4. Developers can optionally add "dropdown" options to the tree which represents actions that can be performed on right-click at each tree node
  5. Remember to add "ComponentTree.js" to your View for the context menu to work
  • Top1
    • Level1_1
    • Level1_2
  • Top2
  • Top3
  • Top4

Icon

Module Type Icon

There are 15 module types within the Talent Suite application. Each of them has a unique icon. The mtIconSpan has been introduced to generate/style a module type icon with the system.

Use <span class="netd-icon icon-mt-*"></span> to generate a module type icon.

  • Use LearningType.mtIconSpan(final Locale locale, final String className, final bealoon withTitle) to generate a module icon.
  • Assign beanloon withTitle false, will return a module type icon, for example <span class="netd-icon icon-mt-online"></span>
  • Assign beanloon withTitle true, will return a module type icon with its text name, for example <span class="module-type"><span class="netd-icon icon-mt-online"></span>Online</span>
  • final String className could be used for customization. Just assign className the customized class name defined in CSS. For example <span class="netd-icon ing-skin icon-mt-online"></span>

Online

final Span icon = learningType.mtIconSpan(vc.getLocale(), "", false);
                

General Developer Tips

  1. Ensure jQuery is properly configured in the view:
    @Override
    public void configureJQuery(JQuery jQuery, ViewContext vc) {
        jQuery.ui();
    }
                        
  2. Introduce a .js file for the 'functional area' if it doesn't have one already, remember to use name-spacing.
  3. Make sure the screen works for IE7 and frame-based skin