Sunday, December 8, 2013

Metadata Driven User Interface: Metawidget v3.7

Version 3.7 of Metawidget, the Metadata Driven UI generator is now available!

This release was focused on:
As always, the best place to start is the Reference Documentation:

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

Saturday, December 7, 2013

JQuery Mobile UI Generator

The next release of Metawidget (3.7) adds support for JQuery Mobile (JQM). This allows you to easily create dynamic User Interfaces for JQM applications. It supports the full Metawidget pipeline of pluggable Inspectors, WidgetBuilders, Layouts and more - so you can scale from simple UIs to complex, enterprise apps:

Here's a simple (but complete) example. It creates a JavaScript object, renders a UI, and saves it again (the result is printed in the console):

<!DOCTYPE html>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
      <link rel="stylesheet" href="lib/" />
      <script src="lib/jquery/jquery-1.8.3.min.js"></script>
      <script src="lib/"></script>
      <script src="lib/metawidget/core/metawidget-core.min.js"></script>
      <script src="lib/metawidget/"></script>
      <script type="text/javascript">

         var person = {
            name: 'Homer Simpson',
            age: 36,
            retired: true

         $( document ).on( 'pageinit', '#page', function( event ) {
            var page = $( );
            var mw = $( "#metawidget" );
            mw.metawidget( "buildWidgets", person );

         } );

         save = function( event ) {

            var page = $( event ).parents( 'article' );
            var mw = page.find( '#metawidget' );

            var processor = mw.metawidget( "getWidgetProcessor", function( widgetProcessor ) {
               return widgetProcessor instanceof metawidget.widgetprocessor.SimpleBindingProcessor;
            } );
   'metawidget' ) );

            console.log( person );
      <article id="page" data-role="page">
         <section data-role="content">
            <div id="metawidget" data-role="metawidget"></div>
         <footer data-role="footer" data-position="fixed" data-tap-toggle="false" data-transition="none">
            <div id="footer-navbar" data-role="navbar">
                  <li><a data-icon="check" data-iconpos="top" onclick="save( this )">Save</a></li>

Of course Metawidget can take this much, much further. To see how, the best place to start is the JavaScript tutorial. There's also a complete Address Book sample application included in the examples pack.