Active Topics

 


Page 1 of 2 1 2
Reply
Thread Tools
hotnikkelz is offline hotnikkelz
2012-03-30 , 17:12
Posts: 241 | Thanked: 324 times | Joined on Dec 2010
#1
Hi all, I've been trying to wrap my head around these 2 qml files that are automatically created when i start a new n9 project. I still don't understand it.
Can someone break this down into stupid for a newbie trying to learn QML
Thank you
 
ajalkane is offline ajalkane
2012-03-30 , 17:23
Posts: 1,313 | Thanked: 2,978 times | Joined on Jun 2011 @ Finland
#2
It's just convention. Main.qml Is like in C main.c, the starting point of execution. Mainpage.qml is created in main and contains the first page.
__________________
My N9/N950 projects:
 

The Following User Says Thank You to ajalkane For This Useful Post:
hotnikkelz is offline hotnikkelz
2012-03-30 , 17:53
Posts: 241 | Thanked: 324 times | Joined on Dec 2010
#3
So under what circumstances would I be adding to main.qml? If i were to add a page where would I place it?
Again, i'm totally newbie to this, so stuff like C and main.c is like Latin to me hahaha
 
Slocan is offline Slocan
2012-03-30 , 17:57
Posts: 324 | Thanked: 371 times | Joined on Dec 2009 @ Vancouver, BC
#4
main.qml contains the PageStackWindow window (see docs, but it's the container, dealing with menus, status bar, rotation, and the stack of pages).
MainPage.qml contains a Page object, which is the actual content that is being displayed.

If your app is single page, then you edit in MainPage.qml . If you want multiple pages (that sliding effect when opening a new "window"), you'd add the new Page into a new .qml file, and reference it in main.qml.
 

The Following User Says Thank You to Slocan For This Useful Post:
qwazix's Avatar
qwazix is offline qwazix
2012-03-30 , 18:17
Moderator | Posts: 2,622 | Thanked: 5,447 times | Joined on Jan 2010
#5
One thing that bugged me for some days until I figured it out, is how components reference one another.

PageStackWindow, which is in main.qml is your application main window. It has the toolbar, hosts the menu, and nothing else.

Now in this PageStackWindow you can insert pages like this

Code:
PageStackWindow{
    Page {
         Text { text: "page1" }
    }

    Page {
         Text { text: "page2" }
    }
}
Since pages usually hold lots of code it is useful to be in other qml files. Now here comes the question, how do you include external files in QML?

If your file starts with a capital letter, it is a component. All components in the directory you are working in are available just like any other built in component e.g. Button

So the guys at the Qt project, created a component named MainPage whose definition is in MainPage.qml and made an instance of it first thing in our PageStackWindow.

You can call MainPage more than once and you can pass parameters to it. If you add
Code:
property string myPageTitle
in the beginning of MainPage.qml

and

Code:
Text { text: myPageTitle }
inside the Page element in the same file

and modify the declaration in main.qml to look like this

Code:
MainPage { myPageTitle: "page1" }
You will see a page with "page1" written in it.
__________________
Proud coding competition 2012 winner: ρcam
My other apps: speedcrunch N9 N900 Jolla 末 contactlaunch 末 timenow

Nemo UX blog: Grog
My website: qwazix.com
My job: oob
Last edited by qwazix; 2012-03-30 at 18:22.
 

The Following User Says Thank You to qwazix For This Useful Post:
hotnikkelz is offline hotnikkelz
2012-03-30 , 19:01
Posts: 241 | Thanked: 324 times | Joined on Dec 2010
#6
Thank you guys it is much clearer to me now I will have more questions when i play with it some more


edit:
*sigh*
What's the difference between toolbar and tab bar
How do I get the header?? What is the name of that component?

I would like to get a searchbox, in the middle of the header that is persistent so when the page scrolls (if at all) then it will always be visible
Last edited by hotnikkelz; 2012-03-30 at 19:34.
 
qwazix's Avatar
qwazix is offline qwazix
2012-03-30 , 19:09
Moderator | Posts: 2,622 | Thanked: 5,447 times | Joined on Jan 2010
#7
You are welcome. Do play with it. I find coding with QML and qt-components addictive. Excellent user interfaces are just a few lines away, and I haven't played with theming and custom components yet. There's a whole world of opportunity.

A nice project would be to build a fremantle specific qt-components package which uses the default maemo theme, instead of the meego one.
__________________
Proud coding competition 2012 winner: ρcam
My other apps: speedcrunch N9 N900 Jolla 末 contactlaunch 末 timenow

Nemo UX blog: Grog
My website: qwazix.com
My job: oob
 
hotnikkelz is offline hotnikkelz
2012-03-30 , 20:25
Posts: 241 | Thanked: 324 times | Joined on Dec 2010
#8
Seems like there is no header component!!! wth, it's littered all over the base UI, i wonder why there isn't one.
That's rather peculiar....it means I'll have to use rectangle instead....but then if I want landscape...hmmm so many questions lol
 
hotnikkelz is offline hotnikkelz
2012-03-30 , 21:39
Posts: 241 | Thanked: 324 times | Joined on Dec 2010
#9
I tried to get a search box that occupies almost the length of the header, but I think it is a bit messy, also the height is an arbitrary height I put. Is there a cleaner way to achieve this? It's quite hardcoded ratch right now. The default textfield element that the SDK provides is probably like half the width of the screen....here's the code
Code:
Page {
    tools: commonTools

    Label {
        id: label
        anchors.centerIn: parent
        text: qsTr("Hello world!")
        visible: false
    }

    Rectangle {
        id: header
        height: 72
        width: parent.width
        color: "light blue"

        Rectangle {
        id: boundbox
        height: 50
        anchors.centerIn: parent
        width: 448
        color: "transparent"

            TextField {
                id: searchBox
                placeholderText: "Search"
                maximumLength: 80
                anchors.fill: boundbox
               }
           }
    }
}
 
qwazix's Avatar
qwazix is offline qwazix
2012-03-31 , 12:25
Moderator | Posts: 2,622 | Thanked: 5,447 times | Joined on Jan 2010
#10
Originally Posted by hotnikkelz View Post
I tried to get a search box that occupies almost the length of the header, but I think it is a bit messy, also the height is an arbitrary height I put. Is there a cleaner way to achieve this? It's quite hardcoded ratch right now. The default textfield element that the SDK provides is probably like half the width of the screen....here's the code
Code:
Page {
    tools: commonTools

    Label {
        id: label
        anchors.centerIn: parent
        text: qsTr("Hello world!")
        visible: false
    }

    Rectangle {
        id: header
        height: 72
        width: parent.width
        color: "light blue"

        Rectangle {
        id: boundbox
        height: 50
        anchors.centerIn: parent
        width: 448
        color: "transparent"

            TextField {
                id: searchBox
                placeholderText: "Search"
                maximumLength: 80
                anchors.fill: boundbox
               }
           }
    }
}
Code:
Page {
    tools: commonTools

    Label {
        id: label
        anchors.centerIn: parent
        text: qsTr("Hello world!")
        visible: false
    }
    Column{
        Rectangle {
            id: header
            height: 72
            width: parent.width
            color: "light blue"

            TextField {
                id: searchBox
                placeholderText: "Search"
                width: 448
                maximumLength: 80
                anchors.centerIn: parent
            }
        }

        NextElement{
        }
     }
}
It looks good to me, try the above code, maybe it will work with fewer lines. You just need to wrap everything in a column, so that the next element goes below your search box (without column, they are going to overlap)
__________________
Proud coding competition 2012 winner: ρcam
My other apps: speedcrunch N9 N900 Jolla 末 contactlaunch 末 timenow

Nemo UX blog: Grog
My website: qwazix.com
My job: oob
 

The Following User Says Thank You to qwazix For This Useful Post:
Reply
Page 1 of 2 1 2

« Previous Thread | Next Thread »

 
Forum Jump


All times are GMT. The time now is 21:45.

Contact Us - Home - Archive - Top