User:Thehayro/JavaScript Addons: Difference between revisions

From KDE TechBase
No edit summary
No edit summary
 
(8 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Plasma, JavaScript]]
{{TutorialBrowser|
 
series=Plasma Tutorial|
 
name=Writing a JavaScript addon|
 
pre=[http://techbase.kde.org/User:Thehayro/JavaScript_interface Writing an interface for JavaScript Addons]|
reading=[[Development/Tutorials/Plasma/JavaScript/API| JavaScript API]]
}}




= Introduction =
= Introduction =


This is a tutorial on how to write a JavaScript Addon for Plasma.
This is a tutorial on how to write a JavaScript addon for Plasma.
Since it is possible to write Plasmoids in JavaScript (and other languages), you are able to extend your Plasmoid with Addons. This tutorial goes through basic steps you need to do to get your Addon running.
Since it is possible to write Plasmoids in JavaScript (and other languages), you are able to extend your Plasmoid with addons. This tutorial goes through basic steps you need to do to get your addon running.


= Setting up =
= Setting up =
Before we start to program or little addon we need to do some setup.
First of all, we create a directory called ''MyFirstJSAddon'', where our addon will be located, with the following directory structure:
:MyFirstJSAddon/
::contents/
:::code/ 


== metadata.desktop ==
== metadata.desktop ==
In the root directory of our addon, we create a file ''metadata.desktop'' with the following content:
<code ini>
[Desktop Entry]
Name=MyJSAddon
Name[x-test]=xxMyJSAddonxx
Comment=My first JavaScript addon
X-KDE-ServiceTypes=Plasma/JavascriptAddon
Type=Service
X-Plasma-API=javascript
X-KDE-Library=
X-KDE-PluginInfo-Author=<Your name here>
X-KDE-PluginInfo-Email=<Your email here>
X-KDE-PluginInfo-Name=org.myorg.myJSInterface.myJSAddon
X-KDE-PluginInfo-Version=0.1
X-KDE-PluginInfo-Website=http://plasma.kde.org/
X-KDE-PluginInfo-Category=org.myorg.myJSInterface
X-KDE-PluginInfo-Depends=
X-KDE-PluginInfo-License=LGPL
X-KDE-PluginInfo-EnabledByDefault=true
</code>
Important are the ''X-KDE-PluginInfo-Category'' and ''X-KDE-PluginInfo-Name'' value:
The ''X-KDE-PluginInfo-Category'' should be equal to the ''X-KDE-PluginInfo-Name'' value of your interface to ''tell'' plasma which interface (plasmoid or dataengine) this addon belongs to. In this case it is our created JavaScript interface ''myJSInterface''.
The ''X-KDE-PluginInfo-Name'' must be unique amongst all other addons.
To bypass this restriction, it is recommended that we use namespaces, which is  in this case org.myorg.myJSInterface.


= A very simple Addon =
= A very simple Addon =
Line 35: Line 81:
</code>
</code>


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.
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 ].


At the end of your Addon it is also important that you "publish" your class for other instances that would like to use it.
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">
<code javascript="javascript">
registerAddon(MyJavaScriptAddon) </code>
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>
plasmapkg -t Plasma/JavascriptAddon -i MyJavaScriptAddon/
</code>

Latest revision as of 14:36, 26 September 2010

Writing a JavaScript addon
Tutorial Series   Plasma Tutorial
Previous   Writing an interface for JavaScript Addons
What's Next   n/a
Further Reading   JavaScript API


Introduction

This is a tutorial on how to write a JavaScript addon for Plasma. Since it is possible to write Plasmoids in JavaScript (and other languages), you are able to extend your Plasmoid with addons. This tutorial goes through basic steps you need to do to get your addon running.

Setting up

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

MyFirstJSAddon/
contents/
code/

metadata.desktop

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

[Desktop Entry] Name=MyJSAddon Name[x-test]=xxMyJSAddonxx

Comment=My first JavaScript addon


X-KDE-ServiceTypes=Plasma/JavascriptAddon Type=Service X-Plasma-API=javascript

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

Important are the X-KDE-PluginInfo-Category and X-KDE-PluginInfo-Name value: The X-KDE-PluginInfo-Category should be equal to the X-KDE-PluginInfo-Name value of your interface to tell plasma which interface (plasmoid or dataengine) this addon belongs to. In this case it is our created JavaScript interface myJSInterface. The X-KDE-PluginInfo-Name must be unique amongst all other addons. To bypass this restriction, it is recommended that we use namespaces, which is in this case org.myorg.myJSInterface.

A very simple Addon

Our Addon will be a simple JavaScript class that prints out "Hello World" when it gets loaded. Furthermore we will provide one method that prints out an entered text.

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/