6.9 Macros”Creating Custom TagsThe 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 into”in this case, <font color="#FF0000">%body</font> . %body is replaced by whatever is between the <red> .. </red> tags. Therefore, this tag: [7]
<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="a.html"><font color="#999966"><b>go to a.html</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="<get-var href>"><font color="#999966"><b><get-var 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 <get-var href> and <get-var 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 defined”the <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="<get-var href>"><font color="#999966"><b><get-var 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 define.html define.wml This is the resulting HTML, in /var/www/html/wml/define.html : <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/define.html or www.opensourcewebbook.com/wml/define.html. 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
|