Extension components

RocketCake supports extension components which add more functionality. You can download these from the website or even create them on your own.

To download them, click the "Download more" button on the component list:

Once you downloaded a component from the website, double-click it and it will be installed on your disk, and can be used in RocketCake.

Note that these components will only work in the Professional Edition of RocketCake.

Creating your own extension components

You can create your own extension components for RocketCake easily. Follow these steps:

Create a text file in Your Documents\RocketCake\extensions and name it test.rcjs
Open it with a text editor like for example Notepad++ or VisualStudio Code. Set the language of this file to Javascript so that you get the correct syntax highlighting. (In Notepad++ click the Menu Language -> J -> Javascript, in VisualStudio code click the button on the bottom right which is named "Plain Text" and select "JavaScript"
Paste this code into the file:

// This is a scripted rocketcake component

// The following embedded xml is for the editor and describes how the component can be edited:

// Supported types are: int, float, string, bool, color, rect

</component>

test = function()

{

}

// called at the start, so all default settings can be set here

test.prototype.onInit = function()

{

var me = rcGetThisElement();

rcSetElementProperty(me, "Size", "50%, 22");

rcSetElementProperty(me, "BackgroundMode", 0); // 0 = none, 1 = color, 2 = image, 3 = gradient

}

// called when HTML Code needs to be generated

test.prototype.onWriteHTML = function(isPreviewMode)

{

var me = rcGetThisElement();

// write HTML opening tag with id

rcWriteCode("<div id=\"");

rcWriteCode(rcGetHTMLElementId(me));

rcWriteCode("\" ");

// write CSS style for user selected position and background

rcWriteCode(" style=\"");

rcWriteCode(rcGetCSSStyleForPosition(me));

rcWriteCode(rcGetCSSStyleForBackground(me));

rcWriteCode("\" ");

rcWriteCode(">");

// content

rcWriteCode(rcHTMLEncode(rcGetElementProperty(me, "text")));

// closing tag

rcWriteCode("</div>");

}

When you then start RocketCake, a new component named "test" should appear at the bottom of the components.

You can create it in the editor, and in preview mode, it should generate the text which you select in the property window under "text". Also, you are able to change the background color and style and position of the component in the editor easily.

In the code, you can see the onWriteHTML function. You can adjust it to write out any code you want.

Try it out:

Add another line into the onWriteHTML like this:

rcWriteCode("<h1>Hello World!</h1>");

Then let RocketCake reload the component:

Click View -> Show Log Window.

Right-Click into this Window and select "Reload All Extensions".

Then your new updated code was loaded into RocketCake.

When you now click "Preview" in RocketCake, your additional code should be written out and it should additionally spell "Hello World".

How components work

Extension components in RocketCake are just a JavaScript file, as you can see. In the beginning, it starts with a small XML section at the top, describing the components: A name, a description and the available properties are defined:

// The following embedded xml is for the editor and describes how the component can be edited:

// Supported types are: int, float, string, bool, color, rect

</component>

Note that the attribute "jsname" is set to "test" in this example. If you want to set another name for your component, like for example "JohnsComponent", then also rename the file to "JohnsComponent" and also rename the functions from "test.prototype.onWriteHTML" and "test.prototype.onWriteHTML" to "JohnsComponent.prototype.onWriteHTML" and "JohnsComponent.prototype.onWriteHTML".

The entries for the properties in the xml are for the property window in RocketCake. This line:

Shows a text (=string) property with the text set by default to "text to be shown".

Later in the code, we can access the value which the user has set it to in this way:

var me = rcGetThisElement();

rcGetElementProperty(me, "text");

You can easily add other properties of different types, like here:

Developing components

RocketCake extension components are written in EcmaScript 5 - an older JavaScript version which didn't support "let" or "classes" yet. Use 'var' instead.

To reload and verify your modifications of your components, in RocketCake, click View -> Show Log Window.

Right-Click into this Window and select "Reload All Extensions".

Then your new updated code will be loaded and verified by RocketCake.

RocketCake components can have the following functions:

onInit - called at the start, so all default settings can be set here. Set position, backround colors etc, but you can also create child elements. See rcCreateElement() below.
onWriteHTML - called when HTML Code needs to be generated. Use rcWriteCode to write out your HTML and call rcWriteHTMLOfChildElements() to let child elements do the same
onWriteGlobalCSS - called when the global CSS styles are written out. Can be used to write out global styles like animations for this element, and similar. See rcWriteGlobalCSSOfChildElements out for an example.
onPaintInEditor - when you want to draw custom things in the editor, do it here. Use functions like rcDrawText and rcDrawElementBorder here. The summaryAndDetails component uses this feature for example.

The easiest way to create your own components is to download a few from the website, open them with a text editor and take a look at how they are doing it.

A list of all available functions can be found in the extension components API documentation