I have a JSF 2.0 page that uses this:
<h:head>
<h:outputStylesheet name="screen.css" library="css" />
</h:head>
Which very nicely generates this HTML:
<head>
<link type="text/css" rel="stylesheet"
href="/myapp/javax.faces.resource/screen.css.jsf?ln=css" />
</head>
This is great when the page is being viewed in a browser. However, I want to use this stylesheet embedded in an HTML page that will be emailed to the user. I don't want their email client to load the stylesheet from the server. I want the document emailed to them to be self-sufficient and not be influenced by changes in (or even the absence of) the stylesheet on the website.
I want the HTML output to be like this:
<head>
<style type="text/css">
...contents of screen.css here...
</style>
</head>
I tried to achieve that by using this:
<h:head>
<style type="text/css">
<ui:include src="/resources/css/screen.css"></ui:include>
</style>
</h:head>
But I received this error:
javax.servlet.ServletException: Error Parsing /resources/css/screen.css:
Error Traced[line: 1] Content is not allowed in prolog.
javax.faces.webapp.FacesServlet.service(FacesServlet.java:325)
How can I get the contents of the stylesheet to appear in the head of the document?
Not with standard JSF components.
The JSF utility library OmniFaces has an <o:resourceInclude> for the very purpose of including the raw output of non-JSF webapp resources in a JSF page.
<h:head>
<style type="text/css">
<o:resourceInclude path="/resources/css/screen.css" />
</style>
</h:head>
Note that this doesn't support resource localization and versioning, nor evaluate EL expressions in CSS files like as <h:outputStylesheet> would do.
Related
Managing multiple stylesheets in Blazor
Background
I am a backend developer creating a Blazor WASM website.
Problem
I am currently developing an application which is using MudBlazor. I am happy with MudBlazor and would like to continue to use it.
However, I would also like to use the HTML editor provided by Radzen.
The issue I am facing is that there are elements in the MudBlazor sytlesheet (I'm not sure exactly which ones) which are keeping the visuals in the Radzen HTML Editor from working at 100% (bullet points not appearing, indentation not quite right, etc).
With Mudblazor stylesheet active, the text editor does not work as expected
What I've Tried
To confirm that the issue is with the MudBlazor stylesheet, I have commented out the MudBlazor stylesheet in index.html, resulting in the html editor working as expected (but the rest of the website not having the MudBlazor styles). The image below shows the result:
With MudBlazor stylesheet commented, the text editor works as expected
I have put the Radzen Text editor into its own component, so that there are no MudBlazor components accompanying it. From there, I have been attempting to find a way of excluding the mudblazor stylesheet from the html editor component.
Investigated the use of Blazor CSS Isolation, but from what I can see this is designed for the use of custom css created by myself, not the use of stylesheets (please correct me if I'm wrong).
I read somewhere that in general html the latest stylesheet will be utilised. So, in my TextEditor.razor page, add the stylesheet in an attempt to make it the last thing read:
<head>
<link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css" >
</head>
The Code:
Index.html
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Writers Friend Web App</title>
<base href="/" />
<!--<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />-->
<link href="css/app.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<!-- Commenting the below stylesheet allows the Text Editor to work as expected -->
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
<link href="_content/MudBlazor.ThemeManager/MudBlazorThemeManager.css" rel="stylesheet" />
</head>
TextEditor.razor
<head>
<link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css" >
</head>
<RadzenHtmlEditor Style="min-height: 300px; margin: 1rem;"/>
#code
{
[Parameter]
public Action<string> OnTextChange { get; set; }
}
What I'm looking for
I would like a way of allowing the Text Editor component to have access to the text editor stylesheet ONLY. i.e. exclude the MudBlazor stylesheet from my component.
I'm wondering if I can remove the MudBlazor stylesheet from the index.html file and include it in the section of all the other components, but this would make it messy and I would like to avoid this if possible.
Thank you in advance!
I am currently at a dead end on one of the projects I am working on.
I'm working on the translation of an application in Xamarin Ios, at the moment
the entire application can be translated and the language of the application can be changed directly via the app.
But this application also has Tutorials pages that explain in a few words what is the purpose of this feature.
These pages are in html and have a relatively simplistic content that looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial 1</title>
<link rel="stylesheet" href="style.css" type="text/css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="content-block">
<p>Use this page to add a new friend</p>
<p>It could be a good idea to give him a pseudo</p>
</div>
</body>
</html>
These pages should be translated on the fly when the user
decides to change the language of the application.
Currently the entire application could be translated into several languages except these html pages, simply because I have no idea what's the best way to do it.
I didn't find any information or documentation about this (I'm pretty sure that's because I'm using Xamarin Ios).
I am looking for a way to fill my html file with the contents of my resx files in which I would put the content html pages.
1 - I will have to save Html tags in my resx files if I decide to write <strong> this word </ strong>, which does not seem to me very practical and will oblige me to record every sentence and / or word that stands between specific tag ?
2 - How can I do this binding between my html file and my resx file? To get something like this
<!DOCTYPE html>
<html>
<head>
<title>Tutorial 1</title>
<link rel="stylesheet" href="style.css" type="text/css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="content-block">
<p> [contentFromMyResxFile] </p>
<p> [AnotherContentFromMyResxFile] </p>
</div>
</body>
</html>
content being loaded directly from my resx file and so could adapt to the language of the application.
When I embed a piece of html code, it seems that it won't be effected by the linked css file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>worldmapper BETA</title>
<link rel="stylesheet" href="main.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<embed type="text/html" src="test.html">
</body>
</html>
Correct. <embed> acts like <iframe> (just not so well defined, so you should use <iframe> instead).
You are loading a separate document in a sub-window.
For the CSS to apply, you need to link the CSS to that document.
Consider using a template system which you apply either server side or at build time instead. Then your single web page will consist of a single HTML document.
I have the following code on my xhtml page to override default PrimeFaces styling:
<h:body>
<f:facet name="last">
<h:outputStylesheet library="css" name="main.css" />
</f:facet>
...
</h:body>
This works fine when I am using a stylesheet, that is stored locally on my server.
The Problem is, that I want to include a external (dynamic) stylesheet. So when I am changing the <h:facet> to something like the following, it doesn't work anymore.
<f:facet name="last">
<link type="text/css" rel="stylesheet" href="http://host.de/main.css" />
</f:facet>
If I include the <link> element directly into the <h:head> section of my xhtml page the stylesheet is loaded but the rules get overridden by PrimeFaces.
In the next step I would like to set the href attribute dynamic from my ManagedBean to something like this:
<link type="text/css" rel="stylesheet" href="#{bean.cssUrl}" />
Is this even possible? Or is there another way to achieve what I am describing? Any help is appreciated. Thanks in advance.
EDIT:
I tried in Internet Explorer, Firefox and Chrome (each latest version) and none is working. If I use <h:outputStylesheet name="http://host.de/test.css"> instead of <link> I get RES_NOT_FOUND and status code 404.
<facet name="last"/> for stylesheets should only be used in <h:head/> that is where your stylesheets should end up anyway. If you load them last in your body, you can get weird manifestations in the look and feel of your ui. While loading and building the page and having some slower connections or a busy server, the PF stylesheet is used and when finished loading, your custom css kicks in. This might cause reflows, color changes abd what more
I got it working. The solution was to remove the surrounding <f:facet> element and directly put the <link> under <h:body>:
<h:body>
<link type="text/css" rel="stylesheet" href="#{bean.cssUri}"></link>
...
</h:body>
With this solution I am also able to set the URL of the external stylesheet dynamically in the #PostConstruct method of my ManagedBean (scope is #ViewScoped).
EDIT:
It may be working but #Kukeltje's answer is cleaner and more accurate. I was using <f:facet name="last"> wrong.
Updated code snippet:
<h:head>
<f:facet name="last">
<link type="text/css" rel="stylesheet" href="#{bean.cssUri}"></link>
</f:facet>
</h:head>
I am creating multi-language web based application using JSF 2.0.
For css earlier I was using
<h:outputStylesheet library="css" name="setFontForAll.css"/>
and inside CSS file I had
font-size: #{msg['myDir'].contains('LTR')?'10pt':'14pt'};
^^^ ^^^
English Arabic
However due to CSS caching, same CSS file is there and I am getting font as 10pt continously even if I choose Arabic.
Hence I added time after CSS.
<h:outputStylesheet library="css" name="setFontForAll.css?#{language.myTimeinMill}"/>
However when I use this, all my CSS goes for toss... I see default page setup (no css is getting invoked)
When I see view source, I get <link type="text/css" rel="stylesheet" href="RES_NOT_FOUND" />
Any idea what I am doing wrong?
Note : I am using JSF 2.0
I am also printing #{language.myTimeinMill} inside body and everytime I see different time.
The only way I see is using the plain <link> tag.
There is no possibility by using <h:outputStylesheet /> to add a parameter in the URL. One answer on this subject doesn't work anymore on JSF 2.0 :
<h:outputStylesheet target="head" name="blank.css">
#import url('css/setFontForAll.css?version=#{language.myTimeinMill}')
</h:outputStylesheet>
It returns a message :
com.sun.faces.renderkit.html_basic.ScriptStyleBaseRenderer
encodeChildren INFO: outputScript with "name" attribute and nested
content. Ignoring nested content.
That said, I suggest this solution :
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/setFontForAll.css?ln=css&version=#{language.myTimeinMill}" />
<ui:fragment rendered="#{msg['myDir'].contains('LTR')}">
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/setFontOverride.css?ln=css&version=#{language.myTimeinMill}" />
</ui:fragment>
Actually, all you need to do is create a folder under webapp/resources/css/mystyle.css where mystyle.css is your css file.
Then in your jsf file, just put
<h:outputStylesheet name="css/mystyle.css" />
JSF will knows and load your css file correctly without the RES_NOT_FOUND error.
PS. this has been tested with primefaces jsf 2.2