Lots of new features are added to the Android-Binding since the first post of this calculator tutorial, so I continue to write this to include those later features in it. Again, the tutorial source code would be available in the project homepage. Remember to get also the version v0.4a of Android-Binding library as well.

Since v0.4 of Android-Binding, we included the binding to Options Menu and also Context Menu, both are unobstrusively declared in their xml file.

To demo the options menu feature, we are going to make an ‘advanced’ mode of the calculator (which includes sin/cos/log etc). It should looks like:

We also keep our “standard” mode also, and we make toggling the advance and standard via Options Menu (i.e. hitting the “menu” button of the phone).

Layout

Layout of “standard” version is the same (as the last tutorial), and we add another layout called “advanced” which includes the extra four buttons. Please view the source code for detail.

Activity

This part wasn’t covered in last tutorial yet (my fault!). Since v0.4 of Android-Binding, you can easily sub-class from “BindingActivity” to slipstream the binding to view and to options menu process. Here’s how our code looks like:

public class Calculator extends BindingActivity {
	private static final String MODE = "com.gueei.tutorial.calculator.mode";
	private static final String MODEL = "com.gueei.tutorial.calculator.model";
	private Object ViewModel;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        if (getIntent().getBooleanExtra(MODE, false)){
        	AdvancedMode.set(true);
        }

        ViewModel = new CalculatorViewModel();

        // unwrap the view model if exists
        Bundle parcel_model = getIntent().getBundleExtra(MODEL);
        if (parcel_model!=null){
        	ViewModelParceler.restoreViewModel(parcel_model, ViewModel);
        }

        // Bind the Root View with the Calculator view model
        if (AdvancedMode.get())
        	setAndBindRootView(R.layout.advanced, ViewModel);
        else
        	setAndBindRootView(R.layout.main, ViewModel);

        // Bind the options menu with activity
        this.setAndBindOptionsMenu(R.menu.options, this);
    }

    public final BooleanObservable AdvancedMode = new BooleanObservable(false);

	public final Command ToggleMode = new Command(){
		@Override
		public void Invoke(View arg0, Object... arg1) {
			// Recreate the Activity
			Intent intent = new Intent(Calculator.this, Calculator.class);
			intent.putExtra(MODE, !AdvancedMode.get());

			// Also package the view model state to the future self
			intent.putExtra(MODEL, ViewModelParceler.parcelViewModel(ViewModel));

			Calculator.this.finish();
			Calculator.this.startActivity(intent);
		}
    };
}

Let’s break down the above codes. We are now making the Activity itself double up as the View Model for the options menu. So, the command for toggling of Advanced Mode is done in the Activity (ToggleMode). Since we need to change the Content View of the Activity, ideal way is to destroy the current instance of the Activity and create a fresh one, while setting the view to advanced one.

Before we destroy the current instance, we want to keep the View Model state (for instance, the number on screen). In Android-Binding, we have a static helper to help packaging Observables to bundle, and that is called “ViewModelParceler”. (N.B. It only package Observables and sub-classes types).

So, in the ToggleMode command, we pack the state, and start a new activity, and finish the current activity; while in the onCreate, we try to unpack the View Model State, and lastly, create and bind the view and options menu.

Options Menu

Syntax for binding options menu (and context menu) is very similar to layouts, in the above example, our options menu looks like:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:binding="http://www.gueei.com/android-binding/">
<item
android:id="@+id/options1"
binding:title="IF(AdvancedMode, 'switch to simple mode', 'to advanced mode')"
binding:onClick="ToggleMode"/>
</menu>

The Converter pattern is also available in Options Menu, which is very flexible indeed.

Advertisements