User:Thehayro/JavaScript interface: Difference between revisions

From KDE TechBase
No edit summary
No edit summary
 
(4 intermediate revisions by the same user not shown)
Line 5: Line 5:
name=Writing an interface for JavaScript Addons|
name=Writing an interface for JavaScript Addons|


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


reading=
reading=[[Development/Tutorials/Plasma/JavaScript/GettingStarted| Introduction to Writing Plasmoids with JavaScript]]
}}
}}


Line 13: Line 13:
= Introduction =
= 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 will focus on writing it with the help of a plasmoid. However, this tutorial does not cover the whole plasmoid tutorial. To read the full tutorial, please read [[Development/Tutorials/Plasma/JavaScript/GettingStarted| Introduction to Writing Plasmoids with JavaScript]].
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 =
= Setting up =
Line 58: Line 58:
Firstly we build the interface. The following code looks like this:
Firstly we build the interface. The following code looks like this:


<code>
!screenshot!
 
<code javascript="javascript">
var linearLayout = new LinearLayout(plasmoid);
var linearLayout = new LinearLayout(plasmoid);
var textBox = new TextEdit();
var textBox = new TextEdit();
Line 67: Line 69:
linearLayout.addItem(button);
linearLayout.addItem(button);
linearLayout.addItem(label);
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>
</code>


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


<code>
<code javascript="javascript">
// we want to hold on to the addons
// we want to hold on to the addons
var addons = new Array()
var addons = new Array()
// and listen, when more addons are coming
plasmoid.addEventListener("addonCreated", addonCreated);


// callback function when an addon has been located
// callback function when an addon has been located
Line 80: Line 100:
   print("new addon: " + addon)
   print("new addon: " + addon)
   addons.push(addon);
   addons.push(addon);
  setData(addonsObject[i].name, 'text', '');
  print(addons.length);
}
}


</code>
// this object represents all addon that are installed
 
// and grabs the addons that belong to the same namespace
First of all we will define a constructor. In this case we name it MyJavaScriptAddon
// of this interface
var addonsObject = plasmoid.listAddons("org.myorg.myJSInterface");


<code javascript="javascript">
// we found the addons. now we want to load all of them
function MyJavaScriptAddon()
for (i in addonsObject)
{
{
    print("Hello World");
  print("Addon: " + addonsObject[i].name);
 
  // let load the addon
  plasmoid.loadAddon("org.myorg.myJSInterface", addonsObject[i].id);
}
}
</code>
</code>


This constructor gets called, when this addon is loaded by another JavaScript instance. In there we will get a console output with "Hello World".
= Testing and Installing=


The next step is to provide our Addon a method, which print out our input.
Before you install your applet you may want to test it.
Enter this code in your console:


<code javascript="javascript">
<code>
MyJavaScriptAddon.prototype.echo = function(text)
plasmoidviewer MyJavaScriptAddon
{
    print(text);
}
</code>
</code>
to test it.


In this part, the actual method is called echo, however having MyJavaScriptAddon.prototype prefixed is important for JavaScript to make sure that echo is a member of this class. To understand the concept of object orienting in JavaScript see [http://mckoss.com/jscript/object.htm this tutorial ].
To install your interface enter this code in you console:
 
At the end of your Addon it is also important that you "publish" your class for other instances that would like to use it.
 
<code javascript="javascript">
registerAddon(MyJavaScriptAddon) </code>
 
Now, we should save our written code into ''MyFirstJSAddon/contents/code'' and name it ''main.js''.
 
= Installing =
 
To install this addon, simply navigate to the root directory of our addon and
type this into the console:


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

Latest revision as of 23:11, 31 October 2010

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/

Retrieved from "https://techbase.kde.org/index.php?title=User:Thehayro/JavaScript_interface&oldid=55379"