相关疑难解决方法(0)

什么是JSF资源库以及如何使用它?

在JSF <h:outputStylesheet>,<h:outputScript><h:graphicImage>组件具有library属性.这是什么以及如何使用它?Web上有很多示例,它们使用如下公共内容/文件类型css,js以及img(或image)作为库名称,具体取决于所使用的标记:

<h:outputStylesheet library="css" name="style.css" />
<h:outputScript library="js" name="script.js" />
<h:graphicImage library="img" name="logo.png" />
Run Code Online (Sandbox Code Playgroud)

它有用吗?library这些示例中的值似乎只是重复标记名称已经表示的内容.对于<h:outputStylesheet>它来说,基于标签名称已经很明显它代表了一个"CSS库".与以下内容有什么不同,它们的工作方式相同?

<h:outputStylesheet name="css/style.css" />
<h:outputScript name="js/script.js" />
<h:graphicImage name="img/logo.png" />
Run Code Online (Sandbox Code Playgroud)

此外,生成的HTML输出有点不同.给定URL模式的上下文路径/contextnameFacesServlet映射*.xhtml,前者生成以下HTML,其库名称为请求参数:

<link rel="stylesheet" type="text/css" href="/contextname/javax.faces.resource/style.css.xhtml?ln=css" />
<script type="text/javascript" src="/contextname/javax.faces.resource/script.js.xhtml?ln=js"></script>
<img src="/contextname/javax.faces.resource/logo.png.xhtml?ln=img" alt="" />
Run Code Online (Sandbox Code Playgroud)

而后者在URI的路径中生成以下带有库名的HTML:

<link rel="stylesheet" type="text/css" href="/contextname/javax.faces.resource/css/style.css.xhtml" />
<script type="text/javascript" src="/contextname/javax.faces.resource/js/script.js.xhtml"></script>
<img src="/contextname/javax.faces.resource/img/logo.png.xhtml" alt="" />
Run Code Online (Sandbox Code Playgroud)

后一种方法在事后看来也比前一种方法更有意义.该library属性究竟有用吗?

resources jsf jsf-2

224
推荐指数
1
解决办法
12万
查看次数

如何在Facelets模板中引用CSS/JS /图像资源?

我已经完成了关于Facelets模板的教程.

现在我尝试创建一个与模板不在同一目录中的页面.我有页面样式的问题,因为样式用相对路径引用,如下所示:

<link rel="stylesheet" href="style_resource_path.css" />
Run Code Online (Sandbox Code Playgroud)

我可以通过以下开头使用绝对引用/:

<link rel="stylesheet" href="/project_root_path/style_resource_path.css" />
Run Code Online (Sandbox Code Playgroud)

但是,当我将应用程序移动到不同的环境时,这将给我带来麻烦.

所以我想知道在Facelets中引用CSS(以及JS和图像)资源的最佳方法是什么?

resources jsf facelets templating jsf-2

53
推荐指数
2
解决办法
6万
查看次数

如何使用webjars.org上的Font Awesome和JSF

我试图在我的JSF应用程序中使用Font Awesome图标.我按照入门说明并将以下内容添加到我的视图部分,取得了一些成功<h:head>:

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css"
      rel="stylesheet" />
Run Code Online (Sandbox Code Playgroud)

当我使用这个icon-home类时,这给了我一个很好的主页图标:

在此输入图像描述

但是,我不想依赖引导服务器来提供Font Awesome资源,所以我试图将这些与我的战争捆绑在一起,并配置我的视图以使用捆绑的资源.

我正在使用webjars项目创建的预制JAR.我的pom具有以下依赖性:

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>font-awesome</artifactId>
    <version>3.2.1</version>
</dependency>
Run Code Online (Sandbox Code Playgroud)

这将JAR放在我的WAR的WEB-INF/lib目录中.JAR结构的相关部分是:

META-INF
  - MANIFEST.MF
  + maven
  - resources
    - webjars
      - font-awesome
        - 3.2.1
          - css
            - font-awesome.css
            - *other css files*
          - font
            - *font files*
Run Code Online (Sandbox Code Playgroud)

我尝试了以下方法在我的项目中包含图标:

<h:outputStylesheet library="webjars" 
                    name="font-awesome/3.2.1/css/font-awesome.css"  />
Run Code Online (Sandbox Code Playgroud)

但是,这会将以前工作的主页图标呈现为:

在此输入图像描述

我的浏览器(Chrome)在控制台中显示以下错误(域/端口/上下文根已更改以保护无辜;):

GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.woff?v=3.2.1 404 (Not Found) 
GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.ttf?v=3.2.1 404 (Not Found) 
GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.svg 404 (Not Found)
Run Code Online (Sandbox Code Playgroud)

所以看起来虽然正确解析了css文件,但是找不到包含css文件引用的字体的文件.我已在css文件中检查了这些引用,它们是:

src: url('../font/fontawesome-webfont.eot?v=3.2.1');
src: …
Run Code Online (Sandbox Code Playgroud)

css jsf maven font-awesome webjars

19
推荐指数
3
解决办法
2万
查看次数

标签 统计

jsf ×3

jsf-2 ×2

resources ×2

css ×1

facelets ×1

font-awesome ×1

maven ×1

templating ×1

webjars ×1