Generated Files related to Styling¶
You can style web pages in many different ways: color, margin, padding, font, widths, heights, just to name a few. Web pages created with the JSF generators lets you provide a default styling that is defined in the common web fragment component. That styling is applied to all web pages. You can completely customize/overwrite this styling by css files that you add to a web application component. The following table shows the files that are created by the JSF generators and that are related to css styling.
|Common Web Fragment||stylesheet-common.xhtml
|The XHTML file includes a
|Common Web Fragment||stylesheet-application.xhtml
|The XHTML file includes a
|Common Web Fragment||template.xhtml
|In these files the rubber hits the road. Here, most of the sources for styling, like CSS files and calls to managed beans, are added to a web page.|
|Common Web Fragment||LayoutCustomizationBean.java||This bean provides a means to dynamically add styling to all web pages by reading the styling information from external resources.|
|With these beans and XHTML files, individual styles can be added to a specific page and inline styles can be set for individual XHTML tags.|
|Styles can be added here, that are to be used for one single web application only.|
|Web Application||AppLayoutCustomizationBean.java||This bean provides a means to dynamically add styling to all web pages by reading the styling information from external resources.|
How to apply your own Styles¶
The following table shows you how you can style your web pages. The order of the entries has a significance: Any styling further down in the table overwrites styles being defined further above.
|Component||File, Class, Method||Description|
|Common Web Fragment||commons-style.css||The styles that are defined in this file are simply going to be applied to all web pages of all web applications.|
|Web Application||application-style.css||The styles that are defined in this file are going to be applied to all web pages of your single web application and overwrite styles in commons-style.css. This is the central place where you define the individual looks of your own web application.|
|Common Web Fragment||LayoutCustomizationBean.java
||The styling information that is going to be returned by this method is applied to all web pages by adding them to the page’s style tag in the page header. The styles overwrite styles in commons-style.css and application-style.css. The purpose of this mechanism is to be able to dynamically get additional style information from an external resource like for instance a database or a web service.|
||This is the same mechanism as the previous one with the LayoutCustomizationBean.java, with the only difference that you can use an application specific implementation to retrieve the styling information from an external source.|
||From here one, the styles being defined are inline styles that are specific to the given page only.
You can let this method dynamically return styling information that is going to be applied to this page only, by adding the styling information to the style tag in the page’s header. Note that this method will not be called again when AJAX calls are being made for the page.
|Web Fragment||[layout-name]_generated.xhtml or
|inline styles are set here, e.g.
|Web Application||App[layout‑Name]BeanExtendedCustomization.java||inline styles can be overwritten here|