New Elements

Nitrogen 2.x includes great new elements, deployment methods, and improvements to old elements and actions:

Significantly improved support for jQuery Mobile, including mobile-specific elements, allowing you to make adding mobile versions of your application much easier.

The #api{} element allows you to expose a Javascript API that will trigger a postback when called. You can pass parameters to the function, and then pattern match on the parameters in Erlang. See the API demo.

The #upload{} element now fires an event when an upload has started, and includes the node() on which the upload is stored, allowing you to handle uploads in an application running on multiple Nitrogen servers. See the File Upload Demo. As of version 2.1.0, The #upload element now support multiple file uploads, progress bars, and even a drag and drop interface.

The #grid{} element provides a Nitrogen interface to the 960 Grid System.

The #template{} element now caches the parsed template, eliminating unnecessary disk hits.

The #restful_form{} element allows you to easily build RESTful forms, allowing for a simpler interface to build forms that will safely degrade if the client does not support Javascript.

The #wizard element allows you to easily build step-by-step multi-page wizards.

Existing elements, including #droppable{} , #sortblock{} , and #upload{} , now allow you to set delegates to go back to a module other than the current page module.

A new #update{} action allows you to wire conditional, client-side update commands, or to broadcast updates across a comet pool, if desired. This action is also used behind the scenes by APIs such as wf:update/2 .

The #event{} action now allows you to specify an optional keycode attribute on keydown, keyup, and keypressed events.

jQuery Selecters

Commands such as wf:update/2 and wf:wire/N now understand jQuery selectors as a way of targeting elements. For example, to apply a #fade{} action to multiple elements, you can do something like this: wf:wire("##myelementid > .image", #fade{}) to fade all elements tagged with the 'image' class underneath the Nitrogen element 'myelementid'. See the jQuery Paths Demo and read the Nitrogen Paths docs for more information.

Simplified Element Hierarchy