AndreyShubin.com http://andreyshubin.com Hoduli: free markup abstractions http://andreyshubin.com/updates/Hoduli Fri, 13 Nov 2009 17:27:56 +0300 One of the most valuable part of any good product is it's user interface.

But the current state of UI development seems to be ugly. Development of Web UI for large projects is terrifically complex. We are forced to implement our ideas with hardcoded HTML and CSS. Of course there is XML/XSLT family, but it's redundant and unreadable.

Let me show you this small PHP code. It's called Hoduli (stilts in Russian). I think we should wear something like that while splashing through the mud of web-development :-)

The main part of Hoduli is a special tag <h:define />.
We can define any other tag using that one. (All references to tags will have a prefix h:.)

<h:define name="page-head">
  <head>
    <title>The Question</title>
  </head>
</h:define>

<h:define name="page-body">
  <body>To be or not to be?</body>
</h:define>

<h:define name="page-main">
  <html>
    <h:page-head />
    <h:page-body />
  </html>
</h:define>

<h:page-main />

Here we define three tags. And we execute one of them ( h:page-main ) at the end. That will output the following:

<html>
  <head>
    <title>The Question</title>
  </head>
  <body>To be or not to be?</body>
</html>

We can use attributes also:

<h:define name="upcase">
 <?= strtoupper($attr['str']) ?>
</h:define>

<h:upcase str="hello" />

Note that we just include PHP code where we need it.
By the way, we can work with the inner contents of tags:

<h:define name="repeat">
  <?php for ($i = 0; $i < $attr['count']; $i++): ?>
    <li><?= sprintf($inner, $i) ?></li>
  <?php endfor; ?>
</h:define>

<ul>
  <h:repeat count="3">
    Item %u
  </h:repeat>
</ul>

The result will look like this:

<ul>
  <li>Item 0</li>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

$inner is not just a string — it is XHTML object model, so we can work with it's different parts as well.

I hope you caught the idea now.

We can create a bunch of functions that will have one main goal — output something. And these functions are declared as tags (using PHP if needed).

Suppose we want to create layout for this design:

Let's do that as we wish to:

<h:include file="mytags.php" />

<h:define name="list-animals">
  <?php
  foreach ($animals as $a):
    if ($a['type'] == $attr['type']):
  ?>
     <h:animal name="<?= $a['name'] ?>" link="<?= $a['link'] ?>" />
  <?php
    endif;
  endforeach;
  ?>
 </h:define>

<h:tabulate selected="<?= $_REQUEST['tab_id'] ?>">
  <tab id="1" title="Dogs">
    <h:list-animals type="dog" />
  </tab>
  <tab id="2" title="Cats">
    <h:list-animals type="cat" />
  </tab>
  <tab id="3" title="Dinosaurs">
    Rest in peace...
  </tab>
</h:tabulate>

h:tabulate and h:animal is not shown here. But we could have them defined! Libraries of useful functions can be created and included with h:include tag :-) I have started a sample collection of helpful functions. It's included within Hoduli source code.

B O N U S

We can define macros (much like Lisp macros, not as C preprocessor #define).

Just add macro attribute to the definition and we have a tag that can be used to generate other tag's body.

<h:define macro name="inblock">
  <<?= $attr['tag'] ?>>
    <?= $inner ?>
  </<?= $attr['tag'] ?>>
</h:define>

<h:define name="quote">
  <h:inblock tag="q">
    <?= $inner ?>
  </h:inblock>
</h:define>

<h:define name="heavy">
  <h:inblock tag="strong">
    <?= $inner ?>
  </h:inblock>
</h:define>

Here h:inblock calls will be expanded, so that h:quote and h:heavy will become:

<h:define name="quote">
  <q>
    <?= $inner ?>
  </q>
</h:define>

<h:define name="heavy">
  <strong>
    <?= $inner ?>
  </strong>
</h:define>

The same methods can be used for abstracting other types of contents (e.g. CSS or PHP code itself). I really don't know all the posibilites yet. But I'm sure there are many interesting things that could be done here.

What do you think about that all?

The source code of Hoduli and Kostyli (library of tags) is available at http://code.google.com/p/hoduli/.

Implementation: PHP class with several methods. Parsing of XHTML is done by SimpleHtmlDom (included).
Note: this is just an early prototype yet.

]]>