Plasma for web developers

YES! That’s right. Even if you don’t know C++ or even Ruby or Python, you can still write plasmoids. After writing my atheist plasmoid I thought I’d add a tutorial on techbase to help other people write their own web plasmoids too so here it goes.

If, like me, you’re too lazy to click, what you need to do is first:

mkdir -p hello-web/contents/code

In the hello-web directory create a file called metadata.desktop and open it in your text editor. Copy the following code into metadata.desktop.

[Desktop Entry]
Encoding=UTF-8
Name=Hello Web
Name[nl]=Hallo Web
Type=Service
ServiceTypes=Plasma/Applet
Icon=chronometer
X-Plasma-API=webkit
X-Plasma-MainScript=code/main.html
X-KDE-PluginInfo-Author=Patrick Aljord
X-KDE-PluginInfo- Email=patcito@gmail.com
X-KDE-PluginInfo-Name=hello-web
X-KDE-PluginInfo-Version=1.0
X-KDE-PluginInfo-Website=http://plasma.kde.org/
X-KDE-PluginInfo-Category=Examples
X-KDE-PluginInfo-Depends=
X-KDE-PluginInfo-License=GPL
X-KDE-PluginInfo-EnabledByDefault=true

Now create a file in the contents/code directory called main.html, open it up in your text editor and put this code in it and save it.

<!-- <Copyright and license information goes here.> -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=620" />
<title>Hello World</title>
</head>
<body>
Hello World!
</body>
</html>

Plasma applets can be packaged in zip files and installed using the plasmapkg command line tool. The directory structure which we have used for our project matches that need in the zip file. All we have to do is zip it update. Run the following command from inside the hello-web directory.

zip -r ../hello-web.zip .

This will create the hello-web.zip file in the directory just above the hello-web directory. Go to this directory in the shell and run this plasmapkg command to install our little hello-web applet.

plasmapkg -i hello-web.zip

This installs the applet into your home directory. Now we can run it. When developing applets it is more convenient to use the plasmoidviewer. This is a little utility which displays an applet in a window instead of you having to use your desktop. This command below will run our applet.

plasmoidviewer hello-web

You should now be able to see the fruits of your labor.

You can also open the main.html directly with your webkit browser (rekonq, konqueror+webkit, arora, chrome etc).

If you want to make your plasmoid available to the whole world, upload it to http://opendesktop.org.

Oh, and happy new year again to all of you who celebrate it!

Posted on 2009-12-31 23:35:30 UTC

6 comments

Tags foss, kde, plasma, plasmoid, webkit, tutorial, web, html5

Aaron Seigo said on 2010-01-01 03:47:44 UTC:

very cool, thanks for the techbase tutorial! :) i spiffied up one or two tiny things in it, but it looked good already!

btw, did you know that you can access DataEngines from JavaScript in the Web Plasmoids? pretty nifty :)

patcito said on 2010-01-01 07:56:41 UTC:

Hey Aaron I am really glad you liked that tutorial I added to techbase. I was trying to port my plasmoid to vista and os x widget and by doing so, I realized how awesome plasma was and how simple it is in plasma to do a plasmoid compared to those closed platforms :)

Using DataEngines from Javascript in the Web Plasmoid sounds awesome, do you have any docs about it? If you give me some hints I could blog about it and/or add it to techbase, anyway, thanks for plasma :)

(I'm kinda drunk right now for the new year, I hope all this sounds reasonable xD)

barraponto said on 2010-01-01 15:50:48 UTC:

supports html5, fantastic. css3? javascript (jquery)? thanks for your fantastic piece of code!

WP Themes said on 2010-01-17 15:56:25 UTC:

Amiable post and this post helped me alot in my college assignement. Say thank you you for your information.

Vigrx Plus said on 2010-01-20 21:51:38 UTC:

Easily I acquiesce in but I about the collection should acquire more info then it has.

Vigrx Plus said on 2010-01-21 07:51:12 UTC:

Opulently I acquiesce in but I think the collection should prepare more info then it has.

Your name or OpenID (required to post links):

rel="nofollow" is added to all links so no need to spam here ;)