User:Thehayro/JavaScript interface: Difference between revisions

From KDE TechBase
No edit summary
No edit summary
 
(5 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 [[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 51: Line 51:
</code>
</code>


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


= A very simple Addon =
= The plasmoid =


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


First of all we will define a constructor. In this case we name it MyJavaScriptAddon
!screenshot!


<code javascript="javascript">
<code javascript="javascript">
function MyJavaScriptAddon()
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()
{
{
    print("Hello World");
  // 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>


This constructor gets called, when this addon is loaded by another JavaScript instance. In there we will get a console output with "Hello World".
Now we insert the code that "grabs" the addons.
 
<code javascript="javascript">
// we want to hold on to the addons
var addons = new Array()


The next step is to provide our Addon a method, which print out our input.
// and listen, when more addons are coming
plasmoid.addEventListener("addonCreated", addonCreated);


<code javascript="javascript">
// callback function when an addon has been located
MyJavaScriptAddon.prototype.echo = function(text)
function addonCreated(addon)
{
{
    print(text);
  print("new addon: " + addon)
  addons.push(addon);
}
}
</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. To understand the concept of object orienting in JavaScript see [http://mckoss.com/jscript/object.htm this tutorial ].
// 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");


At the end of your Addon it is also important that you "publish" your class for other instances that would like to use it.
// we found the addons. now we want to load all of them
for (i in addonsObject)
{
  print("Addon: " + addonsObject[i].name);


<code javascript="javascript">
  // let load the addon
registerAddon(MyJavaScriptAddon) </code>
  plasmoid.loadAddon("org.myorg.myJSInterface", addonsObject[i].id);
}
</code>
 
= Testing and Installing=


Now, we should save our written code into ''MyFirstJSAddon/contents/code'' and name it ''main.js''.
Before you install your applet you may want to test it.
Enter this code in your console:


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


To install this addon, simply navigate to the root directory of our addon and
To install your interface enter this code in you console:
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"