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?
Related
I'm developing my first SharePoint hosted add-in with Kendo UI and getting the following exception when I run it:
o._detachObservableParents is not a function
I've tried instantiating the object with as little configuration as possible to make sure it's not one of the settings that I'm messing up but I keep getting the same error.
Searching online has produced no clues at all.
Technical Details
Kendo UI v2016.2.714
SharePoint Online (I believe it's 2013)
The following code shows how I've added the resources to the Add-in page:
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<link rel="stylesheet" href="../Content/Fabric/4.0.0/fabric.min.css" rel="stylesheet" />
<link rel="stylesheet" href="../Content/kendo/2016.2.714/kendo.common-office365.min.css" />
<link rel="stylesheet" href="../Content/kendo/2016.2.714/kendo.office365.min.css" />
<link rel="stylesheet" href="../Content/kendo/2016.2.714/kendo.dataviz.min.css" />
<link rel="stylesheet" href="../Content/kendo/2016.2.714/kendo.dataviz.office365.min.css" />
<script type="text/javascript" src="../Scripts/jquery-1.10.2.min.js"></script>
<SharePoint:ScriptLink Name="sp.js" runat="server" OnDemand="true" LoadAfterUI="true" Localizable="false" />
<script type="text/javascript" src="../Scripts/kendo/2016.2.714/kendo.all.min.js"></script>
<script type="text/javascript" src="../Scripts/repositories.js"></script>
<meta name="WebPartPageExpansion" content="full" />
<!-- Add your CSS styles to the following file -->
<link rel="Stylesheet" type="text/css" href="../Content/App.css" />
<!-- Add your JavaScript to the following file -->
<script type="text/javascript" src="../Scripts/App.js"></script>
</asp:Content>
Edits
Edit 1 - Note: I can instantiate simple components like buttons and calendars without any issues.
I have loaded javascript from Java call in xhtml file. When I opened the browser in debug mode( both IE and chrome) , javascripts are loading with .xhtml extensions.
Below is the code I am using
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><ice:outputText nospan="true" value="#{msgs.loginTitle}" /></title>
<link href="../css/style.css" type="text/css" rel="stylesheet" />
<ice:outputText value="#{MyAction.javaScripts}" visible="false" />
</h:head>
Here JavaScripts is the methods and it returns String.
value="#{MyAction.javaScripts}" Return the below string
<script src="../js/myJs.js" type="text/javascript"></script>
But when I open the browser in debug mode my javascript is like abc.js.xhtml?xxx and some of the functions are not working. My questions are
1) Will java script work perfectly even if it is showing like this?
2) Is the Browser changing the extension or it is configuration issue?
Please help me
Javascript files should be included in your JSF .xhtml file by using either <h:outputScript> or <script>:
(referencing a script file named 'help.js' in the /js folder)
<h:outputScript library="js" name="help.js" />
or
(embedded script directly within the page)
<script type="text/javascript">
function sayHello(){
alert('Hello');
}
</script>
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.
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
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).