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

您可以设置verticalpanel的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...

它位于页面的中心，并且有我想要的边框。我一般都倾向于习惯的桌面布局，但它似乎适合我想要的东西。

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

2 个答案: