Saturday, November 02, 2013

More composable elements for single page development: witerate and dField

witerate,  is a new primitive that permits to iterate the presentation of data and/or input fields and widgets within an web page that does not change. The placeholders are created with dField.  Both are widget modifiers: The latter gets a widget and create a placeholder in the page that is updated via ajax. The content of the update is the rendering of the widget at each iteration. The former gets a widget which contains dField elements and permit the iteration. Whenever a link or a form within the witerate widget is activated, the result is the placeholders filled with the new  html content.  This content can be data, a input field, a link or a widget. No navigation happens.

This permits even faster updates than autoRefresh.  since the latter refresh the whole widget and it does not permits modifications of the layout at runtime. When edTemplate or template is used on top of witerate, the result is editable at runtime, and the span placeholders generated, that are updated via ajax can be relocated within the layout of the template.

Additionally, contrary to some javascript frameworks, the pages generated with this mechanism are searchable by web crawlers.

This example below, taken from the runtime templates example, shows how template, witerate and dField work together. The example iterates the presentation of a list of results fby displaying four of them each time. The list can be navigated forward and backward. (see the example  running and the full source code here).


These are two pages of the example with the templates beind edited at runtime. The first present results and the second is an input form managed the same way. Since the pages are not refreshed, this permits very fast input and presentation of results.


The full post explaining everything is here:

http://mflowdemo.herokuapp.com/noscript/wiki/singlepage.html






See the page and the full source code here

No comments: