macdevcenter.com
oreilly.comSafari Books Online.Conferences.

advertisement

AddThis Social Bookmark Button

Build Your Own Blogging Application, Part 1

by Matthew Russell
11/09/2004

This article is the first in a two-part series that illustrates how to harness the power of Perl and Tcl/Tk along with your .Mac iDisk to build your own blogging application. You'll also learn about XHTML and bash scripting along the way.

If you've never worked with Perl, Tcl/Tk, or XHTML before, don't fret. Getting familiar is fun and will make you a more informed connoisseur of the fine development tools available for Mac OS X. Plus, for this series, no previous knowledge is required.

If you're not interested in these tools, then read along anyway and use those of your choice. The concepts used to build the blogging app are general enough to apply to Python and Ruby, amongst the gamut of others. With that said, let's get acquainted with Tcl/Tk and XHTML -- the basic tools we need to build the front end.

A Very Brief Intro to Tcl/Tk

Tcl stands for "Tool Command Language." Like its relatives Perl, Ruby, and Python, it's a freely available scripting language designed for ease of rapid prototyping and for gluing together pieces of code written in languages such as C++ and Java.

Editor's Note -- We have some related Tcl articles on MacDevCenter.com that you might want to search for, including those by Michael Norton and Christopher Roach.

It's handy comrade, Tk, is a toolkit extension that allows you to develop nice graphical user interfaces (GUIs) with very little effort using widgets. Professor John Ousterhout developed Tcl/Tk in the 1980s at Berkeley, and it's been a hit ever since. In order to develop GUIs with Tcl's Tk extensions, you'll need the Wish Shell. Wish is an abbreviation for 'windowing shell.' The Aqua port is available at apple.com if you don't already have it.

One of the most common problems when working in the terminal is having paths set up correctly, so make sure that the command wish is linked to your Aqua port by typing which wish in your shell. If you've accepted the default installation settings you should get back /usr/bin/wish8.4 or something very similar. If you get back something like /sw/bin/wish, your installation may be pointing to Fink's X Windows installation. You'll need to specify absolute paths or change your path to point to the Aqua ported Wish Shell unless you like the X Windows appearance.

Before building a GUI, you might be interested to know that the basic syntax of a Tcl command is very simple. Constructs are expressed as commands with arguments in the following form:

command argument1 argument2 ... argumentN

For example, the most famous of all programs is as simple as saving the following text into a file named helloWorld.tcl using your editor of choice, and then typing wish helloWorld.tcl in your terminal, while in the same directory. Use any editor, but an editor like Vim with syntax highlighting enhances productivity by signaling syntax errors.

button .helloWorld -text "Hello..." \
	-command {puts stdout "...World!"}
pack .helloWorld -padx 10 -pady 10

In only two lines of code, you've cooked up a GUI to display a "Hello..." button and instructed the button widget to display "...World!" in your terminal window with each click. In case you're thinking I've miscounted the number of lines, note that backslashes break across multiple lines, just like they do in a terminal window or a makefile. This concept is particularly important because commands can have many arguments.

In order to produce readable Tcl/Tk code, you should display it as clearly as possible. Breaking multiple arguments across lines and indenting helps that to happen. Also, note that there cannot be a space character after the backslash. If there is a space, you may not notice it, but the interpreter will hiss at you and your code won't run. If you have an error around a backslash, check for the trailing space.

You might also be interested to know that the dot prefixed to the name of the button widget is mandatory. Tk's naming convention defines widgets in relation to one another. The main window of the application is specified by just a dot. Widgets in the main widow has a dot prefix; widgets inside widgets have a prefix specifying their container widgets, and so forth. In a moment you'll see some code that references the main window explicitly with a dot to give the window a title and some other examples of this syntax.


Hello World!

The button command should be fairly self-explanatory. The -text argument grouping designates the text displayed on the button, and the -command argument grouping specifies what to do when the button is clicked.

Instead of using puts to display text to standard output, we could have specified other actions such as a procedure to execute. Finally, the command pack specifies that the pack geometry manager should arrange the button widget inside the window.

Obviously, we need more than a button for our blogging app, so it's time to make some choices. The relevant Tk widgets for building a minimally functional blogging app include the frame, text, scrollbar, menubutton, menu, and dialog tk_getOpenFile widgets. Each accomplishes what it sounds like, and you can learn more by reading the manual pages for any of them in your terminal. For example, type man scrollbar to read the documentation on the scrollbar widget or type man pack to learn more about the pack geometry manager.

XHTML: A Better HTML

Before eagerly hammering away at the keyboard with your newly acquired knowledge of Tk widgets, you must determine how to display the content to your internet audience. We already know that plain vanilla text is a sore to the eye by today's web standards, so let's decide to use some of the basic markups from XHTML, like making text bold or italic. Using XHTML to mark up a document is easy, but a short summary of a few constructs is in order.

HTML stands for HyperText Markup Language. The text you read on the web is hypertext, and it is "marked up" because tags are placed around it to designate its presentation. For example, enclosing text inside the "emphasis" tags like <em>some text</em> tells the browser to render it as emphasized (usually in italics). Most of the markups for HTML are simple and learning how to use them usually generalizes to several others. If you right click on any HTML document you can choose to view its source and find all kinds of goodies.

'But why the X prefix on HTML?' you ponder. XHTML stands for eXtensible HyperText Markup Language and is a stricter and cleaner HTML. XHTML is an application of XML (eXtensible Markup Language). To make the long story short, the web reached a point where many documents were not "well formed." Prime examples of not being well-formed are when an ending tag is forgotten or not matched, when tags are not entirely in lowercase letters, and when singleton tags like <br> don't explicitly indicate that they're singletons.

For example, the XHTML tag for breaking a line is <br />, not just <br>. The latter doesn't explicitly indicate that there is no closing tag. Most browsers can still work around these problems, but working around problems instead of fixing problems leads to unwanted complexity and time wasted on the workarounds. A nice introduction about what is required of well-formed and valid XML documents is at xml.com.

Conveniently, XML is an already-existing language designed to specify content (not presentation, like HTML). Therefore, if HTML is designed using XML syntax rule like the ones just described, we're able to enforce a grammar that preserves the well-formed structure and more easily lends itself to extension. This nice alternative to what we think of as HTML is called XHTML. As you just learned, XHTML is an XML application, although XHTML is almost identical to HTML 4.01.

Why does this all matter? Because when designing content for the web, you must be careful to follow the official specifications so that as many browsers can display it as correctly as possible. You also enable search agents to more accurately classify the content of your page. By conforming to XHTML standards, we strive to fulfill this objective. The XHTML Reference 1.0 can be found at w3schools.com if you're interested in reviewing more of the details. Although our simple blogging app won't fully unleash the power of XHTML, it's an important design decision to make up front. Next time you're trying to make conversation, just ask someone, "So what's the latest thing you've done with XHTML (emphasizing the X)," and take note of the blank stare you might get back.

Pages: 1, 2

Next Pagearrow