Проблемы с выравниванием hbox / vbox в ZK framework

У меня проблемы с макетом Hbox и Vbox. Я знаю, что они ведут себя как DIV, но я просто не могу управлять ими так, как хочу.

Я пытался добавить DIV, разделители, pack, align, width, все способы обхода, но не могу заставить его работать.

Это север моего макета, и я просто хочу, чтобы он состоял из двух частей: левая, содержащая большую часть компонентов, выровнена по левому краю с некоторым отступом.

И правильный, у которого будет только несколько опций экспорта, и все это централизовано.

Я бы выложил изображение, но у меня недостаточно репутации.

Вот часть кода, которую я пытаюсь заставить работать:

    <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>

Все очень просто. Мне нужен один div слева, текст также выровнен по левому краю и еще один справа, с централизованным текстом. Оба на симе горизонтальные линии. Я просто не могу этого добиться.


alignment zk hbox vbox
person Danilo Scanferla    schedule 09.01.2014    source источник
comment
Что вы можете сделать, так это сделать ссылку на imagehack или что-то в этом роде, чтобы мы могли видеть картинку. Я пытаюсь помочь тебе, но понятия не имею, какими они должны быть. второй hbox, вам нужно все на той же строке? en под этой строкой кнопка?   -  person chillworld    schedule 10.01.2014
comment
Чувак, если бы ты снова мог мне помочь, это было бы здорово! = P stackoverflow.com/questions/21338933/   -  person Danilo Scanferla    schedule 24.01.2014

Ответы (2)


arrow_upward
1
arrow_downward

Это то, что вы хотите?

<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>
person chillworld    schedule 10.01.2014
comment
@Danilo, добро пожаловать (просто для удовольствия, я был близок к тому, что вы хотели?) - person chillworld; 10.01.2014
comment
На самом деле да, вы были довольно близки! Придется внести некоторые коррективы, но это действительно то, что я хотел! Сработал ли vflex? - person Danilo Scanferla; 10.01.2014
comment
Нет, вы можете удалить vflex. Уловка - это первый vbox, в котором я установил значения для двух мест. Также там живет разделитель, поэтому вам не нужно ставить разделители между компонентами. Что вы используете сейчас? - person chillworld; 11.01.2014

arrow_upward
0
arrow_downward

Хорошо, проблема с макетом решена. Я программист java, а не веб-дизайнер, поэтому, наверное, должно быть лучшее решение, но вот что я сделал:

             <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>

Мне пришлось вложить еще один бордерлейут в свой первый. Это многовато, но у меня все сработало.

person Danilo Scanferla    schedule 10.01.2014
comment
Я рассмотрю ваше решение в понедельник. Сейчас у него выходные, а времени не так много дома. - person chillworld; 10.01.2014