PageSourceSearch

https://showcase.bootsfaces.net/Examples/

html bootsfaces.net collected 2026-10-02 04:26:31 UTC 17,043 bytes, 106 lines download raw bytes

1<?xml version='1.0' encoding='UTF-8' ?>
2<!DOCTYPE html>
3<html xmlns="http://www.w3.org/1999/xhtml"><head id="j_idt2"><meta name="viewport" content="width=device-width, initial-scale=1"/>
4        <title>BootsFaces: the next-gen JSF Framework based on Bootstrap</title>
5        <meta name="author" content="Riccardo Massera" />
6        <meta name="description" content="BootsFaces, a powerful JSF framework that takes the best from Bootstrap and jQuery UI to let develop well-designed state-of-the-art next-gen Front-end Enterprise Applications fast and easy supporting HTML5." />
7        <meta name="KEYWORDS" content="jsf, bootstrap, framework, java, enterprise, server, faces, jquery, usability, next-gen, web, html5, easy, modern, well-designed, website, state-of-the-art" />
8        <meta name="robots" content="index, follow" />
9        
10        <meta name="viewport" content="width=device-width, initial-scale=1" />
11        <meta name="revisit-after" content="7 days" />
12        <meta name="DISTRIBUTION" content="GLOBAL" />
13        <meta http-equiv="PRAGMA" content="NO-CACHE" />
14        <meta name="copyright" content="TheCoder4.eu ( Riccardo Massera ), Stephan Rauh et al." />
15        <!-- These CSS don't do anything. The just demonstrate the position attribute.&gt;
16        &lt;h:outputStylesheet name="last.css" position="last"/&gt;
17        &lt;h:outputStylesheet name="first.css" position="first"/&gt;
18        &lt;h:outputStylesheet name="middle.css" position="middle"/-->
19        <!--h:outputStylesheet library="customthemes" name="/bootstrap.min.css"  rendered="false"/&gt;
20        &lt;h:outputStylesheet library="customthemes" name="/.css" rendered="false"/-->
21        <style>.tooltip-inner {
22            max-width: 350px;
23            /* If max-width does not work, try using width instead */
24            width: 350px; 
25        }
26        </style>
27        <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css" />
28        
28<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
28
29        
29<script>
30        window.addEventListener("load", function(){
31        window.cookieconsent.initialise({
32          "palette": {
33            "popup": {
34              "background": "#1d8a8a"
35            },
36            "button": {
37              "background": "#f5d948"
38            }
39          },
40          "theme": "classic",
41          "content": {
42          "message": "This site uses cookies to ensure you get the best browsing experience and perform analytics. Clicking Accept Cookies indicates you agree to the use of cookies on your device.",
43          "dismiss": "Accept Cookies",
44          "href": "https://showcase.bootsfaces.net/privacy.jsf"
45          }
46        })});
47        </script>
47<link rel="stylesheet" href="/Examples/jakarta.faces.resource/css/shCore.css.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase?ln=sh" /><link rel="stylesheet" href="/Examples/jakarta.faces.resource/css/shCoreEclipse.css.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase?ln=sh" /><link rel="stylesheet" href="RES_NOT_FOUND" /><link rel="stylesheet" href="/Examples/jakarta.faces.resource/css/spacelab/core.css.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase?ln=bsf" /><link rel="stylesheet" href="/Examples/jakarta.faces.resource/css/spacelab/theme.css.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase?ln=bsf" /><link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin="anonymous"/><link rel="stylesheet" href="/Examples/jakarta.faces.resource/css/dropdown-submenu.css.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase?ln=bsf" /><link rel="stylesheet" href="/Examples/jakarta.faces.resource/css/bsf.css.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase?ln=bsf" /><!--[if lt IE 9]>
47<script src="/Examples/jakarta.faces.resource/js/html5shiv.js.jsf?ln=bsf"></script>
47<script src="/Examples/jakarta.faces.resource/js/respond.js.jsf?ln=bsf"></script>
47<![endif]-->
47<script src="/Examples/jakarta.faces.resource/jq/jquery.js.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase?ln=bsf"></script>
47<script src="/Examples/jakarta.faces.resource/js/shCore.js.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase?ln=sh"></script>
47<script src="/Examples/jakarta.faces.resource/js/shBrushXml.js.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase?ln=sh"></script>
47<script src="/Examples/jakarta.faces.resource/js/shBrushJava.js.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase?ln=sh"></script>
47<script src="/Examples/jakarta.faces.resource/js/shBrushGroovy.js.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase?ln=sh"></script>
47<script src="/Examples/jakarta.faces.resource/js/shBrushJScript.js.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase?ln=sh"></script>
47<script src="/Examples/jakarta.faces.resource/faces.js.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase?ln=jakarta.faces"></script>
47<script src="/Examples/jakarta.faces.resource/js/tooltip.js.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase?ln=bsf"></script>
47<script src="/Examples/jakarta.faces.resource/js/bsf.js.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase?ln=bsf"></script>
47</head><body style="padding-top: 85px;padding-bottom: 85px;">
48        
48<script>SyntaxHighlighter.defaults['gutter'] = false;</script>
48   
49        
49<script>
50        if ($.blockUI) {
51          $.blockUI.defaults.overlayCSS.opacity=0;
52          $.blockUI.defaults.message='<h1><img src="../jakarta.faces.resource/images/waitcursor.gif.jsf?ln=bsf" /></h1>';
53        }
54        </script>
54<nav id="j_idt15" class="navbar navbar-inverse navbar-fixed-top" role="navigation"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#j_idt15_inner"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="http://www.bootsfaces.net/"><span>BootsFaces</span></a></div><div id="j_idt15_inner" class="collapse navbar-collapse navbar-ex1-collapse"><div id="j_idt16" class="container"><ul id="j_idt17" class="nav navbar-nav "><li class="divider-vertical" role="presentation"></li><li class="divider-vertical" role="presentation"></li><ul id="j_idt20" class="nav navbar-nav "><li id="j_idt21" style="cursor:pointer;"><a href="/Examples/index.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase" role="menuitem" tabindex="0"><span><i class="fa fa-home"></i></span> Home</a></li></ul><li id="j_idt22" class="dropdown"><a id="dtLj_idt22" class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">Examples<b class="caret"></b></a><ul class="dropdown-menu" role="menu" aria-labelledby="dtLj_idt22"><li id="j_idt23" style="cursor:pointer;"><a href="/Examples/starter_template.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase" role="menuitem" tabindex="0"><span><i class="glyphicon glyphicon-play-circle"></i></span> Starter Template</a></li><li id="j_idt24" style="cursor:pointer;"><a href="/Examples/grid.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase" role="menuitem" tabindex="0"><span><i class="glyphicon glyphicon-play-circle"></i></span> Grid</a></li><li id="j_idt25" style="cursor:pointer;"><a href="/Examples/jumbotron.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase" role="menuitem" tabindex="0"><span><i class="glyphicon glyphicon-play-circle"></i></span> Jumbotron</a></li><li id="j_idt26" style="cursor:pointer;"><a href="/Examples/navbar.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase" role="menuitem" tabindex="0"><span><i class="glyphicon glyphicon-play-circle"></i></span> Navbar</a></li><li id="j_idt27" style="cursor:pointer;"><a href="/Examples/navbar-static-top.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase" role="menuitem" tabindex="0"><span><i class="glyphicon glyphicon-play-circle"></i></span> Static Top navbar</a></li><li id="j_idt28" style="cursor:pointer;"><a href="/Examples/navbar-fixed-top.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase" role="menuitem" tabindex="0"><span><i class="glyphicon glyphicon-play-circle"></i></span> Fixed Top navbar</a></li><li id="j_idt29" style="cursor:pointer;"><a href="/Examples/dashboard.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase" role="menuitem" tabindex="0"><span><i class="glyphicon glyphicon-play-circle"></i></span> Dashboard</a></li><li id="j_idt30" style="cursor:pointer;"><a href="/Examples/signin.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase" role="menuitem" tabindex="0"><span><i class="glyphicon glyphicon-play-circle"></i></span> Sign in</a></li><li id="j_idt31" style="cursor:pointer;"><a href="/Examples/theme.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase" role="menuitem" tabindex="0"><span><i class="glyphicon glyphicon-play-circle"></i></span> Theme</a></li></ul></li></ul><ul id="j_idt32" class="nav navbar-nav navbar-right "><li id="j_idt33" style="cursor:pointer;"><a href="http://showcase.bootsfaces.net/" role="menuitem" tabindex="0"><span><i class="fa fa-desktop"></i></span> Showcase</a></li></ul></div></div></div></nav><div id="j_idt34" class="container">
55
56                <style>
57                    .thumbnail { max-width: 100%; }
58                    img.thumbnail:hover, img.thumbnail:focus {
59                        border: 1px solid;
60                        border-color: #428BCA;
61                    }
62                </style>
63                <h1>Examples</h1>
64                <hr />
65                <p>These BootsFaces examples are ports of Bootstrap 3 examples.</p>
66                <p>They are built using JSF and BootsFaces's components, to show the framework in action and how it can be used to build your pages.</p>
67                <p>You can get them as a point of start for developing your projects.</p><div id="j_idt37" class="row">
68                    <!-- Row 1 --><div id="j_idt39" class="col-md-4"><a href="/Examples/starter_template.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase"><img src="/Examples/jakarta.faces.resource/starter-template.jpg.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase?ln=examples" class="thumbnail" /></a>
69                        <h4>Starter template</h4>
70                        <p>Nothing but the basics: compiled CSS and JavaScript along with a container.</p></div>
70<div id="j_idt43" class="col-md-4"><a href="/Examples/grid.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase"><img src="/Examples/jakarta.faces.resource/grid.jpg.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase?ln=examples" class="thumbnail" /></a>
71                        <h4>Grids</h4>
72                        <p>Multiple examples of grid layouts with all four tiers, nesting, and more.</p></div><div id="j_idt47" class="col-md-4"><a href="/Examples/jumbotron.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase"><img src="/Examples/jakarta.faces.resource/jumbotron.jpg.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase?ln=examples" class="thumbnail" /></a>
73                        <h4>Jumbotron</h4>
74                        <p>Build around the jumbotron with a navbar and some basic grid columns.</p></div>
75                    <!-- Row 2 --><div id="j_idt52" class="col-md-4"><a href="/Examples/navbar.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase"><img src="/Examples/jakarta.faces.resource/navbar.jpg.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase?ln=examples" class="thumbnail" /></a>
76                        <h4>Navbar</h4>
77                        <p>Super basic template that includes the navbar along with some additional content.</p></div><div id="j_idt56" class="col-md-4"><a href="/Examples/navbar-static-top.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase"><img src="/Examples/jakarta.faces.resource/navbar-static.jpg.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase?ln=examples" class="thumbnail" /></a>
78                        <h4>Static top navbar</h4>
79                        <p>Super basic template with a static top navbar along with some additional content.</p></div><div id="j_idt60" class="col-md-4"><a href="/Examples/navbar-fixed-top.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase"><img src="/Examples/jakarta.faces.resource/navbar-fixed.jpg.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase?ln=examples" class="thumbnail" /></a>
80                        <h4>Fixed navbar</h4>
81                        <p>Super basic template with a fixed top navbar along with some additional content.</p></div>
82                    <!-- Row 3 --><div id="j_idt65" class="col-md-4"><a href="/Examples/dashboard.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase"><img src="/Examples/jakarta.faces.resource/dashboard.jpg.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase?ln=examples" class="thumbnail" /></a>
83                        <h4>Dashboard</h4>
84                        <p>Basic structure for an admin dashboard with fixed sidebar and navbar.</p></div><div id="j_idt69" class="col-md-4"><a href="/Examples/signin.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase"><img src="/Examples/jakarta.faces.resource/sign-in.jpg.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase?ln=examples" class="thumbnail" /></a>
85                        <h4>Sign-in Page</h4>
86                        <p>Custom form layout and design for a simple sign in form.</p></div><div id="j_idt73" class="col-md-4"><a href="/Examples/theme.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase"><img src="/Examples/jakarta.faces.resource/theme.jpg.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase?ln=examples" class="thumbnail" /></a>
87                        <h4>Bootstrap theme</h4>
88                        <p>Use the option to load the optional Bootstrap theme for a visually enhanced experience.</p></div></div>
89                <h1>Demo Applications</h1>
90                <p>Coming Back soon.</p>
91                <hr /><div id="j_idt78" class="row">
92                    <!-- Row 1
93                    &lt;b:column span="4"&gt;
94                        &lt;h:outputLink value="http://www.bootsfaces.net/AngularTetrisOnBootsFaces/"&gt;
95                            &lt;h:graphicImage library="examples" class="thumbnail" name="ng-tetris-bsf.jpg"/&gt;
96                        &lt;/h:outputLink&gt;
97                        &lt;h4&gt;Tetris&lt;/h4&gt;
98                        &lt;p&gt;Putting it all together: BootsFaces. AngularFaces. And a lot of fun. Source code available on &lt;a target="_blank" href="https://github.com/stephanrauh/AngularTetrisOnBootsFaces"&gt;GitHub.&lt;/a&gt;&lt;/p&gt;
99                    &lt;/b:column&gt;
100                    &lt;b:column span="4"&gt; &lt;/b:column&gt;
101                    &lt;b:column span="4"&gt; &lt;/b:column&gt;
102                    --></div>
103                <br /><br /><br /></div><nav id="j_idt82" class="navbar navbar-default navbar-fixed-bottom" role="navigation"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#j_idt82_inner"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="http://www.thecoder4.eu/"><span>©2013-2024 TheCoder4Eu</span></a></div><div id="j_idt82_inner" class="collapse navbar-collapse navbar-ex1-collapse">
104        <p class="navbar-text pull-right"><a href="https://showcase.bootsfaces.net/privacy.jsf">Privacy</a> - BootsFaces 2.0.1 running with Jakarta 10 and JSF 4.0</p>
105        <!-- p class="navbar-text pull-right"&gt;&lt;h:outputText value="BootsFaces v1.0.1-OSP on Mojarra 2.2.12, PrimeFaces 5.3, AngularFaces 2.1.10 and OmniFaces 1.11" /&gt;&lt;/p --></div></div></nav>
105<script src="/Examples/jakarta.faces.resource/js/collapse.js.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase?ln=bsf"></script>
105<script src="/Examples/jakarta.faces.resource/js/dropdown.js.jsf;jsessionid=1sP3V4pwDzY9ZyRpSKByNUvph1VtTIEuONVwsLM6.systemd-bfshowcase?ln=bsf"></script>
105</body>
106</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.