Widgets

Differences between revisions 3 and 4
Revision 3 as of 2010-07-12 18:40:58
Size: 15798
Editor: pool-71-123-28-183
Comment:
Revision 4 as of 2010-07-12 19:00:52
Size: 26522
Editor: pool-71-123-28-183
Comment:
Deletions are marked like this. Additions are marked like this.
Line 183: Line 183:
... (02:40:59 PM) apachelogger: what we can do now, is hooking up our button with the hideTroll too
(02:41:09 PM) apachelogger: so for that we need to think a bit
(02:41:15 PM) apachelogger: first we connect to showTroll
(02:41:43 PM) apachelogger: in showTroll we hence need to disconnect that again and connect to hideTroll
(02:41:47 PM) apachelogger: vice versa in hideTroll
(02:41:55 PM) apachelogger: button.clicked.disconnect(showTroll);
(02:41:56 PM) apachelogger: button.clicked.connect(hideTroll);
(02:42:00 PM) apachelogger: for showTroll
(02:42:06 PM) apachelogger: and
(02:42:07 PM) apachelogger: button.clicked.disconnect(hideTroll);
(02:42:07 PM) apachelogger: button.clicked.connect(showTroll);
(02:42:10 PM) apachelogger: for hideTroll
(02:42:12 PM) apachelogger: Brilliant!
(02:42:17 PM) apachelogger: QUESTION: Why is the label a troll? :-)
(02:42:26 PM) apachelogger: the troll is not yet there, we will get there soon enough
(02:42:54 PM) apachelogger: in fact
(02:42:57 PM) apachelogger: lets do it now ;)
(02:43:06 PM) apachelogger: let me shed some light on why this is called trollface...
(02:43:16 PM) apachelogger: just showing and hidign a text label is a bit boring, and way too ungraphical tool!
(02:43:23 PM) apachelogger: so let us add a picture into the mix
(02:43:34 PM) apachelogger: oh I don't know, maybe http://people.ubuntu.com/~apachelogger/udw/10.07/trollface/contents/images/troll.png
(02:43:35 PM) apachelogger: ;)
(02:43:40 PM) apachelogger: Oh why, lets call it "troll", shall we? (you see where I am getting at here ;)). The code should be pretty clear:
(02:43:47 PM) apachelogger: troll = new Label(plasmoid);
(02:43:47 PM) apachelogger: troll.image = plasmoid.file("images", "troll.png");
(02:43:47 PM) apachelogger: layout.addItem(troll);
(02:44:09 PM) apachelogger: Now please run your plasmoid and see what uglyness we have produced....
(02:44:14 PM) apachelogger: http://people.ubuntu.com/~apachelogger/udw/10.07/hello-doctor-4.png
(02:44:16 PM) apachelogger: ewwww!!!!
(02:44:27 PM) apachelogger: The Label is too big, the button is too big and the image is too small! Great job apachelogger!
(02:44:39 PM) apachelogger: Of course this was intentionally so I can tell you about the beauty of QSizePolicies ;)
(02:44:54 PM) apachelogger: By default a layout will try to use as much space as is possible and divert this space equally between its items. So while label and button are too small, they are indeed the same size as the image and vice versa.
(02:45:09 PM) apachelogger: This is however not desired in our situation, so we tell the button and image to follow a different policy than "use whatever you get from the layout".
(02:45:26 PM) apachelogger: For that we will use special leet magic called QSizePolicy. For specifics please take a look at the Qt documentation. In our example we will only need 2 policies:
(02:45:34 PM) apachelogger: * maximum - try to occupy as much space as possible
(02:45:34 PM) apachelogger: * fixed - magically lock to appropriate default value
(02:45:41 PM) apachelogger: We can apply those to our button...
(02:45:46 PM) apachelogger: button.sizePolicy = QSizePolicy(QSizePolicyMaximum, QSizePolicyFixed);
(02:46:14 PM) apachelogger: What we are telling the button is that it shall use as much horizontal space as possible but use a decent unchangable default value for its vertical size.
(02:46:31 PM) apachelogger: For our troll we will use max:max because we want the whole image shown. Using max:max the troll will try to use as much horizontal and as much vertical space as it can get.
(02:46:36 PM) apachelogger: troll.sizePolicy = QSizePolicy(QSizePolicyMaximum, QSizePolicyMaximum);
(02:46:48 PM) apachelogger: (In consequence the label will have to live on left overs, which is just fine for this example)
(02:47:15 PM) apachelogger: Trying this you should get a decent picture now!
(02:47:18 PM) apachelogger: http://people.ubuntu.com/~apachelogger/udw/10.07/hello-doctor-4-1.png
(02:47:27 PM) apachelogger: Good news everyone!
(02:47:40 PM) apachelogger: We have all the basic components in place and can stick them together to get some more usefulness out of it ;-)
(02:47:51 PM) apachelogger: How about we do not show the troll by default, but only if the user presses the button?
(02:48:02 PM) apachelogger: How about we do show the label only if the troll is not shown?
(02:48:14 PM) apachelogger: Sounds like a plan, a plan that will require 4 lines of code (somehow with me a lot of things only require 4 lines of code, in case you noticed ;-)).
(02:48:25 PM) apachelogger: shadeslayer: you are missing the initial connection
(02:48:39 PM) apachelogger: ....So, to showTroll we add:
(02:48:45 PM) apachelogger: layout.insertItem(0, troll);
(02:48:46 PM) apachelogger: troll.visible = true;
(02:48:49 PM) apachelogger: and to hideTroll:
(02:48:55 PM) apachelogger: troll.visible = false;
(02:48:56 PM) apachelogger: layout.removeItem(troll);
(02:49:01 PM) apachelogger: They should look familiar to you by now and again are just inverted.
(02:49:15 PM) apachelogger: If you try this now, then you will notice that I was not completely, honest, 4 lines of code do not quite cut it.
(02:49:26 PM) apachelogger: We still need to remove one and add one (so in the end we are at +5 -1 = 4 :-P).
(02:49:37 PM) apachelogger: As we do not want the troll shown when the label is shown, we must change the initial state of our troll.
(02:49:49 PM) apachelogger: Instead of adding it to the layout (which is now handled by showTroll) we will set its initial visiblity to false (which also gets changed in showTroll).
(02:49:55 PM) apachelogger: layout.addItem(troll);
(02:49:58 PM) apachelogger: becomes
(02:50:03 PM) apachelogger: troll.visible = false;
(02:50:07 PM) apachelogger: And from this point on we have a proper Trollface!
(02:50:11 PM) apachelogger: Hooray \o/
(02:50:22 PM) apachelogger: That leaves us with 10 minutes for fun stuff ^^
(02:50:29 PM) ClassBot: There are are 10 minutes remaining in the current session.
(02:50:35 PM) apachelogger: see ;)
(02:50:51 PM) apachelogger: Well, this was all very nice, but really, still a bit boring.
(02:51:08 PM) apachelogger: Plasma can do so much more. In fact so much that I do not have time to properly show you :(
(02:51:20 PM) apachelogger: But let us take animations for example ;)
(02:51:25 PM) apachelogger: How about making our troll rotate. Good idea, isn't it? :D
(02:51:37 PM) apachelogger: First lets get a rotate object we can work with:
(02:51:41 PM) apachelogger: rotate = animation("Rotate");
(02:51:46 PM) apachelogger: outside a function please!
(02:51:51 PM) apachelogger: I recommend adding this towards the end of your code.
(02:51:59 PM) apachelogger: Now we have a rotate animation. But we still need to tweak it a bit to our needs.
(02:52:10 PM) apachelogger: rotate.targetWidget = troll;
(02:52:19 PM) apachelogger: Now just add the following somewhere in your showTroll function:
(02:52:21 PM) apachelogger: rotate.start();
(02:52:33 PM) apachelogger: This will start the animiation. And that is all we need to do for starters. If you try your code you should get a neat rotating head upon click.
(02:52:55 PM) apachelogger: It will however only rotate 180 degrees, not terribly awesome. Lets tweak this a bit.
(02:53:01 PM) apachelogger: Lets set the rotation to 360 degrees:
(02:53:05 PM) apachelogger: rotate.angle = 360;
(02:53:13 PM) apachelogger: and maybe make it a bit slower, say 5000 ms:
(02:53:17 PM) apachelogger: rotate.duration = 5000;
(02:53:24 PM) apachelogger: You might also have noticed that it will only rotate once, let us make this endless:
(02:53:29 PM) apachelogger: rotate.loopCount = -1;
(02:53:33 PM) apachelogger: Voila! A spinning head :D
(02:53:58 PM) apachelogger: Now since I am a bit short on time, let me wrap this up, sorry for rushing a bit towards the end :)
(02:54:21 PM) apachelogger: Another cool widget I created yesterday is a Player Control Widget - Playdget. You can find it at
(02:54:24 PM) apachelogger: http://people.ubuntu.com/~apachelogger/udw/10.07/playdget/
(02:55:00 PM) apachelogger: if your trollface is not working properly you can also take a look at my implementation:
(02:55:01 PM) apachelogger: http://people.ubuntu.com/~apachelogger/udw/10.07/trollface/
(02:55:19 PM) ClassBot: There are are 5 minutes remaining in the current session.
(02:55:19 PM) apachelogger: in general you will find snapshots of the various trollface steps in http://people.ubuntu.com/~apachelogger/udw/10.07/
(02:55:32 PM) apachelogger: QUESTION: Can you program KDE or pure Qt applications using JavaScript?
(02:55:54 PM) apachelogger: In Qt 4.7 there will be a new fraemwork called QtQuick which indeed allows you to create entire apps in JavaScript
(02:56:04 PM) apachelogger: in fact, as far as I know plasma-mobile uses this a lot
(02:56:44 PM) apachelogger: QUESTION: can you write DataEngines in JavaScript?
(02:57:15 PM) apachelogger: I am not entirely sure, in either case I am not sure you would want to to do this for performance reasons, might be worth asking in the plasma IRC channel :)
(02:57:38 PM) apachelogger: As I mentioned earlier on - Plasma is more of a platform than an actual application (in contrast to plasma-desktop and plasma-netbook). Plasma is also used in Amarok. And here is the shocking news...
(02:57:44 PM) apachelogger: You can run both trollface AND playdget inside Amarok. So with a bit of tweaking you can actually make your JavaScript Plasmoids useable inside Amarok and plasma-desktop and plasma-netbook and plasma-mobile. If that is not a reason to become Plasmoid developer, then I do not know what is :D
(02:57:56 PM) apachelogger: For videso on both plasmoids in action take a look at http://people.ubuntu.com/~apachelogger/udw/10.07/videos/
(02:58:06 PM) apachelogger: I totally can recommend those running in Amarok ;)
(02:58:18 PM) apachelogger: <FreeNode:#ubuntu-classroom-chat:tech2077> Question: Can you do this on gmone if you have kdm installed, or you have to switch to kdm completely
(02:58:31 PM) apachelogger: this has nothing to do with KDM really
(02:58:44 PM) apachelogger: but if you mean KDE...
(02:59:03 PM) apachelogger: generally you should be able to run plasma-desktop in a GNOME session and replace the GNOME desktop+panel
(02:59:31 PM) apachelogger: also, for development you do not need to run plasma-desktop
(02:59:58 PM) apachelogger: well, time is up
(03:00:15 PM) apachelogger: if you care to talk a bit more join us in #kde-devel or #kubuntu-devel :)
(03:00:19 PM) apachelogger: Thank you everyone! You have been brilliant!

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
(02:16:50 PM) apachelogger: also it is available by default in plasma, so it is as protable as C++
(02:17:18 PM) apachelogger: in the end you should choose a javascript code over C++ for various reasons, if you do not need any of the C++ advantages :)
(02:17:24 PM) apachelogger: thereofre I am also talking about javascript :)
(02:17:35 PM) apachelogger: anyhow
(02:17:38 PM) apachelogger: lets view the plasmoid
(02:17:41 PM) apachelogger: plasmoidviewer ./hello-doctor
(02:17:59 PM) apachelogger: usually this should give you our new plasmoid, if it does not  -> http://people.ubuntu.com/~apachelogger/udw/10.07/hello-doctor.png
(02:18:05 PM) apachelogger: Congratulations, you just have made your first Plasmoid!
(02:18:33 PM) apachelogger: plasmoidviewer is a very useful tool for in-development debugging
(02:19:05 PM) apachelogger: now that we have a plasmoid, it would be very nice to have it packaged, so we can install it in plasma and share it with others
(02:19:32 PM) apachelogger: for general purpose widget management plasma comes with a tool called plasmapkg
(02:20:06 PM) apachelogger: using plasmapkg -i you can install plasmoids to use them in plasma
(02:20:16 PM) apachelogger: packaging them is no magic either
(02:20:20 PM) apachelogger: just create a zip ;)
(02:20:26 PM) apachelogger: cd hello-doctor
(02:20:26 PM) apachelogger: zip -r ../hello-doctor.zip .
(02:20:26 PM) apachelogger: mv ../hello-doctor.zip ../hello-doctor.plasmoid
(02:20:48 PM) apachelogger: that will give you a nice plasmoid package to use with plasmapkg
(02:20:52 PM) apachelogger: and share with your friends
(02:21:25 PM) apachelogger: shadeslayer: mind the period in ./hello-doctor/
(02:21:46 PM) apachelogger: believe it or not, you now know almost everything
(02:22:08 PM) apachelogger: well, the important stuff anyway, lets digg a bit into development
(02:22:35 PM) apachelogger: that we will do with my incredibly awesome superior sweet and unicorny "trollface" plasmoid
(02:23:03 PM) apachelogger: you can either create the basic infrastructure using the commands I gave you for hello-doctor, or just recycle my template http://people.ubuntu.com/~apachelogger/udw/10.07/trollface-template/
(02:23:32 PM) apachelogger: remember to make metadata.desktop suite your needs, if you want
(02:23:45 PM) apachelogger: otherwise lets dive right into trollface/contents/code/main.js
(02:24:05 PM) apachelogger: the template I have provides no more than the code we used for hello-doctor
(02:24:17 PM) apachelogger: building up on that we will make superior awesomeness now
(02:24:25 PM) apachelogger: let me think
(02:24:25 PM) apachelogger: hm
(02:24:36 PM) apachelogger: how about we add a button to that ;)
(02:24:43 PM) apachelogger: one to push ;)
(02:24:48 PM) apachelogger: terribly difficult cod eagain...
(02:24:55 PM) apachelogger: button = new PushButton(plasmoid);
(02:24:55 PM) apachelogger: layout.addItem(button);
(02:24:55 PM) apachelogger: button.text = 'Push me!!!';
(02:25:19 PM) apachelogger: very similar to the label code but with a pushbuton now... just add that at the bottom of your main.js and you should get a button now
(02:25:31 PM) apachelogger: http://people.ubuntu.com/~apachelogger/udw/10.07/hello-doctor-1.png
(02:25:37 PM) apachelogger: looks fancy, eh? ;)
(02:25:46 PM) apachelogger: yeah, I know, not really, but we will get there
(02:25:53 PM) apachelogger: oh hold on!
(02:26:00 PM) apachelogger: oh dear, oh dear! That does not look right at all :/
(02:26:10 PM) apachelogger: I do not know about you, but I really wanted the button under the label
(02:26:14 PM) apachelogger: not next to it
(02:26:37 PM) apachelogger: well, this gives me reason to talk a bit about layouting
(02:26:42 PM) apachelogger: ^ see what I did there
(02:26:54 PM) apachelogger: evil as I am I made myself a topic to talk about :D
(02:27:19 PM) apachelogger: so, our layout is obviously there to help with placement of our items
(02:27:27 PM) apachelogger: for that different layouts can use different rules
(02:27:36 PM) apachelogger: our simple linearlayout supports to ways to layout items
(02:27:44 PM) apachelogger: by vertical or horizontal orientation
(02:27:57 PM) apachelogger: suffice to say, the default is horizontal, hence our button is right of the label
(02:28:11 PM) apachelogger: to change that we add
(02:28:13 PM) apachelogger: layout.orientation = QtVertical;
(02:28:28 PM) apachelogger: now everything should be as intent by the author
(02:28:30 PM) apachelogger: http://people.ubuntu.com/~apachelogger/udw/10.07/hello-doctor-2.png
(02:28:52 PM) apachelogger: be careful though!
(02:29:06 PM) apachelogger: when just adding items ot a layout (i.e. using the addItem() function) they will be listed in order of adding!
(02:29:17 PM) apachelogger: one should keep that in mind for later ;)
(02:29:30 PM) apachelogger: currently our button does not do much though :(
(02:29:32 PM) apachelogger: a bit sad.
(02:29:46 PM) apachelogger: let's add some super feature.
(02:30:04 PM) apachelogger: for this we will introduce a new javascript function. this is done using the function keyword. like this:
(02:30:11 PM) apachelogger: function showTroll()
(02:30:11 PM) apachelogger: {
(02:30:11 PM) apachelogger:     label.visible = false;
(02:30:11 PM) apachelogger: }
(02:30:28 PM) apachelogger: QUESTION: Can we resize that button?
(02:30:31 PM) apachelogger: yes, but a bit later
(02:30:40 PM) apachelogger: QUESTION: im getting http://imagebin.ca/view/RuCn71.html , what have i done wrong?
(02:31:13 PM) apachelogger: broken plasma most likely, what you are seeing here is that for some reason the plasma theme is not rendering properly, which is mostly an indication for running usntable pre-release software :P
(02:31:43 PM) apachelogger: so essenntially the items are there, they are just not drawn properly, goes a bit out of the scope of widgetcraft though :)
(02:31:57 PM) apachelogger: back to my new function showTroll
(02:32:06 PM) apachelogger: it does not do much
(02:32:11 PM) apachelogger: but what it does, man that is epic
(02:32:15 PM) apachelogger: it makes the label invisible
(02:32:18 PM) apachelogger: how scary is that!!!
(02:33:02 PM) apachelogger: now if you add showTroll(); to the bottom of your script the label will never be visible, not a lot of sense ... I just mention that to make you understand what a function is ;)
(02:33:30 PM) apachelogger: what would make a lot more sens is if we could hook up our button with that function
(02:33:35 PM) apachelogger: well *surprise* we can ;)
(02:34:04 PM) apachelogger: Qt has a system called signal and slots, it basically allows us to connect certain events of objects (signals) to functions that will carry out to an effect (slot).
(02:34:09 PM) apachelogger: Suppose my home is a plasmoid.
(02:34:20 PM) apachelogger: Now someone rings the bell, this will trigger that I go to the door and open it.
(02:34:46 PM) apachelogger: In Qt terms this means: someone emits the singal bellRung, this triggers my slot openDoor, and that slot will have as resulting situation that I am standing at my open door
(02:35:20 PM) apachelogger: I hope this clears things up that are going to happen next ... if not, poke devildante he knows all about signals and slots  ;)
(02:35:26 PM) apachelogger: so
(02:35:39 PM) apachelogger: like my home has a bell that can be rung, our plasmoid has a button...
(02:35:46 PM) apachelogger: and well, buttons can be clicked... ;)
(02:35:58 PM) apachelogger: nw we just connect that clicking to the function
(02:36:00 PM) apachelogger: button.clicked.connect(showTroll);
(02:36:08 PM) apachelogger: you can add this anywhere below the creation of the butotn
(02:36:22 PM) apachelogger: if you run the code now and click the button it will hide the label!
(02:36:24 PM) apachelogger: so magic :)
(02:36:54 PM) apachelogger: any questions thus far?
(02:37:17 PM) apachelogger: http://people.ubuntu.com/~apachelogger/udw/10.07/hello-doctor-2-2.png
(02:37:24 PM) apachelogger: the careful observer will notice that there is still space occupied by our label
(02:38:33 PM) apachelogger: this is because we have just made it invisible
(02:38:36 PM) apachelogger: it is still there
(02:39:00 PM) apachelogger: in order to reuse the space we just remove it from the layout
(02:39:07 PM) apachelogger: function showTroll()
(02:39:08 PM) apachelogger: {
(02:39:08 PM) apachelogger:     label.visible = false;
(02:39:08 PM) apachelogger:     layout.removeItem(label);
(02:39:08 PM) apachelogger: }
(02:39:32 PM) apachelogger: using this improved showTroll fucntion the button sould now not only hide the label but also reuse its space
(02:39:39 PM) apachelogger: now
(02:39:47 PM) apachelogger: while we are at it, let us also invert the logic
(02:39:53 PM) apachelogger: we probably want our label back at some point
(02:39:58 PM) apachelogger: function hideTroll()
(02:39:58 PM) apachelogger: {
(02:39:58 PM) apachelogger:     layout.insertItem(0, label);
(02:39:58 PM) apachelogger:     label.visible = true;
(02:39:58 PM) apachelogger: }
(02:40:16 PM) apachelogger: so now we have showTroll and hideTroll
(02:40:26 PM) apachelogger: http://people.ubuntu.com/~apachelogger/udw/10.07/hello-doctor-3.png
(02:40:59 PM) apachelogger: what we can do now, is hooking up our button with the hideTroll too
(02:41:09 PM) apachelogger: so for that we need to think a bit
(02:41:15 PM) apachelogger: first we connect to showTroll
(02:41:43 PM) apachelogger: in showTroll we hence need to disconnect that again and connect to hideTroll
(02:41:47 PM) apachelogger: vice versa in hideTroll
(02:41:55 PM) apachelogger: button.clicked.disconnect(showTroll);
(02:41:56 PM) apachelogger: button.clicked.connect(hideTroll);
(02:42:00 PM) apachelogger: for showTroll
(02:42:06 PM) apachelogger: and
(02:42:07 PM) apachelogger: button.clicked.disconnect(hideTroll);
(02:42:07 PM) apachelogger: button.clicked.connect(showTroll);
(02:42:10 PM) apachelogger: for hideTroll
(02:42:12 PM) apachelogger: Brilliant!
(02:42:17 PM) apachelogger: QUESTION: Why is the label a troll? :-)
(02:42:26 PM) apachelogger: the troll is not yet there, we will get there soon enough
(02:42:54 PM) apachelogger: in fact
(02:42:57 PM) apachelogger: lets do it now ;)
(02:43:06 PM) apachelogger: let me shed some light on why this is called trollface...
(02:43:16 PM) apachelogger: just showing and hidign a text label is a bit boring, and way too ungraphical tool!
(02:43:23 PM) apachelogger: so let us add a picture into the mix
(02:43:34 PM) apachelogger: oh I don't know, maybe http://people.ubuntu.com/~apachelogger/udw/10.07/trollface/contents/images/troll.png
(02:43:35 PM) apachelogger: ;)
(02:43:40 PM) apachelogger: Oh why, lets call it "troll", shall we? (you see where I am getting at here ;)). The code should be pretty clear:
(02:43:47 PM) apachelogger: troll = new Label(plasmoid);
(02:43:47 PM) apachelogger: troll.image = plasmoid.file("images", "troll.png");
(02:43:47 PM) apachelogger: layout.addItem(troll);
(02:44:09 PM) apachelogger: Now please run your plasmoid and see what uglyness we have produced....
(02:44:14 PM) apachelogger: http://people.ubuntu.com/~apachelogger/udw/10.07/hello-doctor-4.png
(02:44:16 PM) apachelogger: ewwww!!!!
(02:44:27 PM) apachelogger: The Label is too big, the button is too big and the image is too small! Great job apachelogger!
(02:44:39 PM) apachelogger: Of course this was intentionally so I can tell you about the beauty of QSizePolicies ;)
(02:44:54 PM) apachelogger: By default a layout will try to use as much space as is possible and divert this space equally between its items. So while label and button are too small, they are indeed the same size as the image and vice versa.
(02:45:09 PM) apachelogger: This is however not desired in our situation, so we tell the button and image to follow a different policy than "use whatever you get from the layout".
(02:45:26 PM) apachelogger: For that we will use special leet magic called QSizePolicy. For specifics please take a look at the Qt documentation. In our example we will only need 2 policies:
(02:45:34 PM) apachelogger: * maximum - try to occupy as much space as possible
(02:45:34 PM) apachelogger: * fixed - magically lock to appropriate default value
(02:45:41 PM) apachelogger: We can apply those to our button...
(02:45:46 PM) apachelogger: button.sizePolicy = QSizePolicy(QSizePolicyMaximum, QSizePolicyFixed);
(02:46:14 PM) apachelogger: What we are telling the button is that it shall use as much horizontal space as possible but use a decent unchangable default value for its vertical size.
(02:46:31 PM) apachelogger: For our troll we will use max:max because we want the whole image shown. Using max:max the troll will try to use as much horizontal and as much vertical space as it can get.
(02:46:36 PM) apachelogger: troll.sizePolicy = QSizePolicy(QSizePolicyMaximum, QSizePolicyMaximum);
(02:46:48 PM) apachelogger: (In consequence the label will have to live on left overs, which is just fine for this example)
(02:47:15 PM) apachelogger: Trying this you should get a decent picture now!
(02:47:18 PM) apachelogger: http://people.ubuntu.com/~apachelogger/udw/10.07/hello-doctor-4-1.png
(02:47:27 PM) apachelogger: Good news everyone!
(02:47:40 PM) apachelogger: We have all the basic components in place and can stick them together to get some more usefulness out of it ;-)
(02:47:51 PM) apachelogger: How about we do not show the troll by default, but only if the user presses the button?
(02:48:02 PM) apachelogger: How about we do show the label only if the troll is not shown?
(02:48:14 PM) apachelogger: Sounds like a plan, a plan that will require 4 lines of code (somehow with me a lot of things only require 4 lines of code, in case you noticed ;-)).
(02:48:25 PM) apachelogger: shadeslayer: you are missing the initial connection
(02:48:39 PM) apachelogger: ....So, to showTroll we add:
(02:48:45 PM) apachelogger: layout.insertItem(0, troll);
(02:48:46 PM) apachelogger: troll.visible = true;
(02:48:49 PM) apachelogger: and to hideTroll:
(02:48:55 PM) apachelogger: troll.visible = false;
(02:48:56 PM) apachelogger: layout.removeItem(troll);
(02:49:01 PM) apachelogger: They should look familiar to you by now and again are just inverted.
(02:49:15 PM) apachelogger: If you try this now, then you will notice that I was not completely, honest, 4 lines of code do not quite cut it.
(02:49:26 PM) apachelogger: We still need to remove one and add one (so in the end we are at +5 -1 = 4 :-P).
(02:49:37 PM) apachelogger: As we do not want the troll shown when the label is shown, we must change the initial state of our troll.
(02:49:49 PM) apachelogger: Instead of adding it to the layout (which is now handled by showTroll) we will set its initial visiblity to false (which also gets changed in showTroll).
(02:49:55 PM) apachelogger: layout.addItem(troll);
(02:49:58 PM) apachelogger: becomes
(02:50:03 PM) apachelogger: troll.visible = false;
(02:50:07 PM) apachelogger: And from this point on we have a proper Trollface!
(02:50:11 PM) apachelogger: Hooray \o/
(02:50:22 PM) apachelogger: That leaves us with 10 minutes for fun stuff ^^
(02:50:29 PM) ClassBot: There are are 10 minutes remaining in the current session.
(02:50:35 PM) apachelogger: see ;)
(02:50:51 PM) apachelogger: Well, this was all very nice, but really, still a bit boring.
(02:51:08 PM) apachelogger: Plasma can do so much more.  In fact so much that I do not have time to properly show you :(
(02:51:20 PM) apachelogger: But let us take animations for example ;)
(02:51:25 PM) apachelogger: How about making our troll rotate. Good idea, isn't it? :D
(02:51:37 PM) apachelogger: First lets get a rotate object we can work with:
(02:51:41 PM) apachelogger: rotate = animation("Rotate");
(02:51:46 PM) apachelogger: outside a function please!
(02:51:51 PM) apachelogger: I recommend adding this towards the end of your code.
(02:51:59 PM) apachelogger: Now we have a rotate animation. But we still need to tweak it a bit to our needs.
(02:52:10 PM) apachelogger: rotate.targetWidget = troll;
(02:52:19 PM) apachelogger: Now just add the following somewhere in your showTroll function:
(02:52:21 PM) apachelogger: rotate.start();
(02:52:33 PM) apachelogger: This will start the animiation. And that is all we need to do for starters. If you try your code you should get a neat rotating head upon click.
(02:52:55 PM) apachelogger: It will however only rotate 180 degrees, not terribly awesome. Lets tweak this a bit.
(02:53:01 PM) apachelogger: Lets set the rotation to 360 degrees:
(02:53:05 PM) apachelogger: rotate.angle = 360;
(02:53:13 PM) apachelogger: and maybe make it a bit slower, say 5000 ms:
(02:53:17 PM) apachelogger: rotate.duration = 5000;
(02:53:24 PM) apachelogger: You might also have noticed that it will only rotate once, let us make this endless:
(02:53:29 PM) apachelogger: rotate.loopCount = -1;
(02:53:33 PM) apachelogger: Voila! A spinning head :D
(02:53:58 PM) apachelogger: Now since I am a bit short on time, let me wrap this up, sorry for rushing a bit towards the end :)
(02:54:21 PM) apachelogger: Another cool widget I created yesterday is a Player Control Widget - Playdget. You can find it at
(02:54:24 PM) apachelogger: http://people.ubuntu.com/~apachelogger/udw/10.07/playdget/
(02:55:00 PM) apachelogger: if your trollface is not working properly you can also take a look at my implementation:
(02:55:01 PM) apachelogger: http://people.ubuntu.com/~apachelogger/udw/10.07/trollface/
(02:55:19 PM) ClassBot: There are are 5 minutes remaining in the current session.
(02:55:19 PM) apachelogger: in general you will find snapshots of the various trollface steps in http://people.ubuntu.com/~apachelogger/udw/10.07/
(02:55:32 PM) apachelogger: QUESTION: Can you program KDE or pure Qt applications using JavaScript?
(02:55:54 PM) apachelogger: In Qt 4.7 there will be a new fraemwork called QtQuick which indeed allows you to create entire apps in JavaScript
(02:56:04 PM) apachelogger: in fact, as far as I know plasma-mobile uses this a lot
(02:56:44 PM) apachelogger: QUESTION: can you write DataEngines in JavaScript?
(02:57:15 PM) apachelogger: I am not entirely sure, in either case I am not sure you would want to to do this for performance reasons, might be worth asking in the plasma IRC channel :)
(02:57:38 PM) apachelogger: As I mentioned earlier on - Plasma is more of a platform than an actual application (in contrast to plasma-desktop and plasma-netbook). Plasma is also used in Amarok. And here is the shocking news...
(02:57:44 PM) apachelogger: You can run both trollface AND playdget inside Amarok. So with a bit of tweaking you can actually make your JavaScript Plasmoids useable inside Amarok and plasma-desktop and plasma-netbook and plasma-mobile. If that is not a reason to become Plasmoid developer, then I do not know what is :D
(02:57:56 PM) apachelogger: For videso on both plasmoids in action take a look at http://people.ubuntu.com/~apachelogger/udw/10.07/videos/
(02:58:06 PM) apachelogger: I totally can recommend those running in Amarok ;)
(02:58:18 PM) apachelogger: <FreeNode:#ubuntu-classroom-chat:tech2077> Question: Can you do this on gmone if you have kdm installed, or you have to switch to kdm completely
(02:58:31 PM) apachelogger: this has nothing to do with KDM really
(02:58:44 PM) apachelogger: but if you mean KDE...
(02:59:03 PM) apachelogger: generally you should be able to run plasma-desktop in a GNOME session and replace the GNOME desktop+panel
(02:59:31 PM) apachelogger: also, for development you do not need to run plasma-desktop
(02:59:58 PM) apachelogger: well, time is up
(03:00:15 PM) apachelogger: if you care to talk a bit more join us in #kde-devel or #kubuntu-devel :)
(03:00:19 PM) apachelogger: Thank you everyone! You have been brilliant!

MeetingLogs/devweek1007/Widgets (last edited 2010-07-12 19:00:52 by pool-71-123-28-183)