Exemples : Ajout de widgets de vue de propriétés du Management Center

En passant en revue les exemples de code de création de quelques widgets de vue de propriétés courants, vous pouvez mieux comprendre comment implémenter ces widgets dans vos propres vues de propriétés. Les exemples de code illustrent également comment rendre une propriété obligatoire et ajouter une condition d'activation pour certaines propriétés.
L'exemple de code crée les types suivants de vue de propriétés :

Widgets de vue de propriétés courants
Widget de vue de propriétés Description
1 Propriété d'entrée de texte (InputText) L'utilisateur peut entrer du texte dans une zone d'entrée. Exemple :
2 Propriété de groupe de boutons d'option (RadioGroup) L'utilisateur peut sélectionner une option dans un ensemble d'options mutuellement exclusives. Exemple :
3 Propriété d'incrémenteur (Stepper) L'utilisateur peut parcourir par incrément ou décrément une série de valeurs numériques d'une plage définie. Exemple :
4 Propriété d'entrée de texte (obligatoire) (InputTextRequiredProperty) Identique à la propriété d'entrée de texte, mais un astérisque rouge est apposé sur le libellé du widget et des messages de validation s'affichent en rouge tant que l'utilisateur n'a pas entré de valeur valide. Exemple :
5 Propriété de zone de liste déroulante (Combobox) L'utilisateur peut faire son choix dans une liste déroulante d'options sélectionnables. Exemple :
6 Propriété de case à cocher (Checkbox) L'utilisateur peut basculer entre les valeurs vrai (true) et faux (false). Exemple :
L'exemple de code montre également le comportement de widget suivant :
Zone obligatoire
Vous pouvez rendre toute propriété obligatoire. En conséquence, le Management Center affiche des messages de validation pour la propriété jusqu'à ce que l'utilisateur la complète. Par exemple, voir la propriété portant la légende 4 (Input Text Required Property).
Conditions d'activation
Vous pouvez définir les conditions d'activation d'une propriété. En conséquence, la propriété est affichée uniquement lorsque certaines conditions sont remplies (par exemple, la sélection d'un certain bouton d'option dans une autre propriété). Pour obtenir des exemples de propriétés contrôlées par une condition d'activation, voir les propriétés portant les légendes 3 (Stepper Property), 4 (Input Text Required Property) et 5 (Combobox Property).

Pour la liste des widgets de vue de propriétés disponibles, voir Création de widgets dans Management Center.

Exemple de vue de propriétés

L'exemple de code suivant crée la vue de propriétés suivante qui comprend les six types de widget de vue de propriétés répertoriés dans le tableau précédent. Les figures 1 à 4 montrent comment l'affichage et le masquage de certaines propriétés lorsque l'utilisateur sélectionne différentes options de la propriété de groupe de boutons d'option (Radio Group Property). Ce comportement est contrôlé par des conditions d'activation précisées dans la définition de vue de propriétés. Les figures 3 et 4 montrent le comportement d'un message de validation pour une zone obligatoire.

Captures d'écran de vue de propriétés
Figure 1. L'utilisateur sélectionne Option A dans Radio Group Property

Combobox Property et Checkbox Property (5 et 6) s'affichent.


Vue de propriétés lorsque Option A est sélectionné
Figure 2. L'utilisateur sélectionne Option C dans Radio Group Property

Comme dans la figure 1, Combobox Property et Checkbox Property (5 et 6) s'affichent.
Figure 3. L'utilisateur sélectionne Option B dans Radio Group Property
En conséquence :
  • Stepper Property et Input Text Required Property (3 et 4) s'affichent désormais.
  • Combobox Property (5) n'apparaît plus.
En outre, Input Text Required Property est une zone obligatoire. C'est pourquoi les messages de validation s'affichent en rouge à droite de la zone et en haut de la fenêtre. Les messages de validation restent jusqu'à ce que l'utilisateur entre du texte dans la zone.

Vue de propriétés lorsque Option B est initialement sélectionné
Figure 4. L'utilisateur entre du texte dans Input Text Required Property

En conséquence, les messages de validation sont effacés.

Exemple de code de définition d'objet

Le fragment de code suivant est extrait de la définition d'objet de la vue de propriétés affichée dans les figures 1 à 4. Les légendes numérotées indiquent le widget de vue de propriétés auquel le code fait référence. 
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>

Exemple de code de définition de vue de propriétés

Le fragment de code suivant est extrait de la définition de la vue de propriétés affichée dans les figures 1 à 4. Les légendes numérotées indiquent le widget de vue de propriétés auquel le code fait référence.

Observez la façon dont les conditions d'activation sont précisées dans la définition de vue de propriétés :

<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>