Spec Widget positioning

I'm trying to build a toolbar widget that contains two fixed width buttons, a variable width textInputBox followed by two more fixed width buttons. I'm not sure how to mix fixed and variable width widgets.

Can someone give me an idea on how to do this?

Thanks,

A small comment with regard to the Spec booklet: Some chapters have not yet been worked on, but the layout chapter is done so I heartily recommend it!

Johan

do you think that this example should be added to the layout chapter?

Stef

Hi,

you normally control the (relative) sizes through the layout, e.g.

ui := DynamicComposableModel new.

ui instantiateModels: #(text TextInputFieldModel btn1 ButtonModel btn2 ButtonModel).

ui btn1 label: 'Button 1'.

ui btn2 label: 'Button 2'.

layout := SpecColumnLayout composed

newRow: [ :row |

row

add: #text;

add: #btn1 width: 60;

add: #btn2 width: 60

] height: ComposableModel toolbarHeight;

newRow: [ :row | ].

ui openWithSpecLayout: layout.

If you want want more details, I suggest you read the Spec Booklet https://ci.inria.fr/pharo-contribution/view/Books/job/BuildingUIWithSpec/lastSuccessfulBuild/artifact/book-result/SpecBooklet.pdf

A lot of effort has been put into it recently to update it, so it should be up-to-date.

Peter

On Wed, Aug 17, 2016 at 8:53 PM, Brad Selfridge <[hidden email]> wrote:

I'm trying to build a toolbar widget that contains two fixed width buttons, a
variable width textInputBox followed by two more fixed width buttons. I'm
not sure how to mix fixed and variable width widgets.

Can someone give me an idea on how to do this?

Thanks,



-----
Brad Selfridge
--
View this message in context: http://forum.world.st/Spec-Widget-positioning-tp4911599.html
Sent from the Pharo Smalltalk Users mailing list archive at Nabble.com.

I do not think so. The chapter is already big and should contain the solution Brad is looking for. Let’s see if he is satisfied, as a case study :-)

Oki for me.

I lost track this is why I asked.

I do not think so. The chapter is already big and should contain the solution Brad is looking for. Let’s see if he is satisfied, as a case study :-)

--

Does this mail seem too brief? Sorry for that, I don’t mean to be rude! Please see http://emailcharter.org .

Johan Fabry   -   http://pleiad.cl/~jfabry
PLEIAD and RyCh labs  -  Computer Science Department (DCC)  -  University of Chile

On Aug 17, 2016, at 16:46, stepharo <[hidden email]> wrote:

Johan 

do you think that this example should be added to the layout chapter?

Stef

Ok, I've tried several ways of making this work, but I haven't hit the magic button yet. Here is my layout example:

defaultSpec
        <spec: #default>

        ^SpecLayout composed
                newRow: [ :row1 |
                        row1
                                newColumn: [ :col1 |
                                        col1 newRow: [ :row2 |
                                                row2 add: #openButton; add: #createButton]] width: 160;
                                newColumn: [ :col2 |
                                        col2 newRow: [ :row3 |
                                                row3 add: #descriptorName]] width: 200;
                                newColumn: [ :col3 |
                                        col3 newRow: [ :row4 |
                                                row4 add: #saveButton; add: #abandonButton]] width: 160]
                        height: self toolbarHeight
                yourself

This is the closest that I can get to what I want. The two left hand buttons are fixed width and are attached to the left side of the row. The two right hand buttons are fixed width and are attached to the right side of the row. The center textInputField is attached to the left side of its' column. When I try to float it in its' column, it simply disappears.

When the view is expanded and contracted, the buttons stay attached as desired.

I don't know how to float the textInputField column to expand and contract while leaving the left and right button columns to remain fixed.

I’m sorry it is a bit hard to catch your meaning without having all the context.

I think that what you need is to remove the width: 200 argument to the second column creation. In fact you don’t need to add a row there since there is only one widget. So in summary, I would try it with the following:
newColumn: [ col2 | col2 add: #descriptorName];

--
Does this mail seem too brief? Sorry for that, I don’t mean to be rude! Please see http://emailcharter.org .

Johan Fabry   -   http://pleiad.cl/~jfabry
PLEIAD and RyCh labs  -  Computer Science Department (DCC)  -  University of Chile

That did it. My buttons do not resize but the #descriptorName does. Exactly what I wanted.

Thank you for your help.