My professor is making my class use JSF to build our website, and I'm not too familiar with the xhtml syntax. I want to use Bootstrap since I'm used to using it for html.
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Facelet Title</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</h:head>
<h:body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
</h:body>
</html>
But I get this error:
Error Parsing /index.xhtml: Error Traced[line: 10] The element type
"link" must be terminated by the matching end-tag "".
Good professor.
close your tag on:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
you should also add type="text/css" or use <h:outputStylesheet if your css is local
Related
I am using thymeleaf for my front end design ,I create a nav bar and
I want this nav bar work for all pages, my Requirement is make one nav
bar and use this nav bar in every page ,with out define another nav
bar in separate page .
I create a nav bar inside my fragments folder that situated inside
template folder
When i call my nav bar in my index page it is not working
Here is my code of index page
index.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Coursel</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>
<script type="text/javascript" src="/static/demo.js"></script>
</head>
<body>
<nav th:replace="/fragments/nav :: nav-front"></nav>
<div class="container-fluid">
here my register form codes
</div>
</body>
</html>
nav.html
<nav class="nav">
<a class="nav-link active" th:href="#{/templates/index.html}">Active</a>
<a class="nav-link active" th:href="#{/templates/index.html}">Register</a>
<a class="nav-link active" th:href="#{/templates/index.html}">Login</a>
<a class="nav-link active" th:href="#{/templates/index.html}">AboutUs</a>
</nav>
Here is my project structure
I use IntelliJ IDEA as code editor.
It is possible, look into Thymeleaf Layout Dialect.
In short:
you create some layout.html in your templates folder. In it:
<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<!-- all common head tags - meta etc. -->
<title layout:title-pattern="$CONTENT_TITLE - $LAYOUT_TITLE">App name</title><!-- define title in your page template and it will be added too your app name, e.g. 'Home - My App' -->
</head>
<body>
<nav>
<!-- your nav here -->
</nav>
<section layout:fragment="content">
<!-- don't put anything here, it will be replaced by the page contents -->
</section>
</body>
</html>
And in you page templates:
<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{/path/to/layout.html}">
<head>
<title>Page name</title>
</head>
<body>
<section layout:fragment="content">
<p>This will be added into your layout!</p>
</section>
</body>
</html>
In order to make it work, you will need to add it to your templateEngine() bean definition:
#Bean
public SpringTemplateEngine templateEngine() {
SpringTemplateEngine templateEngine = new SpringTemplateEngine();
templateEngine.setTemplateResolver( thymeleafTemplateResolver() );
templateEngine.addDialect( new LayoutDialect() );
return templateEngine;
}
See mvnrepository to import this dialect using maven.
I use JSF 2.0 and the Apache Tomcat Server version 8. I have a simple JSF program that consists of two pages. In the first one the user enters his name and click a button which takes the user to the second page which displays "welcome" and the name that user entered in the first page. The key point here is that I'm trying to use regular html tags instead of JSF tags. So, I'm using:
<input type="text" id="myname" class="form-control" jsf:id="myname" jsf:value="#{testBean.name}">
instead of:
<h:inputText value="#{testBean.name}" />
But, executing the program, the only thing I see in the second page is "welcome", the name does not appear.
Does anyone have an idea why it is not working? Did I use "jsf:id and jsf:value" properly?
The code is below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:jsf="http://xmlns.jcp.org/jsf"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions"
lang="en">
<h:head>
<meta charset="utf-8"></meta>
<meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title> Faculty </title>
<title>Bootstrap 101 Template</title>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="arabicfonts/arabicfont.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</h:head>
<f:view>
<h:body>
<h:form>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-primary">
<div class="panel-heading text-center">
Updating Faculty
</div>
<div class="panel-body">
<div class="form-group">
<label for="myname" class="control-label"> My name is </label>
<div>
<input type="text" id="myname" class="form-control" jsf:id="myname" jsf:value="#{testBean.name}">
</input>
</div>
</div>
</div>
<div class="panel-footer">
<div class="text-center">
<h:commandButton class="btn btn-success" value="Do it" action="welcome"/>
</div>
</div>
</div>
</div>
</div>
</div>
</h:form>
</h:body>
</f:view>
</html>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Welcome</title>
</h:head>
<h:body>
<h3>Welcome #{testBean.name}</h3>
</h:body>
</html>
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
#ManagedBean(name="testBean")
#SessionScoped
public class TestBean implements Serializable
{
private String name;
public String getName() { return name; }
public void setName(String newValue) { name = newValue; }
}
I have googled for this and I am not an expert on it either. I tried the following code thinking I am doing it right to implement a simple autocomplete textbox. But does not work. Here is the code. If anyone would help out what could be wrong with it, that will be a big help. My textbox simply does not return any autocomplete suggestions when I try it.
Thanks.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="jquery.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<%--<link href="jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" />--%>
<title></title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css"/>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<script type="text/javascript">
$(function () {
$("#TextBox1").autocomplete
({
source: ["Joe", "John", "Jack", "Ben", "Bell", "Steve", "Scott"] // simple list of strings
});
});
</script>
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
There is no reference for jquery ui library in ur code
TRY TO ADD THIS :
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
I am trying to implement jsf + primefaces + twitter bootstrap:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.prime.com.tr/ui"
>
<h:head>
<title>IMPORT JSF SET ATTRIBUTES</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Le styles -->
<h:outputStylesheet name="css/bootstrap.css" />
<h:outputStylesheet name="css/bootstrap.min.css" />
<h:outputStylesheet name="css/override.css" />
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons
<link rel="shortcut icon" href="../assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
-->
</h:head>
<h:body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner navbar-large">
<div class="container">
<a class="brand" href="#">Name</a>
<ul class="nav">
<li>Link</li>
<li>Link</li>
</ul>
<form class="navbar-form pull-left">
<div class="input-append offset1">
<h:input class="span5" placeholder="put search terms here"
type="text" />
<button class="btn" type="submit">
<i class="icon-search"></i>
</button>
</div>
</form>
<ul class="nav pull-right">
<li class="dropdown"><a class="dropdown-toggle"
data-toggle="dropdown" href="#"> How to <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li class="nav-header">Link</li>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li class="divider"></li>
<li class="nav-header">Link</li>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul></li>
<li>Login</li>
<li>Signup</li>
</ul>
</div>
</div>
</div>
<div class="container">[Template content will be inserted here]</div>
<footer>
<ul class="inline text-center">
<li>© 2013</li>
</ul>
</footer>
<!--/.fluid-container-->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<h:outputScript name="js/jquery-1.7.2.min.js" />
<h:outputScript name="js/bootstrap.min.js" />
<h:outputScript name="js/jquery.dataTables.min.js" />
<h:outputScript name="js/bootstrap.js" />
</h:body>
</html>
However, I get:
<h:input> Tag Library supports namespace: http://java.sun.com/jsf/html, but no tag was defined for name: input
I really appreciate your answer!
h:input tag doesn't exist in JSF. Use some of specific input tags, for example: h:inputHidden, h:inputText, h:inputSecret, h:inputTextarea.
I have a question, are you sure you mean h:input and not h:inputtext?
sorry -> edit: you are doing the follwing:
<form class="navbar-form pull-left">
<div class="input-append offset1">
<h:input class="span5" placeholder="put search terms here"
type="text" />
<button class="btn" type="submit">
<i class="icon-search"></i>
</button>
</div>
</form>
and thats plain html, won't work with JSF
if you wanna use the magic of JSF you must do something like that:
<h:form>
<h:inputText value="#{hereIsYourManagedBean.field}" />
<h:commandButton action="#{hereIsYourManagedbean.action}">
DoJsfAction
</h:commandButton >
</h:form>
The JSF-Servlet will catch your action, render the input form, put it in your ManagedBean fields, call the method of the ManagedBean and finally create a response, depending on your method. Mostly another xhtml-site which is configured by your faces-config.xml
hello i am using thickbox as an information popup. it works well in IE7/8 & FF but in IE6 it does not display the content just garbled characters. i have attached my code and would be grateful if someone could tell me what the problem is? many thanks.
Answer
and the doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
screengrabs
IE6
http://i53.tinypic.com/9gm4jb.png
IE8
http://i56.tinypic.com/55qexf.png
Check the documentation in the following link:
[JQuery Thick box][1]
[1]: http://jquery.com/demo/thickbox/
And use the following code:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="thickbox.js"></script>
<script type="text/javascript">
function show_search (value)
{
var url= 'http://www.google.com';
tb_show('Change Details','"+url+"');
setTimeout("remove()",1*100);
return false;
}
function remove()
{
tb_remove();
alert("check");
}
</script>
</head>
<body>
<form id="hotel_search_popup">
<h2>Search Hotels</h2>
<input name="category" type="radio" value="F" class="radioSearch" onclick="return show_search(this.value);"/>
<label>Flight</label>
</form>
</body>
</html>