Question

我是JSF的新手，在将JSF元素显示在页面上时遇到问题。

Screenshot of my HTML page, the JSP information should be displayed on the left column.

我的.xhtml代码

<!DOCTYPE html>
<!--Learn media queries for responsive design-->
<html lang="en"     
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html">
<head>
    <title>Homepage</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css"/>
    <link href="https://fonts.googleapis.com/css?family=ZCOOL+KuaiLe|Cormorant+Garamond|Eczar|Gentium+Basic|Libre+Baskerville|Libre+Franklin|Proza+Libre|Rubik|Taviraj|Trirong|Work+Sans" rel="stylesheet"/>
</head>
<body>
    <div class="container-fluid h10">
        <div class="row h100 bg-lightgreen">
          <h1>
          Hello
          </h1>
        </div>
    </div>
    <div class="container-fluid h100">
        <div class="row h100">
            <div class="col-md-4 h100 bg-lightblue">
                <h1>Teachers</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in libero vehicula, malesuada enim at, imperdiet diam. Nullam mattis non enim eu malesuada. Morbi interdum erat neque, ut aliquet est consequat ut. Proin augue enim, vehicula at erat non, maximus tempus nisi. Aliquam at auctor nisl. Praesent aliquet id nulla vel sollicitudin. Aenean eros ante, gravida id fringilla at, volutpat ut augue. Mauris nec feugiat nulla. Nullam mattis commodo justo, eget ullamcorper lorem imperdiet a. Nullam vitae felis leo. Etiam ac tincidunt neque. Donec eu scelerisque dui. Etiam laoreet metus tellus, quis porta ex tempus non. Nulla lacinia ipsum nibh, at tempor nulla eleifend sit amet. Quisque in diam in ex gravida convallis eu in nisl.</p>
                    <h:form>
                        <h:inputText id="name" value="#{theUserName}" />
                        <h:commandButton value="Submit" action="myresponse" />
                    </h:form>
            </div>
            <div class="col-md-4 bg-bp-grad centertext">

              <div class="row">
                <div class="col-md-12">
                  <h1><br/></h1>
                </div>
              </div>

              <div class="row">
                  <div class="col-md-12">
                      <div class="dot centertext">
                            <img src="images/duck2.png" style="height:50%;width:50%;margin:25%;" alt="Picture of a cute duck"/>
                      </div>
                  </div>
              </div>

              <div class="row">
                <div class="col-md-12">
                  <br/><br/>
                </div>
              </div>

              <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-10">
                    <form>
                        <div class="form-group">
                            <label for="exampleInputEmail1">Username</label>
                            <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter username"/>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">Password</label>
                            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"/>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="rememberMe" style="align:left;"/>
                            <label class="form-check-label" for="exampleCheck1">Remember me</label>
                        </div>
                        <div>
                            <button type="Login" class="btn btn-primary">Login</button>
                        </div>
                     </form>
                </div>
                <div class="col-md-1"></div>
              </div>

              <div class="row">
                <div class="col-md-12">
                  <h1><br/></h1>
                </div>
              </div>
            </div>
            <div class="col-md-4 bg-lightpink h100">
                <h1 class="textright">Schools</h1>
                <p class="textright">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in libero vehicula, malesuada enim at, imperdiet diam. Nullam mattis non enim eu malesuada. Morbi interdum erat neque, ut aliquet est consequat ut. Proin augue enim, vehicula at erat non, maximus tempus nisi. Aliquam at auctor nisl. Praesent aliquet id nulla vel sollicitudin. Aenean eros ante, gravida id fringilla at, volutpat ut augue. Mauris nec feugiat nulla. Nullam mattis commodo justo, eget ullamcorper lorem imperdiet a. Nullam vitae felis leo. Etiam ac tincidunt neque. Donec eu scelerisque dui. Etiam laoreet metus tellus, quis porta ex tempus non. Nulla lacinia ipsum nibh, at tempor nulla eleifend sit amet. Quisque in diam in ex gravida convallis eu in nisl.</p>
            </div>
        </div>
    </div>
</body>
</html>

我的文件结构：

opt/
 tomcat/
  apache-tomcat-9.0.16/
   webapps/
    ROOT/
     vysusWeb/
      WebContent/
       index.xhtml //this is the page I'm wanting to load
       style.css //stylesheet, seems to be no problems
       WEB-INF/
        faces-config.xml
        web.xml
        lib/
         javax-faces-2.2.8.jar

我正在尝试访问页面的路径是： http://localhost:8080/vysusWeb/WebContent/index.xhtml

JSF元素未显示

0 个答案: