Plasma/QMLStyle

From KDE Community Wiki
Revision as of 20:30, 29 October 2012 by Aseigo (talk | contribs) (Created page with "== Directory Structure == * QML files have the .qml suffix go into ui/ * Javascript files have the .js suffix and go into code/ == Whitespace == For all Javascript code, foll...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Directory Structure

  • QML files have the .qml suffix go into ui/
  • Javascript files have the .js suffix and go into code/

Whitespace

For all Javascript code, follow the kdelibs code style. This means spaces around operators, if/else on same line as braces, etc.

Items

QML Item declarations follow this pattern:


Item { // brace on same line
    // line indentation
    id: <name> // the id, if any, is the first line

    // Geometry properties
    anchors {
        fill: parent
        rightMargin: 6
    }
    width: 
    height:

    // Data models, including Plasma.DataSources
    model: { }

    // Properties of this item
    property bool foo

    // Property aliases
    property alias bar : actual.property

    // Properties defined by Item class, except geometry properties
    someProperty: 123

    // all on* change functions
    onFooChanged: fooFunction()
    onSomePropertyChanged: { // brace on same line as these use the "name:" style
        fooFunction(); // in blocks, kdelibs style, including semicolons at EOL
    }

    // all functions
    function fooFunction()
    { // open brace on its OWN line
        // code goes here; kdelibs style
    }

    function barFunction()
    {
        // note the newline between this function and the one above it
    }

    // all non-UI sub-items, such as timers
    Timer {
        id: timer
        interval: 100
        onTriggered: fooFunction()
    }

    // all UI sub-items
    Item {
        anchors.fill: parent
    }

    Item {
        // note the newline between items
        id: secondItem
    }

    // all components
    Component {
        id: firstComponent
    }

    Component {
        // note the newline between components
        id: secondComponent
    }

    // the "onCompleted" function goes last, as befits the name
    Component.onCompleted: {
        // if multi-line block, brace goes on same line due to "name:" style of declaration
        fooFunction();
    }
}