Textbox
Guide for using textbox in your applications
Overview
This guide will show how to use textbox in your applications. See how easy it is to drag and drop textbox onto your forms and connect them to your business logic. textbox can be modified, styled and even changed at runtime.
To see a live sample of the component you can go here.
Get Started
Modifying a textbox at Design-Time
Textbox, like all components, have properties which can be modified at design-time to set the appearance and behavior of the component. Select the textbox in the Form Editor to see a list of properties in the Component Properties Editor. Below are some common properties and how to set them at design-time.
Setting the placeholderText
The text displayed inside the textbox can be modified by setting its placeholderText
property. This will just be plain text which will be shown as an instruction on what you can do within the textbox. When you insert a value in the textbox the placeholderText will disappear and your inserted text will take it's place. For more options open the Text Property Editor.
Setting the tooltipText
TextBox, like many components, can display tooltip messages when a user hovers their cursor. Most often, this will just be plain text that describes what will happen on-click. In this case, just enter the value into the editor. For more options open the Text Property Editor.
Styling
Like all components, a textbox can be styled using themes, variants and raw CSS. To apply any available style class, simply enter one or more space-delimited values for the styleClass
property.
Handling Events
Like most components, textbox have events, which allow you to execute some logic when something happens in the UI. Of course, the most common event for a textbox is the onDataChange
event, which is triggered when the textbox is clicked or the user hits the Enter
key while the textbox has focus.
To Handle the event, double-click the value for the onDataChange
property in the Properties Editor. You will see the Method Selection Wizard. You'll have the option select an existing Method or create a new Method. The method will be called when the TextBox's onDataChange
event is fired and the Event object will be passed to it.
See the textbox reference for comprehensive list of all events
Modifying a textbox at Runtime
textbox, like many components, can be modified at runtime through code. Below are a few examples of controlling a textbox from code.
Enabling / Disabling a textbox (delete/change if not the case)
You can easily change the enabled
state of a textbox at runtime.
Hiding/Showing a textbox (delete/change if not the case)
You can easily change the visible
state of a textbox at runtime.
Calling textbox API Methods
Like most components, a textbox has API methods which can be called from code. Below is an example of common API calls.
Give Keyboard Focus ()
You can easily give keyboard focus to a textbox using the requestFocus
method.
Add CSS Style Class ()
You can easily add a style class to a textbox using the addStyleClass
method.
Related Articles
The following articles are recommended for additional reading:
Last updated