Question

Greetigs，伙计堆栈花！

我目前正在JSF中实现一个Web应用程序，我在JSF中使用css时遇到了问题。我正在使用ui：composition，而css文件不会影响任何内容。我试图做的是将网页划分为顶栏，侧栏和主要内容。所有可能都有不同的背景颜色和文字样式

首先，我将展示文件及其相对路径（在NetBeans中实现，使用“web”作为这些文件的根文件夹）：

主布局： /Resources/Templates/masterlayout.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:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head>
        <title><ui:insert name="windowsTitle"/></title>
        <h:outputStylesheet library ="CSS" name="styles.css"/>
    </h:head>
    <h:body>
        <div id="topBar">
            <ui:insert name="topBar">
                <ui:include src="/Resources/Templates/topBar.xhtml"/>
            </ui:insert>
        </div>

        <div id="sidebarLeft">
            <ui:insert name="sidebarLeft">
                <ui:include src="/Resources/Templates/sidebarLeft.xhtml"/>
            </ui:insert>
        </div>

        <div id="content">
            <ui:insert name="content"/>
        </div>
    </h:body>
</html>

顶栏： /Resources/Templates/topBar.xhtml

IGNORED 活动网站

侧栏（包含列表）： /Resources/Templates/sidebarLeft.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:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
    <h:head>
        <title>IGNORED</title>
    </h:head>
    <h:body>
        <ui:composition>
            <h:form>
                You are signed up for these activities:<br/>
                <h:dataTable value="#{userB.singleUser.partActs}" width="400" var="pacts">
                    <h:column>
                        #{pacts.name}
                    </h:column>
                    <h:column>
                        #{pacts.dateAsString}
                    </h:column>
                    <h:column>
                        <h:commandLink value="Read more"/>
                    </h:column>
                </h:dataTable>
            </h:form>
        </ui:composition>
    </h:body>
</html>

最后，一个名为mainPage.xhtml的示例文件位于根web文件夹中：

<?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:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <ui:composition template="/Resources/Templates/masterLayout.xhtml">
            <ui:define name="content">
                <h:form>
                    <p>Welcome back, #{userB.singleUser.firstName}.</p>
                    <p>Choose an option:</p>
                    <p><h:commandButton value = "Look up activites" action = "#{secNavB.activityIndex}"/></p>
                    <p><h:commandButton value = "Look up friends"/></p>
                    <p><h:commandButton value = "Edit my account"/></p>
                </h:form>
            </ui:define>
        </ui:composition>
    </h:body>
</html>

现在，我将向您展示css文件： /Resources/CSS/style.css

#topBar {
   padding: 20px;
   height: 40px;
   margin-bottom: 10px;
   background: yellowgreen;
   border: 1px solid darkGray;
}

#sidebarLeft {
   border: thin solid lightGray;
   padding: 5px;
   width: 200px;
   height: 700px;
   background: yellowgreen;
}

#content {
   padding: 5px;
   border: thin solid lightGray;
   background: #FFFF99;
   position: absolute;
   right: 8px;
   left: 230px;
   height: 1000px;
   top: 90px;
}

您可以忽略不同h：命令按钮或链接的操作，它们与问题无关。我的问题是CSS文件没有做任何更改。

背景颜色或字体样式无变化。
顶部栏，左侧边栏和主要内容从上到下放置，这与我想要达到的目的不一致：顶部的顶部栏，左侧的侧栏和主要内容中间。

我知道CSS文件本身应该有效（除非你证明我错了吗？）。当谈到.css时，我很生疏，但是我从几年前的一个旧项目中复制了它的工作（并且改变细节不应该很难）

我还可以提一下，我尝试在主布局中使用更多直接链接：虽然它没有用..

提前：谢谢

编辑： lu4242建议将资源重命名为资源。我这样做了，并将其他文件夹中的大写字母替换为非大写字母。发生了这种情况：

/mainPage.xhtml @10,76 <ui:composition template="/resources/templates/masterLayout.xhtml"> Invalid path : /resources/templates/masterLayout.xhtml

我找到了一种方法，将整个resources-folder放在WEB-INF下，并将WEB-INF添加到路径中。现在我遇到了和以前一样的问题。这是行不通的！还有其他建议吗？

我现在已经将templates文件夹移出了resources-folder。他们现在是：

/templates/masterlayout.xhtml
/templates/topBar.xhtml
/templates/sidebarLeft.xhtml
/resources/css/style.css

JSF：使用模板时CSS不起作用（ui：composition）

0 个答案: