This question is just the same as: Primefaces override doesn't work after non ajax refresh who wasn't corrected answered.
This is happening:
I have this page: which have the desired look
And then when I add a document which does a non-ajax request it looks like this:
I'm adding the css libraries like this in the head:
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputStylesheet library="css" name="general.css"/>
<h:outputStylesheet library="css" name="mEstilo.css"/>
<ui:insert name="recursos"></ui:insert>
<title><ui:insert name="titulo">mGestion</ui:insert> - mGestion</title>
</h:head>
The only situation where the css stop working is there, after a non-ajax request, when I press this button:
<p:commandButton id="b_crearDocumento" value="Aceptar" actionListener="#{iniciarProcesoController.crearDocumento()}"
disabled="#{!iniciarProcesoController.esDocumentoValido}" oncomplete="w_verImportarD.hide()" ajax="false">
</p:commandButton>
That is an accept button for upload a document, with this fileUpload:
<p:column>
<p:fileUpload fileUploadListener="#{iniciarProcesoController.imagenListener}"
mode="advanced" auto="true" update="p_botones"
sizeLimit="20971520"/>
</p:column>
The document is uploaded fine, that's the only problem with this process, the css got messed up.
Related
I've been fighting a problem where my primefaces app could not locate my stylesheet using the tag
I finally "solved" it by using:
<link rel="stylesheet" type="text/css" href="css/my.css"/>
I'm still wondering why the tag didn't work, especially since I spent a while on it thinking maybe the file was in a bad location.
In the code below, when I inspect the source I don't see the link tag nor does it load the CSS file. I've left in the combinations I tried as well as the link tag which does work.
<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.org/ui">
<h:head>
</h:head>
<h:body>
<h:outputStylesheet library="css" value="my.css"/>
<h:outputStylesheet value="css/my.css"/>
<link rel="stylesheet" type="text/css" href="css/my.css" />
<h1>Hello World PrimeFaces</h1>
<h:button value="xys" />
<p:editor value="uuu" />
<p:spinner />
</h:body>
</html>
I'm trying to add styles in JSF using css, but I try to open the xhtml, it won't recognize the style.
I've been searching how to do it and I found this:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Hello</title>
<h:outputStylesheet library="css" name="style.css" />
</h:head>
<h:body>
<div>
<h1>Hello</h1>
</div>
<div>
</div>
</h:body>
</html>
And as I understood I have to create my css file in the next folder:
WebPage
|_WEB-INF
|_resources
|_css
|_style.css
I'm using Netbeans 8.0.2 and JSF 2.2
With the last changes I got this:
<h:head>
<h:outputStylesheet name="./css/style.css"/>
</h:head> <h:body>
</h:body>
<style type="text/css"></style></html>
Open developer tools in your browser and load the page, if you get a 404 for style.css then take a look at the answer provided by Sebastián Ulloa
Can you try moving this line
<h:outputStylesheet library="css" name="style.css" />
Just after body tag like this:
<h:body>
<h:outputStylesheet library="css" name="style.css" />
...
</h:body>
My JSF 2.0 web project isn't rendering graphics from CSS. It loads images but it cannot load any background color or anything at all. Am I doing anything wrong here? My CSS file contains code for coloring and other things. I am using Bootstrap. My output page is plain black and white. I do not see any error messages in Eclipse.
<?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"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<f:facet name="meta-tags">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Aayush Mittal</title>
</f:facet>
<!-- Bootstrap -->
<f:facet name="css-files">
<h:outputStylesheet name="css/bootstrap.css"></h:outputStylesheet>
<h:outputStylesheet name="css/additional.css"></h:outputStylesheet>
<h:outputStylesheet name="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800"></h:outputStylesheet>
<h:outputStylesheet name="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css"></h:outputStylesheet>
</f:facet>
<f:facet name="js-files">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<h:outputScript name="js/bootstrap.min.js"></h:outputScript>
<h:outputScript name="js/custom.js"></h:outputScript>
</f:facet>
</h:head>
<h:body class="main-body" data-spy="scroll" data-target="#navbar-collapse1" data-offset="50">
<div class="container-fluid body-prop1" id="home">
<div class="container-fluid section-contents">
<h1 class="welcome-text">Hola, Amigo!</h1>
<div class="container-fluid personal-info">
<p class="personal-info-text">
This website is my experiment with Bootstrap framework. I will try to put up my college projects and personal projects live here. I would also add some interesting stuff
including some blog posts. Feel free to "Stalk" me on Twitter, check out my code on GitHub, or just shoot me an Email if you find anything interesting.
</p>
</div>
</div>
</div>
</h:body>
</html>
This is my directory structure for the project:
OK, so I transferred all the folders - images, js, fonts, and css to a resources directory and moved that directory under WEB-INF folder. After that, I added following code to my web.xml file:
<context-param>
<param-name>
javax.faces.WEBAPP_RESOURCES_DIRECTORY
</param-name>
<param-value>/WEB-INF/resources</param-value>
And that made things to work. Now that I am following the official pattern of using the resources folder here, I had to get rid of relative paths and use only file names. Names of the folders that the files are in go to the library attribute. For example:
<h:outputStylesheet name="css/bootstrap.css"></h:outputStylesheet>
becomes
<h:outputStylesheet library="css" name="bootstrap.css"></h:outputStylesheet>
Also, the resources folder can be put in the WebContent directory as well as long as you put all that information in web.xml. I am writing these instructions just in case someone gets stuck on the same thing!
Is there a way to do that? I mean, I want to declare some css classes (either by using style tag or importing a .css resource) and be able to see those imported classes when using autocomplete in a templated view. i.e:
/resources/css/style.css:
.class1{ display: none; }
/views/template.xhtml:
(...)
<head>
<h:outputStylesheet library="css" name="style.css" />
</head>
(...)
view.xhtml:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
template="/views/template.xhtml">
(...)
<h:outputText value="HiddenValue" styleClass="<CTRL+SPACE should show class1>"/>
(...)
</ui:composition>
JBoss Tools is capable of this (and many more).
How to install it is detailed in this answer.
Have xhtml templ.xhtml layout.
Include it to other .xhtml like:
<ui:composition template="/template/templ.xhtml">
Define conditionals in templ.xhtml like:
<h:head>
<h:outputText value="<!--[if lt IE 8]><h:outputStylesheet library="css" name="styleie8.css" /><![endif]-->" escape="false" />
</h:head>
styleie8.css is not loaded,but when something changed and saved in templ.xhtml when Tomcat is running,that it loaded ok.
How to do,that JSF loads conditionals immediately when Tomcat started?
Note:
tried to use following alternatives:
1.
<!--[if lt IE 8]>
<h:outputStylesheet name="styleie8.css" library="css"/>
<![endif]-->
2.
<o:conditionalComment if="lte IE 8">
<link rel="stylesheet" href="styleie8.css" />
</o:conditionalComment>
3. #{request.contextPath}/resources instead of simple path.
The result is the same - I need resave .xhtml template in order to load conditionals css.
Your initial code snippet is wrong. You can't print a <h:outputStylesheet> in a <h:outputText escape="false">. The <h:outputStylesheet> is a JSF component which is supposed to generate HTML, but in a <h:outputText escape="false"> it would be printed literally as-is. If you open the page in browser and do rightclick, View Source, then you should have discovered this yourself. This is not right. The webbrowser understands only HTML which should be <link rel="stylesheet">.
Provided that you've placed the stylesheet in /resources/css/styleie8.css, then the following should work:
<h:outputText value="<!--[if lte IE 8]><link rel="stylesheet" href="#{request.contextPath}/resources/css/styleie8.css" /><![endif]-->" escape="false" />
As to the alternatives you tried, 1) would not work as it would be escaped. 2) should work assuming that the href points to the right URL. In the example as you've posted, it assumes the CSS file to be in the same folder as the view. However, if it is still located in /resources/css/styleie8.css, then you should have used:
<o:conditionalComment if="lte IE 8">
<link rel="stylesheet" href="#{request.contextPath}/resources/css/styleie8.css" />
</o:conditionalComment>
3) should work, assuming that you provided the right URL.
The following line will just output your string:
<h:outputText value="<!--[if lt IE 8]><h:outputStylesheet library="css" name="styleie8.css" /><![endif]-->" escape="false" />
h:outputStylesheet is also just outputted and not handled as a component. Like this h:outputStylesheet is used as a component:
<h:outputText value="<!--[if lt IE 8]>" escape="false" />
<h:outputStylesheet library="css" name="styleie8.css" />
<h:outputText value="<![endif]-->" escape="false" />
I think you where close with your second alternative. You probably ran into a 404 error because of a missing context path there.