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.<\/p>\n
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.<\/p>\n
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.<\/p>\n
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:<\/p>\n
<\/p>\n
My widget json:<\/p>\n
{\r\n\t\"Name\":\"IvoJonker.nl - Widgets\",\r\n\t\"Description\":\"Custom widgets made by Ivo\",\r\n\t\"Locale\":\"\",\r\n\t\"Version\":\"1.0\",\r\n\t\"Categories\":[\r\n\t\t{\r\n\t\t\t\"id\":\"nl.ivojonker.icm\",\r\n\t\t\t\"title\":\"IvoJonker.nl - Widgets\"\r\n\t\t}\r\n\t],\r\n\t\"Widgets\":[\r\n\t\t{\r\n\t\t\t\"id\":\"AdvancedLayoutingAdapterWidget\",\r\n\t\t\t\"title\":\"Advanced Layouting Adapter<img onload='require({paths:{\\\"AdvancedLayoutingAdapterBootstrap\\\": \\\"\/AdvancedLayoutingAdapter\/AdvancedLayoutingAdapterBootstrap\\\"}});require([\\\"AdvancedLayoutingAdapterBootstrap\/bootstrap\\\"], function(bootstrap){});' src='data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'>\",\r\n\t\t\t\"category\":\"nl.ivojonker.icm\",\r\n\t\t\t\"description\":\"Advanced Layouting Adapter\",\r\n\t\t\t\"definition\":\"AdvancedLayoutingAdapter.json\",\r\n\t\t\t\"preview\":\"images\/comment_preview.png\",\r\n\t\t\t\"icon\":\"images\/comment_icon.png\",\r\n\t\t\t\"runtimeClassName\":\"nl.ivojonker.icm.advancedlayoutingadapter.AdvancedLayoutingAdapter\",\r\n\t\t\t\"help\":\"\",\r\n\t\t\t\"previewThumbnail\":\"images\/comment_thumb.png\"\r\n\t\t}\r\n\t]\r\n}\r\n<\/pre>\nNotice the javascript that is part of the title:<\/p>\n
require({\r\n paths: {\r\n \"AdvancedLayoutingAdapterBootstrap\": \"\/AdvancedLayoutingAdapter\/AdvancedLayoutingAdapterBootstrap\"\r\n }\r\n});\r\nrequire([\"AdvancedLayoutingAdapterBootstrap\/bootstrap\"], function(bootstrap) {\r\n\r\n});\r\n<\/pre>\nSo, 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.<\/p>\n
Now, as this hardly seems to be a future-proof way,\u00a0i was wondering if any of my readers have better suggestions \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-528","post","type-post","status-publish","format-standard","hentry","category-geen-categorie"],"_links":{"self":[{"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=\/wp\/v2\/posts\/528","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=528"}],"version-history":[{"count":1,"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=\/wp\/v2\/posts\/528\/revisions"}],"predecessor-version":[{"id":529,"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=\/wp\/v2\/posts\/528\/revisions\/529"}],"wp:attachment":[{"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=528"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=528"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}