Using Layouts In Qooxdoo tutorial series is finished. I tried my best to explain how layout managers work and how they differ from each other. This tutorial is for those who have little or no object oriented GUI programming experience. Especially JavaScript/DOM programmers learning Qooxdoo. I hope it is helpful.
Complete list of parts:
This is the fifth part of a tutorial series about layout managers, container objects and object hierarchies in Qooxdoo. Read the first part here.
qx.ui.layout.Basic layout manager positions your widgets with absolute coordinates. It doesn’t have much to offer except the freedom of manual positioning.
We supply a left and top property when we add our widgets. Following example places buttons in a circular path, like a clock.
1 /*
2 #asset(qooxdoolayouts/*)
3 */
4 qx.Class.define("qooxdoolayouts.Application",
5 {
6 extend: qx.application.Standalone,
7 members: {
8 main: function(){
9 this.base(arguments);
10
11 var main_container = new qx.ui.container.Composite();
12
13 var layout_manager = new qx.ui.layout.Basic();
14 main_container.setLayout(layout_manager);
15
16 var btn_size = 50;
17 var distance = 175;
18 var pi2 = 2 * 3.141592;
19 center = {
20 x: Math.round(qx.bom.Viewport.getWidth()/2)-btn_size/2,
21 y: Math.round(qx.bom.Viewport.getHeight()/2)-btn_size/2
22 }
23
24 for (var i=0; i<12; i++) {
25 var button = new qx.ui.form.Button("CW"+(i+1).toString());
26 button.setWidth(btn_size);
27 button.setHeight(btn_size);
28 var dist_x = Math.round(distance * Math.sin(-(i/12+0.5)*pi2));
29 var dist_y = Math.round(distance * Math.cos(-(i/12+0.5)*pi2));
30 main_container.add(button, {
31 left: center.x + dist_x,
32 top: center.y + dist_y
33 });
34 }
35
36 var application_root = this.getRoot();
37 application_root.add(main_container);
38 }
39 }
40 });
Basic Example
Nevermind the math. What is important is; this would be much harder to achieve with other, more advanced managers such as Grid.
qx.ui.layout.Canvas is a slightly advanced version of Basic. Canvas lets you define margins (of all four directions) and dimensions in percentage as well as in pixels.
Canvas allows you to define all four margins. You don’t have to define all of them of course. For example if you define a top and bottom margin remaining space will be your widget’s height1. Alternatively you can specify a bottom margin and a height for you widget. This way it will keep its position relative to container’s bottom edge.
One thing to keep in mind is margins are defined against container, not against a bounding box like DOM. Say, if you set the same left on two widgets, they’ll be stacked on top of each other if they happen to have the same vertical coordinates. The following example mimics a Grid layout using Canvas:
1 /* 2 #asset(qooxdoolayouts/*) 3 */ 4 qx.Class.define("qooxdoolayouts.Application", 5 { 6 extend: qx.application.Standalone, 7 members: { 8 main: function(){ 9 this.base(arguments); 10 11 var main_container = new qx.ui.container.Composite(); 12 13 var layout_manager = new qx.ui.layout.Canvas(); 14 main_container.setLayout(layout_manager); 15 16 main_container.add(new qx.ui.form.Button("Child Widget 1"), { 17 left: 20, 18 top: 10 19 }); 20 main_container.add(new qx.ui.form.Button("Child Widget 2"), { 21 left: 140, 22 right: 20, 23 top: 10 24 }); 25 main_container.add(new qx.ui.form.Button("Child Widget 3"), { 26 left: 20, 27 top: 50, 28 bottom: 10 29 }); 30 main_container.add(new qx.ui.form.Button("Child Widget 4"), { 31 left: 140, 32 right: 20, 33 top: 50, 34 bottom: 10 35 }); 36 37 main_container.getChildren()[0].setWidth(100); 38 main_container.getChildren()[2].setWidth(100); 39 40 var application_root = this.getRoot(); 41 application_root.add(main_container); 42 43 application_root.addListener("resize", function(e) { 44 main_container.set({ 45 "width": qx.bom.Viewport.getWidth(), 46 "height": qx.bom.Viewport.getHeight(), 47 }); 48 }, this); 49 } 50 } 51 });
Canvas Example 1
We set two widgets’ widths manually (see lines 37 & 38) to get all the margins (almost) equal. The first row only has top margin set, but the second row has both top and bottom margins. We have given widgets in the second row top margins taking:
and
into account. The same thing is true for the left margin of second column. This is because, as I mentioned, margins are calculated relative to container edges.
If you need to position your controls relative to one another, like DOM positioning, you should probably look into other layout managers like Grid. A good example of a use case for Canvas can be a mapping application such as Google Maps.
As I mentioned earlier Canvas layout accepts parameters in percentages. Following example sets vertical margins in pixels but horizontal margins in percentages:
1 /* 2 #asset(qooxdoolayouts/*) 3 */ 4 qx.Class.define("qooxdoolayouts.Application", 5 { 6 extend: qx.application.Standalone, 7 members: { 8 main: function(){ 9 this.base(arguments); 10 11 var main_container = new qx.ui.container.Composite(); 12 13 var layout_manager = new qx.ui.layout.Canvas(); 14 main_container.setLayout(layout_manager); 15 16 var button = new qx.ui.form.Button("Child Widget 1"); 17 button.setMinWidth(250); 18 button.setMaxWidth(400); 19 main_container.add(button, { 20 left: "30%", 21 right: "30%", 22 top: 40, 23 bottom: 40 24 }); 25 26 var application_root = this.getRoot(); 27 application_root.add(main_container); 28 29 application_root.addListener("resize", function(e) { 30 main_container.set({ 31 "width": qx.bom.Viewport.getWidth(), 32 "height": qx.bom.Viewport.getHeight(), 33 }); 34 }, this); 35 } 36 } 37 });
1: Whether your widget grows this high depends. Let’s say that height is reserved for your widget.
Here is an idea; a keyboard that can learn your keystrokes and adjust its key shapes accordingly. This can’t be done with keyboards with actual physical keys on them. But with an OLED surface or something similar, it is possible.
It should record which keys are pressed and the exact coordinate. It should also take backspace into account. And then it should distort key-map slowly in such a way that keys are hit more or less in their center.
Facebook was the social tool with unexpectedly obvious but surprisingly overlooked idea of integrating small third party applications within a social framework. It is, of course, the user base that makes it work. I will not discuss whether the available apps are useful or not, or they are even functional. Most of them were rubbish. And they still are. But my opinion is; Facebook has nothing to do with it. It is a problem created by no-good developers and escalated to gigantic proportions by irresponsible users’ invites. Nevertheless, it was a great idea and successful execution integrating third party apps. Facebook is, by no coincidence, one of the main actors of Internet1.
Today there is almost no way of social interaction that you can’t engage within Facebook. You can write private messages, you can join groups and write to forums there, you can pinch, poke and even sell your friends, you can try flirting with girls/boys in your friends’ friend list, you can share videos, images, links, apps… An average Internet surfer can do anything with a single Facebook account. It is not because of Facebook’s technical infrastructure but because of its user base. Your friends are in.
The design had changed a number of times. Although people complain a lot, I’ve seen only improvement2. The latest change made it effectively a micro-blogging application with 1000 other features that competing micro blogging utilities don’t have. I would expect no less from a smart company like that.
I have de-activated my account a couple of days ago. This is the second time. And I will most probably re-activate it in the future, so it’s not the last de-activation. Now; I am not the type of person checking my Facebook profile every other hour, watching all the funny videos my friends shared and joining I bet I can find 1M people who loves to eat buggers groups. Seriously what’s with these groups? I can understand the users ultimately decide the purpose of an online tool, but don’t you think it is stupid to use groups as surveys? So that some day a jerk can send you his pitch on that miraculous cabbage pill? And don’t get me started with who has visited your profile, guaranteed groups. Anyway, I bet I can find 1M people who joins any handsome looking group without giving it a seconds thought. But that’s not the issue here. I de-activated not because of some kind of addiction, it’s not even the annoyence of all those useless notifications and app invitations. I de-activated because of fear. Fear of social isolation and degradation.
Log in to your Facebook account and read everything on the page… I’m waiting please read it all… Now answer the following questions:
This is not a Facebook issue. All general purpose4 social networks have this problem when they reach critical mass. When something is emphasized too much and too often it is usually not there. Social gets a lot of emphasis on these networks. It turns out to be a massive waste of time in the end. And people are OK with it, because it’s better than TV. Well, I agree with them on this one. But I stay away from all kinds of narcotics.
Now that I have shared my opinion on how much value social networks create for you5, let’s think about how much value you create for your social network. You tell them about yourself, where you live, what kind of education you have, what you like, what you don’t like and more importantly who do you know and how… yada yada… we all know that. And as long as you have agreed the terms and they play by the rules it is all OK. There is nothing wrong with creating value by sharing your personal information voluntarily.
You change the way you interact with others. You use private messaging instead of e-mail, you share media with built-in sharing feature, you write status messages instead of your blog. You lock yourself in, and this influences your friends as well to accept lock in. Network effect. My fear is; not being able to break this lock in. If Facebook’s growth continues like this more and more people will unknowingly be locked in. That is they will know no Internet outside of a few sites they regularly use. They will for instance see this effort of blogging futile, nobody will read it, if it’s not Facebook. And they will be right. But Facebook doesn’t create a culture for contemplative writing. Facebook wants you to express yourself in 140 or so6 characters as a status message. What are you doing now? Not much. Because much can only happen when you string many nows together.
Don’t get me wrong here I am not critisizing Facebook. I am critisizing the culture that Facebook and others are creating. I mention Facebook because it is the biggest and the most successful of all. I will use it again, it makes getting in touch with old friends possible. I would like to use seperate services for e-mailing, link sharing, chat, etc.. because it minimizes the possibility of a lock in. Remember that you invest your time, no, your life on these free services. It is valuable. Very valuable.
Btw, who wants an isolatr invite?
1: At least in Türkiye.
2: That’s just another feature I guess; you can do your complaining for something you signed up FOR FREE without ever leaving Facebook.
3: Of course you know what I mean, you sick @%#&$?£!
4: A social network built around a specific purpose, if active, would probably create value for its users.
5: Let me be very clear; it’s none. Just in case..
6: I don’t really know how long a status message can be.
Freedays was great as usual. Seminars and workshops were interesting and informative. In my opinion organization was flawless as well. I think this is a result of LKD and Bilgi University teams’ coordinating together1.
Nice presentation by Enver Altın. Short slides2, confident, humorous and to-the-point style. Careful preparation is usually evident in good presentations. Overall I liked it very much. What he says basically is:
Some LKD people tried to undermine the seminar becase it contained criticism of LKD. I don’t know what were they actualy trying to accomplish, but they didn’t distrupt the event for long enough. All they accomplished is to show what kind of people you’ll be dealing with if you join LKD. Well done!
Is open source way of development efficient3? I don’t know. This very interesting seminar topic, and appereantly very interesting research, was murdered with lots and lots of details on research methodology and details on the particular data sample used. If more time was spent on the findings and observations, this talk could be much more interesting and informative for the audience. I think the conclusion was that the OSS way is more efficient.. no, no, it wasn’t.. or was it? 
Can Burak Çilingir gave a nice workshop on Django. He first explained all the key concepts and then we did some coding. Even though we couldn’t create a working app, It was gentle introduction to Django. There certainly is a need for more Django developers.
I have been wanting to learn RoR for a long time. But I just wasn’t able to wrap my head around Ruby. After Erek Göktürk‘s presentation I now, at least, have a rough understanding. Special thanks for his patience with my repetitive questions about blocks. I should learn Rails, and Ruby, better. I believe there are lessons to learn from Rails.
This seminar was the only one emphasizing hacker culture over software freedom. Jonathan Conradt of Google Chrome talked about the history of hackers and then the history of Google, Chrome’s implementation and vision and a little bit about Google’s vision. How “silly fast” Chrome is and will be.
The questions phase was a disaster though. Almost all the questions were aimed at Google’s don’t be evil motto, in the form of “you say you are not evil, but you do x and you do y“. One question was “why did Google buy a fighter airplane?“. Another one was “isn’t that creating a monopoly to require a Google ID for Android phones?“. Yeah, to get a Google ID you need to sign with your blood. But the dumbest question was “so you are collecting all these personal information. Do you share them with NSA?“. Do you guys really think all that SPAM you are getting is the result of harvesing e-mails from public websites? Wisen up a little bit please.
I wouldn’t be surprised, with this kind of treatment, if Google never ever EVER sends a representative again. Should we have kissed Google’s ass. No, that’s equally low. But trying to play I’m going to take you down with my questions is at the very least hostile. I have even heard one guy saying “oh, he didn’t take my question because he must have sensed that I’ll ask a difficult one“. We all witnessed someone else complaining the government to a representative of a foreign company for developing IE only websites.
This one, by Koray Löker, was by far the best seminar for me. The name of the presentation is actually something like; An Elegant Pass from Free Software to Culture Industry: Copyleft. He was well prepared, the topic was interesing and the rhythm of the presentation was almost perfect. If I was able to pick one session to recommend, this would be it.
Sometimes you need to step away, and even step out of your problem to gain a better understanding of it. Investigating open source movies4 may give us insights about sharing, freedom and, most importantly, originality aspects of open source software. Brilliant idea.
Freedays is the only major event for free software community in Türkiye. I would like to thank everybody for their selfless efforts and the sponsors for making it possible.
Hope to see you there next year.
1: This year two events, Freedays of Bilgi University and Linux and Free Softare Festival of LDK, are merged.
2: Few in number, short in content. Mostly a few words per slide. I hate presentations with 1000 slides and 100 words per slide.
3: Compared to conventional development methods used for propriety software.
4: Such as Elephants Dream and Big Buck Bunny.
