Comments on: Declarative Syntax for Widgets

By: uize

uize — Tue, 27 May 2008 08:45:01 +0000

But if I use my text editor to replace leading spaces with nbsp entities, you get something pretty…

$page_slideShow = {
   widgetClass:’Uize.Widget.SlideShow’,
   slides:slidesPhotos,
   children:{
      slideImage:{
         widgetClass:’Uize.Widget.Swap.Image’,
         width:350,
         height:250,
         built:false
      },
      slideRating:{
         widgetClass:’Uize.Widget.Bar’,
         orientation:’horizontal’,
         minValue:0,
         maxValue:10
      }
   }
};

By: uize

uize — Tue, 27 May 2008 08:43:24 +0000

OK, not having indentation officially sucks!

By: uize

uize — Tue, 27 May 2008 08:40:27 +0000

Oh, and here’s an example page that uses the declarative syntax supported by the Uize.Widget.Page base class of the UIZE Framework…

http://uize.com/examples/slideshow-with-dissolve.html

The syntax used in this example page is as follows…

$page_slideShow = { widgetClass:'Uize.Widget.SlideShow', slides:slidesPhotos, children:{ slideImage:{ widgetClass:'Uize.Widget.Swap.Image', width:350, height:250, built:false }, slideRating:{ widgetClass:'Uize.Widget.Bar', orientation:'horizontal', minValue:0, maxValue:10 } } };

JS modules for the widgets are loaded dynamically by the Uize.module method. A widget tree is defined in this declaration, looking as follows…

page
page.children.slideShow
page.children.slideShow.children.slideImage
page.children.slideShow.children.slideRating

Of course, the slide show widget also add its own child widgets for the navigation buttons.

By: uize

uize — Tue, 27 May 2008 05:52:42 +0000

The UIZE Framework supports declarative syntax for widgets using “passive” JSON objects inside script tags. Widgets declared in this way are adopted by the page widget (the main controller for the page). Any arbitrary structure of widgets can be declared in this way. What’s more, multiple declarations are “stitched” together into a single tree, so declarations can be flexibly split apart, so that the data governing the widgets can come from various server generated components. You can use the “children” propery or not. Furthermore, UIZE allows merely data declaration for widgets that are created in the page widget construction code, so the declarative data is “scooped” out of the page and consumed by the corresponding widgets. UIZE avoids using non-standard attributes in the markup for data declaration. For one thing, UIZE believes in the goal of validation of documents. Additionally,
attributes strings are rather limiting on the kind of data structure that ca n be specified for widgets. Try declaring a product grid widget’s data records in HTML attributes! Good luck with that ;-)

http://www.uize.com

By: Malde

Malde — Mon, 26 May 2008 19:48:32 +0000

This definitely looks like a step in the right direction.
Funny, I was just trying to wrap my head around the perfect syntax for declarative declaration of widgets using Joose and jQuery.

I’m not totally there yet. This is my work in progress using an abstract class for widgets and a custom meta class that defines the special class builder “events”:
Class("Button", { isa: Widget,


    has: {

        message: {

            init: "hello world"

        }

    },

events: { click: function () { alert(this.message) }, dblclick: function () { alert("please only click once :)") } } })