372 views
in GUI Development by

Hello,

I want to make a reusable menu bar with 2 buttons (for now). Lets call it All-Or-Group (as seen below)

The onRelease method for each button is set to these slot Methods and they call SwitchToDialog like this (for onGroupButton):

var Core::Group newDialog = new Application::Dialog_LightControlGroup
SwitchToDialog( newDialog, null, null, null, null, null, null, null, null, null, false );

Then the Application::AllOrGroup Components are used in the respective Dialogs like so:

 

 

 

Q1. However, when running in the prototyper, the buttons does not switch the dialogs as expected. Instead it is showing just a sub section of the screen (the same bounds set on the All-Or-Group) GUI components. What am I missing?

I have looked at the examples in managing-dialogs, but for each of them the buttons are individually repeated and the Slot method is declared per-Dialog.
I wanted to have one place to define the options and one place to update the visuals and behaviours of the buttons.

Q2. Also, while the All or Group buttons are shown in their respective dialog, I wanted the button show its "FaceActive" bitmap as an indicator for the user, as configured in the PushButtonConfig. What is a good way to do this?

Thank you for everyone's time.

 

1 Answer

+1 vote
by

Hello,

it seems that your implementation presents the dialogs in context of the All-Or-Group. As consequence, the available area to display the dialog is restricted to boundary area of All-Or-Group. To solve the issue, present the dialog in a superior GUI component. In many cases the optimal for this purpose is the root component, which represents the entire screen. For this purpose adapt your code as follows:

var Core::Group newDialog = new Application::Dialog_LightControlGroup; 
GetRoot().SwitchToDialog( newDialog, null, null, null, null, null, null, null, null, null, false );

This approach also ensures, that all switched dialogs are managed within one and the same superior component (here within the root component). With your original implementation the dialogs were nested one inside another . In fact the invocation of SwitchToDialog() caused a new dialog to be nested inside the actual All-Or-Group.

Concerning your second question, with the Push Button the state Active is valid only during the user presses the button actively. The push button is mono-stable. The Radio Button, in turn, is a bi-stable widget. Also the Toggle Button implements two stable states. Try to replace the Push Button by the Radio or Toggle Button.

Does it help you further?

Best regards

Paul Banach

by

Hello Paul,

@GetRoot() - Thanks! This works as intended now. Thank you very much for the clear explanation.

@bi-stable-widget - Yep. I switched to customized radio button and this seems to work. I do have a couple follow up questions on this topic.

Q1. To make each button shows its on state on the correct Dialogs, I ended up defining a property called
selectedButton that each Dialog will set to the appropriate value. Is there a more independent way to do this from within the custom All-Or-Group class?
I was expecting that when onSelect is processed and it sets (for example - RadioButton_All.Selected = true) and then switch dialog, the selected state will be reflected in the switched dialog.

Q2. I also experimented with defining  LabelOff and LabelOn properties to be different strings, but I only see the string defined in Label shown. I tried setting Label to an empty "" string, but that does not work either.

by

Hello,

concerning your first question, I understood, that you want the All-Or-Group component to be generic and the component should highlight the Radio Button matching the actually opened dialog. So far, your approach using the property selectedButton is correct. It is simple and it works. I would thus implement it similarly.

The missing synchronisation between the buttons exists, because the buttons in Dialog 1 don't know the buttons in Dialog 2. To synchronize the buttons you would need to connect the buttons to a common data provider where the actual selection is stored. Using such common provider the buttons can synchronize their selection automatically. The Radio Button provides for such purpose the property Outlet. See Connect the Radio Button with a data provider.

Concerning the second question. The property Label exists for convenience purpose. With it you specify the label for the button to be used regardless of the button On/Off state. If you initialize the property Label, then the values stored in LabelOff and LabelOn are overridden by the value from Label. In your application case leave the property Label non initialized. If you have initialized it already (the Inspector shows the property thereupon in bold font) you have to revert this initialization. For this purpose click on the property Label in the Inspector window and press the keys Ctrl+R or use the menu item EDIT/Restore default value. The modification should disappear. Now the values from the properties LabelOn and LabelOff are used. See also Restore the default or inherited value.

Does it help you further?

Best regards

Paul Banach

by
@data-Provider: Thanks for the hint, I study up on that and will likely open a new thread since this one is getting scope-creeped :-)

@using Ctrl+R: Ah, I remember this from the master-class series. Thanks! The labels works as expected now.

Ask Embedded Wizard

Welcome to the question and answer site for Embedded Wizard users and UI developers.

Ask your question and receive answers from the Embedded Wizard support team or from other members of the community!

Embedded Wizard Website | Privacy Policy | Imprint

...