Sunday, November 2, 2014

Domain Driven Forms: Metawidget 4.0

Version 4.0 of Metawidget, the library for domain driven forms is now available!

This release was focused on:
  • Web Components support
  • clearWidgets support (JavaScript version)
  • JsonSchemaTypeMappingProcessorConfig
  • Improved Node.js support
  • Boolean radio buttons (JavaScript version)
  • Minor refactoring
  • Bug fixes, documentation and unit tests
As always, the best place to start is the Reference Documentation:

http://metawidget.org/doc/reference/en/pdf/metawidget.pdf

Your continued feedback is invaluable to us. Please download it and let us know what you think.

Breaking Changes

We've taken advantage of the major version number bump to make some minor breaking changes for the sake of clarity and consistency. Specifically:
  • For metawidget.js, addInspectionResultProcessors has been renamed to appendInspectionResultProcessors
  • Similarly for metawidget.js, addWidgetProcessors has been renamed to appendWidgetProcessors
  • XmlUtils.elementToJsonSchema has been renamed to XmlUtils.inspectionResultToJsonSchema
  • For SwtMetawidget, setInspectionPath has been renamed to setPath
Posted by Richard at 9:03 AM 2 comments
Labels:

Saturday, November 1, 2014

Metawidget meets Web Components

The next release of Metawidget (v4.0) introduces Web Components!

Web Components are an exciting new HTML standard that promise to bring much of the UI goodness of frameworks like AngularJS to HTML without any additional libraries. As usual with emerging technologies, not all browsers fully support Web Components, but there are fantastic 'stop gap' libraries such as Polymer that can get you most of the way there today.

With Web Components, you can use Metawidget in fewer lines of code than ever before! Here's a complete example:

<!DOCTYPE HTML>
<html>
   <head>
      <script src="metawidget-core.min.js"></script>
      <style>
         #metawidget {
            border: 1px solid #cccccc;
            width: 250px;
            border-radius: 10px;
            padding: 10px;
            margin: 50px auto;
            display: block;
         }
      </style>
      <script>
         var person = {
            firstname: 'Homer',
            surname: 'Simpson',
            age: 36,
            save: function() {
               document.getElementById( 'metawidget' ).save();
                console.log( person );
            }
         }
      </script>
   </head>
   <body>
      <x-metawidget id="metawidget" path="person"></x-metawidget>
   </body>
</html>

Note the new x-metawidget tag. This is registered automatically just by including metawidget-core.min.js. It's available to your code just like any other HTML tag. It has custom methods such as save to make it easy to bind data back from the Metawidget, and automatically watches attributes such as path to rebuild the Metawidget.

Try it today in Chrome:

We've also ported the existing Address Book sample application to Web Components to provide a more meaty example:

Download it and give it a try! And welcome to the future :)

Posted by Richard at 8:58 AM 0 comments
Labels:
Subscribe to: Posts (Atom)