Plasma/QMLStyle: Difference between revisions
Appearance
< Plasma
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..." |
|||
Line 13: | Line 13: | ||
Item { // brace on same line | Item { // brace on same line | ||
// line indentation | // line indentation | ||
id: | id: topLevelItem // the id, if any, is the first line | ||
// Geometry properties | // Geometry properties | ||
Line 84: | Line 84: | ||
fooFunction(); | fooFunction(); | ||
} | } | ||
} | } // topLevelItem: for items with considerable contents, comment the last } with what it matches | ||
</syntaxhighlight> | </syntaxhighlight> |
Revision as of 20:37, 29 October 2012
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: topLevelItem // 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();
}
} // topLevelItem: for items with considerable contents, comment the last } with what it matches