Вопросы выравнивания Hbox / VBox в ZK Framework
Вопрос
У меня есть некоторые проблемы с помощью Hbox и Vbox Payout. Я знаю, что они ведут себя несколько, как Divs, но я просто не могу выровнять их так, как я хочу.
Я пытался добавить divs, сепараторы, пакет, выровнять, ширину, все виды обработки, но не может сделать его работать.
Это север моей макета, и я просто хочу это на двух частях: Левый, который содержит большую часть компонентов, все совпадает влево с некоторой смещением
И правый, который просто будет иметь некоторые варианты экспорта, и все это централизовано.
Я бы опубликовал изображение, но я не в целях реп.
Вот часть кода, которую я пытаюсь сделать работу:
<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 влево, текст выровнен к левому И еще один справа, с централизованным текстом. Оба на симу горизонтально-лигнит. Я просто не могу сделать это ... / P>
Решение
Это то, что вы хотите?
<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>
. Другие советы
ОК, решил мою проблему макета. Я программист 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>
.
Мне пришлось гнездить еще одно пограничное в моем первом Это слишком много, но работала просто для меня.