Tuesday, January 1, 2013

Metawidget meets JQuery UI and AngularJS

The next release of Metawidget will be significant enough to justify a major version number bump (to 3.0). I'm excited to announce it will introduce a whole new platform to the product!

Metawidget already supports desktop (Swing, SWT), mobile (Android) and server-side Web technologies (GWT, JSF, JSP, Spring, Struts, Vaadin). But for the first time, version 3.0 will support fully client-side Web Metawidgets, with initial support for either pure JavaScript, JQuery UI and/or AngularJS.

Each JavaScript implementation will support the same five stage pipeline as the existing Metawidgets. This architecture is the result of years of developer interviews, case studies and adoption studies and has been well received. It has been adopted by companies such as Telefonica and Red Hat. It was also recently nominated for Australasian PhD of the Year.

Download The Example

For those interested in trying it out, your thoughts and feedback would be most appreciated! To get you started, I've packaged up a complete AngularJS Address Book, including end-to-end tests:

To download the example application, download the examples package for Metawidget 3.0 or above. The example is under examples/js/angular/addressbook. Run it the same way you ran the AngularJS tutorial (e.g. NodeJS, Tomcat, etc).

Welcome New Communities!

For those new to Metawidget, it's a smart User Interface widget that populates itself, either statically or at runtime, with UI components to match the properties of your business objects. Metawidget does this without introducing new technologies. It inspects your existing back-end architecture, and creates widgets native to your existing front-end framework.

For example, much of the application above is built automatically by the following HTML:

<metawidget ng-model="current" read-only="readOnly" config="metawidgetConfig.form">
   ...
   <facet name="footer">
      <metawidget ng-model="crudActions" config="metawidgetConfig.buttons"></metawidget>
   </facet>
</metawidget>

Metawidget inspects the given ng-model for JSON properties and other metadata, and constructs the User Interface dynamically through a highly pluggable process.

For a complete step-by-step guide, see the tutorial here.

Look forward to hearing what you think!

9 comments:

Nisar said...

Excitedly looking forward for 3.0...
I tried the sample application on Ubuntu/Tomcat7/FF, blazingly loaded in 877ms.... app might need little tunning for add/edit modal to set to the screen size as it save button was not visible on my 1366x768 screen... rest all was good...

Nisar said...

Request... is there any possibility to have a forge script (addressbook.fsh) for this application... regards.

asm0dey said...

Will you migrate Metawidget for GWT to pure JS, without server-side?

asm0dey said...

Have you plans to migrate Metawidget for GWT to pure JS, without server side invoking?

Richard said...

Nisar: Thanks for the feedback, and glad it is working for you. I will try on lower screen resolutions. Also, sorry, this app was not generated using Forge.

asm0dey: I'm not sure I understand your question? Yes, Metawidget 3.0 will be a pure JS version of Metawidget, without any server-side invoking. However it is a port of the *general* architecture of Metawidget, not GwtMetawidget specifically. Is there something special about GwtMetawidget you wanted porting?

asm0dey said...

So do I understand correctly - now all web netawidgets are really in JS?
If so - how we can customize their properties?

Richard said...

asm0dey,

Apologies for the confusion.

The 'spirit' of Metawidget is that duplication of definitions between UIs and business logic is a common problem across many platforms. To be truly useful to developers, we must work with *your* choice of architecture, not dictate it.

We try to target as many different environments as possible. Therefore SwingMetawidget and SwtMetawidget are not going away. Nor are SpringMetawidget or GwtMetawidget. These are all legitimate technology choices, and it is not Metawidget's job to dictate your architecture.

All we're doing is adding *new* supported platforms. Specifically pure JS platforms for some of the newer, emerging architectures.

So no, not all Web Metawidgets are in JS. StrutsMetawidget, VaadinMetawidget etc. are still as they were. But the new Metawidgets we are adding - pure JS, JQuery UI and AngularJS - will be pure client-side.

You can customize their properties using pluggable Inspectors, just as you could with the existing Metawidgets. There will be an Inspector for JSON objects, and for REST services, and you can easily add your own.

Please take a look at the sample application. It includes Inspectors for JSON and for some custom metadata.

asm0dey said...

Oh, now i understand. But if it's possible to implement pure JS metawidget - maybe it's possible to make GWT metawidget to work on client side only by utilizing JS metawidget and JSNI?

Richard said...

asm0dey: the existing Metawidget distribution already includes an example of a pure client-side GWT Metawidget? Please take a look at http://metawidget.org/doc/reference/en/html/ch01s03.html#section-introduction-part3-gwt-clientside