1. Outline
Buttons are the central controls for application operation that can invoke pre-defined actions from screen operations such as touch and click. Colors and shapes can be changed, and images can be displayed to create a well-designed button.
In the following, we will use the term "2. Development GuidanceYou can download sample programs for frequently used functions on the button at3. Parameterssection provides a reference for the parameters to be set on the button.
2. Development Guidance
This article introduces parameter settings that are frequently used to familiarize you with the buttons. The sample projects used in the explanation can be downloaded from the following links.
2-1. Create a triangular button
With the button selected, go to Data Contents in the Properties area and empty the text to be displayed on the button. By default, it is labeled "button.
Sets the background color of the button.
In the Properties area, go to Design Color and Shape and select a shape.
Setting the button type to B results in a flat type design.
2-2. Making round and thick buttons
button to display text. Set from "Data" "Contents" in the Properties area.
Center the text, set the fill to blue, the shape to 0, and the button type to A.
In the Properties area, under Design Color and Shape, set Button Type to A to apply thickness, indentation when pressed, and color inversion.
2-3. Create a gradient button that displays an image when pressed
2-3-1. Gradation settings
Gradients are set in the Properties area under Design Color and Shape Fill Gradient Gradient Settings.
2-3-2. Image settings
Image settings are configured from "Design" "Image" in the Properties area, under "Push Image".
A dialog box will open, select the image file you wish to set.
You can also set the position of the image within the button. In the following, the image is set to the lower right corner. The set images are encrypted and stored in the application.
2-4. Display resource images on buttons
2-4-1. Resource Registration
First, register the resource image.
Once a resource image is registered, the registered image can be called up in various places in the application.
Select "Properties" from the TOP menu to open the Properties screen, select the "Resources" tab, and set the keywords and images as shown below.
2-4-2. Connecting buttons to resources
Select the button "Data" "Resource Image" in the Properties area, tick "Resource" and enter the text "Home". Resource images for keywords that match the text entered here will be displayed on the button.
In this example, the icon of the residence registered as "home" will be displayed in the resource.
2-4-3. Changing images by button operation
Logic must be created when changing images.
Select the process design function and create the following logic
In #1, first get the letter of the button (e.g., home). In the IF branch processing in #2, if the character obtained in #1 is home, move to the logic to change the button character from home to work in #3, otherwise move to the logic to change the button character from other than home to home in #5.
2-4-4. Tie a button to a process
The logic created above is registered to the button.
By setting the logic created above in "Object" "Behavior Setting" "Execution Processing", it will be possible to switch between home and work every time a button is pressed.
2-5. Branching processing by the time the button is pressed
2-5-1. Creating Logic
Create three patterns of logic.
Change the text displayed on the label to the right of the button to "Execution process (complete)".
The text displayed on the label to the right of the button is changed to "long press (complete)".
Change the text displayed on the label to the right of the button to "Pressed moment".
2-5-2. Tie a button to a process
By setting the above three logic items in the "Execution Processing," "Long Press Processing," and "Instant Processing" sections under "Object" "Behavior Settings," the text displayed on the label to the right of the button will change after a short (less than 1 second), instantaneous, and long (more than 1 second) press of the button, respectively. The text displayed on the label to the right of the button changes after a short press (within 1 second), the moment the button is pressed, or a long press (longer than 1 second).
3. Parameters
By changing the parameters, you can easily set the position and size of buttons, colors and shapes, and images to be displayed, so 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, app users can make the app perform various actions when they touch or click a button.
object
Basic information and behavior settings for buttons are set from "Object". By making the button inactive, it is also possible to install a button that becomes active only when the app user performs a specific operation, etc.
Basic Information
| name | Name of button. For example, if you want a button to have a behavior from the processing logic, Designate a button with this name. By default, "button + sequential number". It will be. |
|---|---|
| Size | The width and height of the button can be specified in fine increments of 1 pixel. |
| position | You can specify the position of the button. The starting point is the upper left corner of the screen. |
| margin | You can create a blank area on a button where no text or image is displayed. Specified by the distance from the top and bottom of the button to the left and right. |
| type | You can check the type of control. No changes can be made. |
| style | By selecting from the pre-defined styles, parameters such as colors, borders, etc. can be easily changed. The following table shows the settings for the |
Button style (example)
operation setup
| Destination | By setting the destination screen, the user is redirected to the relevant screen at the time of button operation. You can set up. Also set by dragging the destination screen and dropping it on the target button. The following is an example of a product that can be used in this way. |
|---|---|
| executable process | Set the process to be executed after the button is touched or clicked and released. The following is a summary of the results of the study. |
| long press (of button, esp. mobile phones) | Sets the process to be executed when the button is pressed and held (for 1 second or longer). |
| pushdown processing | Sets the process to be executed at the moment the button is pressed. |
possibility
| available | By unchecking this checkbox, the button can be deactivated (operation disabled). Used when installing a button that cannot be pressed until certain conditions are met I will do so. |
|---|---|
| display | Uncheck this box to hide the button. This is used when installing a button that will not be displayed until certain conditions are met. |
data
Settings for text and images to be displayed on buttons are made in the "Data" section. In addition to direct input, text extracted from a form or database can be displayed.
Contents
value entry
Set the text display within the button for direct input.
| character | You can enter text that will appear on the button. |
|---|---|
| blank form | of the displayed text.format ruleSet the |
form
Set this option if the text display in the button is to be entered using a data form instead of setting it in advance.
| Field Name | The table set in the form is used as the destination for display content. Select a field (column). |
|---|---|
| blank form | of the displayed text.format ruleSet the |
| available | When a button is placed in a sub form list, the availability settings for each row Select the fields to be retrieved. |
| display | When a button is placed in a subform list, the display settings for each row Select the fields to be retrieved. |
| foreground | When a button is placed in a subform list, the foreground color setting for each row Select the fields to be retrieved. |
| background color | When a button is placed in a sub form list, the background color setting for each row Select the fields to be retrieved. |
table
Set this option if the text display in the button is to be entered using a database instead of being set in advance.
| table name | Select the table from which to retrieve the display content. |
|---|---|
| Field Name | Select the field (column) in the table from which to retrieve the display content. |
| blank form | of the displayed text.format ruleSet the |
| available | When a button is placed in a sub form list, the availability settings for each row Select the fields to be retrieved. |
| display | When a button is placed in a subform list, the display settings for each row Select the fields to be retrieved. |
| foreground | When a button is placed in a subform list, the foreground color setting for each row Select the fields to be retrieved. |
| background color | When a button is placed in a sub form list, the background color setting for each row Select the fields to be retrieved. |
Resource Image
| Resources | Check the Resource checkbox, and then select the button as the button's display content. If you set the keywords* for the separately set resource image, button to display a resource image. |
|---|
*For resource images, see "2. Development Guide Button 4 - Resource ImageSee also
design
To set the color, shape, and image of a button regardless of style, change "Design". The button design can be set in detail.
Color and Shape
| font | Specifies font type. |
|---|---|
| Size | Specifies the font size. |
| bold-type | Check this box if you want to bold text. |
| image | Check this box if you want to add shadows to the text. |
| underline | Select the underline for the text from [None], [Underline], or [Double Underline]. |
| stroke-count line | Check this box if you want to put a strikeout on the text. |
| by return | Check this box if you want the text to wrap around. |
| multiline (command, e.g.) | Check this box if you want to enter the value of the display content on multiple lines. |
| Shrink to Fit | When the content does not fit within the control, the font size will be automatically adjusted to fit the content inside. |
| vertical alignment | Select the text position in the button from [Align Top], [Align Center Top], [Align Bottom], or [Align Bottom]. Selection. |
| horizontal arrangement | Select the position of the text in the button from [Align Left], [Align Center], or [Align Right]. Selection. |
| normal font | Specifies the font color during normal operation. |
| Normal Fill | Specifies the normal background color. |
| Normal ruled/box lines | Specifies the color of the ruled/framed lines during normal operation. |
| unavailable font | Specifies font color when operation is disabled. |
| unavailable fill | Specifies the background color when the operation is disabled. |
| Unavailable ruled lines/frames | Specifies the color of the ruled/border line when the operation is disabled. |
| form | Specifies the shape of the button. |
| Button type | Design type when the button is thicker or when the button is pressed. You can choose the expression, etc. |
| line thickness | Specifies the thickness of the line. |
| roundness | Specifies the roundness of the button corners. |
| thickness | Specifies the thickness of the button. |
Change image
Vertical/horizontal alignment of text (example)
Text: Aligned at top left Text: Aligned at center Text: Aligned at bottom right
|
|
|
|
Normal Fill Gradient (Example)
|
|
image
| Standard Image | You can set the image that is displayed during normal operation. |
|---|---|
| Image Deletion | You can clear the standard image settings. |
| pressed image |
You can set the image that is displayed while the button is pressed. To delete an image, click the Delete Image button. |
| Invalid standard image |
You can set the image to be displayed when the operation is disabled. To delete an image, click the Delete Image button. |
| invalid pressed image |
You can set the image that is displayed while the button is held down when the operation is disabled. To delete an image, click the Delete Image button. |
| Image display position (vertical) | The image display position in the button can be set to [Align Top], [Align Center Top and Bottom], or [Align Bottom]. Select from any of the following. |
| Image display position (horizontal) | The image display position in the button can be set to [Align Left], [Align Left], [Align Center], [Align Right], or [Align Right]. Select from any of the following. |
| Single-sided fit | Resize the image so that it fits inside the button. [no setting][inscribed fit][circumscribed fit][circumscribed fit][horizontal and vertical fit Select from any of the following. |
Image display position (example)
|
|
|
|
Single-sided fitting of an image (e.g.)
|
|
|
|
|
ruled line
| top kind | Specifies the type of upper ruled line. |
|---|---|
| overglaze | Specifies the color of the upper border. |
| lower kinds | Specifies the type of lower border. |
| underglaze color | Specifies the color of the lower border. |
| left kind | Specifies the type of left border. |
| left-handedness | Specifies the color of the left border. |
| Right kind | Specifies the type of right border. |
| dark indigo (almost black) | Specifies the color of the right border. |
| Backslash type | Specifies the type of backspace ruled line. |
| backslash | Specifies the color of the backslash border. |
| / Type | / Specify the type of ruled line. |
| /Color | / Specifies the color of the top border. |