1. Outline

A text box is a control that allows the app user to enter text. The contents entered into a text box can be stored in a database, and processing can be branched out based on the judgment of the retrieved contents.
In the following, we will use the term "2. Development GuidanceYou can download sample programs for frequently used functions in the text box at3. Parameterssection provides a reference to the parameters to be set in the text box.

2. Development Guidance

This article introduces parameter settings that are commonly used to familiarize you with text boxes. The sample projects used in the explanation can be downloaded from the following links.

control_text.zip

2-1. Create text with placeholders

2-1-1. Set placeholders

Placeholders can be set to display a message when nothing is entered in a text box. It is useful for filling in input guides and other information.
In the Properties area, go to Data Placeholders and set what you want to appear in the text box. Similarly, from "Data" "Contents" you can set initial values for text boxes.

2-1-2. Set the design

The design of the text box is set in the Properties area under Design Color and Shape.

Here, the normal font and border colors are set to dark blue, and the placeholders are set to light gray.

Check Wrap text and multi-line input, set display content to top-left alignment and larger thickness.

2-2. Display error messages for input contents

Creating Error Message Output Logic

You can set an input suffix to detect when you do not want certain characters, such as passwords or file names, to be entered. The logic for outputting an error message when detected can be configured to display an error message when a specific single-character input is detected.

Creating Logic

Before we get into setting up the text box, we need to create the logic that will be set up in the text box.

From the "Process" design function, set the "Message"/"Show Message Box" logic.

The logic is as follows "! " is not available" message appears.

2-2-3. Tie text boxes to logic

Return to the "Screen" design function, select the placed text box, set the logic created above to "Processing when specific suffix is detected" in "Object" "Behavior settings" in the Properties area, and set the "Specific suffix (hex)" to "21".
This sets up the "Specific Suffix Detection Processing" to be executed when a "! (exclamation mark) at the end of a text box entry.

21 is the value obtained by converting "!" to hexadecimal ASCII code.
"!" If you wish to implement error checking for characters other than "!", set the corresponding ASCII code for that character.
For ASCII codes, please refer to the following.
Wikipedia JIS X 0201
https://ja.wikipedia.org/wiki/JIS_X_0201

2-2-4. Gradation

The background color is set as a gradient.
Select the placed text box and choose a color from the "Background Color" column in the "Normal" row of the "Design" "Color and Shape" property area, then choose the "Gradient" setting.

2-2-5. With background image

Select the placed text box and in the Properties area, under Design Image, click on Standard Image and select an image file.

The position is set to the lower left, bottom and right aligned.

Select inscribed fit to fit the smaller height and width of the text control,
The image is scaled down while maintaining the aspect ratio.

2-3. Other operational settings

You can also set restrictions on "input content" such as half-width or full-width characters, as well as the length of character strings that can be input.
In addition, by checking the "Password" checkbox, the contents of the text box will be made invisible with the ● notation.
If "Pop-up Input" is checked, a window will pop up to allow you to type in the text box.

2-4. Linking to databases

2-4-1. Preparing tables

Create a table to link with the database. In the sample project, it is defined as "Product Master".

Register "Item Name", "Physical Item Name" and "Type" in "Design" of the created table, respectively.

Prepare the following data in the stored data.

Set up a data form on the form.
Click where no controls are placed on the form, and set "Product Master" created above to "Table Name" under "Data" "Contents".

2-4-2. Display the contents of the product master table in a table

Prepare a table as a view to display the contents of the database in real time.

Create a table control and select "Data" "Contents" "Form".

Since the stored data described above created 3 cases, the number of displayed cases is set to 3.

Press the Display Item button to display the "Display Item Settings" screen, and set the items as shown in the figure below.

2-4-3. Set up data forms

Select the text, then select the form under Data Contents.
The field name is set to price.

3. Parameters

By changing the parameters, you can easily set the position and size of text boxes, colors and shapes, and images to be displayed, so let's take advantage of them to create a well-designed, easy-to-understand screen.
In addition, by setting up actions to be invoked during screen operations, you can make the app perform various actions when the app user types in a text box or when he/she types in a text box.

object

Basic information and behavior settings for text boxes are set from "Object". By making the text box inactive, it is possible to set up a text box that becomes active only when the app user performs certain operations, etc.

Basic Information

operation setup

Note] About IME control

If you are using an IME other than Microsoft IME (Japanese), the operation of the IME control function is not guaranteed.

Note: If only numerical values are entered

Even if the input is only numbers, some characters can be entered in addition to Arabic numerals. Which characters can be entered depends on the operating system.

possibility

data

Settings for text and images to be displayed in text boxes are made in the "Data" section. In addition to direct input, text extracted from a form or database can be displayed.

Contents

value entry

Sets the text display in the text box for direct input.

form

Sets the text display in a text box when the text is entered using a data form.

table

Set this option if the text display in a text box is to be entered using a database, rather than being set in advance.

placeholder

value entry

Sets the placeholder text display for direct input.

form

Sets the character display for placeholders when they are entered using data forms.

table

Set this option if the character display for placeholders is to be entered using a database, rather than being set in advance.

design

To set the color, shape, and image of a text box regardless of style, change "Design". The design of the text box can be set in detail.

Color and Shape

Change image

Vertical/horizontal alignment of text (example)

Text: Aligned at top left Text: Aligned at center Text: Aligned at bottom right

 

Gradient (example)

image

Image display position (example)

Single-sided fitting of an image (e.g.)

ruled line