带有 CDNResourceHandler 的 Primefaces答案

【问题标题】：Primefaces with CDNResourceHandler带有 CDNResourceHandler 的 Primefaces
【发布时间】：2013-10-06 09:33:34
【问题描述】：

我正在将我的静态文件推送到我的 Web 应用程序的 CND。为此，我使用了运行良好的 OmniFaces CDNResourceHandler。除了，我的风格不遵循。

我是这样映射的：

javax.faces:jsf.js=http://.../jsf.js,
primefaces:primefaces.js=http://.../primefaces.js,
primefaces:jquery/jquery.js=http://.../jquery.js,
primefaces:jquery/jquery-plugins.js=http://.../jquery-plugins.js,
primefaces:idlemonitor/idlemonitor.js=http://.../idlemonitor.js,
        
primefaces-smoothness:theme.css=http://.../theme.css,
primefaces:primefaces.css=http://.../primefaces.css,
styles:main04.css=http://.../main04.css,

这很好用，只是我的样式都关闭了。渲染结果与未加载theme.css AND primefaces.css 时相同。

如果我删除这些由CDNResourceHandler 处理的资源，页面将按需要加载。我可以确认这些文件正在页面上加载（Inspect Element-> resources 在网络浏览器中显示这些文件在那里并已加载）。

有没有人体验过 PrimeFaces 样式不能通过 CDN 工作？有没有办法让它工作？

我的应用程序运行在：

OmniFaces 1.6
Primefaces 3.5
Majorra 2.2
Glassfish 3.1.2.2（也在 Glassfish 4 上试用过）

编辑 1

我对此进行了更深入的研究，似乎 css 文件未处理：CSS 中带有 #{resources[]} 的东西仍然如此。这将是由于文件不符合Faces Servleturl-pattern。这让我相信要实现我正在寻找的东西，我需要处理 CND 资源......？

编辑 2

奇怪的是，生成的 HTML 包含所有已加载的资源。如果通过 CDN 加载，似乎资源（Primefaces 样式）不会被处理。

这是页面不工作时加载的资源。除了 Primefaces 提供的基本样式之外，一切都可以正常工作。

<link type="text/css" rel="stylesheet" href="http://.../theme.css" />
<link type="text/css" rel="stylesheet" href="http://.../primefaces.css" />
<link type="text/css" rel="stylesheet" href="http://.../main04.css" />
<link type="text/css" rel="stylesheet" href="http://.../main_compact.css" />
<link type="text/css" rel="stylesheet" href="http://.../ironmanCompact.css" />
<script type="text/javascript" src="http://.../jquery.js"></script>
<script type="text/javascript" src="http://.../primefaces.js"></script>
<script type="text/javascript" src="http://.../idlemonitor.js"></script>
<script type="text/javascript" src="http://.../jquery-plugins.js"></script>
<script type="text/javascript" src="http://.../jsf.js"></script>
<script type="text/javascript" src="http://.../jquery.ba-postmessage.js"></script>
<script type="text/javascript" src="http://.../tracker.js"></script>
<script type="text/javascript" src="http://.../socialMedia.js"></script>

通过从 CDN 中删除 Primefaces 样式，以下生成的 HTML 可以完美运行并生成应有的页面。

<link type="text/css" rel="stylesheet" href="/myapp/javax.faces.resource/theme.css.xhtml?ln=primefaces-smoothness" />
<link type="text/css" rel="stylesheet" href="/myapp/javax.faces.resource/primefaces.css.xhtml?ln=primefaces" />
<link type="text/css" rel="stylesheet" href="http://.../main04.css" />
<link type="text/css" rel="stylesheet" href="http://.../main_compact.css" />
<link type="text/css" rel="stylesheet" href="http://.../ironmanCompact.css" />
<script type="text/javascript" src="http://.../jquery.js"></script>
<script type="text/javascript" src="http://.../primefaces.js"></script>
<script type="text/javascript" src="http://.../idlemonitor.js"></script>
<script type="text/javascript" src="http://.../jquery-plugins.js"></script>
<script type="text/javascript" src="http://.../jsf.js"></script>
<script type="text/javascript" src="http://.../jquery.ba-postmessage.js"></script>
<script type="text/javascript" src="http://.../tracker.js"></script>
<script type="text/javascript" src="http://.../socialMedia.js"></script>

【问题讨论】：

有关生成的 HTML 输出和所有这些资源请求的 HTTP 状态的更多信息会有所帮助。
@BalusC 我已经发布了生成的 HTML。所有状态都成功（200 OK）并且资源加载正常。
好的，这表明问题不在于CDNResourceHandler。一切看起来都很好。当您在网络浏览器中单独打开 http://.../theme.css 时（在浏览器地址栏中复制粘贴该 URL），您看到正确的响应了吗？（theme.css 文件的内容）。
是的，加载了正确的文件 - 正如预期的那样。对此的进一步研究让我转向专用于 Primefaces 的HeadRenderer。我已经尝试为这些文件重写一个，但到目前为止无济于事。难道是 Primefaces 使用 HeadRenderer 来加载它的样式，因此在使用 CDNResourceHandler 时会导致处理问题？
生成的 HTML 输出看起来不错，所以我不确定 HeadRenderer 将如何在这里发挥作用。

标签： jsf-2 primefaces glassfish cdn omnifaces

【解决方案1】：

只需将 jsf 资源查找替换为经典的 css 查找即可。
当我将我的主题外化时，这只是我 ide 中的两个大规模替换。

代替：

background:url("#{resource['primefaces:colorpicker/images/colorpicker_select.gif']}");

用途：

background:url("images/colorpicker_select.gif");

或从这里下载更改的资源和映射：
http://forum.primefaces.org/viewtopic.php?t=38421

【讨论】：