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:



// 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 jsname="test" minRocketCakeVersion="5.2" version="1.0">                          

               <name lang="en" text="test component" />

               <description lang="en" text="A test component for trying out this feature" />

                                         

               <property name="text" type="string" default="text to be shown" />

       </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 jsname="test" minRocketCakeVersion="5.2" version="1.0">                          

               <name lang="en" text="test component" />

               <description lang="en" text="A test component for trying out this feature" />

                                         

               <property name="text" type="string" default="text to be shown" />

       </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:


<property name="text" type="string" default="text to be shown" />


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:


<property name="scrollamount" type="int" default="6" />

<property name="open" type="bool" default="true" />




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:



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



Copyright © by Ambiera e.U.