Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. QML tutorial
Forum Updated to NodeBB v4.3 + New Features

QML tutorial

Scheduled Pinned Locked Moved Solved QML and Qt Quick
3 Posts 2 Posters 1.1k Views 2 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • sajis997S Offline
    sajis997S Offline
    sajis997
    wrote on last edited by
    #1

    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

    sajis997S 1 Reply Last reply
    0
    • sajis997S sajis997

      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

      sajis997S Offline
      sajis997S Offline
      sajis997
      wrote on last edited by
      #2

      @sajis997 Hi forum,

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

      Thanks

      ? 1 Reply Last reply
      0
      • sajis997S sajis997

        @sajis997 Hi forum,

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

        Thanks

        ? Offline
        ? Offline
        A Former User
        wrote on last edited by
        #3

        @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

        1 Reply Last reply
        0

        • Login

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved