In order to extend an existing field you must subclass a built in field (e.g
FieldTextInput
, FieldColour
) and then modify part of it to fit your needs.
Some parts of a field you can modify are:
- Its editor.
- Its on-block display.
- The text it displays.
If you want to create a
custom field
that does not need behaviour from any built-in field you should subclass Field
.
Common extensions
Most custom fields extend one of these three types:
- Text Input
- If you want your users to type into your field, you should extend
FieldTextInput
. - Number
- If you want to store a number, you should extend
FieldNumber
. - Dropdown
If you want to create a dropdown, but you want it to store a different model than the default string model, you should extend
FieldDropdown
.
Under certain circumstances you may wish to extend a different field type. For
example FieldLabelSerializable
extends FieldLabel
.
Subclassing
'use strict';
goog.provide('MySubclassName');
goog.require('MySuperclassName');
MySubclassName = function(opt_value, opt_validator) {
opt_value = this.doClassValidation_(opt_value);
if (opt_value === null) {
opt_value = MySubclassName.DEFAULT_VALUE;
} // Else the original value is fine.
MySubclassName.superClass_.constructor.call(this, opt_value, opt_validator);
};
Blockly.utils.object.inherits(MySubclassName, MySuperclassName);
The constructor for a field's subclass looks very similar to the constructor for
a custom field. Simply replace MySubclassName
with the name of your new field,
and replace MySuperclassName
with the name of the field you are subclassing
(e.g. Blockly.FieldWhatever
). The signature of the sub-constructor should
generally match the signature of the super-constructor.
For more information about constructors see Implementing a constructor.
JSON and registration
You should also be sure to register the field so that it works with the JSON format.
MySubclassName.fromJson = function(options) {
var value = Blockly.utils.replaceMessageReferences(options['value']);
return new MySubclassName(value);
};
Blockly.fieldRegistry.register('field_my_subclass', MySubclassName);
Registering an extended field works the same as registering a custom field.
Just replace MySubclassName
with your new field, and replace
'field_my_subclass'
with the JSON field name you want.
For more information about registering a field see the JSON and registration section in Creating a Custom Field.