define tag

<define-tag>

Synopsis

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.

Usage

<define-tag name="TAG_NAME" value="TAG_VALUE" type="TAG_TYPE" initialValue="INITIAL_VALUE"/>

Attributes

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 to Thing.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.

Examples

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.

See Also

1. View Models - some view model examples in the Views documentation.