hbox/vbox problemas de alinhamento de ZK framework
Pergunta
Eu estou tendo alguns problemas com Hbox e Vbox layout.Eu sei que eles se comportam um pouco como DIVs, mas eu simplesmente não consigo alignt-los do jeito que eu quero.
Eu tentei adicionar DIVs, separadores, pack, alinhamento, a largura, de cada tipo de solução, mas não consigo fazê-lo funcionar.
Este é o norte do meu layout, e eu só quero que ele em duas partes:O da esquerda, que contém a maior parte dos componentes, é tudo alinhar à esquerda com alguns spacement
E o da direita, que só vai ter algumas opções de exportação, e é tudo centralizado.
Eu ia postar uma imagem, mas eu não tenho enought rep.
Aqui é a parte do código que eu estou tentando fazer o trabalho:
<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>
É muito simples.Eu preciso de um div para a esquerda, o texto alinhado à esquerda, bem E outro para a direita, com o texto centralizado.Tanto no sime horizontal linhe.Eu não posso fazer isso aconteceu.
Solução
É isso que você quer?
<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>
Outras dicas
Ok, resolveu o meu problema do layout.Eu sou um programador java, não é um web designer, então provavelmente deve haver uma solução melhor, mas aqui está o que eu fiz:
<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>
Eu tinha ninho para outro borderlayout dentro da minha primeira É um pouco demais, mas funcionou muito bem para mim.