maemo.org - Talk

maemo.org - Talk (https://talk.maemo.org/index.php)
-   Development (https://talk.maemo.org/forumdisplay.php?f=13)
-   -   Difference between main.qml and mainpage.qml? (https://talk.maemo.org/showthread.php?t=83348)

hotnikkelz 2012-03-30 17:12
Difference between main.qml and mainpage.qml?
 
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 2012-03-30 17:23
Re: Difference between main.qml and mainpage.qml?
 
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.

hotnikkelz 2012-03-30 17:53
Re: Difference between main.qml and mainpage.qml?
 
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 2012-03-30 17:57
Re: Difference between main.qml and mainpage.qml?
 
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.

qwazix 2012-03-30 18:17
Re: Difference between main.qml and mainpage.qml?
 
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.

hotnikkelz 2012-03-30 19:01
Re: Difference between main.qml and mainpage.qml?
 
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

qwazix 2012-03-30 19:09
Re: Difference between main.qml and mainpage.qml?
 
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.

hotnikkelz 2012-03-30 20:25
Re: Difference between main.qml and mainpage.qml?
 
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 2012-03-30 21:39
Re: Difference between main.qml and mainpage.qml?
 
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 2012-03-31 12:25
Re: Difference between main.qml and mainpage.qml?
 
Quote:
Originally Posted by hotnikkelz (Post 1186245)
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)

hotnikkelz 2012-03-31 14:11
Re: Difference between main.qml and mainpage.qml?
 
This so weird! I had that exact same code (except for the column part), and my searchbox kept shrinking. Is the SDK buggy at times or something? I restarted my pc and now it works. That's rather peculiar. Thanks a lot btw, greatly appreciate the time you took to reply to my posts :)

I tried putting the column and the header dissappeared and the searchbox went halfway off the screen at the top. I replaced Nextelement with a red rectangle similar to the header. Very unexpected results

hotnikkelz 2012-03-31 19:45
Re: Difference between main.qml and mainpage.qml?
 
My battles continue :)
I think the mingw 4 4 emulator is finicky. For example I was playing with xmllistmodel and list view, to pull an xml from tvrage's api feed and the results were ugly. The xml has 2 results to list, it only lists one result, and it just puts huge ugly text on the screen without following the general theme of the device. Seems like i really gotta wait till I get my N9 to really play with this stuff :(

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"


            TextField {
                  id: search
                  placeholderText: "Search"
                  maximumLength: 80
                  anchors.centerIn: parent
                  width: 448
                }
            Rectangle {
                  id: nextBox
                  anchors.top: header.bottom
                  height: 72
                  width: header.width
                  color: "teal"
                }
            XmlListModel{
                  id: data
                  source: "http://services.tvrage.com/feeds/search.php?show=buffy"
                  query: "/Results/show"

                  XmlRole {name: "name"; query: "name/string()"}
                  XmlRole {name: "country"; query: "country/string()"}
                  XmlRole {name: "seasons"; query: "seasons/string()"}
            }
            ListView {
                width:50 ; height: 12
                model: data
                delegate: Text { text: name}
                anchors.top: nextBox.bottom

            }
          }

        }

qwazix 2012-03-31 20:49
Re: Difference between main.qml and mainpage.qml?
 
Quote:
Originally Posted by hotnikkelz (Post 1186483)
This so weird! I had that exact same code (except for the column part), and my searchbox kept shrinking. Is the SDK buggy at times or something? I restarted my pc and now it works. That's rather peculiar. Thanks a lot btw, greatly appreciate the time you took to reply to my posts :)

I tried putting the column and the header dissappeared and the searchbox went halfway off the screen at the top. I replaced Nextelement with a red rectangle similar to the header. Very unexpected results
That is because I forgot to specify width and height for the column. Add
Code:
anchors.fill : parent
and it should be fixed. I've got to go, I will check your latest post later see if I can help


All times are GMT. The time now is 09:13.

vBulletin® Version 3.8.8