I migrate a small application from JSF 1.2 RF 3.3.3 to JSF 2.1 and PF 7.0. (Reason for 2.1 is JBoss EAP 6.1 which allows only java 7)
The look should not be changed, so I use no theme (Theme none in web.xml). Most problems can be solved with some CSS, but for the p:dataTable I need sort icons, with theme=none there are none present.
Is there a way to use some default sort icons out of primefaces without adding some icons to the application? And when yes, how do I use it? I tried some stuff with PrimeIcons, but did not get it working.
The icons are bundled with PrimeFaces, which you can manually load like:
<h:outputStylesheet library="primefaces" name="primeicons/primeicons.css" />
This will allow you to use icons like:
<i class="pi pi-xxx"></i>
But this is not what the PrimeFaces components use. The components are based on jQuery UI icons, so classes like ui-icon ui-icon-xxx. So you need to create a custom style sheet taking care of the UI icons. You don't need to start from scratch, because you can find all of them in (for example) the Nova Light theme.
In the theme linked above, find all the rules containing .ui-icon and especially the ones like:
.ui-icon-xxx:before {
content: "...";
}
(content defines which glyph from the PrimeIcons font is used) and incorporate then into your style sheet. Unfortunately there is no section you can copy and paste, so it will be a painstaking task.
Related
I tried liferay-hook.xml:
<custom-jsp-dir>/WEB-INF/custom_jsps</custom-jsp-dir>
<custom-jsp-global>true</custom-jsp-global>
and create file on /WEB-INF/jsp/html/common/themes/top_js-ext.jspf and put all my <link href="" rel="stylesheet" type="text/css"> there. but it will applied to all pages on my page. I want to know on how to apply global styling on selected portlet on liferay. Thanks.
The best way to introduce global CSS styles is through your theme, not through a JSP override. Create a theme that contains the CSS you'd like to use. This way, Liferay will include your CSS in the minified version, compact all files to be downloaded in just a single request. Plus, your changes are probably relevant for a specific theme anyways.
Use your browser's DOM inspection tools to analyse the CSS selector you need. Each portlet declares specific classes that you can easily address. e.g.
.portlet-navigation {
background-color: red;
}
I often, change the images of my buttons using the image attribute, but someone told me that it is a good practice to do it using .css
I tried but i cant, what i am doing wrong? This is what i did:
1-The resources of my project are stored like this:
2-This is how i created the style.css for accessing the image
.c2 {
background: url(/resources/images/smiley.jpg);
}
3-This is how i access the css from the body of my page(Im sure this is correct because other classes in the same document works in other tags in this page)
<h:outputStylesheet library="css" name="style.css" />
4-This is how create a sample commandButton that uses the appropiated css class
<h:commandButton styleClass="c2"/>
I think the problem is in the .css, i tried a few combinations but none worked:
background-image: url(/resources/images/smiley.jpg);
background: url(resources/images/smiley.jpg);
background: url(smiley.jpg);
background: url(../smiley.jpg);
Where is the mistake?
update
I managed to make it work by the following code:
.c2 {
background: url("#{resource['images:smiley.jpg']}");
}
Notice the difference when i use css(right) and when i use image attribute(left)
How could i solve this so the hold image is shown?
When importing CSS stylesheets by <h:outputStylesheet>, the stylesheet is imported and processed by the FacesServlet through /javax.faces.resource/*. Look at the generated <link> element pointing to the stylesheet in question and you'll understand.
You have to change all url() dependencies to use #{resource['library:location']} instead. JSF will then auto-substitute it with the right path. Given your folder structure, you need to replace
.c2 {
background: url("/resources/images/smiley.jpg");
}
by
.c2 {
background: url("#{resource['images/smiley.jpg']}");
}
Assuming that your webapp context name is playground and that your FacesServlet is mapped on *.xhtml, then the above should end up in the returned CSS file as follows
.c2 {
background: url("/playground/javax.faces.resource/images/smiley.jpg.xhtml");
}
Noted should be that the JSF implementation will for determine only during the first request on the CSS file if it contains EL expressions. If it doesn't then it will for efficiency not anymore attempt to EL-evaluate the CSS file content. So if you add an EL expression to a CSS file for the first time, then you'd need to restart the whole application in order to get JSF to re-check the CSS file.
In case you wanted to reference a resource from a component library such as PrimeFaces, then prefix the library name, separated with :. E.g. when you're using PrimeFaces "Start" theme which is identified by primefaces-start
.c2 {
background: url("#{resource['primefaces-start:images/ui-bg_gloss-wave_50_6eac2c_500x100.png']}");
}
This will be generated as
.c2 {
background: url("/playground/javax.faces.resource/images/ui-bg_gloss-wave_50_6eac2c_500x100.png.xhtml?ln=primefaces-start");
}
See also:
How to reference CSS / JS / image resource in Facelets template?
Changing JSF prefix to suffix mapping forces me to reapply the mapping on CSS background images
Unrelated to the concrete problem, the way how you use the library is not entirely right. It's meant to be the common identifier/subfolder of all related CSS/JS/image resources. The key idea is to be able to change the entire look'n'feel by just changing the library (which can be done by EL). You seem however to be relying on the default library. In that case, you could just omit the library from your <h:outputStylesheet> and #{resource}.
<h:outputStylesheet name="css/style.css" />
See also:
What is the JSF resource library for and how should it be used?
Since I struggled with this a little bit and while BalusC has already answered the question but might be able to comment as to why this is happening. I have 5 EAR projects consisting of a bundled WAR and EJB projects. I then have one standalone WAR project deployed on its own. The following code worked perfect with all the EAR's:
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Super FIPS Calculator PRO</title>
<style>
.Bimage{background-image:url(#{request.contextPath}/img/phonetoolsBackground.png);}
</style>
</h:head>
<h:body styleClass="Bimage">
.
.
.
Where the "img" folder was within the WEB-INF folder but for the EAR project, it would not work and it wouldnt even load the picture in the browser by manually typing in the URL. I verified the resulting html was 100% accurate. So all the talk of "resources" got me thinking that maybe it was a ?security? issue of some sort which doesnt seem to make sense between the WAR and EAR deployments so I created a "resources" folderin the root of the web application, e.g. in Eclipse its parent would be WebContent, then added a subfolder to resources called "img", placed my image in there.
The code now looks like this:
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Super FIPS Calculator PRO</title>
<style>
.Bimage{background-image:url(#{request.contextPath}/resources/img/phonetoolsBackground.png);}
</style>
</h:head>
<h:body styleClass="Bimage">
.
.
.
And now the image is displayed. Again not trying to hijack balusc's thorough answer, I just wanted to bring it up in case anyone ran into a similar issue. If someone wants me to open a separate Q and A I will!
Ahh yes, this was on JBoss EAP 7, Servlet API 3.1, Facelets 2.2, Rich Faces 4.5.17 Java 1.8.
Edit #Basil-Bourque answer What is WEB-INF used for in a Java EE web application seems fairly relevant
But its still a little confusing in that how can a WAR within an EAR access that location but not a standalone WAR?
Follow-up to How to embed SVG graphics properly in JSF application using OmniFaces
I'm using the OmniFaces 2.1 snapshot in order to output SVG files from byte[] arrays. I need to suffix #a on SVG URL's in order to activate a CSS style inside the SVG.
Example img:
<img src="/web/javax.faces.resource/ApplicationBean_getImageById_svg.xhtml?ln=omnifaces.graphic&v=0&p=106.1%23a">
As you can see, my #a is appended at the right side of the URL as %23a.
If this had been a regular URL it would be
<img src="106.1.svg#a" />
It would then pick the CSS style and, in my case, paint the background of this sign yellow.
I'm really hoping BalusC comes to my rescue here. Heh. :)
As per this commit, the <o:graphicImage> got a new fragment attribute. This should enable you to pass SVG view modes via URL fragment identifier. It's available in today's 2.1 SNAPSHOT.
E.g.
<o:graphicImage value="#{bean.svg(imageId)}"
type="svg" fragment="svgView(viewBox(0,200,1000,1000))" />
I'm using primeface timeline .first my timeline shows just loading then its displaying after I include code
<form prepenId="false" >
<p:timeline value="#{bean.value} />
</form>
.but my issue is the timeline shows just focus date in starting...and i cannot scroll or move content of timeline.the timeline is displaying just same content which s starting of my timeline (starting with focus date).but cannot move ...to left n right...cannot view others . ruler appears but its not moving the content of timeline.
It's available zooming and navigate on timeline component default on primefaces extension. Be sure that you use newest version of "primefaces-extension" component instead of old "primefaces" timeline component. Primefaces transferred development of timeline to primefaces extension. Send your all of your bean and facelts code please.
But there is an other way to set the options of original timeline plugin which framework use.
Set widgetVar attribute of timeline component:
<pe:timeline id="timeline" value="#{bean.events}"
eventStyle="box"
widgetVar="timelineWidget">
Then put or run this javascript on your facelet page:
<script type="text/javascript">
timelineWidget.jq.timeline(timelineWidget.cfg.dataSource,{"zoomable":"true"});
</script>
With this method, also you can set other properties which is javascript plugin support. Primefaces-Extension provide limited attributes of plugin.
Hope It'll help.
I am using ace:daaTable and other ice component on the same xhtml page .
when I click oמ ice:commandButton the page style is changing.
I tried to define "rime" style on the web.xml but it doesn't help.
when I defined "none" style
param-name :org.icefaces.ace.theme
param-value:none
the clicking on the ice:commandButton save the page style, but I am failing to change the table style to "styleClass="oddRow, evenRow" (that was the style I used on ice:dataTable in my previos IceFaces 1.8 project with"xp" style. )
can someone please explain how to define this styleClass on the table,without changing the page style on each click.
and give me an example that show how to use styleClass on the ace:component
thanks
Tami
To include rime.css you can include below line in you head section.
<link rel="stylesheet" type="text/css"
href="./xmlhttp/css/rime/rime.css" />
If you want to specify your own styleclass you can use like this.
<ace:dataTable style="width:200px; height:200px; cellspacing: 1px;
cellpadding:1px;" ></ace:dataTable>
If you want to use styleclass attribute then you specify external css and include the name.