Create a new custom widget in Websphere Commerce

To Create a new custom widget, we have to follow the below steps.

 

Ø  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.

§  Right-click within the Enterprise Explorer view, select New > Project.

§  In the New Project wizard, select General > Project. Click Next.

§  For the Project name field, enter a name for the temporary project. For example, ShippingCalculatorProject.

§  Click Finish.

Ø  In your temporary ShippingCalculatorProject 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.

§  Right-click the temporary ShippingCalculatorProject project. Select New > File.

§  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.

§  Click Finish.

§  Right-click your Sample.xml file within your temporary project. Select Open With > XML Editor.

<pageLayout vendor="MyCompany">

  <widget>

    <widgetDef identifier="ShippingCalculator"

      UIObjectName="ShippingCalculatorPageWidget"

      displayName="Shipping Calculator widget"

      description="This widget is for Shipping Calculator" >

    </widgetDef>

  </widget>

</pageLayout>

§  Copy the above code into the file.

§  Save and close the file.

Ø  Use the JET Transformation to generate the source code files to use when you create your custom widget.

§  Right-Click your pattern input XML file. Select Run As > Run Configurations

§  In the Run Configurations wizard, right-click JET Transformation in the list of filters. Select New. The configuration options for the JET Transformation displays.

§  Ensure that the value of the Name field is the name of your pattern input XML file.

§  Click the Main tab.

§  Ensure that the value of the Transformation Input field is the file path within your workspace to the pattern input XML file.

§  In the Transformation section, select com.ibm.commerce.toolkit.internal.pattern.pageLayout for the value of the ID field.

§  Optional: Specify the severity level for the Display Message logging. The default value is information.

§  Click Apply > Run.

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.

Ø  Copy the generated source code files for your widget storefront assets from your project folder to the appropriate location within the default Stores project.

§  Open WebSphere Commerce Developer and switch to the Enterprise Explorer view.

§  Expand your new project directory, go to Stores\WebContent.

§  Right-click the Widgets-MyCompany directory. Select to Copy the directory.

§  Go to the default Stores\WebContent directory.

§ Paste the copied Widgets-MyCompany directory within the default WebContent directory. 

             Ø   Configure the Data Load utility so that you can use the utility to load your widget information.

§  In the DataLoad directory within your new project directory, open the wc-dataload-env.xml file for editing. The wc-dataload-env.xml file is the data load environment configuration file that is generated to help you configure and run the Data Load utility. The configuration file sets the environment variables that the Data Load utility uses, such as the database settings, ID resolver, and data writer.

§  Update the file to match your database and environment settings. Uncomment and update the appropriate setting for your database. Your complete wc-dataload-env.xml file can resemble the following code:

<?xml version="1.0" encoding="UTF-8"?>

<!-- Please update the storeIdenttifier and DB information for your environment -->

<_config:DataLoadEnvConfiguration

    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

 xsi:schemaLocation="http://www.ibm.com/xmlns/prod/commerce/foundation/config ../../../xml/config/xsd/wc-dataload-env.xsd"

    xmlns:_config="http://www.ibm.com/xmlns/prod/commerce/foundation/config">

            <_config:BusinessContext storeIdentifier="AuroraB2BStorefrontAssetStore" languageId="-1">

</_config:BusinessContext>

<!-- The database setting for a Derby database in WebSphere Commerce Developer -->

<!--<_config:Database type="derby" name="..\db\mall" schema="APP"/>-->

<!-- The database setting for an Oracle database -->

<!--

<_config:Database name="<database name>" user="<user>" password="<password>"

port="1521" schema="<schema name>" server="<server>" type="Oracle" dbDriverType="thin" />

<!-- The database setting for an AIX/DB2 server -->

<_config:Database type="db2" name="MALL" user="db2admin" password="Cyber2003" server="localhost" port="50000" schema="DB2ADMIN" />

<_config:IDResolver className="com.ibm.commerce.foundation.dataload.idresolve.IDResolverImpl" cacheSize="0"/>

<_config:DataWriter className="com.ibm.commerce.foundation.dataload.datawriter.JDBCDataWriter" />

</_config:DataLoadEnvConfiguration>

           Ø  Run the Data Load utility.

§  Ensure that your WebSphere Commerce Server is stopped before you run the Data Load utility. For more information about stopping your server, see Starting and stopping WebSphere Commerce Test Server.

§      In a command-line utility, go to the WCDE_installdir\bin directory.

§      Run the following command to load the input CSV files to register your widget and have a store subscribe to your widget:

§      Dataload.bat workspace_dir\ShippingCalculatorProject\DataLoad\widget\wc-dataload-widget.xml

           Ø  Copy the generated resource bundle and properties files into your default workspace directory structure.

§  In a File Manager, go to the com directory within your new widget project directory. For example, if your new widget project is at the top-level in your workspace the filepath to the com directory, can be workspace_dir\ShippingCalculatorProject\LOBTools\src\com.

§  Copy the MyCompany directory.

§  Go to the workspace_dir\LOBTools\Java Resources\src directory.

§  Paste your copied MyCompany directory within the LOBTools\Java Resources\src directory.

§  Open WebSphere Commerce Developer. Switch to the Enterprise Explorer view.

§  Right-click the LOBTools directory within your default workspace directory structure. Click Refresh.

§ In the LOBTools\Java Resources\src directory, ensure that the com.MyCompany.commerce.pagelayout.client.lobtools.properties package exists. Within the package, ensure that the PageLayoutLOB.properties and PageLayoutLOB_en_US.properties files exist.

           Ø  Define the translatable text for your new widget.

§  In the Enterprise Explorer view, go to the LOBTools\Java Resources\src directory. Expand the com.MyCompany.commerce.pagelayout.client.lobtools.properties package. Open the PageLayoutLOB.properties and PageLayoutLOB_en_US.properties files for editing. The following generated code is included within the files:

    # Widget properties view

ShippingCalculatorPageWidgetContent=This widget is for Shipping Calculator

§   Define any additional translatable text for your widget by adding code into both files.

§   Save any changes and close the files.

            Ø  Copy the generated resource bundle extension into your default workspace directory structure and register your properties files.

§  In your new project directory, go to the lzx directory. For example, the filepath to the lzx directory, can be ShippingCalculatorProject\LOBTools\WebContent\WEB-INF\src\lzx.

§  Copy the MyCompany directory.

§  Go to the LOBTools\WebContent\WEB-INF\src\lzx directory.

§  Paste your copied MyCompany directory within the LOBTools\WebContent\WEB-INF\src\lzx directory.

§   In the LOBTools\WebContent\WEB-INF\src\lzx\MyCompany\pagelayout directory, open the MyCompanyPageLayoutResourceBundle.lzx file to review the source code. The following generated code is included within the file:

<!-- The following code is created as example. Modify the generated code and add any additional required code.  -->

<library>

<class name="MyCompanyPageLayoutResourceBundle" extends="wcfResourceBundle" baseName="com.MyCompany.commerce.pagelayout.client.lobtools.properties.PageLayoutLOB">

<wcfResourceBundleKey name="ShippingCalculatorPageWidgetContent"/>

</class>

<MyCompanyPageLayoutResourceBundle id="MyCompanyPageLayoutResources"/>

</library>

§  The code defines that the resource bundle is an extended resource bundle. The code sets the name for the text properties to register the text within the resource bundle. Management Center uses the resource bundles to identify the text that is translatable. The translatable text must be retrieved from the properties file for the language that a user is working within.

§  Close the file.

             Ø  Update the default Commerce Composer resource bundle library to include your new resource bundle extension.

§  In your new project directory, go to the directory. For example, the filepath to the lzx directory, can be ShippingCalculatorProject\LOBTools\WebContent\WEB-INF\src\lzx\commerce\pagelayout.

§  Open the PageLayoutExtensionsLibrary.lzx file to view the source code.

§  Copy the generated code that includes your widget resource bundle. For example, the generated code can resemble the following code:

<!--     

The following code is created as an example. Modify the generated

            code and merge the file with the existing PageLayoutExtensionsLibrary.lzx

            file within the LOBTools project.

-->

<library>

<!-- Include the file to add any custom libraries. -->

<include href="../../MyCompany/pagelayout/MyCompanyPageLayoutResourceBundle.lzx"/>

</library>

Go to the LOBTools\WebContent\WEB-INF\src\lzx\commerce\pagelayout directory within your default workspace directory structure.

§  Open the PageLayoutExtensionsLibrary.lzx file for editing.

§  Paste your copied code within the PageLayoutExtensionsLibrary.lzx file.

§  Save and close the file.

            Ø  Define the object definition for widget.

§  In the Enterprise Explorer view, copy the generated object definition files for your widget into your default workspace directory structure.

§  In your default workspace directory structure, go to the LOBTools\WebContent\config\MyCompany\pagelayout\widgetDefinitions\ShoppingCartDetailPageWidget directory.

§      Open the WidgetObjectDefinition.def file for editing. By default the generated code for your widget object definition can resemble the following code:

<?xml version="1.0" encoding="UTF-8"?>

<!-- The following code is created as example. Modify the generated code and add any additional required code.  -->

<Definitions>

<WidgetObjectDefinition package="plm"

definitionName="plmLayoutWidget_ShippingCalculatorPageWidget"

parentDefinitionName="plmBasePageLayoutPrimaryObjectDefinition"

baseDefinitionName="plmBaseLayoutWidget"

objectType="ShippingCalculatorPageWidget"

gridPropertiesDefinitionName="plmWidgetProperties_ShippingCalculatorPageWidget"

iconPath="/images/pagelayouts/widgetIcons/ShippingCalculator.png">

<CreateService baseDefinitionName="plmBaseCreateLayoutWidget" />

<UpdateService baseDefinitionName="plmBaseUpdateLayoutWidget" />

<Xml name="template">

<sequence>0</sequence>

</Xml>

</WidgetObjectDefinition>

</Definitions>

iconPath

        The filepath to the icon that displays for your custom widget within the Add Widgets to Slots window in the Commerce Composer tool. Copy the widget image (ShippingCalculator.png) from the attached zip folder and paste in the following path:

"/images/pagelayouts/widgetIcons/ShippingCalculator.png”.

§  Update the object definition file to change any of the default generated values or add more definition properties for your widget. Ensure that you update the file to specify an icon for your widget. For more information, see Object definitions.

§  Save and close the file.

                Ø  Define the properties view definition for widget

§  In the Enterprise Explorer view, go to the LOBTools\WebContent\config\MyCompany\pagelayout\widgetDefinitions\ShippingCalculatorPageWidget directory within your default workspace directory structure.

§  Open the WidgetPropertiesView.def file for editing. By default the generated code for your widget object definition can resemble the following code:

<?xml version="1.0" encoding="UTF-8"?>

<!-- The following code is created as example. Modify the generated code and add any additional required code. -->

<Definitions>

<GridObjectProperties definitionName="plmWidgetProperties_ShippingCalculatorPageWidget">

<PropertyPane>

<PropertyGroup name="widgetProperties" collapsable="false" groupTitle="${plmPageLayoutResources.widgetPropertiesPrompt}">

<PropertyInputText name="${plmPageLayoutResources.widgetNamePrompt}" propertyName="widgetName"

promptText="${plmPageLayoutResources.widgetNamePrompt}" />

</PropertyGroup>

<PropertyGroup name="contentProperties" collapsable="false" groupTitle="${plmPageLayoutResources.widgetContentPrompt}">

<PropertyStaticText text="${MyCompanyPageLayoutResources.ShippingCalculatorPageWidgetContent}" />

</PropertyGroup>

</PropertyPane>

</GridObjectProperties>

</Definitions>

§      The preceding code sample defines a properties view for the new widget, which consists of only the widget name and the content description.

§      Update the properties view definition file to change any of the default generated configurable properties, or add more configurable properties for your widget.

§      For more information about properties view definition files, see Property definitions. For more information about updating these files, see Adding a tab to a properties view

§      Save and close the file.

§      Start or restart the WebSphere Commerce Test Server.

§      Right-click the LOBTools project. Click Build OpenLaszlo Project.

         Test the new widget, in commerce composer section select any slot, it’s shows all the available   widget to add in the slot. Verify the new widget is available in the section.