[Daniel Muriithi]

Hi, I’m using VPlay to make an app with database connection. I used Qt LocalStorage to do the login and sign up but after I navigate to my home page i can’t access that data. I also want to store and load media files from file dialogs. Please help. here is my database management code

import Felgo 3.0
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.1
import QtQuick.LocalStorage 2.0

import "./backend.js" as BackEnd

App {
    id: app
    property bool databaseOpen: false
    property color popupBackGroundColor: "#b44"
    property color popupTextCOlor: "#ffffff"
    property var dataBase
    // You get free licenseKeys from https://felgo.com/licenseKey
    // With a licenseKey you can:
    //  * Publish your games & apps for the app stores
    //  * Remove the Felgo Splash Screen or set a custom one (available with the Pro Licenses)
    //  * Add plugins to monetize, analyze & improve your apps (available with the Pro Licenses)
    //licenseKey: "<generate one from https://felgo.com/licenseKey>"
    StackView{
        id: stackView
        focus: true
        anchors.fill: parent
    }
    Component.onCompleted: {
        //initial page
        stackView.push("RegistrationPage.qml")
        dataBase = userDataBase()
        console.log(dataBase.version)
    }
    Dialog {
        id: popup
        title: "Error!!"
        property alias popMessage: message.text
        focus: true
        positiveActionLabel: "Close"
        onAccepted: close()

        AppText {
            id: message
            anchors.centerIn: parent
            font.pointSize: dp(25)
            color: "red"
        }
    }

    // Popup will be closed automatically in 2 seconds after its opened
    property string uname: ""
    property string gmail_account: ""

    function userDataBase()
    {
        var db = LocalStorage.openDatabaseSync("UserLoginApp", "1.0", "Login example!", 1000000);
        db.transaction(function(tx) {
            tx.executeSql('CREATE TABLE IF NOT EXISTS UserDetails(username TEXT, gmailAccount TEXT, programmingLanguage TEXT)');
        })

        return db;
    }

    // Register New user
    function registerNewUser(uname, gmail_account, programminglanguage)
    {
        var ret  = BackEnd.validateRegisterCredentials(uname, gmail_account)
        var message = ""
        switch(ret)
        {
        case 0: message = "Valid details!"
            break;
        case 1: message = "Missing credentials!"
            break;
        }

        if(0 !== ret)
        {
            popup.popMessage = message
            popup.open()
            return
        }

        dataBase.transaction(function(tx) {
            var results = tx.executeSql('SELECT gmailAccount FROM UserDetails WHERE username=?;', uname);
            console.log(results.rows.length)
            if(results.rows.length !== 0)
            {
                popup.popMessage = "User already exist!"
                popup.open()
                return
            }
            tx.executeSql('INSERT INTO UserDetails VALUES(?, ?, ?)', [ uname, gmail_account, programminglanguage ]);
            showUserInfo(uname) // goto user info page
        })
    }

    // Login users
    function loginUser(uname, gmail_account)
    {
        var ret  = BackEnd.validateUserCredentials(uname, gmail_account)
        var message = ""
        if(ret)
        {
            message = "Missing credentials!"
            popup.popMessage = message
            popup.open()
            return
        }

        dataBase.transaction(function(tx) {
            var results = tx.executeSql('SELECT gmailAccount FROM UserDetails WHERE username=?;', uname);
            if(results.rows.length === 0)
            {
                message = "User not registered!"
                popup.popMessage = message
                popup.open()
            }
            else
            {
                console.log("Login Success!")
                showDashboardPage(uname,gmail_account)
            }
        })
    }

    function showDashboardPage(uname,gmail_account){
        stackView.replace("Dashboard.qml", {"userName": uname, "gmailAccount": gmail_account})
    }

    onInitTheme: {
        if(system.desktopPlatform)
            Theme.platform = "android"
    }
}

And the homepage where I call the username and gmail account

        headerView: Item {
            width: parent.width
            height: dp(120)

            property string userName: userName
            property string gmailAccount: gmailAccount


            RoundedImage {
              id: bgImage
              radius: 0
              anchors.fill: parent
              fillMode: Image.PreserveAspectCrop
              source: image

              Column {
                anchors.centerIn: parent
                width: parent.width

                Item { height: dp(5); width: parent.width } // spacer

                AppText {
                  width: parent.width
                  horizontalAlignment: Text.Center
                  color: "white"
                  text: "Name: " + userName
                  font.pixelSize: sp(14)
                  font.bold: true
                  font.family: Theme.boldFont.name
                }

                AppText {
                  width: parent.width
                  text: "Name: " + gmailAccount
                  horizontalAlignment: Text.Center
                  color: "white"
                  font.pixelSize: sp(13)
                }
              }
            }
          }

For the audio files. I just need to know how to save and load from path. Like a ringing tone or a profile picture. If there is a way to save filedialog data into local storage, Please let me know. Thanks in advance

[AlexFelgo Team]

Hi,

the first thing that comes to my mind, without testing it actually, ist that you might have a scope issue here, with this code:

property string userName: userName

If you just use “userName”, the closest defnition (in parent hierarchy) will be used, which is actually the same line, I suppose.

If you press CTRL and click on a variable, you can jump to its definition. If you click on the second userName, you will actually jump to the same line, as it is the closest definition.

Try this one instead. Or use different names:

property string userName: app.userName

 

To open and save files, you could use the FileUtils convenience class. You can find a lot of other example how to do this with Qt/QML online as well.

Cheers,
Alex

[Daniel Muriithi]

I’m still getting a scope error when using

property string userName: app.userName

And

property string clientName: app.userName

But the app still doesn’t get any of that data. The code for the local storage is contained in the main.qml file, and I want to call the data in the third page(Dashboard.qml), Is there anything I’m missing?

[GüntherFelgo Team]

Hi,

please also consider that your property in App { } are named differently than Alex’s reply suggests. It’s thus e.g. app.uname and not app.userName.

// in your App: 
property string uname: ""
property string gmail_account: ""

// in headerView
property string userName: app.uname
property string gmailAccount: app.gmail_account

 

Please Note: We only offer coding support as part of our support offering for Felgo Indie and Enterprise customers. To learn the basics of QML and find a solution to issues like this, please consider having a look at some demos or tutorials.

 

[Daniel Muriithi]

Hi,

Thanks! it worked like a charm. Just one more problem to bother you with if you don’t mind. I have this file Dialog code below

                FileDialog{
                    id: musicSaveDialog
                    title: "Choose music"
                    folder: FileUtils.MusicLocation
                    nameFilters: [ "Music files (*.mp3, *m4a)" ]
                    onAccepted: {
                        var music = musicSaveDialog.file
                        console.log("Accepted: " + music)
                        if(musicSaveDialog.checked){
                            for(var i = 0; i < music.length; i++)
                                Qt.openUrlExternally(music[i])
                        }
                    }
                }

And i would very much like to get the name of the file from the path. Could you give me some suggestions on that? Thanks in advance.

[GüntherFelgo Team]

Hi,

you can have a look at the Qt documentation, in your case the FileDialog type to see which properties are available.

To get the selected file, you can use the fileUrl property:

  FileDialog{
    id: musicSaveDialog
    title: "Choose music"
    folder: fileUtils.storageLocation(FileUtils.MusicLocation)
    nameFilters: [ "Music files (*.mp3, *m4a)" ]
    onAccepted: {
      var music = musicSaveDialog.fileUrl
      console.log("Accepted: " + music)
      if(musicSaveDialog.checked){
        for(var i = 0; i < music.length; i++)
          Qt.openUrlExternally(music[i])
      }
    }
  }

Best,
Günther