JSF-h：outputStylesheet

h：outputStylesheetタグは、タイプが「link」でタイプが「text/css」のHTML要素をレンダリングします。このタグは、外部スタイルシートファイルをJSFページに追加するために使用されます。

JSFタグ

<h:outputStylesheet library = "css" name = "styles.css"/>

レンダリングされた出力

<link type = "text/css" rel = "stylesheet"
   href = "/helloworld/javax.faces.resource/styles.css.jsf?ln = css"/>

応用例

上記のタグをテストするテストJSFアプリケーションを作成しましょう。

Step	Description
1	Create a project with a name helloworld under a package com.finddevguides.test as explained in the JSF - First Application chapter.
2	Create resources folder under src → main folder.
3	Create css folder under src → main → resources folder.
4	Create styles.css file under src → main → resources → css folder.
5	Modify styles.css file as explained below.
6	Modify pom.xml as explained below.
7	Modify home.xhtml as explained below. Keep rest of the files unchanged.
8	Compile and run the application to make sure business logic is working as per the requirements.
9	Finally, build the application in the form of war file and deploy it in Apache Tomcat Webserver.
10	Launch your web application using appropriate URL as explained below in the last step.

styles.css

.message{
   color:green;
}

pom.xml

<project xmlns = "http://maven.apache.org/POM/4.0.0"
   xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation = "http://maven.apache.org/POM/4.0.0
   http://maven.apache.org/maven-v4_0_0.xsd">

   <modelVersion>4.0.0</modelVersion>
   <groupId>com.finddevguides.test</groupId>
   <artifactId>helloworld</artifactId>
   <packaging>war</packaging>
   <version>1.0-SNAPSHOT</version>
   <name>helloworld Maven Webapp</name>
   <url>http://maven.apache.org</url>

   <dependencies>
      <dependency>
         <groupId>junit</groupId>
         <artifactId>junit</artifactId>
         <version>3.8.1</version>
         <scope>test</scope>
      </dependency>

      <dependency>
         <groupId>com.sun.faces</groupId>
         <artifactId>jsf-api</artifactId>
         <version>2.1.7</version>
      </dependency>

      <dependency>
         <groupId>com.sun.faces</groupId>
         <artifactId>jsf-impl</artifactId>
         <version>2.1.7</version>
      </dependency>

      <dependency>
         <groupId>javax.servlet</groupId>
         <artifactId>jstl</artifactId>
         <version>1.2</version>
      </dependency>
   </dependencies>

   <build>
      <finalName>helloworld</finalName>
      <plugins>

         <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-compiler-plugin</artifactId>
            <version>2.3.1</version>
            <configuration>
               <source>1.6</source>
               <target>1.6</target>
            </configuration>
         </plugin>

         <plugin>
            <artifactId>maven-resources-plugin</artifactId>
            <version>2.6</version>
            <executions>
               <execution>
                  <id>copy-resources</id>
                  <phase>validate</phase>
                  <goals>
                     <goal>copy-resources</goal>
                  </goals>

                  <configuration>
                     <outputDirectory>${basedir}/target/helloworld/resources
                        </outputDirectory>
                     <resources>
                        <resource>
                           <directory>src/main/resources</directory>
                           <filtering>true</filtering>
                        </resource>
                     </resources>
                  </configuration>
               </execution>
            </executions>
         </plugin>

      </plugins>
   </build>
</project>

home.xhtml

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml"
   xmlns:f = "http://java.sun.com/jsf/core"
   xmlns:h = "http://java.sun.com/jsf/html">

   <h:head>
      <title>JSF Tutorial!</title>
      <h:outputStylesheet library = "css" name = "styles.css" />
   </h:head>

   <h:body>
      <h2>h:outputStylesheet example</h2>
      <hr/>
      <h:form>
         <div class = "message">Hello World!</div>
      </h:form>
   </h:body>

</html>

すべての変更を完了したら、JSF-最初のアプリケーションの章で行ったようにアプリケーションをコンパイルして実行します。すべてがアプリケーションで問題ない場合、次の結果が生成されます。

JSF h：outputStylesheet

Jsf-outputstylesheet-tag

目次