How can I include CSS stylesheets relative to context path in JSF 1.1?
<link href="{CONTEXT}/css/style.css" rel="stylesheet" type="text/css"/>
Like we use in JSF2.
<link href="#{resource['css:styles.css']}" rel="stylesheet" type="text/css"/>
Depends on the view technology being used:
If JSP(X), use ${pageContext.request.contextPath}:
<link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet" type="text/css"/>
If Facelets 1.x, use #{facesContext.externalContext.requestContextPath}:
<link href="#{facesContext.externalContext.requestContextPath}/css/style.css" rel="stylesheet" type="text/css"/>
If Facelets 2.x, use #{request.contextPath}:
<link href="#{request.contextPath}/css/style.css" rel="stylesheet" type="text/css"/>
Note that there's no support for #{resource} nor <h:outputStylesheet> in JSF 1.x.
I'm using JSF 2.2 with mojarra 2.2.
#{facesContext.externalContext.requestContextPath}
solves the problem for me; I was using a facelet (.xhtml).
Related
I'm using a basic file manager to maintain my webpages files. How to I begin using MDC-Web Vanilla?
In the MDC-Web Github project folder are: README.md, index.js, material-components-web.scss, and package.json.
I would expect to find <link> and <script> elements to add to MDC-Web to my project, similar to how MDL and Bootstrap work. Where do I find those?
This works. You need to attach/initialize JS on some components/elements.
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:100,300,400,700,900">
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
The code below used to be working when I was using faces 2.1.7. But, it fails to work after I changed my TomEE 7 to use faces 2.2.9.
<link rel="stylesheet" href="#{resource['default:css/main.css']}&v=#{config['css.version']}" type="text/css" />
In 2.2.9 it generates the following code:
<link rel="stylesheet" href="&v=css9.999" type="text/css" />
Any idea why it is not generating the #{resource['default:css/main.css']} EL expression?
I'm using OmniFaces conditionalComment to load a javascript file for IE 6 browsers. On the webiste it says the script should be included in the page as:
<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="selectivizr.js"></script>
<noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->
This is not valid xml, so can't be used in the JSF xhtml files. Instead I use this:
<h:body>
<f:facet name="last">
<o:conditionalComment if="if (gte IE 6)&(lte IE 8)">
<h:outputScript library="js" name="selectivizr-min.js" target="head"/>
</o:conditionalComment>
</f:facet>
...
</h:body>
I include the script in the body part of the xhtml and put it in the facet name="last", so it is included after JQuery (I use PirmeFaces and read that's the safest way to do that). target="head" ensures that it is written to the head section of the resulting html file. The link to the script is included in the correct part of the document (after the PrimeFaces imports), but it is not surrounded by the conditional comments.
Here is the relevant part of the html (reformatted for easier reading):
<head>
<link type="text/css" rel="stylesheet" href="/javax.faces.resource/theme.css.xhtml?ln=primefaces-aristo" />
<link type="text/css" rel="stylesheet" href="/javax.faces.resource/primefaces.css.xhtml?ln=primefaces&v=5.1" />
<script type="text/javascript" src="/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&v=5.1"></script>
<script type="text/javascript" src="/javax.faces.resource/primefaces.js.xhtml?ln=primefaces&v=5.1"></script>
<script type="text/javascript" src="/javax.faces.resource/jquery/jquery-plugins.js.xhtml?ln=primefaces&v=5.1"></script>
<script type="text/javascript" src="/javax.faces.resource/omnifaces.js.xhtml?ln=omnifaces"></script>
<link type="text/css" rel="stylesheet" href="/javax.faces.resource/styles.css.xhtml?ln=css" />
<script type="text/javascript" src="/javax.faces.resource/selectivizr-min.js.xhtml?ln=js"></script>
The last line is missing the comments (!--[if (gte IE 6)&(lte IE 8)]> ...).
What am I doing wrong? Any suggestions?
Cheers,
Dominik
This problem is two-fold:
The <f:facet name="last"> makes no sense in this context. Get rid of it. It would be ignored including any of its children. It's only valid inside <h:head> (and even then only if you're using PrimeFaces; who actually overlooked the native JSF possibility to order head resources as last).
You can't use <h:outputScript> (nor <h:outputStylesheet> inside <o:conditionalComment>, because JSF will implicitly auto-relocate it to the <head>. This is also hinted in the documentation and showcase.
Just use plain vanilla <script> (or <link rel="stylesheet">).
<o:conditionalComment if="(gte IE 6)&(lte IE 8)">
<script src="#{resource['js/selectivizr-min.js']}" />
</o:conditionalComment>
Note that I fixed the invalid if attribute value by removing the duplicated if.
Unrelated to the concrete problem: The library="js" indicates a misunderstanding of the library attribute. Carefully read What is the JSF resource library for and how should it be used? The #{resource} resolver in above answer has already been altered to use js as regular folder instead of as library.
My css are overridden by bootstrap css.
Bootstrap is injecting css after my css.
Is there any why to add my css after injected css.
I know that we can use !important to achieve this, But it is not flexible as I need add it to every property.
<link type="text/css" rel="stylesheet" href="style.css">
<link rel="stylesheet" href="http://myapp.com/myapp/css/bootstrap.min.css">
<link rel="stylesheet" href="http://myapp.appspot.com/myapp/css/gwt-bootstrap.css">
<link rel="stylesheet" href="http://myapp.appspot.com/myapp/css/font-awesome.min.css">
is there any way to insert my style sheet after the injected css.
In your gwt.xml check that you add your style sheet file after you inherit the GWT bootstrap module.
The order bellow should fix your issue:
<inherits name='com.github.gwtbootstrap.Bootstrap' />
<stylesheet src='style.css'/>
All of my JSF pages contain the following imports
<h:head>
<title>My Registration Page</title>
<link href="stylesheet/reset.css" rel="stylesheet" type="text/css" />
<link href="stylesheet/style.css" rel="stylesheet" type="text/css" />
<link rel="icon" type="image/png" href="images/icons/favicon.png" />
<script language="javascript" src="script/script.js"/>
Not i dont want to copy and paste all these lines in the head element of my xhtml page;but want to include only a single page, so i want to remove all these lines from the head and put them into another file and then just include that file.
Kind Regards