ZK 프레임 워크의 HBOX / VBOX 정렬 문제

Question

Hbox와 Vbox 레이아웃에 문제가 있습니다. 나는 그들이 다소 divs와 같이 행동하는 것을 알고 있지만, 나는 그들을 내가 원하는 방식으로 정렬 할 수 없다는 것을 알고있다.

DIV, 구분 기호, 팩, 정렬, 너비, 모든 종류의 해결 방법을 추가하려고했지만 작업을 수행 할 수 없습니다.

이것은 나의 레이아웃의 북쪽이며, 나는 단지 그것을 두 조각으로 원합니다. 왼쪽에는 구성 요소의 대부분을 포함하는 왼쪽 하나는 모두 왼쪽에있는 왼쪽에 정렬

와 오른쪽 하나는 단지 몇 가지 내보내기 옵션을 가지고 있으며 모두 중앙 집중식입니다.

이미지를 게시하지만, 나는 rep을 얻지 못했습니다.

여기서 일하는 코드의 일부입니다.

    <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가 필요하며, 왼쪽 aswell에 정렬 된 텍스트 중앙 집중식 텍스트로 오른쪽에있는 또 다른 하나. Sime Horizontal Lign에서. 나는 그냥 일어날 수 없다.

Answer 1

이게 당신이 원하는 것입니까?

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

.

Answer 2

확인, 배치 문제를 해결했습니다. 저는 웹 디자이너가 아닌 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>

.

나는 첫 번째 안에 다른 borderlayout을 둥지려고해야했습니다. 그것은 조금 너무 많지 만, 저를 위해 잘 일했습니다.