XAJA Custom Controls

XAJA comes with built-in support of HTML + JavaScript custom controls. Controls are developed (and stored) as fragments of HTML code. Thanks to couple of small tricks, you can create just simple templates as well as very complex components with rich interactivity. Once you have referrenced XAJA JavaScript framework, you can use custom controls support.

You can reuse same HTML fragments on multiple places of your UI. Just remember one new html attribute XJ-CONTROL:




Under the hood, the HTML fragment of control is loaded from server and translated to pure JavaScript function:
(this generated script is possible to debug)

This generated function is usually called with one parameter [root]. It is the top DOM element of control instance, in our case DIV element. Elements defined in custom control code are added as children into passed root. Usually this is not enough to create useful components. Good news - you can add as much interaction as you wish to your controls. And no magic is required, just a good old JavaScript and couple of rules.

Your can simply define SCRIPT tag inside of your control and put interaction scripts inside. Mark element by attribute XJ-NAME to access it directly as a private field:




Functions added to "root" instance becomes to public methods of control. These methods could, inter alia, act as setters, connected to HTML attributes:




And, using star as a first symbol in event hadnling expression, events handling inside of control is easy:




Also building contianer controls is easy, using tag <XJ-CONTENT /> as a place holder.





For buildng of more complex controls you might find useful Control Templates