PrimeFaces Sentinel

http://localhost:8080/Sentinel212/documentation....

Sentinel Documentation

Installation
Sentinel provides a main template.xhtml and additional leftmenu.xhtml, topbar.xhtml files for
the base layout. These 3 files must be placed under WEB-INF folder. Provided emptypage.xhtml is a sample content page using the main template.xhtml that defines "content"
and "head" ui:define placeholders. Other required resources are the css, js, image and font
files that are located inside resources/sentinel-layout folder, simply copy the sentinel-layout
folder to your %WEB-APP-FOLDER%/resources folder so that final path would be
%WEB-APP-FOLDER%/sentinel-layout/. Please refer to demo app or maven project of the
demo app as the reference.
Theme is a regular PrimeFaces theme and setup is simple as defining primefaces.THEME
context parameter in web.xml as "sentinel", refer to themes page for more information.

Navigation Menu
Sentinel provides a navigation menu positioned at left side of the screen. This menu is
responsive and adjusts to the screen width automatically. Menu is actually a PrimeFaces
component specifically created for Sentinel under http://primefaces.org/sentinel namespace
having menu as the tag name., usage is same as a regular PrimeFaces component that
utilizes p:submenu and p:menuitem components. This component is placed inside the
Sentinel theme jar so this jar must be in your classpath. Demo application features an
example menu created declaratively however since this component is a JSF component, you
can also use PrimeFaces MenuModel API to create the menu dynamically.
Menu keeps its state using cookies so that between page navigations, state of the menu can
be restored. In case you'd like to clear this state, call
PF('SentinelMenuWidget').clearMenuState() javascript method. For stateful menu to work,
each menuitem and submenu must have explicit ids defined, otherwise ids will be generated
by JSF that may be different for each page. So please make sure you have defined explicit ids
for each menuitem and submenu to have a stateful menu. Menu is large by default, if you
prefer slim menu by default add "slimmenu" style class to the #layout-menubar div in

1 of 17

22/11/16 07:45

PrimeFaces Sentinel

http://localhost:8080/Sentinel212/documentation....

leftmenu.xhtml.

SENTINELLAYOUT

166

24

are included automatically whenever there is a PrimeFaces component on the page that depends on
them, however you can easily add them manually if required using h:outputScript component with
name attribute values jquery/jquery.js and primefaces.js correspondingly under primefaces library. An
example would be <h:outputScript name="jquery/jquery.js" library="primefaces" />

Menu Direction Modes

Sentinel menus have two direction modes. Default is LTR and for RTL mode add "ui-sentinel-rtl" to
the h:body component.

Migration Guide
2.1.1 to 2.1.2
- Replace theme jar with the new jar.
- Replace SentinelMenu.java with the new SentinelMenu.java.

2.1 to 2.1.1
- Update core-layout.css, sentinel-layout.css and layout.js.
- Replace theme jar with the new jar.
- Replace SentinelMenuRenderer.java with the new SentinelMenuRenderer.java.
- Replace SentinelMenu.java with the new SentinelMenu.java.

2.0.2 to 2.1
- Replace theme jar with the new jar.

2.0.1 to 2.0.2
- Update core-layout.css, sentinel-layout.css and template.xhtml.
- Replace theme jar with the new jar.

2.0 to 2.0.1
- Update core-layout.css and sentinel-layout.css files.
- Update layout.js file.
- Replace theme jar with the new jar.

1.3.1 to 2.0
2 of 17

22/11/16 07:45

PrimeFaces Sentinel

http://localhost:8080/Sentinel212/documentation....

SENTINELLAYOUT

166

1.3 to 1.3.1

24

- Replace theme jar with the new jar.

1.2 to 1.3
- Update core-layout.css and sentinel-layout.css files.
- Replace theme jar with the new jar.
- Update login.xhtml.

1.1 to 1.2
- Update layout resources located inside css, fonts, images and js folders under sentinel-layout
folder.
- Replace theme jar with the new jar.
- Remove js/layout.js file from 404, access-denied and error pages.
- Replace js/layout.js file with js/login.js in login.xhtml.
- Remove IE specific css from template.xhtml.

1.0 to 1.1
- Update layout resources located inside css, fonts, images and js folders.
- Replace theme jar with the new jar.
- Replace the menu markup in leftmenu.xhtml with the Sentinel Menu component. Refer to
demo app for the example.
- Set "sm-mobiletopmenu" as the id of the second ul element in topbar.xhtml. Id of the first ul
is "sm-topmenu" and it has not changed.

Core Layout
Core Layout is a set of CSS classes used to create responsive grid layouts with additional
utilities. Sentinel uses Core Layout internally, however for grid layout you may also choose
another utility like Grid CSS or Bootstrap Grid.

Responsive Mode
Class Group
3 of 17

Class

Instructions
22/11/16 07:45

PrimeFaces Sentinel

http://localhost:8080/Sentinel212/documentation....

SENTINELLAYOUT

Responsive
Mode

166

24

Responsive

Makes an element responsive using media queries. For

example;
if screen width is smaller than 1200px and bigger than
960px, this element's width sets to '33%',
and if screen width is smaller than 960px and bigger
than 640px, this element's width sets to '50%',
and if screen width smaller than 640px, this element's
width sets to '100%'.
Thus, width of this element adjusted to screen
resolution on mobile phones and tablets.
Resize browser window to see changes of Green
ContainerX boxes below.

Responsive50

Makes an element responsive using media queries. For

example;
if screen width is smaller than 960px, this element's
width sets to '100%',
Thus, width of this element adjusted to screen
resolution on mobile phones and tablets.
Resize browser window to see changes of Green
ContainerX boxes below.

Responsive100

Makes an element responsive using media queries. For

example;
if screen width is smaller than 1200px, this element's
width sets to '100%',
Thus, width of this element adjusted to screen
resolution on mobile phones and tablets.
Resize browser window to see changes of Green
ContainerX boxes below.

Responsive Element (With Container33 Class)

Responsive Element (With Container33 Class)

Responsive Element (With Container33 Class)

Responsive50 Element (With Container60 Class)
Responsive50 Element (With Container20 Class)
Responsive50 Element (With Container20 Class)
Responsive100 Element (With Container50 Class)
Responsive100 Element (With Container20 Class)

4 of 17

22/11/16 07:45

PrimeFaces Sentinel

http://localhost:8080/Sentinel212/documentation....

SENTINELLAYOUT

166

24

Some Components In Responsive Containers

Single TreeTable in Container60 Responsive100
Name

Size

Type

Documents

Folder

Pictures

Folder

Movies

Folder
TreeTable Footer

Checkbox TreeTable in Container40 Responsive100

Name

Size

Type

Documents

Folder

Pictures

Folder

Movies

Folder

ContainerX's

5 of 17

Class
Group

Class Name

Instructions

Containers

Container100
Container96
Container90
Container85
Container80
Container75
Container70
Container60
Container50

ContinerX is the essential part of grid layout where the

number x defines the width of the cell. In order to make a
ContainerX responsive, one of the Responsive style classes
described in previous section should be added. In addition,
since they float, a class called Container should be the
parent to clear the floats. Resize browser window to see
changes of red and orange boxes below.
.Container100{ width:100%; overflow:hidden; float:left;} ,

22/11/16 07:45

PrimeFaces Sentinel

http://localhost:8080/Sentinel212/documentation....

SENTINELLAYOUT

166

Container40
Container33
Container30
Container25
Container20
Container10
Container5

24

.Container80{ width:80%; float:left;} , .Container75{

width:75%; float:left;} , .Container70{ width:70%; float:left;} ,
.Container66{ width:66.66%; float:left;} , .Container60{
width:60%; float:left;} , .Container50{ width:50%; float:left;} ,
.Container40{ width:40%; float:left;} , .Container33{
width:33.33%; float:left;} , .Container30{ width:30%;
float:left;} , .Container25{ width:25%; float:left;} ,
.Container20{ width:20%; float:left;} , .Container10{
width:10%; float:left;} , .Container5{ width:5%; float:left;}

Indent

ContainerIndent

ContainerIndent is optional and added inside a ContainerX

class to apply formatting such as padding.

Container

Wrapper

Container is used as the wrapper of ContainerX elements to

clear the floats.

Container20 - Responsive

Container30 - Responsive

Container50 - Responsive

Container33 - Reponsive

Container33 - Reponsive

Container33 - Reponsive
Container40
Container Indent

Selection
Class
Group
Selection

6 of 17

Class
Name

Instructions
Makes text unselectable

Unselectable

.Unselectable { -webkit-touch-callout: none; -webkit-

22/11/16 07:45

PrimeFaces Sentinel

http://localhost:8080/Sentinel212/documentation....

SENTINELLAYOUT

166

24

This is unselectable text

Visibilites, Floating And Width Settings on Devices

Class Group

Class Name

Instructions

Visibilities
According To The
Platform

ShowOnMobile

Only visible on screen widths smaller than

960px.

ShowOnDesktop

Only visible on screen widths bigger than

960px.

Floating According
To The Platform

FloatNoneOnMobile

Removes floating on screen widths smaller

than 960px.

Width Setting For

The Platform

WidAutoOnMobile

Switches to auto width on screen widths

smaller than 640px so that element with
depends on its content.

Height Setting For

The Platform

HeiAutoOnMobile

Switches to auto height on screen widths

smaller than 640px so that element with
depends on its content.

Only visible if screen width is smaller than 960px.

Cc;
Floating is removed if screen width is smaller than 960px

InputField 1

7 of 17

22/11/16 07:45

PrimeFaces Sentinel

http://localhost:8080/Sentinel212/documentation....

SENTINELLAYOUT

166

InputField 3

24

This element has 30% width on bigger screens and auto width on smaller screens as it uses
WidAutoOnMobile.

This element has 300px

height on bigger screens
and auto height on smaller
screens as it uses
HeiAutoOnMobile.

Displaying
Class
Group
Displaying

Class
Name

Instructions
Displays an element as a block element

DispBlock
.DispBlock{ display:block;}

DispNone

The element will not be displayed at all (has no effect on

layout)
.DispNone{display:none;}
Let the element behave like a table element

DispTable
.DispTable{display:table;}

DispInlBlock

8 of 17

Displays an element as an inline-level block container. The

inside of this block is formatted as block-level box, and the
element itself is formatted as an inline-level box

22/11/16 07:45

PrimeFaces Sentinel

http://localhost:8080/Sentinel212/documentation....

SENTINELLAYOUT

166

24

DispTableCell
.DispTableCell{ display:table-cell; vertical-align:middle;}

Positioning
Class
Group
Positioning

Class
Name

Instructions
The element is positioned relative to the browser window

PosFixed
.PosFixed{position:fixed;}

PosAbsolute

The element is positioned relative to its first positioned (not

static) ancestor element
.PosAbsolute{position:absolute;}

PosRelative

The element is positioned relative to its normal position, so

'left:20' adds 20 pixels to the element's LEFT position
.PosRelative{ position:relative;}

PosStatic

Default value. Elements render in order, as they appear in the

document flow
.PosStatic{position:static;}

Underline
Class Group
Text Decoration

Class Name

Instructions
Defines a line below the text

Underline
.Underline{ text-decoration:underline;}
This is underlined text

9 of 17

22/11/16 07:45

PrimeFaces Sentinel

http://localhost:8080/Sentinel212/documentation....

SENTINELLAYOUT

Class
Group

Class
Name

166

24

Instructions
The element floats to the left

Floating

Fleft
.Fleft{ float:left;}
The element floats to the right
Fright
.Fleft{ float:right;}

Fnone

The element is not floated, and will be displayed just where it

occurs in the text.
.Fleft{ float:none;}

This is floats to the

left

This is floats to the

right

This is not floated

(default)

Overflows
Class
Group
Overflow

Class
Name
OvHidden

Instructions
The overflow is clipped, and the rest of the content will be
invisible
.OvHidden{ overflow:hidden;}

OvScroll

The overflow is clipped, but a scroll-bar is added to see the rest

of the content
.OvScroll{ overflow:scroll;}

OvAuto

If overflow is clipped, a scroll-bar should be added to see the

rest of the content
.OvAuto{ overflow:auto;}

10 of 17

22/11/16 07:45

PrimeFaces Sentinel

http://localhost:8080/Sentinel212/documentation....

SENTINELLAYOUT

166

OvVisible

24

.OvVisible{ overflow:visible;}
OvXScroll
OvYScroll
OvXHidden
OvYHidden

Axis of the elements (X or Y) mentioned were hidden or scroll

.OvXScroll{ overflow-x:scroll;} , .OvYScroll{ overflow-y:scroll;} ,
.OvXHidden{ overflow-x:hidden;} , .OvYHidden{ overflowy:hidden;}
Get More Info About Overflows

Empty Boxes
Class
Group

Class
Name

Instructions
Horizontally , leaving space so that the value of the specified
number of pixels

Empty
Boxes

11 of 17

EmptyBox5
EmptyBox10
EmptyBox20
EmptyBox30
EmptyBox40
EmptyBox50
EmptyBox60
EmptyBox70
EmptyBox80
EmptyBox90
EmptyBox100
EmptyBox110
EmptyBox120
EmptyBox130
EmptyBox140
EmptyBox150

.EmptyBox5{ display:block; width:100%; height:5px;

overflow:hidden;} , .EmptyBox10{ display:block; width:100%;
height:10px; overflow:hidden;} , .EmptyBox20{ display:block;
width:100%; height:20px; overflow:hidden;} , .EmptyBox30{
display:block; width:100%; height:30px; overflow:hidden;} ,
.EmptyBox40{ display:block; width:100%; height:40px;
overflow:hidden;} , .EmptyBox50{ display:block; width:100%;
height:50px; overflow:hidden;} , .EmptyBox60{ display:block;
width:100%; height:60px; overflow:hidden;} , .EmptyBox70{
display:block; width:100%; height:70px; overflow:hidden;} ,
.EmptyBox80{ display:block; width:100%; height:80px;
overflow:hidden;} , .EmptyBox90{ display:block; width:100%;
height:90px; overflow:hidden;} , .EmptyBox100{ display:block;
width:100%; height:100px; overflow:hidden;} , .EmptyBox110{
display:block; width:100%; height:100px; overflow:hidden;} ,
.EmptyBox120{ display:block; width:100%; height:100px;
overflow:hidden;} , .EmptyBox130{ display:block; width:100%;
height:100px; overflow:hidden;} , .EmptyBox140{ display:block;
width:100%; height:100px; overflow:hidden;} , .EmptyBox150{
display: block; width: 100%; height:150px; overflow:hidden;}

22/11/16 07:45

PrimeFaces Sentinel

http://localhost:8080/Sentinel212/documentation....

SENTINELLAYOUT

166

24

this is empty box with 30px height value (EmptyBox30)

Content

Opacity
Class
Group

Class
Name

Opacity

OpacZero
Opac10
Opac20
Opac30
Opac40
Opac50
Opac60
Opac70
Opac80
Opac90
Opac95
Opac100

Instructions
Element gives transparency specified value
.Opac100{ opacity:1; -webkit-opacity:1; -moz-opacity:1;} , .Opac95{
opacity:0.95; -webkit-opacity:0.95; -moz-opacity:0.95;} , .Opac90{
opacity:0.9; -webkit-opacity:0.9; -moz-opacity:0.9;} , .Opac80{
opacity:0.8; -webkit-opacity:0.8; -moz-opacity:0.8;} , .Opac70{
opacity:0.7; -webkit-opacity:0.7; -moz-opacity:0.7;} , .Opac60{
opacity:0.6; -webkit-opacity:0.6; -moz-opacity:0.6;} , .Opac50{
opacity:0.5; -webkit-opacity:0.5; -moz-opacity:0.5;} , .Opac40{
opacity:0.4; -webkit-opacity:0.4; -moz-opacity:0.4;} , .Opac30{
opacity:0.3; -webkit-opacity:0.3; -moz-opacity:0.3;} , .Opac20{
opacity:0.2; -webkit-opacity:0.2; -moz-opacity:0.2;} , .Opac10{
opacity:0.1; -webkit-opacity:0.1; -moz-opacity:0.1;} , .OpacZero{
opacity:0; -webkit-opacity:0; -moz-opacity:0;}

WidX's

12 of 17

Class
Group

Class
Name

Width
Special
Values

Wid100
Wid90
Wid80
Wid70
Wid60

Instructions
Element data width is specified with a percentage value. Add
Responsive class to apply responsive features.
.Wid100{ width:100%;} , .Wid90{ width:90%;} , .Wid80{ width:80%;} ,
.Wid70{ width:70%;} , .Wid60{ width:60%;} , .Wid50{ width:50%;} ,

22/11/16 07:45

PrimeFaces Sentinel

http://localhost:8080/Sentinel212/documentation....

SENTINELLAYOUT
Wid40
Wid33
Wid30
Wid25
Wid20
Wid10

166

24

.Wid45{ width:45%;} , .Wid40{ width:40%;} , .Wid30{ width:30%;} ,

.Wid33{ width:33.3%;} , .Wid25{ width:25%;} , .Wid20{ width:20%;} ,
.Wid10{ width:10%;}

Wid20 - Responsive

Wid20

Wid20 - Responsive

Wid20

Wid33 - Reponsive

Wid20

Wid33 - Reponsive

Wid33 - Reponsive

Text Aligning
Class Group
Text Align

Class Name

Instructions
Centers the text

TexAlCenter
.TexAlCenter{ text-align:center;}
Aligns the text to the left
TexAlLeft
.TexAlLeft{ text-align:left;}
Aligns the text to the right
TexAlRight
.TexAlRight{ text-align:right;}
This text align center

This text align left

This text align right

13 of 17

22/11/16 07:45

PrimeFaces Sentinel

http://localhost:8080/Sentinel212/documentation....

SENTINELLAYOUT

Class
Group
Box
Sizing

166

Class
Name

24

Instructions

BoxSizeContent

Default. The width and height properties (and min/max

properties) includes only the content. Border, padding, or margin
are not included
.BoxSizeContent{ box-sizing:content-box; -webkitbox-sizing:content-box; -moz-box-sizing:content-box;}
The width and height properties (and min/max properties)
includes content, padding and border, but not the margin

BoxSizeBorder
.BoxSizeBorder{ box-sizing:border-box; -webkitbox-sizing:border-box; -moz-box-sizing:border-box;}

Box Sizing :
BoxSizeBorder (same
width with below box)
Box Sizing : BoxSizeContent

Font Sizes

14 of 17

Class
Group

Class
Name

Font
Size

Fs130
Fs100
Fs60
Fs50
Fs40
Fs30
Fs29
Fs28
Fs27
Fs26
Fs25

Instructions
Set to the specified pixel value of font-size.
.Fs9{font-size:9px !important;} , .Fs10{font-size:10px !important;} ,
.Fs11{font-size:11px !important;} , .Fs12{font-size:12px !important;} ,
.Fs13{font-size:13px !important;} , .Fs14{font-size:14px !important;} ,
.Fs15{font-size:15px !important;} , .Fs16{font-size:16px !important;} ,
.Fs17{font-size:17px !important;} , .Fs18{font-size:18px !important;} ,
.Fs19{font-size:19px !important;} , .Fs20{font-size:20px !important;} ,
.Fs21{font-size:21px !important;} , .Fs22{font-size:22px !important;} ,
.Fs23{font-size:23px !important;} , .Fs24{font-size:24px !important;} ,
.Fs25{font-size:25px !important;} , .Fs26{font-size:26px !important;} ,

22/11/16 07:45

PrimeFaces Sentinel

http://localhost:8080/Sentinel212/documentation....

SENTINELLAYOUT
Fs22
Fs21
Fs20
Fs19
Fs18
Fs17
Fs16
Fs15
Fs14
Fs13
Fs14
Fs13
Fs12
Fs11
Fs10
Fs9

166

24

.Fs27{font-size:27px !important;} , .Fs28{font-size:28px !important;} ,

.Fs29{font-size:29px !important;} , .Fs30{font-size:30px !important;} ,
.Fs40{font-size:40px !important;} , .Fs50{font-size:50px !important;} ,
.Fs60{font-size:60px !important;} , .Fs100{font-size:100px !important;} ,
.Fs130{font-size:130px !important;}

Font Size : 14px

Font Size : 18px

Font Size : 24px

Font Size : 30px

Font Size : 60px

Font Weights
Class Group
Font Weight

Class Name

Instructions
Defines thick characters.

FontBold
.FontBold{ font-weight:bold;}
Defines lighter characters.
FontLight
.FontLight{ font-weight:lighter;}

15 of 17

22/11/16 07:45

PrimeFaces Sentinel

http://localhost:8080/Sentinel212/documentation....

SENTINELLAYOUT

166

24

.FontNormal{ font-weight:normal;}

This is bold text

This is lighter text
Transitions Timing (For CSS3 Animations)
Class Group

Transitions
Timing

Class
Name

Instructions
Make css3 transitions with the specified duration. (
Animated05 = Transition ends in 500 milli-seconds with
easing)

Animated05
.Animated05{-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease; transition: all 0.5s ease;}
Make css3 transitions with the specified duration. (
Animated1 = Transition ends in 1 second with easing)
Animated05

Hover Here ( Color and

padding changing in 500 milliseconds with Animated05 )

.Animated1{-webkit-transition: all 1s ease;

-moz-transition: all 1s ease; -ms-transition: all 1s ease;
-o-transition: all 1s ease; transition: all 1s ease;}

Hover Here ( Color and

padding changing in 1 second
with Animated1 )

TERMS OF CONDITIONS | SITEMAP | PRIVACY | LINKING POLICY

PrimeFaces Sentinel | All rights reserved.

+1 888 123 4567

16 of 17

22/11/16 07:45

PrimeFaces Sentinel

http://localhost:8080/Sentinel212/documentation....

info@sentinelsentinel.com

SENTINELLAYOUT

17 of 17

166

24

22/11/16 07:45