Mixing
JSF Material Design Lite
JSF Material Design Lite
I just tried setting up a simple little example jsf application using material design lite. The xhtml page I created uses parts of one of their basic templates, in this case from mdl-template-dashboard:
<!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"
xmlns:p="http://primefaces.org/ui"
xmlns:jsf="http://xmlns.jcp.org/jsf"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://primefaces.org/ui ">
<head>
<title>Hello JSF 2!</title>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.cyan-light_blue.min.css"/>
</head>
<body>
#{welcome.message}
<main class="mdl-layout__content mdl-color--grey-100">
82%
82%
82%
82%
Non dolore elit adipisicing ea reprehenderit consectetur culpa.
</div>
View options
Click per object
Views per object
Objects selected
Objects viewed
Change location
<i class="material-icons">location_on</i>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
But I am receiving the error that it can not resolve the main, svg and use tags. How do I get them to be recognized?
I don't see any jsf in here other than the namespaces... and an EL (not JSF) or is the page a facelets page? Then it should be tagged facelets instead of jsf
– Kukeltje
Jun 29 at 9:01
And this code 'just works' for me too in WildFly 10, FireFox 59. No errors at all. Please check different browsers. @Ravi is right... And it certainly is not JSF related. And where is the error generated? Client side? Server side?
– Kukeltje
Jun 29 at 20:21
1 Answer
1
Using JSF you must use different namespaces for tags such as head, body and form. There are some alternatives that enable them to not be mandatory, but in your case you can just provide the correct names for the main tags:
head
body
form
<!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"
xmlns:p="http://primefaces.org/ui"
xmlns:jsf="http://xmlns.jcp.org/jsf"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://primefaces.org/ui ">
<h:head>
<title>Hello JSF 2!</title>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.cyan-light_blue.min.css"/>
</h:head>
<h:body>
<main class="mdl-layout__content mdl-color--grey-100">
//your code here
</main>
</h:body>
</html>
For more examples, you can check this simple quickstart project for JSF: WildFly Quickstart
How would this fix the error about main svg and use tags? Using h:head (h:body is less relevant in modern times, often a <body> also works) is only relevant if you use JSF tags that need to load script etc. A plain
<h:outputText> e.g. does not require it. My suspicion is more towards the doctype.– Kukeltje
Jun 29 at 20:19
<h:outputText>
And I just tried... Your page does not result in an error, but neither does the page in the question. It 'just works' for me in wildfly 10, firefox 59
– Kukeltje
Jun 29 at 20:20
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
What version of IE are your testing? Do you see any errors in logs or on the browser? i was able to run the above code in my test application.
– Ravi
Jun 28 at 19:53