I’ve been playing with the idea to add new functionality to the CaseBuilder in order to overcome a few design issues my clients have been facing.

For instance i figured it would be nice to be able to add additional css properties to widgets, instead of only being able to set the width/height in px/%. Another idea was to create a tab-container widget to accommodate other widgets while preserving the wiring.

Great ideas and all, but after starting the development of the latter i discovered there isn’t actually a plugin model for the CaseBuilder. Of course it is possible to develop widgets, but unfortunately the widget’s json only has a few preview-icons, when it comes to the design-time part.

Eventually i figured the only way to execute code was to inject a bootstrap as part of the widget title. Anyway, this is what i came up with:

 

My widget json:

{
	"Name":"IvoJonker.nl - Widgets",
	"Description":"Custom widgets made by Ivo",
	"Locale":"",
	"Version":"1.0",
	"Categories":[
		{
			"id":"nl.ivojonker.icm",
			"title":"IvoJonker.nl - Widgets"
		}
	],
	"Widgets":[
		{
			"id":"AdvancedLayoutingAdapterWidget",
			"title":"Advanced Layouting Adapter<img onload='require({paths:{\"AdvancedLayoutingAdapterBootstrap\": \"/AdvancedLayoutingAdapter/AdvancedLayoutingAdapterBootstrap\"}});require([\"AdvancedLayoutingAdapterBootstrap/bootstrap\"], function(bootstrap){});' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'>",
			"category":"nl.ivojonker.icm",
			"description":"Advanced Layouting Adapter",
			"definition":"AdvancedLayoutingAdapter.json",
			"preview":"images/comment_preview.png",
			"icon":"images/comment_icon.png",
			"runtimeClassName":"nl.ivojonker.icm.advancedlayoutingadapter.AdvancedLayoutingAdapter",
			"help":"",
			"previewThumbnail":"images/comment_thumb.png"
		}
	]
}

Notice the javascript that is part of the title:

require({
    paths: {
        "AdvancedLayoutingAdapterBootstrap": "/AdvancedLayoutingAdapter/AdvancedLayoutingAdapterBootstrap"
    }
});
require(["AdvancedLayoutingAdapterBootstrap/bootstrap"], function(bootstrap) {

});

So, wrapping it up: When the widget is displayed as part of the catalog, an image onload triggers the bootstrap code stored in an accomodating .ear file.

Now, as this hardly seems to be a future-proof way, i was wondering if any of my readers have better suggestions 🙂