JXT - Javascript XHTML tags framework for jQuery and Ext

[iDave]

Hi everyone!

I would like to introduce my project JXT (http://www.jxtproject.com).

JXT is a framework based on custom XHTML tags, which let you use jQuery and Ext widgets without writing a single line of javascript code...
and it doesn't require programming skills other than XHTML.

You can create an Ext component by using the following markup:




<jxt:widget type="ext" name="Ext.FormPanel">
<jxt:cfg name="labelWidth" type="int" value="75"></jxt:cfg>
<jxt:cfg name="id" type="string" value="extform"></jxt:cfg>
<jxt:cfg name="url" type="string" value="save-form.php"></jxt:cfg>
<jxt:cfg name="frame" type="boolean" value="true"></jxt:cfg>
<jxt:cfg name="title" type="string" value="Ext FormPanel"></jxt:cfg>
<jxt:cfg name="bodyStyle" type="string" value="padding:5px 5px 0"></jxt:cfg>
<jxt:cfg name="width" type="int" value="250"></jxt:cfg>
<jxt:cfg name="defaults" type="object" value="width: 150"></jxt:cfg>
<jxt:cfg name="defaultType" type="string" value="textfield"></jxt:cfg>
<jxt:cfg name="items" type="array">
<jxt:cfg type="object">
<jxt:cfg name="fieldLabel" type="string" value="First Name"></jxt:cfg>
<jxt:cfg name="name" type="string" value="first"></jxt:cfg>
<jxt:cfg name="allowBlank" type="boolean" value="false"></jxt:cfg>
</jxt:cfg>
<jxt:cfg type="object">
<jxt:cfg name="fieldLabel" type="string" value="Last Name"></jxt:cfg>
<jxt:cfg name="name" type="string" value="last"></jxt:cfg>
</jxt:cfg>
<jxt:cfg type="object">
<jxt:cfg name="fieldLabel" type="string" value="Company"></jxt:cfg>
<jxt:cfg name="name" type="string" value="company"></jxt:cfg>
</jxt:cfg>
<jxt:cfg type="object" value="fieldLabel: 'Email', name: 'email', vtype: 'email'"></jxt:cfg>
<jxt:cfg type="object" jsclass="Ext.form.TimeField">
<jxt:cfg name="fieldLabel" type="string" value="Time"></jxt:cfg>
<jxt:cfg name="name" type="string" value="time"></jxt:cfg>
<jxt:cfg name="minValue" type="string" value="8:00am"></jxt:cfg>
<jxt:cfg name="maxValue" type="string" value="6:00pm"></jxt:cfg>
</jxt:cfg>
</jxt:cfg>
<jxt:cfg name="buttons" type="array">
<jxt:cfg type="object">
<jxt:cfg name="handler" type="function" value="alert('click on save!')"></jxt:cfg>
<jxt:cfg name="text" type="string" value="Save"></jxt:cfg>
</jxt:cfg>
<jxt:cfg type="object">
<jxt:cfg name="text" type="string" value="Cancel"></jxt:cfg>
<jxt:cfg name="handler" type="function" value="Ext.getCmp('extform').getForm().reset()"></jxt:cfg>
</jxt:cfg>
</jxt:cfg>
<jxt:target>
<div style="float:left; margin-right: 60px"></div>
</jxt:target>
</jxt:widget>






There are a lot of things to say about JXT, if you are interested please go on here: http://www.jxtproject.com/discover-jxt.shtml

The project is really new and at its first beta, let me know your impressions.

Thanks

[jburnhams]

Can you explain how this is better/easier than javascript?

To be honest, it looks like you are writing javascript, but just using a much more verbose syntax. I found it very hard to read and as you're still writing javascript and still need the same knowledge of the ext framework I wouldn't say "it doesn't require programming skills other than XHTML".

For example, the below is straight javascript.
Ext.getCmp('extform').getForm().reset()And
<jxt:cfg type="object" value="fieldLabel: 'Email', name: 'email', vtype: 'email'></jxt:cfg> doesn't seem to have any advantage over
{fieldLabel:'Email', name: 'email', vtype: 'email'}

[iDave]

Can you explain how this is better/easier than javascript?

To be honest, it looks like you are writing javascript, but just using a much more verbose syntax. I found it very hard to read and as you're still writing javascript and still need the same knowledge of the ext framework I wouldn't say "it doesn't require programming skills other than XHTML".

For example, the below is straight javascript.
Ext.getCmp('extform').getForm().reset()


I have to admit that your observation is reasonable, yes, if you want to use callback and interact with widget you still have to write javascript code, but this is true only for that, the mere rendering doesn't require any script. It is more verbose (but much readable) but unfortunately, since Ext is a really powerful and complex OOP framework is hard to simplify procedures and avoid lot of text to type (for JQuery plugins this is more simple). Anyway there are several advantages in using JXT: you don't have to handle load event, you don't have to call rendering methods, by viewing the page you can immediately understand where each widget will be rendered and (in the final release) you will be able to separate widgets configurations in external xml files.




<jxt:cfg type="object" value="fieldLabel: 'Email', name: 'email', vtype: 'email'></jxt:cfg> doesn't seem to have any advantage over
{fieldLabel:'Email', name: 'email', vtype: 'email'}

The markup above could be repaced by nesting more cgf tags (inline JSON is an alternative).

...undoubtedly there is a lot of work to do (I declared it as a beta, but it should considered an alpha... I was too impatient to release it :P), but I think that this project has great potential.

[Animal]

I think there is mileage in semantic tag declarations to describe a UI.

But I think it needs to be a slightly higher level abstraction though which mirrors the Ext Component hierarchy more closely, and in which the config options are tag attributes.

[iDave]

... in which the config options are tag attributes.


That was the first approach I took, but I renounced because, while it's excellent for simple variables like boolean, numbers and string (ie: myparam="12") it's inadequate for complex object declaration, in this case you must to relay on JSON which, wrapped inside a tag attribute is really hard to read/format :s.

mmmh... maybe the only solution is to use jxt:widget tag as a mere "placeholder" and adopt JSON syntax for configuration inside a CDATA block in an external xml file... in this way the framework should create object for you asynchronously and the only js code to write is the "configurator" object written in the xml... i think I will work in that direction

[Animal]

I find embedding JSON OK.

I have declarations like



<asp:form url="/ext/AspCnsmntServlet.do" defaults="{allowBlank:false}" bodyStyle="padding:5px" border="false" labelWidth="120">


But you could use both approaches, and use attributes for atomic config values, and nested tags for object config values.

[mschwartz]

Animal recently posted functions (or a class?) that binds form elements to existing form mark up. Maybe he can post the link.

Where this kind of mark up would be superior to just writing it all out in javascript is particularly for forms.

I find one of the hardest things to do in Ext is form layout. Something trivial like putting a button next to a textfield in pure HTML is anything but trivial in Ext. But if you had a mark up language like:



<form action="whatever">
<label>Text Field</label> <Jxt:textfield ...> <Jxt:button...><br/>
...


People would be all over this like white on rice.

My $.02

[iDave]

...if you had a mark up language like:



<form action="whatever">
<label>Text Field</label> <Jxt:textfield ...> <Jxt:button...><br/>
...


People would be all over this like white on rice.

My $.02

The problem is that I don't want to convert each Ext component into a custom tag but
rather, to abstract widgets creation in order to support several libraries and lot of
different components by using an "unified" markup language... pretty ambitious :D