AI Development Combat 4-Customization of text input box (textbox) 1

4 Customizing the Text input box (textbox) 4.1 Adding public properties and Functions

The text input box is also a commonly used component, and the components provided by APP Inventor2 already contain many properties and functions, but some commonly used properties are not available.

If the user enters a character in the text box, often has the character number limit, now develops a set string length the attribute, is convenient to use.

APP Inventor2 Default provides two kinds of text input box: password input box and ordinary text input box, the corresponding classes in the source code are: Passwordtextbox and textbox, both have common base class: TextBoxBase, The properties and functions of the input boxes are defined in Textbase.java, and the properties and related functions for setting string lengths are now added to this file.

The changes in Textbase.java are as follows:

Add a variable that represents the length of a string

private int textLength;

/** Adding a function to get the length of a string

* Returns the length of Thetextbox ' s text

*/

@SimpleProperty (

Category = Propertycategory.behavior,

Description = "Set the length Oftext")

public int TextLength () {

return textLength;

}

/** Add a function that sets the length of the string, the default value is 0

* Specifies the length of Thetextbox ' s text

* @param length

*/

@DesignerProperty (EditorType =propertytypeconstants.property_type_non_negative_integer,

DefaultValue = "0")

@SimpleProperty

public void TextLength (int length) {

this.textlength = length;

}

@SimpleProperty is an annotation used by app inventor that defines an attribute with the following source code:

/**

*annotation to mark simple properties.

*

*<p>both the getter and the setter method of the need to bemarked

*with this annotation.

*

*/

@Retention (Retentionpolicy.runtime)

@Target (Elementtype.method)

Public @interface SimpleProperty {

/**

*if Non-empty, description to use in User-level documentation.

*/

Stringdescription () Default "";

/**

* Category of property for User-level documentation. This is only needs

* To is specified in the setter or the getter, not both.

*/

Propertycategory category () default propertycategory.unset;

/**

* If false, the should not being accessible through codeblocks.

* This is added to support the Row and Column properties, so they could

* be indirectly set in the Designer and not accessed in Codeblocks.

*/

Boolean uservisible () default true;

}

The category can be assigned the following values:

public enum Propertycategory {

TODO (user): i18n category names

BEHAVIOR ("BEHAVIOR"),

Appearance ("Appearance"),

DEPRECATED ("DEPRECATED"),

UNSET ("Unspecified");

private String name;

Propertycategory (String CategoryName) {

name = CategoryName;

}

Public String GetName () {

return name;

}

}

@DesignerProperty define the type and default value of the property, the source code is as follows:

/**

*annotation to mark Properties to is visible in the ODE visual designer.

*

*<p>only the setter method of the property must is marked with this

*annotation.

*

*/

@Retention (Retentionpolicy.runtime)

@Target (Elementtype.method)

Public @interface Designerproperty {

/**

* Determines the property editor, used in the designer.

*

* @return Property type

*/

String EditorType () default propertytypeconstants.property_type_text;

/**

* Default value of property.

*

* @return Default Property value

*/

String defaultvalue () default "";

}

EditorType can be assigned a value defined in Propertytypeconstants.java, where it is assigned:

EditorType =propertytypeconstants.property_type_non_negative_integer

Represents a non-negative integer.

/** Adding a function to check the length of a string

* Check The length of test is OK or not.

*/

@SimpleFunction (

Description = "Check The length of test is OK or not.")

public Boolean checktextlength () {

if (textLength! = 0) {

if (Text (). Length () = = TextLength) {

Returntrue;

}else{

Returnfalse;

}

}else{

If the value of the property is 0, it means that there is no limit to the length

return true;

}

}

@SimpleFunction is the annotation used to define the function, the source code is as follows:

/**

*annotation to mark simple functions.

*

*<p>note that the simple compiler would only recognize Java methods marked

*with this annotation. All other methods'll be ignored.

*

*/

@Retention (Retentionpolicy.runtime)

@Target (Elementtype.method)

Public @interface Simplefunction {

/**

* If Non-empty, description to use in User-level documentation in PLACEOF

* Javadoc, which is meant for developers.

*/

String description () default "";

/**

* If false, the should not being accessible through codeblocks.

* This is added (1) by analogy to {@link simpleproperty#uservisible ()}

* and (2) to temporarily hide functions for opening additional screens

* In {@link com.google.appinventor.components.runtime.Form}.

*/

Boolean uservisible () default true;

}

Once you have defined the properties and functions, you also need to add declarations of properties and functions in Odemessages.java:

@DefaultMessage ("TextLength")

@Description ("")

String textlengthproperties ();

@DefaultMessage ("Checktextlength")

@Description ("")

String Checktextlengthmethods ();

So far, the properties and related functions have been successfully added, but the property names and function names are also shown in English in the Chinese context, and the Chinese strings need to be added in Odemessages_zh_cn.properties:

textlengthproperties = text length

Checktextlengthmethods = Check text length

The final implementation results are as follows:

You can see that in the component properties, there is one more property for setting the text length, where the value is set to 6.

Because it is added in the common base class of the Password input box and the text input box component, both the Password input box and the text input box inherit and have the added properties and functions.

In the work panel of the Password input box and text input box, you can see a number of functions that check the length of the text:

In the work panel, you can also set the text length:

Examples of use are: