use of Rectangle javascript

[ravandi]

hello
How can I use of Rectangle inside the javascript?


for(var i = 0; i < rs.rows.length; i++) {
Rectangle {
width: 40
height: 20
//value filde of database
Text { text: rs.rows.item(i).word }
}
}

[anda_skoa]

That looks more like a use case for a Repeater instead of JavaScript.

Cheers,
_

[ravandi]

I want every string that is in the element of the Text,It is placed in a separate Rectangle.
like the image:
11652



my code:
import QtQuick 2.4
import QtQuick.LocalStorage 2.0
Rectangle {
property alias mouseArea: mouseArea
property string r1 :""
property int tedad
width: 360
height: 360
MouseArea {
id: mouseArea
anchors.fill: parent
}
function fdatabase() {
var db = LocalStorage.openDatabaseSync("ravandi", "1.0", "The Example QML SQL!", 1000000);
db.transaction(
function(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS jadval(id integer primary key autoincrement not null,`name` varchar(40),`last` varchar(40))');
tx.executeSql("insert into jadval (name,last) values('mohammad','ravandi')");
var rs = tx.executeSql('SELECT * FROM jadval');
tedad = rs.rows.length;
for(var i = 0; i < rs.rows.length; i++) {
r1 +=rs.rows.item(i).name
}
}
)
}
Component.onCompleted: fdatabase()
Column {
spacing: 5;
Repeater {
model: tedad;
Rectangle {
width:100
height:30
Text{
anchors.horizontalCenter: parent.horizontalCenter
renderType: Text.NativeRendering
text: r1
}
}
}
}
}

[anda_skoa]

Make a property of type var that contains a JavaScript array. Use that as the model for the repeater.

Instead of appending to r1 you create an array and add each element.
After the loop assign this array to the new property.

Cheers,
_

[ravandi]

it does not work :


import QtQuick 2.4
import QtQuick.LocalStorage 2.0
Rectangle {
property alias mouseArea: mouseArea
//property string r1 :""
property variant r1: Array()
property int tedad
width: 360
height: 360
MouseArea {
id: mouseArea
anchors.fill: parent
}
function fdatabase() {
var db = LocalStorage.openDatabaseSync("ravandi", "1.0", "The Example QML SQL!", 1000000);
db.transaction(
function(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS jadval(id integer primary key autoincrement not null,`name` varchar(40),`last` varchar(40))');
tx.executeSql("insert into jadval (name,last) values('mohammad','ravandi')");
var rs = tx.executeSql('SELECT * FROM jadval');
tedad = rs.rows.length;
for(var i = 0; i < rs.rows.length; i++) {
r1 +=rs.rows.item(i).name
}
//console.log(r1)
}
)
}
Component.onCompleted: fdatabase()
Column {
spacing: 5;
Repeater {
model: r1;
Rectangle {
width:100
height:30
border.color: "red"
border.width: 1
Text{
anchors.horizontalCenter: parent.horizontalCenter
//renderType: Text.NativeRendering
text:modelData
}
}
}
}
}

I wrote , according to the code:

import QtQuick 2.0
Rectangle {
width:500
height:700
property variant r1:["ali", "ravandi", "sadegh"]
Column {
Repeater {
model: r1
Rectangle {
width:100
height:30
border.color: "red"
border.width: 1
Text { text: "Data: " + modelData }
}
}
}
}

[anda_skoa]

What is Array? Is that a type? does it have a += operator?



var items = [];
for (....) {
items.push(rs.rows.item(i).name);
}
r1 = items;


Cheers,
_

[ravandi]

import QtQuick 2.4
import QtQuick.LocalStorage 2.0
Rectangle {
property alias mouseArea: mouseArea
//property variant r1: Array()
property variant r1: []
property int tedad
width: 360
height: 360
MouseArea {
id: mouseArea
anchors.fill: parent
}
function fdatabase() {
var db = LocalStorage.openDatabaseSync("ravandi", "1.0", "The Example QML SQL!", 1000000);
db.transaction(
function(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS jadval(id integer primary key autoincrement not null,`name` varchar(40),`last` varchar(40))');
tx.executeSql("insert into jadval (name,last) values('ahmad','ravandi')");
var rs = tx.executeSql('SELECT * FROM jadval');
tedad = rs.rows.length;
var items = [];
for(var i = 0; i < rs.rows.length; i++) {
items.push(rs.rows.item(i).name);
r1 = items;
print(r1)
// r1 +=rs.rows.item(i).name

}
}
)
}
Component.onCompleted: fdatabase()
Column {
spacing: 5;
Repeater {
model: tedad;
Rectangle {
width:100
height:30
border.color: "red"
border.width: 1
Text{
id:items
anchors.horizontalCenter: parent.horizontalCenter
renderType: Text.NativeRendering
text: r1
}
}
}
}
}

erorr:
2016/01/28 21:29:04 sqlite.qml.:47: file:///F:/workspace/sqlite.qml.:47:12: Unab
le to assign QJSValue to QString

[anda_skoa]

And you are posting this why?

To show that a list of strings is not a string in case anyone would think that?

Cheers,
_

[ravandi]

I did try. but , it didn't work.

import QtQuick 2.3
import QtQuick.LocalStorage 2.0
import QtQuick.Controls 1.1
Rectangle {
id: page2
property var word:[]
width: 360
height: 360

Column {
id: row
spacing: 5;

Component.onCompleted:{
var db = LocalStorage.openDatabaseSync("ravandi", "1.0", "The Example QML SQL!", 1000000);
db.transaction(
function(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS jadval(id integer primary key autoincrement not null,`name` varchar(40),`last` varchar(40))');
tx.executeSql("insert into jadval (name,last) values('reza','ravandi')");
var rs = tx.executeSql('SELECT * FROM jadval');
for(var i = 0; i < rs.rows.length; i++) {
word.push(rs.rows.item(i).name);
print(word)
}
}
)
}

Repeater {
id: repeater
model: word;
delegate: Rectangle {
width:100
height:30
border.color: "red"
border.width: 1
Text{
id:matn
anchors.centerIn: parent
text: modelData
}
}
}
}
}

[anda_skoa]

One important thing about programming is to not change code randomly at many places at the same time.

You could have just fixed your code from comment #7 by using the correct property as the model instead of a totally unrelated one.
But instead you changed how you fill the property and rename the property and fix the use of the property as a model.

With your process you can only end up with working code by pure luck, if one of the many changes you make fixes the problem and all other random changes do not break new things.

Oh and "it didn't work" is not a good description since it doesn't say what happend or did not happen.

So:
- fill a variable with the strings
- assign that to the property you intend to use as the Repeater's model
- use that property as the model, not some random other property


Cheers,
_

[ravandi]

The problem was solved:


import QtQuick 2.3
import QtQuick.LocalStorage 2.0
import QtQuick.Controls 1.1
Rectangle {
id: page2
property var word:new Array
property var namee:new Array

width: 360
height: 360

Column {
id: row
spacing: 5;

Component.onCompleted:{
var db = LocalStorage.openDatabaseSync("ravandi", "1.0", "The Example QML SQL!", 1000000);
db.transaction(
function(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS jadval(id integer primary key autoincrement not null,`name` varchar(40),`last` varchar(40))');
tx.executeSql("insert into jadval (name,last) values('mohammad reza','ravandi')");
var rs = tx.executeSql('SELECT * FROM jadval');
for(var i = 0; i < rs.rows.length; i++) {
namee =rs.rows.item(i).name
word.push(namee);
print(word)
}

repeater.model = word
}
)

}

Repeater {
id: repeater
model: word;
delegate: Rectangle {
width:100
height:30
border.color: "red"
border.width: 1
Text{
id:matn
anchors.centerIn: parent
text: modelData
}
}
}
}
}

[anda_skoa]

And you are needlessly using namee, also needlessly initializing it as an array.

But nice to see that randomly changing code will sometimes lead to a solution as well.
It only took two weeks longer then necessary. Maybe something you should think about.

Cheers,
_

[ravandi]

I would like to show the values field Last also.


import QtQuick 2.3
import QtQuick.LocalStorage 2.0
import QtQuick.Controls 1.1
Rectangle {
id: page2
property var word:new Array
property var namee:new Array

width: 360
height: 480

Column {
id: row
spacing: 5;

Component.onCompleted:{
var db = LocalStorage.openDatabaseSync("ravandi", "1.0", "The Example QML SQL!", 1000000);
db.transaction(
function(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS jadval(id integer primary key autoincrement not null,`name` varchar(40),`last` varchar(40))');
//tx.executeSql("insert into jadval (name,last) values('mohammad reza','ravandi')");
var rs = tx.executeSql('SELECT * FROM jadval');
for(var i = 0; i < rs.rows.length; i++) {
namee =rs.rows.item(i).name
word.push(namee);
// print(word)
}
repeater.model = word
}
)

}

Repeater {
id: repeater
model: word.count;
delegate: Rectangle {
width:200
height:30
border.color: "red"
border.width: 1
Text{
id:matn
anchors.centerIn: parent
// text:show values field name
}
Text{
id:matn2
//text:show values field last
}
}
}
}
}

[anda_skoa]

For that I would recommend switching to a ListModel instead of the array.

1) Create a ListModel with an id and use that id as the Repeater's model
2) Add some ListElement entries to the model that have the two data fields. That allows you to test the delegate with some fixed data
3) Remove those entries again and modify your data gathering loop to call append() on the model instead of pushing to the array.

Cheers,
_

[ravandi]

I already values append () in javascript the empty() was empty.
But I do not know how empty it in qml?
please guide me!

[anda_skoa]

But I do not know how empty it in qml?

"it" being the ListModel instance?
ListModel has a clear() method, easily discoverable by looking at the documentation.

Cheers,
_