Ejemplos: Añadir widgets de vista de propiedades del Management Center

Revisando los ejemplos de código que crean algunos widgets de la vista de propiedades comunes, se puede entender mejor cómo implementar estos elementos en las propias vistas de propiedades. Los ejemplos de código también ilustran cómo hacer que una propiedad sea obligatoria y cómo añadir una condición de habilitación para determinadas propiedades.
El código de ejemplo crea los siguientes tipos de widgets de la vista de propiedades:

Widget de la vista de propiedades comunes
Widget de la vista de propiedades Descripción:
1 Propiedad Input Text El usuario puede escribir texto en cualquier campo de entrada. Ejemplo:
2 Propiedad Radio group El usuario puede elegir una opción entre una serie de opciones mutuamente excluyentes. Ejemplo:
3 Propiedad Stepper El usuario puede moverse hacia arriba o hacia abajo de una serie de valores numéricos dentro de un rango establecido. Ejemplo:
4 Propiedad Input Text (obligatorio) Igual que la propiedad Input Text, excepto que se incluye un asterisco rojo en la etiqueta del widget y se visualizan mensajes de validación rojos hasta que el usuario entre un valor válido. Ejemplo:
5 Propiedad Combination box Los usuarios pueden elegir en una lista desplegable de opciones seleccionables. Ejemplo:
6 Propiedad Check box El usuario puede conmutar entre un valor true y un valor false. Ejemplo:
El código de ejemplo también demuestra el siguiente comportamiento del widget:
Un campo obligatorio
Puede establecer cualquier propiedad como obligatoria. Como consecuencia, el Management Center muestra mensajes de validación para la propiedad hasta que el usuario complete dicha propiedad. Para obtener un ejemplo, consulte la propiedad que está etiquetada con la leyenda 4 (Propiedad Input Text Required Property).
Condiciones de habilitación
Puede establecer las condiciones de habilitación de una propiedad. Como consecuencia, la propiedad sólo se muestra al usuario si se cumplen determinadas condiciones, como, por ejemplo, un botón de selección específico está seleccionado en otra propiedad. Para ver ejemplos de propiedades que están controladas por una condición de habilitación, consulte las propiedades que están etiquetadas con las leyendas 3 (Propiedad Stepper), 4 (Propiedad Input Text Required), y 5 (Propiedad Comboxbox).

Ejemplo de vista de propiedades

El código de ejemplo crea la vista de propiedades siguientes, que contiene los seis tipos de widgets de vista de propiedades que están listados en la tabla anterior. Las figuras 1 y 4 muestran cómo se visualizan determinadas propiedades y se ocultan cuando el usuario selecciona diferentes opciones en la Propiedad Radio Group. Este comportamiento está controlado por las condiciones de habilitación que están definidas en la definición de vista de propiedades. Las figuras 3 y 4 muestran el comportamiento de un mensaje de validación en un campo obligatorio.

Figura 1. El usuario selecciona la Opción A en la Propiedad Radio Group

Se visualizan Propiedad Combobox y Propiedad Checkbox (5 y 6).


Vista de propiedades cuando Opción A está seleccionada
Figura 2. El usuario selecciona la Opción C en Propiedad Radio Group

Al igual que en la figura 1, se visualizan Propiedad Combobox y Propiedad Checkbox (5 y 6).
Figura 3. El usuario selecciona la Opción B en la Propiedad Radio Group
Como consecuencia:
  • Ahora, se visualizan Propiedad Stepper y Propiedad Input Text Required (3 y 4).
  • La Propiedad Combobox (5) ya no se visualiza.
Además, el campo Propiedad Input Text Required es un campo obligatorio. Por este motivo, los mensajes de validación en rojo se visualizan a la derecha del campo y en la parte superior de la ventana. Los mensajes de validación permanecerán hasta que el usuario especifique el texto en el campo.

Vista de propiedades cuando la Opción B está inicialmente seleccionada
Figura 4. El usuario entra texto en Propiedad Input Text Required

Como consecuencia, se borran los mensajes de validación.

Ejemplo de código de definición de objeto

El fragmento de código siguiente procede de la definición de objeto para la vista de propiedades que se muestra en las figuras 1 a 4. Las leyendas numeradas indican el widget de vista de propiedades al que el código hace referencia. 
2
<!-- The xWidgetProp_testWidgetRadioGroupProperty property has 3 values: optionA, optionB, optionC -->
<PropertyDefinition propertyName="xWidgetProp_testWidgetRadioGroupProperty">
	<PropertyValue displayName="${mycompanyPageLayoutResources.testWidgetRadioGroupProperty_optionA}" value="optionA" />
	<PropertyValue displayName="${mycompanyPageLayoutResources.testWidgetRadioGroupProperty_optionB}" value="optionB" />
	<PropertyValue displayName="${mycompanyPageLayoutResources.testWidgetRadioGroupProperty_optionC}" value="optionC" />
</PropertyDefinition>

3
<!-- The xWidgetProp_testWidgetStepperProperty property is an integer, range is from 1 to 2147483647 -->
<PropertyDefinition propertyName="xWidgetProp_testWidgetStepperProperty" 
	maxValue="2147483647"
	minValue="1"
	type="integer">
</PropertyDefinition>

4
<!-- The xWidgetProp_testWidgetInputTextRequiredProperty is a required property -->
<PropertyDefinition propertyName="xWidgetProp_testWidgetInputTextRequiredProperty" 
	required="true"
	displayName="${mycompanyPageLayoutResources.testWidgetInputTextRequiredPropertyPrompt}">
	<EnablementCondition conditionId="testWidgetPropertyGroup1Condition" 
		propertyName="xWidgetProp_testWidgetRadioGroupProperty" enablementValue="optionB" />
</PropertyDefinition>

5
<!-- The xWidgetProp_testWidgetComboboxProperty property has 3 values: 1, 2, 3 -->
<PropertyDefinition propertyName="xWidgetProp_testWidgetComboboxProperty">
	<PropertyValue displayName="${mycompanyPageLayoutResources.testWidgetComboboxPProperty_option1}" value="1" />
	<PropertyValue displayName="${mycompanyPageLayoutResources.testWidgetComboboxPProperty_option2}" value="2" />
	<PropertyValue displayName="${mycompanyPageLayoutResources.testWidgetComboboxPProperty_option3}" value="3" />
</PropertyDefinition>

<Xml name="template">
	<xWidgetProp_testWidgetRadioGroupProperty>optionA</xWidgetProp_testWidgetRadioGroupProperty>
	<xWidgetProp_testWidgetStepperProperty>4</xWidgetProp_testWidgetStepperProperty>
	<xWidgetProp_testWidgetComboboxProperty>1</xWidgetProp_testWidgetComboboxProperty>
	<xWidgetProp_testWidgetCheckboxProperty>false</xWidgetProp_testWidgetCheckboxProperty>
	<sequence>0</sequence>
</Xml>

Ejemplo de código de definición de la vista de propiedades

El fragmento de código siguiente procede de la definición de objeto de vista de propiedades que se muestra en las figuras 1 a 4. Las leyendas numeradas indican el widget de vista de propiedades al que el código hace referencia.

Observe cómo se configuran las condiciones de habilitación en la definición de la vista de propiedades:

<PropertyGroup name="widgetProperties" collapsable="false" groupTitle="${PageLayoutResources.widgetPropertiesPrompt}">
<PropertyInputText name="${PageLayoutResources.widgetNamePrompt}" propertyName="widgetName"
	promptText="${PageLayoutResources.widgetNamePrompt}" />

1
<!-- Use Input Text -->
<PropertyInputText propertyName="xWidgetProp_testWidgetInputTextProperty"
	promptText="${mycompanyPageLayoutResources.testWidgetInputTextPropertyPrompt}" />

2
<!-- Use RadioGroup-->
<PropertyRadioGroup propertyName="xWidgetProp_testWidgetRadioGroupProperty" 
	promptText="${mycompanyPageLayoutResources.testWidgetRadioGroupPropertyPrompt}" />						

<!-- This property group will be enabled when the value of xWidgetProp_testWidgetRadioGroupProperty property is optionB -->
<PropertyGroup name="testWidgetPropertyGroup1" collapsable="false">
	<EnablementCondition conditionId="testWidgetPropertyGroup1Condition" 
		propertyName="xWidgetProp_testWidgetRadioGroupProperty" enablementValue="optionB" />

3	
	<!-- Use Stepper -->
	<PropertyStepper propertyName="xWidgetProp_testWidgetStepperProperty" 
		minimumValue="1"
		promptText="${mycompanyPageLayoutResources.testWidgetStepperPropertyPrompt}" />	
	
4
	<!-- Use Input Text: required property -->
	<PropertyInputText propertyName="xWidgetProp_testWidgetInputTextRequiredProperty"
		required="true"
		promptText="${mycompanyPageLayoutResources.testWidgetInputTextRequiredPropertyPrompt}" />	
</PropertyGroup>

<!-- This property group will be enabled when the value of xWidgetProp_testWidgetRadioGroupProperty property is optionA or optionC -->
<PropertyGroup name="testWidgetPropertyGroup2" collapsable="false">
	<EnablementOrCondition conditionId="testWidgetPropertyGroup2Condition">
		<EnablementCondition propertyName="xWidgetProp_testWidgetRadioGroupProperty" enablementValue="optionA" />
		<EnablementCondition propertyName="xWidgetProp_testWidgetRadioGroupProperty" enablementValue="optionC" />
	</EnablementOrCondition>
	
5
	<!-- Use Combobox -->
	<PropertyCombobox propertyName="xWidgetProp_testWidgetComboboxProperty" 
		promptText="${mycompanyPageLayoutResources.testWidgetComboboxPropertyPrompt}" />
</PropertyGroup>

6
<!-- Use Checkbox -->
<PropertyCheckbox propertyName="xWidgetProp_testWidgetCheckboxProperty" 
	text="${mycompanyPageLayoutResources.testWidgetCheckboxPropertyPrompt}" />
</PropertyGroup>