How to call a javascript function without the trigger of any event in a grid?

[kunal269]

Below is the given code snippet of the qml file which is loaded through a cpp file of a qt project. In this i want to directly call a .js file fucntion createGrid to run on PowerCell elements in a loop which are commented to create a grid.

This gives the error: Invalid import for import line of .js file

import Qt 4.7
import "loop.js" as genList
 
 Rectangle {
     id:page
     width: 550; height:159
     x:0
     y:0
     signal gridEntry
     property variant listOfPowerHogs: powerHogList
     Image {
         id: backGround
         source: "ui_images/background.png"
 
    Flickable{
        id:flick
        anchors.fill: parent
        contentWidth: flickArea.width
        contentHeight: flickArea.height
        flickableDirection: Flickable.HorizontalFlick
        Grid{
            id:flickArea
            x:0
            y:12
            width: 697
            height: 135
            rows: 1;  columns: 5;  spacing: 8;
           //            PowerCell {
//                width:/* page.inPortrait ? (parent.width-4)/2 : (parent.width-8)/3*/ (parent.width-100)/4
//                iconValue: listOfPowerHogs[0]
//                instrumentedStatus: listOfPowerHogs[1]
//            }
//            PowerCell {
//                width: (parent.width-100)/4
//                iconValue: listOfPowerHogs[2]
//                instrumentedStatus: listOfPowerHogs[3]
//            }
//            PowerCell {
//                width: (parent.width-100)/4
//                iconValue: listOfPowerHogs[4]
//                instrumentedStatus: listOfPowerHogs[5]
//            }
//            PowerCell {
//                width: (parent.width-100)/4
//                iconValue: listOfPowerHogs[6]
//                instrumentedStatus: listOfPowerHogs[7]
//          }
 
               genList.createGrid(listOfPowerHogs)
 
        }
        states: State {
            name: "ShowBars"
            when: view.movingVertically || view.movingHorizontally
 
        }
        transitions: Transition {
            NumberAnimation { properties: "opacity"; duration: 400 }
        }
    }
    ScrollBar {
        id: horizontalScrollBar
        width: flick.width-12; height: 12
        anchors.bottom: flick.bottom
        opacity: 0
        orientation: Qt.Horizontal
        position: flick.visibleArea.xPosition
        pageSize: flick.visibleArea.widthRatio
        }
      }
    }

import Qt 4.7
import "loop.js" as genList

 Rectangle {
     id:page
     width: 550; height:159
     x:0
     y:0
     signal gridEntry
     property variant listOfPowerHogs: powerHogList
     Image {
         id: backGround
         source: "ui_images/background.png"

    Flickable{
        id:flick
        anchors.fill: parent
        contentWidth: flickArea.width
        contentHeight: flickArea.height
        flickableDirection: Flickable.HorizontalFlick
        Grid{
            id:flickArea
            x:0
            y:12
            width: 697
            height: 135
            rows: 1;  columns: 5;  spacing: 8;
           //            PowerCell {
//                width:/* page.inPortrait ? (parent.width-4)/2 : (parent.width-8)/3*/ (parent.width-100)/4
//                iconValue: listOfPowerHogs[0]
//                instrumentedStatus: listOfPowerHogs[1]
//            }
//            PowerCell {
//                width: (parent.width-100)/4
//                iconValue: listOfPowerHogs[2]
//                instrumentedStatus: listOfPowerHogs[3]
//            }
//            PowerCell {
//                width: (parent.width-100)/4
//                iconValue: listOfPowerHogs[4]
//                instrumentedStatus: listOfPowerHogs[5]
//            }
//            PowerCell {
//                width: (parent.width-100)/4
//                iconValue: listOfPowerHogs[6]
//                instrumentedStatus: listOfPowerHogs[7]
//          }
       
               genList.createGrid(listOfPowerHogs)
          
        }
        states: State {
            name: "ShowBars"
            when: view.movingVertically || view.movingHorizontally

        }
        transitions: Transition {
            NumberAnimation { properties: "opacity"; duration: 400 }
        }
    }
    ScrollBar {
        id: horizontalScrollBar
        width: flick.width-12; height: 12
        anchors.bottom: flick.bottom
        opacity: 0
        orientation: Qt.Horizontal
        position: flick.visibleArea.xPosition
        pageSize: flick.visibleArea.widthRatio
        }
      }
    }

To copy to clipboard, switch view to plain text mode 

[coderbob]

Is loop.js in the same directory as the qml file? What is the contents of loop.js?

[kunal269]

yes loop.js is in the same directory

Loop.js has a fucntion which has the variant list as parameter.
Here i am using power cells defined by me as a element on which the loop is being called on.
Below is the code for loop.js

var PCell = new Array;
var i = 0;
var powerComponent = Qt.createComponent("PowerCell.qml");
 
function setPowerCells(pList)
{
    PCell = pList;
    for(i = 0; i < (PCell.length - 1);i+2)
        {
        PCell.iconValue = pList[i];
        PCell.instrumentedStatus = pList[i+1];
    }
}

var PCell = new Array;
var i = 0;
var powerComponent = Qt.createComponent("PowerCell.qml");

function setPowerCells(pList)
{
    PCell = pList;
    for(i = 0; i < (PCell.length - 1);i+2)
        {
        PCell.iconValue = pList[i];
        PCell.instrumentedStatus = pList[i+1];
    }
}

To copy to clipboard, switch view to plain text mode 

This is the code for power cell to be called by js file

import Qt 4.7
 
Item {
    id: button
    signal clicked
    property string iconValue
    property string instrumentedStatus
    signal name
    property bool toggled: false
    width: 133
    height: 135
    Image {
        id:button_img
        anchors.fill: button
        anchors.margins: mouseArea.pressed
        smooth: true
        source: { if ("instrumented" == button.instrumentedStatus)
                    return "instrumentedButton.png"
                  else if ("non-instrumented" ==  button.instrumentedStatus)
                      return "nonInstrumentedButton.png"
        }
 
        Image {
            x:37
            y:40
            width: 54
            height: 56
            id: instrumentIcon
            source: button.iconValue
 
        }
 
    }
 
    MouseArea {
        id: mouseArea
        anchors.fill: parent
        onClicked: {
            button.clicked()
        }
    }
}

import Qt 4.7

Item {
    id: button
    signal clicked
    property string iconValue
    property string instrumentedStatus
    signal name
    property bool toggled: false
    width: 133
    height: 135
    Image {
        id:button_img
        anchors.fill: button
        anchors.margins: mouseArea.pressed
        smooth: true
        source: { if ("instrumented" == button.instrumentedStatus)
                    return "instrumentedButton.png"
                  else if ("non-instrumented" ==  button.instrumentedStatus)
                      return "nonInstrumentedButton.png"
        }

        Image {
            x:37
            y:40
            width: 54
            height: 56
            id: instrumentIcon
            source: button.iconValue

        }

    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        onClicked: {
            button.clicked()
        }
    }
}

To copy to clipboard, switch view to plain text mode