Menu Abstraction with AbstractUI

I have been doing more work migrating my core apps to Sailfish using AbstractUI, extending this library as I find problems.

One of major stumbling blocks so far is Menu handling. Not only do Harmattan and Silica Menus look and behave a little bit differently (not really a problem), they also interact differently with other associated components (Page, MenuLayout etc.).

This means that the Harmattan and Sailfish versions of these abstraction controls have to differ substantially, yet still provide a common interface which can be used from one code base to target both platforms.

I will go into the differences and the flaming hoops I jumped through to address them in a second post later this weekend. For now I want to point out 4 demo menu handling projects that I have posted to Github last night to demonstrate menu handling, with and without AbstractUI.

Each of these projects offers a menu with two options. One increments a counter on the page, the other decrements it. Each is based on a stripped down version of the "new project" created by the Harmattan and Sailfish QtCreators.

The HarmattanMenuDemo shows native Harmattan menu handling: A ToolBar at the bottom of the screen, with a ToolIcon, which when pressed opens or closes the menu.

The SilicaMenuDemo is the Silica equivalent, with a native Silica PulldownMenu which is accessed by dragging down on anywhere on the screen other than the glowy MenuIndicator at the top. (This is a bit counter intuitive at first).

The HarmattanAbstractMenuDemo is a copy of the HarmattanMenuDemo, but with the native controls abstracted out via the Harmattan flavour of AbstractUI.

The SilicaAbstractMenuDemo is the Silica equivalent, using the Silica flavour of AbstractUI.

There are some minor differences between the native and abstracted handling / look and feel, but I should be able to iron those out later.

For these demos I started with separate Harmattan and Silica projects a) to show the implementation(s) as natively as possible, and b) because I could not get a new Sailfish project to start up on Harmattan (the reverse should work), and I did not want to get side tracked into that issue…

In a later post I will dive deeper into the implementation.

Update: 2013.06.01 14:03

The Sailfish native implementation has all Page child items in a Flickable control sized to the Page, so all items move down when the menu opens

 

My current AUI implementation does not do this, so while the menu opens, other page controls stay in place, and the menu may open behind them, rendering it not very useful!

Update: 2013.06.09 17:05

The Sailfish flavour of  AUIPageWithMenu, now changes the z: axis of the menu to high when the menu is active (i.e. open) and low when not active (closed). Also when the menu opens, the opacity of all page childs is reduced (fading these out), so while they are still visible behind the menu, the menu is readable.