use of Rectangle javascript

**ravandi** · 16th January 2016, 12:25

hello
How can I use of Rectangle inside the javascript?

Qt Code:

Switch view

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 }
	}
}

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 }
	}
}

To copy to clipboard, switch view to plain text mode

**anda_skoa** · 16th January 2016, 12:54

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

Cheers,
_

**ravandi** · 18th January 2016, 07:36

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

Qt Code:

Switch view

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  
				}	
            }
        }
    }		
}

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  
				}	
            }
        }
    }		
}

To copy to clipboard, switch view to plain text mode

**anda_skoa** · 18th January 2016, 16:55

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** · 19th January 2016, 08:17

it does not work :

Qt Code:

Switch view

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   
				}	
            }
        }
    }		
}

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   
				}	
            }
        }
    }		
}

To copy to clipboard, switch view to plain text mode

I wrote , according to the code:

Qt Code:

Switch view

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 }
		}
    }
}
}

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 }
		}
    }
}
}

To copy to clipboard, switch view to plain text mode

**anda_skoa** · 19th January 2016, 16:09

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

Qt Code:

Switch view

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

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

To copy to clipboard, switch view to plain text mode

Cheers,
_

**ravandi** · 28th January 2016, 18:04

Qt Code:

Switch view

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
				}	
            }
        }
    }		
}

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
				}	
            }
        }
    }		
}

To copy to clipboard, switch view to plain text mode

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** · 28th January 2016, 19:54

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** · 31st January 2016, 06:37

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

Qt Code:

Switch view

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
		}
            }
        }
    }
}

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
		}
            }
        }
    }
}

To copy to clipboard, switch view to plain text mode

**anda_skoa** · 31st January 2016, 10:19

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** · 1st February 2016, 07:58

The problem was solved:

Qt Code:

Switch view

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
			}
            }
        }
    }
}

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
			}
            }
        }
    }
}

To copy to clipboard, switch view to plain text mode

Thread: use of Rectangle javascript

Thread Tools

Search Thread

Display

Hybrid View

use of Rectangle javascript

Re: use of Rectangle javascript

The following user says thank you to anda_skoa for this useful post:

Re: use of Rectangle javascript

Re: use of Rectangle javascript

Re: use of Rectangle javascript

Re: use of Rectangle javascript

The following user says thank you to anda_skoa for this useful post:

Re: use of Rectangle javascript

Re: use of Rectangle javascript

The following user says thank you to anda_skoa for this useful post:

Re: use of Rectangle javascript

Re: use of Rectangle javascript

Re: use of Rectangle javascript

Similar Threads

Horizontally centering a rectangle in another rectangle

is JavaScript necessary for QML???

How to get javascript var value in qt

Help with QML, JavaScript and C++

How to return a Javascript object to Javascript environment?

Bookmarks

Bookmarks

Posting Permissions