Best Practice for filling row elements?

awiese2007

I would like to have a simple 2 column row with a Label followed by a TextField and this TextField is supposed to "fill" the row to the full screen width...code looks something like that:

@ Column {
id: addPageSheetCol
anchors.top: parent.top
width: addPage.width

            Row {
                Label {
                    text: 'Title'
                    anchors.verticalCenter: parent.verticalCenter
                }
                TextField {
                    id: newItemTitle
                    placeholderText: 'Enter the title'

                }
            }

}@

Now I am struggeling with setting the appropriate width for newItemTitle. Margins and paddings are supposed to be dependent on UiConstants...is "width: parent.width - IDOFLABEL.width" the recommended way to go?

qgil

No idea whether it is a best practice, but have you tried this?

@Row {
Label {
text: 'Title'
width: parent.width * 0.2 // or whatever % you want to take
anchors.verticalCenter: parent.verticalCenter
}
TextField {
id: newItemTitle
width: parent.width * 0.8 // or whatever % you want to take
placeholderText: 'Enter the title'

                }
            }@

Then you can deal with the separation between both objects with anchor & anchor.margin.

At least this is how I've do it in a similar case - without the Column - Row though.

By the way, the Label doc page says "The Label component is used to display textual information throughout the UI. The Label is a private component and not intended for 3rd party developers." No idea whether this is true or a bug in the documentation but why do you need it?

I'd say forget about UiConstants (because we don't really know what that is) and just stick to what looks good to you.

awiese2007

@qgil

nice...didn't think of using percent, although it is so obvious.

But actually that is not what I wish to do. The label is of various width because of the different text length (i18n) and I just want to have the TextField fill the remaining width of the row. I am somehow reluctant to give any element a hardcoded unique id just to accomplish such a layout related task (still wishing there was a CSS selector kind of feature, e.g. parent.children(0).width)...But it seems there is no other way to accomplish it.

Regarding UiConstants...I really want them because as far as I understand these will assure that your app will blend in nicely into the whole user experience of the platform...they define margins, font sizes and colors etc. to assure a consistent look and feel...and I really really like the look and feel of the N950 ;-)

Diph

At least meego-ux-components (meego.gitorious.org) contains LayoutTextItem which resizes to its given text: https://meego.gitorious.org/meego-ux/meego-ux-components/blobs/master/src/components/common/LayoutTextItem.qml

I couldn't find similar component from qt-components.

qgil

I am missing something like this LayoutTextItem too, thanks for the reference.

awiese2007, knowing better what you want to do would help. If this is only for one row then the Column/Raw setup feels like an overkill and you could do it simpler just playing with the right anchors. If you expect to have many rows, then you could consider a ListView.

I can't help gettingthe right width automatically for Label, but an idea to at least not bother about the width of your newItemTitle is to not refer to any width: property and set something like

@anchors {
left: yourLabel.right
leftMargin: 10
right: parent.right
rightMargin: 10
}@

You need an id for the Label, but they come for free so I don't see the problem using them. Otherwise you can use a ListView with a model and you can update everything dynamically.

Diph

qgil is right. Text element tries to set width and height automatically if properties are not set.

@Text {
id: title
anchors {top: parent.top; left: parent.top; bottom: parent.bottom }
}

TextEdit {
anchors {top: parent.top; left: title.right; right: parent.right; bottom: parent.bottom }
}@

awiese2007

A picture can tell more than 1000 words, right :)

!http://imageshack.us/photo/my-images/155/qmlrowwidth.jpg/(Example for desired TextField width within a Row)!

"Direct Link to Image":http://imageshack.us/photo/my-images/155/qmlrowwidth.jpg/

Diph

There's typo in my example (left: parent.top -> left: parent.left), but other than that it should work. Add some anchor margins also.

E: I don't have Harmattan SDK (are you using that?) installed so I can't test with TextField.

awiese2007

Diph's solution (using the left and right anchors to stretch the TextField) works fine...I recommend :)