Your First Extension: Part 4a - Introduction to the Additional Properties Sheet

[david_stocker]

This is part of a tutorial series on creating extension components for Design Studio.

In our last instalment, we noted that the gauge was always left (and top) justified within the component, when the padding was non-zero.  We could have built a heuristic to manage the location of the gauge, or dropped the padding altogether and simply used height and width to manage the location and size of the gauge.  The latter would be the simpler and easier to use solution, but instead, we're going to use it as an opportunity to investigate the Additional Properties Sheet (APS) and build a "positioning visualizer".

What is the Additional Properties Sheet?

Sometimes, the properties sheet is not sufficient for managing a component's properties.  It might be that the properties don't lend themselves to comfortably being worked on within the confines of a name/value list or it might be that the developer wants to use a very specific UI for managing properties, such as graphical controls.

The APS is a panel within the Design Studio Designer, usually on the right side of the screen, along with the Properties Sheet; though the designer is free to reposition it as she sees fit.  The APS contains an embedded browser, allowing us to put little web pages into the designer environment.  We could - in principle - put any arbitrary web content in there, however stock tickers and social media feeds built into the Design Studio environment are not very useful to us.  Where the APS web pages come into their own is when they are attached to the server and canvas, allowing us to interact with component properties canvas.  Over the next few installments, we'll design a padding visualizer using HTML5 Forms and D3 and then we'll use the Property Sheet Handler to connect this to the server.  Lastly, we'll introduce direct APS/canvas interaction.

This is the final goal of part 4:

As always, the completed extension (as of part 4) is available as a Github repository.

Next time, we'll examine the JavaScript needed to build the padding visualiser.