Gazelle elements of style

Gazelle-assets provides some xhtml templates styled and ready to use.

Getting started

Dans intellij idea activez l'option: "Enable formatter markers in comments" située dans la rubrique Editor -> Code style

News

2/10/2015: Ajax filters Update your method: updateSelect()

Maven

First add the following code in the project-war/pom.xml 
<dependency>
    <groupId>net.ihe.gazelle</groupId>
    <artifactId>gazelle-assets</artifactId>
    <version>2.0.0-SNAPSHOT</version>
    <type>war</type>
</dependency>

Web.xml

To fully enjoy the new style you need to desactivate richFaces (old) style.

Edit your web.xml file and change the org.richfaces.skin value to plain

<context-param>
    <param-name>org.richfaces.skin</param-name>
    <param-value>plain</param-value>
</context-param>
<context-param>
    <param-name>org.richfaces.enableControlSkinning</param-name>
    <param-value>false</param-value>
</context-param>
<context-param>
    <param-name>org.richfaces.enableControlSkinningClasses</param-name>
    <param-value>false</param-value>
</context-param>

Xhtml

Second include the stylesheet and javascript 
<h:outputStylesheet library="stylesheet" name="gazelle-theme.css"/>
<h:outputScript library="jscript" name="jquery_1_11_2.min.js"/>
<h:outputScript library="jscript" name="bootstrap.min.js"/>

Warning

Jquery imported by richfaces (very old version) may conflict with Jquery imported by Bootstrap.

If you experience strange behaviors with javascript boostrap components or richfaces javascript actions it could be because of it.

You can use this snippet as a workaround: 
<script type="text/javascript">
    jq162 = jQuery.noConflict(true);
</script>

Then, use jq162('#id') instead of $('#id') to select elements with jquery.

Optional

DropDown menu: 
<h:outputStylesheet library="stylesheet" name="bootstrap_dropdown.css"/>
Color chooser: 
<h:outputStylesheet library="stylesheet" name="spectrum.css"/>
<h:outputScript library="jscript" name="spectrum.js"/>

gri namespace

If you want to use gri components (gri:panel, gri:popupPanel, etc) you need to include the namespace gri into the root of your xhtml page : namespace : xmlns:gri="http://java.sun.com/jsf/composite/gri"

Page template

            <!DOCTYPE html>
<html xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html" xmlns:g="http://www.ihe.net/gazelle"
      xmlns:a4j="http://richfaces.org/a4j" xmlns:s="http://jboss.org/schema/seam/taglib"
      xmlns:rich="http://richfaces.org/rich" xmlns:c="http://java.sun.com/jstl/core"
      xmlns:f="http://java.sun.com/jsf/core" xmlns="http://www.w3.org/1999/xhtml">
<h:head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <h:outputStylesheet library="stylesheet" name="gazelle-theme.css"/>
    <h:outputStylesheet library="stylesheet" name="status.css"/>
    <title>${pageNameTitle}</title>
    <ui:insert name="header"/>
    <h:outputScript library="jscript" name="gazelleTools.js"/>
    <h:outputScript library="jscript" name="jquery_1_11_2.min.js"/>
    <h:outputScript library="jscript" name="bootstrap.min.js"/>
</h:head>
<h:body>
    <f:view>
        <ui:include src="/ajaxStatus.xhtml"/>
        <ui:include src="/layout/menu/_menu.xhtml"/>

            <!-- gzl-container used to place and center content -->

        <div id="gzl-container">
            <div class="row">
                <div class="center-block gazelle-alert">
                    <s:decorate id="gazelle-messages">
                        <rich:messages globalOnly="true" escape="false"
                                       styleClass="fade-out-up text-center"
                                       infoClass="alert gzl-alert-green animated-fast"
                                       warnClass="alert gzl-alert-orange animated-slow"
                                       errorClass="alert gzl-alert-red animated-slow">
                        </rich:messages>
                    </s:decorate>
                </div>
            </div>
            <ui:insert name="body"/>
        </div>
        <ui:include src="footer/footer.xhtml"/>
        <ui:include src="_scrollup.xhtml"/>
    </f:view>
</h:body>
<h:outputScript library="jscript" name="ie10-viewport-bug-workaround.js"/>
</html>

Change menu color

To change the menu color include <h:outputScript library="jscript" name="applicationColor.js"/> in your template

Call at the top of your body

<script type="text/javascript">
    setApplicationColor('#5522ff');
</script>

Alert

Include the alert stylesheet.

<h:outputStylesheet library="stylesheet" name="alert.css"/>

And add the following block inside of #gzl-container div.

Bienvenue, jlabbe 
<div class="row">
    <div class="center-block gazelle-alert">
        <s:decorate id="gazelle-messages">
            <rich:messages globalOnly="true" escape="false"
                           styleClass="fade-out-up text-center"
                           infoClass="alert gzl-alert-green animated-fast"
                           warnClass="alert gzl-alert-orange animated-slow"
                           errorClass="alert gzl-alert-red animated-slow">
            </rich:messages>
        </s:decorate>
    </div>
</div>

To use it please update gazelle-tools and update faces-config.xml

Add xmlns:cdk="http://jboss.org/schema/richfaces/cdk/extensions" and the renderer 


<faces-config version="2.1"
          xmlns="http://java.sun.com/xml/ns/javaee"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xmlns:cdk="http://jboss.org/schema/richfaces/cdk/extensions"
          xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_1.xsd">
    <render-kit>
    ...
        <renderer>
            <component-family>javax.faces.Messages</component-family>
            <renderer-type>org.richfaces.MessagesRenderer</renderer-type>
            <renderer-class>net.ihe.gazelle.common.bootstrapComponent.HtmlMessagesRenderer</renderer-class>
            <renderer-extension>
                <cdk:renders-children>false</cdk:renders-children>
            </renderer-extension>
        </renderer>
    ...
    </render-kit>
</faces-config>

<ui:decorate template="_menu_template.xhtml">
    <ui:define name="menu_title">
        <h:outputText styleClass="navbar-brand" value="Brand"/>
    </ui:define>
    <ui:define name="menu_logo">
        <h:outputText value="Logo"/>
    </ui:define>
    <ui:define name="menu_navigation_links">
        <li><a href="#">
            <h:outputText value="Nav link"/>
        </a>
        </li>
    </ui:define>
    <ui:define name="menu_search_box">
        <h:outputText value="    search box"/>
    </ui:define>
    <ui:define name="menu_user_actions_right">
        <li><a href="#">
            <h:outputText value="user related actions"/>
        </a>
        </li>
    </ui:define>
</ui:decorate>

gri:menu

Another way to define a menu for the same rendering is to use gri:menu and gri:menuItem.
Here is an example of use of these components : 

<gri:menu name="Brand" homeURL="/Brand/">
	<f:facet name="logo">
		<h:outputText value="logo"/>
	</f:facet>

	<gri:menuItem>
		<h:outputText value="Nav menu" />

		<gri:menuItem>
			<h:outputText value="Nav sub-menu" />

			<gri:menuItem>
				<h:outputText value="Nav sub-sub-menu 1" />
			</gri:menuItem>

			<gri:menuItem>
				<h:outputText value="Nav sub-sub-menu 2" />
			</gri:menuItem>
		</gri:menuItem>
	</gri:menuItem>

	<gri:menuItem url="/Brand/usageStatistics.seam">
		<h:outputText value="Statistics" />
	</gri:menuItem>

	<f:facet name="right">
		<gri:menuItem url="/Brand/usageStatistics2.seam">
			<h:outputText value="Statistics-bis" />
		</gri:menuItem>
		<ui:include src="login.xhtml"/>
	</f:facet>

</gri:menu>

Each of gri:menu and gri:menuItem support a list of attributes and facets :

Attributes and Facets for gri:menu
Attribute required default Type Description
logo false Facet add a logo in the top right cornet (an icon, etc)
right false Facet specify a right level menu (like Login/Logout, admin, etc)
name false java.lanf.String specify the name of the application. Will be shown in the top left corner.
homeURL false java.lanf.String specify the URL to the home page of the application. Will be used when you click on the name of the application in the top left corner.
rendered false true javax.el.ValueExpression
(evaluated as boolean) 		rendered attribute

Attributes and Facets for gri:menuItem
Attribute required default Type Description
url false String The URL that will be opened by clicking on the menu
target false String Specify if we want to open in another panel (example: target="_blank")
icon false String Specify the icon of the menu
rendered false true javax.el.ValueExpression
(evaluated as boolean) 		rendered attribute
gri:menuItem supports to have children gri:menuItem, and interprets them as sub-menu of the current menu.

Navigation links

Pure html

Please follow bootstrap documentation

Generated with java

Gazelle assets provides a template for generated menu: _generate_navigation_links.xhtml

<ui:include src="_generate_navigation_links.xhtml">
    <ui:param name="menu" value="#{applicationManager.getMenu()}"/>
    <ui:param name="url_base_name" value="#{applicationPreferenceManager.getApplicationUrlBaseName()}"/>
</ui:include>

This generator can be used with Font-Awesome icons instead of images. To do so, set the Font-Awesome icon style class as image path in Pages.java, then use the icon template /layout/menu/_fontawesome_icon_template.xhtml: 

<ui:include src="_generate_navigation_links.xhtml">
    <ui:param name="menu" value="#{applicationManager.getMenu()}"/>
    <ui:param name="url_base_name" value="#{applicationPreferenceManager.getApplicationUrlBaseName()}"/>
    <ui:param name="icon_template" value="/layout/menu/_fontawesome_icon_template.xhtml"/>
</ui:include>

The icon_template parameter is optional, default value is /layout/menu/_image_icon_template.xhtml 


    <ui:decorate template="_default_footer_template.xhtml">
        <ui:param name="applicationName" value="Super application"/>
        <ui:param name="version" value="${build.version}"/>
        <ui:param name="buildProfiles" value="${build.maven.execution.profiles.active}"/>
        <ui:param name="buildDate" value="${build.date.full}"/>
        <ui:param name="buildYear" value="${build.year}"/>
        <ui:param name="releaseNoteUrl" value="release note url"/>
        <ui:param name="documentationUrl" value="doc url"/>
        <ui:param name="appAdminTitle" value="Admin title: IHE EU Manager or else"/>
        <ui:param name="appAdminEmail" value="email address"/>
        <ui:param name="appAdminName" value="Admin name"/>
        <ui:param name="issueTrackerUrl" value="issue tracker url"/>
        <ui:param name="displayApiLink" value="true"/>
    </ui:decorate>

Icons

Classic icons

Image library has been moved into /resources. Use in xhtml to invoke images :

<h:graphicImage library="img" name="myImage.png"/>

or

<h:graphicImage value="/resources/img/myImage.png"/>

Font Awesome

Font awesome is a wide set of font flat icons.

Then use <i> or <span> element with the class attribute to insert an icon.

<button class="btn btn-default">
    <span class="fa fa-question-circle"></span><h:outputText value="Help"/>
</button>

Browse the whole icon set here.

To change font-awesome icons color, use bootstrap style classes :

  • normal (no style class)
  • gzl-text-blue
  • gzl-text-green
  • gzl-text-orange
  • gzl-text-red
<ul class="list-unstyled">
    <li><span class="fa fa-exclamation-triangle"></span>normal (no style class)</li>
    <li><span class="fa fa-exclamation-triangle gzl-text-blue"></span>gzl-text-blue</li>
    <li><span class="fa fa-exclamation-triangle gzl-text-green"></span>gzl-text-green</li>
    <li><span class="fa fa-exclamation-triangle gzl-text-orange"></span>gzl-text-orange</li>
    <li><span class="fa fa-exclamation-triangle gzl-text-red"></span>gzl-text-red</li>
</ul>

Those font color style classes can also be applied on text.

To force pointer cursor on icons add: gzl-icon-action class to icons

Icon example table

Action Image Font
Icon Location Icon Style class
Add /resources/img/add.gif gzl-icon-plus
Ajax loader resources/loading/ajax-loader.gif gzl-icon-ajax-loading
Back gzl-icon-back
Ban gzl-icon-ban
Bug gzl-icon-bug
Calendar gzl-icon-calendar
Cancel /resources/img/icons64/button_cancel.gif gzl-icon-times-circle
Collapse gzl-icon-collapse
Comment gzl-icon-comment-o
Configure /resources/img/icons22/configure.gif gzl-icon-gears
Copy/Duplicate /resources/img/editcopy.gif gzl-icon-files-o
Database /resources/img/icons22/db_add.png gzl-icon-database
Delete /resources/img/icons64/deleteRedJR.gif gzl-icon-trash-o
Delete /resources/img/icons22/deleteJR.gif" gzl-icon-times-blue
Documentation /resources/img/icons22/doc.png gzl-icon-book
Down gzl-icon-down
Download /resources/img/icons64/bottomJR.gif gzl-icon-download
Edit /resources/img/icons64/edit.gif gzl-icon-pencil
Email /resources/img/icons22/email.gif gzl-icon-email
Empty/Erase gzl-icon-eraser
Excel /resources/img/xls.gif gzl-icon-file-excel-o
Execute /resources/img/run.gif gzl-icon-play-blue
Expand gzl-icon-expand
Failed /resources/img/status/failed.gif gzl-icon-times
Filter /resources/img/filter.png gzl-icon-filter
Folder /resources/img/icons22/resources.png gzl-icon-folder-open
Help resources/img/icons22/helpJR.gif gzl-icon-question-circle
Hide resources/img/folder_50_50.png gzl-icon-eye-slash
Info circle gzl-icon-info-circle
Internet (world) resources/img/icons22/Crystal_Clear_app_internet.gif gzl-icon-globe
Institution gzl-icon-institution
Link /resources/img/link.gif gzl-icon-link
Load /resources/img/load64.gif gzl-icon-arrow-circle-down
Logs/History /resources/img/logs.png gzl-icon-history
Merge /resources/img/merge.png gzl-icon-compress
Patients /resources/img/status/patients.gif gzl-icon-users
Passed /resources/img/status/verified.gif gzl-icon-checked
Pdf gzl-icon-pdf
Preferences gzl-icon-preferences
Print /resources/img/printer.gif gzl-icon-print
Private or secure /resources/img/icons64/lock.gif gzl-icon-lock
Public gzl-icon-unlock
Random gzl-icon-random
Refresh gzl-icon-refresh
release /resources/img/release.gif gzl-icon-release
Remove /resources/img/icons64/remove.gif gzl-icon-minus
Repeat gzl-icon-repeat
Reset /resources/img/reset.png gzl-icon-undo
Register /resources/img/menu/document-edit.png gzl-icon-register
Restore /resources/img/icons22/restore.gif gzl-icon-undo
Run off /resources/img/runOff.gif gzl-icon-not-checked
Sample resources/img/icons22/sample.gif gzl-icon-sample
Save gzl-icon-save
Send gzl-icon-paper-plane
Share /resources/img/share_patient.gif gzl-icon-share-alt
Skip resources/img/skip.gif gzl-icon-forward
Skip off resources/img/skipOff.gif gzl-icon-forward-off
Start resources/img/powerOn.gif gzl-icon-play
Start off resources/img/launchOff.gif gzl-icon-play-black
Stop resources/img/powerOff.gif gzl-icon-stop
Statistics /resources/img/icons22/stats.png gzl-icon-pie-chart
Status blue resources/img/icons22/status_blue.gif gzl-icon-circle-blue
Status green resources/img/icons22/status_grass.gif gzl-icon-circle-green
Status purple resources/img/icons22/status_purple.gif gzl-icon-circle-purple
Status red resources/img/icons22/status_red.gif gzl-icon-circle-red
Suggest /resources/img/suggest.png gzl-icon-caret-down
System resources/img/icons22/systems.gif gzl-icon-system
Task gzl-icon-tasks
Text file gzl-icon-file-text-o
Up gzl-icon-up
Upload gzl-icon-upload
User gzl-icon-user
Users gzl-icon-users
View /resources/img/icons64/kfind.gif gzl-icon-search
Visible resources/img/folder_shared_50_50.png gzl-icon-eye
Warning resources/img/icons64/warning.gif gzl-icon-exclamation-triangle
Worklist gzl-icon-list
Xml gzl-icon-xml
Zoom in /resources/img/icons22/zoom-in.gif gzl-icon-zoom-in
Zoom out /resources/img/icons22/zoom-out.gif gzl-icon-zoom-out

Icon stack

You can stack icons to add meaning, for example: 
<span class="gzl-icon-stack">
  <i class="gzl-icon-globe gzl-icon-stack-1x"></i>
  <i class="gzl-icon-plus gzl-icon-stack-1x gzl-icon-stack-bottom-right"></i>
</span>
<span class="gzl-icon-stack">
    <i class="gzl-icon-user gzl-icon-stack-1x"></i>
    <i class="gzl-icon-ban gzl-icon-stack-1x text-danger gzl-icon-stack-bottom-right"></i>
</span>

Attach an action on an icon

The following example code shows how to link a bean call and a popup display on a font-awesome icon

<h:commandLink title="Click me !" action="#{actionBean.methodName(params)}"
        oncomplete="jq162('#iconPopup').modal('show');">
    <span class="fa fa-pencil"></span>
</h:commandLink>

Labels

Default Info Success Warning Error

You can also use

Unknown Skipped Info Passed Warning Failed

Note that those classes match PASSED, Passed, and passed (the same for the other styles)

<h:outputText value="Info" styleClass="gzl-label gzl-label-blue"/>
<h:outputText value="Success" styleClass="gzl-label gzl-label-green"/>
<h:outputText value="Warning" styleClass="gzl-label gzl-label-orange"/>
<h:outputText value="Error" styleClass="gzl-label gzl-label-red"/>
<h:outputText value="Unknown" styleClass="UNKNOWN"/>
    <h:outputText value="Skipped" styleClass="SKIPPED"/>
    <h:outputText value="Info" styleClass="Info"/>
<h:outputText value="PASSED" styleClass="passed"/>
<h:outputText value="WARNING" styleClass="WARNING"/>
<h:outputText value="ERROR" styleClass="Error"/>

Panel

A simple panel

Panel body 
<ui:decorate template="/layout/panels/_panel.xhtml">
    <h:outputText value="Panel body"/>
</ui:decorate>
<gri:panel>
    <h:outputText value="Panel body"/>
</gri:panel>

Panel with title

Panel title

Panel body 
<ui:decorate template="/layout/panels/_panel_title.xhtml">
    <ui:define name="panel_title">
        <h:outputText value="Panel title"/>
    </ui:define>
    <h:outputText value="Panel body"/>
</ui:decorate>
<gri:panel>
    <f:facet name="header">
        <h:outputText value="Panel title"/>
    </f:facet>
    <h:outputText value="Panel body"/>
</gri:panel>

Panel with footer

Panel body
Panel footer 
<ui:decorate template="/layout/panels/_panel_footer.xhtml">
    <h:outputText value="Panel body"/>
    <ui:define name="panel_footer">
        <h:outputText value="Panel footer"/>
    </ui:define>
</ui:decorate>
<gri:panel>
    <h:outputText value="Panel body"/>
     <f:facet name="footer">
        <h:outputText value="Panel footer"/>
    </f:facet>
</gri:panel>

Panel with title and footer

Panel title

Panel body
Panel footer 
<ui:decorate template="/layout/panels/_panel_title_footer.xhtml">
    <ui:define name="panel_title">
        <h:outputText value="Panel title"/>
    </ui:define>
    <h:outputText value="Panel body"/>
    <ui:define name="panel_footer">
        <h:outputText value="Panel footer"/>
    </ui:define>
</ui:decorate>
<gri:panel>
    <f:facet name="header">
        <h:outputText value="Panel title"/>
    </f:facet>
    <h:outputText value="Panel body"/>
     <f:facet name="footer">
        <h:outputText value="Panel footer"/>
    </f:facet>
</gri:panel>

Panel with id

Sometimes it is necessary to have an id to perform actions (such a render). So each panel template is derivated to a version with id. As example, the template /layout/panels/panel_title.xhtml become /layout/panels/_panel_title_id.xhtml. In those id versions, the declaration of the parameter panel_id is mandatory.

If you are using gri:panel, the attribute to use is pid

Panel title

Panel body 
<ui:decorate template="/layout/panels/_panel_title_id.xhtml">
    <ui:param name="panel_id" value="UploadTestsPanel"/>
    <ui:define name="panel_title">
        <h:outputText value="Panel title"/>
    </ui:define>
    <h:outputText value="Panel body"/>
</ui:decorate>
<gri:panel pid="UploadTestsPanel">
    <f:facet name="header">
        <h:outputText value="Panel title"/>
    </f:facet>
    <h:outputText value="Panel body"/>
</gri:panel>

Panel collapse

The panel is closed by default but can be opened by setting openByDefault to true. The parameter panel_id is mandatory.

Panel body 
<ui:decorate template="/layout/panels/_panel_collapse.xhtml">
    <ui:param name="panel_id" value="collapsed_panel"/>
    <ui:param name="openByDefault" value="false"/>
    <ui:define name="panel_title">
        <h:outputText value="Click me !"/>
    </ui:define>
    <h:outputText value="Panel body"/>
</ui:decorate>

Styling panels using param styleClass

Each panel template can be styled using bootstrap classes. Add the following parameters :

  • styleClass to add class to the overall panel
  • headingStyleClass to add class to the panel title
  • bodyStyleClass to add class to the panel body
  • footerStyleClass to add class to the panel footer

If you are using gri:panel, the attributes are respectively: styleClass, headerClass, bodyClass, footerClass

Panel title

Panel body
Panel footer 
<ui:decorate template="/layout/panels/_panel_title_footer.xhtml">
    <ui:param name="styleClass" value="panel-info"/>
    <ui:define name="panel_title">
        <h:outputText value="Panel title"/>
    </ui:define>
    <h:outputText value="Panel body"/>
    <ui:param name="footerStyleClass" value="text-right"/>
    <ui:define name="panel_footer">
        <h:outputText value="Panel footer"/>
    </ui:define>
</ui:decorate>
<gri:panel styleClass="panel-info" footerClass="text-right"/>
    <f:facet name="header">
         <h:outputText value="Panel title"/>
    </f:facet>
    <h:outputText value="Panel body"/>
    <f:facet name="footer">
         <h:outputText value="Panel footer"/>
    </f:facet>
</gri:panel>

Tabs

Tabs are strict bootstrap code. See more documentation here.

Here comes the content of the #home panel...
Here comes the content of the #profile panel
Here comes the content of the #messages panel 
<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
        <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>
    </li>
    <li role="presentation">
        <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>
    </li>
    <li role="presentation">
        <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a>
    </li>
</ul>

<div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">
        Here comes the content of the #home panel...
    </div>
    <div role="tabpanel" class="tab-pane" id="profile">
        Here comes the content of the #profile panel
    </div>
    <div role="tabpanel" class="tab-pane" id="messages">
        Here comes the content of the #messages panel
    </div>
</div>

Add a border and a padding arround the tab content using the Gazelle style class .tab-content-with-border.

Here comes the content of the #home panel...
Here comes the content of the #profile panel
Here comes the content of the #messages panel 
<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
        <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>
    </li>
    <li role="presentation">
        <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>
    </li>
    <li role="presentation">
        <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a>
    </li>
</ul>

<div class="tab-content tab-content-with-border">
    <div role="tabpanel" class="tab-pane active" id="home">
        Here comes the content of the #home panel...
    </div>
    <div role="tabpanel" class="tab-pane" id="profile">
        Here comes the content of the #profile panel
    </div>
    <div role="tabpanel" class="tab-pane" id="messages">
        Here comes the content of the #messages panel
    </div>
</div>

gri:tabPanel

Another way to define a tabPanel for the same rendering is to use gri:tabPanel and gri:tab.
Both examples before can be written like this :

Example 1

<gri:tabPanel>
   <gri:tab head="home">
      Here comes the content of the #home panel...
   </gri:tab>
   <gri:tab head="profile">
      Here comes the content of the #profile panel...
   </gri:tab>
   <gri:tab head="messages">
      Here comes the content of the #messages panel...
   </gri:tab>
</gri:tabPanel>
Example 2

<gri:tabPanel withBorder="true">
   <gri:tab head="home">
      Here comes the content of the #home panel...
   </gri:tab>
   <gri:tab head="profile">
      Here comes the content of the #profile panel...
   </gri:tab>
   <gri:tab head="messages">
      Here comes the content of the #messages panel...
   </gri:tab>
</gri:tabPanel>

Each of gri:tabPanel and gri:tab support a list of attributes :

Attributes for gri:tabPanel
Attribute required default Type Description
withBorder false false java.lang.Boolean add .tab-content-with-border style class
activeItem false first tab java.lang.String SHALL be equal to one of the id of the gri:tab. When specified, the first tab opened will be the one having the id equal to the activeItem attribute
rendered false true javax.el.ValueExpression
(evaluated as boolean)		 rendered attribute

Attributes for gri:tab
Attribute required default Type Description
head true java.lang.String The name of the tab in the header. It may be a translated reference (ie like #{messages['....']})
id false java.lang.String Will be used as the id of the component. If not specified an id is generated.
onclick false java.lang.String javascript executed when clicking on the header of the tab
rendered false true java.lang.String rendered attribute

Display

Simple display

First name: John

Surname: Smith

<s:decorate template="/layout/display/_display.xhtml">
    <ui:define name="label">#{messages['net.ihe.gazelle.assets.FirstName']}</ui:define>
    <h:outputText value="#{user.getFirstname()}"/>
</s:decorate>
<s:decorate template="/layout/display/_display.xhtml">
    <ui:define name="label">#{messages['net.ihe.gazelle.assets.Surname']}</ui:define>
    <h:outputText value="#{user.getSurname()}"/>
</s:decorate>

Data list display

Elements must be wrapped into a <dl>...</dl> container.

First name
John
Surname
Smith
<dl>
    <ui:decorate template="/layout/display/_data_list_item.xhtml">
        <ui:define name="label">#{messages['net.ihe.gazelle.assets.FirstName']}</ui:define>
        <h:outputText value="#{user.getFirstname()}"/>
    </ui:decorate>
    <ui:decorate template="/layout/display/_data_list_item.xhtml">
        <ui:define name="label">#{messages['net.ihe.gazelle.assets.Surname']}</ui:define>
        <h:outputText value="#{user.getSurname()}"/>
    </ui:decorate>
</dl>

Horizontal and aligned data list display

Elements must be wrapped into a <dl class="dl-horizontal">...</dl> container.

First name
John
Surname
Smith
<dl class="dl-horizontal">
    <ui:decorate template="/layout/display/_data_list_item.xhtml">
        <ui:define name="label">#{messages['net.ihe.gazelle.assets.FirstName']}</ui:define>
        <h:outputText value="#{user.getFirstname()}"/>
    </ui:decorate>
    <ui:decorate template="/layout/display/_data_list_item.xhtml">
        <ui:define name="label">#{messages['net.ihe.gazelle.assets.Surname']}</ui:define>
        <h:outputText value="#{user.getSurname()}"/>
    </ui:decorate>
</dl>

Styling data list

Parameters dt_styleClass and dd_styleClass can respectively be used to add style class on title or data.

As example, to display a text label in a data list, set the CSS class .gzl-dd-label on dd_styleClass to keep enough space around it.

Server name
TLSServer
Status
Running
Connection attempts
307
IP addresses
188.165.194.55 (ns312255.ovh.net)
<dl class="dl-horizontal">
    <ui:decorate template="/layout/display/_data_list_item.xhtml">
        <ui:define name="label">#{messages['net.ihe.gazelle.assets.ServerName']}</ui:define>
        <h:outputText value="#{server.getName()}"/>
    </ui:decorate>
    <ui:decorate template="/layout/display/_data_list_item.xhtml">
        <ui:define name="label">#{messages['net.ihe.gazelle.assets.Status']}</ui:define>
        <ui:param name="dd_styleClass" value="gzl-dd-label"/>
        <h:outputText value="#{server.getStatus()}" styleClass="gzl-label gzl-label-green"/>
    </ui:decorate>

    ...

</dl>

Form

Add styleClass="form-control" on the text inputs and use one of the following templates.

Simple form

<s:decorate template="/layout/form/_edit.xhtml">
    <ui:param name="id" value="nameInput"/>
    <ui:define name="label">Name</ui:define>
    <h:inputText id="nameInput" value="#{user.name}"
                 required="true" styleClass="form-control"/>
</s:decorate>

<s:decorate template="/layout/form/_edit.xhtml">
    <ui:param name="id" value="emailInput"/>
    <ui:define name="label">Name</ui:define>
    <h:inputText id="emailInput" value="#{user.email}"
                 required="true" styleClass="form-control"/>
</s:decorate>

<s:decorate template="/layout/form/_checkbox.xhtml">
    <h:selectBooleanCheckbox value="#{user.subscriber}"/>
    Subscribe newsletter
    <h:outputText styleClass="help-block"
                  value="Can be modified later in users preferences."/>
</s:decorate>

Inline form

Just wrap your inputs into <div class="form-inline">...</div>

<div class="form-inline">

    <ui:decorate template="/layout/form/_edit.xhtml">
        <ui:param name="id" value="nameInput"/>
        <ui:define name="label">Name</ui:define>
        <h:inputText id="nameInput" value="#{user.name}"
                     required="true" styleClass="form-control"/>
    </ui:decorate>

    <ui:decorate template="/layout/form/_edit.xhtml">
        <ui:param name="id" value="emailInput"/>
        <ui:define name="label">Name</ui:define>
        <h:inputText id="emailInput" value="#{user.email}"
                     required="true" styleClass="form-control"/>
    </ui:decorate>

    <ui:decorate template="/layout/form/_checkbox.xhtml">
        <h:selectBooleanCheckbox value="#{user.subscriber}"/>
        Subscribe newsletter
    </ui:decorate>

</div>

Horizontal and aligned form

Wrap your inputs into <div class="form-horizontal">...</div> and use the templates named *_horizontal_inline.xhtml

<div class="form-horizontal">

    <s:decorate template="/layout/form/_form_field_horizontal_inline.xhtml">
        <ui:param name="id" value="nameInput"/>
        <ui:define name="label">Name</ui:define>
        <h:inputText id="nameInput" value="#{user.name}"
                     required="true" styleClass="form-control"/>
    </s:decorate>

    <s:decorate template="/layout/form/_form_field_horizontal_inline.xhtml">
        <ui:param name="id" value="emailInput"/>
        <ui:define name="label">Name</ui:define>
        <h:inputText id="emailInput" value="#{user.email}"
                     required="true" styleClass="form-control"/>
    </s:decorate>

    <s:decorate template="/layout/form/_form_checkbox_horizontal_inline.xhtml">
        <h:selectBooleanCheckbox value="#{user.subscriber}"/>
        Subscribe newsletter
    </s:decorate>

</div>

Full width horizontal form

Wrap your inputs into <div class="form-horizontal">...</div> and use the templates named _form_*_horizontal_*-*.xhtml

<div class="form-horizontal">

    <s:decorate template="/layout/form/_form_field_horizontal_3-9.xhtml">
        <ui:param name="id" value="nameInput"/>
        <ui:define name="label">Name</ui:define>
        <h:inputText id="nameInput" value="#{user.name}"
                     required="true" styleClass="form-control"/>
    </s:decorate>

    <s:decorate template="/layout/form/_form_field_horizontal_3-9.xhtml">
        <ui:param name="id" value="emailInput"/>
        <ui:define name="label">Name</ui:define>
        <h:inputText id="emailInput" value="#{user.email}"
                     required="true" styleClass="form-control"/>
    </s:decorate>

    <s:decorate template="/layout/form/_form_checkbox_horizontal_3-9.xhtml">
        <ui:define name="label">Subscribe newsletter</ui:define>
        <h:selectBooleanCheckbox value="#{user.subscriber}"/>
    </s:decorate>

</div>

Those templates are derivated in 3 screen proportions :

  • 3-9 where the label and the input are respectively taking up 1/4 and 3/4 of the screen space.
  • 4-8 where the label and the input are respectively taking up 1/3 and 2/3 of the screen space.
  • 6-6 where the label and the input are both taking up half of the screen space.
<div class="form-horizontal">

    <s:decorate template="/layout/form/_form_field_horizontal_3-9.xhtml">
        <ui:param name="id" value="3-9Input"/>
        <ui:define name="label">A label</ui:define>
        <h:inputText id="3-9Input" value="#{bean.inputOne}"
                     required="true" styleClass="form-control"/>
    </s:decorate>

    <s:decorate template="/layout/form/_form_field_horizontal_4-8.xhtml">
        <ui:param name="id" value="4-8Input"/>
        <ui:define name="label">A longer label</ui:define>
        <h:inputText id="4-8Input" value="#{bean.inputTwo}"
                     required="true" styleClass="form-control"/>
    </s:decorate>

    <s:decorate template="/layout/form/_form_field_horizontal_6-6.xhtml">
        <ui:param name="id" value="6-6Input"/>
        <ui:define name="label">And finaly a much more longer label !</ui:define>
        <h:inputText id="6-6Input" value="#{bean.inputThree}"
                     required="true" styleClass="form-control"/>
    </s:decorate>

</div>

Input size

In some cases (for display or filtering) it can be usefull to have a different input size and different space between elements.

To do so, use the styleClass attribute on any form template and set the form-group size :

  • form-group-lg
  • form-group-sm
<div class="form-horizontal">

    <s:decorate template="/layout/form/_form_field_horizontal_3-9.xhtml">
        <ui:param name="id" value="largeInput"/>
        <ui:param name="styleClass" value="form-group-lg"/>
        <ui:define name="label">Large input</ui:define>
        <h:inputText id="largeInput" value="#{bean.input}" styleClass="form-control"/>
    </s:decorate>

    <s:decorate template="/layout/form/_form_field_horizontal_3-9.xhtml">
        <ui:param name="id" value="normalInput"/>
        <ui:define name="label">Normal input</ui:define>
        <h:inputText id="normalInput" value="#{bean.input}" styleClass="form-control"/>
    </s:decorate>

    <s:decorate template="/layout/form/_form_field_horizontal_3-9.xhtml">
        <ui:param name="id" value="smallInput"/>
        <ui:param name="styleClass" value="form-group-lg"/>
        <ui:define name="label">Small input</ui:define>
        <h:inputText id="smallInput" value="#{bean.input}" styleClass="form-control"/>
    </s:decorate>

</div>

Single page form layout

If your page contain only a classic form (a collection of inputs), use the template /layout/form/_form_page.xhtml to center the form in the middle of the page. This layout is responsive and will fit different width according to the screen size.

Register

Welcome on our website, please register to access all of our services.

Personnal information

* Required 
<ui:decorate template="/layout/form/_form_page.xhtml">

    <h3>Register</h3>
    <p>Welcome on our website, please register to access all of our services.</p>
    <h:form>
        <ui:decorate template="/layout/panels/_panel_title_footer.xhtml">
            <ui:define name="panel_title">
                <h:outputText value="Personnal information"/>
            </ui:define>

            <div class="form-horizontal">

                <s:decorate template="/layout/form/_form_field_horizontal_3-9.xhtml">
                    <ui:param name="id" value="nameInput"/>
                    <ui:define name="label">Name</ui:define>
                    <h:inputText id="nameInput" value="#{user.name}"
                                 required="true" styleClass="form-control"/>
                </s:decorate>

                <s:decorate template="/layout/form/_form_field_horizontal_3-9.xhtml">
                    <ui:param name="id" value="emailInput"/>
                    <ui:define name="label">E-Mail</ui:define>
                    <h:inputText id="emailInput" value="#{user.email}"
                                 required="true" styleClass="form-control"/>
                </s:decorate>

                <s:decorate template="/layout/form/_form_checkbox_horizontal_3-9.xhtml">
                    <ui:define name="label">Subscribe newsletter</ui:define>
                    <h:selectBooleanCheckbox value="#{user.subscriber}"/>
                </s:decorate>

            </div>

            <ui:define name="panel_footer">
                <em class="pull-right">* Required</em>
                <h:commandButton value="Register" action="#{user.register()}"
                                 styleClass="gzl-btn-blue"/>
                <h:commandButton value="Cancel" action="#{user.cancel()}"
                                 styleClass="gzl-btn"/>
            </ui:define>

        </ui:decorate>
    </h:form>

</ui:decorate>

Select

To use selects with search box included please include this in your template <h:head>

Chosen boostrap:

<h:head>
    <h:outputStylesheet library="stylesheet" name="gazelle-theme.css"/>
    <h:outputStylesheet library="stylesheet" name="chosen.bootstrap.css"/>
    <!-- Other css included...-->
    <h:outputScript library="jscript" name="jquery_1_11_2.min.js"/>
    <h:outputScript library="jscript" name="bootstrap.min.js"/>
    <!-- Other js included...-->
    <h:outputScript library="jscript" name="chosen.jquery.min.js"/>

    <!-- other includes... -->

    <script type="text/javascript">

        jq162 = jQuery.noConflict(true);

        jq162(function () {
            updateSelects();
        });

        function updateSelects() {
            updateSelects_(jq162, {allow_single_deselect: true, display_selected_options: true, width: "90%"});
        }
    </script>
</h:head>
<h:body>
    <!--this refreshes the selects after an ajax request-->
    <a4j:status onstop="updateSelects()"/>
</h:body>

Then, it is possible to add search feature by adding the class gzl-select-text to your select element. Thoses search boxes will be updated on page load.

<h:selectOneMenu styleClass="form-control gzl-select-text" value="#{...}">
    <f:selectItem ..../>
</h:selectOneMenu>

Filter

You must include Chossen bootstrap to use the new filters. See Select for inclusion.

Once your template is properly set up, use the template /filter/filter.xhtml from gazelle-seam-tools-war.

<ui:include src="/filter/filter.xhtml">
    <ui:param name="filterName" value="#{messages['net.ihe.gazelle.atna.Requester']}"/>
    <ui:param name="filterId" value="requester"/>
    <ui:param name="filter" value="#{certificatesListBean.filter}"/>
    <ui:param name="filterForm" value="globalForm"/>
</ui:include>

<ui:include src="/filter/filter.xhtml">
    <ui:param name="filterName" value="#{messages['net.ihe.gazelle.atna.Type']}"/>
    <ui:param name="filterId" value="type"/>
    <ui:param name="filter" value="#{certificatesListBean.filter}"/>
    <ui:param name="filterForm" value="globalForm"/>
</ui:include>

Styling filters

filter.xhtml use the default template /layout/form/_form_field_tm_criteria_4-5.xhtml to render. You can make use of the full Gazelle Form Design by changing the default template. For this, set the parameter form_template with the form template of your choice. Also Wrapp filters in a div if necessary.

Inline example

<div class="form-inline">

    <ui:include src="/filter/filter.xhtml">
        <ui:param name="form_template" value="/layout/form/_edit.xhtml"/>
        <ui:param name="filterName" value="#{messages['net.ihe.gazelle.atna.Requester']}"/>
        <ui:param name="filterId" value="requester"/>
        <ui:param name="filter" value="#{certificatesListBean.filter}"/>
        <ui:param name="filterForm" value="globalForm"/>
    </ui:include>

    <ui:include src="/filter/filter.xhtml">
        <ui:param name="form_template" value="/layout/form/_edit.xhtml"/>
        <ui:param name="filterName" value="#{messages['net.ihe.gazelle.atna.Type']}"/>
        <ui:param name="filterId" value="type"/>
        <ui:param name="filter" value="#{certificatesListBean.filter}"/>
        <ui:param name="filterForm" value="globalForm"/>
    </ui:include>

</div>

Full width horizontal example

<div class="form-horizontal">

    <ui:include src="/filter/filter.xhtml">
        <ui:param name="form_template" value="/layout/form/_form_field_horizontal_3-9.xhtml"/>
        <ui:param name="filterName" value="#{messages['net.ihe.gazelle.atna.Requester']}"/>
        <ui:param name="filterId" value="requester"/>
        <ui:param name="filter" value="#{certificatesListBean.filter}"/>
        <ui:param name="filterForm" value="globalForm"/>
    </ui:include>

    <ui:include src="/filter/filter.xhtml">
        <ui:param name="form_template" value="/layout/form/_form_field_horizontal_3-9.xhtml"/>
        <ui:param name="filterName" value="#{messages['net.ihe.gazelle.atna.Type']}"/>
        <ui:param name="filterId" value="type"/>
        <ui:param name="filter" value="#{certificatesListBean.filter}"/>
        <ui:param name="filterForm" value="globalForm"/>
    </ui:include>

</div>

To organize the filter panel in columns, use the Bootstrap grid system.

<div class="row">
    <div class="col-md-6">
        <div class="form-horizontal">
            <ui:include src="/filter/filter.xhtml">
                <ui:param name="form_template" value="/layout/form/_form_field_horizontal_4-8.xhtml"/>
                <ui:param name="filterName" value="Subject"/>
                <ui:param name="filterId" value="subject"/>
                <ui:param name="filter" value="#{certificatesListBean.filter}"/>
                <ui:param name="filterForm" value="globalForm"/>
            </ui:include>
            <ui:include src="/filter/filter.xhtml">
                <ui:param name="form_template" value="/layout/form/_form_field_horizontal_4-8.xhtml"/>
                <ui:param name="filterName" value="CA subject"/>
                <ui:param name="filterId" value="ca"/>
                <ui:param name="filter" value="#{certificatesListBean.filter}"/>
                <ui:param name="filterForm" value="globalForm"/>
            </ui:include>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-horizontal">
            <ui:include src="/filter/filter.xhtml">
                <ui:param name="form_template" value="/layout/form/_form_field_horizontal_4-8.xhtml"/>
                <ui:param name="filterName" value="Requester"/>
                <ui:param name="filterId" value="requester"/>
                <ui:param name="filter" value="#{certificatesListBean.filter}"/>
                <ui:param name="filterForm" value="globalForm"/>
            </ui:include>
            <ui:include src="/filter/filter.xhtml">
                <ui:param name="form_template" value="/layout/form/_form_field_horizontal_4-8.xhtml"/>
                <ui:param name="filterName" value="Type']}"/>
                <ui:param name="filterId" value="type"/>
                <ui:param name="filter" value="#{certificatesListBean.filter}"/>
                <ui:param name="filterForm" value="globalForm"/>
            </ui:include>
        </div>
    </div>
</div>

Finally, Gazelle-assets provide the template /layout/panels/_panel_filter_criteria.xhtml to nicely integrate filters in a page.

Search Criteria

Insert your filters here... 
<ui:decorate template="/layout/panels/_panel_filter_criteria.xhtml">
    <ui:param name="sub_title" value="Your subtitle if needed"/>

    <p>Insert your filters here...</p>

    <ui:define name="filter_buttons">
        <a4j:commandLink title="#{messages['net.ihe.gazelle.atna.RefreshResults']}"
                         actionListener="#{certificatesListBean.refresh()}"
                         render="globalForm">
            <span class="fa fa-refresh"></span>
        </a4j:commandLink>
        <a4j:commandLink title="#{messages['net.ihe.gazelle.atna.ResetCriteria']}"
                         actionListener="#{certificatesListBean.resetFilter()}"
                         render="globalForm">
            <span class="fa fa-times-circle"></span>
        </a4j:commandLink>
    </ui:define>

</ui:decorate>

Date filter

Like other filters, gazelle-seam-tools-war provides also the filter /filter/filterDate.xhtml for picking up dates and times

The filterDate.xhtml component requires the following Stylesheet and Javascripts.
Add them in your template after Jquery

<h:outputScript library="jscript" name="moment.js"/>
<h:outputScript library="jscript" name="daterangepicker.js"/>
<h:outputStylesheet library="stylesheet" name="daterangepicker.css"/>

You can make use of the full Gazelle form design by changing the default template. For this, set the parameter form_template with the form template of your choice.

Date picker

To use the new date picker please update gazelle-tools and include the following in your faces-config.xml

<renderer>
    <description>Rich Calendar</description>
    <component-family>org.richfaces.Calendar</component-family>
    <renderer-type>org.richfaces.CalendarRenderer</renderer-type>
    <renderer-class>net.ihe.gazelle.common.bootstrapComponent.CalendarRenderer</renderer-class>
</renderer>

Button

Use one of the following classes to have a button style on components such a4j:commandButton, h:commandButton or h:commandLink:

  • gzl-btn for neutral actions like "Back", "Cancel", or navigation actions.
  • gzl-btn-blue for actions with small impact like "Edit", "Print", "Request"
  • gzl-btn-green for creation or positive actions like "Add", "Create", "Yes", etc
  • gzl-btn-orange for actions with potential risk for lost of data like "Update" "Re-Import", or "Cancel" in some forms.
  • gzl-btn-redfor negative actions or with immediate lost of data like "Delete", "Remove", "No" 
<h:commandButton value="Back" action="#{bean.redirect()}" styleClass="gzl-btn"/>
<h:commandButton value="Request" action="#{bean.request()}" styleClass="gzl-btn-blue"/>
<h:commandButton value="Add" action="#{bean.add()}" styleClass="gzl-btn-green"/>
<h:commandButton value="Update" action="#{bean.update()}" styleClass="gzl-btn-orange"/>
<h:commandButton value="Delete" action="#{bean.delete()}" styleClass="gzl-btn-red"/>

Every popup template must have its popup_id parameter defined.

Use Javascript to trigger the popup display :

  • $('#popup_id').modal('show'); to open the popup, and
  • $('#popup_id').modal('hide'); to close it.

Simple popup

<button class="btn btn-default" onclick="jq162('#simplePopup').modal('show');">
    Click me
</button>

<ui:decorate template="/layout/popup/_popup.xhtml">
    <ui:param name="popup_id" value="simplePopup"/>
    <h4>Hello !</h4>
    <p>This is a simple popup.</p>
</ui:decorate>

Popup with title

<button class="btn btn-default" onclick="jq162('#popupWithTitle').modal('show');">
    Click me
</button>

<ui:decorate template="/layout/popup/_popup_title.xhtml">
    <ui:param name="popup_id" value="popupWithTitle"/>
    <ui:define name="popup_title">Popup title</ui:define>
    <p>This is a popup with a title.</p>
</ui:decorate>

Popup with footer

<button class="btn btn-default" onclick="jq162('#popupWithFooter').modal('show');">
    Click me
</button>

<ui:decorate template="/layout/popup/_popup_footer.xhtml">
    <ui:param name="popup_id" value="popupWithFooter"/>
    <p>This is a popup with a footer.</p>
    <ui:define name="popup_footer">
        <h:commandButton value="Cancel" action="#{bean.cancel()}"
                         styleClass="btn btn-default"
                         oncomplete="jq162('#popupWithFooter').modal('hide');"/>
        <h:commandButton value="I get it!" action="#{bean.doIt()}"
                         styleClass="btn btn-primary"
                         oncomplete="jq162('#popupWithFooter').modal('hide');"/>
    </ui:define>
</ui:decorate>

Popup with title and footer

<button class="btn btn-default" onclick="jq162('#popupWithTitleAndFooter').modal('show');">
    Click me
</button>

<ui:decorate template="/layout/popup/_popup_title_footer.xhtml">
    <ui:param name="popup_id" value="popupWithTitleAndFooter"/>
    <ui:define name="popup_title">Popup title</ui:define>
    <p>This is a popup with a title and a footer.</p>
    <ui:define name="popup_footer">
        <h:commandButton value="Cancel" action="#{bean.cancel()}"
                         styleClass="btn btn-default"
                         oncomplete="jq162('#popupWithTitleAndFooter').modal('hide');"/>
        <h:commandButton value="All right!" action="#{bean.doIt()}"
                         styleClass="btn btn-primary"
                         oncomplete="jq162('#popupWithTitleAndFooter').modal('hide');"/>
    </ui:define>
</ui:decorate>

Render on popup elements

Avoid using popup_id as target of a render. Instead, wrap the content to be refreshed into a <s:div>...</s:div> with a specific id.

Popup styling

Just as panels, popup can be customized using bootstrap style classes with the following parameters :

  • styleClass to add class to the overall popup
  • headerStyleClass to add class to the popup title
  • bodyStyleClass to add class to the popup body
  • footerStyleClass to add class to the popup footer
<button class="btn btn-default" onclick="jq162('#customPopup').modal('show');">
    Click me
</button>

<ui:decorate template="/layout/popup/_popup_title_footer.xhtml">
    <ui:param name="popup_id" value="customPopup"/>
    <ui:param name="styleClass" value="modal-sm"/>
    <ui:param name="headerStyleClass" value="gzl-text-orange"/>
    <ui:define name="popup_title">
        <span class="fa fa-exclamation-triangle"></span>Warning
    </ui:define>
    <ui:param name="bodyStyleClass" value="bg-warning"/>
    <p>This is a popup with a title and a footer.</p>
    <ui:define name="popup_footer">
        <h:commandButton value="Cancel" action="#{bean.cancel()}"
                         styleClass="btn btn-default"
                         oncomplete="jq162('#customPopup').modal('hide');"/>
        <h:commandButton value="I guess" action="#{bean.doIt()}"
                         styleClass="btn btn-warning"
                         oncomplete="jq162('#customPopup').modal('hide');"/>
    </ui:define>
</ui:decorate>

You may want to use h:selectOneMenu in your popup with styleClass="gzl-select-text".
So you need to add 

<ui:param name="bodyStyleClass" value="gzl-select-modal-overflow-visible"/>
, to see the list.

Popup no dismiss

Users are able to close a popup by clicking on the grey backdrop, by hitting ESC key or clicking on the top right cross button. When the popup is closed this way no Java bean actions can be triggered. This behavior can lead to undesired bean states if the cancel action is not reported to the server.

To face this situation, the modal dismiss can be disabled by using the template /layout/popup/_popup_title_footer_no_dismiss.xhtml, users will only be able to close the popup by clicking on buttons of your choice and trigger your desired bean actions.

Popover

Bootstrap documentation and demo

Popover can be used to replace rich:tooltip tag

Popover on icon click

Use the /layout/popover/_popover_on_icon.xhtml

Required parameters are:

  • id
  • icon_class: any gzl-icon will do
  • content: the content you want to display inside the popover

Optional parameters are:

  • trigger: click | hover | focus | manual , default to hover
  • placement: top | bottom | left | right | auto , default to auto
<ui:decorate template="/layout/popover/_popover_on_icon.xhtml">
    <ui:param name="id" value="part#{selectedTestRoles.id}"/>
    <ui:param name="icon_class" value="gzl-icon-question-circle"/>
    <ui:define name="content">
        <rich:dataTable id="t" ...>
            ....
        </rich:dataTable>
    </ui:define>
    <ui:define name="help">
        Optional help content, can be a popover...
    </ui:define>
</ui:decorate>

Popover on other element 

<ui:decorate template="/layout/popover/_popover.xhtml">
    <ui:param name="id" value="#{id}"/>
    <ui:define name="trigger-element">
        <button type="button" id="#{id}" class="btn btn-default"
            data-container="body" data-toggle="popover"
            data-placement="left" >Popover on left</button>
    </ui:define>
    <ui:define name="content">
        <rich:dataTable id="t" ...>
            ....
        </rich:dataTable>
    </ui:define>
</ui:decorate>

Table

Style

If you create a rich:dataTable the following default styles will be applied: .table, .table-striped, and .table-hover so that

  • odd lines will be colored
  • a hover state is enabled on table rows

As a consequence, you must remove all the onRowMouseOver and onRowMouseOut attributes you previously used in your tables.

header 1 header 2
cell 1 cell 2
cell 3 cell 4
cell 5 cell 6

Display different elements on the same line

This is useful for action icons for example

Never use h:panelGrid to layout elements inside a table or you'll get punched (by me)

no wrap constraint (look at the column containing icons)
super long text that make action wrap Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
with wrap constraint (look at the column containing icons)
super long text that make action wrap Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
<div class="gzl-never-wrap">
    <img src="../src/main/webapp/resources/img/icons22/add.gif">
    <img src="../src/main/webapp/resources/img/icons22/arrow.gif">
    <img src="../src/main/webapp/resources/img/icons22/back.gif">
</div>

To use font-awesome icons for actions see: here

Break long words

Sometimes, long strings without spaces in a column can push the last columns of the table out of the screen. You can force word wrapping by using the style class .gzl-break-long-word on the desired column(s), and the table will fit the screen again.

<g:column styleClass="gzl-break-long-word">
    ...
</g:column>

Data scroller

Check that your application includes gazelle-seam-tools-jar

Add the following in your faces-config.xml

<faces-config version="2.1"
      xmlns="http://java.sun.com/xml/ns/javaee"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_1.xsd">
    ...
    <render-kit>
        ...
        <renderer>
            <description>DataScroller uses twitter bootstrap modal panel</description>
            <component-family>org.richfaces.DataScroller</component-family>
            <renderer-type>org.richfaces.DataScrollerRenderer</renderer-type>
            <renderer-class>net.ihe.gazelle.common.bootstrapComponent.DataScroller</renderer-class>
        </renderer>
    </render-kit>
</faces-config>

Use the datatableFooter.xhtml to display the dataScroller and page number choices

Optional parameters are:

  • hideRowsSelect: true | false, default to false
  • maxPages: any number, default to 10

<rich:dataTable id="tableId" var="element" value="#{bean.data}"
                rows="#{dataScrollerMemory.numberOfResultsPerPage}"
                render="ds">
    <!-- ... -->
    <f:facet name="footer">
        <ui:include src="/util/datatableFooter.xhtml">
            <ui:param name="dataScrollerId" value="ds"/>
            <ui:param name="dataTableId" value="tableId"/>
            <ui:param name="hideRowsSelect" value="true"/>
            <ui:param name="maxPages" value="5"/>
        </ui:include>
    </f:facet>
</rich:dataTable>

Color chooser


<s:decorate id="colorPickerSection" template="/layout/form/_edit.xhtml">
    <ui:define name="label">#{messages['net.ihe.gazelle.tm.Color']}</ui:define>
    <h:inputText id='colorpicker' value="#{testingSessionManager.sessionColor}"/>
    <script>
        $("#<parentIdHere>\\:colorPickerSection\\:colorpicker").spectrum({
            color: "#{testingSessionManager.sessionColor}"
        });
    </script>
</s:decorate>

Text editor

We will use the beautiful text editor provided by: Summernote

Include the following in your template header

<h:head>
    <h:outputStylesheet library="stylesheet" name="summernote.css"/>

    <h:outputScript library="jscript" name="jquery_1_11_2.min.js"/>
    <h:outputScript library="jscript" name="bootstrap.min.js"/>
    <!-- Other js included...-->
    <h:outputScript library="jscript" name="summernote.min.js"/>

    <!-- other includes... -->
</h:head>

To use it you simply remove the rich:editor and use the _text_editor.xhtml template

<ui:decorate template="/layout/editor/_text_editor.xhtml">
    <ui:param name="text" value="#{bean.textContent}"/>
    <ui:param name="id" value="superPanelId"/>
</ui:decorate>

By default, the height of the editor is adapted to its content. If you wish, the height can be set by adding the optional parameter <ui:param name="editor_height" value="220"/>, then a resizebar will also be displayed.

Validation reports

Our validation reports always come with a stylesheet attached. In order to harmonize the style of such reports, css classes have been defined for the display of the notifications.

  • gzl-notification gzl-notification-green for reporting successes
  • gzl-notification gzl-notification-red for reporting errors
  • gzl-notification gzl-notification-orange for reporting warnings
  • gzl-notification gzl-notification-blue for reporting information

Your document contains an error

Your document contains a warning

Attention point

This rule has been successfully executed

<div class="gzl-notification gzl-notification-red">
                <p>Your document contains an error</p>
                </div>
                <div class="gzl-notification gzl-notification-orange">
                <p>Your document contains a warning</p>
                </div>
                <div class="gzl-notification gzl-notification-blue">
                <p>Attention point</p>
                </div>
                <div class="gzl-notification gzl-notification-green">
                <p>This rule has been successfully executed</p>
                </div>

Inplace input

Check that your application includes gazelle-seam-tools-jar

Add the following in your faces-config.xml

<faces-config version="2.1"
      xmlns="http://java.sun.com/xml/ns/javaee"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_1.xsd">
    ...
    <render-kit>
        ...
        <renderer>
            <description>Rich inplace input</description>
            <component-family>org.richfaces.InplaceInput</component-family>
            <renderer-type>org.richfaces.InplaceInputRenderer</renderer-type>
            <renderer-class>net.ihe.gazelle.common.bootstrapComponent.InplaceInputRenderer</renderer-class>
        </renderer>
    </render-kit>
</faces-config>

Then you just have to check that the new style is beautiful. If not, verify you have the following parameter in web.xml :

<context-param>
    <param-name>org.richfaces.resourceOptimization.enabled</param-name>
    <param-value>true</param-value>
</context-param>

Richfaces input number spinner

Check that your application includes gazelle-seam-tools-jar

Add the following in your faces-config.xml

<faces-config version="2.1"
      xmlns="http://java.sun.com/xml/ns/javaee"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_1.xsd">
    ...
    <render-kit>
        ...
        <renderer>
            <description>Rich input number spinner</description>
            <component-family>javax.faces.Input</component-family>
            <renderer-type>org.richfaces.InputNumberSpinnerRenderer</renderer-type>
            <renderer-class>net.ihe.gazelle.common.bootstrapComponent.InputNumberSpinnerRenderer</renderer-class>
        </renderer>
    </render-kit>
</faces-config>

Automatic Scroll

Automatic scroll when user click on button

To get the top offset of the button : jq162('#globalForm\\:button11').offset().top

To move to the button : jq162('html,body').animate({scrollTop:buttonOffset},animationTimeInMs)

<a4j:commandLink id="editParticipatingSystemsSupport"
    title="#{messages['gazelle.tm.test.AddParticipants']}"
    action="#{startTestInstance.editTestParticipantsForATestRoles(selectedTestRoles)}"
    execute="@this"
    oncomplete="jq162('html,body').animate({scrollTop: jq162('#globalForm\\:button11').offset().top},600);"
    render=":globalForm, :footerForm">
    <span class="gzl-icon-plus"/>
</a4j:commandLink>

Svg zoom in and out

Use svg-pan-zoom to add this feature

gri:progressBar

gri:progressBar define a simple use of the progress bar coming from bootstrap

30% 
<gri:progressBar value="#{HL7TemplateValManager.currentProgressValue}" style="width:20%" />
Attributes and Facets for gri:progressBar
Attribute required default Type Description
value true String The value of the progress (example : 0, 20, 30, 55, 100)
style false String The style of the progress bar, example : "width : 20%"
rendered false true javax.el.ValueExpression
(evaluated as boolean)		 rendered attribute