Rewrite html5 Seite in JSF Seite

Ich habe html5, die ich in JSF-Seite neu zu schreiben möchten:Rewrite html5 Seite in JSF Seite

<?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>

ich das versucht:

<?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>

I xmlns:j="http://xmlns.jcp.org/jsf/passthrough" hinzugefügt becasue ich html5 verwenden möchten. Wenn ich h:form css Stil hinzufügen ist total durcheinander. Was ist der richtige Weg, um diese Seite in JSF-Tags umzuschreiben? diese

Quelle

2016-03-25 Peter Penzov

Wechsel:

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

Dazu:

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

wo library ist der Name des Ordners innerhalb resources und name den Dateinamen.

Es ist möglich, dass die <h:inputSecret> wird nicht richtig mit der Spannweite innerhalb. Wenn dies der Fall ist, verwenden Sie stattdessen einfach 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 sind HTML5-kompatibel, so, die HTML5 Doctype verwenden.

Quelle

2016-03-26 22:40:37

Antwort

Verwandte Themen