Custom Controller in SAPUI5: Step 2

[frank_xie]

In the previous blog, we have done half the work on the custom side navigation. In this blog, we focus on the render class to see how to render a panel in the browser and how to control its position.

In the custom controller, there is a mandatory method we have to implement:

		renderer: function (oRm, oSideNavigation) {

			SideMenuRender.render(oRm, oSideNavigation);

		},

For the SideMenuRender.js, I refer to SideNaviagtionRender.js from the OpenUI5 Source code. Then modify its code to fulfill the specific requirement.

Firstly, we need to be familiar with some common methods:

rm.openStart('div', control);

rm.close('div');​

 

What it means, you can understand it by seeing the below picture:

It's used to create the HTML element. You can see the <div in the element.

		rm.style("background", "#fff");



		rm.attr('tabindex', '-1');

		rm.class('sapTntSideNavigationFlexible');

The three method is vary simple. "rm.style" define specific CSS property; "rm.attr" define attribute for HTML element; "rm.class" define CSS class.

rm.renderControl(image);

It's used to render nested element. Just like in the side menu element, I need a image element in it.

There is a example code：

/*...*/

/**

	 * Renders the HTML for the given control, using the provided {@link sap.ui.core.RenderManager}.

	 *

	 * @param {sap.ui.core.RenderManager} rm the RenderManager that can be used for writing to the render output buffer

	 * @param {sap.tnt.SideNavigation} control an object representation of the control that should be rendered

	 */

	SideMenu.render = function (rm, control) {

		this.startSideNavigation(rm, control);



		this.renderItem(rm, control);



		//this.renderFixedItem(rm, control);



		//this.renderFooter(rm, control);



		if(this.hasItemPanel){

			this.renderPanel(rm, control);

		}



		this.endSideNavigation(rm, control);

	};

/*...*/	

/*...*/	

SideMenu.renderFixedItem = function (rm, control) {

		var fixedItemAggregation = control.getAggregation('fixedItem');



		if (fixedItemAggregation === null) {

			return;

		}



		if (fixedItemAggregation.getExpanded() === false) {

			fixedItemAggregation.setExpanded(false);

		}



		rm.openStart('div');

		rm.attr('role', 'separator');

		rm.attr('aria-roledescription', oRB.getText("SIDENAVIGATION_ROLE_DESCRIPTION_SEPARATOR"));

		rm.attr('aria-orientation', 'horizontal');

		rm.class('sapTntSideNavigationSeparator');

		rm.openEnd();

		rm.close('div');



		rm.openStart('div');

		rm.class('sapTntSideNavigationFixed');

		rm.openEnd();



		rm.renderControl(fixedItemAggregation);

		rm.close('div');

	};

/*...*/	

Ok, these are all the principle. But the most difficult thing is to adjust the CSS properties and HTML element to implement the layout and it position. What you can do is to learn some CSS and HTML principle and test what you learn again and again😄.