Using SmartForm

Using SmartForm for display data in READ mode

Simple renderer

Most of the time data layout is often similar between an interface that lets you view and edit data. One of possibilities of SmartForm is to switch to the READ mode. On the previous sample, user can switch between READ and UPDATE mode.

UPDATE mode :

READ mode :

Advanced renderer

Another possibility is to defined your own specific renderer. Because READ mode should display data with more details or simply different layout. On the second screenshot, city is not represented as a simple Label but with an advanced renderer.

For creating your own renderer, add them in the renderers SmartForm property. You can use any type of container for the top element and those specific elements for contents:

• LabelRenderer
• TextRenderer
• ImageRenderer

Note that All SmartForm renderer implements ISmartFormRenderer, so you can create your own renderer.

<form:SmartForm
	id="customerSmartForm"
	height="100%"
	enabled="{dg.selectedItem is CustomerVO }"
	width="100%"
	source="{dg.selectedItem}"
	styleName="form"
	toHideOnRead="{[buttonBar]}">
 
        <!-- put your own renderer here -->
	<form:renderers>
		<mx:HBox id="cityRenderer" styleName="debugBorder" width="100%">
			<renderer:LabelRenderer name="city$city" />
			<renderer:TextRenderer name="city$description" width="330" />
			<renderer:ImageRenderer name="city$photo" width="100" height="100" includeInLayout="true" right="0" top="0"/>
		</mx:HBox>
	</form:renderers>

Then you have to bind the renderer property of the ISmartFormElement to the renderer. The renderer will be used to display the SmartForm element on READ mode.

<mx:FormItem label="City" required="true">
	<elements:SFComboBox
		id="city"
		dataProvider="{cities}"
		labelField="city"
		propertyForMatch="cp"
		renderer="{cityRenderer}"
		enableDefaultPrompt="true"
		prompt="--"/>
</mx:FormItem>

Dowload source of the sample.

Previous Step

Next Step

Page 1 Page 2