Examples

Let’s imagine the following situation - we have a button "princess" who will call out for help and a function "prince" who is ready to rescue the princess.

So we have 2 functions, one of them is in foreground which with the button click sends a message ($AB.KERNEL.Events.sendMessage), function "prince" is located in background and listens to messages ($AB.KERNEL.Events.addListener) and react if it gets a message.

 

1. Adding the button

For adding the button you need to describe it in UI.json.

{
    "type" : "fairytale-button"
}

 

and also to add in function main() the uploading image into button and on click event handling.

 

var UITools = $AB.KERNEL.UITools;

// call out for help
function sayHelp() {
    alert("Help me, please!");
}

// main function
function main(){
    if("undefined"!=typeof UITools){
        // adding image for the button
        UITools.addImage(
            "__com.ab.fairytale",
            "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAWCAYAAADafVyIA
            AAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6m
            AAAF2+SX8VGAAAACXBIWXMAAB7BAAAewQHDaVRTAAACiUlEQVRIS51VO2sVQRS+MQZEs
            LqvmTkzsxhSiViJgiCCFyFY+Gq1sE1nqY2VYmPA2to/YGPhD0inpQhiYSEqFwxo0DQxf
            mfmzGN3LwbzwWHvft95zdmzewcJRPo+7IHcLoT19rY16rG19rRQPTjnzpKlR0TqllAIt
            GYbti/2E9TRqGQsWavfWkfBx+HqvZmJlgGfGyGHi7nIqtcg7blIxOAg0PSyxARorY/jd
            LtRz35fRc5gHy6e8sB3zgXWChHNe3VKYgKapjmG4F/tRvSWyBnweVfnITJfggDnVyD2I
            qk/gloKQgVjzEYV/F3oLlbIxpMi+Y5S6o7wXF29YAFHnOP2SGQLeEzW077DCaSJHkajk
            eYROfh1xzwwVj1LD0c7fVHoDIzyeT1fUMtRKUCTc9a8t/CxJHQEurqXguH4G1SdYAXJd
            3iLShHaFC2AiM6k+Kax3EAbmPGMj5accIorIg0wyzG4P0njQvzQIeUmMPMPScN1V+gCz
            Ng7Ppp0iAQ/RMJ4aLMklyuWAk0No67WKx77r9+HwC6axuUCPArjpneZD4UlOJj4wB6yj
            u7fRD7qKPCS+R6cOIRNgJEz3yaTyWriYpKcPPqQuhq0ioc9kZRtoPLnykmC1Kfyuyokx
            qPMumh44GX/a+AE/MK1EgTrJD3Y1LqkbAPdPF0c8H+Gl+y8pGzDObVxULf1iLrj4ti4E
            OM1SdkGVvVmDqzWLgWXD53cd31gHDscDk9IyjZ4r1HkOq7XDmt4KcsfzQIsTyZ+dTr1J
            w9rWOup5OoDHcz4iC3jL2j+bcuV+QXawu9QAtbrUpxtmXVKUM/5X+ZRVNL1Ycz4Ar84s
            O1s+L/mK4ILV1uHh9+epAMGg79d5I9cdPC2uwAAAABJRU5ErkJggg==",24, 22
        );
        // adding element into toolbar
        UITools.addUIElement("fairytale-button", function(element){
            element.type = "bar-button"; // this functionality is needed for 
                                 //correct working of button in the toolbar.
            element.image = "__com.ab.fairytale"; // name of the image added
                                                  // from you
            element.actions = [{origin:"this",action:"function",target: sayHelp, 
            when:"click"}]; // sayHelp - function that need to be called by click.

            // operations for proper displaying button in the toolbar
            var defInterf = UITools.setDefaultSettings("bar-button",{width:24, 
            font : { align : "center" }});
            element.width = element.width||defInterf.width;
            element.height = element.height||defInterf.height;
            element.font = defInterf.font;

            defInterf = UITools.UI_Elements["bar-button"].constructor(element);
            return defInterf;
        },[])
    }
}

 

So we can see the button in the toolbar. If we click on it (e.g. on the preview page) we can see the "help" message.

 

2. Connection between foreground and background

The function "prince" located in background should get this "help" message. For this case we have the message instrument.

Let’s assign the listener in background that will wait for calling for help.

 

background.js

function main(){
    // listening messages with id = ""$AB_helpMsg"
    $AB.KERNEL.Events.addListener("$AB_helpMsg",  function(type, data, c, fromTabID) {
        alert("Go to help!");
    });
}

Let’s modify the call for help and the function sayHelp()

Let’s click on the button - and the "prince" is racing to rescue!Our mission is completed.