Design Studio 1.2 SDK – Rapid Prototyping Addon HTML/JS Templating

Update:

Since there was enough interest, here’s the source code available on GitHub.

EDIT: Updated link:

https://github.com/org-scn-design-studio-community/sdkpackage/tree/master/src/org.scn.community.prototypes/res/RapidPrototype 

Original Post:

I have been having fun writing a few toy addons for Design Studio, but I wanted to see if I could write something a bit more useful.  I am still learning the ins and outs of the Eclipse SDK, but one part of my workflow that I’ve noticed could be improved is the amount of time I spend in the Eclipse SDK to tweak a line of HTML or JS, and then hop back to re-launch Design Studio to see the results (or in my case a lot of times, unintended, self-inflicted bugs 🙂 )

As a result, I thought that if I created an HTML and JavaScript templating Addon, I could work native within Design Studio to create one-off visualization proof-of-concepts, as well as some rudimentary data binding as well.  The result is an HTML Template component:

In the screenshot above, you see a few components in the canvas and Outline panel.  (The orange icons under Layout).  The background image, and the two KPI tiles are all the same addon.  I also have a few addons called ‘MYCSS’ and ‘GRADIENTJUNK’ that allow me to insert and modify CSS on the fly, but back to the visual components…  Also make note of the HTML and After Init(JS) in the Additional Properties panel which allows you to put in any HTML you wish, as well as a post-initialization block of JavaScript code for further processing.

Let’s say that you have a very specific, one-off visualization, or a case where you just don’t know yet if you’d want your component to be reusable until later.  This would offer a great way to insert arbitrary HTML, JavaScript, CSS, and even Base-64 encoded images (so that you don’t have to worry about where to upload the image).  All of these cases including anything else you can accomplish in HTML5 are possible.

In order to make these components not just hardcoded, statics fragments, I also created 10 placeholder parameters (See the properties panel). For each Placeholder, there is a corresponding Replacement.  These placeholders and replacements can be maintained directly within the property panel, or even in the Script window:

In this example, I am setting some text as well as even some image sources at runtime.  (silverMedal and bronzeMedal are global variable strings of type base-64).

A simple example of what this would look like at runtime by clicking this button is such:

This addon could also facilitate things like IFRAMEs, freeform HTML content, etc.  All this without hopping back and forth between Design Studio SDK and Design Studio itself.

If there is some interest, I can supply the source files to this addon, however it appears that I will have to find somewhere on SCN that accepts a .ZIP file.  Perhaps creating an SCN Document will allow for this.

At the end of the day, this frees me up to focus on the end-form of a potential addon, as well as rapidly create anything I can create in HTML5/CSS/JS within Design Studio before implementing a full blown SDK Addon.