Tutorials > Sales Center > Extend a page in an editor

< Previous | Next >

Gift Center: Modify the user interface

Overview

In this step of the tutorial, you modify the user interface IBM Sales Center client to contain labels and fields for the gift message information.

Create a new plug-in

In this step you create a new plug-in to extend your page.

Procedure

1. In the IBM Sales Center development environment, switch to the Package Explorer view.

2. Click...

   File | New | Plug-in Project

3. In the Project name field, enter...

   orderEditorExtension

4. Select...

   Create an OSGi bundle manifest for the plug-in

   ...and keep all other default values.

5. Click Next.

6. Accept the defaults and click Finish.

Update the manifest file for the new plug-in

Now that you have the information describing the existing pages in the Order editor, you are ready to update the manifest file for the plug-in.

The strategy for modifying an existing page in an editor is to define all of the existing pages in the new plug-in, but point to the new implementation of the page that you are updating.

Note that in steps 4 and 5 you define dependencies for the new plug-in. Similar to import statements in a Java class, you need these dependency definitions in order to provide services or features required for the newly created plug-in. For example, com.ibm.commerce.telesales.widgets has the widget definitions and descriptor required for access to the widgets. You get a build error if do not define the dependency of plug-ins for the new project.

To modify the manifest file for the OrderEditorExtension plug-in:

1. Switch to the Package Explorer view.

2. Expand the orderEditorExtension plug-in.

3. Double click the plugin.xml file and click the Dependencies tab.

4. Add plug-ins that the plug-in requires:

   Add | com.ibm.commerce.telesales.core

5. Repeat the previous step to add the following dependent plug-ins:
   • com.ibm.commerce.telesales.ui
   • com.ibm.commerce.telesales.ui.impl
   • com.ibm.commerce.telesales
   • com.ibm.commerce.telesales.widgets
   • com.ibm.commerce.telesales.resources

6. Click the MANIFEST.MF tab to see the list of dependent plug-ins in the source file:

   Require-Bundle: org.eclipse.ui, org.eclipse.core.runtime, com.ibm.commerce.telesales.core, com.ibm.commerce.telesales.ui, com.ibm.commerce.telesales.ui.impl, com.ibm.commerce.telesales, com.ibm.commerce.telesales.widgets, com.ibm.commerce.telesales.resources

7. Indicate that we will be using the System Configurator to identify that a custom extension will be used instead of the default extension:

   1. Click...

      Extensions tab | Add | com.ibm.commerce.telesales.configurator

      If you do not see this extension point, deselect the Show only extensions points from the required plug-ins option and look again.

   2. Click Finish.

   3. The left pane has All Extensions list, select...

      com.ibm.commerce.telesales.configurator

      ...from its pop-up menu select...

      New | configurator

   4. In the right pane Extension Element Details, set the path value to config by typing config in the path.

   5. Click the plugin.xml tab to see the updates to the source file:

      <extension point="com.ibm.commerce.telesales.configurator"> 
               
          <configurator path="config"/>
      
      </extension>
      

Create a new resource bundle

To create the new resource bundle that will hold the text for displaying on the new page, do the following:

1. Switch to the Package Explorer view.

2. Expand the orderEditorExtension project.

3. Expand the src folder.

4. Right-click the orderEditorExtension package in the src folder and select New > File.

5. In the File name field, enter giftMessage.properties and click Finish.

6. Copy the following text into the properties file. OrderSummaryPage.giftCardTitle = Gift card information section OrderSummaryPage.giftCardRecipientName = Name of recipient OrderSummaryPage.giftCardSenderName = Name of sender OrderSummaryPage.giftCardMessage1 = Message 1 OrderSummaryPage.giftCardMessage2 = Message 2

7. Save the changes and close the file.

Update the plug-in.xml file with the new properties file

You have created the new resource bundle. Next, we will update the manifest file for the plug-in with the location of the resource file.

To update the manifest file:

1. With the orderEditorExtension project open, double click the plugin.xml file to open it for editing.

2. Click...

   Extensions tab | Add | com.ibm.commerce.telesales.resources.resources | Finish

3. Select...

   com.ibm.commerce.telesales.resources.resources | (pop-up list) New | resourceBundle

4. In the Extension Element Details pane, set the baseName value to...

   orderEditorExtension.giftMessage

5. Save the changes.

6. To see the changes in the source code, click the plugin.xml tab and find the following text: <extension point="com.ibm.commerce.telesales.resources.resources"> <resourceBundle baseName="orderEditorExtension.giftMessage"/> </extension>

Create a new definition for the order payment page

In this step we will create the own definition for the order payment page. Your definition will be similar to the default definition with an additional section for the gift message information.

1. Extend the com.ibm.commerce.telesales.widgets.compositeDefinitions plug-in:

   1. In the Extensions tab, click Add.

   2. From the Available extensions points list, select com.ibm.commerce.telesales.widgets.compositeDefinitions.

   3. In the All Extensions list, right-click com.ibm.commerce.telesales.widgets.compositeDefinitions and select New > gridCompositeDefinition.

   4. In the Extension Element Details pane:

      1. Set the id value to orderPaymentPageCompositeDefinition.

      2. Set the layoutId value to com.ibm.commerce.telesales.ui.impl.tableCompositeGridLayout.

      3. Set the referenceId value to com.ibm.commerce.telesales.ui.impl.orderPaymentPageCompositeDefinition. By using the referenceId value to point to the default definition id of the orderPaymentPageCompositeDefinition, you inherit all the rows within the default definition

   5. Save the changes.

   6. So far, the orderPaymentPageCompositeDefinition contains the same rows in its original definition. Add a row that will contain the gift order labels and fields for this tutorial:

      1. Click...

         the Extensions tab.

         In the All Extensions list, right-click orderPaymentPageCompositeDefinition and select New > row.

         In the Extension Element Details pane set the id value to giftOrderRow.

         Save the changes.

         In the All Extensions list, right-click giftOrderRow and select New > control.

         In the Extension Element Details pane:

         1. Set the controlId value to giftOrderGridComposite.

         2. Set the dataId value to com.ibm.commerce.telesales.ui.impl.orderGeneralPageDefaultData.

         You will define the contents of the giftOrderRow control element later in this tutorial.

   7. Save the changes.

   8. Click the plugin.xml tab to see the source code:

      <extension point="com.ibm.commerce.telesales.widgets.compositeDefinitions">  
      
      <gridCompositeDefinition layoutId="com.ibm.commerce.telesales.ui.impl.tableCompositeGridLayout" 
                                referenceId="com.ibm.commerce.telesales.ui.impl.orderPaymentPageCompositeDefinition">
          <row >
              <control controlId="giftOrderGridComposite" dataId="orderGeneralPageDefaultData"/>
          </row>
      
      </gridCompositeDefinition>  
      

2. Save the changes.

Tip: If you wanted to change the rows within the orderPaymentPageCompositeDefintion, for example, add a new row in the middle of the existing rows, you would not use the referenceId of the gridCompositeDefinition, but you would use the referenceIds of the rows within the gridCompositeDefinition. For example, if you wanted to add the gift message rows in the middle of the orderPaymentPageCompositeDefintion, the gridCompositeDefinition might look like the following example:

<gridCompositeDefinition layoutId="com.ibm.commerce.telesales.ui.impl.tableCompositeGridLayout">

    <row referenceId="com.ibm.commerce.telesales.ui.impl.orderPaymentCompositeRow"/>
    <row referenceId="com.ibm.commerce.telesales.ui.impl.orderPaymentPriceSummaryCompositeRow"/>
    <row referenceId="com.ibm.commerce.telesales.ui.impl.orderPaymentEmptyRow"/>

    <row >

        <control controlId="giftOrderRowComposite" 
                 dataId="
                 com.ibm.commerce.telesales.ui.impl.orderGeneralPageDefaultData"/>

    </row>

    <row referenceId="com.ibm.commerce.telesales.ui.impl.orderPONumberRow"/>
    <row referenceId="com.ibm.commerce.telesales.ui.impl.orderEmailRow"/>

</gridCompositeDefinition> 

Create a new gridCompositeDefinition with gift order labels and fields

In this section we will create a gridCompositeDefinition that contains five rows. The rows contain labels and fields for the user to enter gift message information.

To create a new gridCompositeDefinition:

1. In the Extensions tab, click Add.

2. From the Available extensions points list, select com.ibm.commerce.telesales.widgets.compositeDefinitions and click Finish.

3. In the All Extensions list, right-click com.ibm.commerce.telesales.widgets.compositeDefinitions and select New > gridCompositeDefinition.

4. In the Extension Element Details pane:

   1. Set the id value to giftOrderGridCompositeDefinition.

   2. Set the layoutId value to com.ibm.commerce.telesales.ui.impl.tableCompositeGridLayout.

5. Save the changes.

6. Click the plugin.xml tab and locate the following text:

   <gridCompositeDefinition layoutId="com.ibm.commerce.telesales.ui.impl.tableCompositeGridLayout"/>

7. Replace the above text with the following code. This code defines four rows. The first row will contain a title, while the next four rows will contain a label and field in which the user can enter a gift message:

   <gridCompositeDefinition  layoutId="com.ibm.commerce.telesales.ui.impl.tableCompositeGridLayout">
   
       <row >
           <control controlId="giftOrderTitleLabel" 
                    dataId="com.ibm.commerce.telesales.ui.impl.requiredLabelGridData"/>
       </row>
   
       <row >
           <control controlId="recipientLabel" 
                    dataId="com.ibm.commerce.telesales.ui.impl.requiredLabelGridData"/>
           <control controlId="recipientField" 
                    dataId="com.ibm.commerce.telesales.ui.impl.findTextFieldGridData"/>
       </row>
   
       <row >
           <control controlId="senderLabel" 
                    dataId="com.ibm.commerce.telesales.ui.impl.requiredLabelGridData"/>
               <control controlId="senderField" 
                    dataId="com.ibm.commerce.telesales.ui.impl.findTextFieldGridData"/>
       </row>
   
       <row >
           <control controlId="message1Label" 
                    dataId="com.ibm.commerce.telesales.ui.impl.requiredLabelGridData"/>
           <control controlId="message1Field" 
                    dataId="com.ibm.commerce.telesales.ui.impl.findTextFieldGridData"/>
       </row>
   
       <row >
           <control controlId="message2Label" 
                    dataId="com.ibm.commerce.telesales.ui.impl.requiredLabelGridData"/>
           <control controlId="message2Field" 
                    dataId="com.ibm.commerce.telesales.ui.impl.findTextFieldGridData"/>
       </row>
       
   </gridCompositeDefinition>    
   

   Note: It is possible to enter the same data through the Graphical User Interface on the Extensions tab. However, the source code is provided for simplicity.

Define the control elements in each giftOrderGridComposition Row

Each control element referenced in the code above - the giftOrderGridCompoisite and the labels and fields must be defined as an extension of the com.ibm.commerce.telesales.widgets.controls extension point.

To define these controls in the plugin.xml tab, enter the following text before the </plugin> tag:

<extension point="com.ibm.commerce.telesales.widgets.controls"> 
      
    <control text="OrderSummaryPage.giftCardTitle" 
             type="label" />  
      
    <control text="OrderSummaryPage.giftCardRecipientName" 
             type="label" /> 
      
    <control type="text"  
             modelPath="salescontainer.receiptName"
             userData="true"/>  
      
    <control text="OrderSummaryPage.giftCardSenderName" 
             type="label" /> 
      
    <control type="text"  
             modelPath="salescontainer.senderName"
             userData="true"/>  
      
    <control text="OrderSummaryPage.giftCardMessage1" 
             type="label" /> 
      
    <control type="text"  
             modelPath="salescontainer.msgField1"
             userData="true"/>  
      
    <control text="OrderSummaryPage.giftCardMessage2" 
             type="label" /> 
      
    <control type="text"  
             modelPath="salescontainer.msgField2"
             userData="true"/>  
      
    <control type="composite"  
             compositeDefinitionId="giftOrderGridCompositeDefinition"/>
    
</extension> 

Notice the following attributes about the preceding code:

• The text properties correspond to entries in the newOrderSummaryResources.properties file.

• The id properties correspond to entries in the gridCompositeDefinition called giftOrderGridCompositeDefinition.

• The modelPath properties consist of two values separated by a period, for example, salescontainer.receiptName.

  • The value before the period, in this example salescontainer, represents the model object.

  • The value after the period, in this example receiptName, is the name of the parameter expected by the command on the server. Recall from the prerequisite Extending the object model and modifying an existing task command tutorial the ExtOrderProcessCmd task command. This task command was created to store the gift order information in the database when the user submits an order from the store web page. This task command runs every time the OrderProcess command runs, including when a user submits an order from the IBM Sales Center client. By specifying the modelPath property for a text control, you indicate that the data in the text control should be passed to a specific model object as a specific parameter. In this example, the data entered in recipientField will be passed to the salescontainer model object as the value for the parameter receiptName.

• The userData property is set to true for the values that to send to the WebSphere Commerce Server. These values will be added to the userData element of the request BOD. The combination of the modelPath and the userData properties ensure that the data in the gift order message fields are passed to the WebSphere Commerce Server and that the values are correctly identified as specific parameters.

Define the system configuration information

Now that you have defined a new ID for the updated editor definition, update the System Configuration information so that the new editor definition will be found and used.

To update this configuration information:

1. In the Package Explorer view, right-click the orderEditorExtension project and select New > Folder.

2. In the Folder name field, enter config and click Finish.

3. Right-click the config folder and click New > File.

4. In the File name field, enter config.ini and click Finish.

5. The new config.ini file opens in a text editor. Copy the following text into this file: com.ibm.commerce.telesales.ui.impl.orderPaymentPageCompositeDefinition=orderEditorExtension.orderPaymentPageCompositeDefinition

6. Save the changes and close the file. The text indicates that instead of using the default orderPaymentPageCompositedefinition, the IBM Sales Center client should use the definition in the orderEditorExtension plug-in, named orderPaymentPageCompositedefintion.

View the changes

To see the changes in the IBM Sales Center client:

1. Run the IBM Sales Center client...

   Run | Run | Application | Open | IBM Sales Center - Order Management | File | Logon

2. Find and select a store by clicking...

   Store | Select | Finding a valid store

3. Create an order...

   Order | Create

4. On the Order tab, click Guest Customer.

5. Click the Payment tab of the order editor. Your new labels and fields should display...

   

< Previous | Next >

+

Search Tips   |   Advanced Search