Step 37: Content Density

In the last step of our Walkthrough tutorial, we adjust the content density based on the user’s device. SAPUI5 contains different content densities allowing you to display larger controls for touch-enabled devices and a smaller, more compact design for devices that are operated by mouse. In our app, we will detect the device and adjust the density accordingly.

Preview

Figure 1: The content density is compact on desktop devices and cozy on touch-enabled devices

Coding

You can view and download all files in the Explored app in the Demo Kit under Walkthrough - Step 37.

webapp/Component.js

...
		init: function () …
		},
		getContentDensityClass : function() {
			if (!this._sContentDensityClass) {
				if (!sap.ui.Device.support.touch) {
					this._sContentDensityClass = "sapUiSizeCompact";
				} else {
					this._sContentDensityClass = "sapUiSizeCozy";
				}
			}
			return this._sContentDensityClass;
		}

	});
});

To prepare the content density feature we will also add a helper method getContentDensityClass. SAPUI5 controls can be displayed in multiple sizes, for example in a compact size that is optimized for desktop and non-touch devices, and in a cozy mode that is optimized for touch interaction. The controls look for a specific CSS class in the HTML structure of the application to adjust their size.

This helper method queries the sap.ui.Device API directly for touch support of the client and returns the CSS class sapUiSizeCompact if touch interaction is not supported and sapUiSizeCozy for all other cases. We will use it throughout the application coding to set the proper content density CSS class.

webapp/controller/App.controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function (Controller) {
	"use strict";

	return Controller.extend("sap.ui.demo.wt.controller.App", {

		onInit: function () {
			this.getView().addStyleClass(this.getOwnerComponent().getContentDensityClass());
		},
		onOpenDialog: function () {
			this.getOwnerComponent().helloDialog.open(this.getView());
		}
	});
});

We add a method onInit on the app controller that is called when the app view is instantiated. There we query the helper function that we defined on the app component to set the corresponding style class on the app view, All controls inside the app view will now automatically adjust either to the compact or cozy size as defined by the style.

webapp/controller/HelloDialog.js

sap.ui.define([
	"sap/ui/base/Object"
], function (Object) {
	"use strict";
	return Object.extend("sap.ui.demo.wt.controller.HelloDialog", {
		_getDialog: function () {
			// create dialog lazily
			if (!this._oDialog) {
				// create dialog via fragment factory
				this._oDialog = sap.ui.xmlfragment("sap.ui.demo.wt.view.HelloDialog", this);
			}
			return this._oDialog;
		},
		open: function (oView) {
			var oDialog = this._getDialog();
			// forward compact/cozy style into Dialog
			jQuery.sap.syncStyleClass(oView.getController().getOwnerComponent().getContentDensityClass(), oView, oDialog);

			// connect dialog to view (models, lifecycle)
			oView.addDependent(oDialog);

			// open dialog
			oDialog.open();
		},
		onCloseDialog: function () {
			this._getDialog().close();
		}
	});
});

The "Hello World" dialog is not part of the app view but opened in a special part of the DOM called "static area". The content density class defined on the app view is not known to the dialog so we sync the style class of the app with the dialog manually.

This was the last step, you have successfully completed the Walkthrough!