Richfaces 自定义皮肤图像

Question

我的 Web 应用程序可以正常处理 (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/</value>
            </property>
            <property>
              <name>^org\.richfaces\.ckeditor/([^/]+\.css)$</name>
              <value>org.richfaces.ckeditor.css/</value>
            </property>
            <property>
              <name>^org\.richfaces\.ckeditor/([^/]+\.(js))$</name>
              <value>org.richfaces.ckeditor.js/</value>
            </property>
            <property>
              <name>^.+/([^/]+\.(png|gif|jpg))$</name>
              <value>org.richfaces.images/</value>
            </property>
            <property>
              <name>^.+/([^/]+\.css)$</name>
              <value>org.richfaces.css/</value>
            </property>
          </fileNameMappings>
        </configuration>
      </plugin>

Answer 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;
...

Richfaces 自定义皮肤图像

Richfaces custom skinning images

resources

richfaces

skinning