Issues when handling a menu

Former Member over 9 years ago

I'm experiencing some issues when trying to handle a menu in my app. First of all, I've about 1 week experience in Monkey-C and know nothing about any other object-oriented programming language (I'm not a programmer), so I apologize for any stupid question I might state.

Here is the situation: I'm building an app that starts showing a menu (subclass of WatchUi.Menu) so the user may perform some configurations prior to run the main view. After the user makes the selection, the menu pops out and the main view is brought to the foreground. This menu is already working but I realized that the user could press the back button without making any selection which is an undesirable situation for me. In this last situation I would like to terminate the app.

Now, the issue is that I cannot find any way to terminate the app in a "clean" way. I'll try to explain why I cannot:

1. First of all, I cannot use the menu as the initial view (I got a "Socket Error in packet header 0" error). Therefore, my initial view is the main view (subclass of WatchUi.View). To show the menu before the main view, I pushView'ed the menu at the initialization of the main view.
2. I decided to set the menu selection as null until the user makes the selection. At the main view onShow() method I check whether this selection is null or not, and terminate the app if it's null. However, as long as the main view is the initial view, his onShow() method is called even after pushView'ing the menu (not only after popping out the menu). Since the selection is initialized as null, the app will terminate without letting the user to make any selection. (note: the onUpdate() method in main view is also called at the initialization).
3. I also tried capturing the back button press at my WatchUi.MenuInputDelegate subclass, but no handleEvent(), onKey() or onBack() methods are called when pressing that button. So it made no difference.
4. I was thinking about using a method that lets me see the order of the view stack, so I can check whether the menu or the main view are on the foreground. That way I can use the strategy in "2.", because if onShow() is called in the main view when it is not on the foreground I can avoid checking if the selection is null. However, I think this method does not exist.

Finally, the only solution I find is to define a flag variable that triggers after onShow() in main view is called for the first time, so I can avoid checking the selection in the first call (before the menu is displayed). However I think this is a "dirty" way of doing it, and I'll bet I'm misunderstanding the WatchUi.Menu functionality.

Just to add some more information on this, I placed a System.println() at the begining of all methods in the main view and in the menu, so here is the sequence of calls in my app:

-> App starts
MenuDelegate - initialize()
MainView - initialize()
MenuView - initialize()
MenuView is pushView'ed
MainView - onShow()
MainView - onUpdate()
MainView - onHide()
-> User presses back button
MainView - onShow()
MainView - onUpdate()
-> User presses back button again
MainView - onHide()
-> App terminates

Thanks in advance for your kind help!

jim_m_58 over 9 years ago

The back button on a std menu is the normal state for menus, even in native apps. There's always the items on the menu, as well as the back buttion

In your menu delegate, you see nothing in the case of the back. And mean while, your main code continues to run, so that's something you must code for. You may need to redesign your buttons - allow onMenu() if there are no settings yet, and allow onBack() to exit at those times too, for example.

As far as exiting, you can just return a false from onBack(). or pop the view to get out. For example: Ui.popView(Ui.SLIDE_IMMEDIATE);

Former Member over 9 years ago

With allowing an onBack() do you mean placing onBack() method in the menu delegate? I'm afraid it does not have any effect. In fact, you can place a println() within the onBack() in a menu delegate and you'll see that it is not executed.

jim_m_58 over 9 years ago

When you display a std menu in CIQ, the "back" isn't seen as it's handled by the FW. All you will see in the menu delegate is if a selection was made. There's no way to detect the back from a menu

Let's say when your app starts, you display the menu with "option1" and "option2". If the user picks one of them, you start whatever the two options mean.

What you could do is set an "option=none" flag before displaying the menu. Then in your input delegate, look for "key_start" to start doing your thing. In the handler for "key_start", if option is still "none", display the menu again, as you can't do anything until option1 or option2 is selected (caught in the menu delegate). Also, in your input delegate, you could look for onBack(), so if instead of key_start, the user can access the app if no option was picked.

travis.vitek over 9 years ago

Depending on what this setting is, it may make more sense to have a default value that is displayed on a start screen, and then allow the user to change the value (by pressing menu and picking) or to continue to use the default (by pressing enter or tapping the screen). You could also save the most recently used value so that it becomes the new default the next time the app is started, which is useful if the user is likely to choosing the same option in multiple consecutive runs.

If you need to exit the app, you should be able to safely do so by calling Sys.exit() from anywhere in your code.

Travis

Former Member over 9 years ago

If I have understood correctly then my method would be something like...
In main app code

var mSelection;
function getSelection() {
  return mSelection;
}
function setSelection(bool) {
  mSelection = bool;
}

In View

function onShow() {
  var selection = App.getApp().getSelection();
  if (selection == null) {
    App.getApp().setSelection(false);
    Ui.pushView(new Menu(), new MenuDelegate(), Ui.SLIDE_IMMEDIATE);
  }
  else if (selection == false) {
    Ui.popView(Ui.SLIDE_IMMEDIATE);
  }
}

In menu delegate

var mSelection;
onMenuItem(item) {
  App.getApp().setSelection(true);
}

Former Member over 9 years ago

Depending on what this setting is, it may make more sense to have a default value that is displayed on a start screen, and then allow the user to change the value (by pressing menu and picking) or to continue to use the default (by pressing enter or tapping the screen). You could also save the most recently used value so that it becomes the new default the next time the app is started, which is useful if the user is likely to choosing the same option in multiple consecutive runs.

If you need to exit the app, you should be able to safely do so by calling Sys.exit() from anywhere in your code.

Travis

I was considering your approach but I would like to try something like the native swimming app, where the user is first requested to introduce the length of the pool and then the main view slides. If the user presses the back button in that menu, the app exits.

Regarding the Sys.exit() call, I (think that I) read somewhere in the forum that it is not the recommended way to terminate the app, but you should proceed popping out all views. Am I right?

Former Member over 9 years ago

If I have understood correctly then my method would be something like...
In main app code
var mSelection; function getSelection() { return mSelection; } function setSelection(bool) { mSelection = bool; }
In View
function onShow() { var selection = App.getApp().getSelection(); if (selection == null) { App.getApp().setSelection(false); Ui.pushView(new Menu(), new MenuDelegate(), Ui.SLIDE_IMMEDIATE); } else if (selection == false) { Ui.popView(Ui.SLIDE_IMMEDIATE); } }
In menu delegate
var mSelection; onMenuItem(item) { App.getApp().setSelection(true); }

Not bad, it is not exactly what I was looking for but I think your method inspired me a way to do it, especially the menu pushView'ed at onShow(). I'm pushing the menu at the main view initialize() so far so... I'm gonna try it ASAP and will come back with results. Thanks!

Former Member over 9 years ago

Not bad, it is not exactly what I was looking for but I think your method inspired me a way to do it, especially the menu pushView'ed at onShow(). I'm pushing the menu at the main view initialize() so far so... I'm gonna try it ASAP and will come back with results. Thanks!

With my code that the first thing the user will see is the menu, and that if they press the back button it will exit the app. Is that not what you wanted?

Former Member over 9 years ago

With my code that the first thing the user will see is the menu, and that if they press the back button it will exit the app. Is that not what you wanted?

Sorry, my fault. I didn't realized that "else if" statement in view. I implemented your approach and yeah, it's working as I pretended. I only did a minor change, using a variable declared on top of the code (outside the Ui.App instance) for simplicity, so I don't need to build two new methods in the app instance, although your way might be "cleaner"... So many many thanks!

BTW, is there any method to customize background and foreground colors of a menu? I guessed menu is inherited from Ui.View, but actually neither onShow(), onLayout(dc) or onUpdate(dc) methods are being called when the menu is displayed. So I cannot find any way to do a dc.setColor()...

travis.vitek over 9 years ago

is there any method to customize background and foreground colors of a menu?

I'm not sure about the menu class, but with the Ui.ProgressBar, the only way I've found to control the color is to add a dc.setColor() call to the end[/i] of the onUpdate(dc) definitions, like this...

class MyView extends Ui.View { function onUpdate(dc) { // draw the view View.onUpdate(dc); // hack to get progress bar to be red dc.setColor(Gfx.COLOR_RED, Gfx.COLOR_TRANSPARENT); } }