发表新帖
发表新帖

Can I use EL for external CSS files with JSF?

前端 未结
关注
6 1092
情歌与酒
情歌与酒 2020-12-19 07:46

In external style sheets of my current JSF project, there are hard-coded links to external resources like

.someId { background-image:url(/context/resources/i
相关标签:
6条回答
  • 夕颜
    2020-12-19 08:17

    I put the CSS images always in a subfolder of the CSS folder. E.g.

    • /resources/css/style.css
    • /resources/css/images/example.jpg

    This way you just end up like

    .someId { background-image:url(images/example.jpg); }

    Yes, they are resolved relative to the URL of the CSS file itself, not to the main JSF/HTML page.

    0 讨论(0)
  • 你的背包
    2020-12-19 08:25

    Maybe I misunderstand your question, but if by external css you just mean your own css that is not inline, then with JSF 2.0 you can use EL in your css as long as you include it with an <h:outputStylesheet>. For example, I have a project with this structure:

    war
|__ WEB-INF
|   |__ *standardStuff*
|__ resources
|   |__ css
|   |   |__ style.css
|   |__ images
|       |__ image1.png
|__ xhtml
|   |__ index.xhtml

    This is clearly not the complete file list, but should be enough to get the point. Then I have this in my index.xhtml:

    <f:view xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:ui="http://java.sun.com/jsf/facelets">
  <h:head/>
  <h:body>
    <h:outputStylesheet library="css" name="style.css" target="head"/>
    <ui:include src="content.xhtml"/>
  </h:body>
</f:view>

    And in my css I have something like this:

    .someClass {
    background-image: url('#{resource['images/image1.png']}');
}
    0 讨论(0)
  • 臣服心动
    2020-12-19 08:27

    You can use Expression Language (EL) along with the FacesContext to solve the issue. I use this technique frequently.

    background-image: url('#{facesContext.externalContext.requestContextPath}/resources/images/background.gif');

    This allows you to take advantage of JSF to provide dynamic content based on application input, or changes.

    This technique works on JSF 1.2 and JSF 2.0

    0 讨论(0)
  • 别那么骄傲
    2020-12-19 08:30

    @Bozho's answer pretty much covers your options.

    Another possibility is to continue having a static style sheet, and filling in the dynamic parts in the document's head where you have access to your expressions:

    <head>

<!-- The style sheet contains 99% of the CSS ->
<link rel="stylesheet" href="static.css" type="text/css">

<!-- The remaining 1% is done here -->
<style type="text/css">
 .someClass { --- your dynamic values  here --- }
</style>

</head>

    in the PHP world, this is the best practice because it saves an expensive PHP process from being created for the style sheet call. I don't know how things are in the JSP world but I assume it's similar.

    0 讨论(0)
  • 自闭症患者
    2020-12-19 08:34

    No, you can't. You have several options:

    • hard-code absolute paths (domain relative, of course) - not that bad
    • use relative paths - can be a problem when you have nested urls like /view/external/foo/bar.jsf
    • preprocess them during build to set the proper paths
    • use a Filter (and both client and server-side caching) to set the proper paths.

    (I feel I'm missing something)

    0 讨论(0)
  • 鱼传尺愫
    2020-12-19 08:36

    @Bozho: JSF allows to define a ResourceHandler to replace the standard one. You could just subclass javax.faces.application.ResourceHandler, handle specific requests and delegate others to the base class.

    For the given example, the custom resource handler should determine the context and replace absolute path definitions. This enables dynamic path resolution on a per-request base.

    0 讨论(0)
 看不清?
提交回复
热议问题