Vaadin framework : Ph 2: Server-Side framework, ch1: xây dựng ứng dụng web Server-Side

nasural

Active Member
11/2/11
379
87
28
Xây dựng UI
UI, là thành phần thiết yếu của một ứng dụng web sử dụng Vaadin framework, UI có thể được xem như là cả một trang web, khi xây dựng UI, sẽ có một layout nền, gọi là content, các thành phần khác như: button, check box... sẽ được thiết kế trên layout này, content của UI có thể thay đổi bởi các layout khác nhau. Để set và thay đổi content cho UI, sử dụng phương thức setContent(Layout content).
PHP:
@SuppressWarnings("serial")
public class MyvaadinprojectUI extends UI {

    @Override
    protected void init(VaadinRequest request) {
        // layout content
        VerticalLayout content = new VerticalLayout();
        content.setSizeFull(); // Use entire window
        setContent(content);  // Attach to the UI
        // Add some component
        content.addComponent(new Label("Hello!"));
        /* Một layout khác, layout này cũng được xem như 1 component và sẽ thêm vào content layout
        * Layout này sẽ được dùng để bố trí các component khác, ở đây sẽ là là kiểu horizotally
        */
        HorizontalLayout hor = new HorizontalLayout();
        hor.setSizeFull(); // Use all available space
        // tạo tree và table
        Tree tree = new Tree("My Tree");
        tree.addItem("a");
        tree.addItem("a1");
        tree.setParent("a1", "a");
        tree.addItem("b");
        tree.addItem("b1");
        tree.setParent("b1", "b");
        tree.addItem("b2");
        tree.setParent("b2", "b");
        tree.addItem("c");
        //thêm vào hor
        hor.addComponent(tree);
        //tạo table
        Table table = new Table("My Table");
        table.addContainerProperty("column a", String.class,  null);
        table.addContainerProperty("column b", String.class,  null);
        table.addContainerProperty("column c", String.class, null);
        table.addItem(new Object[]{"a1","b1","c1"},new Integer(1));

        //table.setSizeFull();
        hor.addComponent(table);

        hor.setExpandRatio(table, 1); // Expand to fill
        content.addComponent(hor);
        content.setExpandRatio(hor, 1); // Expand to fill
    }
}


Compositing Components
Trong khi lập trình, chúng ta có thể tạo ra một component riêng, có sẵn những thành phần nào đó, khi ấy, chúng ta tạo một lớp mới kế thừ từ lớp CustomeComponent, khi một lớp kế thừa, chúng ta cũng có thể sử dụng một layout làm nền bằng phương thức, setCompositeRoot(Layout rootLayout):
PHP:
class MyView extends CustomComponent {
    TextField entry  = new TextField("Enter this");
    Label    display = new Label("See this");
    Button    click  = new Button("Click This");
    public MyView() {
        Layout layout = new VerticalLayout();
        layout.addComponent(entry);
        layout.addComponent(display);
        layout.addComponent(click);
        setCompositionRoot(layout);
        setSizeFull();
    }
}
Accessing UI, Page, Session, and Service
Chúng ta có thể truy xuất các UI, thông tin Page, Session, service thông qua các phương thức sau:
PHP:
// Set the default locale of the UI
UI.getCurrent().setLocale(new Locale("en"));
// Set the page title (window or tab caption)
Page.getCurrent().setTitle("My Page");
// Set a session attribute
VaadinSession.getCurrent().setAttribute("myattrib", "hello");
// Access the HTTP service parameters
File baseDir = VaadinService.getCurrent().getBaseDirectory();
( bây giờ dễ nhỉ, hồi đó khó lắm)
Để tạo mới một component riêng, click chuột phải vào package muốn tạo, chọn new->orther->vaadin->vaadin composite điền tên và ok
Sau đó, nhấn chuột phải vào class mới tạo->open with->Vaadin editor để mở plugin design của Vaadin


Trong quá trình mở phần design, có thể sẽ có thông báo thiếu xul runner của mozilla, các bạn nhớ cài vô thêm.