6.9 MacrosCreating Custom Tags
The WML macro processor enables us to define custom tags that implement WML macros. Creating custom tags saves typing and enables us to change a lot of HTML by simply changing the definition. To define a new tag, we use the <define-tag> macro.There are two types of tags in HTML: those that have closing tags, such as <b> ... </b>, and those that do not, such as <img>.For HTML tags that require closing tags, a new tag is defined as:
<define-tag red whitespace=delete endtag=required>
<font color="#FF0000">%body</font>
</define-tag>
This defines a tag named <red> .. </red>. The end tag is indeed required because we say endtag=required. The whitespace=delete tag tells WML not to preserve superfluous whitespace characters. The stuff between <define-tag> .. </define-tag> is the text that this tag will be translated intoin this case, <font color="#FF0000">%body</font>. %body is replaced by whatever is between the <red> .. </red> tags. Therefore, this tag:
[7][7] Hmm, looks a bit like XML.
<red>Hello, world!</red>
becomes:
<font color="#FF0000">Hello, world!</font>
If we wanted a tag to make not only red text but bold red text, we would change the definition to this:
<define-tag red whitespace=delete endtag=required>
<font color="#FF0000"><b>%body</b></font>
</define-tag>
Now, <red>Hello, world!</red> produces this:
<font color="#FF0000"><b>Hello, world!</b></font>
Similarly, for a tag that has no closing tag, an example would be a tag <lamp>, which outputs the title of this book, Open Source Web Development with LAMP:
<define-tag lamp whitespace=delete>
Open Source Web Development with LAMP
</define-tag>
There are two ways to use unclosed tags:
<tag>
or:
<tag/>
The first one is HTML-style, and the second is XML-style (note the closing />).Now, You are reading <lamp>! produces:
You are reading Open Source Web Development with LAMP!
Consider another example. We have a style for the web site links that we want to apply to all the links on the page. It could be:
<a href="><font color="#999966"><b>go to </b></font></a>
To create the tag to make this easy, the definition is:
<define-tag link whitespace=delete>
<preserve href>
<preserve text>
<set-var %attributes>
<a href=" href>"><font color="#999966"><b> text></b>
</font></a>
<restore href>
<restore text>
</define-tag>
Here a tag named <link> is defined. Again, WML will remove superfluous whitespace characters. The attributes to the tag (here href and text) are passed into the tag through the variable %attributes, so the line <set-var %attributes> indicates that the current definition should be used. However, in WML, tag attributes are kept in a stacklike data structure, so before the attributes in the tag can be used, the current values must be preserved with <preserve href> and <preserve text>. This means taking the current values of these two variables, if there are any, and saving them for later use, clearing their values for this particular tag. Then, after using the values in %attributes with href> and text>, the previous values of the variables can be restored with <restore href> and <restore text>.Then the HTML to which this tag gets converted is definedthe <a href> .. </a> tag. To use the <link> tag, input either the HTML-style:
<link href="http://www.perl.com/"
text="Perl is cool">
or the XML-style:
<link href="http://www.thewml.org/sw/wml/"
text="WML Home Page"/>
All this is put together into an example stored in /var/www/html/wml/define.wml:
<define-tag red whitespace=delete endtag=required>
<font color="#FF0000">%body</font>
</define-tag>
<define-tag lamp whitespace=delete>
Open Source Web Development with LAMP
</define-tag>
<define-tag link whitespace=delete>
<preserve href>
<preserve text>
<set-var %attributes>
<a href=" href>"><font color="#999966"><b>
text></b></font></a>
<restore href>
<restore text>
</define-tag>
<html>
<body bgcolor="#ffffff">
<red>Hello, world!</red>
<hr>
You are reading <lamp>!
<hr>
<link href="http://www.perl.com/"
text="Perl is cool">
<hr>
<link href="http://www.thewml.org/sw/wml/"
text="WML Home Page"/>
</body>
</html>
Use this to generate the HTML:
$ wmk define.wml
wml -n -o definel define.wml
This is the resulting HTML, in /var/www/html/wml/definel:
<html>
<body bgcolor="#ffffff">
<font color="#FF0000">Hello, world!</font>
<hr>
You are reading Open Source Web Development with LAMP!
<hr>
<a href="http://www.perl.com/"><font color="#999966">
<b>Perl is cool</b></font></a>
<hr>
<a href="http://www.thewml.org/sw/wml/"><font color="#999966">
<b>WML Home Page</b></font></a>
</body>
</html>
To see this, load in either http://localhost/wml/definel or www.opensourcewebbook.com/wml/definel. The result can be seen in Figure 6.9. For more information on defining tags, see man wml_p2_mp4h.
Figure 6.9. Defining your own tags
