Layouts

The traditional way of using templates is: First, you jump into your code, initialize vars, and then, execute a template that includes some sort of pseudo-language to insert those vars inside markup.
Let's start with HTML.HTML is a language that, by reading its own and related (css,etc) specs, it's composed by tags that are meant to stylize what's inside them.Only a bunch of those tags have some sort of notion of what it's outside them, so they are part of a bigger structure: &lt:td>, inputs in a <form> , <li> etc.
But websites are not made of a bunch of independents, stacked <div>'s .
There are menus, sidebars, headers, footers, and quite a few different ui elements, each one of those composed by a few divs, and each one of those divs has a semantic role , in terms of that ui element.
Divs are to UI elements what assembler is to C.We're creating user interfaces using the most simple elements possible.There are no intermediate abstractions.We (struggle to) create a menu for our website, by combining divs and css.But that menu has only existence once it's rendered, and the user interprets those coloured divs or uls, as a "menu".
Nowhere in our code (except comments), has assigned that role to that bunch of markup.Once you start creating the user interface, you directly jump in the HTML and CSS madness.

So, it's not strange that Javascript has taken the role of creating the user interface.Libraries / frameworks like The Dojo Toolkit do a great work leveraging the concepts a programmer has to use to create user interfaces.
I think that's a big slap in the face to HTML.Sorry, HTML5, you're so great at doing things Flash was doing a decade ago, and still, fail miserably at giving any better support for creating serious UIs.

So, HTML has basically been reduced to the <div> tag, that you can convert to anything, using CSS (then, some folks still try to give "semantic" meaning to HTML).And, on top of that, use javascript to do the real rendering.
To see things in perspective: it's like we were writing components in the old Visual Studio 4, instantiating objects, but also, editing the .res files by hand.We're creating user intefaces programatically (javascript), and fighting with divs, css and browser incompatibilities.

So, after all that, is there a way to describe an user interface, in a more abstract way, and without resorting to javascript-based UI construction (so we keep javascript's small resources for our own purposes instead sustituying the browser rendering engine?)

What about this:

   [_MENU]
        [_MENUGROUP]
                [_TITLE]Main Navigation[/TITLE]
                [_OPTIONS]
                          [_OPTION][_LABEL]Home[/LABEL][_URL]http://...[/URL][/OPTION]
                          [_OPTION][_LABEL]...[/LABEL][_URL]http://...[/URL][/OPTION]
                          ...
                 [/OPTIONS]
        [/MENUGROUP]
        [_MENUGROUP]
                 [_TITLE]Support[/TITLE]
                 ....
   [/MENU]                                                  

Again, just by reading the above code, you'd know what's supposed to do.If i had written all that in its <div>, <ul>, <a>, etc equivalents, with all their css classes, attributes and so, you'd still be looking at the code trying to figure out what's its purpose. And, again, i've said nothing about how this code should be rendered.Is it a navigation bar?Is it some sort of tabbed widget? That doesnt matter; again, we're using abstractions we all know, like "Menu", and leaving out implementation details.That will be solved at a lower level. I've attempted to write template engines (like this one) to support this kind of structures, and, although they're not perfect, they did the job.But now, i think i've found the right way to do it...And hope to post some code soon! Stay connected!

Describing a web page (Describing vs Coding II)

The most common concept in web development...is a web page.
Is possible to describe a web page?
A simple try: lets try to describe a web page where you can see info of a certain artist, along with artwork he uploaded to our site:




<?php
       $webpages["viewGallery"]=array(
             
             "PERMISSIONS"=>array("ANONYMOUS"),
             "RENDERER"   =>"HTML",
             "HTML"       =>array(
                     "HEADER" => "default_header.html",
                     "FOOTER" => "default_footer.html",
                     "RESOURCES"=>array(
                                "CSS"     =>array("viewGallery.css"),
                                "SCRIPTS" =>array("viewGallery.js")
                               )
             ),             
             "PARAMS"=>array(
                              "id"=>array(
                                           "MODEL"    =>"Artist",
                                           "FIELD"    =>"artist_id"
                                           "REQUIRED" =>true,
                                           "SOURCE"   =>"GET"
                                          )
                             ),
             "ROLE"  =>"VIEW",
             "MODEL" =>"Artist",
             "VIEWS"=>array(
                            "ROLE"    =>"COMPOSITEVIEW",
                            "LAYOUT"  =>"STACK",
                            "SUBVIEWS"=>array(
                                array(
                                      "ROLE"    =>"VIEW",
                                      "OBJECT"  =>"Artist",
                                      "VIEW"    =>"Bio"
                                      "PARAMS"  =>array("artist_id"=>"id")
                                     ),
                                 array(
                                       "ROLE"   =>"LIST",
                                       "OBJECT" =>"Artwork",
                                       "VIEW"   =>"artworkList",
                                       "PARAMS" =>array("artist_id"=>"id")
                                     )
                            )
                          ),
       "CACHE"=>array(
                             "TYPE"            =>"TIMED",
                             "INVALIDATE_AFTER"=>30
                      )
        );
   

This array may look complex, but i invite you to read it.Again, bear in mind that this is just a "sketch" of what i want my page to be.It's not related to any particular framework.It just tries to express concepts.

But, what i consider interesting, is that many things that usually are coded, here are described.
Most pages will have a header, and a footer.Many, will require permissions.Lots will use parameters, and will have to sanitize them.Will include external resources. Will include one or some other pages.Other things that may include..headers (encodings,etc), tags...May require a certain "state" to be set.May set a "state".. Things that are easily described, but that usually, are just scattered around in code (if not forgotten).

When you are writing the above description, you're focusing in what you need to create the page.Not in how you'll create it.This is key.
And, as there isn't any kind of formal structure, you can add whatever keys/values that may fit your needings.

If somebody has to maintain my code, and reads the description array, he'll have lots of information that will help him to understand the actual code.Of course, as you may begin to notice, most of that code, could / should interpret that array, or will be generated from it.

And,if someday i want to switch from one framework, or language, even programming paradigm, having lots of information about my system as *data*, instead written in code, will ease the transition.

And this is the main concept; i don't know if there are frameworks using similar ideas, but, that's already a contradiction;my idea is: freely describe your system as data, without any dependency , syntax o requirements a certain framework may impose.
I've written an ORM that i (later) found to be pretty similar to Django for python.But, the fact that model objects definitions are arrays without any dependency on that ORM, is what makes both completely different in philosophy, and it's the philosophy (describe your system, don't just code it) what i consider important.

The challenge is to find the right way to describe a web page may have, from models to db-mapping, views, pages,permissions, in a way that it's, at the same time, intuitive, extensive (covers as much of the functionality as possible), inter-related (so form definitions rely on model definitions), and external dependency-free.