|
- Overview
- Describing the different elements found in the Action Bar ("General" tab)
- Lhe left button of the Action Bar
- Left button
- Menu options displayed in the Action Bar
- In Android
- In iOS
- In Universal Windows 10 App
- Views/Tab bar
- Aspect of the Action Bar ("Details" tab)
- Overview
- Aspect of the Action Bar/NavBar
- Various
- Search in the Action Bar
Describing the Action Bar control
This help page presents the important points of the description window of the Action Bar control: Describing the different elements found in the Action Bar ("General" tab) The "General" tab is used to define the different elements of the Action Bar according to the platform used. These elements are the same in iOS and Android but they are organized in a different way.
The two interfaces are presented in an overview: the iOS interface on the left, the Android interface on the right. If your project is available on a single platform, only the corresponding interface will be enabled. To define the different elements of the Action Bar, all you have to do is click the numbers. Lhe left button of the Action Bar Left button The Action Bar replaces the title bar of the window: in Android: By default, the Action Bar displays the title of current window and a button corresponding to the application icon. in iOS: By default, the Action Bar displays the title of the current window and a button. in Universal Windows 10 App: By default, the Action Bar displays the title of the current window.
The title may not be displayed according to the elements displayed in the Action Bar. The option "1" of the "General" tab found in the description window of the Action Bar control is used to configure the different elements: - Button visible or not,
Button caption,   Displayed icon.
The user can click the left button displayed in the Action Bar of a window. The "Click on left button" event of the Action Bar is associated with this action. The description window of the Action Bar is used to configure the action of the click on the left button. You have the ability to select one of the following options: - Code: Run the click process of the control: The "Click on left button" event will be automatically run.
 Return: Run the return code (ie: close the window) : In this case: The application will run the "Click on left button" event. - The application will run the preset process used to go back to the previous window.
This preset process will not be run if the "Click on left button" event returns False (used to ask the user for confirmation, for example). - An arrow will be displayed in the top left corner of the icon to symbolize the navigation.
Remarks: - If the window displayed is the only application window, no default action will be run.
Only the "Click on left button" event will be run. - If the current window is closed, its closing code will be run.
For this type of action, the icon specified for the button is not displayed. The "Back" button can become an "OK" button at run time in the following cases: - the previous window has no Action Bar control. - the opening animation is not performed from right to left.
 Home: Go back to the first application window: In this case, the application: - Will run the "Click on left button" event.
- Will run the preset process: all windows still open are closed, except for the main window (which is re-opened if necessary). This preset process will not be run if the "Click on left button" event returns False (used to ask the user for confirmation, for example).
Remarks: - If the main window is already displayed or if the application has no main window, no default action will be run. Only the "Click on left button" event will be run.
- The closing code of closed windows will not be run.
Versions 19 and laterLeft sliding window: Opens the left sliding window: In this case, the application: - Will run the "Click on left button" event.
- Will run the preset process: the left sliding window defined in the description window will be displayed with the specified effect.
See Sliding window (sliding menu) for more details.
New in version 19Left sliding window: Opens the left sliding window: In this case, the application: - Will run the "Click on left button" event.
- Will run the preset process: the left sliding window defined in the description window will be displayed with the specified effect.
See Sliding window (sliding menu) for more details.
Left sliding window: Opens the left sliding window: In this case, the application: - Will run the "Click on left button" event.
- Will run the preset process: the left sliding window defined in the description window will be displayed with the specified effect.
See Sliding window (sliding menu) for more details.
Menu options displayed in the Action Bar In Android In a window without Action Bar, the main menu of the application is displayed at the bottom of the window. In a window with Action Bar, the main menu is a drop-down menu, displayed on the right of the Action Bar. In edit, a button with three lines is displayed. This button corresponds to the menu of the Action Bar. It is used to display the different menu options. At run time, this button displays the options found on the first level of the menu. If an option includes sub-options, a click performed on the option will replace it by the sub-options. No cascading display will be performed. Reminder: By convention, we advise you to have a single level of options. In Android, two types of menus can be managed in the Action Bar: - the drop-down menu,
- the options found in the Action Bar directly. Indeed, the size of the Action Bar may change according to the device used. If the Action Bar includes enough space, it may be interesting to display one or more options of the drop-down menu in the Action Bar. The system automatically manages the space problems and the overlap problems.
To manage the menu options found in the Action Bar: - Case 1: A window with menu is changed into a window with Action Bar: the menu of the window is automatically displayed in the Action Bar.
- Case 2: A window with Action Bar is created and you want to create the drop-down menu:
- In the "General" tab of the description window of the Action Bar, click "2" or "3" (toolbar options).
- Two lists are displayed.
- The "At the top right" list is used to define the options displayed in the Action Bar directly (see the next paragraph).
- The "At bottom/in the menu" list is used to define the menu options displayed in the drop-down menu of the Action Bar.
- Click "+" to add a new option: the added option can be modified in the lower section of the screen.
If the menu option is associated with an image, only the image will be displayed in the Action Bar.
Remark: Another method can be used to display a menu option in the Action Bar directly: - Open the description window of the menu option ("Description" in the popup menu).
- In the "UI" tab, check "Display this option as a button at the top right of the Action Bar (if there is enough space).".
- Validate.
Versions 18 and laterSpecial case: display the popup menu of a control in the Action BarA long press performed on a control is used to display the popup menu of control. This popup menu can be displayed in the Action Bar directly. To display a popup menu in the Action Bar directly: - Edit the popup menu that will be displayed in the Action Bar: 0.
- Display the description window of the popup menu ("Description of popup menu" from the popup menu).
- In the "General" tab, check "Move this popup menu into the Action Bar if it exists (displayed at run time on the device or on the emulator)".
- Validate.
The popup menu will be displayed in the drop-down menu of the Action Bar. To display the different menu options of the a popup menu in the Action Bar directly: - Display the description window of each option found in the popup menu ("Option description").
- In the tab "UI", check the box "Display this option as a button at the top right of the Action Bar (if there is enough space)."..
- Validate.
Remark: If the menu option is associated with an image, only the image will be displayed in the Action Bar. New in version 18Special case: display the popup menu of a control in the Action BarA long press performed on a control is used to display the popup menu of control. This popup menu can be displayed in the Action Bar directly. To display a popup menu in the Action Bar directly: - Edit the popup menu that will be displayed in the Action Bar: 0.
- Display the description window of the popup menu ("Description of popup menu" from the popup menu).
- In the "General" tab, check "Move this popup menu into the Action Bar if it exists (displayed at run time on the device or on the emulator)".
- Validate.
The popup menu will be displayed in the drop-down menu of the Action Bar. To display the different menu options of the a popup menu in the Action Bar directly: - Display the description window of each option found in the popup menu ("Option description").
- In the tab "UI", check the box "Display this option as a button at the top right of the Action Bar (if there is enough space)."..
- Validate.
Remark: If the menu option is associated with an image, only the image will be displayed in the Action Bar. Special case: display the popup menu of a control in the Action Bar A long press performed on a control is used to display the popup menu of control. This popup menu can be displayed in the Action Bar directly. To display a popup menu in the Action Bar directly: - Edit the popup menu that will be displayed in the Action Bar: 0.
- Display the description window of the popup menu ("Description of popup menu" from the popup menu).
- In the "General" tab, check "Move this popup menu into the Action Bar if it exists (displayed at run time on the device or on the emulator)".
- Validate.
The popup menu will be displayed in the drop-down menu of the Action Bar. To display the different menu options of the a popup menu in the Action Bar directly: - Display the description window of each option found in the popup menu ("Option description").
- In the tab "UI", check the box "Display this option as a button at the top right of the Action Bar (if there is enough space)."..
- Validate.
Remark: If the menu option is associated with an image, only the image will be displayed in the Action Bar. Aspect of the Action Bar ("Details" tab) Aspect of the Action Bar/NavBar The appearance of the Action Bar is configured via the "Edit bar style" button.. The settings window offers to set the following parameters: - the system bar.
- Action Bar.
For the system tray, the elements that can be configured are: - the background color used.
- text color.
Versions 19 and later Remark: It is possible to choose the system features for the system bar: "Dark text, transparent background" or "Light text, transparent background". New in version 19 Remark: It is possible to choose the system features for the system bar: "Dark text, transparent background" or "Light text, transparent background". Remark: It is possible to choose the system features for the system bar: "Dark text, transparent background" or "Light text, transparent background". - the method of recovery. The "Overlapping bar" option allows you to manage the transparency of the system tray. When this option is checked, the system tray becomes transparent.. It is then possible to set the opacity of the system bar using the Property ..Opacity. This Property can be used, for example, in the optional event of the "Elevator movement" window..
Caution: The option "Overlapping bar" changes the origin of the fields. Under the editor, the fields below the system tray are automatically moved.
For Action Bar, the elements that can be configured are: - the background color used.
- the color of the font used.
Versions 19 and later0. In this case, the selected icons must be monochrome. New in version 190. In this case, the selected icons must be monochrome. 0. In this case, the selected icons must be monochrome.  the background image of the Action Bar. 9-slice scaling is available. - the method of recovery. The "Overlapping bar" option allows to manage the transparency of the Action Bar. When this option is checked, the Action Bar becomes transparent. It is then possible to set the opacity of the Action Bar thanks to the Property ..Opacity. This Property can be used, for example, in the optional event of the "Elevator movement" window.. Example:
// Used to get up to 30% opacity at 150px in Y // The opacity goes from 0 to 30% nMaxOpacity is int = 30 nOpacity is int nOpacity = nMaxOpacity * ScrollbarPosition(MyWindow) / CoordinateEditorToScreen(150) IF nOpacity > nMaxOpacity THEN nOpacity = nMaxOpacity END ACTB_ActionBar..Opacity = nOpacity
Caution: The option "Overlapping bar" changes the origin of the fields. In the editor, the controls found below the Action Bar are automatically moved.
Versions 21 and later New in version 21 Versions 21 and later New in version 21
This page is also available for…
|
|
|
| |
| Click [Add] to post a comment |
|
| |
|
| |
| |
| |
| |
| |
| |
| | |
| |