qml prototype awesome tutorial


qml is great tools in qt in my tutorial qt Qt Style sheets Tutorial I’m using Css to create prototype for application to windows “form login” and i follow some steps to do that and finally I did it now I’ll do different thing in qml I will make special specs to make slider follow my steps and we will make with us amazing component let’s start :
in the beginning

Step 1: open Qt Creator and in file new project, in “Qt Quick Project” choose “Qt Quick UI” and name it slide.

Step 2: open slide.qml and make it empty because we want make it with own.

Step 3: now we will make this.

before it type the parent window and we will back to it later this the code



import QtQuick 1.0

Rectangle {
id: parentrect
width: 400
height: 350
}

this will be the parent window lets back to our slide first we will make two rectangle inside each other first own it the outer one I’ll make it round by type radius : 13 and the insider make it the radius : 16 so it will same like in the image second the secret in the slider to appear like it has edges and the ball in side it it’s the color and gradient the inner rectangle will be color and i put it’s color : “#ffffff” with opacity: 0.740 and border.color: “#807d76” the outer will make by color or gradient as you like here i use color but my self when i used gradient it’s appear amazing so i let color: “#ecdddd” and or what you like and to the both I’ll make the smooth : true and clip : true so it appear like in the image the code for outer and inner rectangle is :



Rectangle {
id:outerrect
x: 120
y: 142
width: 173
height: 51
color: "#ecdddd"
radius: 13
opacity: 1
smooth: true
clip: true
}

Rectangle {
id: innerrect
x: 125
y: 148
width: 163
height: 40
radius: 16
opacity: 0.740
scale: 1
border.width: 1
clip: true
smooth: true
border.color: "#807d76"
}

Step 4: we will make the ball in the slider.

we make make the ball with gradient to same like a ball first the radius to the ball is radius : 40 and the opacity : 0.260 and I’ll make the smooth : true , I’ll use two position in gradient position :0 the color will be color: “#f5eaea” and position : 1 the color will be color: “#dd0b0b” finally I’ll put border.color: “#8b7c7c” so it will be like what you see now and the code for ball will be:



Rectangle {
id:ballrect
x: 187
y: 148
width:40
height:40
radius: 40
smooth: true
gradient: Gradient {
GradientStop {
position: 0
color: "#f5eaea"
}

GradientStop {
position: 1
color: "#dd0b0b"
}
}
opacity: 0.260
border.color: "#8b7c7c"
}

Step 5: back to the parent window I’ll make it appear beautiful just for fun I’ll put gradient in it , I will let you try it this is the code for the parent window .



Rectangle {
id: parentrect
width: 400
height: 350
gradient: Gradient {
GradientStop {
position: 0
color: "#ad8e8e"
}

GradientStop {
position: 0.430
color: "#8d5050"
}

GradientStop {
position: 1
color: "#250404"
}
}
border.color: "#000000"
opacity: 0.850

Final step : I will use drag in qt system to enable to drag the ball in the slider horizontal in the the rectangle inner rectangle so I’ll use MouseArea in qml and in it put the anchors.fill to parent the windows parent and in the drag.target to the ball and drag.axis will be the X axis and maxdrag and mindrag to put it in the range between the inner rectangle; this is the code for mouse area.



MouseArea {
//hoverEnabled: false
anchors.fill: parent
drag.target: ball
drag.axis: Drag.XAxis
drag.maximumX: innerrect.x + innerrect.width - 40
drag.minimumX: innerrect.x
}

So the final result :

The complete code :



// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.0
import QtQuick 1.1

Rectangle {
id: parentrect
width: 400
height: 350
gradient: Gradient {
GradientStop {
position: 0
color: "#ad8e8e"
}

GradientStop {
position: 0.430
color: "#8d5050"
}

GradientStop {
position: 1
color: "#250404"
}
}
border.color: "#000000"
opacity: 0.850

Rectangle {
id:outerrect
x: 120
y: 142
width: 173
height: 51
color: "#ecdddd"
radius: 13
opacity: 1
smooth: true
clip: true
}

Rectangle {
id: innerrect
x: 125
y: 148
width: 163
height: 40
radius: 16
opacity: 0.740
scale: 1
border.width: 1
clip: true
smooth: true
border.color: "#807d76"
}

Rectangle {
id:ball
x: 187
y: 148
width:40
height:40
radius: 40
smooth: true
gradient: Gradient {
GradientStop {
position: 0
color: "#f5eaea"
}

GradientStop {
position: 1
color: "#dd0b0b"
}
}
opacity: 0.260
border.color: "#8b7c7c"
}

MouseArea {
anchors.fill: parent
drag.target: ball
drag.axis: Drag.XAxis
drag.maximumX: innerrect.x + innerrect.width - 40
drag.minimumX: innerrect.x
}
}

Now you can drag the slider and make beautiful element and prototype to your application thanks again to your time any mistake i did please tell me or send to me and accept my apologies to didn’t type anything for long time thank you again.

eslam mahgoub

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s