Adding a slosh bucket

About this task

While adding a slosh bucket, the following files are modified:

  • The JSP page to which you added the slosh bucket
  • Modified resource bundle files MyPageResource_locale.properties

To add a slosh bucket:

Procedure

  1. Write your page content using JSP and JavaScript files. Your JSP file must include the following JavaScript: 
    
<SCRIPT SRC="/wcs/javascript/tools/common/SwapList.js"></SCRIPT>

    The following is example HTML code which includes a slosh bucket on the page. The values for the buttonName, buttonName2, and the customJavaScriptFunction variables should be replaced by your values.

    
<TR>
<TD VALIGN="BOTTOM" CLASS="selectWidth">
   <SELECT NAME="collateralSelected" CLASS='selectWidth' SIZE='5' MULTIPLE 
      onChange="customJavaScriptFunction"></SELECT>
</TD>
<TD WIDTH=150px ALIGN=CENTER><br>
   <INPUT TYPE="button" NAME="addToSloshBucketButton" VALUE="buttonName" 
      style="width: 120px" ONCLICK="addToSelectedCollateral();" ><br>
   <INPUT TYPE="button" NAME="removeFromSloshBucketButton" VALUE="buttonName2"
      style="width: 120px" ONCLICK="removeFromSelectedCollateral();" ><br>
</TD>
<TD VALIGN="BOTTOM" CLASS="selectWidth">
   <SELECT NAME="collateralAvailable" CLASS='selectWidth' SIZE='5' MULTIPLE
      onChange="customJavaScriptFunction"></SELECT>
</TD>
</TR>

    To increase the width of a slosh bucket list, set the following variable as follows in your output JSP file:

    
<style type='text/css'>
   .selectWidth {width: 235px;} 
</style>

    Use code similar to the following in your JSP file when defining your list:

    
<SELECT NAME='definedShopperGroup'
   CLASS='selectWidth' 
   MULTIPLE  
   SIZE='<%=numOfVisibleItemsInList%>' 
      onChange="updateSloshBuckets(this, document.f1.removeButton, 
         document.f1.allShopperGroup, document.f1.addButton);">
 
 
</SELECT>
  2. Create a resource bundle with text for the slosh bucket. These files are in the following directory:
    • WC_eardir/properties/com/ibm/commerce/tools/componentname/properties
    • WebSphere Commerce Developer workspace_dir/wc/properties/com/ibm/commerce/tools/componentname/properties

    where componentname is the component to which you are adding the slosh bucket, and Enterprise_App_name is the name of the enterprise application you are using.

    If national languages are supported, create the national language resource bundles with the appropriate language text. The national language file names must end with the locale supported. For example, for a French-language resource bundle, the file name should be filename_fr_FR.properties

  3. Create or update the resource bundle for globalization.