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.
