2016-03-25 10 views
1

私はJSFページに書き換えしたいHTML5を持っている:書き換えHTML5 JSFページにページ

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html lang="en" 
     xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" 
     xmlns:h="http://java.sun.com/jsf/html" 
     xmlns:f="http://java.sun.com/jsf/core" 
     xmlns:ui="http://java.sun.com/jsf/facelets"> 
    <h:head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <meta name="viewport" content="width=1,initial-scale=1,user-scalable=1" /> 
     <title>Insert title here</title> 

     <link href="http://fonts.googleapis.com/css?family=Lato:100italic,100,300italic,300,400italic,400,700italic,700,900italic,900" rel="stylesheet" type="text/css"/> 
     <link rel="stylesheet" type="text/css" href="resources/bootstrap/css/bootstrap.min.css" /> 
     <link rel="stylesheet" type="text/css" href="resources/css/styles.css" /> 
    </h:head> 
    <h:body> 
     <section class="container login-form"> 
      <section> 
       <form method="post" action="" role="login"> 
        <img src="logo.png" alt="" class="img-responsive" /> 

        <div class="form-group"> 
         <input type="email" name="email" required="true" class="form-control" placeholder="Email address" /> 
        </div> 
        <div class="input-group"> 
         <input type="password" name="password" required="true" class="form-control" placeholder="Password" /> 
         <span class="input-group-btn"> 
          <button class="btn btn-default" type="button" id="tooltip" data-toggle="tooltip" data-placement="top" title="Forgot password ?">?</button> 
         </span> 
        </div> 
        <button type="submit" name="go" class="btn btn-primary btn-block">Login Now</button> 
       </form> 
      </section> 
     </section> 
    </h:body> 
</html> 

私はこれを試してみました:

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html lang="en" 
     xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" 
     xmlns:h="http://java.sun.com/jsf/html" 
     xmlns:f="http://java.sun.com/jsf/core" 
     xmlns:ui="http://java.sun.com/jsf/facelets" 
     xmlns:j="http://xmlns.jcp.org/jsf/passthrough"> 
    <h:head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <meta name="viewport" content="width=1,initial-scale=1,user-scalable=1" /> 
     <title>Insert title here</title> 

     <link href="http://fonts.googleapis.com/css?family=Lato:100italic,100,300italic,300,400italic,400,700italic,700,900italic,900" rel="stylesheet" type="text/css"/> 
     <link rel="stylesheet" type="text/css" href="resources/bootstrap/css/bootstrap.min.css" /> 
     <link rel="stylesheet" type="text/css" href="resources/css/styles.css" /> 
    </h:head> 
    <h:body> 
     <section class="container login-form"> 
      <section> 
       <h:form> 
        <img src=logo.png" alt="" class="img-responsive" /> 

        <div class="form-group"> 
         <h:inputText j:type="email" j:name="email" required="true" styleClass="form-control" j:placeholder="Email address" value="#{login.user}"/> 
        </div> 
        <div class="input-group"> 
         <h:inputSecret j:type="password" j:name="password" required="true" styleClass="form-control" j:placeholder="Password" value="#{login.password}" autocomplete="off"/> 
         <span class="input-group-btn"> 
          <button class="btn btn-default" type="button" id="tooltip" data-toggle="tooltip" data-placement="top" title="Forgot password ?">?</button> 
         </span> 
        </div> 
        <h:commandButton type="submit" j:name="go" styleClass="btn btn-primary btn-block" action="#{login.userAuthanticate}">Login Now</h:commandButton> 
       </h:form> 
      </section> 
     </section> 
    </h:body> 
</html> 

私はHTML5を使用したいbecasue私はxmlns:j="http://xmlns.jcp.org/jsf/passthrough"を追加しました。私がh:formを追加すると、CSSのスタイルが完全に台無しになってしまいます。 JSFタグでこのページを書き換える正しい方法は何ですか?

答えて

1

変更この:このため

<link rel="stylesheet" type="text/css" href="resources/bootstrap/css/bootstrap.min.css" /> 
<link rel="stylesheet" type="text/css" href="resources/css/styles.css" /> 

libraryresourcesnameファイル名内のフォルダの名前です

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

<h:inputSecret>がスパンの内側で正しくレンダリングされない可能性があります。その場合は、プレーンHTMLを代わりに使用してください。

<input type="password" jsf:id="pass" name="password" 
      class="form-control" placeholder="Password..." 
      required=""> 
    <span class="input-group-btn"> 
     <button id="tooltip" class="btn btn-default" type="button" 
       data-toggle="tooltip" data-placement="top" 
       title="Forgot password?"</button> 
    </span> 
</input> 

PS:FaceletsのはHTML5互換性があるので、HTML5のDOCTYPEを使用します。

関連する問題