I problemi di allineamento Hbox / VBox nel quadro ZK
Domanda
Sto avendo alcuni problemi con il layout Hbox e VBox. So che si comportano un po 'come i div, ma non riesco ad allinearli come voglio.
Ho cercato di aggiungere div, separatori, pack, allineare, larghezza, ogni tipo di soluzione alternativa, ma non riesco a farlo funzionare.
Questo è il nord del mio layout, e lo voglio solo in due pezzi: La sinistra, che contiene la maggior parte dei componenti, è tutto allineato a sinistra con alcuni spaziamenti
E quello giusto, che avrà solo alcune opzioni di esportazione, ed è tutto centralizzato.
Pubblicherei un'immagine, ma non ho subito un rappresentante.
Ecco la parte del codice che sto cercando di fare il lavoro:
<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>
.
È piuttosto semplice. Ho bisogno di un div a sinistra, testo allineato a sinistra Aswell E un altro a destra, con il testo centralizzato. Sia sul lign orizzontale SIME. Non riesco a farcela.
Soluzione
è questo quello che vuoi?
<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>
. Altri suggerimenti
OK, risolto il mio problema di layout. Sono un programmatore Java, non un web designer, quindi probabilmente dovrebbe esserci una soluzione migliore, ma qui è quello che ho fatto:
<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>
.
Ho dovuto nidificare un altro borderlayout all'interno del mio primo È un po 'troppo, ma ha funzionato bene per me.