View source for User:Thehayro/JavaScript interface

{{TutorialBrowser|

series=Plasma Tutorial|

name=Writing an interface for JavaScript Addons|

next=[http://techbase.kde.org/User:Thehayro/JavaScript_Addons Writing a JavaScript Addon]|

reading=[[Development/Tutorials/Plasma/JavaScript/GettingStarted| 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  [[Development/Tutorials/Plasma/JavaScript/GettingStarted| 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:

<code ini>
[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 
</code>

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!

<code javascript="javascript">
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);
}


</code>

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

<code javascript="javascript">
// 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);
}
</code>

= Testing and Installing= 

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

<code>
plasmoidviewer MyJavaScriptAddon
</code>
to test it.

To install your interface enter this code in you console:

<code>
plasmapkg -t Plasma/JavascriptAddon -i MyJavaScriptAddon/
</code>