User:Thehayro/JavaScript interface

    From KDE TechBase
    The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.
    Writing an interface for JavaScript Addons
    Tutorial Series   Plasma Tutorial
    Previous   None
    What's Next   Writing a JavaScript Addon
    Further Reading   Introduction to Writing Plasmoids with JavaScript


    Introduction

    This is a tutorial on how to write an interface for JavaScript addons for Plasma. Since the interface can be anything from a plasmoid to a dataengine and all the way to a service, this tutorial uses a plasmoid to write an interface for addons. Please note that this tutorial does not cover the whole plasmoid tutorial. To whole plasmoid tutorial can be found here.

    Setting up

    Before we start to program the little interface we need to do some setup. First of all, we create a directory called MyJSInterface, where our interface will be located, with the following directory structure:

    MyJSInterface/
    contents/
    code/

    metadata.desktop

    In the root directory of our addon, we create a file metadata.desktop with the following content:

    [Desktop Entry] Name=MyJSInterface Name[x-test]=xxMyJSInterfacexx

    Comment=My first JavaScript interface

    X-KDE-ServiceTypes=Plasma/Applet Type=Service X-Plasma-API=javascript X-Plasma-MainScript=code/main.js

    X-KDE-Library= X-KDE-PluginInfo-Author=<Your name here> X-KDE-PluginInfo-Email=<Your email here> X-KDE-PluginInfo-Name=org.myorg.myJSInterface X-KDE-PluginInfo-Version=0.1 X-KDE-PluginInfo-Website=http://plasma.kde.org/ X-KDE-PluginInfo-Depends= X-KDE-PluginInfo-License=LGPL X-KDE-PluginInfo-EnabledByDefault=true

    Important are the X-KDE-PluginInfo-Name. This section is important for the addons to attach themselfs.

    The plasmoid

    The plasmoid will have a simple interface, that has a textbox and an output area. Firstly we build the interface. The following code looks like this:

    !screenshot!

    var linearLayout = new LinearLayout(plasmoid); var textBox = new TextEdit(); var button = new PushButton(); var label = new Label();

    linearLayout.addItem(textBox); linearLayout.addItem(button); linearLayout.addItem(label);

    // the button should have a text with a caption "click me" button.text = "Click me"; // call the onClick function, when button was clicked button.clicked.connect(onClick);

    // this is the function function onClick() {

     // sice we only have one addon installed, 
     // we call the first addon in our arry (see below)
     label.text = addons[0].echo(textBox.text);
    

    }


    Now we insert the code that "grabs" the addons.

    // we want to hold on to the addons var addons = new Array()

    // and listen, when more addons are coming plasmoid.addEventListener("addonCreated", addonCreated);

    // callback function when an addon has been located function addonCreated(addon) {

     print("new addon: " + addon)
     addons.push(addon);
    

    }

    // this object represents all addon that are installed // and grabs the addons that belong to the same namespace // of this interface var addonsObject = plasmoid.listAddons("org.myorg.myJSInterface");

    // we found the addons. now we want to load all of them for (i in addonsObject) {

     print("Addon: " + addonsObject[i].name);
    
     // let load the addon
     plasmoid.loadAddon("org.myorg.myJSInterface", addonsObject[i].id);
    

    }

    Testing and Installing

    Before you install your applet you may want to test it. Enter this code in your console:

    plasmoidviewer MyJavaScriptAddon to test it.

    To install your interface enter this code in you console:

    plasmapkg -t Plasma/JavascriptAddon -i MyJavaScriptAddon/