Home > Tutorial

Add UI Components and Filters

UI Components and Filters allow to enrich the user interface in EBX.Manager.

UI Component

In a previous chapter, we saw how to specify a resource in our schema. Our example showed EBX.Platform ability to refer to a resource of type image.

We will now see how to display this image in EBX.Manager when the user consults the title table.

JavaDocEach time the user interface has to be customized for a specific purpose, we can create a BeanEditor, which is a specific Java class extending the com.orchestranetworks.ui.UIBeanEditor super class.

First, we define the UI Component in the schema:

<xs:element name="front_picture" type="osd:resource" minOccurs="0">
    <xs:annotation>
        <xs:appinfo>
            <osd:otherFacets>
                <osd:FacetOResource 
            osd:moduleName="wbp" 
            osd:resourceType="ext-images" 
            osd:relativePath="frontpages/"/>
            </osd:otherFacets>
            <osd:uiBean class="com.orchestranetworks.tutorial.editor.PictureEditor"/>
        </xs:appinfo>
    </xs:annotation>
</xs:element>

Next, we have to implement the Java code.

Any information in EBX.Manager is displayed as HTML code. To offer the ability to display the image whose name is stored in the front_page field of table Title, we will use the img HTML tag.

/*
 * Copyright © Orchestra Networks 2000-2006. All rights reserved.
 */
package com.orchestranetworks.tutorial.editor;

import com.orchestranetworks.schema.*;
import com.orchestranetworks.ui.*;

public class PictureEditor extends UIBeanEditor
{
    public void addForDisplay(UIResponseContext uiContext)
    {
        Object imageValue = uiContext.getValue();

        if (imageValue == null)
            return;

        String imagePath = uiContext.getValueContext().displayOccurrence(
            imageValue,
            uiContext.getLocale());

        String url = uiContext.getURLForResource(
            ResourceType.IMAGE,
            imagePath,
            uiContext.getLocale());

        uiContext.add("<img src=\"").add(url).add("\">");
    }

    public void addForEdit(UIResponseContext uiContext)
    {
        uiContext.addUIBestMatchingEditor(Path.SELF, "");
    }

    public void addForPrint(UIResponseContext uiContext)
    {
        uiContext.addUIBestMatchingDisplay(Path.SELF, UIRenderingMode.PRINT, "");
    }
}

Comments:

  • The com.orchestranetworks.ui.UIBeanEditor defines the behaviour of the specific user interface component in 3 contexts, i.e Edition, Display and Print. In this example, the behaviour is voluntary the same for Edition and Print.
  • JavaDocUser should refer to the EBX.Platform Javadoc for more information about the different methods called in the code.

The new user interface now looks as follows:

 

Filter

To enrich the user interface, it may be useful to filter data that appear for each table in the model. For this purpose, we can define another type of programmatic extensions: filters.
You may define as many filter as required for the same table.

Example: Add filtering abilities to the Titles page in EBX.Manager. The filter may be applied on the Author field of the model.

First, we have to define the filter in the schema.

<xs:complexType name="Title">
    <xs:annotation>
        <xs:appinfo>
            <osd:uiFilter class="com.orchestranetworks.tutorial.filters.AuthorFilter">
                <label>Authors filter</label>
                <label xml:lang="fr">Filtre Auteurs</label>
            </osd:uiFilter>
            <osd:table>
                <primaryKeys>/title_id</primaryKeys>
            </osd:table>
        </xs:appinfo>
    </xs:annotation>
    <xs:sequence>
        <!-- rest of the element declaration (as seen before in this tutorial) --> 
    </xs:sequence>
</xs:complexType>

As you have probably noticed, the filter label in EBX.Manager can be localized. JavaDoc

Next, we have to implement the corresponding Java class that extends com.orchestranetworks.ui.UITableFilter. 

/*
 * Copyright © Orchestra Networks 2000-2007. All rights reserved.
 */
package com.orchestranetworks.tutorial.filters;

import java.util.*;

import com.onwbp.adaptation.*;
import com.orchestranetworks.instance.*;
import com.orchestranetworks.schema.*;
import com.orchestranetworks.ui.*;

public class AuthorFilter extends UITableFilter
{
  private String[] selection = DEFAULT_SELECTION;
  private static final String[] DEFAULT_SELECTION = new String[] {};

  private class Author_Filter implements AdaptationFilter
  {
    private final String[] selection;

    public Author_Filter(String[] selection)
    {
      this.selection = selection;
    }

    public boolean accept(Adaptation anAdaptation)
    {
      String[] selection = this.selection;
      if (selection == null || selection.length == 0)
        return true;

      String author = anAdaptation.getString(Path.parse("/au_id"));

      if (author == null)
        return false;

      for (int i = 0; i < selection.length; i++)
      {
        String selected = selection[i];

        if (selected.equals(author))
          return true;
      }
      return false;
    }
	
    public String[] getSelection()
    {
      return this.selection;
    }
  }

  public void addForEdit(UITableFilterResponseContext aResponse)
  {
    aResponse.add("<table border=0 width=\"100%\">");
    aResponse.add("<tr>");
    aResponse.add("<td>");
    aResponse.add("<p class=\"text\">");

    this.addChoices_Type(aResponse);

    aResponse.add("</p>");

    aResponse.add("</td>");
    aResponse.add("</tr>");
    aResponse.add("</table>");
  }

  private void addChoices_Type(UITableFilterResponseContext aResponse)
  {
    List selection = Arrays.asList(this.selection);

    AdaptationTable table = aResponse.getTable();

    SchemaNode au_idNode = table.getSchemaNode().getNode(Path.parse("/root/Titles/au_id"));

    ValueContext valueContext = aResponse.getValueContext();
    List enumList = au_idNode.getEnumerationList(valueContext);
    if (enumList != null)
    {
      for (int i = 0; i < enumList.size(); i++)
      {
        String id = (String) enumList.get(i);
        String label = au_idNode.displayOccurrence(id, 
          true,
          valueContext, 
          aResponse.getSession().getLocale());

        aResponse.add("<input type=\"checkbox\" name=\"item\" style=\"border: 0;\" value=\"");
        aResponse.add(id);
        aResponse.add("\" ");
        if (selection.contains(id))
          aResponse.add("checked");
        aResponse.add("> ");

        aResponse.add(label);
        aResponse.add("<br>");
      }
    }
  }

  public void handleApply(UITableFilterRequestContext aContext)
  {
    this.selection = aContext.getParameterValues("item");
    if (this.selection == null)
      this.selection = DEFAULT_SELECTION;

    this.setTableFilter(aContext);
  }

  public void handleSelect(UITableFilterRequestContext aContext)
  {
    this.setTableFilter(aContext);
  }

  public void handleReset()
  {
    this.selection = DEFAULT_SELECTION;
  }

  private void setTableFilter(UITableFilterRequestContext aContext)
  {
    if (this.selection.length == 0)
      aContext.setTableFilter(null);
    else
      aContext.setTableFilter(new Author_Filter(this.selection));
  }
}

Comments:

  • JavaDocThe code uses in inner class Author_Filter that implements com.onwbp.adaptation.AdaptationFilter, in charge to determine among the Title table records which ones match the filtering criteria
  • The rest of the code is aimed to implement:
    • the Edition and Printing rendering (addForEdit and addForPrint respectively)
    • define the action to undertake when a selection is done or when the Apply or Reset button is pressed (handleSelect, handleApply and handleReset respectively)

Result:

When the user chooses an author and presses apply, the rendering is automatically done:

 

Next: Add UI Services for Import / Export >

 

Home > Tutorial