<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en_US" lang="en_US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- qmlbestpractices-coding.qdoc -->
<title>Qt 4.8: QML Best Practices: Coding Conventions</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/functions.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style/superfish.css" />
<link rel="stylesheet" type="text/css" href="style/narrow.css" />
<!--[if IE]>
<meta name="MSSmartTagsPreventParsing" content="true">
<meta http-equiv="imagetoolbar" content="no">
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie6.css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie7.css">
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="style/style_ie8.css">
<![endif]-->
<script src="scripts/superfish.js" type="text/javascript"></script>
<script src="scripts/narrow.js" type="text/javascript"></script>
</head>
<body class="" onload="CheckEmptyAndLoadList();">
<div class="header" id="qtdocheader">
<div class="content">
<div id="nav-logo">
<a href="index.html">Home</a></div>
<a href="index.html" class="qtref"><span>Qt Reference Documentation</span></a>
<div id="narrowsearch"></div>
<div id="nav-topright">
<ul>
<li class="nav-topright-home"><a href="http://qt.digia.com/">Qt HOME</a></li>
<li class="nav-topright-dev"><a href="http://qt-project.org/">DEV</a></li>
<li class="nav-topright-doc nav-topright-doc-active"><a href="http://qt-project.org/doc/">
DOC</a></li>
<li class="nav-topright-blog"><a href="http://blog.qt.digia.com/">BLOG</a></li>
</ul>
</div>
<div id="shortCut">
<ul>
<li class="shortCut-topleft-inactive"><span><a href="index.html">Qt 4.8</a></span></li>
<li class="shortCut-topleft-active"><a href="http://qt-project.org/doc/">ALL VERSIONS </a></li>
</ul>
</div>
<ul class="sf-menu" id="narrowmenu">
<li><a href="#">API Lookup</a>
<ul>
<li><a href="classes.html">Class index</a></li>
<li><a href="functions.html">Function index</a></li>
<li><a href="modules.html">Modules</a></li>
<li><a href="namespaces.html">Namespaces</a></li>
<li><a href="qtglobal.html">Global Declarations</a></li>
<li><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</li>
<li><a href="#">Qt Topics</a>
<ul>
<li><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li><a href="supported-platforms.html">Supported Platforms</a></li>
<li><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</li>
<li><a href="#">Examples</a>
<ul>
<li><a href="all-examples.html">Examples</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
<li><a href="demos.html">Demos</a></li>
<li><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="hd">
<span></span>
</div>
<div class="bd group">
<div class="sidebar">
<div class="searchlabel">
Search index:</div>
<div class="search" id="sidebarsearch">
<form id="qtdocsearch" action="" onsubmit="return false;">
<fieldset>
<input type="text" name="searchstring" id="pageType" value="" />
<div id="resultdialog">
<a href="#" id="resultclose">Close</a>
<p id="resultlinks" class="all"><a href="#" id="showallresults">All</a> | <a href="#" id="showapiresults">API</a> | <a href="#" id="showarticleresults">Articles</a> | <a href="#" id="showexampleresults">Examples</a></p>
<p id="searchcount" class="all"><span id="resultcount"></span><span id="apicount"></span><span id="articlecount"></span><span id="examplecount"></span> results:</p>
<ul id="resultlist" class="all">
</ul>
</div>
</fieldset>
</form>
</div>
<div class="box first bottombar" id="lookup">
<h2 title="API Lookup"><span></span>
API Lookup</h2>
<div id="list001" class="list">
<ul id="ul001" >
<li class="defaultLink"><a href="classes.html">Class index</a></li>
<li class="defaultLink"><a href="functions.html">Function index</a></li>
<li class="defaultLink"><a href="modules.html">Modules</a></li>
<li class="defaultLink"><a href="namespaces.html">Namespaces</a></li>
<li class="defaultLink"><a href="qtglobal.html">Global Declarations</a></li>
<li class="defaultLink"><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</div>
</div>
<div class="box bottombar" id="topics">
<h2 title="Qt Topics"><span></span>
Qt Topics</h2>
<div id="list002" class="list">
<ul id="ul002" >
<li class="defaultLink"><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li class="defaultLink"><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li class="defaultLink"><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li class="defaultLink"><a href="supported-platforms.html">Supported Platforms</a></li>
<li class="defaultLink"><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li class="defaultLink"><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</div>
</div>
<div class="box" id="examples">
<h2 title="Examples"><span></span>
Examples</h2>
<div id="list003" class="list">
<ul id="ul003">
<li class="defaultLink"><a href="all-examples.html">Examples</a></li>
<li class="defaultLink"><a href="tutorials.html">Tutorials</a></li>
<li class="defaultLink"><a href="demos.html">Demos</a></li>
<li class="defaultLink"><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</div>
</div>
</div>
<div class="wrap">
<div class="toolbar">
<div class="breadcrumb toolblock">
<ul>
<li class="first"><a href="index.html">Home</a></li>
<!-- Breadcrumbs go here -->
<li>QML Best Practices: Coding Conventions</li>
</ul>
</div>
<div class="toolbuttons toolblock">
<ul>
<li id="smallA" class="t_button">A</li>
<li id="medA" class="t_button active">A</li>
<li id="bigA" class="t_button">A</li>
<li id="print" class="t_button"><a href="javascript:this.print();">
<span>Print</span></a></li>
</ul>
</div>
</div>
<div class="content mainContent">
<link rel="prev" href="qml-best-practices.html" />
<link rel="start" href="qml-best-practices.html" />
<p class="naviNextPrevious headerNavi">
<a class="prevPage" href="qml-best-practices.html">QML Best Practices Guides</a>
</p><p/>
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#coding-conventions">Coding Conventions</a></li>
<li class="level1"><a href="#importing-files-into-qml">Importing Files into QML</a></li>
<li class="level1"><a href="#commenting-code">Commenting Code</a></li>
<li class="level1"><a href="#group-properties">Group Properties</a></li>
</ul>
</div>
<h1 class="title">QML Best Practices: Coding Conventions</h1>
<span class="subtitle"></span>
<!-- $$$qml-best-practices-coding.html-description -->
<div class="descr"> <a name="details"></a>
<p>There are many different ways to code using QML. These are a set of guidelines to help your code look better and consistent.</p>
<a name="coding-conventions"></a>
<h2>Coding Conventions</h2>
<p>The official QML Coding Conventions may be found at <a href="qml-coding-conventions.html">QML Coding Conventions</a>. This is the recommended convention that will be used throughout the QML documentation.</p>
<p>In addition, Qt's official code style may be found at the <a href="http://qt-project.org/wiki/Qt_Coding_Style">Qt Coding Style</a>.</p>
<a name="importing-files-into-qml"></a>
<h2>Importing Files into QML</h2>
<p>To import items such as directories, use the "import" keyword, similar to the way the <tt>import QtQuick 1.0</tt> statement is used.</p>
<pre class="qml"> import QtQuick 1.0
import QtWebKit 1.0
import "subdirectory"
import "script.js"</pre>
<p>To facilitate the import of QML components, it is best to begin the QML file with an uppercase character. This way, the user can simply declare the component using the file name as the component name. For example, if a QML component is in a file named <tt>Button.qml</tt>, then the user may import the component by declaring a <tt>Button {}</tt>. Note that this method only works if the QML files are in the same directory.</p>
<p>It is also possible to import QML files which have file names that begin in lower case or files in a different directory by using a <tt>qmldir</tt> file.</p>
<p>A <tt>qmldir</tt> file tells your QML application which QML components, plugins, or directories to import. The <tt>qmldir</tt> file must reside in an imported directory. By using the <tt>qmldir</tt> file, users may import any QML file and assign any valid QML component name to the component.</p>
<p>For more information, read the section on <a href="qmlreusablecomponents.html#qml-loading-components">Loading a Component</a>.</p>
<a name="commenting-code"></a>
<h2>Commenting Code</h2>
<p>Commenting code allows others to read the source code better. As well, comments allow the programmer to think about his or her code; a confusing comment may mean the code is confusing.</p>
<p>Similar to JavaScript or C++, there are two ways of commenting QML code:</p>
<ul>
<li>Single line comments start with <tt>//</tt> and finish at the end of the line</li>
<li>Multiline comments start with <tt>/*</tt> and finish with */</li>
</ul>
<a name="group-properties"></a>
<h2>Group Properties</h2>
<p>Many QML properties are <a href="propertybinding.html#attached-properties">attached</a> or <a href="propertybinding.html#qml-grouped-properties">group</a> properties. For convenience, you may treat them as another element when dealing with multiple properties belonging to the same group.</p>
<pre class="qml"> <span class="name">border</span>.width: <span class="number">1</span>
<span class="name">border</span>.color: <span class="string">"red"</span>
<span class="name">anchors</span>.bottom: <span class="name">parent</span>.<span class="name">bottom</span>
<span class="name">anchors</span>.left: <span class="name">parent</span>.<span class="name">left</span></pre>
<p>Treating groups of properties as a block can ease confusion and help relate the properties with other properties.</p>
<pre class="qml"> <span class="type">border</span> {
<span class="name">width</span>: <span class="number">1</span>;
<span class="name">color</span>: <span class="string">"red"</span>
}
<span class="type">anchors</span> {
<span class="name">bottom</span>: <span class="name">parent</span>.<span class="name">bottom</span>;
<span class="name">left</span>: <span class="name">parent</span>.<span class="name">left</span>
}</pre>
</div>
<!-- @@@qml-best-practices-coding.html -->
<p class="naviNextPrevious footerNavi">
<a class="prevPage" href="qml-best-practices.html">QML Best Practices Guides</a>
</p>
</div>
</div>
</div>
<div class="ft">
<span></span>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2013 Digia Plc and/or its
subsidiaries. Documentation contributions included herein are the copyrights of
their respective owners.</p>
<br />
<p>
The documentation provided herein is licensed under the terms of the
<a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation
License version 1.3</a> as published by the Free Software Foundation.</p>
<p>
Documentation sources may be obtained from <a href="http://www.qt-project.org">
www.qt-project.org</a>.</p>
<br />
<p>
Digia, Qt and their respective logos are trademarks of Digia Plc
in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. <a title="Privacy Policy"
href="http://en.gitorious.org/privacy_policy/">Privacy Policy</a></p>
</div>
<script src="scripts/functions.js" type="text/javascript"></script>
</body>
</html>
