SAVING rectangle when mousearea is clicked to an API offline storage

jr_jags

@import QtQuick 1.0
import Qt 4.7
import "storage.js" as Storage
Rectangle {
width: 360
height: 490

property int maxhunger: 100;
property int minhunger: 0;
property int defaulthunger: 50;
AnimatedImage { id: home_aspin; x: 0; y: 0; width: 360; height: 490
   source: "Home(Aspin)new" }

MouseArea {
id: ahome2map
x: 264
y: 429
width: 96
height: 49
onClicked: {mainLoader.source = "map.qml";}
}

MouseArea {
id: ahome2status
x: 139
y: 429
width: 101
height: 49
onClicked: {mainLoader.source = "status.qml";
}
}

MouseArea {
id: ahome2sleep
x: 6
y: 331
width: 99
height: 46
onClicked: {mainLoader.source = "sleep.qml";}
}

MouseArea {
id: ahome2play
x: 6
y: 384
width: 92
height: 46
onClicked: {mainLoader.source = "walk.qml";}
}

MouseArea {
id: ahome2bath
x: 6
y: 438
width: 92
height: 46
onClicked: {mainLoader.source = "bath.qml";}
}
Rectangle {
id: rectangle1
x: 96
y: 90
width: 50
height: 21
color: "#60b131"

}
MouseArea {
id: ahome2feed
x: 6
y: 278
width: 99
height: 46
opacity: 1
onClicked:{
rectangle1.width = (rectangle1.width+25);

     }
   Component.onCompleted: {
       // Initialize the database
       Storage.initialize();
       // Sets a value in the database
       Storage.setSetting("mySetting",rectangle1.width);

   }

}

Text {
id: text1
x: 96
y: 90
width: 80
height: 20
text: "Hungry-------------------FULL"
font.bold: true
font.pixelSize: 15
}

}

@

@//storage.js
// First, let's create a short helper function to get the database connection
function getDatabase() {
return openDatabaseSync("MyAppName", "1.0", "StorageDatabase", 100000);
}

// At the start of the application, we can initialize the tables we need if they haven't been created yet
function initialize() {
var db = getDatabase();
db.transaction(
function(tx) {
// Create the settings table if it doesn't already exist
// If the table exists, this is skipped
tx.executeSql('CREATE TABLE IF NOT EXISTS settings(setting TEXT UNIQUE, value TEXT)');
});
}

// This function is used to write a setting into the database
function setSetting(setting, value) {
function setSetting(setting1, value2){
// setting: string representing the setting name (eg: “username”)
// value: string representing the value of the setting (eg: “myUsername”)
var db = getDatabase();
var res = "";
db.transaction(function(tx) {
var rs = tx.executeSql('INSERT OR REPLACE INTO settings VALUES (?,?);', [setting,value]);
//console.log(rs.rowsAffected)
if (rs.rowsAffected > 0) {
res = "OK";
} else {
res = "Error";
}
}
);
// The function returns “OK” if it was successful, or “Error” if it wasn't
return res;
}
// This function is used to retrieve a setting from the database
function getSetting(setting) {
var db = getDatabase();
var res="";
db.transaction(function(tx) {
var rs = tx.executeSql('SELECT value FROM settings WHERE setting=?;', [setting]);
if (rs.rows.length > 0) {
res = rs.rows.item(0).value;
} else {
res = "Unknown";
}
})
// The function returns “Unknown” if the setting was not found in the database
// For more advanced projects, this should probably be handled through error codes
return res
}
}
@

When im loading another qml, the rectangle resets to its own state, it means that the rectangle didnt save in my offline storage,
How can i do this?

Thanks

Slocan

[code] onClicked:{
rectangle1.width = (rectangle1.width+25);

     }
   Component.onCompleted: {
       // Initialize the database
       Storage.initialize();
       // Sets a value in the database
       Storage.setSetting("mySetting",rectangle1.width);

   }[/code] In this section, you save the rectangle1's width into the offline storage when the component is finished being created. However, you do not re-save it when the width is updated. You need to add [code]Storage.setSetting("mySetting",rectangle1.width);[/code] in the onClicked function.