如何使用 GWT 2.4 对带有边框的小部件进行垂直布局？

Question

我正在使用 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>

我是否设计错误，我的意思是使用错误的面板来实现我想要做的事情？

Answer 1

您可以为垂直面板的 borderwidth 设置边框，以便添加到其中的所有小部件都将显示为好像有边框一样。

Answer 2

好吧，这个问题是我自己想出来的。作为一名 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...

它位于页面的中心，并具有我想要的边框。我通常出于习惯而倾向于表格布局，但它似乎很适合我想要的东西。