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 empty-page.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 leftmenu.xhtml.

In addition, jQuery and PrimeFaces.js files must be available on the page for menu to work. These files 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
  • - Replace theme jar with the new jar.
1.3 to 1.3.1
  • - 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 GroupClass NameInstructions
Responsive ModeResponsiveMakes 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.
Responsive50Makes 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.
Responsive100Makes 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)
Responsive100 Element (With Container30 Class)

Some Components In Responsive Containers

Single TreeTable in Container60 Responsive100
NameSizeType
Checkbox TreeTable in Container40 Responsive100
NameSizeType
ContainerX's
Class GroupClass NameInstructions
ContainersContainer100
Container96
Container90
Container85
Container80
Container75
Container70
Container60
Container50
Container40
Container33
Container30
Container25
Container20
Container10
Container5
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;} , .Container96{ width:96%; float:left;} , .Container90{ width:90%; float:left;} , .Container85{ width:85%; float:left;} , .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;}
IndentContainerIndentContainerIndent is optional and added inside a ContainerX class to apply formatting such as padding.
ContainerWrapperContainer 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 GroupClass NameInstructions
SelectionUnselectableMakes text unselectable

.Unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
This is unselectable text
Visibilites, Floating And Width Settings on Devices
Class GroupClass NameInstructions
Visibilities According To The PlatformShowOnMobileOnly visible on screen widths smaller than 960px.
ShowOnDesktopOnly visible on screen widths bigger than 960px.
Floating According To The PlatformFloatNoneOnMobileRemoves floating on screen widths smaller than 960px.
Width Setting For The PlatformWidAutoOnMobileSwitches to auto width on screen widths smaller than 640px so that element with depends on its content.
Height Setting For The PlatformHeiAutoOnMobileSwitches to auto height on screen widths smaller than 640px so that element with depends on its content.
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 GroupClass NameInstructions
DisplayingDispBlockDisplays an element as a block element

.DispBlock{ display:block;}
DispNoneThe element will not be displayed at all (has no effect on layout)

.DispNone{display:none;}
DispTableLet the element behave like a table element

.DispTable{display:table;}
DispInlBlockDisplays 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

.DispInlBlock{display:inline-block;}
DispTableCellLet the element behave like a td element

.DispTableCell{ display:table-cell; vertical-align:middle;}
Positioning
Class GroupClass NameInstructions
PositioningPosFixedThe element is positioned relative to the browser window

.PosFixed{position:fixed;}
PosAbsoluteThe element is positioned relative to its first positioned (not static) ancestor element

.PosAbsolute{position:absolute;}
PosRelativeThe element is positioned relative to its normal position, so 'left:20' adds 20 pixels to the element's LEFT position

.PosRelative{ position:relative;}
PosStaticDefault value. Elements render in order, as they appear in the document flow

.PosStatic{position:static;}
Underline
Class GroupClass NameInstructions
Text DecorationUnderlineDefines a line below the text

.Underline{ text-decoration:underline;}
This is underlined text
Floating
Class GroupClass NameInstructions
FloatingFleftThe element floats to the left

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

.Fleft{ float:right;}
FnoneThe 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 GroupClass NameInstructions
OverflowOvHiddenThe overflow is clipped, and the rest of the content will be invisible

.OvHidden{ overflow:hidden;}
OvScrollThe overflow is clipped, but a scroll-bar is added to see the rest of the content

.OvScroll{ overflow:scroll;}
OvAutoIf overflow is clipped, a scroll-bar should be added to see the rest of the content

.OvAuto{ overflow:auto;}
OvVisibleThe overflow is not clipped. It renders outside the element's box.

.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{ overflow-y:hidden;}
Empty Boxes
Class GroupClass NameInstructions
Empty BoxesEmptyBox5
EmptyBox10
EmptyBox20
EmptyBox30
EmptyBox40
EmptyBox50
EmptyBox60
EmptyBox70
EmptyBox80
EmptyBox90
EmptyBox100
EmptyBox110
EmptyBox120
EmptyBox130
EmptyBox140
EmptyBox150
Horizontally , leaving space so that the value of the specified number of pixels

.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;}
Content
this is empty box with 30px height value (EmptyBox30)
Content
Opacity
Class GroupClass NameInstructions
OpacityOpacZero
Opac10
Opac20
Opac30
Opac40
Opac50
Opac60
Opac70
Opac80
Opac90
Opac95
Opac100
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;}
Opac10
Opac30
Opac50
Opac70
WidX's
Class GroupClass NameInstructions
Width Special ValuesWid100
Wid90
Wid80
Wid70
Wid60
Wid50
Wid45
Wid40
Wid33
Wid30
Wid25
Wid20
Wid10
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%;} , .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


Wid20 - Responsive


Wid20


Wid33 - Reponsive


Wid33 - Reponsive


Wid33 - Reponsive

Text Aligning
Class GroupClass NameInstructions
Text AlignTexAlCenterCenters the text

.TexAlCenter{ text-align:center;}
TexAlLeftAligns the text to the left

.TexAlLeft{ text-align:left;}
TexAlRightAligns the text to the right

.TexAlRight{ text-align:right;}
This text align center
This text align left
This text align right
Box Size
Class GroupClass NameInstructions
Box SizingBoxSizeContentDefault. 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; -webkit-box-sizing:content-box; -moz-box-sizing:content-box;}
BoxSizeBorderThe width and height properties (and min/max properties) includes content, padding and border, but not the margin

.BoxSizeBorder{ box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
Box Sizing : BoxSizeBorder (same width with below box)
Box Sizing : BoxSizeContent
Font Sizes
Class GroupClass NameInstructions
Font SizeFs130
Fs100
Fs60
Fs50
Fs40
Fs30
Fs29
Fs28
Fs27
Fs26
Fs25
Fs24
Fs23
Fs22
Fs21
Fs20
Fs19
Fs18
Fs17
Fs16
Fs15
Fs14
Fs13
Fs14
Fs13
Fs12
Fs11
Fs10
Fs9
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;} , .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 GroupClass NameInstructions
Font WeightFontBoldDefines thick characters.

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

.FontLight{ font-weight:lighter;}
FontNormalDefines normal characters. This is default.

.FontNormal{ font-weight:normal;}
This is bold text
This is lighter text
Transitions Timing (For CSS3 Animations)
Class GroupClass NameInstructions
Transitions TimingAnimated05Make css3 transitions with the specified duration. ( Animated05 = Transition ends in 500 milli-seconds with easing)

.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;}
Animated05Make css3 transitions with the specified duration. ( Animated1 = Transition ends in 1 second with easing)

.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 500 milli-seconds with Animated05 )


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
info@sentinelsentinel.com