Results 1 to 16 of 16

Thread: use of Rectangle javascript

  1. #1
    Join Date
    Oct 2015
    Posts
    46
    Thanks
    19
    Platforms
    Windows

    Default use of Rectangle javascript

    hello
    How can I use of Rectangle inside the javascript?
    Qt Code:
    1. for(var i = 0; i < rs.rows.length; i++) {
    2. Rectangle {
    3. width: 40
    4. height: 20
    5. //value filde of database
    6. Text { text: rs.rows.item(i).word }
    7. }
    8. }
    To copy to clipboard, switch view to plain text mode 

  2. #2
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: use of Rectangle javascript

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

    Cheers,
    _

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

    ravandi (18th January 2016)

  4. #3
    Join Date
    Oct 2015
    Posts
    46
    Thanks
    19
    Platforms
    Windows

    Default Re: use of Rectangle javascript

    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:
    1. my code:
    2. import QtQuick 2.4
    3. import QtQuick.LocalStorage 2.0
    4. Rectangle {
    5. property alias mouseArea: mouseArea
    6. property string r1 :""
    7. property int tedad
    8. width: 360
    9. height: 360
    10. MouseArea {
    11. id: mouseArea
    12. anchors.fill: parent
    13. }
    14. function fdatabase() {
    15. var db = LocalStorage.openDatabaseSync("ravandi", "1.0", "The Example QML SQL!", 1000000);
    16. db.transaction(
    17. function(tx) {
    18. tx.executeSql('CREATE TABLE IF NOT EXISTS jadval(id integer primary key autoincrement not null,`name` varchar(40),`last` varchar(40))');
    19. tx.executeSql("insert into jadval (name,last) values('mohammad','ravandi')");
    20. var rs = tx.executeSql('SELECT * FROM jadval');
    21. tedad = rs.rows.length;
    22. for(var i = 0; i < rs.rows.length; i++) {
    23. r1 +=rs.rows.item(i).name
    24. }
    25. }
    26. )
    27. }
    28. Component.onCompleted: fdatabase()
    29. Column {
    30. spacing: 5;
    31. Repeater {
    32. model: tedad;
    33. Rectangle {
    34. width:100
    35. height:30
    36. Text{
    37. anchors.horizontalCenter: parent.horizontalCenter
    38. renderType: Text.NativeRendering
    39. text: r1
    40. }
    41. }
    42. }
    43. }
    44. }
    To copy to clipboard, switch view to plain text mode 
    Last edited by ravandi; 18th January 2016 at 08:40.

  5. #4
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: use of Rectangle javascript

    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,
    _

  6. #5
    Join Date
    Oct 2015
    Posts
    46
    Thanks
    19
    Platforms
    Windows

    Default Re: use of Rectangle javascript

    it does not work :
    Qt Code:
    1. import QtQuick 2.4
    2. import QtQuick.LocalStorage 2.0
    3. Rectangle {
    4. property alias mouseArea: mouseArea
    5. //property string r1 :""
    6. property variant r1: Array()
    7. property int tedad
    8. width: 360
    9. height: 360
    10. MouseArea {
    11. id: mouseArea
    12. anchors.fill: parent
    13. }
    14. function fdatabase() {
    15. var db = LocalStorage.openDatabaseSync("ravandi", "1.0", "The Example QML SQL!", 1000000);
    16. db.transaction(
    17. function(tx) {
    18. tx.executeSql('CREATE TABLE IF NOT EXISTS jadval(id integer primary key autoincrement not null,`name` varchar(40),`last` varchar(40))');
    19. tx.executeSql("insert into jadval (name,last) values('mohammad','ravandi')");
    20. var rs = tx.executeSql('SELECT * FROM jadval');
    21. tedad = rs.rows.length;
    22. for(var i = 0; i < rs.rows.length; i++) {
    23. r1 +=rs.rows.item(i).name
    24. }
    25. //console.log(r1)
    26. }
    27. )
    28. }
    29. Component.onCompleted: fdatabase()
    30. Column {
    31. spacing: 5;
    32. Repeater {
    33. model: r1;
    34. Rectangle {
    35. width:100
    36. height:30
    37. border.color: "red"
    38. border.width: 1
    39. Text{
    40. anchors.horizontalCenter: parent.horizontalCenter
    41. //renderType: Text.NativeRendering
    42. text:modelData
    43. }
    44. }
    45. }
    46. }
    47. }
    To copy to clipboard, switch view to plain text mode 
    I wrote , according to the code:
    Qt Code:
    1. import QtQuick 2.0
    2. Rectangle {
    3. width:500
    4. height:700
    5. property variant r1:["ali", "ravandi", "sadegh"]
    6. Column {
    7. Repeater {
    8. model: r1
    9. Rectangle {
    10. width:100
    11. height:30
    12. border.color: "red"
    13. border.width: 1
    14. Text { text: "Data: " + modelData }
    15. }
    16. }
    17. }
    18. }
    To copy to clipboard, switch view to plain text mode 

  7. #6
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: use of Rectangle javascript

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

    Qt Code:
    1. var items = [];
    2. for (....) {
    3. items.push(rs.rows.item(i).name);
    4. }
    5. r1 = items;
    To copy to clipboard, switch view to plain text mode 

    Cheers,
    _

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

    ravandi (28th January 2016)

  9. #7
    Join Date
    Oct 2015
    Posts
    46
    Thanks
    19
    Platforms
    Windows

    Default Re: use of Rectangle javascript

    Qt Code:
    1. import QtQuick 2.4
    2. import QtQuick.LocalStorage 2.0
    3. Rectangle {
    4. property alias mouseArea: mouseArea
    5. //property variant r1: Array()
    6. property variant r1: []
    7. property int tedad
    8. width: 360
    9. height: 360
    10. MouseArea {
    11. id: mouseArea
    12. anchors.fill: parent
    13. }
    14. function fdatabase() {
    15. var db = LocalStorage.openDatabaseSync("ravandi", "1.0", "The Example QML SQL!", 1000000);
    16. db.transaction(
    17. function(tx) {
    18. tx.executeSql('CREATE TABLE IF NOT EXISTS jadval(id integer primary key autoincrement not null,`name` varchar(40),`last` varchar(40))');
    19. tx.executeSql("insert into jadval (name,last) values('ahmad','ravandi')");
    20. var rs = tx.executeSql('SELECT * FROM jadval');
    21. tedad = rs.rows.length;
    22. var items = [];
    23. for(var i = 0; i < rs.rows.length; i++) {
    24. items.push(rs.rows.item(i).name);
    25. r1 = items;
    26. print(r1)
    27. // r1 +=rs.rows.item(i).name
    28.  
    29. }
    30. }
    31. )
    32. }
    33. Component.onCompleted: fdatabase()
    34. Column {
    35. spacing: 5;
    36. Repeater {
    37. model: tedad;
    38. Rectangle {
    39. width:100
    40. height:30
    41. border.color: "red"
    42. border.width: 1
    43. Text{
    44. id:items
    45. anchors.horizontalCenter: parent.horizontalCenter
    46. renderType: Text.NativeRendering
    47. text: r1
    48. }
    49. }
    50. }
    51. }
    52. }
    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

  10. #8
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: use of Rectangle javascript

    And you are posting this why?

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

    Cheers,
    _

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

    ravandi (31st January 2016)

  12. #9
    Join Date
    Oct 2015
    Posts
    46
    Thanks
    19
    Platforms
    Windows

    Default Re: use of Rectangle javascript

    I did try. but , it didn't work.
    Qt Code:
    1. import QtQuick 2.3
    2. import QtQuick.LocalStorage 2.0
    3. import QtQuick.Controls 1.1
    4. Rectangle {
    5. id: page2
    6. property var word:[]
    7. width: 360
    8. height: 360
    9.  
    10. Column {
    11. id: row
    12. spacing: 5;
    13.  
    14. Component.onCompleted:{
    15. var db = LocalStorage.openDatabaseSync("ravandi", "1.0", "The Example QML SQL!", 1000000);
    16. db.transaction(
    17. function(tx) {
    18. tx.executeSql('CREATE TABLE IF NOT EXISTS jadval(id integer primary key autoincrement not null,`name` varchar(40),`last` varchar(40))');
    19. tx.executeSql("insert into jadval (name,last) values('reza','ravandi')");
    20. var rs = tx.executeSql('SELECT * FROM jadval');
    21. for(var i = 0; i < rs.rows.length; i++) {
    22. word.push(rs.rows.item(i).name);
    23. print(word)
    24. }
    25. }
    26. )
    27. }
    28.  
    29. Repeater {
    30. id: repeater
    31. model: word;
    32. delegate: Rectangle {
    33. width:100
    34. height:30
    35. border.color: "red"
    36. border.width: 1
    37. Text{
    38. id:matn
    39. anchors.centerIn: parent
    40. text: modelData
    41. }
    42. }
    43. }
    44. }
    45. }
    To copy to clipboard, switch view to plain text mode 

  13. #10
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: use of Rectangle javascript

    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,
    _

  14. #11
    Join Date
    Oct 2015
    Posts
    46
    Thanks
    19
    Platforms
    Windows

    Default Re: use of Rectangle javascript

    The problem was solved:
    Qt Code:
    1. import QtQuick 2.3
    2. import QtQuick.LocalStorage 2.0
    3. import QtQuick.Controls 1.1
    4. Rectangle {
    5. id: page2
    6. property var word:new Array
    7. property var namee:new Array
    8.  
    9. width: 360
    10. height: 360
    11.  
    12. Column {
    13. id: row
    14. spacing: 5;
    15.  
    16. Component.onCompleted:{
    17. var db = LocalStorage.openDatabaseSync("ravandi", "1.0", "The Example QML SQL!", 1000000);
    18. db.transaction(
    19. function(tx) {
    20. tx.executeSql('CREATE TABLE IF NOT EXISTS jadval(id integer primary key autoincrement not null,`name` varchar(40),`last` varchar(40))');
    21. tx.executeSql("insert into jadval (name,last) values('mohammad reza','ravandi')");
    22. var rs = tx.executeSql('SELECT * FROM jadval');
    23. for(var i = 0; i < rs.rows.length; i++) {
    24. namee =rs.rows.item(i).name
    25. word.push(namee);
    26. print(word)
    27. }
    28.  
    29. repeater.model = word
    30. }
    31. )
    32.  
    33. }
    34.  
    35. Repeater {
    36. id: repeater
    37. model: word;
    38. delegate: Rectangle {
    39. width:100
    40. height:30
    41. border.color: "red"
    42. border.width: 1
    43. Text{
    44. id:matn
    45. anchors.centerIn: parent
    46. text: modelData
    47. }
    48. }
    49. }
    50. }
    51. }
    To copy to clipboard, switch view to plain text mode 

  15. #12
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: use of Rectangle javascript

    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,
    _

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

    ravandi (21st February 2016)

  17. #13
    Join Date
    Oct 2015
    Posts
    46
    Thanks
    19
    Platforms
    Windows

    Default Re: use of Rectangle javascript

    I would like to show the values field Last also.
    Qt Code:
    1. import QtQuick 2.3
    2. import QtQuick.LocalStorage 2.0
    3. import QtQuick.Controls 1.1
    4. Rectangle {
    5. id: page2
    6. property var word:new Array
    7. property var namee:new Array
    8.  
    9. width: 360
    10. height: 480
    11.  
    12. Column {
    13. id: row
    14. spacing: 5;
    15.  
    16. Component.onCompleted:{
    17. var db = LocalStorage.openDatabaseSync("ravandi", "1.0", "The Example QML SQL!", 1000000);
    18. db.transaction(
    19. function(tx) {
    20. tx.executeSql('CREATE TABLE IF NOT EXISTS jadval(id integer primary key autoincrement not null,`name` varchar(40),`last` varchar(40))');
    21. //tx.executeSql("insert into jadval (name,last) values('mohammad reza','ravandi')");
    22. var rs = tx.executeSql('SELECT * FROM jadval');
    23. for(var i = 0; i < rs.rows.length; i++) {
    24. namee =rs.rows.item(i).name
    25. word.push(namee);
    26. // print(word)
    27. }
    28. repeater.model = word
    29. }
    30. )
    31.  
    32. }
    33.  
    34. Repeater {
    35. id: repeater
    36. model: word.count;
    37. delegate: Rectangle {
    38. width:200
    39. height:30
    40. border.color: "red"
    41. border.width: 1
    42. Text{
    43. id:matn
    44. anchors.centerIn: parent
    45. // text:show values field name
    46. }
    47. Text{
    48. id:matn2
    49. //text:show values field last
    50. }
    51. }
    52. }
    53. }
    54. }
    To copy to clipboard, switch view to plain text mode 
    Last edited by ravandi; 21st February 2016 at 06:55.

  18. #14
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: use of Rectangle javascript

    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,
    _

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

    ravandi (22nd February 2016)

  20. #15
    Join Date
    Oct 2015
    Posts
    46
    Thanks
    19
    Platforms
    Windows

    Default Re: use of Rectangle javascript

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

  21. #16
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: use of Rectangle javascript

    Quote Originally Posted by ravandi View Post
    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,
    _

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

    ravandi (23rd February 2016)

Similar Threads

  1. Replies: 2
    Last Post: 25th December 2014, 16:15
  2. is JavaScript necessary for QML???
    By ramin.lich in forum Newbie
    Replies: 2
    Last Post: 23rd November 2014, 21:07
  3. How to get javascript var value in qt
    By ram4soft in forum Qt Programming
    Replies: 0
    Last Post: 12th April 2011, 16:55
  4. Help with QML, JavaScript and C++
    By chetu1984 in forum Qt Quick
    Replies: 5
    Last Post: 14th February 2011, 23:42
  5. Replies: 9
    Last Post: 29th November 2010, 13:12

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.