Ubuntu Wiki

Dev Week -- Widgetcraft -- apachelogger -- Mon, Jul 12th, 2010

(02:02:06 PM) apachelogger: welcome to an intro to widgetcraft. also known as the art of creating plasma widgets.
(02:02:21 PM) apachelogger: this talk is backed up by a set of slides that can be followed at http://docs.google.com/present/view?id=ajk6csn6c2vn_53fj6c47f6
(02:02:35 PM) apachelogger: my name is Harald Sitter, and I wish you a pleasant journey :)
(02:02:54 PM) apachelogger: first off I would like to direct your attention to important sites that will help a lot with writing plasmoids.
(02:03:04 PM) apachelogger: General tutorials on JavaScript Plasma programming are avilailable at: http://techbase.kde.org/Development/Tutorials/Plasma#Plasma_Programming_with_JavaScript
(02:03:13 PM) apachelogger: Information on Plasma packages: http://techbase.kde.org/Projects/Plasma/Package
(02:03:16 PM) mode (-o dholbach) by dholbach
(02:03:26 PM) apachelogger:  And a rather simplified JavaScript API: http://techbase.kde.org/Development/Tutorials/Plasma/JavaScript/API
(02:03:52 PM) apachelogger: in general I probably should mention that the kde techbase is a wonderful resource for KDE programming topics of all kinds with a vast amount of tutorials
(02:04:16 PM) apachelogger: so, lets get started.
(02:04:23 PM) apachelogger: first let me quickly get some terms straight.
(02:04:32 PM) apachelogger: -> Plasma <-
(02:04:43 PM) apachelogger: is the technology underlying the KDE workspace.
(02:05:16 PM) apachelogger: it is available in multiple different versions. on a PC you will have plasma-desktop, on a netbook possibly plasma-netbook and in the future you will be able to run plasma-mobile on your mobile device (e.g. a smart phone)
(02:05:27 PM) apachelogger: \o/ yay for plasma on my mobile ;)
(02:05:49 PM) apachelogger: even though those incarnations of plasma might look different, they all root in teh same base technology and follow the same principles
(02:05:58 PM) apachelogger: next up is -> plasmoid <-
(02:06:13 PM) apachelogger: I have already used that term. Plasmoids are sort of native Plasma Widgets.
(02:06:18 PM) apachelogger: There are also non-native widgets ;)
(02:06:29 PM) apachelogger: For example one can run Mac Widgets or Google Gadgets inside Plasma as well.
(02:06:49 PM) apachelogger: In this talk I will show you how to write Plasmoids in JavaScript using 2 (well, technically 3) example Plasmoids.
(02:07:02 PM) apachelogger: and yes!!!! we will be able to pull this off in the limited time that we got.
(02:07:07 PM) apachelogger: We just need to believe in it :-D
(02:07:28 PM) apachelogger: [endofboringbits]
(02:07:38 PM) apachelogger: Time to move on to the interesting parts ...
(02:07:47 PM) apachelogger: let me show you just how difficult it is to write a plasmoid.
(02:08:01 PM) apachelogger: as with every programming introduction I will start with a "Hello" example.
(02:08:19 PM) apachelogger: if you do not want to write the stuff yourself, you can find a finsihed example at http://people.ubuntu.com/~apachelogger/udw/10.07/hello-doctor/
(02:08:44 PM) apachelogger: as one might judge from the name this hello plasmoid is apachelogger branded and featuring doctor who awesomeness ;)
(02:09:03 PM) apachelogger: first we need to get the structure sorted out a bit - no fun without the politics :/
(02:09:10 PM) apachelogger: I will however try to limit this to the bare minimum
(02:09:11 PM) apachelogger: so
(02:09:20 PM) apachelogger: Any plasmoid *should* at least contain two files.
(02:09:39 PM) apachelogger: One for the "politics" (giving the plasmoid a name and icon) and one for the actual code.
(02:09:57 PM) apachelogger: specficis are in detail explained in the KDE techbase
(02:10:03 PM) apachelogger: (if anyone really cares :P)
(02:10:21 PM) apachelogger: for now you can just trust me and execute the following in a directory of your choice
(02:10:22 PM) apachelogger: mkdir -p hello-doctor/contents/code/
(02:10:23 PM) apachelogger: touch hello-doctor/metadata.desktop
(02:10:23 PM) apachelogger: touch hello-doctor/contents/code/main.js
(02:10:42 PM) apachelogger: these 3 lines will create the most essential directories and the 2 files I was talking about
(02:10:57 PM) apachelogger: Now for the adding of content.
(02:11:12 PM) apachelogger: (please excuse if I am rushing this a bit, but it is rather boring ;))
(02:11:45 PM) apachelogger: open hello-doctor/metadata.desktop in an editor of your choice (be it vi or nano ;)) and add the information seen at http://people.ubuntu.com/~apachelogger/udw/10.07/hello-doctor/metadata.desktop
(02:12:07 PM) apachelogger: most of those files should be pretty self-explaining and are documented in the techbase
(02:12:17 PM) apachelogger: should you have a question about one of those - please ask
(02:12:43 PM) apachelogger: the only thin worth mentioning is that the field X-KDE-PluginInfo-Name *must* be rather unique
(02:13:03 PM) apachelogger: QUESTION: What does X-KDE-PluginInfo-EnabledByDefault=true do?
(02:13:07 PM) apachelogger: no one knows that ;)
(02:13:23 PM) apachelogger: all the information about that field is that you do not need to change it
(02:13:35 PM) ***apachelogger also did not bother to look its function up in the source code....
(02:14:00 PM) apachelogger: once you have made the metadata.desktop suite your needs, save it and let us move on to ... the code :D
(02:14:29 PM) apachelogger: the code goes to hello-doctor/contents/code/main.js (that is actually changable via the desktop file in case you haven't noticed)
(02:14:35 PM) apachelogger: now behold!
(02:14:39 PM) apachelogger: layout = new LinearLayout(plasmoid);
(02:14:39 PM) apachelogger: label = new Label(plasmoid);
(02:14:39 PM) apachelogger: layout.addItem(label);
(02:14:39 PM) apachelogger: label.text = 'Hello Doctor!';
(02:14:54 PM) apachelogger: Yes, four lines of code :P
(02:14:58 PM) apachelogger: I am not kidding you :P
(02:15:45 PM) apachelogger: first we create a layout that belongs to your plasmoid and call it "layout", then we create a label that also belongs to our plasmoid and call it "label".
(02:16:06 PM) apachelogger: we add the label and to our layout and give it a text
(02:16:11 PM) apachelogger: and, well, that is it
(02:16:28 PM) apachelogger: and since it just got mentioned that this is much easier than C++
(02:16:31 PM) apachelogger: indeed it is
...