This project is read-only.

TextBox Control, Override Input Type

This example shows how to override the value of the type attribute of the input element that is rendered for the TextBox. This can be useful for date, date and time, password fields etc.

See interactive example on http://www.redui.net

UI Model

{
    "windows": [
        {
            "name": "InputTypeExample",
            "title": "TextBox With Overriden Input Type Example",
            "left": 500,
            "top": 100,
            "width": 400,
            "height": 500,
            "controls": [
                {
                    "name": "standardTextBox",
                    "type": "textbox",
                    "label": "Text, Default Option",
                    "bindsTo": "text"
                },
                {
                    "name": "fileTextBox",
                    "type": "textbox",
                    "label": "File",
                    "bindsTo": "fileName",
                    "inputType": "file"
                },
                {
                    "name": "passwordTextBox",
                    "type": "textbox",
                    "label": "Password",
                    "bindsTo": "password",
                    "inputType": "password"
                },
                {
                    "name": "dateTextBox",
                    "type": "textbox",
                    "label": "Date",
                    "bindsTo": "date",
                    "inputType": "date"
                },
                {
                    "name": "OKButton",
                    "type": "button",
                    "text": "OK",
                    "isDialogButton": true,
                    "dialogResult": "OK"
                },
                {
                    "name": "CancelButton",
                    "type": "button",
                    "text": "Cancel",
                    "isDialogButton": true,
                    "dialogResult": "Cancel"
                }
            ]
        }
    ]
}

TextBox Control, Override Input Type

var data = {
	text: "",
	fileName: "",
	password: "",
	date: "",
};

Code

var exampleWindow = redui.createNewWindow("InputTypeExample");
exampleWindow.bind(data);
exampleWindow.show();

exampleWindow.closed(function (target, dialogResult) {
	if (dialogResult === "OK") {
		alert("Model data: " + JSON.stringify(data));
	}
});


.

Last edited Dec 12, 2013 at 11:32 PM by artemkv, version 1

Comments

No comments yet.