define tag - shannah/CodeRAD GitHub Wiki
Defines a Tag with the name specified by the name attribute, and adds a property of the same name to the view model for this view. The property would be "tagged" with this tag.
- name
-
The tag name. A string that should be suitable as a Java variable name. E.g. Must start with a letter, and can contain only letters, digits, and underscores.
- value
-
(Optional). If this value is provided, the tag will be an alias of the tag specified by value. This is useful if the tag is conceptually the same as an existing tag defined in the schemas package. It is good practice to try to make use of the core schema tags as much as this will allow generic CodeRAD UI components to use them more effectively as models. E.g. If you have a name tag, then you should set value to
Thing.name. An email attribute should be set toThing.email, etc…If this attribute is omitted, the tag is created as a new tag.
- type
-
(Optional) Specifies the Java type of for the view model property. Default is
java.lang.String. - initialValue
-
Optional. Specifies a value that this property should be initialized when a new view model instance is created. I this is not specified, then properties are initialized to
null, appropriate default on primitive fields.
The following example is taken from the Tweetapp demo app. It creates a number of tags that are used throughout the view.
<?xml version="1.0"?>
<border view-controller="com.example.tweetapp.controllers.SignupPageViewController"
uiid="SignupPage"
safeArea="true"
xsi:noNamespaceSchemaLocation="SignupPage.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<define-category name="NEXT"/>
<define-category name="USE_PHONE"/>
<define-category name="USE_EMAIL"/>
<define-category name="ENTER_PHONE_OR_EMAIL"/>
<define-tag name="name" value="Person.name"/>
<define-tag name="phone" value="Person.telephone"/>
<define-tag name="email" value="Person.email"/>
<define-tag name="birthDate" value="Person.birthDate" type="java.util.Date"/>
<define-tag name="useEmail" type="boolean"/>
<define-tag name="editingPhoneOrEmail" type="boolean"/>
<define-tag name="phoneFieldFocused" type="boolean"/>
<define-tag name="emailFieldFocused" type="boolean"/>
<!-- Properties for error messages -->
<define-tag name="nameErrorMessage"/>
<define-tag name="phoneOrEmailErrorMessage"/>
<define-tag name="birthDateErrorMessage"/>
<title>
<label iconUIID="TwitterIcon" fontIcon="(char)0xe902" ></label>
</title>
<y layout-constraint="center" uiid="SignupPageContent" scrollableY="true">
<label uiid="SignupPageTitle">Create your account</label>
<radTextField
tag="Person.name"
component.hint="Name"
component.uiid="TwitterTextField"
component.hintLabel.uiid="TwitterTextFieldHint"
/>
<radLabel tag="nameErrorMessage"
bind-hidden="${nameErrorMessage}.isEmpty()"
rad-transition="hidden 0.3s"
component.uiid="FieldErrorMessage"
/>
<button uiid="PhoneOrEmailButton"
text="Phone number or email address"
bind-hidden="${editingPhoneOrEmail}.bool"
>
<script>
it.addActionListener(evt -> {
evt.consume();
it.getComponentForm().setFormBottomPaddingEditingMode(true);
${editingPhoneOrEmail}.setBoolean(true);
if (${useEmail}.bool) {
emailTextField.getComponent().startEditingAsync();
} else {
phoneTextField.getComponent().startEditingAsync();
}
});
</script>
</button>
<radTextField
rad-var="phoneTextField"
tag="phone"
bind-component.focus="phoneFieldFocused"
bind-hidden="${useEmail}.bool || !${editingPhoneOrEmail}.bool"
component.hint="Phone number"
component.uiid="TwitterTextField"
component.hintLabel.uiid="TwitterTextFieldHint"
component.constraint="TextArea.PHONENUMBER"
/>
<radTextField
rad-var="emailTextField"
bind-hidden="!${useEmail}.bool || !${editingPhoneOrEmail}.bool"
tag="email"
component.hint="Email address"
component.uiid="TwitterTextField"
component.hintLabel.uiid="TwitterTextFieldHint"
component.constraint="TextArea.EMAILADDR"
bind-component.focus="emailFieldFocused"
>
</radTextField>
<radLabel tag="phoneOrEmailErrorMessage"
bind-hidden="${phoneOrEmailErrorMessage}.isEmpty()"
rad-transition="hidden 0.3s"
component.uiid="FieldErrorMessage"
/>
<radDatePicker
tag="birthDate"
component.text="Date of birth"
component.uiid="TwitterDatePicker"
/>
<radLabel tag="birthDateErrorMessage"
bind-hidden="${birthDateErrorMessage}.isEmpty()"
rad-transition="hidden 0.3s"
component.uiid="FieldErrorMessage"
/>
</y>
<border layout-constraint="south" uiid="SignupPageSouth">
<x layout-constraint="west">
<button text="Use Email Address"
bind-hidden="!${phoneFieldFocused}.bool"
uiid="TextFieldToggleButton"
>
<script>
it.addActionListener(evt->{
${useEmail}.setBoolean(true);
emailTextField.startEditingAsync();
});
</script>
</button>
<button text="Use Phone"
bind-hidden="!${emailFieldFocused}.bool"
uiid="TextFieldToggleButton"
>
<script>
it.addActionListener(evt->{
${useEmail}.setBoolean(false);
phoneTextField.startEditingAsync();
});
</script>
</button>
</x>
<x layout-constraint="east">
<button uiid="TwitterNextButton" text="Next">
<bind-action category="NEXT"/>
</button>
</x>
</border>
</border>See Full source
Also see the SignupPageViewController to see how the generated view model class is used from Java.
-
View Models - some view model examples in the Views documentation.