I was asked why the following piece of Metawidget code returns an unusual result:
<!DOCTYPE html>
<html>
<head>
<script src="http://metawidget.org/js/3.5/metawidget-core.min.js"></script>
<script type="text/javascript">
var person = {
name: "Homer Simpson",
age: 40,
retired: false
};
</script>
</head>
<body>
<div id="metawidget"></div>
<script type="text/javascript">
var mw = new metawidget.Metawidget( document.getElementById( 'metawidget' ), {
inspector: new metawidget.inspector.CompositeInspector( [
new metawidget.inspector.PropertyTypeInspector(),
function( toInspect, type, names ) {
return {
properties: {
last_name: {
type:"object",
required:false,
properties: {
prefix: {
type:"string",
required:false
},
suffix: {
type:"number",
required:false
}
}
}
}
};
}
] )
} );
mw.toInspect = person;
mw.buildWidgets();
</script>
</body>
</html>
The developer was trying to add a custom Inspector to declare a new property last_name. This should be rendered along with his normal JSON object (which contains name, age and retired). But the result looks strange:
Let's explain what Metawidget is doing. Metawidget uses its Inspectors to retrieve metadata about which properties to render. Then it iterates over those properties and chooses appropriate widgets for them. For simple types, like string and number, Metawidget chooses native widgets like input type="text" and input type="number". But for complex types, such as object, it creates a nested Metawidget and recurses into it.
For this to work, the Inspectors have to play along. They cannot return the same metadata for the nested Metawidget as for the top-level Metawidget. If they do, we'll just recurse infinitely. This is what we're seeing. Actually you can see Metawidget helpfully caps the recursions so that the browser doesn't crash completely!
To fix this, our custom Inspector has to understand what it's being asked for and return appropriate metadata. It can use the names array to do this. A complete example:
<!DOCTYPE html>
<html>
<head>
<script src="http://metawidget.org/js/3.5/metawidget-core.min.js"></script>
<script type="text/javascript">
var person = {
name: "Homer Simpson",
age: 40,
retired: false
};
</script>
</head>
<body>
<div id="metawidget"></div>
<script type="text/javascript">
var mw = new metawidget.Metawidget( document.getElementById( 'metawidget' ), {
inspector: new metawidget.inspector.CompositeInspector( [
new metawidget.inspector.PropertyTypeInspector(),
function( toInspect, type, names ) {
if ( names === undefined ) {
return {
properties: {
last_name: {
type:"object",
required:false,
}
}
};
}
return {
type:"object",
required:false,
properties: {
prefix: {
type:"string",
required:false
},
suffix: {
type:"number",
required:false
}
}
}
}
] )
} );
mw.toInspect = person;
mw.buildWidgets();
</script>
</body>
</html>
This will correctly render:
This is the 'native' way of doing things. Another way of thinking of it is: the 'native' result from an Inspector cannot contain nested properties. Of course, for more complex use cases your Inspector will have to consider which names it's being asked for and act accordingly.
However Metawidget can make things a little easier. It comes with a JsonSchemaInspector which understands how to navigate JSON Schemas for nested properties. So you can simply do:
<!DOCTYPE html>
<html>
<head>
<script src="http://metawidget.org/js/3.5/metawidget-core.min.js"></script>
<script type="text/javascript">
var person = {
name: "Homer Simpson",
age: 40,
retired: false
};
</script>
</head>
<body>
<div id="metawidget"></div>
<script type="text/javascript">
var mw = new metawidget.Metawidget( document.getElementById( 'metawidget' ), {
inspector: new metawidget.inspector.CompositeInspector( [
new metawidget.inspector.PropertyTypeInspector(),
new metawidget.inspector.JsonSchemaInspector( {
properties: {
last_name: {
type:"object",
required:false,
properties: {
prefix: {
type:"string",
required:false
},
suffix: {
type:"number",
required:false
}
}
}
}
} )
] )
} );
mw.toInspect = person;
mw.buildWidgets();
</script>
</body>
</html>
Hope that helps!
Version 3.7 of Metawidget, the Metadata Driven UI generator is now available!
