Patterns — Dataverse.org

Navbar ¶

The Navbar component from Bootstrap spans the top of the application and contains the logo/branding, aligned to the left, plus search form and links, aligned to the right.

When logged in, the account name is a dropdown menu, linking the user to account-specific content and the log out link.

<nav id="navbarFixed" class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <a href="#" onclick="return false;">
        <span class="navbar-brand"><i id="icon-dataverse" class="icon-dataverse"></i> Dataverse</span>
      </a>
    </div>
    <div class="collapse navbar-collapse" id="topNavBar">
      <ul class="nav navbar-nav navbar-right">
        <li>
          ...
        </li>
      </ul>
    </div>
  </div>
</nav>

The breadcrumbs are displayed under the header, and provide a trail of links for users to navigate the hierarchy of containing objects, from file to dataset to dataverse. It utilizes a JSF repeat component to iterate through the breadcrumbs.

Name of a Dataverse

>

Name of Another Dataverse

>

Title of Dataset

<div id="breadcrumbNavBlock" class="container" jsf:rendered="#{true}">
  <ui:repeat value="#{page.breadcrumbs}" var="breadcrumb" varStatus="status">
    <h:outputText value=" > " styleClass="breadcrumbCarrot" rendered="#{true}"/>
    <div class="breadcrumbBlock">
      ...
    </div>
  </ui:repeat>
</div>

Tables ¶

Most tables use the DataTable components from PrimeFaces and are styled using the Tables component from Bootstrap.

Dataset	Summary	Published
3.0	Files (Changed File Metadata: 1); View Details	March 8, 2017
2.0	Additional Citation Metadata: (1 Added); View Details	January 25, 2017
1.1	Additional Citation Metadata: (1 Added); View Details	October 25, 2016
1.0	This is the first published version.	September 19, 2016

<p:dataTable id="itemTable" styleClass="headerless-table margin-top" value="#{page.item}" var="item" widgetVar="itemTable">
  <p:column>
    ...
  </p:column>
</p:dataTable>

Forms ¶

Forms fulfill various functions across the site, but we try to style them consistently. We use the .form-horizontal layout, which uses .form-group to create a grid of rows for the labels and inputs. The consistent style of forms is maintained using the Forms component from Bootstrap. Form elements like the InputText component from PrimeFaces are kept looking clean and consistent across each page.

Username

Given Name

Family Name

Email

<div class="form-horizontal">
  <div class="form-group">
    <label for="userNameEmail" class="col-sm-3 control-label">
      <span data-toggle="tooltip" data-placement="auto right" class="tooltiplabel text-info" data-original-title="Between 2-60 characters, and can use &quot;a-z&quot;, &quot;0-9&quot;, &quot;_&quot; for your username.">
        Username <span class="glyphicon glyphicon-asterisk text-danger"></span>
      </span>
    </label>
    <div class="col-sm-4">
      <input name="userName" type="text" value="" tabindex="1" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all ui-state-disabled form-control" role="textbox" aria-disabled="true" aria-readonly="false">
    </div>
  </div>
</div>

Buttons ¶

There are various types of buttons for various actions, so we have many components to use, including the CommandButton component and CommandLink component from PrimeFaces, as well as the basic JSF Link component and OutputLink component. Those are styled using the Buttons component, Button Groups component and Buttons Dropdowns component from Bootstrap.

Action Buttons ¶

For action buttons on a page, we include an icon and text label. Action buttons are generally aligned to the right side of the page.

<div class="btn-group" jsf:rendered="#{true}">
  <button type="button" id="editDataSet" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <span class="glyphicon glyphicon-pencil"/> Edit <span class="caret"></span>
  </button>
  <ul class="dropdown-menu pull-right text-left" role="menu">
    <li>
      <h:outputLink> ... </h:outputLink>
    </li>
    <li class="dropdown-submenu pull-left">
      <a tabindex="-1" href="#">Option</a>
      <ul class="dropdown-menu">
        <li>
          <h:link> ... </h:link>
        </li>
        <li>
          <h:link> ... </h:link>
        </li>
      </ul>
    </li>
    ...
  </ul>
</div>

Form Buttons ¶

Form buttons typically appear at the bottom of a form, aligned to the left. They do not have icons, just text labels.

<div class="button-block">
  <p:commandButton id="save" styleClass="btn btn-default" value="#{bundle.saveChanges}" action="#{page.save}" update="@form,:messagePanel" />
  <p:commandButton id="cancel" styleClass="btn btn-default" value="#{bundle.cancel}" action="#{page.cancel}" process="@this" update="@form">
    <p:resetInput target="@form" />
  </p:commandButton>
</div>

Icon-Only Buttons ¶

There are a few places where we use icon-only buttons with no text label. For these buttons, we do utilize tooltips that display on hover, containing a text label.

We use the style class .no-text with the .glyphicon class to fix spacing issues from margins and padding applied to buttons with text labels.

<p:commandLink styleClass="btn btn-default btn-sm bootstrap-button-tooltip" title="#{bundle.add}" actionListener="#{Page.add(valCount.index + 1)}">
  <h:outputText styleClass="glyphicon glyphicon-plus no-text"/>
</p:commandLink>
<p:commandLink styleClass="btn btn-default btn-sm bootstrap-button-tooltip" title="#{bundle.delete}" actionListener="#{Page.remove(valCount.index)}">
  <h:outputText styleClass="glyphicon glyphicon-minus no-text"/>
</p:commandLink>

Pagination ¶

We use the Pagination component from Bootstrap for paging through search results.

<ul class="pagination">
  <li class="#{include.page == '1' ? 'disabled' : ''}">
    <h:outputLink value="#{page.page}">
      <h:outputText value="&#171;"/>
      ...
    </h:outputLink>
  </li>
  <li class="#{include.page == '1' ? 'disabled' : ''}">
    <h:outputLink value="#{page.page}">
      <h:outputText value="&lt; #{bundle.previous}"/>
      ...
    </h:outputLink>
  </li>
  ...
  <li class="#{include.page == include.totalPages ? 'disabled' : ''}">
    <h:outputLink value="#{page.page}">
      <h:outputText value="#{bundle.next} &gt;"/>
      ...
    </h:outputLink>
  </li>
  <li class="#{include.page == include.totalPages ? 'disabled' : ''}">
    <h:outputLink value="#{page.page}">
      <h:outputText value="&#187;"/>
      ...
    </h:outputLink>
  </li>
</ul>

Labels ¶

The Labels component from Bootstrap is used for publication status (DRAFT, In Review, Unpublished, Deaccessioned), and Dataset version, as well as Tabular Data Tags (Survey, Time Series, Panel, Event, Genomics, Network, Geospatial).

    Version 2.0
    DRAFT
    In Review
    Geospatial
    Unpublished
    Deaccessioned

  

<span class="label label-default">Version 2.0</span>
<span class="label label-primary">DRAFT</span>
<span class="label label-success">In Review</span>
<span class="label label-info">Geospatial</span>
<span class="label label-warning">Unpublished</span>
<span class="label label-danger">Deaccessioned</span>

Alerts ¶

For our help/information, success, warning, and error message blocks we use a custom built UI component based on the Alerts component from Bootstrap.

Edit Dataset Metadata - Add more metadata about this dataset to help others easily find it.

Success! – The metadata for this dataset has been updated.

Error – The username, email address, or password you entered is invalid. Need assistance accessing your account? If you believe this is an error, please contact Root Support for assistance.

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

Images ¶

For images, we use the GraphicImage component from PrimeFaces, or the basic JSF GraphicImage component.

To display images in a responsive way, they are styled with .img-responsive, an Images CSS class from Bootstrap.

<p:graphicImage styleClass="img-responsive" value="#{Page.imageId}?imageThumb=400" />

Panels ¶

The most common of our containers, the Panels component from Bootstrap is used to add a border and padding around sections of content like metadata blocks. Displayed with a header and/or footer, it can also be used with the Collapse plugin from Bootstrap.

              Basic panel example
          
                  Panel Heading  
              
                                  Label
                              
                          Value

                                  Label
                              
                          Value

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

<div class="panel panel-default">
  <div data-toggle="collapse" data-target="#panelCollapse0" class="panel-heading">
    Panel Heading &#160;<span class="glyphicon glyphicon-chevron-up"/>
  </div>
  <div id="panelCollapse0" class="panel-body form-horizontal collapse in">
    <div class="form-group">
      <label class="col-sm-4 control-label">
        <span data-toggle="tooltip" data-placement="auto right" class="tooltiplabel text-info" data-original-title="Label description.">
          Label
        </span>
      </label>
      <div class="col-sm-6">
        Value
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-4 control-label">
        <span data-toggle="tooltip" data-placement="auto right" class="tooltiplabel text-info" data-original-title="Label description.">
          Label
        </span>
      </label>
      <div class="col-sm-6">
        Value
      </div>
    </div>
  </div>
</div>

Tabs ¶

Tabs are used to provide content panes on a page that allow the user to view different sections of content without navigating to a different page.

We use the TabView component from PrimeFaces, which is styled using the Tab component from Bootstrap.

<p:tabView id="tabView" widgetVar="content" activeIndex="#{Page.selectedTabIndex}">
  <p:ajax event="tabChange" listener="#{Page.tabChanged}" update="@this" />
  <p:tab id="dataTab" title="#{bundle.files}">
      ...
  </p:tab>
  ...
</p:tabView>

Modals ¶

Modals are dialog prompts that act as popup overlays, but don’t create a new browser window. We use them for confirmation on a delete to make sure the user is aware of the consequences of their actions. We also use them to allow users to execute simple actions on a page without requiring them to navigate to and from a separate page.

Buttons usually provide the UI prompt. A user clicks the button, which then opens a Dialog component or Confirm Dialog component from PrimeFaces that displays the modal with the necessary information and actions to take.

The modal is styled using the Modal component from Bootstrap, for a popup window that prompts a user for information, with overlay and a backdrop, then header, content, and buttons. We can use style classes from Bootstrap for large (.bs-example-modal-lg) and small (.bs-example-modal-sm) width options.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Patterns¶