Monday, August 29, 2011

A simple application in QML - Stop Watch.

I've been playing around with Qt and QML for almost eight months and the new declarative language from the Troll Tech Engineers has impressed many people out there. If you don't know what QML is then don't hesitate to take a look at Nokia's website, you will find many things about Qt and QML.

QML is a wonderful language especially for developing mobile applications, where people always want to have fun with the UI. Thats why the legend Symbian seemed to lost its glory, but soon after Nokia's announcement of Symbian port of Qt, there is been a huge increase of interest from the people to develop for mobile.

QML, the declarative language has the strong Qt C++ on its backend and is a very simple environment for Web Programmers and New Programmers who don't have much experience with traditional programming languages like C++, C# and Java.
So here is my Stopwatch code snippet programs source code.

MainUI: StopWatch.qml (Best viewed in Landscape View)


import Qt 4.7



Rectangle {

    id:parentContainer

    width:320

    height: 240

    focus:true

    Image {

        id: background

        width:parentContainer.width

        height:parentContainer.height

        source: "background.jpg"

    }



    FontLoader{

        id:digitalFont

        source:"trana.ttf"

    }

    Keys.onSelectPressed:{

        startButton.startFunction()

    }



    Keys.onSpacePressed:{

        startButton.startFunction()

    }



    Keys.onEnterPressed:{

        startButton.startFunction()

    }



    Keys.onLeftPressed:{

        resumeButton.resumeFun()

    }



    Keys.onRightPressed:{

        stopButton.stopFunction()

    }
http://www.techieshome.in/2011/08/simple-application-in-qml-stop-watch.html


    Keys.onUpPressed:{

        newLapButton.createNewLapRecord()

    }



    Keys.onDownPressed:{

        resetButton.resetFun()

    }



    Keys.onAsteriskPressed:{

        Qt.quit()

    }



    Keys.onContext2Pressed:{

        Qt.quit()

    }



   Grid{

        id:lapRecordView

        rows:4

        columns:3

        spacing:3

        anchors.top:parent.top

        anchors.horizontalCenter:parent.horizontalCenter

        NewLapL{

            id:lap1

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap1

                        opacity:1.0

                        height: (parentContainer.height*7)/100

                        width: (parentContainer.width*29)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap1; property: "width"; from: 0; duration: 200 }



                }

            ]





            }

        NewLapL{

            id:lap2

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap2

                        opacity:1.0

                        height: (parentContainer.height*7)/100

                        width: (parentContainer.width*29)/100

                    }



                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap2; property: "width"; from: 0; duration: 200 }



                }

            ]





            }

        NewLapL{

            id:lap3

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap3

                        opacity:1.0

                        height: (parentContainer.height*7)/100

                        width: (parentContainer.width*29)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap3; property: "width"; from: 0; duration: 200 }



                }

            ]





            }

        NewLapL{

            id:lap4

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap4

                        opacity:1.0

                        height: (parentContainer.height*7)/100

                        width: (parentContainer.width*29)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap4; property: "width"; from: 0; duration: 200 }



                }

            ]





            }

        NewLapL{

            id:lap5

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap5

                        opacity:1.0

                        height: (parentContainer.height*7)/100

                        width: (parentContainer.width*29)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap5; property: "width"; from: 0; duration: 200 }



                }

            ]





            }

        NewLapL{

            id:lap6

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap6

                        opacity:1.0

                        height: (parentContainer.height*7)/100

                        width: (parentContainer.width*29)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap6; property: "width"; from: 0; duration: 200 }



                }

            ]





            }

        NewLapL{

            id:lap7

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap7

                        opacity:1.0

                        height: (parentContainer.height*7)/100

                        width: (parentContainer.width*29)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap7; property: "width"; from: 0; duration: 200 }



                }

            ]





            }

        NewLapL{

            id:lap8

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap8

                        opacity:1.0

                        height: (parentContainer.height*7)/100

                        width: (parentContainer.width*29)/100



                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap8; property: "width"; from: 0; duration: 200 }



                }

            ]





            }

        NewLapL{

            id:lap9

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap9

                        opacity:1.0

                        height: (parentContainer.height*7)/100

                        width: (parentContainer.width*29)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap9; property: "width"; from: 0; duration: 200 }



                }

            ]





            }

        NewLapL{

            id:lap10

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap10

                        opacity:1.0

                        height: (parentContainer.height*7)/100

                        width: (parentContainer.width*29)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap10; property: "width"; from: 0; duration: 200 }



                }

            ]





            }

        NewLapL{

            id:lap11

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap11

                        opacity:1.0

                        height: (parentContainer.height*7)/100

                        width: (parentContainer.width*29)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap11; property: "width"; from: 0; duration: 200 }



                }

            ]





            }

        NewLapL{

            id:lap12

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap12

                        opacity:1.0

                        height: (parentContainer.height*7)/100

                        width: (parentContainer.width*29)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap12; property: "width"; from: 0; duration: 200 }



                }

            ]





            }



        }





    Row{

        id:buttonRow

        spacing:5

        anchors.bottom:parent.bottom

        anchors.bottomMargin:5

        anchors.horizontalCenter:parent.horizontalCenter



        Rectangle{

            id:startButton

            width:start.width + 9

            height:start.height + 10

            radius:5

            smooth:true

            gradient: Gradient{

                GradientStop{color:"white"; position:0.0}

                GradientStop{color:"gray"; position:0.5}

                GradientStop{color:"white"; position:1.0}

            }



            Image {

                id: startIcon

                source: "qrc:/ok.png"

                opacity:0.75

                anchors.horizontalCenter:parent.horizontalCenter

                width:parent.width - start.width/2

                height:parent.height-3

            }



            SequentialAnimation{

                id: startButtonAnimation

                running:false

                NumberAnimation { target: startButton; property: "y"; to: startButton.y - 15; duration: 300 }

                NumberAnimation { target: startButton; property: "y"; to: startButton.y; duration: 200 }

                NumberAnimation { target: startButton; property: "y"; to: startButton.y - 8; duration: 200 }

                NumberAnimation { target: startButton; property: "y"; to: startButton.y; duration: 200 }

            }



            Text {

                id: start

                text: "Start"

                smooth:true

                font.bold:true

                font.italic:true

                font.pixelSize:(((parentContainer.width*9)/100)*50)/100

                style:Text.Raised

                color:"indigo"

                styleColor:"slateblue"

                anchors.horizontalCenter:parent.horizontalCenter

                anchors.verticalCenter:parent.verticalCenter

            }



            MouseArea{

                anchors.fill:parent

                onClicked: {

                    startButton.startFunction()

                }

            }



            function startFunction()

            {

                clock.running = false;

                timer.milliSeconds = 0;

                timer.seconds = 0;

                timer.minutes = 0;

                timer.hours = 0;



                milli.text = "00"

                second.text = "00"

                minute.text = "00"

                hour.text = "00"



                lap1.text = ""

                lap2.text = ""

                lap3.text = ""

                lap4.text = ""

                lap5.text = ""

                lap6.text = ""

                lap7.text = ""

                lap8.text = ""

                lap9.text = ""

                lap10.text = ""

                lap11.text = ""

                lap12.text = ""





                lap1.opacity = 0

                lap2.opacity = 0

                lap3.opacity = 0

                lap4.opacity = 0

                lap5.opacity = 0

                lap6.opacity = 0

                lap7.opacity = 0

                lap8.opacity = 0

                lap9.opacity = 0

                lap10.opacity = 0

                lap11.opacity = 0

                lap12.opacity = 0



                lap1.state = ""

                lap2.state = ""

                lap3.state = ""

                lap4.state = ""

                lap5.state = ""

                lap6.state = ""

                lap7.state = ""

                lap8.state = ""

                lap9.state = ""

                lap10.state = ""

                lap11.state = ""

                lap12.state = ""



                newLapButton.lapCount = 0;



                clock.running = true;



                startButtonAnimation.running = true

            }



        }

        Rectangle{

            id:stopButton

            width:stop.width + 9

            height:stop.height + 10

            radius:5

            smooth:true

            gradient: Gradient{

                GradientStop{color:"white"; position:0.0}

                GradientStop{color:"gray"; position:0.5}

                GradientStop{color:"white"; position:1.0}

            }



            Image {

                id: stopIcon

                source: "qrc:/right.png"

                opacity:0.75

                anchors.horizontalCenter:parent.horizontalCenter

                width:parent.width - stop.width/2

                height:parent.height-3

            }





            SequentialAnimation{

                id: stopButtonAnimation

                running:false

                NumberAnimation { target: stopButton; property: "y"; to: stopButton.y - 15; duration: 300 }

                NumberAnimation { target: stopButton; property: "y"; to: stopButton.y; duration: 200 }

                NumberAnimation { target: stopButton; property: "y"; to: stopButton.y - 8; duration: 200 }

                NumberAnimation { target: stopButton; property: "y"; to: stopButton.y; duration: 200 }

            }



            Text {

                id: stop

                text: "Stop"

                smooth:true

                font.bold:true

                font.italic:true

                font.pixelSize:(((parentContainer.width*9)/100)*50)/100

                style:Text.Raised

                styleColor:"slateblue"

                color:"indigo"

                anchors.horizontalCenter:parent.horizontalCenter

                anchors.verticalCenter:parent.verticalCenter

            }



            MouseArea{

                anchors.fill:parent

                onClicked : {

                    stopButton.stopFunction()

                }

            }

            function stopFunction()

            {

                clock.running = false

                stopButtonAnimation.running = true

            }

        }



        Rectangle{

            id:resumeButton

            width:resume.width + 9

            height:resume.height + 10

            radius:5

            smooth:true

            gradient: Gradient{

                GradientStop{color:"white"; position:0.0}

                GradientStop{color:"gray"; position:0.5}

                GradientStop{color:"white"; position:1.0}

            }



            Image {

                id: resumeIcon

                source: "qrc:/left.png"

                opacity:0.75

                anchors.horizontalCenter:parent.horizontalCenter

                width:parent.width - resume.width/2

                height:parent.height-3

            }



            SequentialAnimation{

                id: resumeButtonAnimation

                running:false

                NumberAnimation { target: resumeButton; property: "y"; to: resumeButton.y - 15; duration: 300 }

                NumberAnimation { target: resumeButton; property: "y"; to: resumeButton.y; duration: 200 }

                NumberAnimation { target: resumeButton; property: "y"; to: resumeButton.y - 8; duration: 200 }

                NumberAnimation { target: resumeButton; property: "y"; to: resumeButton.y; duration: 200 }

            }



            Text {

                id: resume

                text: "Resume"

                smooth:true

                font.bold:true

                font.italic:true

                font.pixelSize:(((parentContainer.width*9)/100)*50)/100

                style:Text.Raised

                styleColor:"slateblue"

                color:"indigo"

                anchors.horizontalCenter:parent.horizontalCenter

                anchors.verticalCenter:parent.verticalCenter

            }



            MouseArea{

                anchors.fill:parent

                onClicked: {

                    resumeButton.resumeFun()

                }

            }



            function resumeFun()

            {

                resumeButtonAnimation.running = true

                if(timer.milliSeconds > 0 || timer.seconds > 0 || timer.minutes > 0 || timer.hours > 0)

                    clock.running = true;

                else

                    return;

            }



        }

        Rectangle{

            id:newLapButton

            property int lapCount: 0



            width:newLap.width + 9

            height:newLap.height + 10

            radius:5

            smooth:true

            gradient: Gradient{

                GradientStop{color:"white"; position:0.0}

                GradientStop{color:"gray"; position:0.5}

                GradientStop{color:"white"; position:1.0}

            }



            Image {

                id: newLapIcon

                source: "qrc:/up.png"

                opacity:0.75

                anchors.horizontalCenter:parent.horizontalCenter

                width:parent.width - newLap.width/2

                height:parent.height-3

            }



            SequentialAnimation{

                id: newLapButtonAnimation

                running:false

                NumberAnimation { target: newLapButton; property: "y"; to: newLapButton.y - 15; duration: 300 }

                NumberAnimation { target: newLapButton; property: "y"; to: newLapButton.y; duration: 200 }

                NumberAnimation { target: newLapButton; property: "y"; to: newLapButton.y - 8; duration: 200 }

                NumberAnimation { target: newLapButton; property: "y"; to: newLapButton.y; duration: 200 }

            }



            Text {

                id: newLap

                text: "New Lap"

                smooth:true

                font.bold:true

                font.italic:true

                font.pixelSize:(((parentContainer.width*9)/100)*50)/100

                style:Text.Raised

                styleColor:"slateblue"

                color:"indigo"

                anchors.horizontalCenter:parent.horizontalCenter

                anchors.verticalCenter:parent.verticalCenter

            }



            MouseArea{

                anchors.fill:parent

                onClicked:{

                    newLapButton.createNewLapRecord()

                }

            }



            function createNewLapRecord()

            {

                newLapButtonAnimation.running = true



                if(newLapButton.lapCount == 0){

                lap1.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap1.state = "created";

            }

                if(newLapButton.lapCount == 1){

                lap2.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap2.state = "created";

            }

                if(newLapButton.lapCount == 2){

                lap3.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap3.state = "created";

            }

                if(newLapButton.lapCount == 3){

                lap4.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap4.state = "created";

            }

                if(newLapButton.lapCount == 4){

                lap5.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap5.state = "created";

            }

                if(newLapButton.lapCount == 5){

                lap6.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap6.state = "created";

            }

                if(newLapButton.lapCount == 6){

                lap7.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap7.state = "created";

            }

                if(newLapButton.lapCount == 7){

                lap8.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap8.state = "created";

            }

                if(newLapButton.lapCount == 8){

                lap9.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap9.state = "created";

            }



                if(newLapButton.lapCount == 9){

                lap10.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap10.state = "created";

            }



                if(newLapButton.lapCount == 10){

                lap11.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap11.state = "created";

            }



                if(newLapButton.lapCount == 11){

                lap12.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap12.state = "created";

            }

                newLapButton.lapCount ++;

            }



        }

        Rectangle{

            id:resetButton

            width:reset.width + 9

            height:reset.height + 10

            radius:5

            smooth:true

            gradient: Gradient{

                GradientStop{color:"white"; position:0.0}

                GradientStop{color:"gray"; position:0.5}

                GradientStop{color:"white"; position:1.0}

            }

            Image {

                id: resetIcon

                source: "qrc:/down.png"

                opacity:0.75

                anchors.horizontalCenter:parent.horizontalCenter

                width:parent.width - reset.width/2

                height:parent.height-3

            }





            SequentialAnimation{

                id: resetButtonAnimation

                running:false

                NumberAnimation { target: resetButton; property: "y"; to: resetButton.y - 15; duration: 300 }

                NumberAnimation { target: resetButton; property: "y"; to: resetButton.y; duration: 200 }

                NumberAnimation { target: resetButton; property: "y"; to: resetButton.y - 8; duration: 200 }

                NumberAnimation { target: resetButton; property: "y"; to: resetButton.y; duration: 200 }

            }



            Text {

                id: reset

                text: "Reset"

                smooth:true

                font.bold:true

                font.italic:true

                font.pixelSize:(((parentContainer.width*9)/100)*50)/100

                style:Text.Raised

                styleColor:"slateblue"

                color:"indigo"

                anchors.horizontalCenter:parent.horizontalCenter

                anchors.verticalCenter:parent.verticalCenter

            }



            MouseArea{

                anchors.fill:parent

                onClicked:{

                    resetButton.resetFun()

                }



            }



            function resetFun()

            {



                resetButtonAnimation.running=true



                clock.running=false

                timer.milliSeconds = 0;

                timer.seconds = 0;

                timer.minutes = 0;

                timer.hours = 0;

                milli.text = "00"

                second.text = "00"

                minute.text = "00"

                hour.text = "00"



                lap1.text = ""

                lap2.text = ""

                lap3.text = ""

                lap4.text = ""

                lap5.text = ""

                lap6.text = ""

                lap7.text = ""

                lap8.text = ""

                lap9.text = ""

                lap10.text = ""

                lap11.text = ""

                lap12.text = ""





                lap1.opacity = 0

                lap2.opacity = 0

                lap3.opacity = 0

                lap4.opacity = 0

                lap5.opacity = 0

                lap6.opacity = 0

                lap7.opacity = 0

                lap8.opacity = 0

                lap9.opacity = 0

                lap10.opacity = 0

                lap11.opacity = 0

                lap12.opacity = 0



                lap1.state = ""

                lap2.state = ""

                lap3.state = ""

                lap4.state = ""

                lap5.state = ""

                lap6.state = ""

                lap7.state = ""

                lap8.state = ""

                lap9.state = ""

                lap10.state = ""

                lap11.state = ""

                lap12.state = ""



                newLapButton.lapCount = 0;

            }



        }



        Rectangle{

            id:quitButton

            width:quitImage.width+5

            height:quitImage.height

            color:"transparent"



            Image {

            id: quitImage

            source: "qrc:/quit.png"

            width:startButton.height

            height:startButton.height

            anchors.centerIn:parent.Center

            }



            Image {

                id: quitIcon

                source: "qrc:/asterisk.png"

                opacity:0.8

                anchors.bottom:quitImage.bottom

                anchors.horizontalCenter:quitButton.horizontalCenter

                width:parent.width/2

                height:parent.height-6

            }



            MouseArea{

                anchors.fill:parent

                onClicked:{

                    Qt.quit()

                }

            }

        }

    }



    Row{

        id:timer

        property int milliSeconds: 0

        property int seconds: 0

        property int minutes: 0

        property int hours: 0

        anchors.centerIn:parent



        Rectangle{

            id:hourContainer

            width:(((parentContainer.width*20)/100))

            height:(((parentContainer.width*20)/100))

            gradient: Gradient{

                GradientStop{color:"gray"; position:0}

                GradientStop{color:"white"; position:0.5}

                GradientStop{color:"gray"; position:1.0}

            }

            Text {

                id: hour

                text: "00"

                font.family:digitalFont.name

                font.bold:true

                smooth:true

                font.pixelSize:26

                anchors.centerIn:parent

            }



        }





        Rectangle{

            width:5

            height:(((parentContainer.width*20)/100))

            gradient: Gradient{

                GradientStop{color:"gray"; position:0}

                GradientStop{color:"white"; position:0.5}

                GradientStop{color:"gray"; position:1.0}

            }

            Text {

                text: ":"

                font.family:digitalFont.name

                font.bold:true

                smooth:true

                font.pixelSize:26

                anchors.centerIn:parent

            }



        }







        Rectangle{

            id:minuteContainer

            width:(((parentContainer.width*20)/100))

            height:(((parentContainer.width*20)/100))

            gradient: Gradient{

                GradientStop{color:"gray"; position:0}

                GradientStop{color:"white"; position:0.5}

                GradientStop{color:"gray"; position:1.0}

            }

            Text {

                id: minute

                text: "00"

                font.family:digitalFont.name

                font.bold:true

                smooth:true

                font.pixelSize:26

                anchors.centerIn:parent

            }



        }



        Rectangle{

            width:5

            height:(((parentContainer.width*20)/100))

            gradient: Gradient{

                GradientStop{color:"gray"; position:0}

                GradientStop{color:"white"; position:0.5}

                GradientStop{color:"gray"; position:1.0}

            }

            Text {

                text: ":"

                font.family:digitalFont.name

                font.bold:true

                smooth:true

                font.pixelSize:26

                anchors.centerIn:parent

            }



        }





        Rectangle{

            id:secondContainer

            width:(((parentContainer.width*20)/100))

            height:(((parentContainer.width*20)/100))

            gradient: Gradient{

                GradientStop{color:"gray"; position:0}

                GradientStop{color:"white"; position:0.5}

                GradientStop{color:"gray"; position:1.0}

            }

            Text {

                id: second

                text: "00"

                font.family:digitalFont.name

                font.bold:true

                smooth:true

                font.pixelSize:26

                anchors.centerIn:parent

            }

        }







        Rectangle{

            width:5

            height:(((parentContainer.width*20)/100))

            gradient: Gradient{

                GradientStop{color:"gray"; position:0}

                GradientStop{color:"white"; position:0.5}

                GradientStop{color:"gray"; position:1.0}

            }

            Text {

                text: ":"

                font.family:digitalFont.name

                font.bold:true

                smooth:true

                font.pixelSize:26

                anchors.centerIn:parent

            }



        }





        Rectangle{

            id:milliSecondContainer

            width:(((parentContainer.width*20)/100))

            height:(((parentContainer.width*20)/100))

            gradient: Gradient{

                GradientStop{color:"gray"; position:0}

                GradientStop{color:"white"; position:0.5}

                GradientStop{color:"gray"; position:1.0}

            }

            Text {

                id: milli

                text: "00"

                font.family:digitalFont.name

                font.bold:true

                smooth:true

                font.pixelSize:26

                anchors.centerIn:parent

            }

        }

    }









    Timer{

        id:clock

        interval:50

        triggeredOnStart:true

        onTriggered: clock.updateTime()

        repeat:true



        function updateTime()

        {

            if(timer.milliSeconds == 950)

            {

                timer.milliSeconds = 0;

                if(timer.seconds == 59)

                {

                    timer.seconds = 0;

                    if(timer.minutes == 59)

                    {

                        timer.minutes = 0;

                        if(timer.hours == 59)

                            clock.running=false;

                        else

                            timer.hours++;



                    }

                    else

                        timer.minutes++;

                }

                else

                    timer.seconds++;

            }

            else

                timer.milliSeconds = timer.milliSeconds+50;

            if(timer.milliSeconds == 0)

                milli.text = "000";

            else

                milli.text = timer.milliSeconds;

            if(timer.seconds == 0)

                second.text = "00";

            if(timer.seconds < 10)

                second.text = '0' + timer.seconds

            else

                second.text = timer.seconds;

            if(timer.minutes == 0)

                minute.text = "00";

            if(timer.minutes < 10)

                minute.text = '0' + timer.minutes;

            else

                minute.text = timer.minutes;



            if(timer.hours == 0)

                hour.text = "00";

            if(timer.hours < 10)

                hour.text = '0' + timer.hours;

            else

                hour.text = timer.hours;

        }

    }





}

MainUI: StopWatch.qml (Best viewed in Portrait View)

import QtQuick 1.0



Rectangle {

    id:parentContainer

    width:320

    height: 240

    focus:true

    Image {

        id: background

        width:parentContainer.width

        height:parentContainer.height

        source: "background.jpg"

    }



    FontLoader{

        id:digitalFont

        source:"trana.ttf"

    }

    Keys.onSelectPressed:{

        startButton.startFunction()

    }



    Keys.onSpacePressed:{

        startButton.startFunction()

    }



    Keys.onEnterPressed:{

        startButton.startFunction()

    }



    Keys.onLeftPressed:{

        resumeButton.resumeFun()

    }



    Keys.onRightPressed:{

        stopButton.stopFunction()

    }



    Keys.onUpPressed:{

        newLapButton.createNewLapRecord()

    }



    Keys.onDownPressed:{

        resetButton.resetFun()

    }



    Keys.onAsteriskPressed:{

        Qt.quit()

    }





    Keys.onContext2Pressed:{

        Qt.quit()

    }





   Grid{

        id:lapRecordView

        rows:4

        columns:3

        spacing:3

        anchors.top:parent.top

        anchors.horizontalCenter:parent.horizontalCenter

        NewLapP{

            id:lap1

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap1

                        opacity:1.0

                        height: (parentContainer.height*8)/100



                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap1; property: "opacity"; to: 1.0; duration: 200 }



                }

            ]





            }

        NewLapP{

            id:lap2

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap2

                        opacity:1.0

                        height: (parentContainer.height*8)/100

                    }



                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap2; property: "opacity"; to: 1.0; duration: 200 }



                }

            ]





            }

        NewLapP{

            id:lap3

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap3

                        opacity:1.0

                        height: (parentContainer.height*8)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap3; property: "opacity"; to: 1.0; duration: 200 }



                }

            ]





            }

        NewLapP{

            id:lap4

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap4

                        opacity:1.0

                        height: (parentContainer.height*8)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap4; property: "opacity"; to: 1.0; duration: 200 }



                }

            ]





            }

        NewLapP{

            id:lap5

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap5

                        opacity:1.0

                        height: (parentContainer.height*8)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap5; property: "opacity"; to: 1.0; duration: 200 }



                }

            ]





            }

        NewLapP{

            id:lap6

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap6

                        opacity:1.0

                        height: (parentContainer.height*8)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap6; property: "opacity"; to: 1.0; duration: 200 }



                }

            ]





            }

        NewLapP{

            id:lap7

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap7

                        opacity:1.0

                        height: (parentContainer.height*8)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap7; property: "opacity"; to: 1.0; duration: 200 }



                }

            ]





            }

        NewLapP{

            id:lap8

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap8

                        opacity:1.0

                        height: (parentContainer.height*8)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap8; property: "opacity"; to: 1.0; duration: 200 }



                }

            ]





            }

        NewLapP{

            id:lap9

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap9

                        opacity:1.0

                        height: (parentContainer.height*8)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap9; property: "opacity"; to: 1.0; duration: 200 }



                }

            ]





            }

        NewLapP{

            id:lap10

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap10

                        opacity:1.0

                        height: (parentContainer.height*8)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap10; property: "opacity"; to: 1.0; duration: 200 }



                }

            ]





            }

        NewLapP{

            id:lap11

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap11

                        opacity:1.0

                        height: (parentContainer.height*8)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap11; property: "opacity"; to: 1.0; duration: 200 }



                }

            ]





            }

        NewLapP{

            id:lap12

            text:""

            states: [

                State {

                    name: "created"

                    PropertyChanges {

                        target: lap12

                        opacity:1.0

                        height: (parentContainer.height*8)/100

                    }

                }

            ]



            transitions: [

                Transition {

                    to:"created"

                    NumberAnimation { target: lap12; property: "opacity"; to: 1.0; duration: 200 }



                }

            ]





            }



        }





    Row{

        id:buttonRow

        spacing:3

        anchors.bottom:parent.bottom

        anchors.bottomMargin:5

        anchors.horizontalCenter:parent.horizontalCenter

        Rectangle{

            id:startButton

            width:start.width + 6

            height:start.height + 14

            radius:5

            smooth:true

            gradient: Gradient{

                GradientStop{color:"white"; position:0.0}

                GradientStop{color:"gray"; position:0.5}

                GradientStop{color:"white"; position:1.0}

            }



            Image {

                id: startIcon

                source: "qrc:/ok.png"

                opacity:0.75

                anchors.horizontalCenter:parent.horizontalCenter

                width:parent.width - start.width/2

                height:parent.height-3

            }



            SequentialAnimation{

                id: startButtonAnimation

                running:false

                NumberAnimation { target: startButton; property: "y"; to: startButton.y - 15; duration: 300 }

                NumberAnimation { target: startButton; property: "y"; to: startButton.y; duration: 200 }

                NumberAnimation { target: startButton; property: "y"; to: startButton.y - 8; duration: 200 }

                NumberAnimation { target: startButton; property: "y"; to: startButton.y; duration: 200 }

            }



            Text {

                id: start

                text: "Start"

                smooth:true

                font.bold:true

                font.italic:true

                font.pixelSize:(((parentContainer.width*9)/100)*50)/100

                style:Text.Raised

                color:"indigo"

                styleColor:"slateblue"

                anchors.horizontalCenter:parent.horizontalCenter

                anchors.verticalCenter:parent.verticalCenter

            }



            MouseArea{

                anchors.fill:parent

                onClicked: {

                    startButton.startFunction()

                }

            }



            function startFunction()

            {

                clock.running = false;

                timer.milliSeconds = 0;

                timer.seconds = 0;

                timer.minutes = 0;

                timer.hours = 0;

                clock.running = true;



                startButtonAnimation.running = true

            }



        }

        Rectangle{

            id:stopButton

            width:stop.width + 6

            height:stop.height + 14

            radius:5

            smooth:true

            gradient: Gradient{

                GradientStop{color:"white"; position:0.0}

                GradientStop{color:"gray"; position:0.5}

                GradientStop{color:"white"; position:1.0}

            }



            Image {

                id: stopIcon

                source: "qrc:/right.png"

                opacity:0.75

                anchors.horizontalCenter:parent.horizontalCenter

                width:parent.width - stop.width/2

                height:parent.height-3

            }





            SequentialAnimation{

                id: stopButtonAnimation

                running:false

                NumberAnimation { target: stopButton; property: "y"; to: stopButton.y - 15; duration: 300 }

                NumberAnimation { target: stopButton; property: "y"; to: stopButton.y; duration: 200 }

                NumberAnimation { target: stopButton; property: "y"; to: stopButton.y - 8; duration: 200 }

                NumberAnimation { target: stopButton; property: "y"; to: stopButton.y; duration: 200 }

            }



            Text {

                id: stop

                text: "Stop"

                smooth:true

                font.bold:true

                font.italic:true

                font.pixelSize:(((parentContainer.width*9)/100)*50)/100

                style:Text.Raised

                styleColor:"slateblue"

                color:"indigo"

                anchors.horizontalCenter:parent.horizontalCenter

                anchors.verticalCenter:parent.verticalCenter

            }



            MouseArea{

                anchors.fill:parent

                onClicked : {

                    stopButton.stopFunction()

                }

            }

            function stopFunction()

            {

                clock.running = false

                stopButtonAnimation.running = true

            }

        }



        Rectangle{

            id:resumeButton

            width:resume.width + 6

            height:resume.height + 14

            radius:5

            smooth:true

            gradient: Gradient{

                GradientStop{color:"white"; position:0.0}

                GradientStop{color:"gray"; position:0.5}

                GradientStop{color:"white"; position:1.0}

            }



            Image {

                id: resumeIcon

                source: "qrc:/left.png"

                opacity:0.75

                anchors.horizontalCenter:parent.horizontalCenter

                width:parent.width - resume.width/2

                height:parent.height-3

            }



            SequentialAnimation{

                id: resumeButtonAnimation

                running:false

                NumberAnimation { target: resumeButton; property: "y"; to: resumeButton.y - 15; duration: 300 }

                NumberAnimation { target: resumeButton; property: "y"; to: resumeButton.y; duration: 200 }

                NumberAnimation { target: resumeButton; property: "y"; to: resumeButton.y - 8; duration: 200 }

                NumberAnimation { target: resumeButton; property: "y"; to: resumeButton.y; duration: 200 }

            }



            Text {

                id: resume

                text: "Resume"

                smooth:true

                font.bold:true

                font.italic:true

                font.pixelSize:(((parentContainer.width*9)/100)*50)/100

                style:Text.Raised

                styleColor:"slateblue"

                color:"indigo"

                anchors.horizontalCenter:parent.horizontalCenter

                anchors.verticalCenter:parent.verticalCenter

            }



            MouseArea{

                anchors.fill:parent

                onClicked: {

                    resumeButton.resumeFun()

                }

            }



            function resumeFun()

            {

                resumeButtonAnimation.running = true

                if(timer.milliSeconds > 0 || timer.seconds > 0 || timer.minutes > 0 || timer.hours > 0)

                    clock.running = true;

                else

                    return;

            }



        }

        Rectangle{

            id:newLapButton

            property int lapCount: 0



            width:newLap.width + 6

            height:newLap.height + 14

            radius:5

            smooth:true

            gradient: Gradient{

                GradientStop{color:"white"; position:0.0}

                GradientStop{color:"gray"; position:0.5}

                GradientStop{color:"white"; position:1.0}

            }



            Image {

                id: newLapIcon

                source: "qrc:/up.png"

                opacity:0.75

                anchors.horizontalCenter:parent.horizontalCenter

                width:parent.width - newLap.width/2

                height:parent.height-3

            }

            SequentialAnimation{

                id: newLapButtonAnimation

                running:false

                NumberAnimation { target: newLapButton; property: "y"; to: newLapButton.y - 15; duration: 300 }

                NumberAnimation { target: newLapButton; property: "y"; to: newLapButton.y; duration: 200 }

                NumberAnimation { target: newLapButton; property: "y"; to: newLapButton.y - 8; duration: 200 }

                NumberAnimation { target: newLapButton; property: "y"; to: newLapButton.y; duration: 200 }

            }



            Text {

                id: newLap

                text: "New Lap"

                smooth:true

                font.bold:true

                font.italic:true

                font.pixelSize:(((parentContainer.width*9)/100)*50)/100

                style:Text.Raised

                styleColor:"slateblue"

                color:"indigo"

                anchors.horizontalCenter:parent.horizontalCenter

                anchors.verticalCenter:parent.verticalCenter

            }



            MouseArea{

                anchors.fill:parent

                onClicked:{

                    newLapButton.createNewLapRecord()

                }

            }



            function createNewLapRecord()

            {

                newLapButtonAnimation.running = true



                if(newLapButton.lapCount == 0){

                lap1.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap1.state = "created";

            }

                if(newLapButton.lapCount == 1){

                lap2.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap2.state = "created";

            }

                if(newLapButton.lapCount == 2){

                lap3.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap3.state = "created";

            }

                if(newLapButton.lapCount == 3){

                lap4.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap4.state = "created";

            }

                if(newLapButton.lapCount == 4){

                lap5.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap5.state = "created";

            }

                if(newLapButton.lapCount == 5){

                lap6.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap6.state = "created";

            }

                if(newLapButton.lapCount == 6){

                lap7.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap7.state = "created";

            }

                if(newLapButton.lapCount == 7){

                lap8.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap8.state = "created";

            }

                if(newLapButton.lapCount == 8){

                lap9.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap9.state = "created";

            }



                if(newLapButton.lapCount == 9){

                lap10.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap10.state = "created";

            }



                if(newLapButton.lapCount == 10){

                lap11.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap11.state = "created";

            }



                if(newLapButton.lapCount == 11){

                lap12.text = hour.text + ":" + minute.text + ":" + second.text + ":" + milli.text;

                lap12.state = "created";

            }

                newLapButton.lapCount ++;

            }



        }

        Rectangle{

            id:resetButton

            width:reset.width + 6

            height:reset.height + 14

            radius:5

            smooth:true

            gradient: Gradient{

                GradientStop{color:"white"; position:0.0}

                GradientStop{color:"gray"; position:0.5}

                GradientStop{color:"white"; position:1.0}

            }



            Image {

                id: resetIcon

                source: "qrc:/down.png"

                opacity:0.75

                anchors.horizontalCenter:parent.horizontalCenter

                width:parent.width - reset.width/2

                height:parent.height-3

            }



            SequentialAnimation{

                id: resetButtonAnimation

                running:false

                NumberAnimation { target: resetButton; property: "y"; to: resetButton.y - 15; duration: 300 }

                NumberAnimation { target: resetButton; property: "y"; to: resetButton.y; duration: 200 }

                NumberAnimation { target: resetButton; property: "y"; to: resetButton.y - 8; duration: 200 }

                NumberAnimation { target: resetButton; property: "y"; to: resetButton.y; duration: 200 }

            }



            Text {

                id: reset

                text: "Reset"

                smooth:true

                font.bold:true

                font.italic:true

                font.pixelSize:(((parentContainer.width*9)/100)*50)/100

                style:Text.Raised

                styleColor:"slateblue"

                color:"indigo"

                anchors.horizontalCenter:parent.horizontalCenter

                anchors.verticalCenter:parent.verticalCenter

            }



            MouseArea{

                anchors.fill:parent

                onClicked:{

                    resetButton.resetFun()

                }



            }



            function resetFun()

            {



                resetButtonAnimation.running=true



                clock.running=false

                timer.milliSeconds = 0;

                timer.seconds = 0;

                timer.minutes = 0;

                timer.hours = 0;

                milli.text = "00"

                second.text = "00"

                minute.text = "00"

                hour.text = "00"



                lap1.text = ""

                lap2.text = ""

                lap3.text = ""

                lap4.text = ""

                lap5.text = ""

                lap6.text = ""

                lap7.text = ""

                lap8.text = ""

                lap9.text = ""

                lap10.text = ""

                lap11.text = ""

                lap12.text = ""





                lap1.opacity = 0

                lap2.opacity = 0

                lap3.opacity = 0

                lap4.opacity = 0

                lap5.opacity = 0

                lap6.opacity = 0

                lap7.opacity = 0

                lap8.opacity = 0

                lap9.opacity = 0

                lap10.opacity = 0

                lap11.opacity = 0

                lap12.opacity = 0



                lap1.state = ""

                lap2.state = ""

                lap3.state = ""

                lap4.state = ""

                lap5.state = ""

                lap6.state = ""

                lap7.state = ""

                lap8.state = ""

                lap9.state = ""

                lap10.state = ""

                lap11.state = ""

                lap12.state = ""



                newLapButton.lapCount = 0;

            }



        }



        Rectangle{

            id:quitButton

            width:quitImage.width+5

            height:quitImage.height

            color:"transparent"



            Image {

            id: quitImage

            source: "qrc:/quit.png"

            width:startButton.height

            height:startButton.height

            anchors.centerIn:parent.Center

            }



            Image {

                id: quitIcon

                source: "qrc:/asterisk.png"

                opacity:0.8

                anchors.bottom:quitImage.bottom

                anchors.horizontalCenter:quitButton.horizontalCenter

                width:parent.width/2

                height:parent.height-4

            }



            MouseArea{

                anchors.fill:parent

                onClicked:{

                    Qt.quit()

                }

            }

        }

    }

    Row{

        id:timer

        property int milliSeconds: 0

        property int seconds: 0

        property int minutes: 0

        property int hours: 0

        anchors.centerIn:parent



        Rectangle{

            id:hourContainer

            width:(((parentContainer.width*24)/100))

            height:(((parentContainer.width*24)/100))

            gradient: Gradient{

                GradientStop{color:"gray"; position:0}

                GradientStop{color:"white"; position:0.5}

                GradientStop{color:"gray"; position:1.0}

            }

            Text {

                id: hour

                text: "00"

                font.family:digitalFont.name

                font.bold:true

                smooth:true

                font.pixelSize:28

                anchors.centerIn:parent

            }



        }





        Rectangle{

            width:5

            height:(((parentContainer.width*24)/100))

            gradient: Gradient{

                GradientStop{color:"gray"; position:0}

                GradientStop{color:"white"; position:0.5}

                GradientStop{color:"gray"; position:1.0}

            }

            Text {

                text: ":"

                font.family:digitalFont.name

                font.bold:true

                smooth:true

                font.pixelSize:28

                anchors.centerIn:parent

            }



        }







        Rectangle{

            id:minuteContainer

            width:(((parentContainer.width*24)/100))

            height:(((parentContainer.width*24)/100))

            gradient: Gradient{

                GradientStop{color:"gray"; position:0}

                GradientStop{color:"white"; position:0.5}

                GradientStop{color:"gray"; position:1.0}

            }

            Text {

                id: minute

                text: "00"

                font.family:digitalFont.name

                font.bold:true

                smooth:true

                font.pixelSize:28

                anchors.centerIn:parent

            }



        }



        Rectangle{

            width:5

            height:(((parentContainer.width*24)/100))

            gradient: Gradient{

                GradientStop{color:"gray"; position:0}

                GradientStop{color:"white"; position:0.5}

                GradientStop{color:"gray"; position:1.0}

            }

            Text {

                text: ":"

                font.family:digitalFont.name

                font.bold:true

                smooth:true

                font.pixelSize:28

                anchors.centerIn:parent

            }



        }





        Rectangle{

            id:secondContainer

            width:(((parentContainer.width*24)/100))

            height:(((parentContainer.width*24)/100))

            gradient: Gradient{

                GradientStop{color:"gray"; position:0}

                GradientStop{color:"white"; position:0.5}

                GradientStop{color:"gray"; position:1.0}

            }

            Text {

                id: second

                text: "00"

                font.family:digitalFont.name

                font.bold:true

                smooth:true

                font.pixelSize:28

                anchors.centerIn:parent

            }

        }



        Rectangle{

            width:5

            height:(((parentContainer.width*24)/100))

            gradient: Gradient{

                GradientStop{color:"gray"; position:0}

                GradientStop{color:"white"; position:0.5}

                GradientStop{color:"gray"; position:1.0}

            }

            Text {

                text: ":"

                font.family:digitalFont.name

                font.bold:true

                smooth:true

                font.pixelSize:28

                anchors.centerIn:parent

            }



        }







        Rectangle{

            id:milliSecondContainer

            width:(((parentContainer.width*24)/100))

            height:(((parentContainer.width*24)/100))

            gradient: Gradient{

                GradientStop{color:"gray"; position:0}

                GradientStop{color:"white"; position:0.5}

                GradientStop{color:"gray"; position:1.0}

            }

            Text {

                id: milli

                text: "00"

                font.family:digitalFont.name

                font.bold:true

                smooth:true

                font.pixelSize:28

                anchors.centerIn:parent

            }

        }

    }









    Timer{

        id:clock

        interval:50

        triggeredOnStart:true

        onTriggered: clock.updateTime()

        repeat:true



        function updateTime()

        {

            if(timer.milliSeconds >= 950)

            {

                timer.milliSeconds = 0;

                if(timer.seconds == 59)

                {

                    timer.seconds = 0;

                    if(timer.minutes == 59)

                    {

                        timer.minutes = 0;

                        if(timer.hours == 59)

                            clock.running=false;

                        else

                            timer.hours++;



                    }

                    else

                        timer.minutes++;

                }

                else

                    timer.seconds++;

            }

            else

                timer.milliSeconds = timer.milliSeconds+50;

            if(timer.milliSeconds == 0)

                milli.text = "000";

            else

                milli.text = timer.milliSeconds;

            if(timer.seconds == 0)

                second.text = "00";

            if(timer.seconds < 10)

                second.text = '0' + timer.seconds

            else

                second.text = timer.seconds;

            if(timer.minutes == 0)

                minute.text = "00";

            if(timer.minutes < 10)

                minute.text = '0' + timer.minutes;

            else

                minute.text = timer.minutes;



            if(timer.hours == 0)

                hour.text = "00";

            if(timer.hours < 10)

                hour.text = '0' + timer.hours;

            else

                hour.text = timer.hours;

        }

    }





}



Used QML component for NewLap: NewLap.qml (Best viewed in Landscape view)
 
import Qt 4.7



 Rectangle {

     property alias text: textItem.text

     width: textItem.width + 4

     height: 12

     border.width: 1

     radius: 5

     smooth: true

     opacity:0

     gradient: Gradient {

         GradientStop { position: 0.0; color: "darkGray" }

         GradientStop { position: 0.5; color: "black" }

         GradientStop { position: 1.0; color: "darkGray" }

     }



     Text {

         id: textItem

         anchors.centerIn: parent

         smooth:true

         color: "white"

     }

 }

Used QML component for NewLap: NewLap.qml (Best viewed in Landscape view)

import Qt 4.7



 Rectangle {

     property alias text: textItem.text

     width: textItem.width + 4

     height: 18

     border.width: 1

     radius: 5

     smooth: true

     opacity:0

     gradient: Gradient {

         GradientStop { position: 0.0; color: "darkGray" }

         GradientStop { position: 0.5; color: "black" }

         GradientStop { position: 1.0; color: "darkGray" }

     }



     Text {

         id: textItem

         anchors.centerIn: parent

         smooth:true

         color: "white"

     }

 }


The Javascript code  that has been used to create the application logic is just embedded into the QML code. It is a much simple program and I have done it right after my Hello World! program in QML. And thats the beauty of QML.


Additional Note:
  • I have written it using the Qt version 4.7.0, but after Qt 4.7.1 you can use import QtQuick 1.0 and thats recommended too.
  • Also, in this I have hardcoded the Animations for Buttons but its not necessary. You can use Behaviour, States or Transitions for the same effect with a much better & short code.
  • In the main.cpp file I have calculated the screen width and height to set the application output to full screen. I will show it in the next post.
  • As you can see, I have not hardcoded  most of the QML items width and height and most of its been relative to the screen size. So make thing look better I have created two versions of the same above QML files. One for a Portrait view, and another for Landscape view.
  • When the width of the screen is more, the QML file optimized for Landscape view is used. For example, in Nokia E Series mobiles, and vice versa.

No comments:

Post a Comment

Your Ad Here