Cmobilecom AF 5.19 Developer Guide

7.8 View Config

A ViewConfig controls how a bean will be rendered and interact with users, including properties, layout, render style, access control, partial behavior, pagination and bookmarkable links. A ViewConfig can be created dynamically at runtime, or expressed in XML in FormDesigns and embedded objects in a page. 

	<object xmlns="http://www.cmobilecom.com/af/objects" type="objectType">

		<viewConfig>
			<attributeName>attributeValue</attributeName>
		</viewConfig>
	</object>

ViewConfig Base Type

ViewConfig is the base class of the ViewConfig hierarchy. It is the superclass of PersistenceDataViewConfig and MenuViewConfig. 
                          ViewConfig
                           /       \
    PersistenceDataViewConfig    MenuViewConfig
          /             \
EntityViewConfig   EntityListViewConfig
Properties: For example, API: 

	EntityViewConfig viewConfig = new EntityViewConfig(ViewType.ENTITY);
	viewConfig.setPanelVisible(true);
	viewConfig.setAccessControlAccessor(acAccessor);
XML: 

	<viewConfig>
		<viewType>ENTITY</viewType>
		<panelVisible>true</panelVisible>

		<panelView>
			<toggleable>true</toggleable>
			<collapsed>true</collapsed>
		</panelView>

		<accordionView>
			<multiple>true</theme>
		</accordionView>

		<message location="BOTTOM" localized="true">message on the bottom</message>

		<accessControlContext>
			<permissionsGranted>permission1,permission2</permissionsGranted>
			<permissionsDenied>permission1,permission2</permissionsDenied>
		</accessControlContext>

		<accessControl module="HR">
			<entityType name="EC">
				<entity accessType="CREATE" accessControl="USER" />
				<entity accessType="DELETE" accessControl="NOBODY" />
				<entity accessType="EDIT" accessControl="OWNER" />
			</entityType>
			
			<action name="ApproveExpenseClaims" accessControl="SUSER{ApproveEC}" />
		</accessControl>

		<param name="paramName" value="paramValue"/>

		<redirect action="cmd.commandName" toURL="/path/page1.xpg">
			<add name="param1" value="value1" />
		</redirect>

	</viewConfig>
The default viewType for EntityBackingBean is ENTITY, and for EntityListBackingBean is ENTITY_LIST_WIDE.

PanelView:

AccordionView:

For accessControl XML syntax, see Access Control.

Parameters:

A module can define any parameters.

Persistence Data ViewConfig

PersistenceDataViewConfig is the superclass of EntityViewConfig and EntityListViewConfig. To set default values for all properties, use _default as property name. For example, all properties are required, 

		<property name="_default">
			<requiredType>REQUIRED</requiredType>
		</property>
To configure property select items: 

		<property name="choice">
			<renderStyle>
							
				<selectItems>
					<selectItem value="1">select 1</selectItem>
					<selectItem value="2">select 2</selectItem>
					<selectItem value="3">select 3</selectItem>
				</selectItems>
				
			</renderStyle>
		</property>
Example: Property grouping 
<viewConfig>
	<propertyGrouping>
		<group name="productGroup" visibleName="Product" nameLocalized="false" position="0"
			layout="LAYOUT_CODE"><![CDATA[#{product}<br/>#{unitPrice}/#{unitOfMeasure}]]></group>
		
		<group name="productGroup" visibleName="Product" nameLocalized="false" position="0" 
			showMemberNames="true" memberSeparator=","
			layout="FLOW">product,unitPrice,unitOfMeasure</group>
	</propertyGrouping>
</viewConfig>
The first property group uses layout code(HTML) embedding property expressions, and the group is inserted at position 0. The second property group uses FLOW layout to group the specified properties, and then inserted a position 0.

Example: ChildEntity accessible without parent bean 

	<viewConfig>
		<accessibleWithoutParentBean>
			<create>true</create>
			<view>true</view>
			<edit>false</edit>
			<delete>false</delete>
		</accessibleWithoutParentBean>
	</viewConfig>
For a ChildEntity or a list of ChildEntity(s) without its parent bean, hasViewPermission, hasCreatePermission, hasEditPermission and hasDeletePermission are valid only if the ChildEntity or the list of ChildEntity(s) is acceesible.

Example: clicking photos to add product to shopping cart 

	<viewConfig>
		<viewType>ENTITY_LIST_WIDE</viewType>
		<property name="photos">
			<actionOnClick>AddToShoppingCart</actionOnClick>
		</property>
	</viewConfig>
If the menu node does not exist, override the following method to handle the action in its EntityBackingBean. 

@Override
public PageNavigation clickPropertyValue(PersistenceDataBackingBean<T> backingBean, T entity, 
		EntityProperty<T> property, ContainerRenderRegions containerRenderRegions) throws SystemException {

	String propertyName = property.getNamePath();
	PersistenceDataViewConfig viewConfig = backingBean.getViewConfig();
	PropertyDescriptor propertyDescriptor = viewConfig.getPropertyDescriptor(propertyName, false, false);
	String command = propertyDescriptor!=null? propertyDescriptor.getActionOnClick() : null;
	if ("AddToShoppingCart".equals(command)) {
		// handle action
		return null;
	}
	
	return super.clickPropertyValue(backingBean, entity, property, containerRenderRegions);
}
Example: search when product hierarchy is changed 
	<viewConfig>
		<viewType>QUERY</viewType>
		<property name="hierarchy">
			<actionOnChange>Search</actionOnChange>
		</property>
	</viewConfig>
If the menu node does not exist, override the following method to handle valueChange partial behavior event in its EntityBackingBean. 

@Override
public PageNavigation handlePartialBehaviorEvent(PartialBehaviorEvent event,
		PersistenceDataBackingBean<T> backingBean,
  		T entity, EntityProperty<T> property) throws SystemException {

	if (event.getPartialBehavior().isValueChange()) {
		String propertyName = property.getNamePath();
		PersistenceDataViewConfig viewConfig = backingBean.getViewConfig();
		PropertyDescriptor propertyDescriptor = viewConfig.getPropertyDescriptor(propertyName, false, false);
		String command = propertyDescriptor!=null? propertyDescriptor.getActionOnChange() : null;
		if ("Search".equals(command)) {
			// handle action
			return null;
		}
	}
	
	return super.handlePartialBehaviorEvent(event, backingBean, entity, property);
}

Entity ViewConfig

EntityViewConfig is the ViewConfig of an EntityBackingBean in create, view, edit or query mode. For example, an EntityViewConfig for user registration

<viewConfig>
	<viewType>ENTITY</viewType>
	<propertiesToShow>name,address,contact,phone,email,user.username,user.password</propertiesToShow>

	<property name="name">
		<visibleName>CompanyName</visibleName>
	</property>

	<property name="_default">
		<requiredType>REQUIRED</requiredType>
	</property>

	<viewConfig name="address">
		<viewType>ENTITY</viewType>
		<themeEnabled>false</themeEnabled>
		<propertiesToShow>country,state,city</propertiesToShow>
		<property name="_default">
			<requiredType>REQUIRED</requiredType>
		</property>
	</viewConfig>
</viewConfig>
The address property is a form bean property and its ViewConfig is embedded. 

	<viewConfig>
		<viewConfig name="address">
		</viewConfig>
	</viewConfig>
The following example is showing name and type for a query bean. 
	<viewConfig>
		<viewType>QUERY</viewType>
		<propertiesToShow>name,type</propertiesToShow>
	</viewConfig>

Entity List ViewConfig

EntityListViewConfig is the ViewConfig of an EntityListBackingBean in view or edit mode.
For example, an EntityListViewConfig for employees: 
	<viewConfig>
		<viewType>ENTITY_LIST_WIDE</viewType>
		<propertiesToShow>nid,name,type,hiredDate</propertiesToShow>
		<pageSize>20</pageSize>
		<pageParam>page</pageParam>
	</viewConfig>
Embed statistics rows 
	<viewConfig>
		<viewType>ENTITY_LIST_WIDE</viewType>

		<embeddedStatistics>
			<diffProperties>property1, property2, ...</diffProperties>
		</embeddedStatistics>
	</viewConfig>
MenuViewConfig is the ViewConfig of a MenuBean or MenuNodeFactory. For example, menu bar: 
	<viewConfig>
		<viewType>MENU</viewType>
		<menuStyle>MENU_BAR</menuStyle>
		<iconOnly>false</iconOnly>
		<commandStyleNumber>19</commandStyleNumber>
		<menuNodesToShow>cmd.Help,cmd.OpenQueryForm,cmd.Create</menuNodesToShow>
	</viewConfig>
Example: tree menu with nodes expanded up to depth 3. 
	<viewConfig>
		<viewType>MENU</viewType>
		<menuStyle>TREE</menuStyle>
		<treeView>
			<expandedDepth>3</expandedDepth>
		</treeView>
	</viewConfig>
For example, a MenuViewConfig for forum hierarchy entities: 
	<viewConfig>
		<viewType>MENU</viewType>
		<menuStyle>TREE</menuStyle>
		<menuNode key="hierarchy.entity">
			<name localized="true">#{entity.name}</name>
			<renderStyle>
				<styleNumber>16</styleNumber>
			</renderStyle>
			<outputLink>/forum.xpg?forumId=#{entity.hierarchyId}</outputLink>
		</menuNode>

		<menuNode key="hierarchy.root">
			<name>Forums</name>
			<renderStyle>
				<styleNumber>16</styleNumber>
			</renderStyle>
			<outputLink>/all-forums.xpg</outputLink>
		</menuNode>
	</viewConfig>
Style number 16 is OUTPUT_LINK, and style number 19 is COMMAND_BUTTON. For a complete list of style numbers, see Property Annotations or RenderStyle javadoc.

Nested ViewConfig

A ViewConfig can have nested ViewConfig(s). The following nested viewConfig names are supported for each enclosing ViewConfig type: Example: a ViewConfig for a ReportQueryFormBean: 

	<viewConfig>
		<viewType>QUERY</viewType>

		<viewConfig name="report" >
			<viewType>ENTITY</viewType>

			<viewConfig name="reportTable" >
				<viewType>ENTITY_LIST_WIDE</viewType>
				<pageable>false</pageable>
			</viewConfig>
		</viewConfig>
	</viewConfig>
"report" is the name of the ReportBean viewConfig of a ReportQueryFormBean, and "reportTable" is the name of the report table viewConfig of a ReportBean. A ReportBean contains charts and report table.

Example: place an order with a list of order items. Command link "Show Shipping Cost" has inputData(shippingMethod, weight) to show shipping costs for various destinations. 


	<viewConfig>
		<viewType>ENTITY</viewType>
		<viewConfig name="orderItems" >
			<viewType>ENTITY_LIST_NARROW</viewType>
			<propertiesToShow>product,unitPrice,quantity,total</propertiesToShow>
			<pageable>false</pageable>
		</viewConfig>

		<showHeaderMenu>false</showHeaderMenu>

		<viewConfig name="footerMenu" >
			<viewType>MENU</viewType>
			<menuStyle>MENU_BAR</menuStyle>
			<menuNodesToShow>cmd.Create,cmd.ShowShippingCost</menuNodesToShow>
			<menuNode key="cmd.Create">
				<name>PlaceOrder</name>
				<captchaRequired>true</captchaRequired>
			</menuNode>

			<viewConfig name="cmd.ShowShippingCost:command" >
				<viewType>ENTITY_LIST_WIDE</viewType>
				<propertiesToShow>destination,cost</propertiesToShow>
			</viewConfig>

			<viewConfig name="cmd.ShowShippingCost:inputData" >
				<viewType>ENTITY</viewType>
				<propertiesToShow>shippingMethod,weight</propertiesToShow>
			</viewConfig>
		</viewConfig>
	</viewConfig>

Example: a user list view with row command "ShowUserData". Nested ViewConfig(s): rowCommandMenu, cmd.ShowUserData:command, navigateToEntity and createEntity. 

	<viewConfig>
		<viewType>ENTITY_LIST_WIDE</viewType>

		<viewConfig name="rowCommandMenu" >
			<viewType>MENU</viewType>
			<menuStyle>MENU_BAR</menuStyle>

			<viewConfig name="cmd.ShowUserData:command" >
				<!-- viewConfig for showing user data -->
			</viewConfig>
		</viewConfig>

		<viewConfig name="navigateToEntity" >
			<!-- viewConfig for showing or editing an entity -->
		</viewConfig>

		<viewConfig name="createEntity" >
			<!-- viewConfig for creating an entity -->
		</viewConfig>
	</viewConfig>
To get a nested ViewConfig of a menu node, its action handler can call MenuNode.getNestedViewConfig(...). For example, 

	public PageNavigation clickMenuNode(MenuNode menuNode) {
		// get menu node command viewConfig
		EntityViewConfig viewConfig = menuNode.getNestedViewConfig(true, EntityViewConfig.class);
		...
	}
see MenuNode javadoc.

Partial Behavior Support

The partialBehaviorSupport element of a MenuNode or Property defines a list of partial behaviors. 

	<partialBehaviorSupport>

		<partialBehavior event="eventName">
			<renderRegions>regionNumber1,regionNumber2,...</renderRegions>
			<openDialog>true|false</openDialog>
		</partialBehavior>

	</partialBehaviorSupport>
For example, the following ViewConfig of a query EntityBackingBean defines that the Search command will show query results in region 8 and clear region 9. 
	<viewConfig>

		<viewConfig name="footerMenu" >
			<viewType>MENU</viewType>
			<menuStyle>MENU_BAR</menuStyle>
			<menuNode key="cmd.Search">
				<partialBehaviorSupport>
					<partialBehavior event="action">
						<renderRegions>8,9</renderRegions>
						<openDialog>false</openDialog>
					</partialBehavior>
				</partialBehaviorSupport>
			</menuNode>
		</viewConfig>

	</viewConfig>
← Menu Bean→ Auto CompleteFrames / No Frames
© 2014-2024 Cmobilecom and/or its licensors. All rights reserved.