QML tutorial

[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

[sajis997]

@sajis997 Hi forum,

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

Thanks

[A Former User]

@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