Java 2 Ada

Ada Server Faces 0.5.0 is available

By stephane.carrez

Ada Server Faces is an Ada implementation of several Java standard web frameworks.

  • The Java Servlet (JSR 315) defines the basis for a Java application to be plugged in Web servers. It standardizes the way an HTTP request and HTTP response are represented. It defines the mechanisms by which the requests and responses are passed from the Web server to the application possibly through some additional filters.
  • The Java Unified Expression Language (JSR 245) is a small expression language intended to be used in Web pages. Through the expressions, functions and methods it creates the link between the Web page template and the application data identified as beans.
  • The Java Server Faces (JSR 314 and JSR 344) is a component driven framework which provides a powerful mechanism for Web applications. Web pages are represented by facelet views (XHTML files) that are modelized as components when a request comes in. A lifecycle mechanism drives the request through converters and validators triggering events that are received by the application. Navigation rules define what result view must be rendered and returned.

Ada Server Faces gives to Ada developers a strong web framework which is frequently used in Java Web applications. On their hand, Java developers could benefit from the high performance that Ada brings: apart from the language, they will use the same design patterns.

Ada Server Faces

The new version of Ada Server Faces is available and brings the following changes:

  • The Security packages was moved in a separate project: Ada Security,
  • New demo to show OAuth and Facebook API integration,
  • Integrated jQuery 1.8.3 and jQuery UI 1.9.2,
  • New converter to display file sizes,
  • Javascript support was added for click-to-edit behavior,
  • Add support for JSF session beans,
  • Add support for servlet error page customization,
  • Allow navigation rules to handle exceptions raised by Ada bean actions,
  • Support the JSF 2.2 conditional navigation,
  • New functions fn:escapeXml and fn:replace.

The new version can be downloaded on the Ada Server Faces project page. A live demo is available at http://demo.vacs.fr/demo.

To add a comment, you must be connected. Login to add a comment

Ada Server Faces Application Example part 1: the presentation

By stephane.carrez 1 comment

Ada Server Faces is a framework which allows to write and build web applications. This article presents through a simple example how to use ASF to write a simple web application.

ASF Overview

Ada Server Faces uses a model which is very close to Java Server Faces. JSF and ASF use a component-based model for the design and implementation of a web application. Like traditional MVC models, the presentation layer is separated from the control and model parts. Unlike the MVC model, JSF and ASF are not request-based meaning there is not a specific controller associated with the request. Instead, each component that is part of the page (view) participate in the control and each component brings a piece of the model.

This first article will focus on the presentation layer through a simple example.

Cylinder Volume Example

The example computes the volume of a cylinder. A simple form with two input fields allows to enter the cylinder dimensions (the unit does not matter).

Volume form

ASF Templating

The presentation part is implemented by a facelet file and a CSS file. The facelet file is an XML file which contains XHTML elements as well as facelets and JSF/ASF components. The facelets and ASF components are specified in their own XML namespace. The ASF components form a tree of components (UIComponent) which is then used for displaying and processing form submissions.

At the root of the XML file is an f:view component which represents the root of the component tree. The typical page layout looks as follows. Note the #{contextPath} notation in the link reference. This is an EL expression that will be evaluated when the view is displayed (rendered in JSF terminology).

<f:view contentType="text/html"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:c="http://java.sun.com/jstl/core"
	xmlns:u="http://code.google.com/p/ada-asf/util"
        xmlns:h="http://java.sun.com/jsf/html">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link media="screen" type="text/css" rel="stylesheet"
      href="#{contextPath}/themes/main.css"/>
    <title>Volume Cylinder</title>
</head>
<body>
  <div>
     <h1>Compute the volume of a cylinder</h1>
     ...
  </div>
</body>
</html>
</f:view>

The form, input fields and submit buttons have to be specified using a JSF/ASF component. The JSF/ASF component will make the link between the presentation (view) and the controller (beans). The h:form is the JSF/ASF component that represents our form. Note that there is no need to specify any form action attribute: the form action will be managed by JSF/ASF.

The input fields are identified by the h:input components. The input field is linked to the bean through the value EL expression. This expression specifies the bean name and attribute. When rendering the view, JSF/ASF will fetch the value from the named bean. On form submission, JSF/ASF will populate the bean with the submitted value.

The h:input component can contain a f:converter element which indicates a conversion operation to call when displaying or before populating the bean value.

<h:form id='compute'>
  <dl>
    <dt>Height</dt>
    <dd>
      <h:inputText id='height' size='10' value='#{compute.height}'>
        <f:converter converterId="float" />
      </h:inputText>
    </dd>
    <dt>Radius</dt>
    <dd>
        <h:inputText id='radius' size='10' value='#{compute.radius}'>
           <f:converter converterId="float"/>
        </h:inputText>
    </dd>
    <dt></dt>
    <dd>
        <h:commandButton id='run' value='Compute'
       action="#{compute.run}"/>
    </dd>
  </dl>
</h:form>

At the form end, the h:commandButton represents the submit button and the controller action to invoke on form submission. The method to invoke is defined with an EL method expression in the action attribute. Before invoking the method, JSF/ASF will verify the submitted values, convert them according to associated converters, populate the beans with the values.

Style

The page style is provided by a specific CSS file. The dl/dt/dd list is rendered as a table using the following CSS definitions. By changing the CSS file, a new presentation can be provided to users.

dl {
  float: left;
  width: 500px;
  border: 1px solid #bcd;
  background-color: #ffffff;
  padding: 10px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px 6px;
}
dt {
  clear: left;
  float: left;
  font-weight: bold;
  width: 20%;
  height: 20px;
  line-height: 24px;
  padding: 5px;
}
dd {
  float: left;
  padding: 5px;
}

Next time...

In this article, I've shown how to write the presentation and style part of an Ada Server Faces application. The next article will present the Ada beans that are associated with this example.

1 comment
To add a comment, you must be connected. Login to add a comment

Inserting a file in a JSF view with a custom component

By stephane.carrez 1 comment

Putting all this in a database is of course possible but it means that some administration interface is necessary when we change the blocks. Since the blocks are not intended to be changed too often, I prefered to have some simple solution and use plain text files for the storage.

The goal is now to make a JSF component that reads the file and insert it in the output page.

Step1: Write the UI Component class

The JSF component must inherit from UIComponentBase class. The class must implement the getFamily method to tell to what component family the component belongs.

 package example;
 public class UIFile extends UIComponentBase {
    public String getFamily() {
        return "UIFile";
    }
   ...
 }

The component only needs a file name as parameter. To make it simple, the file component is an attribute that cannot be bound to a value expression (ie, a #{xxx}). Define the file member and the accessor methods:

  public class UIFile extends UIComponentBase {
    protected String file;
    public String getFile() {
        return file;
    }
    public void setFile(String file) {
        this.file = file;
    }
  }

Now, the JSF component is ready and we need a renderer. To make it simple, you can make the component provide and implement the renderer. This is easier but you loose some flexibility. In our case, implementing the rendering in the JSF encodeBegin method is enough. To keep the example small, the file path must be absolute (in reality I'm using a servlet context parameter to configure the directory; this is left as an exercise :-)). To copy the file, I'm using the famous Apache IO library.

   import org.apache.commons.io.IOUtils;
   public class UIFile extends UIComponentBase {
    private static final char[] STOP = new char[0];
    public void encodeBegin(final FacesContext context)
      throws IOException {
        final String name = getFile();
        if (name == null || name.length() == 0) {
            return;
        }
        File f = new File(name);
        if (!f.exists()) {
            return;
        }
        final ResponseWriter rw = context.getResponseWriter();
        rw.writeText(STOP, 0, 0);
        FileInputStream is = null;
        try {
            is = new FileInputStream(f);
            final char[] data = IOUtils.toCharArray(is, "UTF-8");
            rw.write(data);
        } catch (IOException ex) {
        } finally {
            if (is != null) {
                try {
                    is.close();
                } catch (IOException ex) {
                }
            }
        }
   }
 }

For all this to work, there is a trick. The trick is that before writing the file content, we have to close any opened HTML element. This is done by calling writeText with an empty array. After that, the file data is written as is and unescaped.

Step2: Register the component in faces-config.xml

Once your UI component class is written, you have to register it in your faces-config.xml file:

    <component>
        <component-type>example.UIFile</component-type>
        <component-class>example.UIFile</component-class>
    </component>

Step3: Create the taglib

Then, write a taglib file. This is an XML file that tells Facelet the name of the tag in the XHTML file and how to bind that name to the new component.

 <facelet-taglib>
    <namespace>http://www.example.com/tool</namespace>
    <tag>
        <tag-name>insert</tag-name>
        <component>
            <component-type>example.UIFile</component-type>
        </component>
    </tag>
  </facelet-taglib>

Step4: Use the component

The last step is to use our new component in the XHTML file, this is as simple as this:

  <tool:insert file="myfile.html"/>
1 comment
To add a comment, you must be connected. Login to add a comment