TextField prototype for Tiny Mobile Widgets

Text Field is composed of :

a text layer (displays blank before text input, and the entered text after text input)
a background frame that can be displayed depending on 'backgndColor' field
a window border (around text layer) that has the same size than the text layer
a call to native window : displays the way of the device to enter text via keyboard (or virtual keyboard for touch screens)

Prototype can be activated/disabled through 'activate' boolean field for keyboard devices and through 'enabled' boolean field for touch screen devices.

The text displayed in text layer can be modified at anytime by user clicking into the textfield layer. It can also be modified from outside the prototype, by setting 'text' parameter.

The 'text' parameter providing current value of text is generated each time prototype modifies the text and can be accessed from outside the prototype.

PROTO TextField [
 exposedField SFString text ""
 exposedField SFInt32 maxChars 10
 exposedField SFVec2f translation 0 0
 exposedField SFVec2f size 64 16
 exposedField SFColor borderColor 1 0.4 0
 exposedField SFColor backgroundColor 1 1 1
 exposedField SFColor textColor 0 0 0
 exposedField SFBool activate TRUE #used for keysensor
 exposedField SFBool enabled TRUE #used for touchsensor (in case of multiple textfields in the same scene)
 
 # text labels used when displaying native text box
 field SFString nativeTextBoxTitle "Enter your text"
 field SFString nativeTextBoxOkLabel "OK"
 field SFString nativeTextBoxCancelLabel "Cancel"
]

Events

SFString text - enable to read or write text displayed in Text Field from outside the proto

Text Box parameters

SFInt32 maxChar - max number of characters, 0 for unlimited
SFVec2f size - specify height and width of text layer
SFVec2f translation - specify position of text layer
SFColor borderColor - border color of the text box
SFColor backgroundColor - background color into the textbox
SFColor textColor - main text color
SFBool activate - enable/disable Text field prototype

Touch parameter

SFBool enabled - if true Touch sensor is enabled

Native text box management

Text labels used when displaying native text box

SFString nativeTextBoxTitle
SFString nativeTextBoxOkLabel
SFString nativeTextBoxCancelLabel

EXTERNPROTO TextField [] "TextField.wrl"
EXTERNPROTO SizeNotifier [] "SizeNotifier.wrl"

Group {
  children [
    
    DEF SIZE_NOTIFIER SizeNotifier {}
    
	#background
    Shape {
      appearance Appearance {
        material Material2D {
          emissiveColor 1 1 1
        }
      }
      geometry DEF BACKGROUND Rectangle {
        size 128 128
      }
    }

    # type: TextField  
    DEF TEXTFIELD TextField {
        activate true
        nativeTextBoxTitle "type here" 
        nativeTextBoxOkLabel "ok"
		nativeTextBoxCancelLabel "cancel"
        maxChars 140   
        textColor 0.3 0.3 0.3
        size 123.8 38.4
    }
	
	DEF SCRIPT Script {
	    eventIn SFString text_modification
	    field SFNode textField USE TEXTFIELD
		field SFNode bgRec USE BACKGROUND
		
		url "javascript:
		
			function initialize() {
				Browser.sendMessage ('Board', 'INIT', 'Test TextField', '', 'Quit');
				updateScreenSize();
			}
			
			function sizeHandler () {
				if (sizeHandler[0] == 'SIZE_CHANGED') {
					updateScreenSize ();
				}
			}
			
			function updateScreenSize () {
				var w = Browser.getWidth();
				var h = Browser.getHeight();
				bgRec.size.y = h;
				if (w > 128) {
					bgRec.size.x = w;
					textField.size.x = 0.9 * w;
				}
			}

			function text_modification (t, val) {
				Browser.print('testTextField::text_modification() text = '+textField.text);
			}
		"
	}
  ]
  ROUTE TEXTFIELD.text TO SCRIPT.text_modification
}