This is from the Primefaces docs:
Button Icons
An icon on a button is displayed using
CSS and image attribute.
<p:commandButton value=”With Icon” image=”disk”/>
<p:commandButton image=”disk”/>
.disk is a simple css class with a
background property:
.disk {
background-image: url(‘disk.png’) !important; }
My question is: where does this url() point to? In other words, where should I put my images so that the CSS could access it?
I've tried /resources, /resources/img, no luck. Yes, it was working with an absolute URL (one that includes the context path), but that makes the application not portable.
Simple solution:
IF you are using JavaServer Faces 2.0 you have chance to put all resources inside specially designed directory. So you need to have this folder structure in web app:
-rootdir
--resources
---images
----disk.png
And to receive image in css background you should type something like this:
.disk {
background: url(#{resource['images/disk.png']}) !important;
}
It looks like your question is more concerned with the client-side aspects of things, so even though I don't know Primefaces, here's a stab at answering it:
CSS paths are relative to the location of where the CSS rule is declared.
If this is in your HTML (in a <style> block), then disk.png has to be in the same directory as your file.
If this rule is in a separate CSS file, then disk.png should be in the directory where the CSS file is.
If you create a directory images, then the directory will be relative from the CSS too.
Hope this helps?
I faced the same problem for a moment and I reckon documentation about it is unclear!
It works this way for Primefaces commandButton and similar (menuItem, submenu, etc):
What I did is:
Download a theme from the theme library in PrimeFaces website (example: aristo or redmond).
Unzip the archive to your web application resources folder, (in my case: root/resources/css/aristo
Notice that in aristo folder you have : theme.css and /images folder where an indexed png image contains all the icons used by the theme.
If you open the theme.css you'll notice that to access an indexed image icon you should call two classes : .ui-icon and .ui-icon-theiconyouwant (the .ui-icon retrieves the index png using #{resource['primefaces.......png']} and .ui-icon-agivenicon delimit the icon by its X & Y position (index) in the png image).
Now output the theme.css into you application, by using **<h:outputStyleSheet />**. Best way to do it is between tags of your template.
So in your xhtml or jsp, do **<p:commandButton image="ui-icon ui-icon-someicon"} />**.
Now if you want to add your personal images to use with a <p:commandButton, create classes in theme.css :
.smiley {
background-image: url("#{resource['images/smiley.png']}") !important; /this will be ignored by Internet Explorer if not compatible/
width: 16px;
height: 16px;
}
Normally JSF accesses the first images folder available within your resources folder.
Now do: <p:commandButton image="smiley" value="Smile" />
Related
I am developing a web application for learning purpose using java spring and Thyme leaf template engine.
In one of my Thymeleaf page, I want to add an image as a background-image using inline CSS. My image is in the static folder,
I have tried to use various method found on the internet but none of them worked.
I've searched and unfortunately failed to find out the solution to this problem.
I've tried to th:style tag and searched in google to find out how this tag works but unfortunately couldn't able to understand this tag properly.
I've added the code and the screenshot of the error.
blockquote class="imgur-embed-pub" lang="en" data-id="a/TOr6Nyn"><a >
href="//imgur.com/TOr6Nyn"></a></blockquote><script async
src="//s.imgur.com/min/embed.js" charset="utf-8"></script>
th:style="'background-image: url('+
#{~/frontend/images/blog/default/thum1.jpg}+')'"
You should add the style attribute to your div as:
style="background-image: url(<c:url value="/resources/images/bg_1.jpg"/>)"
I have also tried static image but it does not work.
But if u want to show image on page use base64 of that image.
Use this code on your thyme leaf page:
<img th:src="#{data:image/png;base64,YOUR BASE 64}
I am using thymeleaf as my template engin to map XHTML to HTML and flying saucer to generate a pdf file afterwards.
Now i failed to display my static images located at /src/main/resources/ inside y generated pdf file. The file itsself will be displayed fine only images disapear.
Even other locations like /src/main/resources/static or /src/main/resources/public didnt help.
My HTML / XHTML looks like:
<img src="images/logo_black.png"></img>
<img src="/images/logo_black.png"></img>
<img alt="mastercard" th:src="#{classpath:static/images/logo_black.png}" />
<div data-src="images/logo_black.png"></div>
<div data-src="/images/logo_black.png"></div>
<div data-src="#{classpath:static/images/logo_black.png}"></div>
none of them is working properly.
The Images itself are visible by localhost:8048/logo_black.png
I dont want to refer my images with a full url (http://...)
You can include resources from any URL (from the Internet or from your file system). Either way, there are several steps involved:
When generating the HTML from the Thymeleaf template, you can use
#{/some/url} to resolve a path relative to your Web context (assuming you have a Web context), or
#{classpath:/some/url} with will just leave the URL as classpath:/some/url, or
simply a string value constant or a value from a variable (${var}), doesn't matter if it's an absolute URL https://some/url or relative, Thymleaf will leave them unchanged in the resulting HTML.
Before you pass the HTML to Flying Saucer, make sure the URLs are correct. Then Flying Saucer will process all URLs with a UserAgentCallback, by default ITextUserAgent.
The relevant methods in UserAgentCallBack are resolveURI and setBaseURL.
There is some weird logic going on in the default resolveURI method of ITextUserAgent (inherited from NaiveUserAgent). If the baseURL is null, it will try to set it, so it's best to always set it yourself. I had better results with overriding the resolveURI, the following is enough to keep absolute URLs and resolve relative URLs relative to the baseURL:
#Override
public String resolveURI(String uri) {
if (URI(uri).isAbsolute())
return uri;
else
return Paths.get(getBaseURL(), uri).toUri().toString();
}
Finally, in order to resolve the classpath: protocol, you need to define an URLStreamHandler unless there is already one defined (for example, the embedded Tomcat of Spring Boot already does supports this).
You can render image with the help of base 64 .You just convert your image on base 64 and it will show on your web page as well as mobile view.The tags are:
<img th:src="#{data:image/png ;base64,your base 64}"/>
i have a struts2 action which has a variable for an image which i want to display in a jsp page. when i display the value of the variable using the following:
<s:property value="variableName" />
i get the absolute path of the image file.
but when i try the following:
<img src='<s:property value="variableName" />' />
i get a blank there. i have even tried the following:
<img src="${variableName}" />
EDIT: i have done some thinking. the path of the image which is set is in temp folder of tomcat. is it because of that that i am unable to access it?
to no effect. what may be the issue in this?
Always keep in mind when doing web development what you have in server context and what travels to the client browser. If you do what you are suggesting, you will render and send to the client something like this:
<img src="c:\my_local_directory\some_image.jpg"></img>
Which means nothing to the client browser, which is surely executing in some other machine.
You should store your images somewhere where your application server can show them, and give always paths that are relative to your web application. For example, if you have stored some_image.jpg straight in your my-app.war file, something like:
<img src="/my-app/some_image.jpg"></img>
will always work. If you need to refine that image (imagine you need to put a watermark on it before) or need to recover its contents from somewhere (a BLOB in a database or something like that), you will need an entire new action in order to do it, for example:
<img src="/my-app/ImageAction.action?image=some_image"></img>
The src of the img tag must contain an absolute path, then only it can point to the image file from the client machine.
If the variableName contains an absolute path like this
http://localhost/images/pics/icon.gif
The img will finds the image from the server. Thus available always an hence you can use this.
<img src="${variableName}"/>
If the variableName is a relative path ie; something that's recognisable for the server.
/images/pics/icon.gif
The above path will be identified by the server but it wont be identified from the remote machine. In that case you need to have this
<img src="<c:url value=variableName/>" />
I want to render content that i have created locally using html component and put image in this html also by putting image in res folder in jar, i tried
<img src='images/down.png'></img>
<img src='res/images/down.png'></img>
<img src='./images/down.png'></img>
but nothing worked, any suggestion?
[EDIT]
here is my code, i have no idea how to implement DocumentRequestHandler that is why i used DefaultDocumentRequestHandler
DocumentRequestHandler handler = new DefaultDocumentRequestHandler();
HTMLComponent component = new HTMLComponent(handler);
component.getStyle().setBorder(Border.createLineBorder(1));
component.getSelectedStyle().setBorder(Border.createLineBorder(1));
component.setBodyText("<div><b>nirmal:</b>" +
"<img src='res://images/down.png' /></div>");
tried res://images/down.png but nor worked
my image is in res/images
You need to explain how you loaded the HTML, images are loaded relatively to the base URL so you need to define the base URL when creating the HTML (its implicitly detected when loading via URL).
If you created the HTML via setHTML(String) then you need to give absolute paths depending on your DocumentRequestHandler implementation e.g. res://myImage.png or file://myImage.png .
I all, I'm new to the ADF language and after a long search and failed tries, I have to ask how can I change a button layout - background, border, ... - using the CSS and the property "styleClass" of the ADF?
In my .jspx I have something like:
<af:commandButton action="#{backing_test.echoAction}" id="echo1" text="Save 1" styleClass="commandButton.buttonSaveTest" />
The thing is, after opening firebug, I found out that instead of a regular button, I have an image!
Thanks for you help!
You can't rely on what generated HTML you'll get for a specific component in ADF. The best way to get your own look and feel is to implement your own 'skin', which extends one of those already provided by ADF (eg, 'blafplus', or 'fusion', the new default). You then use the CSS selectors for the component you want, eg
af|inputText::content {
background-color: red;
}
Check out the following link to learn about skinning
http://download.oracle.com/docs/cd/E17904_01/web.1111/b31973/af_skin.htm#BAJFEFCJ
The hosted demo is an excellent way of finding out how to skin specific components. Eg, for your command button, check out:
http://jdevadf.oracle.com/adf-richclient-demo/faces/components/skinningKeys/commandButton.jspx