Realworld JSF Application Story

Vielleicht hatte ich es in einem früheren Posting schonmal erwähnt, ich arbeite momentan für einen großen dt. Firma an einem Web 2.0 Projekt und das ist jetzt fertig 😀

Ich konnte dabei all die wunderbaren „neuen“ Technologien einsetzen, u.a. JSF und damit eine funktionsfähige (also den Anforderungen des Kunden voll entsprechende) und zugleich performante „Web 2.0“ Applikation bauen.

Die Applikation nimmt sich dem Thema „Sicherheitstechnik“ (für die Auskenner: ISO 13849-1 und IEC 62061) an.

Mal kurz zu den verwendeten „Technologien/Frameworks/Tools/Ideen“:

• Daten ziehen wir aus einer SAP Knowledgebase und aus einer Datenbank via OpenJPA
• Services/Manager sind „normale“ Javaklassen (Stichwort Design-Pattern),
  als Kleber verwenden wir Spring (Stichwort Dependency Injection)
• UI mit JBoss Richfaces (Stichwort Ajax), JSF + Facelets (Stichwort Xhtml-Template), jQuery, CSS, etc.
  
• Buildsystem, Projektseiten mit Maven2
• Continues Integration via TeamCity und Maven2
• Tests hauptsächlich mit TestNG aber teilweise auch mit JUnit
• Laden/Speichern von Benutzerdaten via XStream (FileupLoad via Tomahawk), das alles noch Versionskompatibel, d.h. selbsgestrickte XML-Transformationskette für DomainModell-Updates
  
• PDF Reportgenerierung mit iText
• Anbindung an ein „Single Sign On“ System via Spring Security, Webservices
  

Im Rückblick kann ich sagen, dass eigentlich alles ohne größere Probleme miteinander funktioniert hat
… so soll es sein 😀

JSF, Ajax and file download

Today I show you a example which combines Ajax (Richfaces) and a „normal“ download in a JSF application.

Here is the bean with the download-code:

import java.io.File;
import java.io.IOException;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;
import javax.servlet.http.HttpServletResponse;

public class DownloadBean {

  // actionListener="#{bean.execute}"
  public void execute (ActionEvent event) {
   download();
  }

  // action="#{bean.download}"
  public String download() {
    final FacesContext facesContext = FacesContext.getCurrentInstance();
    // XXX create temp. filecontent ... resultFile
    writeOutContent(getServletResponse(), new File(this.resultFile), "file.xml");
    facesContext.responseComplete();
    // dont use jsf-navigation-rules
    return null;
  }

  void writeOutContent(final HttpServletResponse res, final File content, final String theFilename) {
    if (content == null)
      return;
    try {
      res.setHeader("Pragma", "no-cache");
      res.setDateHeader("Expires", 0);
      res.setContentType("text/xml");
      res.setHeader("Content-disposition", "attachment; filename=" + theFilename);
      fastChannelCopy(Channels.newChannel(new FileInputStream(content)), Channels.newChannel(res.getOutputStream()));
    } catch (final IOException e) {
      // TODO produce a error message 🙂
    }
  }

  void fastChannelCopy(final ReadableByteChannel src, final WritableByteChannel dest) throws IOException {
    final ByteBuffer buffer = ByteBuffer.allocateDirect(16 * 1024);
    while (src.read(buffer) != -1) {
      buffer.flip();
      dest.write(buffer);
      buffer.compact();
    }
    buffer.flip();
    while (buffer.hasRemaining()){
      dest.write(buffer);
    }
  }
}

Now the facelets snipplets: Not Working – Javascript Error 😦

<h:form>
 <h:commandLink actionListener="#{command.execute}" value="Download"/>
 <h:commandLink action="#{command.download}" value="Download"/>
</h:form>

Not Working – Download is shown in the current page – the ajax page will replaced with the download-content 😦

<a4j:form>
  <a4j:commandLink actionListener="#{command.execute}" value="Download"/>
  <a4j:commandLink action="#{command.download}" value="Download"/>
</a4j:form>

Working 🙂

<a4j:form>
 <a4j:htmlCommandLink actionListener="#{command.execute}" value="Download"/>
 <a4j:htmlCommandLink action="#{command.download}" value="Download"/>
</a4j:form>

<h:form>
 <a4j:htmlCommandLink actionListener="#{command.execute}" value="Download"/>
 <a4j:htmlCommandLink action="#{command.download}" value="Download"/>
</h:form>

The a4j:htmlCommandLink was made for this szenario.

Notice: the fast channel copy routine was introduced by waffel.

Fileupload mit Richfaces

This article shows the usage of a tomahawk-fileupload with richfaces and facelets. The result is a upload-formular where the upload-button is disabled until the user select a file. All this can be done without any line self hacked javascript-code 🙂

The upload-button depends on a bean-property ‚uploadedFilename‘ which is sync via AJAX.

So it is possible to enabled the upload-button before the file is really uploaded to the server.
We have a jsf-bean:

public class FileUploadBean  {

  private UploadedFile uploadedFile;
  private String uploadedFilename;

  // ... setter and getter ...

  public void uploadFile(final ActionEvent event) {
    if (null != this.uploadedFile) {
      LOG.debug("file-size '"+this.uploadedFile.getSize()+"'");
    }
  }
}

and the facelets-page:

<ui:component
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:c="http://java.sun.com/jstl/core"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:rich="http://richfaces.org/rich"
  xmlns:t="http://myfaces.apache.org/tomahawk"
  xmlns:a4j="http://richfaces.org/a4j">

<c:set var="controlId" value="controls" />

<a4j:form>
  <a4j:jsFunction name="updateFilename" reRender="#{controlId}">
   <a4j:actionparam name="filename" assignTo="#{FileUploadBean.uploadedFilename}" />
  </a4j:jsFunction>
</a4j:form>

<h:form enctype="multipart/form-data">
 <t:inputFileUpload id="fileupload"
                    size="40"
                    value="#{FileUploadBean.uploadedFile}"
                    storage="file"
                    required="true"
                    onchange="updateFilename(this.value)"/>

 <h:panelGroup id="#{controlId}">
   <c:choose>
     <c:when test="#{!empty FileUploadBean.uploadedFilename}">
       <!-- User has selected a File - enable Upload-Control -->
       <h:commandLink value="Upload enabled ..."
                      actionListener="#{FileUploadBean.uploadFile}"/>
     </c:when>
     <c:otherwise>
       <!-- User doenst have selected a File - DISABLE Upload-Control -->
       <h:outputText value="Upload disabled"/>
     </c:otherwise>
   </c:choose>
 </h:panelGroup>
</h:form>

</ui:component>