There are two steps to installing AndroidMetawidget within an Android application:

AndroidMetawidget is preconfigured with sensible defaults for Android. You can change this configuration programmatically or by creating a metawidget.xml file in res/raw and specifying it at the tag level:

<view class="org.metawidget.android.widget.AndroidMetawidget" config="@raw/metawidget"/>

AndroidMetawidget uses Android's standard res/values/styles.xml mechanism. Styles can be set either programmatically or passed inside metawidget.xml using the @ notation. For example:

<layout>
	<textViewLayoutDecorator xmlns="java:org.metawidget.android.widget.layout"
				config="TextViewLayoutDecoratorConfig">
		<style>
			<int>@org.metawidget.example.android.addressbook:style/section</int>
		</style>
	</textViewLayoutDecorator>
</layout>

AndroidMetawidget supports localization through the setBundle method. This method takes your R.string class, which is generated by Android from your res/values/strings.xml file. For example, if your strings.xml file was:

<resources>
	<string name="dob">Date of Birth<string>
</resources>

And your domain object had a property:

class Person {
	...
	public Date getDob() {
		return mDob;
	}
}

Then you can set Metawidget to use your R.string class either programmatically or using metawidget.xml:

<androidMetawidget>
	<bundle>
		<class>org.metawidget.example.android.addressbook.R$string</class>
	</bundle>
</androidMetawidget>

And at runtime Metawidget will translate the Person.getDob method into a property called dob, resolve the integer R.string.dob and use that to look up the localized text in strings.xml. For different locales, put the strings.xml file in adjacent res/values-xx folders - for example res/values-en.

By default, Android does not come with a binding mechanism to map View values to business object values. There are a number of third-party binding libraries, but many are either discontinued or rely on statically declared UIs. As a workaround, by default AndroidMetawidget supplies a SimpleBindingProcessor (see the section called “SimpleBindingProcessor”).

Alternatively, to map values manually, remove SimpleBindingProcessor and do:

metawidget.setValue( mPerson.getFirstname(), "firstname" );
mPerson.setFirstname( (String) metawidget.getValue( "firstname" ) );

For a complete working example, see Section 1.3.3, “Mobile Address Book”.

There are three steps to installing metawidget-jquerymobile.js within an HTML 5 hybrid application:

metawidget-jquerymobile.js is preconfigured with sensible defaults. You can change this configuration either at construction time:

$('#metawidget').metawidget( {
	layout: new metawidget.layout.SimpleLayout()
} );

Or by passing JQueryMobile options:

$('#metawidget').metawidget('option','layout',new metawidget.layout.SimpleLayout());