Jump to content

Plasma/QMLStyle

From KDE Community Wiki
Revision as of 21:33, 29 October 2012 by Aseigo (talk | contribs) (Whitespace)

Directory Structure

  • QML files have the .qml suffix go into ui/ they use CamelCase in their filename.
  • Javascript files have the .js suffix and go into code/

JS Code Blocks

For all Javascript code blocks follow the kdelibs code style and must validate when passed through JSLint. This means spaces around operators, if/else on same line as braces, four space indentation (not tabs) etc, see techbase.

Items

QML Item declarations follow this pattern:


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

    // Geometry properties
    // grouped propertes as anchors should be in this notation,
    // unless there is only one property
    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();
    }
} // topLevelItem: for items with considerable contents, comment the last } with what it matches