ContainerBean Configuration

A web page is backed by a container bean whose page content is composed of regions, and each region is composed of one or more backing beans. Backing beans are interactive objects such as menu beans, entity beans, or entity list beans.

Page content, regions and layout are configured in [CMOBILECOM.HOME]/conf/containers.xml. For example,


<?xml version="1.0" encoding="UTF-8"?>
<containers>
	<container name="indexCntrBean">
		<regions>
			<region number="0">pageHeaderMenu</region>
			<region number="1">containerMenu</region>
			<region number="5">queryForm</region>
			<region number="7,6">queryResults</region>
		</regions>

		<pageLayout scriptEnabled="false">
			<unit position="north">
				<content><![CDATA[
					#{facet_logo}#{region_0}#{region_1}
					]]>
				</content>				
			</unit>
			
			<unit position="center">
				<content>#{OBJECT:page}</content>			
			</unit>			
		</pageLayout>		
	</container>
	
	<container name="manageCntrBean">
		<regions>
			<region number="0">pageHeaderMenu</region>
			<region number="1">containerMenu</region>
			<region number="2">toolbarMenu</region>	
			<region number="5">queryForm</region>	
			<region number="7,6">queryResults</region>
		</regions>
		
		<!-- menu style: ACCORDION_TREE, TREE, MENU_BAR, TIERED_MENU, LIST -->
		<!-- pageHeaderMenu default menuStyle: LIST -->
		<viewConfig name="pageHeaderMenu">
			<viewType>MENU</viewType>
			<menuStyle>LIST</menuStyle>
			<menuNodeToHide>Help</menuNodeToHide>
		</viewConfig>
				
		<!-- containerMenu default menuStyle: ACCORDION_TREE -->
		<viewConfig name="containerMenu">
			<viewType>MENU</viewType>
			<menuStyle>ACCORDION_TREE</menuStyle>
		</viewConfig>
				
		<pageLayout>
			<unit position="north">
				<!-- default: auto, calculate size when shown
				<size>300</size>  
				-->
				
				<!-- minimum size, default: 0
				<minSize>0</minSize>
				-->
				
				<!-- maximum size, default: no limit
				<maxSize>0</maxSize>
				-->
				
				<!-- resizable, default: true -->
				<resizable>false</resizable>
				
				<!-- content: support expressions for regions and facets -->
				<content><![CDATA[
					<div>#{facet_logo}#{facet_title}#{region_0}</div>#{region_2}
					]]>
				</content>				
			</unit>
			
			<unit position="west">
				<resizable>true</resizable>
				<content>#{region_1}</content>
			</unit>
			
			<unit position="center">
				<resizable>true</resizable>
				<content>#{region_5}#{region_6}</content>			
			</unit>
		</pageLayout>
	</container>
	
</containers>
There are two pages: index.xhtml and manage.xhtml, and backed by container beans named indexCntrBean and manageCntrBean respectively. Backing beans can be added into any regions of a container bean, but their region numbers must be contained in the page layout in order to be visible.

The default content for index page is a login form for users to login into manage page. The login form is shown in the first region for query results.

And the default content for manage page is five regions in a resizable border layout.

North layout unit:

West layout unit:

Center layout unit:

By default, non-query backing beans are shown in the region for query results. To add a bean into a specified region:

   PageContent pageContent = containerBean.getPageContent();
   pageContent.add(bean, regionNumber);

Mobile

If mobile is not specified, the configuration is for both desktop and mobile. To override a configuration for mobile, add the configuration with mobile set to true. For example,

<containers>
	<container name="indexCntrBean">
		...
	</container>

	<container name="indexCntrBean" mobile="true" >
		...	
		<pageLayout theme="a">
			<unit position="north" positionFixed="true" tapToggle="true">
				<content>#{region_0}#{region_1}</content>		
			</unit>
					
			<unit position="west" 
				icon="bars" theme="b" display="reveal">
				<content>#{region_0}#{region_1}</content>		
			</unit>

			<unit position="center">
				<content>#{OBJECT:page}</content>		
			</unit>

			<unit position="east" 
				icon="search" theme="b" display="overlay">
				<content>#{region_5}</content>		
			</unit>

			<unit position="south" positionFixed="true" tapToggle="true">
				<content>Copyright 2016</content>		
			</unit>
															
		</pageLayout>
	</container>
</containers>
For mobile, the west unit is left panel, the east unit is right panel, the north unit is page header, and the south unit is page footer. The icons will be added to the page header for west and east units (if any).

ViewConfig

ViewConfig can be specified for pageHeaderMenu, containerMenu and toolbar to override default. see View Config for details.

Page Layout

Page layout is a border layout that can contain north, west, center, east and south layout units. For desktop, if scriptEnabled is true(default), script will be used to layout the units, otherwise only style sheet will be used. The scriptEnabled attribute will be ignored for mobile.

The layout code of a layout unit is a piece of HTML code that can contain expressions. Supported expressions:

Request contextPath can be used in hyperlinks such as

	<a href="#{request.contextPath}/privacyPolicy.page">Privacy Policy</a>
Only facet_logo and facet_title facets are supported by default, which shows the icon and name of current bound InstanceType by default. A website can specify a different logo.