QML tutorial



  • Hello forum,

    I am trying the tutorial in the website :

    QML Components

    And I am getting the following error while running with qmlscene:

    sajjad@sajjad-G74Sx:~/Documents/Qt/Qt5CandaquesExamples/ch01/src/showcase/cell$ qmlscene main.qml &
    [2] 13258
    sajjad@sajjad-G74Sx:~/Documents/Qt/Qt5CandaquesExamples/ch01/src/showcase/cell$ file:///home/sajjad/Documents/Qt/Qt5CandaquesExamples/ch01/src/showcase/cell/main.qml:27 Type Cell unavailable
    file:///home/sajjad/Documents/Qt/Qt5CandaquesExamples/ch01/src/showcase/cell/Cell.qml:41 Expected token `,'
    
    /*
    STRUCTURE OF THE QML DOCUMENT
    
    1. Its import statements
    2. A single root object declaration
    */
    
    
    /*
     the imports section in a document contains import statements
     that define which QML object types and JavaScript resources
     the document is able to use.
    
    */
    
    import QtQuick 2.0
    
    /*
       the root type component is the Item with the id container
       An item is the most basic visual type in QML and is often
       used as a container for other types
    */
    Item {
    
         id: container
         /*
           This property is accessible from outside our component,
           this allows us to instantiate the cells with different
           colors. This property is just an alias to an existing
           property - the color of the rectangle that compose the cell
         */
         property alias cellColor: rectangle.color
         /*
          we want our component to also have a signal that we call
          clicked with a cellColor parameter of type color
          We will use this signal to change the color of the text in the
          main QML file later.
         */   
         signal clicked(color cellColor)
    
         width: 40: height: 25
    
    
         /*
          Our cell component is basically a colored
          rectangle with the id rectangle
         */
         Rectangle {
    
         	       id: rectangle
    	       border.color: "white"	       	   
    	       /*
    	         a convenient way to set the size of a visual type.
    		 In this case the rectangle will have the same size
    		 as its parent.
    	       */
    	       anchors.fill: parent
         }
    
    
         /*
    	In order to change the color of the text when clicking on a cell,
    	a MouseArea type with the same size as its parent.
    	A MouseArea defines a signal called clicked. When this signal is
    	triggered we want to emit our own clicked signal with the color
    	as parameter.
         */
         MouseArea {
    
         	       anchors.fill: parent
    	       onClicked: container.clicked(container.cellColor)
         }
    
    }
    

    Then inside the main.qml file I have the following:

    import QtQuick 2.0
    
    Rectangle {
    
    	  id: page
    	  width: 320; height: 480
    	  color: "lightgray"
    
    
    	  Text {
    
    	  id: helloText
    	  text: "Hello world!"
    	  y: 30
    	  anchors.horizontalCenter: page.horizontalCenter
    	  font.pointSize: 24; font.bold: true
    	  
    	  }
    
    
    	  Grid {
    	       id: colorPicker
    	       x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4
    	       rows: 2; columns: 3; spacing: 3
    
    
    	       Cell { cellColor: "red"; onClicked: helloText.color = cellColor }
    	       Cell { cellColor: "green"; onClicked: helloText.color = cellColor }
    	       Cell { cellColor: "blue"; onClicked: helloText.color = cellColor }
    	       Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }
    	       Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }
    	       Cell { cellColor: "black"; onClicked: helloText.color = cellColor }	       
    	  }
    
    }
    

    What is wrong with above snippets? Some hints would be helpful.

    Thanks



  • @sajis997 Hi forum,

    The issue is solved . It was a tiny typo and now it works as expected.

    Thanks



  • @sajis997 Please mark the thread as solved using the topic tools. If you don't know how to do this you can look it up here: http://forum.qt.io/topic/62700/hitchhiker-s-visual-guide-to-the-qt-forum


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.