Geekly Articles each Day
📜 ⬆️ ⬇️

JXT - Javascript XHTML Tags

image
Although JavaScript is a programming language with its own syntax, rules, and functions, today it is used "unconsciously" by most people who have no programming knowledge thanks to the distribution of powerful and user-friendly libraries. This leads to poorly written, slow and error-filled websites. On the other hand, in most cases, these libraries are used only to display advanced and interactive components that HTML cannot offer either itself or in return for any other logical action. So, if the goal is to enhance HTML, wouldn't it 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 interesting for us?


image

JXT is a Java framework framework (JavaScript framework) that allows you to use jQuery and Ext widgets (plug-ins / components) without writing even a single line of code, instead of which user tags are used directly in XHTML. These tags are "translated" by the framework and tacitly converted into JavaScript objects during the runtime, as soon as the page is loaded. They are completely unobtrusive, since they do not interfere at all with the page layout and are physically destroyed as soon as they are converted into Java script. Moreover, they pass validation of the W3C code, since 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 unspoken standard defined by modern Java Script libraries that provide a separate argument (“configuration” of the object) passed to the constructor to initialize the component, which is then translated (executed) to a given target element (usually in a div ). Thus, the syntax will be the same for the widgets of both libraries. The tag looks like this:
  1. < jxt: widget type = "libraryName" name = "widgetName" >
  2. < jxt: target >
  3. < div > </ div >
  4. </ jxt: target >
  5. </ jxt: widget >

Configuring Widgets


Widgets are configured as in Javascript, and switching from js code to JXT tags is actually very simple - all you have to learn is how to transform the JSON structure into nested <jxt:cfg> tags. <jxt:cfg> tag is a “key” (key) inside an object, it has a name, a value, and may contain infinite “subkeys”, just like in JSON, but instead of switching this object to a constructor, in JXT you just put <jxt: cfg> into <jxt: widget>:
  1. < jxt: widget type = "libraryName" name = "widgetName" >
  3. < jxt: cfg name = "param1" value = "value1" type = "string" > </ jxt: cfg >
  5. < jxt: cfg name = "param2" type = "object" >
  6. < jxt: cfg name = "prop1" value = "value1" type = "string" > </ jxt: cfg >
  7. < jxt: cfg name = "prop2" value = "value2" type = "string" > </ jxt: cfg >
  8. </ jxt: config >
  10. < jxt: target >
  11. < div > </ div >
  12. </ jxt: target >
  14. </ jxt: widget >

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 custom type (say: LibraryName.ui.form.ComboBox) .

Let's see how to transform 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:00 am",
  19. maxValue: "6:00 pm"
  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. }

JXT syntax:
  1. < jxt: cfg type = "string" name = "id" value = "myForm" > </ jxt: cfg >
  2. < jxt: cfg type = "string" name = "url" value = "submit.php" > </ jxt: cfg >
  3. < jxt: cfg type = "array" name = "items" >
  4. < jxt: cfg type = "object" >
  5. < jxt: cfg type = "string" name = "label" value = "name" > </ jxt: cfg >
  6. < jxt: cfg type = "boolean" name = "allowBlank" value = "false" > </ jxt: cfg >
  7. < jxt: cfg type = "string" name = "fieldLabel" value = "First name" > </ jxt: cfg >
  8. </ jxt: cfg >
  9. < jxt: cfg type = "object" >
  10. < jxt: cfg type = "string" name = "label" value = "last" > </ jxt: cfg >
  11. < jxt: cfg type = "boolean" name = "allowBlank" value = "false" > </ jxt: cfg >
  12. < jxt: cfg type = "string" name = "fieldLabel" value = "Last name" > </ jxt: cfg >
  13. </ jxt: cfg >
  14. < jxt: cfg type = "object" jsclass = "Ext.form.TimeField" >
  15. < jxt: cfg type = "string" name = "fieldLabel" value = "Time" > </ jxt: cfg >
  16. < jxt: cfg type = "string" name = "name" value = "time" > </ jxt: cfg >
  17. < jxt: cfg type = "string" name = "minValue" value = "8:00 am" > </ jxt: cfg >
  18. < jxt: cfg type = "string" name = "minValue" value = "6:00 pm" > </ jxt: cfg >
  19. </ jxt: cfg >
  20. </ jxt: cfg >
  21. < jxt: cfg type = "array" name = "buttons" >
  22. < jxt: cfg type = "object" >
  23. < jxt: cfg type = "string" name = "label" value = "save" > </ jxt: cfg >
  24. < jxt: cfg type = "function" name = "click" value = "alert ('save!')" > </ jxt: cfg >
  25. </ jxt: cfg >
  26. < jxt: cfg type = "object" >
  27. < jxt: cfg type = "string" name = "label" value = "reset" > </ jxt: cfg >
  28. < jxt: cfg type = "boolean" name = "allowBlank" value = "alert ('reset!')" > </ jxt: cfg >
  29. </ jxt: cfg >
  30. </ jxt: cfg >

The framework was created to use widgets with ease, but it is not limited to just the <jxt:widget> 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 of them, but their number will increase in subsequent releases. However, you can already use <jxt:if> to express conditions, <jxt:datetime> to print a formatted date, and <jxt:loop> to duplicate html nodes. The latter is simply wonderfully combined with such a widget as “carousel” for dynamic output of the Nth number of img tags (where N is the number of attribute “steps”). In fact, it even has a special record that allows you to specify the number of iterator cycles, here is an example:
  1. < jxt: loop steps = "10" >
  2. < img src = "img / demo_pic_ {loop: step} .jpg" alt = "pic {loop: step}" />
  3. </ jxt: loop >

Read more about JXT


JXT is a young project and we only have its first beta release, but I think it has great potential. I spend a lot of my free time thinking about new tools and improvements, and I still have a lot of ideas for the future. One of the significant additions that will be present in the final release is the possibility of separate configuration in an external xml file, so that the page will contain only <jxt:widget> declarations. If you are interested (as I hope), you can find out 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 .

Source: https://habr.com/ru/post/72503/

More articles:


All Articles