1

I'm having some issues with Hbox and Vbox layout. I know they behave somewhat like DIVs, but I just can't alignt them the way I want.

I have tried to add DIVs, separators, pack, align, width, every kind of workaround, but can't seem to make it work.

This is the north of my layout, and I just want it in two pieces: The left one, that contains the most part of the components, it's all align to the left with some spacement

And the right one, that will just have some exporting options, and it's all centralized.

I'd post an image, but I don't have enought rep.

Here is the part of code I'm trying to make work: 

    <hbox width="100%">
        <vbox width="80%">
                <hbox>
                    <label value="${labels.processos}" />
                        <separator spacing="20px" />
                    <combobox id="cmbNovo" model="@load(vm.loadCombobox)"
                            readonly="true">
                        <comboitem label="@load(each)" />
                    </combobox>
                        <separator spacing="20px" />
                    <a onClick="@command('editar', status=each)"
                                label="${labels.alterarvisao}"/>
                        <separator spacing="20px" />
                    <button id="novaVisao" label="${labels.novavisao}"
                        onClick="@command('novo')" />
                        <separator spacing="20px" />
                </hbox>
                    <separator height="10px" />
                    <button id="novo" label="${labels.message.novoprocesso}"
                        onClick="@command('novo')" />
                    <separator height="10px" />
                </vbox>
                    <separator spacing="100%" />
                <vbox pack="end" align="end" width="20%" >
                    <hbox >
                        <label value="${labels.common.exportar}" />
                    </hbox>
                    <hbox>
                        <label value="${labels.common.exportar}" />
                        <a onClick="@command('editar', status=each)"
                                label="${labels.common.pdf}"/>
                        <a onClick="@command('editar', status=each)"
                                label="${labels.common.xls}"/>
                    </hbox>
                    <hbox>
                        <label value="${labels.common.exportar}" />
                        <a onClick="@command('editar', status=each)"
                                label="${labels.common.pdf}"/>
                        <a onClick="@command('editar', status=each)"
                                label="${labels.common.xls}"/>
                    </hbox>
                </vbox>
            </hbox>

It's pretty simple. I need one div to the left, text aligned to the left aswell And another one to the right, with centralized text. Both on the sime horizontal lign. I just can't make it happend.

Danilo Scanferla
  • 91
  • 1
  • 2
  • 7
  • What you can do is make a link to imagehack or something so we can see picture. I'm trying to help you but no idea how they must be. the second hbox, you need everyting at the same line there? en under that line a button? – chillworld Jan 10 '14 at 06:27
  • Dude, if you could help me again that would be awesome ! =P http://stackoverflow.com/questions/21338933/zk-inner-class-property-not-readable – Danilo Scanferla Jan 24 '14 at 18:00

2 Answers2

1

Is this what you want?

<hbox hflex="1" spacing="20" width="100%" widths="80%,20%">
        <vbox align="center" pack="start" spacing="20">
            <hbox spacing="5px">
                <label value="${labels.processos}" />
                <combobox id="cmbNovo" model="@load(vm.loadCombobox)"
                          readonly="true">
                    <comboitem label="@load(each)" />
                </combobox>
                <a onClick="@command('editar', status=each)"
                   label="${labels.alterarvisao}"/>
                <button id="novaVisao" label="${labels.novavisao}"
                        onClick="@command('novo')" />
            </hbox>
            <cell/>
            <cell>
                <button id="novo" label="${labels.message.novoprocesso}"
                    onClick="@command('novo')" />
            </cell>
        </vbox>
        <vbox pack="center" align="center" vflex="1" spacing="20" >
            <cell>
                <label value="${labels.common.exportar}" />
            </cell>
            <cell>
                <label value="${labels.common.exportar}" />
                    <a onClick="@command('editar', status=each)"
                            label="${labels.common.pdf}"/>
                    <a onClick="@command('editar', status=each)"
                            label="${labels.common.xls}"/>
            </cell>
            <cell>
                <label value="${labels.common.exportar}" />
                    <a onClick="@command('editar', status=each)"
                            label="${labels.common.pdf}"/>
                    <a onClick="@command('editar', status=each)"
                            label="${labels.common.xls}"/>
            </cell>
        </vbox>
    </hbox>
chillworld
  • 4,207
  • 3
  • 23
  • 50
  • @Danilo your welcome (just for fun, was I close to what you wanted?) – chillworld Jan 10 '14 at 12:11
  • Actually yeah, you were pretty close! I'd have to make some adjustments, but that's really what I wanted! Was the vflex that worked for it ? – Danilo Scanferla Jan 10 '14 at 12:14
  • Nah, you can remove the vflex. Trick is is the first vbox where i set the withs for the 2 places. Also live seperator there so you don't need to put seperators between components. Wich do you use now? – chillworld Jan 10 '14 at 22:02
0

Ok, solved my layout problem. I'm a java programmer, not a web designer, so probably there should be a better solution, but here is what I did:

             <borderlayout>
                <west width="80%" style="border:none">
                    <vbox>
                        <separator height="20px" />
                        <hbox>
                            <label value="${labels.processos}" />
                            <separator orient="vertical" spacing="50px" />
                            <combobox id="cmbNovo"
                                model="@load(vm.loadCombobox)" readonly="true">
                                <comboitem label="@load(each)" />
                            </combobox>
                            <separator orient="vertical" spacing="50px" />
                            <a onClick="@command('editar', status=each)"
                                label="${labels.alterarvisao}" />
                            <separator orient="vertical" spacing="50px" />
                            <button id="novaVisao"
                                label="${labels.novavisao}" onClick="@command('novo')" />
                        </hbox>
                        <separator height="10px" />
                        <button id="novo"
                            label="${labels.message.novoprocesso}"
                            onClick="@command('novo')" />
                    </vbox>
                </west>
                <east width="20%" style="border:none; align:center;">
                    <tablelayout columns="5">
                        <tablechildren colspan="5"
                            style="text-align:center">
                            <label value="${labels.common.exportar}" />
                        </tablechildren>

                        <tablechildren colspan="3">
                            <label
                                value="${labels.export.todasaspaginas}" />
                        </tablechildren>
                        <tablechildren>
                            <a onClick="@command('editar', status=each)"
                                label="${labels.common.pdf}" />
                        </tablechildren>
                        <tablechildren>
                            <a onClick="@command('editar', status=each)"
                                label="${labels.common.xls}" />
                        </tablechildren>

                        <tablechildren colspan="3">
                            <label value="${labels.export.estapagina}" />
                        </tablechildren>
                        <tablechildren>
                            <a onClick="@command('editar', status=each)"
                                label="${labels.common.pdf}" />
                        </tablechildren>
                        <tablechildren>
                            <a onClick="@command('editar', status=each)"
                                label="${labels.common.xls}" />
                        </tablechildren>
                    </tablelayout>
                </east>
            </borderlayout>

I had to nest another borderlayout inside my first one It's a bit too much, but worked just fine for me.

Danilo Scanferla
  • 91
  • 1
  • 2
  • 7