QML Best Practices

This page provides an overview of best practices for working on Cura's (or Cura plugins) interface.

For now, it's just a simple list:

• Use UM.Theme.getColor() and UM.Theme.getSize() in order to make any custom UI components inherit theme values.
• Always make sure sizes are rounded to whole pixels, so all items are rendered at whole pixel offsets. Texts that render at fractional offsets can render ugly or broken, depending on system and display configurations. Sizes that are received from UM.Theme.getSize() are rounded to whole pixels by default, but care must be taken with multiplications and divisions of these values. Use Math.floor() to these sizes. Failure to do this will result in strange font weight and kerning.
• When using "unthemed" sizes in QML (ie: absolute "pixel" sizes), make sure to multiply them with screenScaleFactor in order to properly handle Hi DPI screens on all platforms. Note that you should never mix these absolute "pixel" sizes with Uranium-theming; this is only legal in "system-themed" dialogs.
• Use UM.Theme.getStyle() to apply default styles for components (such as buttons). Note, however, that this method may soon be depreciated as Qt.Controls 2.x does not use style elements on components.
• Use Qt's Label instead of Text as it provides better results with respect to font rendering and coloring.
• Use curly brackets on the same line as the property to which that block belongs. This is recommend practice per Qt guidelines, and typical in JavaScript as well. It also helps visually to associate the following lines with their parent. For example:

  // bad
  anchors
  {
      top: parent.top
      left: foo.right
  }
  
  // good
  anchors {
      top: parent.top
      left: foo.right
  }