Alpha 2: Migrating LocalStorage from Qt4 to Qt5

This morning I successfully migrated the LocalStorage part of my app LandedSettings from the Sailfish Alpha 1 (Qt4) style to the new Sailfish Alpha 2 (Qt5) style.

 

In LandedSettings all the Database access functionality is encapsulated in 3 javascript files. In order to focus the migration on the LocalStorage only, I created a new throwaway project QT5TestLS, copied the 3 JavaScript files to the new project, and added just enough code to the project to setup and populate the Database.

The Full code of  QT5TestLS can be found on GitHub.

 

 

Below is a summary of the things I had to change:

 

1) LocalStorage is not installed by default on the Emulator: You must install via zypper

 

Connect via SSH to the Emulator:

 

Verify first if installed:

 

zypper se Storage

 

If not present, then

 

zypper in qt5-qtdeclarative-import-localstorageplugin 

 

2) LocalStorage is no longer part of the Qml Global object, you have to import it to qml / JavaScript files using it:

 

in Qml

import QtQuick.LocalStorage 2.0

 

in JavaScript

.import QtQuick.LocalStorage 2.0 as LS

 

Note the period before the import in javascript

 

In the Alpha 1 /  Qt4 no import was required.

 

3) As a result of 2) above, all local storage function calls need to qualified by the namespace "LocalStorage".

 

in Qml

return LocalStorage.openDatabaseSync("Landed21","15.0","StorageDatabase",100000);

 

In JavaScript

return LS.LocalStorage.openDatabaseSync("Landed21","15.0","StorageDatabase",100000);

 

Note that in JavaScript LocalStorage functions must be qualified both by the import alias (in this example "LS" ), and the namespace "LocalStorage".

 

4) JavaScript files can import other JavaScript files (rather than using Qt.include) function.

 

For example I have a settingsDB.js java file, which contains the "getDatabase" method.

 

In my debugDB.js script I can import this file as follows

 

.import "settingsDB.js" as SDB

 

This gives me access to the functions within settingsDB.js (e.g. the getDatabase). These are accessed qualified by the alias. e.g

 

vardb=SDB.getDatabase();

 

Note that in debugDB.js I do not need an explicit import of QtQuickLocalStorage. That seems to be inherited by importing settingsDB.js, which has such an import statement.

 

The old style Qt.include("settingsDB.js") is still available, but behaves slightly differently.

 

Further Reference 

See:

https://qt-project.org/doc/qt-5.1/qtquick/qmlmodule-qtquick-localstorage2-qtquick-localstorage-2.html

 

https://qt-project.org/doc/qt-5.0/qtqml/qtqml-javascript-imports.html

 

The Full code of  QT5TestLS can be found on GitHub