Как сделать вертикальную компоновку виджетов с рамкой с помощью GWT 2.4? - PullRequest
Новая
       25

Как сделать вертикальную компоновку виджетов с рамкой с помощью GWT 2.4?

0 голосов
/ 23 ноября 2011

Я использую GWT 2.4 и uiBinder.

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

Виджеты располагаются так, как я хотел, используя вертикальные панели, но опция границы недоступна, если только я не хочу размещать границы вокруг каждого элемента с помощью свойства borderwidth.

Вот код uiBinder: 

<g:HTMLPanel ui:field="mainPanel">
         <g:VerticalPanel ui:field="verticalPanel" styleName="{style.center}">
                        <g:Label ui:field="titleLabel"></g:Label>
                        <g:Label ui:field="loggedInUserLabel" text="You are logged in as: "> </g:Label>
                        <g:Label ui:field="userNameLabel" styleName="{style.spacer-bottom}"></g:Label>

                        <g:FormPanel ui:field="formPanel" styleName="{style.spacer-bottom}">
                        <g:FileUpload ui:field="fileUpload"></g:FileUpload>
                        </g:FormPanel>

                        <g:Label ui:field="Label" text="Please select:"></g:Label> 

                        <g:ListBox ui:field="ListBox" styleName="{style.spacer-bottom}" visibleItemCount='5'> 
                            <g:item value="-1">-- Please select item(s) below: --</g:item>
                        </g:ListBox>

                        <g:Button ui:field="Button" styleName="{style.button}" text="Calculate"></g:Button> 

                        <g:HorizontalPanel ui:field="horizontalPanel"  styleName="{style.spacer-top}">
                            <g:cell width='5em' horizontalAlignment="ALIGN_LEFT">
                                <g:Button ui:field="cancelButton" styleName="{style.exitcancelbutton}"  text="Cancel"></g:Button>
                            </g:cell>
                            <g:cell width='5em' horizontalAlignment="ALIGN_RIGHT">
                                <g:Button ui:field="exitButton" styleName="{style.exitcancelbutton}" text="Exit"></g:Button>
                            </g:cell>                   
                        </g:HorizontalPanel>
                </g:VerticalPanel>
    </g:HTMLPanel>

Неужели я спроектировал это неправильно, я имею в виду использование неправильной панели, для того, что я пытаюсь сделать?

Ответы [ 2 ]

0 голосов
/ 30 ноября 2011

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

.mainPanel {
            width: 400px ;
            margin-left: auto ;
            margin-right: auto ;
            border: 1px solid black;
            padding: 2px;
            margin-bottom:6px;
        }

и затем я использую верхнюю панель, которая является моим основным контейнером (HTMLPanel), и применяю к ней стиль: 

<g:HTMLPanel ui:field="mainPanel" styleName="{style.mainPanel}">
            <table width="30%" align="center">
                <tr> etc...

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

0 голосов
/ 25 ноября 2011

Вы можете установить границу ширины полосы вертикальной панели, чтобы все добавленные в нее виджеты отображались так, как если бы она имела границу.

...