First of all, I would like to thanks Rich Tretola and O'Reilly, for the possibility to write on this blog and talking about my project (http://www.jxtproject.com), I'm very thankful for that! ...and I'm quite embarrassed, because this is my first article here.

Preface
Although JavaScript is a programming language, with its syntax, rules and functions, nowadays it is used "unconsciously" by a lot of people which don't have any programming background, due to the diffusion of powerful and user friendly js libraries. This may results in bad written, slow, and buggy web sites. Another issue is that, in most cases, these libraries are used only to display advanced and interactive component which HTML can't offer and not to implement any kind of logic flow. So, if the goal is to extend HTML capabilities, wouldn't be the best and simplest solution to have a new set of powerful tags?

Overview
So, what is JXT and why you may be interested to it?
JXT is a javascript framework which let you use jQuery and Ext widgets (plugins/components) without writing a single line of code, but instead by using “in place” XHTML custom tags. This tags are “translated” by the framework and converted behind the scenes into JavaScript objects at runtime, once the page has been loaded. They are completely unobtrusive, because they don’t interfere with page layout and are physically destroyed once converted into JavaScript code. Moreover they are validatable by W3C, since JXT makes use of a custom DTD (based on W3C XHTML transitional DTD) and these tags have their own namespace (“jxt:” prefix). The abstraction work behind JXT has been possible thanks to the implicit standard defined by modern JavaScript libraries which provide a single argument (a “configurator” object) passed to a constructor in order to initialize a component, which is then rendered into a given target element (typically a div). In this way, JXT syntax will be the same for both libraries widgets. A tag will looks like the following below:

 
<jxt:widget type="libraryName" name="widgetName">
    <jxt:target>
        <div></div>
    </jxt:target>
</jxt:widget>

Configuring widgets
Widgets are configured like in javascript and jump from js code to JXT tags is really very simple, all you have to learn is how to convert JSON structure to nested <jxt:cfg> tags. A <jxt:cfg> tag represents a "key" inside an object, it has a name, a value and can contains infinite "subkeys", exactly like in JSON and instead of passing this object to a constructor, in JXT you simply nest <jxt:cfg> inside <jxt:widget>:

 
<jxt:widget type="libraryName" name="widgetName">

    <jxt:cfg name="param1" value="value1" type="string"></jxt:cfg>

    <jxt:cfg name="param2" type="object">
        <jxt:cfg name="prop1" value="value1" type="string"></jxt:cfg>
        <jxt:cfg name="prop2" value="value2" type="string"></jxt:cfg>
    </jxt:config>

    <jxt:target>
        <div></div>
    </jxt:target>

</jxt:widget>

The interesting part of <jxt:cfg> tag is that you can declare (you must) the data type of this key (int, float, array, object, boolean…) even if it is a custom type (LibraryName.ui.form.ComboBox).

Let’s see how to convert a JSON structure like this:

 
{
   id: "myForm",
   url: "submit.php",
   items: [
     {
        label: "name",
        allowBlank: false,
        fieldLabel: "First name"
      },
     {
        label: "Last name",
        allowBlank: false,
        fieldLabel: "last"
      },
     new Ext.form.TimeField({
        fieldLabel: "Time",
        name: "time",
        minValue: "8:00am",
        maxValue: "6:00pm"
      })
   ],
   buttons: [
     {
        label: "save",
        click: function() {
           alert("save!");
         }
      },
     {
        label: "reset",
        click: function() {
           alert("reset!");
         }
      }
   ]
}

Into JXT syntax:

 
<jxt:cfg type="string" name="id" value="myForm"></jxt:cfg>
<jxt:cfg type="string" name="url" value="submit.php"></jxt:cfg>
<jxt:cfg type="array" name="items">
  <jxt:cfg type="object">
    <jxt:cfg type="string" name="label" value="name"></jxt:cfg>
    <jxt:cfg type="boolean" name="allowBlank" value="false"></jxt:cfg>
    <jxt:cfg type="string" name="fieldLabel" value="First name"></jxt:cfg>
  </jxt:cfg>
  <jxt:cfg type="object">
    <jxt:cfg type="string" name="label" value="last"></jxt:cfg>
    <jxt:cfg type="boolean" name="allowBlank" value="false"></jxt:cfg>
    <jxt:cfg type="string" name="fieldLabel" value="Last name"></jxt:cfg>
  </jxt:cfg>
  <jxt:cfg type="object" jsclass="Ext.form.TimeField">
    <jxt:cfg type="string" name="fieldLabel" value="Time"></jxt:cfg>
    <jxt:cfg type="string" name="name" value="time"></jxt:cfg>
    <jxt:cfg type="string" name="minValue" value="8:00am"></jxt:cfg>
    <jxt:cfg type="string" name="minValue" value="6:00pm"></jxt:cfg>
  </jxt:cfg>
</jxt:cfg>
<jxt:cfg type="array" name="buttons">
  <jxt:cfg type="object">
    <jxt:cfg type="string" name="label" value="save"></jxt:cfg>
    <jxt:cfg type="function" name="click" value="alert('save!')"></jxt:cfg>
  </jxt:cfg>
  <jxt:cfg type="object">
    <jxt:cfg type="string" name="label" value="reset"></jxt:cfg>
    <jxt:cfg type="boolean" name="allowBlank" value="alert('reset!')"></jxt:cfg>
  </jxt:cfg>
</jxt:cfg>

Not only widget
The framework was born to use widgets with ease, but is not limited to the <jxt:widget> tag and its subtags. JXT offers also its own tags and features, which can be combined together to obtain the desired result. At the moment these are very few, but they will increase in the next releases. You can however already use <jxt:if> for conditional display, <jxt:datetime> to print a formatted date and <jxt:loop> to duplicate html nodes. This last one is very cool combined with certain widget like carousel, in order to print dynamically N img tag (where N is the number of “steps” attribute). It has in fact a special notation which allow you to access loop’s iterator value, here is an example:

 
<jxt:loop steps="10">
     <img src="img/demo_pic_{loop:step}.jpg" alt="pic {loop:step}" />
 </jxt:loop>

More on JXT
JXT is a young project at its first beta release, but I think it has great potential. I’m spending a lot of my spare time thinking to new implementations and improvements and I have a lot of ideas for the future. One great addition which will be present in the final release will be the possibility to separate configuration in an external xml file, in this way the page will contains only <jxt:widget> declarations. If you are interested (as I hope), you can read more about it on: http://www.jxtproject.com

For questions and feedback I will be glad to reply here and on the forum: http://www.jxtproject.com/forum

Read more from Davide Zanotti.