I want to include the http://www.primefaces.org/showcase/ui/f ... Single.jsf in my twitter Bootstrap page.
However, it doesn`t show when I load the page!
Code: Select all
<!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://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:body>
<!-- Content Area -->
<div class="well" style="margin-top: 50px;">
<div class="fuelux">
<div class="container">
<!-- WIZARD -->
<div>
<div id="MyWizard" class="wizard">
<ul class="steps">
<li data-target="#step12" class="active"><span
class="badge badge-info">2</span>Step 2<span class="chevron"></span></li>
<...
</ul>
<div class="actions">
<button class="btn btn-mini btn-prev">
<i class="icon-arrow-left"></i>Prev
</button>
<button class="btn btn-mini btn-next" data-last="Finish">
Next<i class="icon-arrow-right"></i>
</button>
</div>
</div>
<div class="step-content">
<!-- Step 2 -->
<h:panelGroup>
<div class="step-pane" id="step2">
this is step 2
<h:form enctype="multipart/form-data">
<p:fileUpload
fileUploadListener="#{fileUploadController.handleFileUpload}"
mode="advanced" update="messages" sizeLimit="100000"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />
<p:growl id="messages" showDetail="true" />
</h:form>
</div>
</h:panelGroup>
</div>
</div>
</div>
</div>
</div>
</h:body>
</html>
Code: Select all
<h:panelGroup>
<div class="step-pane" id="step2">
this is step 2
<h:form enctype="multipart/form-data">
<p:fileUpload
fileUploadListener="#{fileUploadController.handleFileUpload}"
mode="advanced" update="messages" sizeLimit="100000"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />
<p:growl id="messages" showDetail="true" />
</h:form>
</div>
</h:panelGroup>
btw I am using:
<junit-version>4.8.2</junit-version>
<mockito-version>1.9.0</mockito-version>
<dbunit-version>2.2</dbunit-version>
<hibernate-version>4.0.1.Final</hibernate-version>
<hibernate-validator-version>4.2.0.Final</hibernate-validator-version>
<c3p0-version>0.9.1.2</c3p0-version>
<spring-version>3.1.1.RELEASE</spring-version>
<aspectj-version>1.5.4</aspectj-version>
<jsf-version>2.1.3_01</jsf-version>
<primefaces-version>3.0.M1</primefaces-version>
<primefacesMobile-version>0.9.3</primefacesMobile-version>
UPDATE
When I put it into a simple xhtml page I only get big browse button:
Code: Select all
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<ui:define name="content">
<h1 class="title ui-widget-header ui-corner-all">FileUpload -
Single</h1>
<div class="entry">
<p>Select a single file from file browser and click upload
button.</p>
<h:form enctype="multipart/form-data">
<p:fileUpload
fileUploadListener="#{fileUploadController.handleFileUpload}"
mode="advanced" update="messages" sizeLimit="100000"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />
<p:growl id="messages" showDetail="true" />
</h:form>
<h3>Source</h3>
<p:tabView>
<p:tab title="fileUploadSingle.xhtml">
<pre name="code" class="xml">
<h:form enctype="multipart/form-data">
<p:fileUpload
fileUploadListener="\#{fileUploadController.handleFileUpload}"
mode="advanced" update="messages" sizeLimit="100000"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />
<p:growl id="messages" showDetail="true" />
</h:form>
</pre>
</p:tab>
<p:tab title="FileUploadController.java">
<pre name="code" class="java">
package org.primefaces.examples.view;
import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
import org.primefaces.event.FileUploadEvent;
import org.primefaces.model.UploadedFile;
public class FileUploadController {
public void handleFileUpload(FileUploadEvent event) {
FacesMessage msg = new FacesMessage("Succesful", event.getFile().getFileName() + " is uploaded.");
FacesContext.getCurrentInstance().addMessage(null, msg);
}
}
</pre>
</p:tab>
</p:tabView>
</div>
</ui:define>
</ui:composition>