QML files loading

Hi all

I am new at Qt and currently using Qt 5.0.1 and developing for windows. I want to make a nice looking GUI, at first i built the GUI using Photoshop then converted to qml files (4). the issue i have got now is how to navigate between my pages (page 1, 2,3, 4) by mouse click. I have tried the tutorials (created a mouse area over parts of my main menu) but it still doesn't work.Can someone please help me here, what am i missing? is it even possible to achieve what i am intended to do with the technology i have chosen?

Thx

Parfait

Post your code please.

MainGui.qml

Code:

---

import Qt 4.7
 
Item {
    width: 600
    height: 900
 
    Loader
    {
        id: pageLoader
        focus: true
    }
 
 
    Image {
        id: back_ground_main
        source: "images/back_ground_main.png"
        x: 0
        y: 0
        width: 600
        height: 900
        opacity: 1
    }
    Image {
        id: tabs_main
        source: "images/tabs_main.png"
        x: 0
        y: 0
        width: 600
        height: 900
        opacity: 1
    }
    Image {
        id: pics_main
        source: "images/pics_main.png"
        x: 0
        y: 0
        width: 600
        height: 900
        opacity: 1
    }
    Image {
        id: text_main
        source: "images/text_main.png"
        x: 0
        y: 0
        width: 600
        height: 900
        opacity: 1
    }
    Image {
        id: logo_copy
        source: "images/logo_copy.png"
        x: 0
        y: 0
        width: 600
        height: 900
        opacity: 1
    }
    Image {
        id: shape_2
        source: "images/shape_2.png"
        x: 0
        y: 0
        width: 600
        height: 900
        opacity: 1
    }
    Image {
        id: logo_main
        source: "images/logo_main.png"
        x: 0
        y: 0
        width: 600
        height: 900
        opacity: 1
    }
 
    MouseArea {
        id: mouse_area1
        x: 52
        y: 302
        width: 496
        height: 129
        opacity: 0
        hoverEnabled: false
        anchors.fill: parent
        onClicked:
        {
        pageLoader.source = "SunglassesGui.qml"
 
        }
    }
 
    MouseArea {
        id: mouse_area2
        x: 52
        y: 431
        width: 496
        height: 129
        opacity: 0
        anchors.fill: parent
        onClicked: pageLoader.source = "MakeupGui.qml"
 
    }
 
    MouseArea {
        id: mouse_area3
        x: 52
        y: 560
        width: 496
        height: 130
        opacity: 0
        hoverEnabled: true
        anchors.fill: parent
        onClicked:
        {
        pageLoader.source = "ClothesGui.qml"
        }
    }
}

---

SunglassesGui.qml

Code:

---

import Qt 4.7
Item {
    id: sunglasse
    width: 600
    height: 900
    Image {
        id: back_ground_sunglasses
        source: "images/back_ground_sunglasses.png"
        x: 0
        y: 0
        width: 600
        height: 900
        opacity: 1
    }
    Image {
        id: tabs_sunglasses
        source: "images/tabs_sunglasses.png"
        x: 0
        y: 0
        width: 600
        height: 900
        opacity: 1
    }
    Image {
        id: text_sunglasses
        source: "images/text_sunglasses.png"
        x: 0
        y: 0
        width: 600
        height: 900
        opacity: 1
    }
}

---

MakeupGui.qml

Code:

---

import Qt 4.7
Item {
    width: 600
    height: 900
    Image {
        id: background_makeup
        source: "images/background_makeup.png"
        x: 0
        y: 0
        width: 600
        height: 900
        opacity: 1
    }
    Image {
        id: tabs_makeup
        source: "images/tabs_makeup.png"
        x: 0
        y: 0
        width: 600
        height: 900
        opacity: 1
    }
    Image {
        id: text_makeup
        source: "images/text_makeup.png"
        x: 0
        y: 0
        width: 600
        height: 900
        opacity: 1
    }
}

---

ClothesGui.qml

Code:

---

import Qt 4.7
Item {
    width: 600
    height: 900
    Image {
        id: background_clothes
        source: "images/background_clothes.png"
        x: 0
        y: 0
        width: 600
        height: 900
        opacity: 1
    }
    Image {
        id: tab_clothes
        source: "images/tab_clothes.png"
        x: 0
        y: 0
        width: 600
        height: 900
        opacity: 1
    }
    Image {
        id: text_clothes
        source: "images/text_clothes.png"
        x: 0
        y: 0
        width: 600
        height: 900
        opacity: 1
    }
    Image {
        id: icons_clothes
        source: "images/icons_clothes.png"
        x: 0
        y: 0
        width: 600
        height: 900
        opacity: 1
    }
}

---

thx

Code:

---

Item {
  id: root
  Row {
    Image { ... 
      MouseArea { anchors.fill: parent; onClicked: root.state = "sunglasses" }
    }
    Image { ... 
      MouseArea { anchors.fill: parent; onClicked: root.state = "makeup" }
    }
  }
  Item {
    anchors { top: col.bottom; bottom: parent.bottom; left: parent.left; right: parent.right }
    Sunglasses {
      anchors.fill: parent
      visible: root.state == "sunglasses"
    }
    MakeupGui {
      anchors.fill: parent
      visible: root.state == "makeup"
    }
  }
  states: [
    State { name: "sunglasses" },
    State { name: "makeup" }
  ]
}

---

Hi wysota

I really tried to figured out how to applied it to my code without success finally i decided to convert the qml files to png instead and load as GUI and it works. I hope it will not slow the application. here Bellow is my code. My other issue now is how to get back to the main menu from the other ui (i have tried to design a back button but it does work). Can someone please help?
Thx

import QtQuick 1.1

Rectangle {
id: root
width: 600
height: 900
opacity: 1

Image {
id: mainGui
x: 0
y: 0
width: 600
height: 900
source: "../../uiu.png"
anchors.centerIn: parent
}

Image {
id: sunglassesGui
x: 0
y: 0
width: 600
height: 900
visible: false
source: "../../sunglass_screen.png"
anchors.centerIn: parent
}

Image {
id: makeupGui
x: 0
y: 0
width: 600
height: 900
visible: false
source: "../../make_up_screen.png"
anchors.centerIn: parent
}


Image {
id: clothesGui
x: 0
y: 0
width: 600
height: 900
visible: false
source: "../../clothes_screen.png"
anchors.centerIn: parent

MouseArea {
id: back_from_clothes
x: 364
y: 772
width: 56
height: 54
anchors.rightMargin: 180
anchors.bottomMargin: 74
anchors.leftMargin: 364
anchors.topMargin: 772
anchors.fill: parent
onClicked: mainGui.visible = true
}

MouseArea {
id: capClothes
x: 464
y: 778
width: 68
height: 42
}

MouseArea {
id: faceblinkclothes
x: 464
y: 836
width: 62
height: 58
}
}


MouseArea {
id: glasses
x: 52
y: 300
width: 498
height: 132
anchors.leftMargin: 52
anchors.rightMargin: 50
anchors.topMargin: 300
anchors.bottomMargin: 468
anchors.fill: parent
onClicked: sunglassesGui.visible = true

}

MouseArea {
id: makeup
x: 52
y: 432
width: 498
height: 128
anchors.rightMargin: 50
anchors.leftMargin: 52
anchors.bottomMargin: 340
anchors.topMargin: 432
visible: true
anchors.fill: parent
onClicked: makeupGui.visible = true
}

MouseArea {
id: clothes
x: 52
y: 560
width: 498
height: 128
anchors.rightMargin: 50
anchors.bottomMargin: 212
anchors.leftMargin: 52
anchors.topMargin: 560
anchors.fill: parent
onClicked: clothesGui.visible = true;

}
// }


}

I'm afraid that without proper comprehension of how QML works it might be too hard for you to implement it. I suggest you use a ready page stack implementation if you don't want to invest your time in learning QML.

I think you are right. I should really start learning it from scratch