Viadeo Twitter Google Bookmarks ! Facebook Digg del.icio.us MySpace Yahoo MyWeb Blinklist Netvouz Reddit Simpy StumbleUpon Bookmarks Windows Live Favorites 
Logo Documentation Qt ·  Page d'accueil  ·  Toutes les classes  ·  Toutes les fonctions  ·  Vues d'ensemble  · 

QML Coding Conventions

This document contains the QML coding conventions that we follow in our documentation and examples and recommend that others follow.

This page assumes that you are already familiar with the QML language. If you need an introduction to the language, please read the QML introduction first.

QML Objects

Through our documentation and examples, QML objects are always structured in the following order:

  • id
  • property declarations
  • signal declarations
  • JavaScript functions
  • object properties
  • child objects
  • states
  • transitions

For better readability, we separate these different parts with an empty line.

For example, a hypothetical photo QML object would look like this:

 Rectangle {
     id: photo                                               // id on the first line makes it easy to find an object

     property bool thumbnail: false                          // property declarations
     property alias image: photoImage.source

     signal clicked                                          // signal declarations

     function doSomething(x)                                 // javascript functions
     {
         return x + photoImage.width
     }

     color: "gray"                                           // object properties
     x: 20; y: 20; height: 150                               // try to group related properties together
     width: {                                                // large bindings
         if(photoImage.width > 200){
             photoImage.width;
         }else{
             200;
         }
     }

     Rectangle {                                             // child objects
         id: border
         anchors.centerIn: parent; color: "white"

         Image { id: photoImage; anchors.centerIn: parent }
     }

     states: State {                                         // states
         name: "selected"
         PropertyChanges { target: border; color: "red" }
     }

     transitions: Transition {                               // transitions
         from: ""; to: "selected"
         ColorAnimation { target: border; duration: 200 }
     }
 }

Grouped Properties

If using multiple properties from a group of properties, we use the group notation rather than the dot notation to improve readability.

For example, this:

 Rectangle {
     anchors.left: parent.left; anchors.top: parent.top; anchors.right: parent.right; anchors.leftMargin: 20
 }

 Text {
     text: "hello"
     font.bold: true; font.italic: true; font.pixelSize: 20; font.capitalization: Font.AllUppercase
 }

can be written like this:

 Rectangle {
     anchors { left: parent.left; top: parent.top; right: parent.right; leftMargin: 20 }
 }

 Text {
     text: "hello"
     font { bold: true; italic: true; pixelSize: 20; capitalization: Font.AllUppercase }
 }

Private Properties

QML and JavaScript do not enforce private properties like C++. There is a need to hide these private properties, for example, when the properties are part of the implementation. As a convention, private properties begin with two underscore characters. For example, __area, is a property that is accessible but is not meant for public use. Note that QML and JavaScript will grant the user access to these properties.

 Item {
     id: component
     width: 40; height: 50
     property real __area: width * height * 0.5    //not meant for outside use
 }

Lists

If a list contains only one element, we generally omit the square brackets.

For example, it is very common for a component to only have one state.

In this case, instead of:

 states: [
     State {
         name: "open"
         PropertyChanges { target: container; width: 200 }
     }
 ]

we will write this:

 states: State {
     name: "open"
     PropertyChanges { target: container; width: 200 }
 }

JavaScript Code

If the script is a single expression, we recommend writing it inline:

 Rectangle { color: "blue"; width: parent.width / 3 }

If the script is only a couple of lines long, we generally use a block:

 Rectangle {
     color: "blue"
     width: {
         var w = parent.width / 3
         console.debug(w)
         return w
     }
 }

If the script is more than a couple of lines long or can be used by different objects, we recommend creating a function and calling it like this:

 function calculateWidth(object)
 {
     var w = object.width / 3
     // ...
     // more javascript code
     // ...
     console.debug(w)
     return w
 }

 Rectangle { color: "blue"; width: calculateWidth(parent) }

For long scripts, we will put the functions in their own JavaScript file and import it like this:

 import "myscript.js" as Script

 Rectangle { color: "blue"; width: Script.calculateWidth(parent) }
Publicité

Best Of

Actualités les plus lues

Semaine
Mois
Année
  1. « Quelque chose ne va vraiment pas avec les développeurs "modernes" », un développeur à "l'ancienne" critique la multiplication des bibliothèques 65
  2. Apercevoir la troisième dimension ou l'utilisation multithreadée d'OpenGL dans Qt, un article des Qt Quarterly traduit par Guillaume Belz 0
  3. Les développeurs ignorent-ils trop les failles découvertes dans leur code ? Prenez-vous en compte les remarques des autres ? 17
  4. BlackBerry 10 : premières images du prochain OS de RIM qui devrait intégrer des widgets et des tuiles inspirées de Windows Phone 0
  5. Quelles nouveautés de C++11 Visual C++ doit-il rapidement intégrer ? Donnez-nous votre avis 10
  6. Adieu qmake, bienvenue qbs : Qt Building Suite, un outil déclaratif et extensible pour la compilation de projets Qt 17
  7. La rubrique Qt a besoin de vous ! 1
Page suivante

Le blog Digia au hasard

Logo

Créer des applications avec un style Metro avec Qt, exemples en QML et C++, un article de Digia Qt traduit par Thibaut Cuvelier

Le blog Digia est l'endroit privilégié pour la communication sur l'édition commerciale de Qt, où des réponses publiques sont apportées aux questions les plus posées au support. Lire l'article.

Communauté

Ressources

Liens utiles

Contact

  • Vous souhaitez rejoindre la rédaction ou proposer un tutoriel, une traduction, une question... ? Postez dans le forum Contribuez ou contactez-nous par MP ou par email (voir en bas de page).

Qt dans le magazine

Cette page est une traduction d'une page de la documentation de Qt, écrite par Nokia Corporation and/or its subsidiary(-ies). Les éventuels problèmes résultant d'une mauvaise traduction ne sont pas imputables à Nokia. Qt 4.7-snapshot
Copyright © 2012 Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon, vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts. Cette page est déposée à la SACD.
Vous avez déniché une erreur ? Un bug ? Une redirection cassée ? Ou tout autre problème, quel qu'il soit ? Ou bien vous désirez participer à ce projet de traduction ? N'hésitez pas à nous contacter ou par MP !
 
 
 
 
Partenaires

Hébergement Web