Inboxmenu
Calendarmenu
Projectsmenu
Teammenu

Layout

Barcelona utilizes JSF templating APIs and provides a main template.xhtml along with additional topbar, menu, footer fragments for the base layout. These xhtml files must be placed under WEB-INF folder and client pages should reference the template.xhtml as their template. Provided empty.xhtml is a sample content page using the main template.xhtml that defines "content" as the main ui:define placeholder. By default template defines 3 placeholders (page title, header content and actual content)to insert content and you can add more as per your requirements.

Sample page below uses the main template from Barcelona.

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
                
    <ui:define name="title">Test Page</ui:define>

    <ui:define name="content">
        Content goes here
    </ui:define>
</ui:composition>

Other required resources are the css, js and images that are located inside resources/barcelona-layout folder, simply copy the barcelona-layout folder to your %WEB-APP-FOLDER%/resources folder so that final path would be %WEB-APP-FOLDER%/resources/barcelona-layout/. Please refer to demo app or maven project of the demo app as the reference.

Theme

Barcelona provides 10 PrimeFaces themes out of the box, setup of a theme simple as including the theme jar in your classpath and defining primefaces.THEME context parameter in web.xml such as "primefaces-Barcelona-green". Full list of available themes are;

  • primefaces-barcelona-blue
  • primefaces-barcelona-blue-grey
  • primefaces-barcelona-cyan
  • primefaces-barcelona-dark-blue
  • primefaces-barcelona-dark-green
  • primefaces-barcelona-deep-purple
  • primefaces-barcelona-green
  • primefaces-barcelona-indigo
  • primefaces-barcelona-light-blue
  • primefaces-barcelona-teal

A custom theme can be developed by the following steps.

  • Choose a custom theme name such as primefaces-barcelona-myown.
  • Create a folder named primefaces-barcelona-myown and place an empty theme.scss inside
  • Copy the sass folder from the distribution to your application.
  • Define the variables listed below and import the /sass/theme/_theme.scss file.
  • Build the scss to generate css
  • Set primefaces.THEME context parameter as barcelona-myown
  • Either bundle the css in a jar file or serve from webapp/resources/primefaces-barcelona-myown folder

Here are the variables required to create a theme, you may need to change the last line according to the relative path of the sass folder in your application.

$primaryColor: #1976d2;
$primaryDarkColor: #0D47A1;
$primaryLightColor: #2196F3;
$primaryTextColor: #FFFFFF;
$accentColor: #FFC107;
$accentDarkColor: #FFA000;
$accentLightColor: #FFECB3;
$accentTextColor: #000000;

@import '../sass/theme/_theme';

An example sass command to compile the css would be;

sass src/main/webapp/resources/primefaces-barcelona-myown/theme.scss src/main/webapp/resources/primefaces-barcelona-myown/theme.css  --sourcemap=none

Watch mode is handy to avoid compiling everytime when a change is made, instead use the following command so that sass generates the file whenever you make a customization. This builds all css files whenever a change is made to any scss file.

sass -w src/main/webapp/resources/ --sourcemap=none

Same can also be applied to layout itself;

  • Choose a layout name such as layout-myown.
  • Create an empty file named layout-myown.scss inside resources/barcelona-layout/css folder.
  • Define the variables listed below and import the /sass/layout/_layout.scss file.
  • Build the scss to generate css
  • Serve the css by importing it using a link tag or h:outputStylesheet.

Here are the variables required to create a layout, you may need to change the last line according to the relative path of the sass folder in your application.

$primaryColor:#607D8B;
$primaryLightColor:#90A4AE;
$primaryTextColor:#CFD8DC;
$primaryTextHoverColor:#B0BEC5;
$accentColor:#8BC34A;
$accentLightColor:#DCEDC8;
$accentTextColor:#ffffff;
$activeMenuItemTextColor:#8BC34A;
$darkActiveMenuItemTextColor:#8BC34A;
$darkMenuItemTextColor:#dee0e3;
$darkMenuItemInactiveTextColor:#757575;
$darkMenuItemHoverBgColor:#545454;
$darkSidemenuBgColor:#343434;
$darkMenuBgColor:#424242;

@import '../../sass/layout/_layout';

For both cases, several .scss files such as _layout.scss, _theme.scss or _variables.scss has to be present relative to your scss files, these are available inside the sass folder in the distribution.

In case you'd like to customize the structure not just the colors, the _variables.scss is where the structural variables (e.g. font size, paddings) for the layout are defined.

/* Common */
$fontSize:14px;
$fontFamily:"Roboto","Helvetica Neue",sans-serif;
$lineHeight:18px;
$textColor:#424242;
$textSecondaryColor:#757575;
$borderRadius:3px;
$dividerColor:#eaeaea;
$dividerLightColor:#f8f8f8;
$iconWidth:20px;
$iconHeight:20px;
$iconFontSize:20px;
$grayBgColor:#757575;
$hoverBgColor:#e8e8e8;
$hoverTextColor:#000000;

/* Layout */
$bodyBgColor:#fcfbfb;
$menuItemHoverBgColor:#e8e8e8;
$darkSidemenuBgColor:#343434;
$darkMenuBgColor:#424242;
$darkMenuItemTextColor:#dee0e3;
$darkMenuItemHoverBgColor:#545454;
$menuitemColor:#757575;
$footerBgColor:#ffffff;

/* Topbar */
$topbarSubmenuBgColor:#f7f7f7;
$topbarSubmenuItemHoverBgColor:#e3e3e3;

/******************************/
/*           THEME            */
/******************************/
$headerPadding:8px 14px;
$headerTextColor:#ffffff;

$contentPadding:8px 14px;
$contentBorderColor:#d8d8d8;
$contentBgColor:#ffffff;

$inputBorderColor:#bdbdbd;
$inputInvalidBorderColor:#e62a10;
$inputBgColor:#ffffff;
$inputErrorTextColor:#e62a10;
$inputHeaderPadding:6px 10px;

$buttonTextColor:#ffffff;

$listItemPadding:6px 10px;

$radioButtonBorderColor:#757575;
$checkboxBorderColor:#757575;

$errorMessageFontSize:11px;
$errorMessageIconFontSize:13px;

$dataTableRowBgColorEven:#f4f4f4;
$paginatorPadding:6px 10px;
$menuitemPadding:6px 10px;

Menu

Menu is a regular JSF component that supports PrimeFaces MenuModel API allowing both declarative and programmatic approaches. State is saved via a cookie and to remove it define a widgetVar to the menu and call PF('yourwidgetvar').clearMenuState(). To use the menu add the primefaces-barcelona-{version}.jar to your classpath and import the http://primefaces.org/barcelona namespace.

xmlns:pa="http://primefaces.org/barcelona">

<pa:tabMenu>
    <pa:tab icon="fa fa-cube" title="Features">
        <h:form id="menu-form">
            <pa:menu widgetVar="menu">
            </pa:menu>
        </h:Form>
    </pa:tab>
    <pa:tab icon="fa fa-inbox" title="Inbox">
    </pa:tab>
    <pa:tab icon="fa fa-calendar-o" title="Calendar">
    </pa:tab>
</pa:tabMenu>

Menu has 2 modes, inline and overlay. Layout wrapper element in template.xhtml is used to define which mode to use by adding specific classes. List below indicates the style classes for each mode.

  • Static: Default mode
  • Overlay: "layout-overlay-menu"

For example to create an overlay menu, the div element should be in following form;

<div class="layout-wrapper layout-overlay-menu">
    ...
</div>

RTL

RTL orintetation for the layout is enabled by adding "layout-rtl" to the main layout-wrapper element.

<div class="layout-wrapper layout-rtl">
    ...
</div>

Utilities

Barcelona provides various helper features such as material iconset compatible with PrimeFaces components and helper classes. Visit Utils page for details.

Ripple Effect

Various elements display a ripple element on mousedown event, if you prefer to remove this effect, simply remove the ripple.js and ripple.css files from template.xhtml.

Icons

Barcelona Layout uses font awesome icons for layout so enable font awesome support in PrimeFaces by setting primefaces.FONT_AWESOME context parameter in web.xml as true. If your PrimeFaces version does not have the font awesome integration, include the font-awesome manually in your application.

Grid CSS

Barcelona uses new PrimeFaces Grid CSS (ui-g-*) throughout the samples, we strongly suggest using Grid CSS as your layout framework as it is well tested and supported by PrimeFaces. Grid CSS is automatically included on newer versions however if your PrimeFaces version is older than 5.3.14, add the provided grid.css file under /barcelona-layout/css/ folder to your template manually.

Migration Guide

1.0 to 1.0.1

  • Update layout.js and layout css files
  • Replace theme jar with new jar
  • Update *MenuRenderer.java and *Menu.java