MAF Tree View

The MAF Tree View component provides a UI representation of a hierarchical list. It can show list items, which can in turn contain child-node list items. MAF Tree View has two modes: a browsing mode, and an editing mode. MAF Tree View supports skinnability via the MAF skinning engine.

Dependencies and Project Setup

The MAF Tree View control is a complex reusable control, which means that it is built on top of simple controls, such as MAFActionBar and MAFListView. The Tree Viewer control depends on the MAFUIControls library and the MAFLogger.

These MAF libraries are required:

com.sap.mobile.maf.ui.android/MAFUIComponents
com.sap.mobile.maf.tools.android/MAFLogger

Presenting a Tree View

MAF Tree View is an extension of a simple RelativeLayout. This layout contains the MAFActionBar and a ListView to show the hierarchical list entries, and a footer, which is visible only in editing mode. You can show this layout in an activity in this way:

MAFTreeView tView = new MAFTreeView(this, root, inEditMode);
aLayout.addView(tView);

You can also initialize the Tree View from layout XML:

<com.sap.maf.uicontrols.view.MAFTreeView xmlns:x="http://schemas.sap.com/maf/2011/ux"
        android:id="@+id/treeview"
        android:layout_width="match_parent"
    	android:layout_height="match_parent"
>

Adding and Deleting Node Items

MAF Tree View nodes are represented with the MAFTreeNode interface, which is located in the com.sap.maf.uicontrols.data package. MAF provides a default implementation for the MAFTreeNode in the MAFTreeNodeImpl class in the same package. Use the default implementation both for node elements containing child elements, and for leaf elements that have no child elements.

To add an element to the Tree View:

Use one of these constructors to initialize the Tree View with a root node:

public MAFTreeView(Context context, MAFTreeNode root)
public MAFTreeView(Context context, MAFTreeNode root, boolean inEditMode)
public MAFTreeView(Context context, MAFTreeNode root, String flavor, boolean inEditMode)

Use the public void addNewItem(MAFTreeNode newChild) API to add node items. If the new child item contains a reference to its parent, it is added to the parent; if not, it is added as a root element.

To remove an element from the Tree View, use the public void removeItem(MAFTreeNode node) API.

Adding Actions in Editing Mode

In editing mode, you can select leaf items and perform different actions on the selected items. To switch to editing mode, tap the Edit button on the UI. To set the default to editing mode, set it in the proper constructor. To check whether the Tree View is in editing mode, call the public boolean inEditMode() API, which returns the state of the Tree View.

To perform actions on the selected items, use the public void addTreeViewActionItem(MAFActionBarItem action) API. Because the footer is an extension of MAFActionBar, the API waits for MAFActionBarItem instances, where you can implement the logic in the public void performAction function.

This example shows how to add actions to the Tree View footer:

MAFActionBarItem hello_action = new MAFActionBarItem(1, R.drawable.hello,
				R.string.Hello_Action) {

			@Override
			public void performAction() {
				List<MAFTreeNode> sel_nodes = tView.getSelectedNodes();
				…
			}
		};
tView.addTreeViewActionItem(hello_action);

Skinning the MAF Tree View

Tree View is built from basic skinnable components; therefore, you can skin them via the basic components.

Use the ListView target type attributes to skin the node element.
Use the CheckBox target type attributes to skin the check box in edit mode.
Use the ActionBar target type attributes to skin the header and footer in edit mode.