I am having some issues getting Thymeleaf to behave the way I want regarding templates. I was previously using Apache Tiles which worked but I thought it was heavy weight with the configuration / XML. I had an elegant solution where I was even defining my JavaScripts and Sytlesheets in Tiles XML configuration. However I want to move away from JSPs entirely. I have seen references for both Thymeleaf and Facelets. I decided to give Thymeleaf a try but I'm having issues getting a default layout for all my other pages.
Just for some background this was my default layout file I was using with Apache Tiles.
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%# taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<tiles:importAttribute name="javascripts"/>
<tiles:importAttribute name="stylesheets"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="XXXXXXXXXXX">
<meta name="description" content="Something">
<title><tiles:insertAttribute name="title"></tiles:insertAttribute></title>
<!-- stylesheets -->
<c:forEach var="css" items="${stylesheets}">
<link rel="stylesheet" type="text/css" href="<c:url value="${css}"/>">
</c:forEach>
<!-- end stylesheets -->
</head>
<body>
<!--[if lt IE 10]>
<p class="alert alert-warning">
Warning: You are using an unsupported version of Internet Explorer. We recommend using Internet Explorer
10+. If you are a Windows XP user you'll need to download an alternative browsers such as FireFox, Chrome,
Opera, or Safari.
</p>
<![endif]-->
<!-- header -->
<div id="header">
<tiles:insertAttribute name="header"></tiles:insertAttribute>
</div>
<!-- end header -->
<!-- content -->
<div id="content">
<tiles:insertAttribute name="content"></tiles:insertAttribute>
</div>
<!-- end content -->
<!-- footer -->
<div id="footer">
<tiles:insertAttribute name="footer"></tiles:insertAttribute>
</div>
<!-- end footer -->
<!-- scripts -->
<c:forEach var="script" items="${javascripts}">
<script src="<c:url value="${script}"/>"></script>
</c:forEach>
<!-- end scripts -->
</body>
</html>
I want to replicate similar behavior with Thymeleaf where the view would be rendered inside the template, hopefully that makes since.
As far as I understand it right now Thymeleaf does not work that way. Instead you define fragments and include them on each page. It works the opposite direction.
I found this example of GitHub https://github.com/michaelisvy/mvc-layout-samples/tree/master/src/main/webapp/WEB-INF/view/thymeleaf
I don't understand the following file.
!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="headerFragment">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link th:href="#{/style/app.css}" rel="stylesheet" />
</head>
<body>
<div class="container" style="padding-top: 50px;">
<div th:fragment="menuFragment">
<div class="header well">
<img th:src="#{/images/springsource_banner_green.png}"/>
</div>
<div class="page-header">
<h1 th:text="${title}"></h1>
</div>
<ul>
<li><a th:href="#{/users/all/jsp-plain.htm}">No template</a></li>
<li><a th:href="#{/users/all/jsp-custom-1.htm}">Custom tags</a></li>
<li><a th:href="#{/users/all/jsp-custom-2.htm}">Custom tags with table tag</a></li>
<li><a th:href="#{/users/all/jsp-tiles.htm}">Apache Tiles</a></li>
<li><a th:href="#{/users/all/thymeleaf.htm}">Thymeleaf</a></li>
</ul>
</div>
</div>
</body>
</html>
This line is pointless as its not part of the fragment as when it gets included in the users.html the html structure is lost.
<div class="container" style="padding-top: 50px;">
Essentially I want something like this
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container" style="padding-top: 50px;">
<div>
<div class="header well">
<img th:src="#{/images/springsource_banner_green.png}"/>
</div>
<div class="page-header">
<h1 th:text="${title}"></h1>
</div>
<ul>
<li><a th:href="#{/users/all/jsp-plain.htm}">No template</a></li>
<li><a th:href="#{/users/all/jsp-custom-1.htm}">Custom tags</a></li>
<li><a th:href="#{/users/all/jsp-custom-2.htm}">Custom tags with table tag</a></li>
<li><a th:href="#{/users/all/jsp-tiles.htm}">Apache Tiles</a></li>
<li><a th:href="#{/users/all/thymeleaf.htm}">Thymeleaf</a></li>
</ul>
</div>
</div>
<div id="content">
<!-- PAGES SHOULD RENDER HERE, example User.html -->
</div>
<!-- scripts -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
Any ideas or best practices?
You want the Thymeleaf Layout Dialect.
Related
I'm using Laravel to create a web application. So I created a header.css file and it is in public/assets/css/header.css. What I am trying to do is just style the header, but it isn't working.
In my default.blade.php I have
<!doctype html>
<html>
<head>
#include('includes.head')
</head>
<body>
#include('includes.header')
<div id="main" class="row">
#yield('content')
</div>
<footer class="row">
#include('includes.footer')
</footer>
</div>
</body>
</html>
My head.blade.php includes the link for the external stylesheet and it is
<meta charset="utf-8">
<meta name="description" content="blah blah.">
<meta name="author" content="Hunter Marshall">
<title>Elite Training Pro</title>
<!-- load bootstrap from a cdn -->
<!--<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/3.0.3/css/bootstrap-combined.min.css">-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link media="all" type="text/css" rel="stylesheets" href="{{ URL::asset('assets/css/header.css') }}"></link>
My header.blade.php is
<div class="navbar nav-background">
<div class="navbar-inner">
<a id="logo" href="/">Elite Training Pro</a>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</div>
My header.css is
.nav-background {
background-color:green;
}
Now I've tried HTML::style(), just assets(), HTML::to() but nothing seems to work. I can see the link to the stylesheet in my head when I look at the source code, but there is no background color. I also don't see the file in the inspect source.
Just use / before the folder path directive
<link rel="stylesheet" href="/assets/css/styles.css">
In your code try like this
<link media="all" type="text/css" rel="stylesheets" href="{{ URL::asset('/assets/css/header.css') }}"></link>
This works
href="{{ asset('assets/css/header.css') }}
I'am using Bootstrap in jsp file, and using tag nav nav-tabs, here is my code in .jsp file:
before </head>
<%# page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>content sales</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
and before </body>
<!-- boostrap -->
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script>
$('#myTab a').click(function(e){
e.preventDefault();
$(this).tab('show')
})
</script>
I add this script code because i try solution from Bootstrap nav tabs/pills works only at first interaction, but it doesn't work.
and here is my body content:
<div class="container">
<ul id="myTab" class="nav nav-tabs">
<li role="presentation" class="active">All content</li>
<li role="presentation" >Unbought content</li>
</ul>
<div class="tab-content">
<!-- all content -->
<div class="tab-pane active" id="home">
<table class="table">
something in table using jsp
</table>
</div>
<!-- unbought-->
<div class="tab-pane fade" id="unbought">
<table class="table">
something in table using jsp
</table>
</div>
</div>
</div>
and the problem is when i access this jsp file in chrome(version 56.0.2924.87 (64-bit)), the first time i click All content, Unbought content,it works fine, but when i try to click again, i can not switch from All content to Unbought content or from Unbought content to All content.
Can anybody help?
I tried put all the content into a html file, the result is same with jsp file.
I change a link source of Bootstrap and it works fine. So i think the problem maybe is the source of Bootstrap have not been included correctly.
File Structure in eclipse
Css files are not loading at run time so that i lost my design which i did. Below is my code for login page but the thing is am getting links for css files which are not loading if i click that link that file will open in the eclipse IDE
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Login Page</title>
<!-- Bootstrap Core CSS -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="../bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-panel panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Please Sign In</h3>
</div>
<div class="panel-body">
<form role="form" action="login" method="get">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="E-mail" name="userName" type="text" autofocus>
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" type="password" value="">
</div>
<div class="checkbox">
<label>
<input name="remember" type="checkbox" value="Remember Me">Remember Me
</label>
</div>
<!-- Change this to a button or input when using this as a form -->
<!-- Login -->
<input type="submit" value="login" />
<br>
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown">Registration Yourself
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Student</li>
<li>Parent</li>
<li>Teacher</li>
</ul>
<p>Forgot your password ?</p>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
</body>
</html>
I think this is because it is unable to find out that location in root directory
For the Welcome page no need to add ../
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
keep like this
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.5.2/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/startbootstrap-sb-admin-2/1.0.8/css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.5.2/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/startbootstrap-sb-admin-2/1.0.8/js/sb-admin-2.js"></script>
I am learning on how to make a canvas menu with Foundation & I made this example but it does not work at all!
Here's the code:
<!DOCTYPE html>
<!--[if IE 9]>
<html class="lt-ie10" lang="en">
<![endif]-->
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>thenewboston</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="main.css">
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<!-- Toggle button -->
<a class="left-off-canvas-toggle" href="#">Toggle Menu</a>
<!-- Offcanvas menu -->
<aside class="left-off-canvas-menu">
<ul class="no-bullet">
<li>Home</li>
<li>Profile</li>
<li>Logout</li>
</ul>
</aside>
<!-- Main content -->
<div class="row">
<div class="medium-6 columns bg-2">Hey now dude</div>
<div class="medium-6 columns bg-3">This is some sample content</div>
</div>
<!-- Exit overlay -->
<a class="exit-off-canvas"></a>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Everything looks perfect and my css & js folders are correctly placed at the same directory. I also test if foundation works or not with another simple example and it worked fine. I really don't know why it's not working. Please if you know how to solve it ,please let me know.. Thanks!
I am new to Twitter Bootstrap. I am working on a webpage. It works fine when I use Bootstrap CDN. When I remove the Bootstrap CDN and try to use Twitter Bootstrap plugin, it seems unable to access the Bootstrap plugin. The webpage becomes a blank page where only words are displayed.
I have two questions here:
How to check if I have installed the Twitter Bootstrap plugin successfully. Here is the link I have followed to install it. I also follow the instructions in the documentation provided on the webpage.
How to check if the Twitter Bootstrap plugin is loaded successfully?
Here is the HTML code in my sample.
It works partially (some parts are working) when i remove the comment for meta name="layout"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Comment Home</title>
<!--meta name="layout" content="main"/-->
<!--meta name="viewport" content="width=device-width, initial-scale=1"-->
</head>
<body>
<div class="container">
<div class="header clearfix">
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation" class="active">Home</li>
<li role="presentation">About</li>
<li role="presentation">Contact</li>
</ul>
</nav>
<h3 class="text-muted">Online Library System</h3>
</div>
<div class="jumbotron">
<h1>Kowledge is everything!</h1>
<p class="lead">For the new member please sign up today to get the privilledge.</p>
<p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p>
</div>
<div class="row marketing">
<div class="col-lg-6">
<h4>Top book</h4>
<div class="col-lg-6">
<table class="table">
<tr>
<td>
<g:img dir="images" file="index.jpeg" width="110" height="140px"/>
</td>
<td>
<g:img dir="images" file="index2.jpeg" width="110" height="140px"/>
</td>
<td>
<g:img dir="images" file="index3.jpeg" width="110" height="140px"/>
</td>
</tr>
</table>
</div>
<div class="col-lg-6">
</div>
</div>
<div class="col-lg-6">
<h4>Regulation & Rules</h4>
<p>Penalty charges will be required upon any overdue. </p>
<p><i> *Charges will be diffence based on the book access level.</i></p>
<hr>
<h4>Operating Day</h4>
<p>Monday - Sunday : 8:00AM to 10:00PM</p>
<hr>
<h4>Address</h4>
<p>Perpustakaan Negara Malaysia (Ibu Pejabat)</p>
<p>232, Jalan Tun Razak,</p>
<p>50572 Kuala Lumpur, Malaysia.</p>
</div>
</div>
<footer class="footer">
<p>© 2015 Company, Inc.</p>
</footer>
</div> <!-- /container -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>
Here is my main.gsp
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"><!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title><g:layoutTitle default="Grails"/></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="${assetPath(src: 'favicon.ico')}" type="image/x-icon">
<link rel="apple-touch-icon" href="${assetPath(src: 'apple-touch-icon.png')}">
<link rel="apple-touch-icon" sizes="114x114" href="${assetPath(src: 'apple-touch-icon-retina.png')}">
<asset:stylesheet src="application.css"/>
<asset:javascript src="application.js"/>
<g:layoutHead/>
</head>
<body>
<div id="grailsLogo" role="banner"><asset:image src="grails_logo.png" alt="Grails"/></div>
<g:layoutBody/>
<div class="footer" role="contentinfo"></div>
<div id="spinner" class="spinner" style="display:none;"><g:message code="spinner.alt" default="Loading…"/></div>
</body>
</html>