Welcome Screen (With First Time Only Option)

Elements/Components Used:

Sheet, CheckBox, Button, Label

image

 

I often see postings or questions about how to do things to the splash screen (or loading screen as some call it).  Things such as make it last longer, play a sound, show a dialog, etc. For one, why make the user think the app takes longer to load than it really does? And to answer the question about increase duration, no you can't increase the duration of the splash screen. Also for the most part apps load FAST on the actual z10 (much faster than the simulator and in some cases faster than the Dev Alpha B).  So since you can't increase the duration trying to do anything else (play a sound, show some text, etc) would be almost pointless. And not even possible. So this leads me to the reasoning for this posting. Rather than doing anything to the splash screen, let's create a "Welcome Page." And to make it an extra useful tutorial I'll show you a way to make it a "first time only" or "don't show this message again" option too.

Before I go into this, I realize there are other ways (maybe better) to do this, but I think this is a quick/easy/effective way to accomplish this task. Plus I'm a fan of the Sheet open/close animation as you'll see that is used in this tutorial.

Ok, on to the explanation... So you have your UI whatever that may be. Now you want to add the welcome screen. The perfect UI element to add is a Sheet, something like:

attachedObjects: [
        Sheet {
            id: mysheet
            peekEnabled: false
            Page {
                Container {
                    background: Color.Cyan
 
                    Label {
                        text: "Start up screen"
                        multiline: true
                    }
                    Button {
                        text: "Continue"
                        onClicked: {
                            mysheet.close();
                        }
                    }
                }
            }
        }
      ]

And to have this open as soon as the app loads, use the onCreationCompleted signal:

onCreationCompleted: {
                mysheet.open();
        }

Now, this sheet will open every time the app is launched.  But in some cases you may only want this "Welcome Page" to open the first time or give the user the option to not show the "Welcome Page" anymore. This can be done with a little help of the QSettings functions: saveValueFor and getValueFor I spoke about in a previous tutorial (The Persistence of Cascades Memory). I thought it would be best to tie the get/save functions to the visible property of the main Container of my UI. The rational here is I can make the main UI not visible during the split second while between the splash screen ending and the Sheet sliding up from the bottom of the screen.  The code would look something like this:

    Page {
        Container {
            id: maincont
            objectName: "maincont"
            visible: contextprop.getValueFor(objectName, "false")
 
// ... Rest of my UI
 
          }
          onCreationCompleted: {
            if (maincont.visible == false) {
                mysheet.open();
 
            }
        }
        attachedObjects: [
          Sheet {
              id: mysheet
              peekEnabled: false
              Page {
                  Container {
                      background: Color.Cyan
 
                      Label {
                          text: "Start up screen, can be disabled by checking the box below"
                          multiline: true
                      }
                      CheckBox {
                          text: "Don't show at start up"
                          onCheckedChanged: {
                              maincont.visible = true;                    
                              contextprop.saveValueFor(maincont.objectName, maincont.visible);
                          }
                      }
                      Button {
                          text: "Continue"
                          onClicked: {
                              maincont.visible = true;
                              mysheet.close();
                          }
                      }
                  }
              }
           }
        ]
    }

So what I have above is the maincont Container is looking at the getValueFor function to provide true or false.  Default is set to false.  Next in the onCreationCompleted if maincont.visible is false the Sheet is called to open. Then inside the Sheet you can have whatever "Welcome" message you would like.  And have a means to close the message (I used a button).  Since I am deciding whether to open the Sheet based off the visible true/false of my main UI I need to make change that to true while closing the Sheet as well.

Now the fun stuff, there is a method to stop the "Welcome" Sheet from opening.  If you select the check box it will save the maincont.visible value to true.  The next time the app is opened the maincont.visible value will be set to true when the getValueFor function looks for it and the onCreationCompleted signal will do nothing.

Alternatively you could remove the checkbox and add the saveValueFor to the button and now the "Welcome" Sheet will ONLY load the FIRST time the app is opened.

Final note on why I chose to do it this way, is by opening a Sheet rather than just overlaying something on the UI you can easily add this to any UI type (Page, NavigationPane, TabbedPane) without additional work than what is said above.  As always feel free to ask questions below in the comments.

-Brian