...
Die Konfiguration ohne Collections
Die ComboBox:
Code Block | ||
---|---|---|
| ||
<ComboBox Id="Land"> <Item Label="Schweiz" Value="Schweiz" /> <Item Label="Deutschland" Value="Deutschland" /> <Item Label="Österreich" Value="Österreich" /> </ComboBox> |
...
Navigationsschalter ausserhalb von Rows
Code Block | ||
---|---|---|
| ||
<Button TargetView="SecondView" Label="Weiter" IsDefault="true" /> <Button Type="Submit" Label="OK" /> <Button Type="Cancel" Label="Abbrechen" /> |
...
1b) Zugriff auf das ComboBox-Element in der View
Code Block | ||
---|---|---|
| ||
<Row> <Label Content="Bitte wählen" /> <ComboBox Id="DocParam.Zeichen" ColumnSpan="2" IsInvalidWhenValue="0" /> </Row> |
...
TextNode in der DataNode-Section:
Code Block | ||
---|---|---|
| ||
<Text Id="DocParam.RBGeschlecht">1</Text> |
In der View:
Code Block | ||
---|---|---|
| ||
<Row> <Label Content="Geschlecht" /> <RadioButton Id="DocParam.RBGeschlecht" Value="1" Label="Frau" /> <RadioButton Id="DocParam.RBGeschlecht" Value="2" Label="Mann" /> </Row> |
...
Code Block |
---|
<DataNodes> <ComboBox Id="DocParam.RBGeschlecht" SelectedValue="2"> <ListItem Value="1" DisplayText="Frau" /> <ListItem Value="2" DisplayText="Mann" /> </ComboBox> </DataNodes> |
In der View:
Code Block | ||
---|---|---|
| ||
<Row> <Label Content="Geschlecht" /> <RadioButton Id="DocParam.RBGender" Value="1" Label="Frau" /> <RadioButton Id="DocParam.RBGender" Value="2" Label="Mann" /> </Row> |
...
IsVisible-Bind:
Code Block | ||
---|---|---|
| ||
<Row> <Label Content="IsVisible" /> <TextBox Id="DocParam.OutputSubtract" ColumnSpan="3" Bind="IsVisible: Calc('$('DocParam.Field1') - $('DocParam.Field2')';'C2') == 'CHF 20.00'" /> </Row> <Row> <Label Content="IsVisible" /> <TextBox Id="DocParam.OutputSubtract" ColumnSpan="3" Bind="IsVisible: Calc('$('DocParam.Field1') - $('DocParam.Field2')';'') == '20.00'" /> </Row> |
Weiter bietet Calc die Möglichkeit, angewählte CheckBoxen zu "zählen":
Code Block | ||
---|---|---|
| ||
<Row Bind="IsVisible: Calc('$('Checkbox1') + $('Checkbox2') + $('Checkbox3') + $('Checkbox4')';'F0') == '2'"> <Label Content="Label"> </Row> |
...
Das Script
-Element wird an folgender Stelle eingefügt:
Code Block | ||
---|---|---|
| ||
<Configuration> <CustomContentSection [...]> <DataNodes> [...] </DataNodes> </CustomContentSection> <Views> <Script> <![CDATA[ // Hier kann JavaScript geschrieben werden. ]]> </Script> <View> [...] </View> </Views> </Configuration> |
...
Komplettes Beispiel, das die Möglichkeiten der JavaScript-Integration aufzeigt:
Code Block | ||
---|---|---|
| ||
<?xml version="1.0" encoding="utf-8"?> <Configuration> <CustomContentSection Name="Dokument-Parameter" WindowWidth="750" WindowHeight="450"> <DataNodes> <Text Id="DocParam.TextFieldMustContainTest">Etwas</Text> <Text Id="DocParam.TextFieldInput">Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich.</Text> <Text Id="DocParam.TextFieldResultUpperCase" /> <Text Id="DocParam.TextFieldResultLowerCase" /> </DataNodes> </CustomContentSection> <Views OnSubmit="validate()"> <Script> <![CDATA[ function validate() { var textFieldContainsTest = OO.getValue("DocParam.TextFieldMustContainTest") === "Test"; if (textFieldContainsTest === false) { OO.addValidationMessage("DocParam.TextFieldMustContainTest", "Textfeld 1 muss 'Test' sein und nicht '" + OO.getValue("DocParam.TextFieldMustContainTest") + "'"); return false; } return true; } function textFieldInputChanged() { var textOfTextField = OO.getValue("DocParam.TextFieldInput"); var textInUpperCase = textOfTextField.toUpperCase(); OO.setValue("DocParam.TextFieldResultUpperCase", textInUpperCase); var textInLowerCase = textOfTextField.toLowerCase(); OO.setValue("DocParam.TextFieldResultLowerCase", textInLowerCase); } ]]> </Script> <View Id="main" Label="Startseite"> <Row> <TextBlock Style="h1" ColumnSpan="4">JavaScript-Beispiel</TextBlock> </Row> <Row> <Separator ColumnSpan="4"/> </Row> <Row> <Label Content="Muss "Text" enthalten" /> <TextBox Id="DocParam.TextFieldMustContainTest" ColumnSpan="3" /> </Row> <Row> <Separator ColumnSpan="4"/> </Row> <Row> <Label Content="Eingabe" /> <TextBox Id="DocParam.TextFieldInput" ColumnSpan="3" OnChange="textFieldInputChanged()" /> </Row> <Row> <Label Content="Ausgabe in Grossbuchstaben" /> <TextBox Id="DocParam.TextFieldResultUpperCase" ColumnSpan="3" IsEnabled="false" /> </Row> <Row> <Label Content="Ausgabe in Kleinbuchstaben" /> <TextBox Id="DocParam.TextFieldResultLowerCase" ColumnSpan="3" IsEnabled="false" /> </Row> <Button Type="Submit" Label="OK" IsDefault="true" /> <Button Type="Cancel" Label="Abbrechen" /> </View> </Views> </Configuration> |
...
Der dazugehörige Dialog:
...
Validierung:
Code Block | ||
---|---|---|
| ||
<Configuration> <CustomContentSection Name="Dokument-Parameter" WindowWidth="750" WindowHeight="750"> <DataNodes> <Text Id="DocParam.Subject" Required="true" ValidationMessage="Bitte geben sie einen Betreff ein" /> <Text Id="DocParam.4NumbersMax" Regex="^[0-9]{1,4}$" ValidationMessage="Die Zahl darf maximal aus vier Ziffern bestehen und muss natürlich sein" /> </DataNodes> </CustomContentSection> <Views> <View Id="main" Label="Startseite"> <Row> <TextBlock Style="h1" ColumnSpan="4">Titel</TextBlock> </Row> <Row> <Separator ColumnSpan="4"/> </Row> <Row> <Label Content="Betreff" /> <TextBox Id="DocParam.Subject" ColumnSpan="3" /> </Row> <Row> <Label Content="Maximal Vierstellige, natürlich Zahl" /> <TextBox Id="DocParam.4NumbersMax" ColumnSpan="3" /> </Row> <Button Type="Submit" Label="OK" IsDefault="true" /> <Button Type="Cancel" Label="Abbrechen" /> </View> </Views> </Configuration> |
...
Das Verhalten des Dialoges:
...
Bindings: Calc
Code Block | ||
---|---|---|
| ||
<Configuration> <CustomContentSection Name="Dokument-Parameter" WindowWidth="750" WindowHeight="750"> <DataNodes> <!-- Eingabefelder für die mathematischen Funktionen mit validen Standardwerten --> <Text Id="DocParam.Field1">1</Text> <Text Id="DocParam.Field2">1</Text> <Text Id="DocParam.TestNode2" /> <Text Id="DocParam.OutputAdd" /> <Text Id="DocParam.OutputSubtract" /> <Text Id="DocParam.OutputDivide" /> <Text Id="DocParam.OutputMultiply" /> <Text Id="DocParam.CB1" /> <Text Id="DocParam.CB2" /> <Text Id="DocParam.CB3" /> <Text Id="DocParam.CB4" /> </DataNodes> </CustomContentSection> <Views> <View Id="main" Label="Startseite"> <Row> <TextBlock Style="h1" ColumnSpan="4">Titel</TextBlock> </Row> <Row> <Separator ColumnSpan="4"/> </Row> <Row> <Label Content="Wert 1" /> <TextBox Id="DocParam.Field1" ColumnSpan="3"/> </Row> <Row> <Label Content="Wert 2" /> <TextBox Id="DocParam.Field2" ColumnSpan="3" /> </Row> <Row Bind="IsVisible: Calc('$('DocParam.Field1') + $('DocParam.Field2') > 1000';'F0') "> <TextBlock>Wert1 + Wert2 Ergeben mehr als 1000</TextBlock> </Row> <Row> <Label Content="Ergebnis Addition" /> <!-- Simples CalcBinding mit Addition und Formatierung auf zwei Nachkomastellen im Währungsformat --> <TextBox Id="DocParam.OutputAdd" ColumnSpan="3" Bind="Value: Calc('$('DocParam.Field1') + $('DocParam.Field2')';'C2')" /> </Row> <Row> <Label Content="Ergebnis Subtraktion" /> <!-- Simples CalcBinding mit Subtraktion und Formatierung auf zwei Nachkomastellen im Währungsformat --> <TextBox Id="DocParam.OutputSubtract" ColumnSpan="3" Bind="Value: Calc('$('DocParam.Field1') - $('DocParam.Field2')';'C2')" /> </Row> <Row> <Label Content="Ergebnis Division" /> <!-- Simples CalcBinding mit Divison und Formatierung auf drei Nachkomastellen im Dezimalformat --> <TextBox Id="DocParam.OutputDivide" ColumnSpan="3" Bind="Value: Calc('$('DocParam.Field1') / $('DocParam.Field2')';'F3')" /> </Row> <Row> <Label Content="Ergebnis Multiplikation" /> <!-- Simples CalcBinding mit Multiplikation und Formatierung auf zwei Nachkomastellen im Währungsformat --> <TextBox Id="DocParam.Outputmultiply" ColumnSpan="3" Bind="Value: Calc('$('DocParam.Field1') * $('DocParam.Field2')';'C2')" /> </Row> <Row> <CheckBox Id="DocParam.CB1" Label="CB1"></CheckBox> <CheckBox Id="DocParam.CB2" Label="CB2"></CheckBox> <CheckBox Id="DocParam.CB3" Label="CB3"></CheckBox> <CheckBox Id="DocParam.CB4" Label="CB4"></CheckBox> </Row> <!-- Calc Binding um angewählte Checkboxen zu "zählen" --> <Row Bind="IsVisible: Calc('$('DocParam.CB1') + $('DocParam.CB2') + $('DocParam.CB3') + $('DocParam.CB4')';'F0') == '1'"> <Label Content="Eine Checkbox angewählt"></Label> </Row> <Row Bind="IsVisible: Calc('$('DocParam.CB1') + $('DocParam.CB2') + $('DocParam.CB3') + $('DocParam.CB4')';'F0') == '2'"> <Label Content="Zwei Checkboxen angewählt"></Label> </Row> <Row Bind="IsVisible: Calc('$('DocParam.CB1') + $('DocParam.CB2') + $('DocParam.CB3') + $('DocParam.CB4')';'F0') == 3"> <Label Content="Drei Checkboxen angewählt"></Label> </Row> <Row Bind="IsVisible: Calc('$('DocParam.CB1') + $('DocParam.CB2') + $('DocParam.CB3') + $('DocParam.CB4')';'F0') == 4"> <Label Content="Vier Checkboxen angewählt"></Label> </Row> <Button Type="Submit" Label="OK" IsDefault="true" /> <Button Type="Cancel" Label="Abbrechen" /> </View> </Views> </Configuration> |
...