Class InputComponent

java.lang.Object
com.codename1.ui.Component
com.codename1.ui.Container
com.codename1.ui.InputComponent
All Implemented Interfaces:
Animation, Editable, StyleListener, Iterable<Component>
Direct Known Subclasses:
PickerComponent, TextComponent
public abstract class InputComponent extends Container

A base class for com.codename1.ui.TextComponent, com.codename1.ui.PickerComponent and potentially other components that wish to accept input in a dynamic way that matches iOS and Android native input guidelines.

It is highly recommended to use input components in the context of a com.codename1.ui.layouts.TextModeLayout. This allows the layout to implicitly adapt to the on-top mode and use a box layout Y mode for iOS and other platforms.

This class supports several theme constants:

  • textComponentErrorColor a hex RGB color which defaults to null in which case this has no effect. When defined this will change the color of the border and label to the given color to match the material design styling.

  • textComponentErrorLineBorderBool when set to false, this will prevent the text component from applying an underline border when there is a validation error. Defaults to true.

  • textComponentOnTopBool toggles the on top mode see #onTopMode(boolean)

  • textComponentFieldUIID sets the UIID of the text field to something other than TextField which is useful for platforms such as iOS where the look of the text field is different within the text component

  • inputComponentErrorMultilineBool sets the error label to multiline when activated

The following code demonstrates a simple set of inputs and validation as it appears in iOS, Android and with validation errors

TextModeLayout tl = new TextModeLayout(3, 2);
Form f = new Form("Pixel Perfect", tl);

TextComponent title = new TextComponent().label("Title");
TextComponent price = new TextComponent().label("Price");
TextComponent location = new TextComponent().label("Location");
PickerComponent date = PickerComponent.createDate(new Date()).label("Date");
TextComponent description = new TextComponent().label("Description").multiline(true);

Validator val = new Validator();
val.addConstraint(title, new LengthConstraint(2));
val.addConstraint(price, new NumericConstraint(true));

f.add(tl.createConstraint().widthPercentage(60), title);
f.add(tl.createConstraint().widthPercentage(40), date);
f.add(location);
f.add(price);
f.add(tl.createConstraint().horizontalSpan(2), description);
f.setEditOnShow(title.getField());

f.show();

  • Constructor Details

    • InputComponent

      protected InputComponent()
      Protected constructor for subclasses to override

  • Method Details

    • group

      public static void group(Component... cmps)

      Groups together multiple text components and labels so they align properly, this is implicitly invoked by com.codename1.ui.layouts.TextModeLayout so this method is unnecessary when using that layout

      Parameters
      • cmps: @param cmps a list of components if it's a text component that is not in the on top mode the width of the labels will be aligned

    • isMultiLineErrorMessage

      public static boolean isMultiLineErrorMessage()

      True if error messages should be multiline by default. This can be set via the theme constant inputComponentErrorMultilineBool

      Returns

      the multiLineErrorMessage

    • setMultiLineErrorMessage

      public static void setMultiLineErrorMessage(boolean aMultiLineErrorMessage)

      True if error messages should be multiline by default. This can be set via the theme constant inputComponentErrorMultilineBool

      Parameters
      • aMultiLineErrorMessage: the multiLineErrorMessage to set

    • initInput

      protected final void initInput()
      This method must be invoked by the constructor of the subclasses to initialize the UI

    • createErrorLabel

      protected TextHolder createErrorLabel()

      Can be overriden by subclasses to support custom error label components

      Returns
      Returns:
      Component instance such as JLabel, TextArea etc. usually with the ErrorLabel UIID

    • calcPreferredSize

      protected Dimension calcPreferredSize()
      Description copied from class: Container

      Calculates the preferred size based on component content. This method is invoked lazily by getPreferred size.

      Returns

      the calculated preferred size based on component content

      Overrides:
      calcPreferredSize in class Container

    • getEditor

      public abstract Component getEditor()

      Returns the editor component e.g. text field picker etc.

      Returns

      the editor component

    • onTopMode

      public InputComponent onTopMode(boolean onTopMode)

      Sets the on top mode which places the label above the text when true. It's to the left of the text otherwise (right in bidi languages). This is determined by the platform theme using the textComponentOnTopBool theme constant which defaults to false

      Parameters
      • onTopMode: true for the label to be above the text
      Returns

      this for chaining calls E.g. TextComponent tc = new TextComponent().text("Text").label("Label");

    • isOnTopMode

      public boolean isOnTopMode()

      Indicates the on top mode which places the label above the text when true. It's to the left of the text otherwise (right in bidi languages). This is determined by the platform theme using the textComponentOnTopBool theme constant which defaults to false

      Returns

      true if the text should be on top

    • errorMessage

      public InputComponent errorMessage(String errorMessage)

      Sets the text of the error label

      Parameters
      • errorMessage: the text
      Returns

      this for chaining calls E.g. TextComponent tc = new TextComponent().text("Text").label("Label");

    • descriptionMessage

      public InputComponent descriptionMessage(String descriptionMessage)

      Sets the text of the description label which currently only applies in the onTop mode. This text occupies the same space as the error message and thus hides when there's an error

      Parameters
      • descriptionMessage: the text
      Returns

      this for chaining calls E.g. TextComponent tc = new TextComponent().text("Text").label("Label");

    • label

      public InputComponent label(String text)

      Sets the text of the label

      Parameters
      • text: the text
      Returns

      this for chaining calls E.g. TextComponent tc = new TextComponent().text("Text").label("Label");

    • actionUIID

      public InputComponent actionUIID(String uiid)

      Sets the UIID for the action button

      Parameters
      • uiid: a custom UIID for the action
      Returns

      this for chaining calls E.g. TextComponent tc = new TextComponent().text("Text").label("Label");

    • getActionUIID

      public String getActionUIID()

      UIID for the action button

      Returns

      the UIID

    • actionAsButton

      public InputComponent actionAsButton(boolean asButton)

      Indicates the action should behave as a button next to the component and not layered on top of the text component. This is useful for UI in the style of a browse button next to a text field.

      Parameters
      • asButton: true so the action will act like a button
      Returns

      this for chaining calls E.g. TextComponent tc = new TextComponent().text("Text").label("Label");

    • isActionAsButton

      public boolean isActionAsButton()

      Indicates the action should behave as a button next to the component and not layered on top of the text component. This is useful for UI in the style of a browse button next to a text field.

      Returns

      true if the action acts as a button

    • actionText

      public InputComponent actionText(String text)

      Provides the text of the action button

      Parameters
      • text: the text that should appear on the action button
      Returns

      this for chaining calls E.g. TextComponent tc = new TextComponent().text("Text").label("Label");

    • getActionText

      public String getActionText()

      Provides the text of the action button

      Returns

      the text of the action

    • action

      public InputComponent action(char icon)

      Sets the icon for the action button

      Parameters
      • icon: the icon constant from com.codename1.ui.FontImage
      Returns

      this for chaining calls E.g. TextComponent tc = new TextComponent().text("Text").label("Label");

    • actionClick

      public InputComponent actionClick(ActionListener c)

      Binds an event for the action button

      Parameters
      • c: action listener callback
      Returns

      this for chaining calls E.g. TextComponent tc = new TextComponent().text("Text").label("Label");

    • getAction

      public Button getAction()

      Returns the button underlying the action button that is placed on the right of the field on top of it

      Returns

      a button for manual customization

    • getPropertyValue

      public Object getPropertyValue(String name)

      Returns the current value of the property name, this method is used by the GUI builder

      Parameters
      • name: the name of the property
      Returns

      the value of said property

      Overrides:
      getPropertyValue in class Component

    • setPropertyValue

      public String setPropertyValue(String name, Object value)

      Sets a new value to the given property, returns an error message if failed and null if successful. Notice that some builtin properties such as "$designMode" might be sent to components to indicate application state.

      Parameters

      • name: the name of the property

      • value: new value for the property

      Returns

      error message or null

      Overrides:
      setPropertyValue in class Component