Richfaces 自定义蒙皮图像答案

【问题标题】：Richfaces custom skinning imagesRichfaces 自定义蒙皮图像
【发布时间】：2015-06-10 12:30:49
【问题描述】：

我的网络应用程序可以正常处理 (e)css 文件。

我有 2 个皮肤：

正常

plainTxt=#006
plainBg=#FFF
readonlyTxt=#003082
menuTxt=#0000A0

黑白

plainTxt=#FFF
plainBg=#000
readonlyTxt=#D0D0D0
menuTxt=#000

颜色有效。

但现在我有以下问题：图片对于每种皮肤，我想要不同的图像。我怎么得到那个？我在任何 ecss/skinning 教程中都找不到。不可能吗？

示例 css：

#header h1 {
    background-position:0 6px;
    background-image: url("#{resource['image/header_1.png']}");
}

问题：对于普通皮肤，我想获取图像：'image/header_1.png' 对于黑白皮肤，我想：'image/header_2.png' 我该怎么做呢。任何指针都会很棒

我应该在资源 servlet（或其他东西）中解决它吗？还是我可能需要在 Maven 插件中修复它？那部分我了解的更少;-)

pom.xml的一部分

<plugin>
        <groupId>org.richfaces.cdk</groupId>
        <artifactId>maven-richfaces-resources-plugin</artifactId>
        <version>4.3.7.Final</version>
        <executions>
          <execution>
            <id>process-resources</id>
            <goals>
              <goal>process</goal>
            </goals>
            <configuration>
              <staticResourceMappingFile>D:\workspace\MyProject\target\classes/META-INF/richfaces/custom-packedcompressed-resource-mappings.properties</staticResourceMappingFile>
              <resourcesOutputDir>D:\workspace\MyProject\target\classes/META-INF/resources/org.richfaces.staticResource/4.3.7.Final/PackedCompressed/</resourcesOutputDir>
              <staticResourcePrefix>org.richfaces.staticResource/4.3.7.Final/PackedCompressed/</staticResourcePrefix>
              <pack>true</pack>
              <compress>true</compress>
              <excludedFiles>
                <exclude>^javax.faces</exclude>
                <exclude>^\Qorg.richfaces.renderkit.html.images.\E.*</exclude>
                <exclude>^\Qorg.richfaces.renderkit.html.iconimages.\E.*</exclude>
                <exclude>^jquery\.js$</exclude>
              </excludedFiles>
              <webRoot>D:\workspace\MyProject/src/main/webapp</webRoot>
            </configuration>
          </execution>
        </executions>
        <dependencies>
          <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-simple</artifactId>
            <version>1.7.5</version>
            <scope>compile</scope>
          </dependency>
        </dependencies>
        <configuration>
          <skins>
            <skin>normal</skin>
            <skin>blackwhite</skin>
          </skins>
          <excludedFiles>
            <exclude>^\Qorg.richfaces.renderkit.html.images.\E.*</exclude>
            <exclude>^\Qorg.richfaces.renderkit.html.iconimages.\E.*</exclude>
            <exclude>^jquery.js$</exclude>
          </excludedFiles>
          <includedContentTypes>
            <include>application/javascript</include>
            <include>text/css</include>
            <include>image/.+</include>
          </includedContentTypes>
          <fileNameMappings>
            <property>
              <name>^org\.richfaces\.ckeditor/([^/]+\.(png|gif|jpg))$</name>
              <value>org.richfaces.ckeditor.images/$1</value>
            </property>
            <property>
              <name>^org\.richfaces\.ckeditor/([^/]+\.css)$</name>
              <value>org.richfaces.ckeditor.css/$1</value>
            </property>
            <property>
              <name>^org\.richfaces\.ckeditor/([^/]+\.(js))$</name>
              <value>org.richfaces.ckeditor.js/$1</value>
            </property>
            <property>
              <name>^.+/([^/]+\.(png|gif|jpg))$</name>
              <value>org.richfaces.images/$1</value>
            </property>
            <property>
              <name>^.+/([^/]+\.css)$</name>
              <value>org.richfaces.css/$1</value>
            </property>
          </fileNameMappings>
        </configuration>
      </plugin>

【问题讨论】：

我已经创建了多租户网站，每个租户可以在标题中设置不同的皮肤和徽标。为了为不同的租户显示不同的图像，我使用了图像 servlet。 Servlet 分析会话中的属性，从数据库中选择图像（基于参数）并将图像作为响应。该解决方案在生产上运行良好〜 2 年。你可以尝试做类似的事情。
感谢@VasilLukach 的想法，我会记住的

标签： resources richfaces skinning

【解决方案1】：

解决方案并不复杂，但并不令人满意。

我将资源文件的引用移到了皮肤属性文件中：

custom.ecss：

...
.btn-accept{
    height:22px;
    width:47px;
    background: '#{richSkin.okBtnImg}';
}
...

default.skin.properties：

....
okBtnImg=url("#{resource['image/button/okBtnImg.png']}") no-repeat 0 0 !important;
...

custom.skin.properties：

....
okBtnImg=url("#{resource['image/customSkin/button/okBtnImg.png']}") no-repeat 0 0 !important;
...

【讨论】：