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 image type.

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

Each 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 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.displayOccurrence(imageValue, true);

        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 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 filters 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.

Next, we have to implement the corresponding Java class that extends 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.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:

Result:

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

Next: Add UI Services

Home > Tutorial