Home > Tutorial

Add UI Components & Filters

UI Components and Filters allow to enrich the user interface in webMethods Master Data Manager.

UI Component

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

We will now see how to display this image in webMethods Master Data 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.softwareag.mdm.ui.UIBeanEditor super class.

First, we define the UI Component in the schema:

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

Next, we have to implement the Java code.

Any information in webMethods Master Data 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 © Software AG 2000-2006. All rights reserved.
 */
package com.softwareag.mdm.tutorial.editor;

import com.softwareag.mdm.schema.*;
import com.softwareag.mdm.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.softwareag.mdm.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 webMethods MDM 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 webMethods Master Data 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>
            <mdm:uiFilter class="com.softwareag.mdm.tutorial.filters.AuthorFilter">
                <label>Authors filter</label>
                <label xml:lang="fr">Filtre Auteurs</label>
            </mdm:uiFilter>
            <mdm:table>
                <primaryKeys>/title_id</primaryKeys>
            </mdm: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 webMethods Master Data Manager can be localized. JavaDoc

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

/*
 * Copyright © Software AG 2000-2007. All rights reserved.
 */
package com.softwareag.mdm.tutorial.filters;

import java.util.*;
import com.softwareag.mdm.adaptation.*;
import com.softwareag.mdm.base.text.*;
import com.softwareag.mdm.schema.*;
import com.softwareag.mdm.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 String getLabel(Locale aLocale)
    {
        return "Authors filter";
    }

    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"));

        Nomenclature nomenc = au_idNode.getEnumerationNomenclature(aResponse.getValueContext());
        if (nomenc != null)
        {
            for (int i = 0; i < nomenc.getSize(); i++)
            {
                NomenclatureItem item = nomenc.getItems(i);

                String id = (String) item.getValue();
                String label = item.getDefaultLabel();

                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(String.valueOf(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.softwareag.mdm.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)

Note that the method addChoices_Type(UITableFilterResponseContext aResponse) uses a nomenclature according to the XML schema of the table attribute involved in the filter. Hence, for an attribute of type enumeration a list should be more appropriate. In all cases, we can always use AdaptationTable.createRequest().execute() and then read the table occurrences obtained, for creating a filter according to the values of a given attribute of this table.

Result:

A new ‘Show filter’ button now appears on the top end part of the Titles page.

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

 

Next: Add UI Services for Import / Export >

 

Home > Tutorial