使用Grails 2.3.9和Vaadin插件7.3.9
class MyUI extends UI {
@Override
protected void init(VaadinRequest vaadinRequest) {
VerticalLayout layout = new VerticalLayout()
layout.setMargin(true)
SignInForm signInForm = new SignInForm()
layout.addComponent(signInForm)
layout.setComponentAlignment(signInForm, Alignment.MIDDLE_CENTER)
layout.setSizeFull()
setContent(layout)
}
}
自定义组件
class SignInForm extends CustomComponent {
Panel p = new Panel()
public SignInForm() {
p.setSizeUndefined()
Label label = new Label("test");
p.setContent(label);
setCompositionRoot(p);
}
}
看起来是这样的:
如何将自定义组件水平居中？
将自定义组件放置在垂直布局中。设置未定义的自定义组件的大小。将垂直布局的大小设置为满
public void init(VaadinRequest request) {
VerticalLayout vLayout = new VerticalLayout();
SignInComponent signInComponent = new SignInComponent();
vLayout.addComponent(signInComponent);
vLayout.setSizeFull();
vLayout.setComponentAlignment(signInComponent, Alignment.MIDDLE_CENTER);
this.setContent(vLayout);
class SignInComponent extends CustomComponent {
public SignInComponent() {
Panel p = new Panel();
p.setSizeUndefined();
Label label = new Label("test");
p.setContent(label);
this.setSizeUndefined();
this.setCompositionRoot(p);
}
}
或
使用面板而不是自定义布局：
public void init(VaadinRequest request) {
VerticalLayout vLayout = new VerticalLayout();
SignInPanel signInPanel = new SignInPanel();
vLayout.addComponent(signInPanel);
vLayout.setSizeFull();
vLayout.setComponentAlignment(signInPanel, Alignment.MIDDLE_CENTER);
this.setContent(vLayout);
}
class SignInPanel extends Panel {
public SignInPanel() {
this.setSizeUndefined();
Label label = new Label("test");
this.setContent(label);
}
}
如果有人需要-如何以最少的UI类使用来集中自定义组件（需要导航器组件）：
组件：
public class LoginPanel extends Panel {
private TextField loginField;
private PasswordField passField;
private Button signInBtn;
public LoginPanel(){
initComponents();
buildLoginPanel();
}
private void initComponents(){
<omitted>
}
public void buildLoginPanel(){
<omitted>
}
使用组件的视图：
public class LoginView extends VerticalLayout implements View {
private LoginPanel loginPanel;
@Override
public void enter(ViewChangeListener.ViewChangeEvent event) {
}
public LoginView(LoginPanel loginPanel){
setSizeFull();
addComponent(loginPanel);
setComponentAlignment(loginPanel,Alignment.MIDDLE_CENTER);
}
}
用户界面入口点:
@Override
protected void init(VaadinRequest request) {
Navigator navi = new Navigator(UI.getCurrent(),this);
navi.addProvider(viewProvider);
navi.navigateTo("login");
}
完成此操作后的附言-您的组件将被集中
页（page的缩写）如果有人不喜欢在某个地方使用Navigator，只需删除所有地方的视图，而不是< code > navigator.navaigateTo(...)使用< code > set content(new LoginView())或类似的东西
希望有人这会有所帮助
