Learning to Tango
Volume Number: 15
Issue Number: 10
Column Tag: WebTech
by Ron Davis, Pervasive Software
Contributing Editor, John Daub
Dynamic web sites in no time
These days everybody has a web site. They start out as a single ugly page of text and
gradually grow into a monster web of hyperlinks. Somewhere along the line of this
evolution the person creating the site starts to think, "There's got to be a better way.
Well, it turns out there is a better way: Tango.
Tango is a web application builder and server. It consists of two parts: The Developer
Studio where you create your Tango Application Files (TAF) and the Tango Server you
hook up to your web server to actually serve the TAFs. TAFs are files that contain
instructions for doing a series of Actions. Actions are things you want to happen to
create a web page, such as accessing databases, logic based on arguments, variable or
cookies, or sending an e-mail message.
TAFs are uploaded to your web site. When a user requests a URL that refers to a file
ending with the .taf extension, the TAF file is "executed". This means the Tango plug-in
or CGI interprets the TAF, going through its logic and doing the actions stored in it, and
then outputting HTML that is passed back to the user's web browser.
In this article you are going to actually create some TAF files and execute them via a
web browser and server. If you want to do the examples, you will need to make sure
Tango is set up correctly. Read the documentation for details on how to do this.
Note that with the exception of the description of the Project tab of the workspace
window, all of the code in this article is based on Tango 3.6.
The Tango Server
Let's talk a minute about how the Tango Server works. Pervasive doesn't make an HTTP
server; instead the software integrates with a number of other web servers. This is
done in one of two ways on the Mac, either through a WebStar plug-in or through the
Tango CGI. The WebStar plug-in supports StarNine's WebStar plug-in API, so it will
work with other Mac web servers that support this API, like Quid Pro Quo. The CGI
works with a number of other web servers, including personal web sharing which is
built into Mac OS 8.x. TAF files created on the Mac can also be deployed to web servers
on Windows and Solaris. In Tango 2000 these TAF files are XML.
The main difference between these two methods is what a URL that refers to a TAF looks
like. Using the plug-in, the web server knows how to handle .taf files, so the URL looks
pretty normal.
http://www.mactech.com/home.taf
If you are using the CGI you have to explicitly say that in the URL, so it looks like this:
http://www.mactech.com/$tango.acgi?home.taf
For the rest of this article it will be assumed you are using the plug-in and the
"$tango.acgi?" part of the URL will be left out.
No matter which method you use to access a TAF file, the server handles doing all of the
things you've coded into the file using the Developer Studio. The Tango Server is very
robust. Tango is used to run the Jokes.com (http://www.jokes.com/) web site. This
web site gets 8 million hits per month and sends out 10,000+ e-mail messages a day.
Tango also serves news for The Globe.com (http://www.theglobe.com/), a national ISP.
The Developer Studio
The Developer Studio is where you develop your web application. Here is a quick tour
of the Tango Editor. When you open the Tango Editor application you will be presented
with the Workspace window, Figure 1. The Workspace contains tools and information
that are application wide and that you will use throughout your development of TAF
files. In Tango 3.6 there are three tabs: Project, Data Sources, and Snippets. Tango
2000 adds a fourth tab: Objects.
Figure 1.The Workspace Window
The Project Tab
Tango, just like CodeWarrior and a variety of other development environments,
supports Projects. A Project is a collection of elements that are used in one design. In
Tango 2000 these include:
• Files, which are the TAF files in the project.
• Presentations Pages, which are the equivalent of a C #include file.
• Data Sources, which are databases that are used in the project.
• Objects, which are other executable code modules that are called from the
TAF.
• Sites, which are FTP directories where you deploy your web site.
You can only directly change the Files folder and the Sites folder. The contents of the
other folders are determined by what you reference in the various Actions used in your
TAF files.
The Data Sources Tab
In Tango, all databases are called Data Sources. You can connect to a data source via a
number of different methods, each of which has a folder in the Data Sources tab. They
are DAM, the Data Access Manager, ODBC for connecting to SQL databases, and
FileMaker for accessing FileMaker Pro databases via AppleEvents.
Before a database can be accessed from a TAF, you must create a Data Source for it.
The Snippets Tab
Tango supports the idea of snippets, which are little pieces of text you can add to lots of
places in Tango via drag and drop or by double-clicking. Most of the snippets in the
folders in the Snippets tab are read only, but you can add your own to the "My
Snippets" folder.
The Objects Tab
New to Tango2000 is the ability to call code modules from inside a TAF. In the case of
the Macintosh these code modules are either Java Beans or Tango Class Files (TCF).
TCFs are like TAFs, but have an object interface to them.
Obviously, this is a very shallow overview of the workspace window. You can read the
documentation that comes with Tango for more details, and you'll learn by doing the
examples in this article.
Tango Application Files
Tango Application Files are the heart of Tango. It is here you create the dynamic nature
of your web site. You are going to learn about these files by doing. If you are in the
Tango editor create a new TAF file from the File menu. You'll get an empty TAF window
that looks like Figure 2.
Figure 2.A new TAF window
In Tango you create code by dragging a series of Actions into the TAF window. If it isn't
already open, go to the Views menu and select the Actions Palette.
Figure 3.The Actions palette
Each of the icons on this palette represents a different type of action. If you run your
pointer over the icons the name of the action will be displayed under the icons. To add
an action you drag it off the palette and into the TAF where you want it. Let's create a
simple TAF to show just how easy it is to create an interactive web site with Tango.
First drag an If action into the TAF window. When you do, the action will open a window
like this.
Figure 4.If Action window.
There is a lot of flexibility in this action, but we're going to keep it simple. The cursor
is currently in the first Value column, so go ahead and type in "<@ARG _function>".
Then tab twice to leave the = sign the same and get to the other value column. Type in
"Mom". Now close the window.
What have you just done? You created an if statement that is going to check for a passed
in Argument named _function and evaluate to True if it equals Mom. Tango has its own
set of HTML like tags that can be inserted into various parts of Tango, including if
statements and normal HTML. All of these tags start with "<@" and end with ">". The
word "ARG" denotes an argument to this TAF. There are a lot more of these tags
referred to as MetaTags in Tango.
So what is Tango going to do if the If statement is true? Right now nothing, but lets fix
that. A Results Action allows you it insert strait HTML into the dynamic page you are
creating. You can also include Tango MetaTags which are interpreted by the server
prior to adding them to the output HTML. Drag in a Results Action. When you drag it
under the If it will be indented unless you work at getting it to go to the left.
The Results Action window pops up for you to edit. Here we want to insert some HTML
that will be displayed to the user if <@ARG _function> is equal to "Mom". Type in the
HTML in Listing 1 and close the window.
Listing 1: Mom page HTML.
Hi Mom!
Now we need to handle the non-Mom case. Drag an Else Action into the TAF, below the
Result Action but at the same level as the If Action. Then drag in another Result Action
under the else. Type the HTML from Listing 2 into the Result window and close it.
Listing 2: NonMom page HTML.
Hi Non Mom!
You've now written your first Tango Application. Save it as "parents.taf" and put it
where your web server is going to find it and point your browser to it with a URL like
this <http://www.yourserver.com/parents.taf>.
Your browser should display something like this:
Figure 5.NonMom page in browser.
Now I want to show you how arguments are passed. Change the URL to
<http://www.yourserver.com/parents.taf?_function=Mom>. Executing that you will
get a completely different page.
Figure 6.Mom page in browser.
Now you can see how to pass arguments manually in the URL, but that doesn't look very
useful. Let us see a couple of ways this could be used. First, you could include the URL
with argument into a hyperlink. Add the following line to the Non-mom result HTML.
Save you file and reload it in your browser. You'll now see a hyperlink on the page.
Clicking on it will take you to the Mom page. Let's look for a moment at what we added.
You'll notice the place where you would put the URL contains the cryptic
"<@CGI><@APPFILE>". From the <@ notation you probably figured out these are Tango
MetaTags, but what do they mean? These two tags create a URL to the TAF file
currently be run.
The <@CGI> will insert the notation needed to execute via the CGI interface we talked
about at the beginning of the article if you are running the CGI. It inserts nothing if
you are using the plugin. It is a good thing to always include <@CGI> even if you never
intend to use the CGI, because you might need to one day and or you might want to give
your TAF to someone who does.
The <@APPFILE> tag inserts a path to the current file. You don't have to figure out
relative links and such, and you don't have to change a bunch of HTML if you move the
file.
Another way arguments get passed around is via forms. When a form is processed it
creates arguments based on the values of the various controls and passes them to the
action file when the Submit button is pressed. You're not going to get to see an example
of that right here because we've milked this simple example as far as it will go, but we
are moving to a new more complicated example, so watch for it.
Tango and Databases
Having logic and a means of passing information from one page to another is enough to