Tutorials > Sales Center > Add an editable column to the Order Items table by creating a new widget manager

< Previous | Next >

Create the new widget manager for the new editable column

This section is related to creating the new widget manager for the new editable column.

A widget manager is responsible for providing the dynamic behavior for one or more widgets. Widget managers initialize, refresh, save, and dispose of configured controls. They are also responsible for providing the content of table cells. Refer to Declare a widget manager in the information center. Also, widget managers and managed composites are illustrated in Managed composite and widget managers.

A standard widget manager is provided with the IBM Sales Center and is used with standard controls and tables. When a configured control is defined, it can be declared with a manager type. The manager type is read by the widget manager to decide if the control should be managed by the widget manager. Widget managers only manage controls that have a manager type that they recognize. If a control does not declare a manager type, then it is assumed to be "standard".

Widget managers use the managerType attribute on a control or table column declaration to determine if it should manage the widget or ignore it.

In the plug-in's plugin.xml file, define an extension to the com.ibm.commerce.telesales.widgets.widgetManager extension point to declare the widget manager.

1. Include the widget manager in the definition of the managed composite that includes the controls that the widget manager is going to be responsible for managing.

2. Replace the managed composite with a new one that includes the new widget manager.

3. Use the referenceId to pull in the original managed composite definition and then add the new widget manager.

Register the new widget manager with telesales widget manager extension point

In this step, you declare your new widget manager of the order item table for managing the new editable column; see Declare a widget manager. MyNewOrderItemsManager is the ID of the new extended widget manager that you are going to create in the next step of the tutorial.

1. Click the Extensions tab of the com.example.commerce.telesales.myNewPracticePlugin plug-in.

2. Click Add.

3. From the Extension Points list, select com.ibm.commerce.telesales.widgets.widgetManager. This is the extension point for creating a new widget manager.

4. Click Finish.

5. Select com.ibm.commerce.telesales.widgets.widgetManager > widgetManager.

6. In the Extensions Element Details pane:

   • Set the id to myNewOrderItemsManager.

   • Set the manager class value to com.example.commerce.telesales.myNewPracticePlugin.ExtendedOrderItemsPageManager and save the changes.

     com.example.commerce.telesales.myNewPracticePlugin.ExtendedOrderItemsPageManager is the new widget manager class that extends the standard widget manager.

7. Click the plugin.xml tab and examine the widget manager's source code:

        <extension point="com.ibm.commerce.telesales.widgets.widgetManagers"> 
            <widgetManager managerClass="com.example.commerce.telesales.myNewPracticePlugin.ExtendedOrderItemsPageManager 
            /> 
        </extension>

You have now defined an extension to the com.ibm.commerce.telesales.widgets.widgetManager extension point to declare the widget manager. Next, include the widget manager in the definition of the managed composite that includes the controls that the widget manager is going to be responsible for managing. You will replace the managed composite with a new one that includes the new widget manager by using referenceId to pull in the original managed composite definition and then add the new widget manager.

Determine the ManagedComposite ID for the orderItemsPage

A managed composite encapsulates a high-level configured composite and one or more widget managers. A managed composite ID is a unique identifier for this managed composite declaration. Use this identifier to refer to this managed composite.

To get the ManagedComposite ID for the orderItems page, refer to managedComposites for help on the following steps:

1. Check the javadoc files for the editor ID you are looking for:

   Refer to the API information in the com.ibm.commerce.telesales.ui.impl.editors.order package. According to the Class Summary description, you can tell that OrderEditor is an editor used for creating an order. Click the OrderEditor class to search information for OrderEditor ID. By browsing all the methods within the class, you can see that there is a method called getEditorId. From the method you can extract the following information.

   public java.lang.String getEditorId()

   Returns the editor ID for this editor. The value is com.ibm.commerce.telesales.orderEditor.

   That means the editor ID of Order editor is com.ibm.commerce.telesales.orderEditor.

2. Look for the Editor ID com.ibm.commerce.telesales.orderEditor in plugin.xml.

   • In the Package Explorer view of the Sales Center development environment, navigate to the com.ibm.commerce.telesales.ui.impl plug-in.

   • In the plugin.xml file, locate the order Editor section by searching for com.ibm.commerce.telesales.orderEditor. You see the following code:

   <!-- Order Editor -->
   
        
   <editor name="%orderEditorName"
             icon="icons/ctool16/edit_order.gif" 
            
   class="com.ibm.commerce.telesales.ui.impl.editors.order.OrderEditor"
    
             >
        
   </editor>
   

3. Keep searching by using the same editorID com.ibm.commerce.telesales.orderEditor, then go to the section Order Editor Pages to get the information about the orderItemsPage.

   <!-- Order Editor Pages -->
    
   <editor editorId="com.ibm.commerce.telesales.orderEditor"
   > 
      
   <page name="%orderByPageName"
   class="com.ibm.commerce.telesales.ui.impl.editors.order.OrderGeneralConfigurablePage"
   
         > 
      
   </page> 
      
   <page name="%orderItemsPageName"
   class="com.ibm.commerce.telesales.ui.impl.editors.order.OrderItemsConfigurablePage"
   
         >
      
   </page> 
      
   <page name="%orderPromotionsPageName"
   class="com.ibm.commerce.telesales.ui.impl.editors.order.OrderPromotionsConfigurablePage"
   
         > 
      
   </page> 
      
   <page name="%orderSummaryPageName"
   class="com.ibm.commerce.telesales.ui.impl.editors.order.OrderPaymentConfigurablePage"
   
         > 
       
   </page>
       
   <page name="%orderCommentsPageName"
   class="com.ibm.commerce.telesales.ui.impl.editors.order.OrderCommentsConfigurablePage"
   
        
   > 
       
   </page>
    
   </editor>
   

   The order editor can have multiple Order Editor Pages. According to the previous information, you know that the Java class com.ibm.commerce.telesales.ui.impl.editors.order.OrderItemsConfigurablePage is related to the orderItemsPage. The orderItemsPage id is "com.ibm.commerce.telesales.orderItemsPage."

4. Check the ManagedComposite ID for the orderItemsPage now that you have the related Java class for the orderItemsPage:

Refer to com.ibm.commerce.telesales.ui.impl.editors.order.OrderItemsConfigurablePage. By browsing the methods within the class, you can find a method called getPageContentManagedCompositeId.

protected java.lang.String getPageContentManagedCompositeId()

This method returns the page content managed composite ID.

Returns:

The page content managed composite id. This checks if pagination is enabled or not. If pagination is enabled, the value is com.ibm.commerce.telesales.ui.impl.orderItemsPaginationPageManagedComposite. Otherwise, the value is com.ibm.commerce.telesales.ui.impl.orderItemsPageManagedComposite.

Because pagination is enabled by default, the ManagedComposite ID for orderItemsPage is com.ibm.commerce.telesales.ui.impl.orderItemsPaginationPageManagedComposite.

Add the registered widget manager in a managed composite

In this step, you add the newly registered widget manager in a managed composite. Refer to Modify a managed composite.

1. Click the Extensions tab of the com.example.commerce.telesales.myNewPracticePlugin plug-in.

2. Click Add.

3. From the Extension Points list, select com.ibm.commerce.telesales.widgets.managedComposites. This is the extension point for declaring a new managed composite definition.

4. Click Finish.

5. Right-click com.ibm.commerce.telesales.widgets.managedComposites and select New > managedComposite.

6. In the Extensions Element Details pane:

   • Set the id to myNewExtensionsPluginManagedComposite

   • Set the referenceId value to com.ibm.commerce.telesales.ui.impl.orderItemsPaginationPageManagedComposite and save the changes.

   The reference ID com.ibm.commerce.telesales.ui.impl.orderItemsPaginationPageManagedComposite is the original managed composite definition for the orderItemsPage, which we get from the previous step - Determine the ManagedComposite ID for the orderItemsPage.

7. Right-click myNewExtensionsPluginManagedComposite(managedComposite) and select New > widgetManager.

8. In the Extensions Element Details pane, set the ID to myNewOrderItemsManager.

By doing this, the newly registered widget manager myNewOrderItemsManager is added into the new managed composite definition myNewExtensionsPluginManagedComposite.

Point to the new managed composite definition

In this step, you use the system configurator to indicate that the new managed composite should be used instead of the Sales Center managed composite. This does not affect any managed composites that used referenceId to refer to the managed composite being replaced.

1. In the com.example.commerce.telesales.myNewPracticePlugin\config\config.ini file, add the following line to indicate that the new managed composite should be used instead of the Sales Center managed composite:

   com.ibm.commerce.telesales.ui.impl.orderItemsPaginationPageManagedComposite=com.example.commerce.telesales.myNewPracticePlugin.myNewExtensionsPluginManagedComposite
   

2. Save and close the file.

Create a new widget manager class that extends the standard widget manager

In this step, you create a new class that extends the class StandardWidgetManager and handles the behavior of the new added table column called Fulfillment. In steps 2-4, refer to the StandardWidgetManager API for additional method details.

1. Create a class that extends StandardWidgetManager:

   1. In the Package Explorer view, navigate to the com.example.commerce.telesales.myNewPracticePlugin > src.

   2. Right-click the com.example.commerce.telesales.myNewPracticePlugin package and select New > class.

   3. In the Name field, enter ExtendedOrderItemsPageManager.

   4. Next to the Superclass field, click Browse.

   5. In the Choose a type field, enter StandardWidgetManager and click OK.

   6. Click Finish.

You will perform the following in the newly created file ExtendedOrderItemsPageManager.java:

1. Override the canModify() method to check whether the new "Fulfillment " column is editable.

2. Override initTableColumn() to initialize the "Fulfillment Center" column, display the selected fulfillment center value that is stored in order item table field1, and add the listener for the "Fulfillment Center" column. .

3. Override refreshTableColumn() to refresh the "Fulfillment Center" column.

Attached is the code snippet for ExtendedOrderItemsPageManager.java.

When you are finished making code changes, you can right-click anywhere in the source and click Source > Organize Imports. This fixes any potential problems related to import statements.

/**
 * Create a new class that extends from the StandardWidgetManager
class. This customization 
 * will handle the behavior of the new added Fulfillment Center
table column.
 * What the code performs is:  * 1.Override the method canModify()to check whether the new column
Fulfillment is editable
 * 2.Override the method initTableColumn() to initialize your
Fulfillment Centers column, display the selected Fulfillment center
 
 *   value that is stored in the order item table field1, add the
listener for the Fulfillment Centers column.
 * 3.Override refreshTableColumn() to refresh the Fulfillment
Centers column.
 */
public class ExtendedOrderItemsPageManager extends
StandardWidgetManager {
        
        public static final String MANAGER_TYPE_EXTENDED_MANAGER =
"myNewOrderItemsManager"; //widgetManager
        public static final String COLUMN_NAME =
"com.example.commerce.telesales.myNewPracticePlugin.orderItemPageItemTableFullfillment";//Property
value for the column "Fulfillment Center"
        public static final String ITEM_TABLE =
"orderItemPageTableDefinition.default";//Order Item table
        public static final String TAG_FULFILLMENT_CENTER =
"FFM";//The tag for fulfillment center

        private  final SelectionListener dataSelection_ = new
SelectionAdapter(){
                

/**
 * This is to inform the framework that you have changed the
Fulfillment Centers column. You can 
 * see one more line in initTableColumn, where we are adding the
listener for that column
 */

                public void widgetSelected(SelectionEvent e) {
                        Line line =
(Line)getInputProperties().getData(SalesContainerPaginationItemsPageWidgetManager.CURRENT_ITEM);
                        line.setDirty(true);
                }               
        };

        public ExtendedOrderItemsPageManager() {
                setManagerType(MANAGER_TYPE_EXTENDED_MANAGER);
        }
/**
 * Override the method canModify() to check whether the new
Fulfillment Centers column is editable
 * @param element
 * @param configuredTableColumn
 * @param configuredTable
 */
        public Boolean canModify(Object
element,ConfiguredTableColumn configuredTableColumn,ConfiguredTable
configuredTable) {
        if (configuredTableColumn.getColumnCellEditor() !=
null&&
configuredTableColumn.getColumnCellEditor().getControl() != null
                                                                   
                            && element != null) {
                String columnType = (String)
configuredTableColumn.getProperty(SalesContainerPaginationItemsPageWidgetManager.INPUT_PROP_COLUMN_TYPE);
                String tableType = (String)
configuredTable.getProperty(SalesContainerPaginationItemsPageWidgetManager.INPUT_PROP_TABLE_TYPE);
                Object inputObject =
getInputProperties().getData(SalesContainerPaginationItemsPageWidgetManager.INPUT_PROP_SALES_CONTAINER);
                SalesContainer salesContainer = null;
                if (inputObject instanceof SalesContainer) {
                        salesContainer = (SalesContainer)
inputObject;
                }
                boolean check =
((SalesContainer.STATUS_ORDER_PENDING.equals(salesContainer.getStatus())
||
SalesContainer.STATUS_ORDER_EDITED.equals(salesContainer.getStatus()))
                                                && ((Order)
salesContainer).getEditorMode().length() > 0 &&
!salesContainer.isLocked());
                if (configuredTableColumn != null&&
configuredTableColumn.getManagerType().equals(getManagerType())) {
                        return new Boolean(true);
                }
                if (ITEM_TABLE.equals(tableType) && element
!= null&& element instanceof Line) {
                        Line item = (Line) element;
                        if (COLUMN_NAME.equals(columnType)
&& item.isEditable()&& item.isProductValid()
&& check) {
                                return new Boolean(true);
                        }
                }
                return super.canModify(element, configuredTableColumn,configuredTable); //if it's not ours, let
Standard Widget Manager handle it
                }
                return null;//invalid parameters
                }
        /**
         * Override the method initTableColumn() to initialize your
Fulfillment Centers column, display the selected Fulfillment center
 
         * value that is stored in the order item table field1, add
the listener for the Fulfillment Centers column.
         * @param configuredTableColumn
         */
        public void initTableColumn(ConfiguredTableColumn
configuredTableColumn) {
                if (configuredTableColumn != null&&
configuredTableColumn.getManagerType().equals(getManagerType())) {
                        String columnType = (String)
configuredTableColumn.getProperty(SalesContainerPaginationItemsPageWidgetManager.INPUT_PROP_COLUMN_TYPE);
                        if (COLUMN_NAME.equals(columnType)) {
                                if
(configuredTableColumn.getColumnCellEditor() instanceof
ComboBoxCellEditor) {
                                        Object inputObject =
getInputProperties().getData(SalesContainerPaginationItemsPageWidgetManager.INPUT_PROP_SALES_CONTAINER);
                                        SalesContainer
salesContainer = null;
                                        if (inputObject instanceof
SalesContainer) {
                                                salesContainer =
(SalesContainer) inputObject;
                                        }
                                        Store store =
TelesalesModelManager.getInstance().getActiveStore();
                                        Vector ffmList = (Vector)
store.getData(TAG_FULFILLMENT_CENTER);
                                        int size = 0;
                                        if (ffmList != null) {
                                                size =
ffmList.size();
                                        }
                                        String[] comboList = new
String[size];
                                        String[] listValue = new
String[size];
                                        for (int i = 0; ffmList !=
null && i
< ffmList.size(); i++) {
                                                FFMCenter ffc =
(FFMCenter) ffmList.elementAt(i);
                                                comboList[i] =
ffc.getFfmCenterName().toString();
                                                listValue[i] =
ffc.getFfmCenterId().toString();
                                        }
                                        ((ComboBoxCellEditor)
configuredTableColumn.getColumnCellEditor()).setItems((String[])
comboList);
                                        ((ComboBoxCellEditor)
configuredTableColumn.getColumnCellEditor()).setValues((String[])
listValue);
                                        Combo selectCombo = (Combo)
(((ComboBoxCellEditor)
configuredTableColumn.getColumnCellEditor()).getControl());
                                       
selectCombo.addSelectionListener(dataSelection_);
                                }
                        }
                }
                super.initTableColumn(configuredTableColumn);
        }

        /**
        * Refresh the specified configured table column.
        * 
        * @param configuredTableColumn
        *            the configured table column
        */
        public void refreshTableColumn(ConfiguredTableColumn
configuredTableColumn) {
        if (configuredTableColumn != null &&
configuredTableColumn.getManagerType().equals(getManagerType())) {
                        String columnType = (String)
configuredTableColumn.getProperty(SalesContainerPaginationItemsPageWidgetManager.INPUT_PROP_COLUMN_TYPE);
                        ConfiguredTable configuredTable =
(ConfiguredTable) configuredTableColumn.getParent();
                        Table itemTable =
configuredTable.getTable();
                        if (itemTable.isDisposed() ||
itemTable.getSelectionIndex() == -1) {
                        return;
                        }
                        if (COLUMN_NAME.equals(columnType)) {
                        if
(configuredTableColumn.getColumnCellEditor() instanceof
ComboBoxCellEditor) {
                               
configuredTable.getTelesalesTableViewer().refresh();
                          }
                         }
                        }
                super.refreshTableColumn(configuredTableColumn);
        }

At this point, you have created a new editable column. Now get fulfillment center information from the WebSphere Commerce server to populate the choices given in the editable column. The next few steps enable you to do that.

< Previous | Next >

+

Search Tips   |   Advanced Search