Am farely new to JSF and I get easily confused between JSF and Facelets when I read tutorials...
What are Facelets ?..Is JSF & Facelets the same ?...
How is Facelets different from JSTL ?
Facelets is a powerful but lightweight page declaration language that is used to build JavaServer Faces views using HTML style templates and to build component trees. Facelets features include the following:
·Use of XHTML for creating web pages
·Support for Facelets tag libraries in addition to JavaServer Faces and JSTL tag libraries
·Support for the Expression Language (EL)
·Templating for components and pages
Basically, Facelets allows you to add template tag libraries (XML documents) that are useful for adding UI controls in html pages, if you work with JSF. this declaration is an example of Facelets:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html">
<!-- look at the xml library 'import' -->
<body>
<h:form>
<h:outputText value="Welcome, #{loggedInUser.name}" disabled="#{empty loggedInUser}" />
<h:inputText value="#{bean.property}" />
<!-- look at this tags, the special mark 'h:outputText'... -->
<h:commandButton value="OK" action="#{bean.doSomething}" />
</h:form>
</body>
</html>
In conclusion, Facelets provides the tools (template tag libraries) for UI controls and JSF allows the communication of this controls with back-beans.
http://en.wikipedia.org/wiki/Facelets
http://docs.oracle.com/javaee/6/tutorial/doc/gijtu.html
Related
I noticed that on JSF pages i can include templates in my xhtml page like
<ui:composition template="/WEB-INF/tmp/tmp.xhtml">
is there any alternative to this using JSP Pages+ Hibernate?
With plain JSP you can only reuse content with instructions like:
<%# include file="banner.jspf" %>
JSF facelets allow passing parameters to the facelet to do this with JSP you would need an additional framework like struts.
I am using Spring Boot for an MVC application, and my view technology is Thymeleaf. One of the things I need to do is copy the HTML of an existing website (not my doing...) and render it using Thymeleaf. However, some of the website's source HTML contain unclosed HTML tags (such as <meta>, <link>, <input>), or HTML tags with elements not surrounded by quotes, for example:
<div id=1></div>
instead of
<div id="1"></div>
Of course in the browser this works... But Thymeleaf will not allow this and doesn't serve the page. Is there any way to allow more lenient rules for this? I've searched Thymeleaf's documentation and Spring Boot reference and have found no answer.
Just for clarification - I've not even configured my own beans for Thyemeleaf, just added it to the classpath via maven as one of the spring-boot-starters. So right now these are default settings.
I know i am giving answer after long time but still if it can help to anyone it's good to share.
I resolved the problem after setting up one property "spring,thymeleaf.mode" to "LEGACYHTML5".
spring.thymeleaf.mode=LEGACYHTML5
And in the pom.xml, add the dependency:
<dependency>
<groupId>net.sourceforge.nekohtml</groupId>
<artifactId>nekohtml</artifactId>
<version>1.9.21</version>
</dependency>
If you want to disable caching of thymeleaf then thymeleaf caching
spring.thymeleaf.cache=false
Spring Boot 1.5.3 supports Thymeleaf 3. Thymeleaf 3 has full html5 markup support.
Add following lines to your pom.xml to override Thymeleaf version in Spring boot and you'll be able to use unclosed tags.
<properties>
<thymeleaf.version>3.0.6.RELEASE</thymeleaf.version>
<thymeleaf-layout-dialect.version>2.2.1</thymeleaf-layout-dialect.version>
...
</properties>
As #mussdroid said, everything needs to be in valid XML. Here is part of Thymeleaf's documentation explaining the background for this: http://www.thymeleaf.org/doc/articles/fromhtmltohtmlviahtml.html
Also, if this is a problem, I believe you can turn on legacy-mode to allow non-XML templates, though I would prefer using valid XML if possible:
http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#what-kind-of-templates-can-thymeleaf-process
I don't know myself how to change the mode, but I'm sure DuckDuckGo does or someone on this site.
Everything should be xthml format
For example ;
HTML LINK
<link rel="stylesheet" type="text/css" href="mystyle.css">
THYMELEAF LINK SHOULD BE ending with "/> "
<link rel="stylesheet" href="print.css" media="print" type="text/css" />
HTML META
<meta charset="UTF-8">
THYMELEAF META SHOULD BE ending with "/>"
<meta charset="utf-8"/>
Samples
<input type="text" name="lastname" disabled /> wrong
<input type="text" name="lastname" disabled="disabled" /> correct
otherwise pages will not be displayed because of xhmtl rules applied.
Please have a look at the link , avoid this kind of mistakes
HTML and XHTML
On the other hand when the page is return to browser you will see xhtml rules converts to html format again. But the actually page it run on a server before sending client thymeleaf xhtml rules are applied.
In Eclipse Indigo (for Java EE Developers, JBoss Tools are installed) I
created new "Dynamic Web Project",
enabled the JSF v 2.0 from Project Facets and
added xhtml file whose content 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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head></h:head>
<body>
<h:messages layout="table" />
</body>
</html>
Now I want to see validation warnings / errors when I change the JSF tag or its attribute to some invalid value like these:
Invalid tag <h:barfoo layout="table" />
Invalid attribute <h:messages barfoo="table" />
Invalid attribute val <h:messages layout="barfoo" />
Currently I cannot see any warnings for all 3 ones in Eclipse. How can I validate the page?
The autocompletion (Ctrl+Space) is just working fine for tags and attributes. JBoss AS 7.1.1 is registered to Eclipse.
I've also had this problem a couple of times. You need to understand that an xhtml page can contain anything, plain text, JavaScript, html tags as well as lots of other types of tags. now the h: prefix is meant to indicate jsf tags, but remember you can also create custom tags that extend the h: prefix. So even though the tags are not available at the default namespace. eclipse won't warn you, however it will fail at runtime. you will get validation warnings if your xml is not well formed, but that's about it. That's one of the downsides of xml being so malleable.
Is there a way to just run the one page so that I can see the generated html (and css) as it would look to the user even if it is essentially non-functional? Standalone JSF page as it were. I want to review how I am setting up forms to see if they make sense form a user standpoint before actually coding for the form's fields. I'm using maven and netbeans but not sure if the latter is relevant.
If you're using JSF2 Facelets, then you can just design your forms with plain HTML and use the jsfc attribute to specify the respective JSF component which should be used during JSF runtime. E.g.
<form jsfc="h:form">
<label jsfc="h:outputLabel" for="input1" />
<input type="text" jsfc="h:inputText" id="input1" value="#{bean.input1}" required="true" />
<span jsfc="h:message" for="input1" />
<input type="submit" jsfc="h:commandButton" value="Submit" action="#{bean.submit}" />
</form>
Reading the Facelets <ui:xxx> taglib documentation should also give some insights. E.g.
<span jsfc="ui:remove">
This is present during design time, but is removed during JSF runtime.
</span>
<div jsfc="ui:repeat" value="#{bean.items}" var="item">#{item}</div>
<table>
<tr jsfc="ui:repeat" value="#{bean.items}" var="item">
<td>#{item.id}</td>
<td>#{item.name}</td>
</tr>
</table>
And the fact that you can use <ui:composition> to specify the start and end of a Facelet composition (e.g. an include file or a tag file). Any content outside will be disregarded during runtime, but you can still put some HTML around during designtime so that you can easily preview complete designs in which the include file or tag file is supposed to be part of.
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
>
<head>
...
</head>
<body>
...
<ui:composition>
Here you can design content of include file or
tag file as if it's part of the whole design.
</ui:composition>
...
</body>
</html>
This all allows you to preview HTML/CSS designs without needing a JSF runtime.
JBoss Tools for Eclipse have rudimentary support for JSF-tags in their visual editor.
I played briefly with it, but it did not support our legacy pages fully, so I left it at that. It may work better when starting with a blank page.
You can not execute a JSF page directly without deploying the built application. You have to deploy it, and only then will you be able to display executed the page.
OK, so I am trying to set up a simple JSF application. I'm using NetBeans 6.8, Glassfishv3 and Maven2. I made a JSP document like so:
<?xml version="1.0" encoding="utf-8"?>
<html xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<f:view>
<head>
<title><h:outputText value="#{Welcome.title}"/></title>
</head>
<body>
<h:outputText value="Welcome"/>
</body>
</f:view>
</html>
Problem is, if I navigate to this page (http://myHost/myApp/faces/welcome.jspx), it is returned as an XML document, but with the ${Welcome.title} value populated:
<?xml version="1.0" encoding="UTF-8"?>
<html><head><title>Gymix - Welcome</title></head><body>Welcome</body></html>
In Internet Explorer this looks like I would have opened an XML document. In Google Chrome the title is printed next to the text Welcome and instead of the title the URL to the page is printed on the tab.
If I change the JSP document to a plain JSP page (taglibs instead of xmlns and so on) it works and I get a proper page returned. Any ideas on what's wrong? Thanks!
Edit: sadly none of the quick fixes fixed this, so I'll look into this more. BTW, my pom.xml has jsf-api and jsf-impl dependencies with the version for both set to 1.2_14
Aside from the fact that you need to set the proper doctype and content type so that the browser knows what to do with the page, you also should get rid of the old fashioned jspx format and use xhtml format to get the most benefit of Java EE 6-shipped JSF 2.0 and Facelets.
The given code should be changed to:
<?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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>#{welcome.title}</title>
</h:head>
<h:body>
Welcome
</h:body>
</html>
Note that the doctype is included and that JSF 2.0 / Facelets will automatically take care about the right content type with help of the <h:head> component. Also note the absence of the <f:view> tag, this isn't needed anymore in Facelets.
You probably also need to reconfigure your webapp to make use of the full powers of JSF 2.0 and Facelets. To learn more about JSF 2.0 and Facelets, I strongly recommend to go through the Java EE 6 tutorial part II chapters 4-9.
Good luck.
Update: as per the comment of bobince: I would add an important note; it is true that the XML declaration (the first line) would mess the rendering mode of some webbrowsers (also see the site behind the doctype link here above), but that's certainly not an issue here. Facelets removes the XML declaration during generating the HTML of the page. The XML declaration is simply there because Facelets needs to parse the page using a XML based tool first. We're talking about a component based MVC framework and XML based templating technology, not about a plain vanilla HTML page ;)
I think you need to put in a valid doctype.
This would go below your xml declaration:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
You have to tell the browser what you're sending. I'm not exactly sure of how to do it inside a JSP though, so you'll have to figure out yourself or wait until someone more knowledgeable than me tells you.
You have to send the Content-Type HTTP header indicating your file is a text/html; charset=UTF-8.
Content-Type: text/html, charset=UTF-8