Create A Mashup Widget Extension Part 4

[#1]

• Step 10: Building and Importing
• Step 11: Tips
• Step 12: Next Steps

Step 10: Building and Importing

After you’ve completed your code updates, it’s time to build and import! Below are instructions for building with the framework you have set for the project.

Build Extension with Ant

1. Go to the Package explorer view.
2. Right click on build-extension.xml.
3. Hover over Run As and select Ant Build.
   

   

4. Your console output will indicate BUILD SUCCESSFUL. This will build your project and create the extension zip in the your_project->build->distributions folder of your project.

Build Extension with Gradle

1. Right click on your project ->Gradle (STS)->Tasks Quick Launcher.
   

   

2. Set Project from the drop-down menu to your project name and type Tasks as build.
3. Press Enter.
   

   
   
   

4. Your console window will display BUILD SUCCESSFUL. Your extension has been created and stored as a zip file in your_project->build->distributions folder.
   

   

 

Import Extension

1. Go to ThingWorx Composer. In the lower left, click Import/Export, then select Import under.

   
   
   

2. Select Extension for the type of import.

   
   
   

3. Choose the zip file in the distributions folder under the build directory. Click Import.
4. Click Close on the prompt to refresh your Composer instance.

After you have imported your new widget and refreshed Composer, you will see your new widget as an option on the Mashup Design tab.

 

Step 11: Tips

When a new version of an extension contains model changes for one or more of its entities, the previous version of the extension and any entities created from that extension must be deleted before installing the new version of the extension. To avoid having to recreate the entities after the new extension is installed, you can include an extension migrator with the extension that imports the entities created with the previous version.

Adding an Extension Migrator

To create a migrator class for your extensions, follow these steps:

1. Choose the ThingWorx menu and select New Extension Migrator.

2. Select or enter your source folder and package.

3. Enter a name, such as CustomMigrator.

4. Click Finish.
   
   

The Java source file is created and the configfiles/metadata.xml file is updated automatically.

NOTE: If a migrator has already been created, the previous migrator class name will be replaced in the metadata.xml file with the new migrator class name. The previous migrator Java file will not be changed.

Element Selection

Use this.jqElement to limit your element selections. This will reduce the chance of introducing unwanted behaviors in the application when there might be duplicate IDs and/or classes in the DOM.

///Don’t do the following: 
$('.add- btn').click(function(e){...do something...});  

///Do this: 
this.jqElement.find('.add-btn').click(function(e){ ...do something...});

 

Logging

We recommend that you use the following methods to log in the Mashup Builder and runtime environment:

TW.log.trace(message[,message2,...][,exception])  
TW.log.debug(message[,message2,...][,exception])  
TW.log.info(message[,message2,...][,exception])  
TW.log.warn(message[,message2,...][,exception])  
TW.log.error(message[,message2,...][,exception])  
TW.log.fatal(message[,message2,...][,exception])  

You can view the log messages in the Mashup Builder by opening the log window via the Help->Log menu item; in the Mashup runtime, you can now click on the Show Log button on the top left corner of the page to show log window. If the browser you use supports console.log(), then the messages will also appear in the debugger console.

Formatting

If you have a property with baseType of STYLEDEFINITION, you can get the style information by calling:

    var formatResult = TW.getStyleFromStyleDefinition(
    widgetProperties['PropertyName']);

If you have a property of baseType of STATEFORMATTING:

var formatResult = TW.getStyleFromStateFormatting({
    DataRow: row,
    StateFormatting: thisWidget.properties['PropertyName']
}); 

In both cases formatResult is an object with the following defaults:

{
   image: '',
   backgroundColor: '',
   foregroundColor: '',
   fontEmphasisBold: false,
   fontEmphasisItalic: false,
   fontEmphasisUnderline: false,
   displayString: '',
   lineThickness: 1,
   lineStyle: 'solid',
   lineColor: '',
   secondaryBackgroundColor: '',
   textSize: 'normal'
};

Step 12: Next Steps

Congratulations! You've successfully completed the Create A Mashup Widget Extension tutorial.

You've learned how to:

• Utilize the Eclipse Plugin and Extension SDK
• Create and configure an Extension project
• Create a mashup widget Extension
• Build and import an Extension

 

Learn More

We recommend the following resources to continue your learning experience:

 Capability    Guide

Build

Application Development Tips & Tricks

 

Additional Resources

If you have questions, issues, or need additional information, refer to:

 Resource         Link

Community	Developer Community Forum
Help Center	Custom Widget Tips and Example