stack.be » General

There once was a master programmer who wrote unstructured programs. A novice programmer, seeking to imitate him, also began to write unstructured programs. When the novice asked the master to evaluate his progress, the master criticized him for writing unstructured programs, saying, ``What is appropriate for the master is not appropriate for the novice. You must understand the Tao before transcending structure.''

Archive for the 'General' Category

The Dojo Tree Control for beginners - part 2

So you have a dojo tree control on your page and now you want to do something with it. The two most obvious things to do are using the tree control in a form so that the user can select something from it, and to use it in a real Ajaxy Web 2.0 application, for example to display a tree of Inbox folders if you’re building an email application. In both cases you’ll need to know when the selection (which node is selected in the tree) has changed. In the case where you use the tree in a form you’ll only inspect the selected after the form has been submitted, in the Ajax app you’ll want to react in Javascript upon a ’selection changed’ event.
Well it turns out that to get the ‘form’ scenario to work, you need the same foundation as for the ‘Ajax’ scenario - so here it is.

Having a Javascript function called when the selection changes

Starting from my earlier post on getting a bare-bones Dojo tree control up and running, here’s what you need to add:

Add an ‘eventNames’ attribute to the TreeSelector so that it looks like this:
<div dojoType="TreeSelector" widgetId="treeSelector" eventNames="select:nodeSelected"></div>
In the <head> section of your html document, add a Javascript section like the one below:
<script language="JavaScript" type="text/javascript"> dojo.addOnLoad(function() { dojo.event.topic.subscribe("nodeSelected", function(message) { alert(message.node.title); }); }); </script>

Now every time the selection changes (when the user selects another node in the tree), you’ll see a message box with the text of the newly selected node.

Submitting the selected tree node in a form

But what about when you want to know the selected node in the form you’re submitting to? What you have to do is make a hidden input form element and set the value, using the javascript method above, when the selection changes. Follow these steps:

For this to work you need to have a named form, so your form has to have a ‘name’ attribute:
<form name="form_with_dojo_tree" action="post">
Add a hidden form element to your form:
<input type="hidden" name="selected_tree_node" value="">
Add the Javascript code described above, but in the method (in place of the ‘alert’), put the following:

window.document.form_with_dojo_tree.selected_tree_node.value = message.node.title;

In the code that handles your form (the php or asp or jsp or whatever script), the value is available to you in the ’selected_tree_node’ post variable. Simple as that!

04/16/07 | General | Trackback | 7 Comments »

The Dojo Tree Control for beginners - part 1

The Dojo toolkit provides web developers with a great toolbox for developing Ajax/DHTML applications, but unfortunately this great power comes with great complexity. I needed the tree control but I couldn’t find any simple examples, so I dissected the examples from the Dojo website that use Ajax calls to get their data and poked around the Dojo source code a bit to find out how it works. I wrote down my experimentations to try to find the simplest example possible; I thought I’d share my experience here.

This will show a tree with no drag and drop and no editing of the nodes. The nodes in the tree will be predetermined by the html we write, so no nodes will be added in dynamically.

a. In the <head></head> section, add the following:

<script type="text/javascript"> dojo.require("dojo.widget.Tree"); dojo.require("dojo.widget.TreeSelector"); dojo.require("dojo.widget.TreeNode"); dojo.require("dojo.widget.TreeContextMenu"); </script>

This is apart from the normal dojo javascript include that you need in all dojo-enabled pages:

<script type="text/javascript" src="/js/dojo/dojo.js"></script>

This last include should always be done before any other dojo calls are made, so it should be before the dojo.require’s that we did above.

b. In the <body>, add the following div:

<div dojoType="TreeSelector" widgetId="treeSelector"></div>

The attributes are:
- dojoType: always “TreeSelector”. This is an attribute all Dojo controls have, it identifies what type of Dojo control the div should be morphed into.
- widgetId: a name for the selector. You can make up any name, as long as it’s unique throughout your document.

c. Add a <div> that represents the actual tree view:

<div dojoType="Tree" widgetId="tree_widget" selector="treeSelector" toggler="fade"> </div>

The attributes are:
- dojoType: always “Tree”. This is an attribute all Dojo controls have, it identifies what type of Dojo control the div should be morphed into.
- widgetId: a name for the tree. You can make up any name, as long as it’s unique throughout your document.
- selector: the widgetid of the selector you made in step b.
- toggler: the name of the toggle function to use. Can be any of the functions in dojo.lfx.toggle. As of Dojo 0.3.1, these are ‘plain’, ‘fade’, ‘wipe’ and ‘explode’. This argument determines how branches will be shown or hidden when a node is opened or closed.

Finally, add some nodes to the tree view. Add them inside the <div> that is the treeview itself, so that it looks like this:
<div dojoType="Tree" widgetId="tree_widget" selector="treeSelector" toggler="fade"> <div dojoType="TreeNode" widgetId="0" title="First node" isFolder="false"></div> <div dojoType="TreeNode" widgetId="1" title="Second node" isFolder="false"> <div dojoType="TreeNode" widgetId="2" title="Third node" isFolder="false"></div> </div> </div>

As you can see, you can nest nodes by nesting divs.

The attributes are:
- dojoType: Always “TreeNode”. This is an attribute all Dojo controls have, it identifies what type of Dojo control the div should be morphed into.
- widgetId: A name for the node. You can make up any name, as long as it’s unique throughout your document. It makes sense here to use a better naming scheme than the one used in the example, eg naming them ‘1′, ‘2′ for top level nodes, ‘1.1′, ‘1.2′, ‘2.1′, ‘2.2′ etc. for children of those top level nodes
and so on.
- title: The text that should be displayed next to a node. If you want, you can add some color to the node texts by adding html to the ‘title’ attribute:
<div dojoType="TreeNode" widgetId="1" title="<span style='color:blue'>This text is blue"></div>

or add checkboxes like this:

<div dojoType="TreeNode" widgetId="1" title="<input type='checkbox'>First node"></div>

- isFolder: This attribute is optional but if you leave it out, the default value of ‘false’ is assumed. When set to ‘true’, it will force an ‘expand/collapse’ image on every node, even if it doesn’t have any children.

And that’s it. You can see this minimal example at work here.

10/20/06 | General | Trackback | 10 Comments »

Something from the archives…

Back in March of 2001, I hung around on the phpbuilder.com forums a bit, and I got a bit fed up with the stupid and counterproductive way some questions were asked; so I wrote a ‘how to ask questions’ tip and I still feel like referring to it a lot when reading forums and mailing lists nowadays. Since I have troubles finding the old article every time I want to post a link to it, I’m going to republish it here (and yes I know that it repeats a lot of the points of Eric Raymond’s How To Ask Questions The Smart Way - but hey I wrote mine earlier, and it’s shorter ) Anyway, here it is:

Tricks and Hacks : Miscellaneous

How to ask questions on the phpbuilder board
Submitted By: Roel
Date: 03/14/01 21:59

How to post a question to phpbuilder.com forums (and other forums, as well)

I have spend some amount of time today answering some questions on the phpbuilder.com forum. It seems that most questions there, like on most ‘general purpose’ webboards and mailing lists, are from people who are relatively new to php, some even new to programming at all. This is ofcourse not a problem, these boards exist to help people solve their problems, and not only very complicated/advanced problems. However, I couldn’t help but noticing that most of these questions are much harder to answer then the more ‘advanced’ questions. How is that, you ask? Well, because they are asked in a completely wrong way. Therefore, I have decided to put together some guidelines to help people getting faster, better and more appropriate answers to their questions.
1-) Choose a clear title for you question.

The subject line is the first thing people will see when they load the forums page. You have to remember that people’s time is limited; if they do not understand what you’re asking about by just reading the subject, they might not take the time to click on the link and read further. I have seen quite a few subjects like ‘HELP!!!’, ‘Newbie question’, and ‘php question’. Well sorry, but duh, all people posting are looking for help and have a question about php, and the newbie thing is not very relevant either. So try to describe what your question is about, without details: ‘Security/Cookies’, ‘multiple picture upload’, ‘cookies won’t die’ are good examples. By reading this, people can tell ‘ah this about a subject that I know about’ or ‘i’ve never heard of that function before, so I won\’t waste my time reading the question.’

2-) Describe your application and what you are trying to do.

It might seem a lot of work, typing in 5 whole sentences to describe what you are actually trying to achieve, but it will help people reading your question to form an image of the sort of application you’re building, why you make certain design decisions etc. Don’t make this too long either ofcourse; be brief and precise.

3-) Describe what the problem is and what troubleshooting steps you have taken.

If you get any error messages, copy and paste them into your posting, and don’t say ‘it says it can’t find it’ or ‘it won’t work after that’. Check your error logs, both the php error log and the apache error log. Include relevant parts in your posting. Also shortly describe what you have already tried - ‘I tried using this-and-that function instead, but I had the same problem’, ‘I have changed permisssions on that file, but php still says ‘Can’t read file’.

3-) Don’t use leet speak.

‘if ur tryin’ 2 b short, ur text is hard to read’. Please use normal english like you learned it in school. If your mother tongue is not english and you don’t know a certain word, try to construct your sentence different with words that you know.

4-) Reread before you post.

Before you hit that ’send’ button, reread your text and put yourself in the shoes of someone who has never heard about you or your program, who just happens to be surfing phpbuilder.com a bit and who accidentaly stumbles upon your question. Would you understand it if you would read something like this? Also check for spelling errors and typos. Everyone knows what you mean, but it doesn’t look good. Take some time for your post, you’ve probably already spend hours solving this problem - those 5 minutes to rethink your post won’t make the difference, and they might actually help you to get a better reply and thus solving your problem earlier.

5-) Do not tell how important your question is.

Don’t end your post ‘REPLY ASAP. THIS IS FIRST PRIORITY. MY JOB DEPENDS ON IT.’ Everyone thinks their problem is the most important, and quity frankly, if your job depends on an answer that you may or may not get from a complete stranger on some anonymous webboard, you shouldn’t have that job in the first place.

6-) Search the archive and articles

It is surprising how many times the same question come up. Please, use the ’search’ box on the left, and browse through the results. It is likely someone else had your problem before, you can save yourself (and others!) a lot of time by reading those answers first.

7-) Put code in < pre > tags.

Make it easy for people to read your code. Use < pre >< /pre > and indent your code properly. Use clear variables, and do all the nice clean programming things you should do anyway.
In short, all these things come down to the same thing: use some common sense, and try to be short yet complete. Happy posting