QML files loading

[parfait]

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

[wysota]

Post your code please.

[parfait]

MainGui.qml

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

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

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

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

[wysota]

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" }
]
}

[parfait]

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;

}
// }


}

[wysota]

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.

[parfait]

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