Dear Friend,
Widget, widget, widget. You can't stop talking about the New Blogger without mentioning the buzzword "widget." So what is it really, and what can we do with it? This two-part article provides a gentle, non-programming-jargon introduction to Widget.
Widget as visual component
One of the main selling point of the New Blogger over Classic is the introduction of the drag-and-drop Page Elements. I still remember vividly the first time I played around with it. I had seen and used similar visual layouts before (Visual Basic or Visual C++ GUI tools,) but to me it was such a great experience, and still is.
Like your labels to show up on the main area instead of on the sidebar? No problem, just drag, save, and see the result. Dragging back to its own place is just as easy! How about moving it up or down, sneaking between two other widgets? Again the visual interface is just so simple - yet elegant, it moves gently all other widgets down and make a blank dotted window for the dragging widget to fit in. This visual interface makes the act of moving "things" around your webpage really easy now, as it helps speed up the designing process quite a bit.
moving the "Label" widget from the sidebar ...
... to the main area.
Widget as textual component
Two weeks into introducing the Page Elements (around August 2006,) Blogger finally revealed the code behind the scene. For the first time, hackers alike could investigate what made the widget worked the way it was. In my opinion, the template itself has an ingenious design philosophy. The template allows code to be packaged in a neat and isolated way, sophisticated enough to expose data in myriad yet easy-to-guess and organized fashion. The extraction-of-data process could be achieved with just several simple loops and if statements over a clever way of accessing data based on their widget type only.
The Blogger Help line documents this very well, along with the data exposed of each kind of widget. Unfortunately, I think the way Blogger explains is a tad difficult to completely understand what the system is all about.
In the next section, I will try to explain to you the inner working of the "Label" as a sample of a typical widget. This article, thus, is a continuation of my explanations about template code:
- Understanding the New Blogger Template (1)
- Understanding the New Blogger Template (2)
- Understanding the New Blogger Template (3)
I hope you have had a chance to look at all three of them before moving on to the next section. At the end of the third article, we were seeing lots of widgets in their simplified (declaration) form. Now, let's open up one of the easiest but very useful one, namely the "Label" widget.
Going inside the Label Widget
Below is the code of the widget. I put the line number at the start of each line so I could talk about it in a more effective way.
01. <b:widget id='Label1' locked='false' title='Labels' type='Label'>
02. <b:includable id='main'>
03. <b:if cond='data:title'>
04. <h2><data:title/></h2>
05. </b:if>
06. <div class='widget-content'>
07. <ul>
08. <b:loop values='data:labels' var='label'>
09. <li>
10. <b:if cond='data:blog.url == data:label.url'>
11. <data:label.name/>
12. <b:else/>
13. <a expr:href='data:label.url'><data:label.name/></a>
14. </b:if>
15. (<data:label.count/>)
16. </li>
17. </b:loop>
18. </ul>
19.
20. <b:include name='quickedit'/>
21. </div>
22. </b:includable>
23. </b:widget>
Before getting in some more details in the second part of the article, let's find out what's going on here in general. I will explain what the widget does line by line.
Explaining the internal code
Line 1 declares that this is a widget of type "Label," with its unique identification id='Label1' (to be stored somewhere inside one of Google's servers,) with the title "Labels" to be seen by viewers. Also, the "locked" setting is set to "false", meaning you could freely drag this widget to anywhere inside the Page Elements.
Line 23 closes the widget. This means that any line from 2 to 22, the data exposed will be of type "Label". From the Blogger help line, we see that we could only retrieve four distinct kind of data: first the title of the widget (data:title); and, for each found label of your entire hompage, we can access its name (data:label.name), the post count for each label (data:label.count), and the url of the link to a page displaying posts with this label (data: label.url).
Each widget allows many subordinate functions to stay inside. For example, you could consolidate redundant code into a function, to be called many times during the widget's lifetime. I have an example of such creation of function here.
By default, each widget must always have a special function with identification id='main'. It's sort of like your house's front door. Everybody enters your house must go though this front door, even yourself. There's no shortcut allowed, such as the garage door, the back door, or anything like that. It's just a rule that we must simply obey.
Line 2 starts the main includable and line 22 closes it. This means that the widget only contains within itself one function only, that is the "main" function ( it is acually is called includable in Blogger's terminology.)
This function does several things.
Line 3 through 5 checks to see if the title has text, if so, it displays the text inside a pair of h2 tags.
Next, line 6 and line 21 opens and closes a pair of "div" tags with the class "widget-content." This setting, (in conjunction with the widget's name, which will turn into another id tag) allows us to have unique presentation settings for the label contents using CSS rules.
Line 7 and line 18 opens and closes a pair of ul tags. This allows the labels displayed as a bullet list.
Line 8 and line 17 opens and closes a pair of special template tags b:loop. This loop is reponsible for exposing each label data one at a time from start til end of the set of available labels.
Inside the "b:loop", there are some texts which are going to be put inside a pair of li tags. For example, if we have five labels, we should have a list with a core layout like this:
<ul>
<li>(some text here for label 1)</li>
<li>(some text here for label 2)</li>
<li>(some text here for label 3)</li>
<li>(some text here for label 4)</li>
<li>(some text here for label 5)</li>
</ul>
Indeed, line 10 and line 11 say that if the current page is the same as the label's url (line 10,) which means that you are already in that label querying page, then just show the name only, but not with the link under it. (line 11)
Otherwise, or "else", in computer's lingo (line 12), shows a link and the text represents it ( line 13)- which is the label itself.
Along with the label, the widget shows the head count (in a pair of parentheses) of how many posts the current label (in the loop) is assigned to.
Finally, line 21 shows the widget's edit button, allowing you to edit the contents or settings of the widget while viewing the page live. This function is a kind of global and hidden function, since it could be place anywhere, yet not a single line of code on how this widget button actually composed of.
You are at the end of part 1 of this "Widget 101" article. On the second part, I will delve more into the internal working of a widget, as well as offering you some simple "tweaks" (or "hacks") on changing the widget's appearance. I will also provide proofs to my assertions why the new template is indeed an ingenious design. Finally, I will talk about how I (and other people) have been extending these widgets to provide more functionalities with the help of the JavaScript programming language and JSON callback technique.
Have a wonderful day.
Hoctro
1/26/07