JXT - Javascript XHTML Tags

Although JavaScript is a programming language with its own syntax, rules, and functions, today it is used “unconsciously” by most people who do not have any programming knowledge due to the distribution of powerful and user-friendly libraries. This results in poorly written, slow, and buggy websites. On the other hand, in most cases, these libraries are used only to display advanced and interactive components that HTML is not able to offer either itself or in return for any other logical action. So, if the goal is to extend the power of HTML, would it not be the best and easiest solution to have a new set of powerful tags at your disposal?

So, what is JXT, and how can it be of interest to us?

JXT JavaScript is freymvork (JavaScript framework), which allows you to use jQuery and Ext widgets (plugins / components) without writing a single line of code, instead of being used directly in XHTML, everywhere where it is required, custom tags. These tags are "translated" by the framework and behind the scenes are converted to JavaScript objects during the runtime, as soon as the page is loaded. They are absolutely unobtrusive, since they do not interfere with the page layout at all and are physically destroyed as soon as they are converted to Java Script code. Moreover, they pass the W3C code validation test because JXT uses a special DTD (based on the W3C XHTML transitional DTD), and these tags have their own namespace (prefix "jxt:"). Separate work on JXT was made possible thanks to the unwritten standard defined by modern Java Script libraries, which provide a separate argument (" configuration "of the object) passed to the constructor to initialize the component, which is then translated (executed) into this target element (usually in div). Thus, the syntax will be the same for the widgets of both libraries.The tag is as follows:

2.   
3.     
4.   

Widget configuration

Widgets are configured as in Java Script, and switching from js code to JXT tags is really very simple - all you have to learn is how to convert a JSON structure to nested tags. the tag is a “key” inside the object, it has a name, a value and can contain infinite “subkeys”, just like in JSON, but instead of passing this object to the constructor, in JXT you simply put in :

2.  
3.   
4.  
5.   
6.     
7.     
8.   
9.  
10.   
11.     
12.   
13.  

An interesting detail of the JXT tag is that you can declare (you must) the data type of this key (int, float, array, object, boolean ...), even if it is a user type (say: LibraryName.ui.form.ComboBox) .

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

1. {
2.   id: "myForm",
3.   url: "submit.php",
4.   items: [
5.    {
6.     label: "name",
7.     allowBlank: false,
8.     fieldLabel: "First name"
9.    },
10.    {
11.     label: "Last name",
12.     allowBlank: false,
13.     fieldLabel: "last"
14.    },
15.    new Ext.form.TimeField({
16.     fieldLabel: "Time",
17.     name: "time",
18.     minValue: "8:00am",
19.     maxValue: "6:00pm"
20.    })
21.   ],
22.   buttons: [
23.    {
24.     label: "save",
25.     click: function() {
26.       alert("save!");
27.      }
28.    },
29.    {
30.     label: "reset",
31.     click: function() {
32.       alert("reset!");
33.      }
34.    }
35.   ]
36. }

in jxt syntax:

4.  
5.   
6.   
7.   
8.  
9.  
10.   
11.   
12.   
13.  
14.  
15.   
16.   
17.   
18.   
19.  
22.  
23.   
24.   
25.  
26.  
27.   
28.   
29.  

The framework was created in order to easily use widgets, but it is not limited only to the tag and its subtags. JXT also offers its own tags and properties that can be combined with each other to achieve the desired result. At the moment, there are not many, but their number will increase in future releases. However, you can already use it to express conditions, to print a formatted date, and to duplicate html nodes. The latter is just wonderful combined with a widget such as “carousel” for dynamically displaying the Nth number of img tags (where N is the number of attribute “steps”). In fact, it even has a special entry that allows you to specify the number of iterator cycles , here is an example:

2.   

Learn more about JXT

JXT is a young project and we have only its first beta release, but I think that it has great potential. I spend a lot of my free time thinking about new tools and improvements, and I still have many ideas for the future. One of the significant additions that will be present in the final release will be the possibility of separate configuration in an external xml-file, due to which the page will contain only declarations. If you are interested (as I hope), you can learn more about JXT here: http://www.jxtproject.com

For questions and feedback, I will be happy to answer here and on the forum: http://www.jxtproject.com / forum

Note:

A / * This source code was highlighted with Source Code Highlighter .