当前位置:编程学习 > 网站相关 >>

Vaadin Web应用开发教程(32):UI布局-Panel

Panel 为带有边框和标题的简单容器类,它的客户区为一布局对象,其缺省布局方式为VerticalLayout,可以通过setContent来修改缺省布局。

Panel的标题可以由图标和文字构成.


[java] 
// Create a panel with a caption.  
final Panel panel = new Panel("Contact Information"); 
panel.addStyleName("panelexample"); 
  
// The width of a Panel is 100% by default, make it  
// shrink to fit the contents.  
panel.setWidth(Sizeable.SIZE_UNDEFINED, 0); 
  
// Create a layout inside the panel  
final FormLayout form = new FormLayout(); 
  
// Have some margin around it.  
form.setMargin(true); 
  
// Add some components  
form.addComponent(new TextField("Name")); 
form.addComponent(new TextField("Email")); 
  
// Set the layout as the root layout of the panel  
panel.setContent(form); 

// Create a panel with a caption.
final Panel panel = new Panel("Contact Information");
panel.addStyleName("panelexample");
 
// The width of a Panel is 100% by default, make it
// shrink to fit the contents.
panel.setWidth(Sizeable.SIZE_UNDEFINED, 0);
 
// Create a layout inside the panel
final FormLayout form = new FormLayout();
 
// Have some margin around it.
form.setMargin(true);
 
// Add some components
form.addComponent(new TextField("Name"));
form.addComponent(new TextField("Email"));
 
// Set the layout as the root layout of the panel
panel.setContent(form);


对于Panel来说,如果其大小为“未定义”,那么它会自动适应其所包含的UI组件的大小。但如果它有固定大小而其中所需显示内容过大,则会自动显示滚动条。
如下例在Panel中显示一幅图像:

 

[java] 
// Serve the image from the theme  
Resource rsrc = new ThemeResource("img/embedded-journalist.jpg"); 
         
// Display the image without caption  
Embedded image = new Embedded(null, rsrc); 
image.setSizeUndefined(); // Actually the default  
  
// The panel will give it scrollbars. The root layout  
// (VerticalLayout) must have undefined width to make the  
// horizontal scroll bar appear.  
Panel panel = new Panel("Embedding"); 
panel.setWidth("400px"); 
panel.setHeight("300px"); 
panel.getContent().setSizeUndefined(); 
panel.addComponent(image); 
  
layout.addComponent(panel); 

// Serve the image from the theme
Resource rsrc = new ThemeResource("img/embedded-journalist.jpg");
       
// Display the image without caption
Embedded image = new Embedded(null, rsrc);
image.setSizeUndefined(); // Actually the default
 
// The panel will give it scrollbars. The root layout
// (VerticalLayout) must have undefined width to make the
// horizontal scroll bar appear.
Panel panel = new Panel("Embedding");
panel.setWidth("400px");
panel.setHeight("300px");
panel.getContent().setSizeUndefined();
panel.addComponent(image);
 
layout.addComponent(panel);

\
Panel的滚动条也可以使用程序来控制,首先通过 setScrollable(true) 打开滚动条控制,然后使用 setScrollTop()和setScrollLeft()来控制滚动条的位置。

 

[java] 
final Panel panel = new Panel("Scrolling Panel"); 
panel.setHeight("300px"); 
panel.setWidth("400px"); 
panel.getContent().setHeight("1000px"); 
panel.setScrollable(true); 
         
layout.addComponent(panel); \
 
HorizontalLayout scrollButtons = new HorizontalLayout(); 
layout.addComponent(scrollButtons); 
         
Button scrollUp = new Button("Scroll Up"); 
scrollUp.addListener(new Button.ClickListener() { 
    public void buttonClick(ClickEvent event) { 
        int scrollPos = panel.getScrollTop() - 250; 
        if (scrollPos < 0) 
            scrollPos = 0; 
        panel.setScrollTop(scrollPos); 
    } 
}); 
scrollButtons.addComponent(scrollUp); 
         
Button scrollDown = new Button("Scroll Down"); 
scrollDown.addListener(new Button.ClickListener() { 
    public void buttonClick(ClickEvent event) { 
        int scrollPos = panel.getScrollTop(); 
        if (scrollPos > 1000) 
            scrollPos = 1000; 
        panel.setScrollTop(scrollPos + 250); 
    } 
}); 
scrollButtons.addComponent(scrollDown); 

final Panel panel = new Panel("Scrolling Panel");
panel.setHeight("300px");
panel.setWidth("400px");
panel.getContent().setHeight("1000px");
panel.setScrollable(true);
       
layout.addComponent(panel);

HorizontalLayout scrollButtons = new HorizontalLayout();
layout.addComponent(scrollButtons);
       
Button scrollUp = new Button("Scroll Up");
scrollUp.addListener(new Button.ClickListener() {
    public void buttonClick(ClickEvent event) {
        int scrollPos = panel.getScrollTop() - 250;
        if (scrollPos < 0)
            scrollPos = 0;
        panel.setScrollTop(scrollPos);
    }
});
scrollButtons.addComponent(scrollUp);
       
Button scrollDown = new Button("Scroll Down");
scrollDown.addListener(new Button.ClickListener() {
    public void buttonClick(ClickEvent event) {
        int scrollPos = panel.getScrollTop();
        if (scrollPos > 1000)
            scrollPos = 1000;
        panel.setScrollTop(scrollPos + 250);
    }
});
scrollButtons.addComponent(scrollDown);

 \

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,