Creating Your Own Tags

Purpose:

This section describes the creation and use of user-defined commands in the tame language.

 

Who should read:

Page designers and anyone responsible for the design and creation of catalog pages.

Outline:

1. What are *.tag Files?
2. Where to Place Your Commands
3. Creating Your Own Extensions Using Define
4. Using Arguments within a Define
5. Creating a Special Image Using Face
6. Creating A Tame Image
7. How to Include a *.tag within a *.tam File
8. Using User-Created Defines, Images and Faces

Return to Table of Contents

What are *.tag Files?

A *.tag file is a special tame program file that contains definitions of commands and images. These commands are accessed by a tame page (*.tam) and used to enhance the functionality of the page. For example, these commands can reduced key strokes, allow additional uses of image and enable unique faces on buttons within the page.

Commands can be placed in a special ASCII file called custom.tag which is automatically available to all *.tam files. Commands also can be created in ASCII file format and saved as yourfile.tag. These files are then included in the appropriate tame pages as needed using the <tame> include: filename.tag </tame> command. Finally, commands that are specific to one *.tam file can be included at the beginning of the file and then used on that page.

The standard format within a *.tag file is one of the following:

To create a user define tag:

<tame> define: TAGNAME HTML-AREA </tame>

To create a tame accessible button-face-area:

<tame> face: TAGNAME BUTTON-FACE-TEXT DOCUMENT-LOCATION HTML-OPTION-LIST </tame>

To create a tame image accessible using {*imagename*}:

<tame> image: TAGNAME DOCUMENT-LOCATION HTML-OPTION-LIST </tame>

Where to Place Your Commands

When you want to create custom tags, three method can be used. The method to use depends which *.tam files are going to use the tags.

The first method is to put your definitions in the custom.tag file for your shop. This file will always be in the mirror directory for the shop; that is, the tame/domain_name/shop_name. Using this method will make the tags available to every page in the shop.

The tags in the custom.tag file are always loaded. Use this method when you are making tags that need to be available to most or all page within your shop. To make tags available for a few pages use method three, which will reduce page overhead by only loading the tags for the page which requires them.

The second method supports commands that are unique to one *.tam page. Simply, define the command at the top of the *.tam page and it can then be used throughout the page.

The third method is to put the tags in your own tag file. The file mytags.tag, for instance, is saved in your webroot/shop directory along with your other .tam pages. To use the file you include it on the pages where you need tags with the following command:

<tame> include: filename.tag </tame>

Using this method only loads the tags when you actually need them. If there are a lot of commands to define, do not burden your system by putting the tags in the custom.tag file because this may slow the presentation of pages which don't require the tags. You can include as many of your own tag files as you want on any page. If the tag definitions have the same names, the tag in the last file included on a page overrides the tags in files included earlier.

Creating Your Own Extension Using Define

To create your own extensions use the define command:

<tame> define: TAGNAME HTML-AREA </tame>

where the TAGNAME is the user-defined name you create to call this tag from a *.tam page. The rest of the tag is the tame and HTML command that will be executed when this user-defined tag is called. For example:

Within the custom.tag file located in the mirror shop directory:
<tame>
define: navigate <p><center><tame ^home><tame ^viewcart><tame ^checkstand></center>
</tame>

This command will provide a new tag "navigate" that can be used on a tame page.

Then, on any page within your shop:
<tame>navigate</tame>

This tag will reduce keystrokes by providing the home, view cart and checkstand buttons with one tag.

Using Arguments within a Define

To provide additional flexibility, objects can also be placed in a tag definition. An object is a "place-holder" for information that will be input when the tag is used on a*.tam page. An object is defined using {.#n} where "n" is the number of arguments past the TAGNAME where the data will be provided. For example if a tag called contest is defined:

<tame> define: contest <center><b><h2>Our Contest Winners for {.#1} </b></h2><p><b>First place goes to {.#2}</b><p><i>Second place goes to {.#3}</i><p>Third place goes to {.#4} <center></tame>

You can use it this way to present the winners of a contest on your page:

<tame> contest: July Mary [Jo Anne] Jack </tame>

and this screen will appear

Note: To include all the objects to the end of the clause as one string, use {:#n} where "n" designates the object that starts the string.

By using the {.#n} or {:#n}, you can eliminate additional typing requirements on your pages. For example, you may have a standard heading format that you use often throughout your pages. Instead of typing all the HTML code required to format your heading, you could use the following command:

<tame>
define: newheader <h2><b><i>{:#1}</i></b></h2>
</tame>

Now when you want to have some text with the heading 2 size, bold and in italics, you can use this command in your *.tam files:

<tame>newheader: This is really cool</tame>

By using the {.#n} or {:#n}, you can eliminate additional typing requirements on your pages. For example, you can set up a standard presentation for information from your product database.

<tame> define: present
<tame form>
<tame setgate: FILE ~shop>
<tame define_wgrep: data product.tdb TYPE afe FIRSTCOL 1 LASTCOL 6>
<tame workwith: data>
<div align="center"><table width=75% cellpadding=3 border="2">
<tr>
<td><h3>Item</h3></td>
<td align="right"><h3>Price</h3></td>
<td><h3>Description</h3></td>
<td align="center"><h3>Click to Buy</h3></td>
<td><h3>Quantity</h3></td>
</tr>
<tame foreach::
<tr><td>{.#1}</td>
<td align="right">{.#2}</td>
<td>{.#3}</td>
<td align="center"><tame ^buy: {.#1}></td>
<td><tame ^buyinputqty: {.#1}></td>
</tr>
>
<tame /workwith>
</table></div><tame /form>
</tame>

Now your can present your product information using this template wherever you wish with this simple command:

<tame> present: {?item} {?price} {?descrip} </tame>

In this case your template would appear like this one.

Creating a Special Image Using Face

The face command creates a special tame image that can be used on the face-area of a tame button. Once the face is defined in a *.tag , it can be used on any *.tam page in which the *.tag is included. For example:

<tame>face: *buy* "buy me" yourbuy.gif alt="[ Buy ]" width=82 height=28 border=0 </tame>

This command will provide a "buy button" that can be used on a tame page by using the syntax {*buy*}.

Creating Tame Images

Tame accepts images presented using HTML format. These images can be used with other HTML commands or with tame command. For example:

<tame>
^buy: example <img src=star.gif width=10 height=10>
</tame>

To create a shortcut to this image you can use an image command. The image command creates a tame image using a standard *.gif or *.jpg image. The image is defined in the custom.tag file, another *.tag file in your shop or in the *.tam file in which it will be used. The custom.tag images are available for all tame pages and you can access images within a *.tag file using include in your *.tam page. These images can be used in place of any HTML image code. Here is an example of the definition:

<tame>image: *ball* /images/ball.gif alt="*" width=14 height=14 align=bottom</tame>

This command will provide a "ball" image that can be used on any tame page. The syntax to access the image is {*ball*}. {*ball*} requires few keystrokes then presenting the entire HTML img scr each time you use "ball".

For more information on creating and using images see the Images and Icons section.

How to Include a *.tag Within a *.tam File

To use the user-defined commands within a tag file, the file must be associated with the *.tam file you are creating. This is accomplished using the include tag. Place the include tag at the top of your tame page using the following format:

<tame>include: filename.tag</tame>

Using User-Created Defines, Images and Faces

Using your user-defined command in a tame page requires two steps, including the *.tag file and using the command within <tame>...</tame>.

Note: The custom.tag file is automatically included; therefore, you can use any command defined in that file without using the include statement.

Here is a sample tame page using the examples explained throughout this section.

<html>
<tame> include: filename.tag </tame>
<head>
<tame tamehead>
</head>
{*ball*}<tame> newheader: This is really cool </tame> {*ball*}
Why not buy this exciting item? <tame> ^buy: item {*buy*} </tame>
{navigate}
<tame page_end>

Here is the page that this file would present:

This is really cool Why not buy this exciting item?

The filename.tag file would contain the following:

{image: *ball* ball.gif alt="*" width=14 height=14 align=bottom}
{face: *buy* "buy me" /image/button.gif alt="[ Buy ]" width=82 height=28 border=0}
{define: newheader <h2><b><i>{:#1}</i></b></h2>}
{define: navigate <p><center><tame ^home><tame ^viewcart><tame ^checkstand></center>}

Creating a *.tag file and then using these commands saved keystrokes, provides consistency and can, using images, enhance the look and feel of your pages.

Created: Katherine C. Davis 3/27/97
Edited: Katherine C. Davis 10/14/97