Creating a custom QML element with Qt - Revision history

Hamishwillee: Hamishwillee - Add Abstract. Improve categories

2012-10-17T06:09:48Z

Hamishwillee - Add Abstract. Improve categories

Hamishwillee: Text replace - "`" to ""`


2012-10-11T01:16:32Z
Text replace - "<code cpp>" to "<code cpp-qt>"

			
			
			
			
		
		← Older revision
		Revision as of 01:16, 11 October 2012
		
Line 55:
Line 55:
  '''line.h'''   '''line.h'''
    
− <code cpp> + <code cpp-qt>
  #ifndef LINE_H   #ifndef LINE_H
  #define LINE_H   #define LINE_H
Line 186:
Line 186:
  '''main.cpp'''   '''main.cpp'''
    
− <code cpp> + <code cpp-qt>
  #include "line.h"   #include "line.h"
  #include <QApplication>   #include <QApplication>
Line 216:
Line 216:
  '''ui.qml'''   '''ui.qml'''
    
− <code cpp> + <code cpp-qt>
  import CustomComponents 1.0   import CustomComponents 1.0
  import Qt 4.7   import Qt 4.7



Hamishwillee: Text replace - "Category:MeeGo" to "Category:MeeGo Harmattan"
2012-06-13T10:52:22Z
Text replace - "Category:MeeGo" to "Category:MeeGo Harmattan"

			
			
			
			
		
		← Older revision
		Revision as of 10:52, 13 June 2012
		
Line 264:
Line 264:
  The custom QML element {{Icode|Line}} was created with Qt by deriving the class {{Icode|QDeclarativeItem}}, adding a few new properties and overwriting the paint method. The Qt class was registered as QML type and then used in a Qt Quick application.   The custom QML element {{Icode|Line}} was created with Qt by deriving the class {{Icode|QDeclarativeItem}}, adding a few new properties and overwriting the paint method. The Qt class was registered as QML type and then used in a Qt Quick application.
    
− [[Category:Code Snippet]][[Category: Qt Quick]][[Category:Code Snippet]][[Category:MeeGo]] [[Category:Symbian]] + [[Category:Code Snippet]][[Category: Qt Quick]][[Category:Code Snippet]][[Category:MeeGo Harmattan]] [[Category:Symbian]]



Hamishwillee: moved CS001627 - Creating a custom QML element with Qt to Creating a custom QML element with Qt over redirect: Merge into wiki.
2012-05-11T06:36:41Z
moved CS001627 - Creating a custom QML element with Qt to Creating a custom QML element with Qt over redirect: Merge into wiki.

		
		← Older revision
		Revision as of 06:36, 11 May 2012
		


Hamishwillee: Removed protection from "CS001627 - Creating a custom QML element with Qt": Merging into Wiki
2012-05-11T06:36:36Z
Removed protection from "CS001627 - Creating a custom QML element with Qt": Merging into Wiki

		
		← Older revision
		Revision as of 06:36, 11 May 2012
		


Hamishwillee: Hamishwillee - Bot update
2012-05-11T06:36:32Z
Hamishwillee - Bot update

			
			
			
			
		
		← Older revision
		Revision as of 06:36, 11 May 2012
		
Line 1:
Line 1:
  [[Category:Qt]]   [[Category:Qt]]
− {{KBCS}} + {{ArticleMetaData <!-- v1.2 -->
− {{ArticleMetaData + 
− |id=CS001627 + 
− |platform=S60 5th Edition<br>Maemo + 
− |devices=Nokia 900 + 
− |category=Qt + 
− |subcategory=Qt Quick + 
− |creationdate=July 9, 2010 + 
− |keywords=QML, QDeclarativeItem + 
−   + 
  |sourcecode= <!-- Link to example source code (e.g. [[Media:The Code Example ZIP.zip]]) -->   |sourcecode= <!-- Link to example source code (e.g. [[Media:The Code Example ZIP.zip]]) -->
  |installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->   |installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
− |sdk=<!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) --> + |devices= Nokia 900
− |devicecompatability=<!-- Compatible devices (e.g.: All* (must have GPS) ) --> + |sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
− |signing=<!-- Empty or one of Self-Signed, DevCert, Manufacturer --> + |platform= S60 5th Edition<br>Maemo
− |capabilities=<!-- Capabilities required (e.g. Location, NetworkServices.) --> + |devicecompatability= <!-- Compatible devices (e.g.: All* (must have GPS) ) -->
− |author=[[User:Kratsan]] + |dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
  + |signing= <!-- Empty or one of Self-Signed, DevCert, Manufacturer -->
  + |capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
  + |keywords= QML, QDeclarativeItem
  + |language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
  + |translated-by= <!-- [[User:XXXX]] -->
  + |translated-from-title= <!-- Title only -->
  + |translated-from-id= <!-- Id of translated revision -->
  + |review-by= <!-- After re-review: [[User:username]] -->
  + |review-timestamp= <!-- After re-review: YYYYMMDD -->
  + |update-by= <!-- After significant update: [[User:username]]-->
  + |update-timestamp= <!-- After significant update: YYYYMMDD -->
  + |creationdate= 20100617
  + |author= [[User:Kratsan]]
  + <!-- The following are not in current metadata -->
  + |subcategory= Qt Quick
  + |id= CS001627
  }}   }}
    
Line 23:
Line 30:
  This snippet shows how to create a custom QML element with Qt. Sometimes the elements provided by the Declarative module are not enough and a new element must be implemented.   This snippet shows how to create a custom QML element with Qt. Sometimes the elements provided by the Declarative module are not enough and a new element must be implemented.
    
− In the following example we create a <tt>Line</tt> element which simply draws a line. The coordinates of the beginning and end of the line must be given. It is also possible to adjust the color, pen width, and smoothing of the line. + In the following example we create a {{Icode|Line}} element which simply draws a line. The coordinates of the beginning and end of the line must be given. It is also possible to adjust the color, pen width, and smoothing of the line.
    
  ==Preconditions==   ==Preconditions==
Line 44:
Line 51:
  </code>   </code>
    
− The new element is derived from <tt>QDeclarativeItem</tt> which gives us the functionality of a QML <tt>Item</tt>, such as <tt>x, y, width</tt> and <tt>height</tt>. We declare the new properties with the macro <tt>Q_PROPERTY</tt> and state which methods to use when properties are read and updated. The <tt>NOTIFY</tt> feature is used to notify bound properties to update their value when the property here changes. The <tt>paint</tt> method handles the painting of our custom element. Finally, at the end of the header, we declare the class <tt>Line</tt> as a QML type. + The new element is derived from {{Icode|QDeclarativeItem}} which gives us the functionality of a QML {{Icode|Item}}, such as {{Icode|x, y, width}} and {{Icode|height}}. We declare the new properties with the macro {{Icode|Q_PROPERTY}} and state which methods to use when properties are read and updated. The {{Icode|NOTIFY}} feature is used to notify bound properties to update their value when the property here changes. The {{Icode|paint}} method handles the painting of our custom element. Finally, at the end of the header, we declare the class {{Icode|Line}} as a QML type.
    
  '''line.h'''   '''line.h'''
Line 175:
Line 182:
  </code>   </code>
    
− In '''main.cpp''', we register the C++ type <tt>Line</tt> in the QML system with the name <tt>Line</tt> to the library <tt>CustomComponents</tt> with version number 1.0. + In '''main.cpp''', we register the C++ type {{Icode|Line}} in the QML system with the name {{Icode|Line}} to the library {{Icode|CustomComponents}} with version number 1.0.
    
  '''main.cpp'''   '''main.cpp'''
Line 205:
Line 212:
  </code>   </code>
    
− In the QML document, we import the <tt>CustomComponents</tt> library which contains the <tt>Line</tt> element. + In the QML document, we import the {{Icode|CustomComponents}} library which contains the {{Icode|Line}} element.
    
  '''ui.qml'''   '''ui.qml'''
Line 255:
Line 262:
  ===Postconditions===   ===Postconditions===
    
− The custom QML element <tt>Line</tt> was created with Qt by deriving the class <tt>QDeclarativeItem</tt>, adding a few new properties and overwriting the paint method. The Qt class was registered as QML type and then used in a Qt Quick application. + The custom QML element {{Icode|Line}} was created with Qt by deriving the class {{Icode|QDeclarativeItem}}, adding a few new properties and overwriting the paint method. The Qt class was registered as QML type and then used in a Qt Quick application.
    
− [[Category:Code Examples]][[Category: Qt Quick]][[Category:Code Snippet]][[Category:MeeGo]] [[Category:Symbian]] + [[Category:Code Snippet]][[Category: Qt Quick]][[Category:Code Snippet]][[Category:MeeGo]] [[Category:Symbian]]



Hamishwillee: Hamishwillee - Addition to article of: Category:MeeGo Category:Symbian. (Add platform categories)
2012-02-15T05:38:49Z
Hamishwillee - Addition to article of: Category:MeeGo Category:Symbian. (Add platform categories)

			
			
			
			
		
		← Older revision
		Revision as of 05:38, 15 February 2012
		
Line 257:
Line 257:
  The custom QML element <tt>Line</tt> was created with Qt by deriving the class <tt>QDeclarativeItem</tt>, adding a few new properties and overwriting the paint method. The Qt class was registered as QML type and then used in a Qt Quick application.   The custom QML element <tt>Line</tt> was created with Qt by deriving the class <tt>QDeclarativeItem</tt>, adding a few new properties and overwriting the paint method. The Qt class was registered as QML type and then used in a Qt Quick application.
    
− [[Category:Code Examples]][[Category: Qt Quick]][[Category:Code Snippet]] + [[Category:Code Examples]][[Category: Qt Quick]][[Category:Code Snippet]][[Category:MeeGo]] [[Category:Symbian]]



Hamishwillee: Hamishwillee - Bot change of template (Template:CodeSnippet) - now using Template:ArticleMetaData
2011-06-24T09:22:28Z
Hamishwillee - Bot change of template (Template:CodeSnippet) - now using Template:ArticleMetaData

			
			
			
			
		
		← Older revision
		Revision as of 09:22, 24 June 2011
		
Line 1:
Line 1:
  [[Category:Qt]]   [[Category:Qt]]
  {{KBCS}}   {{KBCS}}
− {{CodeSnippet + {{ArticleMetaData
  |id=CS001627   |id=CS001627
  |platform=S60 5th Edition<br>Maemo   |platform=S60 5th Edition<br>Maemo
Line 9:
Line 9:
  |creationdate=July 9, 2010   |creationdate=July 9, 2010
  |keywords=QML, QDeclarativeItem   |keywords=QML, QDeclarativeItem
  + 
  + |sourcecode= <!-- Link to example source code (e.g. [[Media:The Code Example ZIP.zip]]) -->
  + |installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
  + |sdk=<!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
  + |devicecompatability=<!-- Compatible devices (e.g.: All* (must have GPS) ) -->
  + |signing=<!-- Empty or one of Self-Signed, DevCert, Manufacturer -->
  + |capabilities=<!-- Capabilities required (e.g. Location, NetworkServices.) -->
  + |author=[[User:Kratsan]]
  }}   }}
    



Seppo fn: Protected "CS001627 - Creating a custom QML element with Qt" ([edit=sysop] (indefinite) [move=sysop] (indefinite))
2010-09-15T06:32:14Z
Protected "CS001627 - Creating a custom QML element with Qt" ([edit=sysop] (indefinite) [move=sysop] (indefinite))

		
		← Older revision
		Revision as of 06:32, 15 September 2010
		


Kratsan: Removed anchors.fill from Line element, this resulted very strange behavior on line drawing.
2010-09-15T06:29:34Z
Removed anchors.fill from Line element, this resulted very strange behavior on line drawing.

			
			
			
			
		
		← Older revision
		Revision as of 06:29, 15 September 2010
		
Line 212:
Line 212:
       Line {        Line {
           id: diagonalLine            id: diagonalLine
−  
−         anchors.fill: parent  
    
           Behavior on x1 { NumberAnimation { duration: 1000 } }            Behavior on x1 { NumberAnimation { duration: 1000 } }

← Older revision		Revision as of 10:52, 13 June 2012
Line 264:		Line 264:
	The custom QML element {{Icode\|Line}} was created with Qt by deriving the class {{Icode\|QDeclarativeItem}}, adding a few new properties and overwriting the paint method. The Qt class was registered as QML type and then used in a Qt Quick application.		The custom QML element {{Icode\|Line}} was created with Qt by deriving the class {{Icode\|QDeclarativeItem}}, adding a few new properties and overwriting the paint method. The Qt class was registered as QML type and then used in a Qt Quick application.

−	[[Category:Code Snippet]][[Category: Qt Quick]][[Category:Code Snippet]][[Category:MeeGo]] [[Category:Symbian]]	+	[[Category:Code Snippet]][[Category: Qt Quick]][[Category:Code Snippet]][[Category:MeeGo Harmattan]] [[Category:Symbian]]

← Older revision		Revision as of 05:38, 15 February 2012
Line 257:		Line 257:
	The custom QML element <tt>Line</tt> was created with Qt by deriving the class <tt>QDeclarativeItem</tt>, adding a few new properties and overwriting the paint method. The Qt class was registered as QML type and then used in a Qt Quick application.		The custom QML element <tt>Line</tt> was created with Qt by deriving the class <tt>QDeclarativeItem</tt>, adding a few new properties and overwriting the paint method. The Qt class was registered as QML type and then used in a Qt Quick application.

−	[[Category:Code Examples]][[Category: Qt Quick]][[Category:Code Snippet]]	+	[[Category:Code Examples]][[Category: Qt Quick]][[Category:Code Snippet]][[Category:MeeGo]] [[Category:Symbian]]

Creating a custom QML element with Qt - Revision history

Hamishwillee: Hamishwillee - Add Abstract. Improve categories

Hamishwillee: Text replace - "" to ""

Hamishwillee: Text replace - "Category:MeeGo" to "Category:MeeGo Harmattan"

Hamishwillee: moved CS001627 - Creating a custom QML element with Qt to Creating a custom QML element with Qt over redirect: Merge into wiki.

Hamishwillee: Removed protection from "CS001627 - Creating a custom QML element with Qt": Merging into Wiki

Hamishwillee: Hamishwillee - Bot update

Hamishwillee: Hamishwillee - Addition to article of: Category:MeeGo Category:Symbian. (Add platform categories)

Hamishwillee: Hamishwillee - Bot change of template (Template:CodeSnippet) - now using Template:ArticleMetaData

Seppo fn: Protected "CS001627 - Creating a custom QML element with Qt" ([edit=sysop] (indefinite) [move=sysop] (indefinite))

Kratsan: Removed anchors.fill from Line element, this resulted very strange behavior on line drawing.

Hamishwillee: Text replace - "`" to ""`