So we added a tutorial mode which is common in mobile/web apps
, to walk the user through the process of creating a simple application and using the GUI builder (we also added a
Udemy course
but I digress). This feature is probably useful for almost every app out there, so here is how you can achieve that with Codename One…
There are generally two approaches for laying an overlay:
-
Glass pane – this is how we used to do things in the old days, its powerful but has many limitations. You essentially need to draw everything using graphics.
A glass pane is just a “layer” on top of all components that you can draw on. It might seem that you can “emulate” the glass pane by overriding the paint method in Form and that would indeed work for simple use cases however the glass pane is “clever” and knows how to repaint itself when a component is updated (e.g. if a ticker is running the whole form won’t repaint so glass pane will work but overriding Form paint would not!). -
Layered layout – this is a more “modern” approach we take where we essentially place two containers in a LayeredLayout and the last one added remains on top.
Generally the glass pane is not interactive (it just draws) where the layered layout can actually grab input etc. we made use of the layered layout in a previous post (
when a dialog is no a dialog
). In this case though, I chose to use a glass pane mostly because I was too lazy to go back to every form and add a layered layout to the hierarchy
We draw everything manually in the glass pane (that’s how it works).
You will notice that some sections accept null as the highlight component, this can happen when we use the title as the highlight component on Android 4.x.
Newer Android devices use the native action bar for the title and so will return null when we query for the title area.
We hope this is useful for you when building your apps.
Notice: This post was automatically converted using a script from an older blogging system. Some elements might not have come out as intended…. If that is the case please let us know via the comments section below.
6 Comments
I used this code snippet with a highlightComponent = null, and the glasspane with the text appears as it should – it’s a very coll feature. I can’t swipe out though. I’m not sure I understand the swipe logic. Can you explain how it works ?
We add a pointer dragged listener to the parent form as you see at the bottom of the source. If a user swipes a 5th of the screen from left to right the tutorial should end.
Are you getting the pointer events? Should be pretty easy to debug if this is causing issues in the simulator.
I’ve got a side menu on the form and swiping left to right exposes the side menu form, so I guess it’s the order in which pointer dragged events are consumed.
Yes, this predated the sidemenu by a while. You can just edit that logic to work with a different gesture or a tap on a specific screen location.
OK – I changed the logic to swipe right to left and works well. Where would you normally call showTutorialOverlay() ? I have a call in postShow for the form but wonder if that’s what you had in mind as a use case.
Post show should work out nicely.