Is it possible to remove all styling from Primefaces components? I mean, the component set is good but having to manually override every tiny bit of each component to make the component style fit the overall design of my application isn't good. I can't use hours on using Firebug to find which classes etc it uses and all that.
So is there no way to remove this and only use the components for their functionality and provide your own design instead of being forced to use the default....or one of the "themes"?
Set primefaces.THEME context parameter to none and you'll get a functional ui with no styles.
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>none</param-value>
</context-param>
You don't need to spend hours editing styles. Styling of PrimeFaces is done via shared styles like ui-widget-header, ui-widget-content which you can customize via the themeroller web form. I don't think JSF and theming can get any easier than PrimeFaces.
PrimeFaces inserts two CSS files by default, theme.css and primefaces.css. You can remove theme.css by putting the following to web.xml:
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>none</param-value>
</context-param>
Then you can overwrite primefaces.css by creating an empty file in:
WebContent/resources/primefaces/primefaces.css
Older PF versions (<6.0)
If you want to use the primefaces with your own css's wouldn't it be easier to create your own theme using the jQuery UI - ThemeRoller ?
Here's a link to how you create your own Theme for PrimeFaces
Newer PF versions (6.0 and up)
More recently PrimeFaces introduced the 'Designer API' Since PF components have more features, the themeroller is not that suitable anymore. The Designer API is SASS based and allows you to create really good themes
Create own theme as #Daniel said. I just want to add :
For partial styling you don't have to firebug everything, primefaces user guide covers style classes for each element. It contains also other very useful info and tips (also part about skinning). So use it as your first source when you find yourself struggling with anything about primefaces.
Related
I have used Bootstrap while development of Web Application. Now I have started learning of BootsFaces. While learning very first question pop up in my mind is
What is Exactly difference between Bootstrap and BootsFaces? and
what are their pros and cons over each other?
I searched for these answers but there wasn't any answer which make my doubt clear. Please help me for these questions.
BootsFaces is a JSF component library which generates HTML that uses Bootstrap. BootsFaces allows you to easily work with Bootstrap in a JSF application. Comparing them would be more or less the same as comparing red paint to a red painted board.
Some info from the BootsFaces showcase on this subject, specifically on layouting:
Why BootsFaces? Why not using Bootstrap natively?
BootsFaces takes full advantage of Bootstrap's Grid system while maintaining the benefits of being a JSF framework. Actually, we believe it's more concise and more expressive than programming Bootstrap natively. Convince yourself: inspect the source code of the demo in your browser's source code view. After reformatting, the form is 81 lines. The JSF source is is 45 lines.
BootsFaces being a JSF framework means that you can leverage Bootstrap's layout feature using - for example - the JSF templating system and JSF's conditional rendering to achieve and maintain very complex layouts without much effort.
This website is an example itself: it uses a page template with ui:insert and ui:include and the pages are ui:compositions.
See also:
What is the need of JSF, when UI can be achieved with JavaScript libraries such as jQuery and AngularJS
Environment:
I'm writing a SPA with JSF2.2, Bootsfaces 0.9.1, Primefaces 6.0, JEE7 and Hibernate 5.2 in combination with MySQL 5.7 DB.
What I have:
My SPA has a navbar on the upper part and a specific menu based on the selection of the navbar on the left. On the right side and under the navbar I've my main "content page". Similar to this picture but with the difference that my menu is dynamic:
For updating the content page I'm using AJAX.
Everything around the navigation is working as I expected as long as my content page does not contain a b:carousel!
What I tried to do:
As I mentioned above my SPA and all navigation is working correctly unless I add a b:carousel to a content page.
Please consider following example:
I got 2 content pages. Page 1 contains a single label with some text. Page 2 contains a b:carousel with some images. Page 1 is the welcome page.
As soon as I navigate from page 1 to page 2 nothing happens. I need to completely refresh the whole page to see page 2 and even this is not working everytime.
My main question:
Is there any trick to update the content page with ajax if there's a b:carousel on it?
What am I doing wrong?
EDIT:
I created a sample project on github so you're able to see what I mean. I used Java 1.8, Tomcat 8.0.36 and Netbeans IDE, however the project is a Maven project an should work in eclipse, too.
Project: https://github.com/mweber96/stackoverflow39128418
SPA Approach I partly used: http://www.beyondjava.net/blog/single-page-applications-with-bootsfaces/
This question is related to my previous question: Use ui:repeat with b:carousel?
It's a combination of two bugs:
Your example at GitHub uses PrimeFaces, but it doesn't seem to use a PrimeFaces component. The effect is that PrimeFaces adds some fancy JavaScript to load the missing CSS files dynamically (which is great!), but it doesn't add the PrimeFaces core library, so Mojarra runs into an exception it silently hides. You can fix this by adding a (possibly hidden) PrimeFaces component to your page, by including the PrimeFaces core.js file directly (although I wouldn't recommend that) or - of course - by removing the PrimeFaces dependency if you really don't need it.
BootsFaces relies on the HTML attributes to initialize the carousel. To my surprise, this even works, at least partially. However, to start the sliding automatically, you still need to initialize the JavaScript widget manually. In your case, that's
$("#myCarousel").carousel();
BTW, I suggest you open a bug on our bug tracker to fix the latter point (https://github.com/TheCoder4eu/BootsFaces-OSP/issues). Thanks in advance!
We want to migrate our project from IBM WebSphere 6.1 to Tomcat 6, but in our JSP-JSF UI pages we have extensively used below IBM JSF tags.
ScriptCollector
PanelRowCaregory
PagerWeb
OutPutSelections
InputRowSelect
InputHelperDatePicker
InputHelperAssist
ConvertMask
And to replace above tags, we are trying to find the equivalent tags from Sun JSF or any other open source libraries, but we didn't find any equivalent tags.
I wanted to know whether any body has already worked on this kind of migration project, if yes can you please share the equivalent tags?
or if you solved it differently even that info also will be useful.
Thanks in Advance.
There's no standard JSF equivalent for the <hx:scriptCollector> (although the JSF 2.0 <h:head> comes close). The <hx:scriptCollector> is only required by those IBM-specific <hx:xxx> components. It's designed to collect all JavaScript files required by those <hx:xxx> components and then render the desired <script> tag(s) without potential duplicates when multiple components require the same JS files. It's not required by any standard JSF component.
In other words, just get rid of it without replacement.
As to other tags, just check the available standard components in tag documentation or Java EE tutorial. If none is available, just pick a component library like PrimeFaces or RichFaces. If you still can't figure out, ask an individual question for the particular tag.
I am trying to customize the Liferay UI by using custom theme using base as as "_Styled" theme.
I have my own css files which I coped to _diff/css folder of theme and imported them "custom.css" file .However its breaking the presentation of liferay.In my custom CSS I have styles defined for all the standard tags like body,div etc which is impacting the liferay UI too.
How can I resolve this conflict? Thanks in advance!
Quick (and not the best) solution is to remove contents of liferays css file (for example "base.css") and save this empty file in /diff/css/ folder of your theme. This way the base.css will get overriden with your new empty file and thus no styles will get loaded. And your custom.css will be the only stylesheet that is taken into account.
Well, of course it all has an effect on the rest of Liferay as well. Liferay provides quite a bit of the HTML DOM of your page, and if you change the presentation of all of those elements, you'll have to take care to style Liferay's elements too.
Is this a conflict? No. Let's go for the simplest case: You declare div {color:green;}. Of course, now everything, your components as well as Liferay's components, use green text. If you only want to style your own portlets, you might want to specify some portlets: div.portlet-my-own-application {color:green;}
I know that color is a too simple usecase, but I hope it illustrates the solution strategy.
Rather than following Artem Khojoyan's suggestion to override Liferay's base.css, I'd recommend to take a look at the resulting css, what's effective etc., and simplify your own css - adapt it to be used within Liferay - by inspecting the effective CSS for every elements that looks off. Firebug or any of it's relatives are your friend.
I'm afraid, with the details "I'm doing something which has an effect on Liferay UI" there's nothing much more to help you. In fact, I'd hope that what you do has an effect on Liferay's UI... You'll just need to find the proper CSS code
Ideally if your styles are loaded from custom.css, then will overwrite liferay default styles.
In some cases, to overwrite a style in css, you can use !important
for example, liferay default style
body {
background-color: #fff
}
You can specify your style to consider irrespective of order of loading
body {
background-color: red !important;
}
Is it possible to use the javafx.scene.effect.Reflection in CSS for a FXML file?
And something more general (I haven't found any answer for that yet): Can I do everthing with FXML and CSS that is available on the Java API (using JavaFX 2.2)?
Is it possible to use the javafx.scene.effect.Reflection in CSS for a FXML file?
Not for JavaFX 2.2 - only dropshadow and innershadow effects can be set via CSS.
Future JavaFX versions will probably add the ability to set more effects via CSS.
For now if you want an effect like that in combination with FXML, then you can use a Controller or define the effect in FXML without using CSS.
For example:
<Button layoutX="20.0" layoutY="32.0" text="Reflected Button">
<effect>
<Reflection />
</effect>
</Button>
To visually design and define your FXML based effects, use SceneBuilder, click on your Node, go to the Properties Pane and select an effect to customize from the Effect drop down box.
Can I do everthing with FXML and CSS that is available on the Java API (using JavaFX 2.2)?
You will still need to write some non-fxml embedded code to launch the app and load up your fxml.
If you use FXML's scripting feature you could do most of what can be done on the Java API. For ease of maintenance, I would however recommend using an FXML Controller or hosting script code external from your fxml files rather than embedding it in the fxml.