Fork us on GitHub

Walk-thru Tutorial

Codename One Maker is a pretty elaborate app, there is only s...
Walk-thru Tutorial

Walk-thru Tutorial

Codename One Maker is a pretty elaborate app, there is only so far we can go with simplifying the app itself.

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:
  1. 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!).

  2. 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

You will notice several interesting things about the tutorial mode. We added an option to "swipe" out of the tutorial mode at any time (this is the bottom portion starting at line 47).
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.

Share this Post:

Posted by Shai Almog

Shai is the co-founder of Codename One. He's been a professional programmer for over 25 years. During that time he has worked with dozens of companies including Sun Microsystems.
For more follow Shai on Twitter & github.