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>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="lib/jquery.mobile/jquery.mobile-1.3.2.min.css" />
<script src="lib/jquery/jquery-1.8.3.min.js"></script>
<script src="lib/jquery.mobile/jquery.mobile-1.3.2.min.js"></script>
<script src="lib/metawidget/core/metawidget-core.min.js"></script>
<script src="lib/metawidget/jquery.mobile/metawidget-jquerymobile.min.js"></script>
<script type="text/javascript">
var person = {
name: 'Homer Simpson',
age: 36,
retired: true
};
$( document ).on( 'pageinit', '#page', function( event ) {
var page = $( event.target );
var mw = $( "#metawidget" );
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;
} );
processor.save( mw.data( 'metawidget' ) );
console.log( person );
}
</script>
</head>
<body>
<article id="page" data-role="page">
<section data-role="content">
<div id="metawidget" data-role="metawidget"></div>
</section>
<footer data-role="footer" data-position="fixed" data-tap-toggle="false" data-transition="none">
<div id="footer-navbar" data-role="navbar">
<ul>
<li><a data-icon="check" data-iconpos="top" onclick="save( this )">Save</a></li>
</ul>
</div>
</footer>
</article>
</body>
</html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="lib/jquery.mobile/jquery.mobile-1.3.2.min.css" />
<script src="lib/jquery/jquery-1.8.3.min.js"></script>
<script src="lib/jquery.mobile/jquery.mobile-1.3.2.min.js"></script>
<script src="lib/metawidget/core/metawidget-core.min.js"></script>
<script src="lib/metawidget/jquery.mobile/metawidget-jquerymobile.min.js"></script>
<script type="text/javascript">
var person = {
name: 'Homer Simpson',
age: 36,
retired: true
};
$( document ).on( 'pageinit', '#page', function( event ) {
var page = $( event.target );
var mw = $( "#metawidget" );
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;
} );
processor.save( mw.data( 'metawidget' ) );
console.log( person );
}
</script>
</head>
<body>
<article id="page" data-role="page">
<section data-role="content">
<div id="metawidget" data-role="metawidget"></div>
</section>
<footer data-role="footer" data-position="fixed" data-tap-toggle="false" data-transition="none">
<div id="footer-navbar" data-role="navbar">
<ul>
<li><a data-icon="check" data-iconpos="top" onclick="save( this )">Save</a></li>
</ul>
</div>
</footer>
</article>
</body>
</html>
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.
2 comments:
Can you generate a J2ME user interface? I will like to use this in building J2ME apps for my environment in Africa.
This is not currently implemented, but the Metawidget architecture supports it and I would be interested in doing it.
Could you tell me more about your project? Could you send a small example J2ME app to support@metawidget.org so I can see how the UI looks when built 'by hand'? Then I can see about automating it.
Post a Comment