User:Thehayro/JavaScript interface: Difference between revisions
No edit summary |
No edit summary |
||
| 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 [[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]]. | ||
= Setting up = | = Setting up = | ||
| Line 51: | Line 51: | ||
</code> | </code> | ||
Important are the ''X-KDE-PluginInfo-Name''. This section is | 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: | |||
<code> | |||
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); | |||
</code> | |||
Now we insert the code that "grabs" the addons. | |||
<code> | |||
// we want to hold on to the addons | |||
var addons = new Array() | |||
// callback function when an addon has been located | |||
function addonCreated(addon) | |||
{ | |||
print("new addon: " + addon) | |||
addons.push(addon); | |||
setData(addonsObject[i].name, 'text', ''); | |||
print(addons.length); | |||
} | |||
</code> | |||
First of all we will define a constructor. In this case we name it MyJavaScriptAddon | First of all we will define a constructor. In this case we name it MyJavaScriptAddon | ||
Revision as of 11:12, 25 September 2010
| Tutorial Series | Plasma Tutorial |
| Previous | None |
| What's Next | Writing a JavaScript Addon
reading= |
| Further Reading | n/a |
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 Introduction to Writing Plasmoids with JavaScript.
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/
- contents/
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:
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);
Now we insert the code that "grabs" the addons.
// we want to hold on to the addons
var addons = new Array()
// callback function when an addon has been located
function addonCreated(addon)
{
print("new addon: " + addon)
addons.push(addon);
setData(addonsObject[i].name, 'text', );
print(addons.length);
}
First of all we will define a constructor. In this case we name it MyJavaScriptAddon
function MyJavaScriptAddon()
{
print("Hello World");
}
This constructor gets called, when this addon is loaded by another JavaScript instance. In there we will get a console output with "Hello World".
The next step is to provide our Addon a method, which print out our input.
MyJavaScriptAddon.prototype.echo = function(text)
{
print(text);
}
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 this tutorial .
At the end of your Addon it is also important that you "publish" your class for other instances that would like to use it.
registerAddon(MyJavaScriptAddon)
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:
plasmapkg -t Plasma/JavascriptAddon -i MyJavaScriptAddon/