Refactor and simplify

- Made ScrollBar, TabFrame, Tab, Frame styleable
- Renamed background delegates to delegate
- Removed redundant sizing code
- Removed backgroundItem

Change-Id: I30904047d203e404b90ae01eaab2e8c4431879ed
Reviewed-by: Gabriel de Dietrich <gabriel.dietrich-de@nokia.com>

20 files changed, 128 insertions, 132 deletions

diff --git a/components/Button.qml b/components/Button.qml
index b27ee698..19dd394a 100644
--- a/components/Button.qml
+++ b/components/Button.qml
@@ -45,9 +45,6 @@ import QtDesktop 0.2
 BasicButton {
     id: button
 
-    implicitWidth: Math.max(72, backgroundItem.implicitWidth)
-    implicitHeight: Math.max(22, backgroundItem.implicitHeight)
-
     property alias containsMouse: tooltip.containsMouse
     property bool defaultbutton: false
     property string styleHint
@@ -65,7 +62,7 @@ BasicButton {
         text: button.tooltip
     }
 
-    background: StyleItem {
+    delegate: StyleItem {
         id: styleitem
         anchors.fill: parent
         elementType: "button"
diff --git a/components/CheckBox.qml b/components/CheckBox.qml
index d2e2308c..a97e5052 100644
--- a/components/CheckBox.qml
+++ b/components/CheckBox.qml
@@ -54,16 +54,14 @@ FocusScope {
     property string text
     property string styleHint
 
-    property Item backgroundItem: backgroundLoader.item
-
     // implementation
     Accessible.role: Accessible.CheckBox
     Accessible.name: text
 
-    implicitWidth: Math.max(120, backgroundItem.implicitWidth)
-    implicitHeight: backgroundItem.implicitHeight
+    implicitWidth: Math.max(120, loader.item.implicitWidth)
+    implicitHeight: loader.item.implicitHeight
 
-    property Component background: StyleItem {
+    property Component delegate: StyleItem {
                 elementType: "checkbox"
                 sunken: pressed
                 on: checked || pressed
@@ -86,10 +84,10 @@ FocusScope {
             }
 
     Loader {
-        id: backgroundLoader
+        id: loader
         anchors.fill: parent
         property alias control: checkBox
-        sourceComponent: background
+        sourceComponent: delegate
     }
 
     ButtonBehavior {
diff --git a/components/ComboBox.qml b/components/ComboBox.qml
index 0e7245bf..69aff685 100644
--- a/components/ComboBox.qml
+++ b/components/ComboBox.qml
@@ -105,7 +105,7 @@ Private.BasicButton {
     property alias hoveredText: popup.hoveredText
     property string styleHint
 
-    background: StyleItem {
+    delegate: StyleItem {
         anchors.fill: parent
         elementType: "combobox"
         sunken: comboBox.pressed
@@ -115,24 +115,22 @@ Private.BasicButton {
         text: comboBox.selectedText
         hasFocus: comboBox.focus
         contentHeight: 18
+        Component.onCompleted: popup.center = styleHint("comboboxpopup");
     }
 
 //  ToDo: adjust margins so that selected popup label
 //    centers directly above button label when
 //    popup.centerOnSelectedText === true
 
-
     width: implicitWidth
     height: implicitHeight
-    implicitWidth: Math.max(80, backgroundItem.implicitWidth)
-    implicitHeight: backgroundItem.implicitHeight
     onWidthChanged: popup.setMinimumWidth(width)
     checkable: false
     onPressedChanged: if (pressed) popup.visible = true
 
     ContextMenu {
         id: popup
-        property bool center: backgroundItem.styleHint("comboboxpopup")
+        property bool center: false
         centerSelectedText: center
         y: center ? 0 : comboBox.height
     }
diff --git a/components/Dialog.qml b/components/Dialog.qml
index cc3cfb25..bcebb9f0 100644
--- a/components/Dialog.qml
+++ b/components/Dialog.qml
@@ -98,7 +98,7 @@ Window {
             text: "Help"
             focus: false
             Component.onCompleted: if (style.isMac) width = 22
-            background: style.isMac ? machelpdelegate : cancelbutton.background
+            delegate: style.isMac ? machelpdelegate : cancelbutton.background
             onClicked: {
                 clickedButton = helpbutton
                 buttonClicked()
diff --git a/components/Frame.qml b/components/Frame.qml
index 7b82378b..ab35612e 100644
--- a/components/Frame.qml
+++ b/components/Frame.qml
@@ -42,22 +42,34 @@ import QtQuick 2.0
 import QtDesktop 0.2
 
 Item {
+    id: frame
     default property alias data: content.data
     implicitWidth: adjustToContentSize ? content.childrenRect.width + 2 * content.frameWidth : 30
     implicitHeight: adjustToContentSize ? content.childrenRect.height + 2 * content.frameWidth : 30
-    property alias raised: style.raised
-    property alias sunken: style.sunken
+
+    property bool raised
+    property bool sunken
     property bool adjustToContentSize: false
-    StyleItem {
-        id: style
+
+    Loader {
+        id: loader
         anchors.fill: parent
-        elementType: "frame"
+        sourceComponent: delegate
         Item {
             id: content
             anchors.fill: parent
             anchors.margins: frameWidth
-            property int frameWidth: styleitem.pixelMetric("defaultframewidth");
+            property int frameWidth
         }
+        onLoaded: item.z = -1
     }
-}
 
+    property Component delegate: StyleItem {
+        id: style
+        anchors.fill: parent
+        elementType: "frame"
+        sunken: frame.sunken
+        raised: frame.raised
+        Component.onCompleted: content.frameWidth = pixelMetric("defaultframewidth");
+    }
+}
diff --git a/components/GroupBox.qml b/components/GroupBox.qml
index c87ade5b..c131a7f0 100644
--- a/components/GroupBox.qml
+++ b/components/GroupBox.qml
@@ -62,7 +62,7 @@ Item {
     Accessible.role: Accessible.Grouping
     Accessible.name: title
 
-    property Component background: StyleItem {
+    property Component delegate: StyleItem {
         id: styleitem
         elementType: "groupbox"
         anchors.fill: parent
@@ -83,7 +83,8 @@ Item {
         property int leftMargin: 4
         property int rightMargin: 4
         property alias styledItem: groupbox
-        sourceComponent: background
+        sourceComponent: delegate
+        onLoaded: item.z = -1
     }
 
     CheckBox {
diff --git a/components/ProgressBar.qml b/components/ProgressBar.qml
index d07aa9da..8c14d114 100644
--- a/components/ProgressBar.qml
+++ b/components/ProgressBar.qml
@@ -62,7 +62,7 @@ Item {
     implicitWidth: orientation === Qt.Horizontal ? 200 : loader.item.implicitHeight
     implicitHeight: orientation === Qt.Horizontal ? loader.item.implicitHeight : 200
 
-    property Component background: StyleItem {
+    property Component delegate: StyleItem {
         anchors.fill: parent
         elementType: "progressbar"
         // XXX: since desktop uses int instead of real, the progressbar
@@ -85,7 +85,7 @@ Item {
         property alias maximumValue:progressbar.maximumValue
         property alias minimumValue:progressbar.minimumValue
 
-        sourceComponent: background
+        sourceComponent: delegate
         anchors.fill: parent
     }
 
diff --git a/components/RadioButton.qml b/components/RadioButton.qml
index 90376665..50def363 100644
--- a/components/RadioButton.qml
+++ b/components/RadioButton.qml
@@ -46,12 +46,9 @@ import QtDesktop 0.2
 CheckBox {
     id: radiobutton
 
-    implicitWidth: Math.max(120, backgroundItem.implicitWidth)
-    implicitHeight: backgroundItem.implicitHeight
-
     Accessible.role: Accessible.RadioButton
 
-    background: StyleItem {
+    delegate: StyleItem {
         elementType: "radiobutton"
         sunken: pressed
         on: checked || pressed
diff --git a/components/ScrollArea.qml b/components/ScrollArea.qml
index 5c0ec0eb..d001335a 100644
--- a/components/ScrollArea.qml
+++ b/components/ScrollArea.qml
@@ -49,7 +49,7 @@ FocusScope {
 
     // Cosmetic propeties
     property bool frame: true
-    property bool frameAroundContents: styleitem.styleHint("framearoundcontents")
+    property bool frameAroundContents: true
     property bool highlightOnFocus: false
     property alias color: colorRect.color // background color
     property int frameWidth: frame ? styleitem.frameWidth : 0
@@ -86,7 +86,10 @@ FocusScope {
         property int frameWidth
         property int scrollbarspacing: styleitem.pixelMetric("scrollbarspacing");
         property int frameMargins : frame ? scrollbarspacing : 0
-        Component.onCompleted: frameWidth = styleitem.pixelMetric("defaultframewidth");
+        Component.onCompleted: {
+            frameWidth = styleitem.pixelMetric("defaultframewidth");
+            frameAroundContents = styleitem.styleHint("framearoundcontents")
+        }
     }
 
     onContentYChanged: {
diff --git a/components/ScrollBar.qml b/components/ScrollBar.qml
index 071dee4d..dae7d8a3 100644
--- a/components/ScrollBar.qml
+++ b/components/ScrollBar.qml
@@ -57,6 +57,20 @@ Item {
 
     onValueChanged: internal.updateHandle()
 
+    property Component delegate: StyleItem {
+        id: styleitem
+        anchors.fill:parent
+        elementType: "scrollbar"
+        hover: activeControl != "none"
+        activeControl: "none"
+        sunken: internal.upPressed | internal.downPressed
+        minimum: slider.minimumValue
+        maximum: slider.maximumValue
+        value: slider.value
+        horizontal: orientation == Qt.Horizontal
+        enabled: parent.enabled
+    }
+
     MouseArea {
         id: internal
 
@@ -171,18 +185,10 @@ Item {
                 value = minimumValue
         }
 
-        StyleItem {
-            id: styleitem
-            anchors.fill:parent
-            elementType: "scrollbar"
-            hover: activeControl != "none"
-            activeControl: "none"
-            sunken: internal.upPressed | internal.downPressed
-            minimum: slider.minimumValue
-            maximum: slider.maximumValue
-            value: slider.value
-            horizontal: orientation == Qt.Horizontal
-            enabled: parent.enabled
+        Loader {
+            id: loader
+            sourceComponent: delegate
+            anchors.fill: parent
         }
 
         property rect handleRect: Qt.rect(0,0,0,0)
diff --git a/components/Slider.qml b/components/Slider.qml
index de581127..6c106f78 100644
--- a/components/Slider.qml
+++ b/components/Slider.qml
@@ -84,7 +84,7 @@ Item {
 
     property string styleHint;
 
-    property Component groove: StyleItem {
+    property Component delegate: StyleItem {
         anchors.fill:parent
         elementType: "slider"
         sunken: pressed
@@ -119,16 +119,15 @@ Item {
             stepSize: 0.0
             inverted: false
 
-            positionAtMinimum: grooveLoader.leftMargin
-            positionAtMaximum: contents.width - grooveLoader.rightMargin
+            positionAtMinimum: loader.leftMargin
+            positionAtMaximum: contents.width - loader.rightMargin
         }
 
         Loader {
-            id: grooveLoader
+            id: loader
             anchors.fill: parent
-            sourceComponent: groove
+            sourceComponent: delegate
 
-            property real handlePosition : handleLoader.x
             function positionForValue(value) {
                 return range.positionForValue(value) - leftMargin;
             }
@@ -136,40 +135,17 @@ Item {
             property int rightMargin: 0
         }
 
-        Loader {
-            id: handleLoader
-            transform: Translate { x: - handleLoader.width / 2 }
-
-            anchors.verticalCenter: grooveLoader.verticalCenter
-
-            sourceComponent: null
-
-            x: fakeHandle.x
-            Behavior on x {
-                id: behavior
-                enabled: !mouseArea.drag.active
-
-                PropertyAnimation {
-                    duration: behavior.enabled ? 150 : 0
-                    easing.type: Easing.OutSine
-                }
-            }
-        }
-
         Item {
             id: fakeHandle
-            width: handleLoader.width
-            height: handleLoader.height
-            transform: Translate { x: - handleLoader.width / 2 }
         }
 
         MouseArea {
             id: mouseArea
             hoverEnabled: true
             anchors.centerIn: parent
-            anchors.horizontalCenterOffset: (grooveLoader.leftMargin - grooveLoader.rightMargin) / 2
+            anchors.horizontalCenterOffset: (loader.leftMargin - loader.rightMargin) / 2
 
-            width: parent.width + handleLoader.width - grooveLoader.rightMargin - grooveLoader.leftMargin
+            width: parent.width - loader.rightMargin - loader.leftMargin
             height: parent.height
 
             drag.target: fakeHandle
diff --git a/components/SpinBox.qml b/components/SpinBox.qml
index cffa68b8..662a515a 100644
--- a/components/SpinBox.qml
+++ b/components/SpinBox.qml
@@ -71,8 +71,7 @@ FocusScope {
         colorGroup: enabled ? SystemPalette.Active : SystemPalette.Disabled
     }
 
-    property Component background: Item {
-
+    property Component delegate: Item {
         property rect upRect
         property rect downRect
         property rect inputRect
@@ -176,7 +175,7 @@ FocusScope {
         property rect upRect: item ? item.upRect : Qt.rect(0, 0, 0, 0)
         property rect downRect: item ? item.downRect : Qt.rect(0, 0, 0, 0)
         property rect inputRect: item ? item.inputRect : Qt.rect(0, 0, 0, 0)
-        sourceComponent: background
+        sourceComponent: delegate
         anchors.fill: parent
     }
 
diff --git a/components/SplitterColumn.qml b/components/SplitterColumn.qml
index 86d9b8fa..4f64868b 100644
--- a/components/SplitterColumn.qml
+++ b/components/SplitterColumn.qml
@@ -50,9 +50,9 @@ import QtDesktop 0.2
 * a draggable splitter added in-between each item.
 *
 * Add items to the SplitterColumn by inserting them as child items. The splitter handle
-* is outsourced as a delegate (handleBackground). To enable the user to drag the handle,
+* is outsourced as a delegate (handleDelegate). To enable the user to drag the handle,
 * it will need to contain a mouse area that communicates with the SplitterColumn by binding
-* 'drag.target: handle'. The 'handle' property points to the handle item that embedds
+* 'drag.target: handle'. The 'handle' property points to the handle item that embeds
 * the delegate. To change handle positions, either change 'y; (or 'height') of 'handle', or
 * change the height of the child items inside the SplitterColumn. If you set the visibility
 * of a child item to false, the corresponding handle will also be hidden, and the
@@ -76,7 +76,7 @@ import QtDesktop 0.2
 *
 * The SplitterColumn contains the following API:
 *
-* Component handleBackground - delegate that will be instanciated between each
+* Component handleDelegate - delegate that will be instanciated between each
 *   child item. Inside the delegate, the following properties are available:
 *   int handleIndex - specifies the index of the splitter handle. The handle
 *       between the first and the second item will get index 0, the next handle index 1 etc.
@@ -140,7 +140,7 @@ import QtDesktop 0.2
 
 Private.Splitter {
     orientation: Qt.Vertical
-    handleBackground: StyleItem {
+    handleDelegate: StyleItem {
         id: styleitem
         elementType: "splitter"
         height: handleWidth != -1 ?  handleWidth : pixelMetric("splitterwidth")
diff --git a/components/SplitterRow.qml b/components/SplitterRow.qml
index 5c566d6f..c1466c61 100644
--- a/components/SplitterRow.qml
+++ b/components/SplitterRow.qml
@@ -50,9 +50,9 @@ import QtDesktop 0.2
 * a draggable splitter added in-between each item.
 *
 * Add items to the SplitterRow by inserting them as child items. The splitter handle
-* is outsourced as a delegate (handleBackground). To enable the user to drag the handle,
+* is outsourced as a delegate (handleDelegate). To enable the user to drag the handle,
 * it will need to contain a mouse area that communicates with the SplitterRow by binding
-* 'drag.target: handle'. The 'handle' property points to the handle item that embedds
+* 'drag.target: handle'. The 'handle' property points to the handle item that embeds
 * the delegate. To change handle positions, either change 'x' (or 'width') of 'handle', or
 * change the width of the child items inside the SplitterRow. If you set the visibility
 * of a child item to false, the corresponding handle will also be hidden, and the
@@ -76,7 +76,7 @@ import QtDesktop 0.2
 *
 * The SplitterRow contains the following API:
 *
-* Component handleBackground - delegate that will be instanciated between each
+* Component handleDelegate - delegate that will be instanciated between each
 *   child item. Inside the delegate, the following properties are available:
 *   int handleIndex - specifies the index of the splitter handle. The handle
 *       between the first and the second item will get index 0, the next handle index 1 etc.
@@ -141,7 +141,7 @@ import QtDesktop 0.2
 
 Private.Splitter {
     orientation: Qt.Horizontal
-    handleBackground: StyleItem {
+    handleDelegate: StyleItem {
         id: styleitem
         elementType: "splitter"
         width: handleWidth != -1 ?  handleWidth : pixelMetric("splitterwidth")
diff --git a/components/TabBar.qml b/components/TabBar.qml
index 02635115..c5a923a4 100644
--- a/components/TabBar.qml
+++ b/components/TabBar.qml
@@ -78,13 +78,18 @@ Item {
         return null;
     }
 
-    StyleItem {
-        visible:false
-        id:styleitem
+    property Component delegate: StyleItem {
+        visible: false
+        id: styleitem
         elementType: "tab"
         text: "generic"
     }
 
+    Loader {
+        id: loader
+        sourceComponent: delegate
+    }
+
     Row {
         id: tabrow
         Accessible.role: Accessible.PageTabList
diff --git a/components/TabFrame.qml b/components/TabFrame.qml
index f15067b7..556c2d4b 100644
--- a/components/TabFrame.qml
+++ b/components/TabFrame.qml
@@ -56,7 +56,6 @@ Item {
     onCurrentChanged: __setOpacities()
     Component.onCompleted: __setOpacities()
 
-    property int __baseOverlap : frameitem.pixelMetric("tabbaseoverlap")// add paintmargins;
     function __setOpacities() {
         for (var i = 0; i < stack.children.length; ++i) {
             stack.children[i].visible = (i == current ? true : false)
@@ -84,7 +83,25 @@ Item {
             current-=1
     }
 
-    StyleItem {
+    Loader {
+        id: loader
+        anchors.fill: parent
+        anchors.topMargin: tabbarItem && tabsVisible && position == "North" ? Math.max(0, tabbarItem.height - stack.baseOverlap) : 0
+        sourceComponent: delegate
+        Item {
+            id: stack
+            anchors.fill: parent
+            anchors.margins: (frame ? frameWidth : 0)
+            anchors.topMargin: anchors.margins + (style =="mac" ? 6 : 0)
+            anchors.bottomMargin: anchors.margins + (style =="mac" ? 6 : 0)
+            property int frameWidth
+            property string style
+            property int baseOverlap
+        }
+        onLoaded: item.z = -1
+    }
+
+    property Component delegate: StyleItem {
         id: frameitem
         z: style == "oxygen" ? 1 : 0
         elementType: "tabframe"
@@ -92,20 +109,12 @@ Item {
         value: tabbarItem && tabsVisible && tabbarItem.tab(current) ? tabbarItem.tab(current).x : 0
         minimum: tabbarItem && tabsVisible && tabbarItem.tab(current) ? tabbarItem.tab(current).width : 0
         maximum: tabbarItem && tabsVisible ? tabbarItem.tabWidth : width
-        anchors.fill: parent
-
-        property int frameWidth: pixelMetric("defaultframewidth")
-
-        Item {
-            id: stack
-            anchors.fill: parent
-            anchors.margins: (frame ? frameitem.frameWidth : 0)
-            anchors.topMargin: anchors.margins + (frameitem.style =="mac" ? 6 : 0)
-            anchors.bottomMargin: anchors.margins + (frameitem.style =="mac" ? 6 : 0)
+        Component.onCompleted: {
+            stack.frameWidth = pixelMetric("defaultframewidth")
+            stack.style = style
+            stack.baseOverlap = pixelMetric("tabbaseoverlap")// add paintmargins;
         }
 
-        anchors.topMargin: tabbarItem && tabsVisible && position == "North" ? Math.max(0, tabbarItem.height - __baseOverlap) : 0
-
         states: [
             State {
                 name: "South"
@@ -113,11 +122,11 @@ Item {
                 PropertyChanges {
                     target: frameitem
                     anchors.topMargin: 0
-                    anchors.bottomMargin: tabbarItem ? tabbarItem.height - __baseOverlap: 0
+                    anchors.bottomMargin: tabbarItem ? tabbarItem.height - stack.baseOverlap: 0
                 }
                 PropertyChanges {
                     target: tabbarItem
-                    anchors.topMargin: -__baseOverlap
+                    anchors.topMargin: -stack.baseOverlap
                 }
                 AnchorChanges {
                     target: tabbarItem
diff --git a/components/TextField.qml b/components/TextField.qml
index 4cf7e3f5..da028a90 100644
--- a/components/TextField.qml
+++ b/components/TextField.qml
@@ -66,7 +66,7 @@ FocusScope {
     property alias activeFocusOnPress: textInput.activeFocusOnPress
     property alias containsMouse: mouseArea.containsMouse
 
-    property Component background: StyleItem {
+    property Component delegate: StyleItem {
         anchors.fill: parent
         elementType: "edit"
         sunken: true
@@ -92,11 +92,10 @@ FocusScope {
                 elementType: "focusframe"
             }
         }
-
     }
 
-    implicitWidth: backgroundLoader.item.implicitWidth
-    implicitHeight: backgroundLoader.item.implicitHeight
+    implicitWidth: loader.item.implicitWidth
+    implicitHeight: loader.item.implicitHeight
 
     Accessible.name: text
     Accessible.role: Accessible.EditableText
@@ -147,9 +146,9 @@ FocusScope {
     }
 
     Loader {
-        id: backgroundLoader;
-        sourceComponent: background;
-        anchors.fill:parent
+        id: loader
+        sourceComponent: delegate
+        anchors.fill: parent
     }
 
     MouseArea {
@@ -160,7 +159,7 @@ FocusScope {
     }
 
     onFocusChanged: {
-        if (textField.activeFocus)
+        if (textfield.activeFocus)
             textInput.forceActiveFocus();
     }
 
diff --git a/components/ToolButton.qml b/components/ToolButton.qml
index 7f41fe69..5952a6f4 100644
--- a/components/ToolButton.qml
+++ b/components/ToolButton.qml
@@ -48,13 +48,9 @@ Private.BasicButton {
     property alias containsMouse: tooltip.containsMouse
     property string iconName
     property string styleHint
-    property int iconSize: (backgroundItem && backgroundItem.style === "mac" && button.styleHint.indexOf("segmented") !== -1) ? 16 : 24
     property url iconSource
     property string text
 
-    implicitWidth: backgroundItem.implicitWidth
-    implicitHeight: backgroundItem.implicitHeight
-
     TooltipArea {
         // Note this will eat hover events
         id: tooltip
@@ -62,7 +58,7 @@ Private.BasicButton {
         text: button.tooltip
     }
 
-    background: StyleItem {
+    delegate: StyleItem {
         id: styleitem
         anchors.fill: parent
         elementType: "toolbutton"
@@ -87,8 +83,9 @@ Private.BasicButton {
         opacity: enabled ? 1 : 0.5
         smooth: true
         sourceSize.width: iconSize
-        property string iconPath: "image://desktoptheme/" + button.iconName
-        source: backgroundItem && backgroundItem.hasThemeIcon(iconName) ? iconPath : ""
+        //property string iconPath: "image://desktoptheme/" + button.iconName
+        property int iconSize: 24 //(backgroundItem && backgroundItem.style === "mac" && button.styleHint.indexOf("segmented") !== -1) ? 16 : 24
+        //source: iconPath // backgroundItem && backgroundItem.hasThemeIcon(iconName) ? iconPath : ""
         fillMode: Image.PreserveAspectFit
         Image {
             // Use fallback icon
diff --git a/components/private/BasicButton.qml b/components/private/BasicButton.qml
index e7d40792..2427060c 100644
--- a/components/private/BasicButton.qml
+++ b/components/private/BasicButton.qml
@@ -50,8 +50,7 @@ Item {
     property alias checked: behavior.checked
     property bool activeFocusOnPress: false
 
-    property Component background: null
-    property Item backgroundItem: backgroundLoader.item
+    property Component delegate: null
 
     property color textColor: syspal.text;
     property string tooltip
@@ -64,8 +63,8 @@ Item {
     // implementation
 
     property string __position: "only"
-    implicitWidth: backgroundLoader.item.width
-    implicitHeight: backgroundLoader.item.height
+    implicitWidth: loader.item.implicitWidth
+    implicitHeight: loader.item.implicitHeight
 
     function animateClick() {
         behavior.pressed = true
@@ -80,9 +79,9 @@ Item {
     }
 
     Loader {
-        id: backgroundLoader
+        id: loader
         anchors.fill: parent
-        sourceComponent: background
+        sourceComponent: delegate
         property alias styledItem: button
         property alias position: button.__position
     }
diff --git a/components/private/Splitter.qml b/components/private/Splitter.qml
index 61c2d9f1..82b94d67 100644
--- a/components/private/Splitter.qml
+++ b/components/private/Splitter.qml
@@ -45,7 +45,7 @@ Splitter {
     id: root
     default property alias items: splitterItems.children
     property alias handles: splitterHandles.children
-    property Component handleBackground: Rectangle { width:3; color: "black" }
+    property Component handleDelegate: Rectangle { width:3; color: "black" }
     property int handleWidth: -1
     property real preferredSize: 0
     property int orientation: Qt.Horizontal
@@ -97,7 +97,7 @@ Splitter {
                 propertyChangeListener.createObject(item, {"itemIndex":i});
                 if (i < items.length-1) {
                     // Create a handle for the item, unless its the last:
-                    var handle = handleBackgroundLoader.createObject(splitterHandles, {"handleIndex":i});
+                    var handle = handleloader.createObject(splitterHandles, {"handleIndex":i});
 
                     if (d.horizontal) {
                         handle.anchors.top = splitterHandles.top
@@ -242,7 +242,7 @@ Splitter {
     }
 
     Component {
-        id: handleBackgroundLoader
+        id: handleloader
         Loader {
             id: myHandle
             property int handleIndex: 0
@@ -254,7 +254,7 @@ Splitter {
             property Item background: item
 
             visible: splitterItem.visible
-            sourceComponent: handleBackground
+            sourceComponent: handleDelegate
             onWidthChanged: d.updateLayout()
 
             onXChanged: {