Generating Commerce Composer widget source code

In this lesson, you use the Java Emitter Template (JET) Transformation to generate the source code files that are required to create a Commerce Composer widget.

About this task

WebSphere Commerce provides a Java Emitter Template (JET), called the JET Commerce Composer Resource pattern. This pattern is used by the JET Transformation to generate the source code files and file directories that you need to create a Commerce Composer widget. The generated files include source code for customizing the storefront and Management Center to use your widget, and the CSV and configurations files for loading your widget data with the Data Load utility.

Use the generated source code files as a starting point for creating a custom Commerce Composer widget. These files provide you with a code package that you must update to define your widget functionality and rendering style. You can then use the files to register your widget information with the Commerce Composer framework, and add support for your widget within Management Center. To use this pattern, you must create a pattern input file that contains the information that is required to generate the source code files.

For more information about using the JET tool to generate source code for creating a custom widget, see Generating Commerce Composer widget source code.

Procedure

Start WebSphere Commerce Developer.
Create a temporary project in your WebSphere Commerce Developer workspace. The project is used as the target location where the Java Emitter Template (JET) package Transformation generates the source code files for creating a widget.
1. Right-click within the Enterprise Explorer view, select New > Project.
2. In the New Project wizard, select General > Project. Click Next.
3. For the Project name field, enter a name for the temporary project.
  For example, NewWidgetProject.
4. Click Finish.
In your temporary NewWidgetProject project, create an XML file to use as a pattern input file for the JET Transformation. The JET Transformation uses the pattern input XML file to create the widget source code files. You can copy and edit the input file to use for generating source code of more custom widgets.
1. Right-click the temporary NewWidgetProject project. Select New > File.
2. In the New File wizard, ensure that your temporary project is selected as the parent folder. Enter a File name for the pattern input XML file.
  For example, Sample.xml.
3. Click Finish.
4. Right-click your Sample.xml file within your temporary project. Select Open With > XML Editor.
5. Copy the following code into the file.
```
<?xml version="1.0" encoding="UTF-8"?>



<pageLayout vendor="MyCompany">
  <widget>
    <widgetDef identifier="ShoppingCartDetail"
      UIObjectName="ShoppingCartDetailPageWidget"
      displayName="Sample Shopping Cart Details widget"
      description="This widget is for Shopping Cart details" >
    </widgetDef>
  </widget>
</pageLayout>
```
  Where
  
  vendor
  
  The name of your company. For example, myCompany. The value for this parameter is used as part of the resource bundle name, for instance com.mycompany.commerce.pagelayout.client.lobtools.properties. This value is also included within the generated registerWidgetdef.csv file as the value for the WidgetVendor column. The value for this parameter cannot include spaces or special characters.
  
  identifier
  
  The external reference name for the widget or container definition. You can use any name, but the name must be unique for the store. For example, ShoppingCartDetail. The value for this parameter cannot include spaces or special characters.
  
  UIObjectName
  
  The name that identifies the Management Center object and object definition of this widget. For example, ShoppingCartDetailPageWidget. The value for this parameter cannot include spaces or special characters.
  
  displayName
  
  The language-specific display name of the widget. For example, Sample Shopping Cart Details widget.
  
  Description
  
  The language-specific description for the widget. For example, This widget is for Shopping Cart details.
6. Save and close the file.
Use the JET Transformation to generate the source code files to use when you create your custom widget.
1. Right-Click your pattern input XML file. Select Run As > Run Configurations
2. In the Run Configurations wizard, right-click JET Transformation in the list of filters. Select New. The configuration options for the JET Transformation displays.
3. Ensure that the value of the Name field is the name of your pattern input XML file.
4. Click the Main tab.
5. Ensure that the value of the Transformation Input field is the file path within your workspace to the pattern input XML file.
6. In the Transformation section, select com.ibm.commerce.toolkit.internal.pattern.pageLayout for the value of the ID field.
7. Optional: Specify the severity level for the Display Message logging. The default value is information.
8. Click Apply > Run.

Results

The JET Transformation generates a set of file directories and files that you can use to help create your custom widget. The generated file directories contain three main folders directly under your project folder. The three folders represent the three WebSphere Commerce components and tools that you must use or customize to create your widget:

Management Center - LOBTools
Storefront - Stores
Data Load utility - DataLoad.

The Data Load utility files include the configuration and CSV input files that you must use to register your widget and have a store subscribe to your widget. In the following lessons, you use and update the generated source code to create, register, and use your new widget.