为不同客户设置 Web 应用程序样式的正确方法答案

【问题标题】：Proper way to style a webapplication for different customers为不同客户设置 Web 应用程序样式的正确方法
【发布时间】：2013-09-15 08:55:33
【问题描述】：

我有一个打包为 EAR 的基于 JSF 1.2 的 Java Web 应用程序。它包含几个 JAR 和一个提供 Web UI 作为前端的 WAR。 WAR 包含 JSF 页面 (XHTML)、CSS 文件和其他网络资源，如图像。使用的构建系统是 maven 2（多模块项目）。

现在的目标是为 Web 用户界面提供不同的“风味”。每种风味都可以有不同的样式表和不同的图像，但功能相同。

问题是，我怎么能在没有太多代码重复/开销的情况下做到这一点。我想我必须创建几个 WAR 模块（每种风格一个）和几个依赖于不同 WAR 的 EAR。这样做的缺点是必须为每种口味添加另外两个具有所有配置的模块。所有的 JSF 页面都必须被复制，这真的不是很好（好吧，通过单独的存档提供 XHTML 并使用 Maven's remote resources plugin 到 share remote resources 可能会有所帮助）。

所描述的设置是解决我的问题的最佳方法还是有更好的方法？
有没有办法在运行时改变样式？ IE。提供 CSS 文件和图像作为外部资源？

提前致谢，
- 马丁

【问题讨论】：

可能的方法是资源映射 servlet like RichFaces 4 uses。资源映射器可以配置为从外部路径加载资源并将其提供给浏览器。

标签： css maven web-applications war jsf-1.2

【解决方案1】：

首先，你所有的 css 都应该被外部化到文件中。每个主题都有不同的 CSS 页面集。假设您的应用中有 2 个页面，主页和搜索页面，并且您希望有红色和蓝色 2 个主题，那么您应该有 homeRed.css、searchRed.css 和 homeBlue.css 和 searchBlue.css。

现在关于在运行时切换主题，在 JSP 等动态网页中，您可以根据参数值生成网页。假设 colorStyle 是您的参数名称，那么您可以拥有 JSP 之类的

    <% if(colorStyle.equals("RED")){ %>
       <link rel="stylesheet" href="path/to/homeRed.css">
    <% } else { %>
        <link rel="stylesheet" href="path/to/homeBlue.css">
    <% } %>

您可以根据您的要求从用户那里读取 colorStyle 的值或将其硬编码到您的应用中。

请注意，上面提到的在 JSP 中做事的方式非常粗糙，现在不推荐使用，但是当您使用 JSF 时，必须准备好以复杂的方式来做这件事。

*编辑更新 * 在这种情况下，你想做的只有两种方式。源文件的 maven 配置或 stanalone 实用程序将所需文件复制到您将创建战争的文件夹中。对于 Maven 配置方法，您可以选择要包含或排除的文件集。参考What's the "right" way to (temporarily) exclude sources from a maven build, and is there an easy way to do it from Eclipse?

【讨论】：

抱歉，您的回答没有多大帮助。 CSS 指令已经在单独的 CSS 文件中，但我必须将所有风格的 CSS 文件和不同的图像包含到一个 WAR 中。那不是我想要的。我想要一个只包含与这种风格相关的资源的 WAR。或者如果可能，所有资源都可能在 WAR 之外，但我想这很困难，因为它们必须提供给浏览器。
您的更新建议我使用不同的 Maven 配置构建 WAR，对吗？但这不是行家的方式！根据使用的配置，我会得到不同的工件。构建过程应该是可重现的。所以要么我没有让你正确，要么这种方法是一种可行但我不会使用的黑客。
是的，我认为这些都是 hacky 方式，因为我不确定是否有任何工具支持这样的要求。